/* DataDOMAINS  Search */

.dadoSearchSelect {
    min-width: 280px;
}
.dadoSelector__control {
    border-radius: 6px !important;
    max-height: 36px;
    overflow: hidden;
    border-style: hidden !important;
    box-shadow: var(--dadoselectorshadow);
    background-color: var(--dadoselectorbg) !important;
    transition: background-color 0.5s, box-shadow 0.5s;
}
.dadoSelector__control:hover {
    border-color: #FF6600 !important;
}
.dadoSelector__menu {
    background: #E5E5E5 !important;
}
.dadoSearchBar {
    line-height: 1.1em;
}
.dadoSearchBar:hover {
    background: #dff2f0 !important;
}
.dadoPlacer {
    font-size: 0.9em;
}

.dadoSelector__menu {
    background: #FFF !important;
}

.dadoSelector__menu {
    z-index: 999999 !important;
}
.dadoSelector__input-container,
.dadoSelector__input {
    color:#FF6600 !important;
    font-weight: 500 !important;
}




/* DataDOMAIN ITEM PAGE STYLES  */
.dadoMainBox {
    width: 100%;
}

.dadoNameBox { 
    padding: 10px;
    height: 55px;
    width: calc(100% - 60px);
    margin: 5px 20px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dadoName {
    font-size: 2.2em;
    font-weight: 600;
    padding: 0 0 0 20px;
    line-height: 1em;
    color: var(--text-color);
    text-shadow: var(--textshadowlyt);
    transition: color 0.5s, text-shadow 0.5s;
}
.dadoMeta {
    color: var(--darksamegrey);
}
.dadoAlias {
    padding: 0 30px 0 0;
    width: auto;
    max-width: 310px;
}



.dataRow { 
    padding: 0;
    width: calc(100% - 40px);
    margin: 0 20px 35px;
    display: flex;
    align-items: center;
    position: relative;
}
.dataRowOverlay {
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    color: #FFF;
    padding: 25px;
    border-radius: 16px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Ensure it's above other content */ 
}
.dataRowLoading {
    display: flex;
    justify-content: center;
    align-items: center;
}


.voteData {
    width: 30%;
}
.sourceData {
    width: 31.5%;
}
.otherData {
    width: 38.5%;
}
.donutHldr {
    border-radius: 110px 8px 8px;
    height: 260px;
    width: calc(100% - 55px);
    margin: 0;
    padding: 15px;
    position: relative;
    display: flex;
}
.donutHldr .graphoverlay {
    position: relative;
    height: auto;
    color: var(--darksamegrey);
}
.donutHldr .donutlegend {
    width: 160px;
    height: auto;
    margin: 45px 0 0 8px;
    left: auto;
    right: 0;
    box-shadow: none;
}
.voteData .donutHldr .donutlegend {
    width: 145px;
}
.donutHldr .legendrow {
    margin: 0 0 7px 0;
}
.sourceData .donutHldr .legendrow {
    margin: 0 0 3px 0;
}
.voteData .votenumber {
    width: 40px;
}
.sourceData .votenumber {
    font-weight: 500;
    width: 45px;
    font-size: 14px;
    letter-spacing: -0.5px;
}
.voteData .votelabel {
    margin: 1px 12px 1px 0;
    height: 20px;
    letter-spacing: 1px;
}
.sourceData .votelabel {
    margin: 3px 12px 3px 0;
    font-weight: 500;
    width: 56px;
    font-size: 9px;
    display: flex;
    align-items: center;
    height: 15px;
    padding: 3px 0 2px;
}
.voteData .voteperc,
.sourceData .voteperc {
    width: 46px;
}

.sourceData .voteavg {
    padding: 10px 0 0 0;
}
.donutitle {
    font-size: 20px;
    font-weight: 700;
    position: absolute;
    top: 8px;
    right: 15px;
    width: 155px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: var(--textshadowlyt);
    color: var(--darksamegrey);
}
.donutarea {
    width: 180px;
    margin: 5px 2px 0 5px; 
    position: relative;
}
.sourceData .donutitle {
    width: 165px;
}
.donutarea canvas {
    position: relative;
    z-index: 10;
    background: #FFFFFF11;
    border-radius: 50%;
}
.otherDataTop {
    height: 140px;
    width: calc(100% - 32px);
    margin: 0 0 25px;
    padding: 6px 16px;
    display: flex;
    flex-direction: column;
}
.dataTopTitle {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-shadow: var(--textshadowlyt);
    color: var(--darksamegrey);
}
.mostrecent {
    font-size: 12px;
    font-weight: 400;
}
.dataTopData {
    width: 100%; 
    height: 115px;
    position: relative;
    padding: 3px 0 0;
    display: flex;
}
.sidelegend {
    width: 25px;
    font-size: 7pt;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 0 21px;
    margin: -5px 0 0;
}
.maingraf {
    width: calc(100% - 50px);
}
.lftlegend {
    text-align: right;
}
.rytlegend {
    text-align: left;
}
.recharts-tooltip-wrapper {
    z-index: 1000 !important;
}
.recharts-layer.recharts-area {
    opacity: 0.6;
}
.recharts-layer.recharts-area:hover {
    opacity: 1;
}

.recharts-layer.recharts-area:first-child { 
    opacity: 0 !important;
}

.recharts-layer.recharts-area:last-of-type {
    opacity: 1 !important;
    filter: drop-shadow(1px 1px 5px rgb(255 255 255 / 0.8))
            drop-shadow(-1px -1px 5px rgb(255 255 255 / 0.8)) !important;
}





.dataTopData .recharts-responsive-container { 
    height: 117px !important;
}
.recharts-responsive-container .custom-tooltip {
    background: #333;
    color: #FFF;
    font-size: 11px;
    padding:  10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 8px #737B9977;
    border-radius: 6px;
}
.recharts-responsive-container .custom-tooltip .label {
    font-size: 11px;
    font-weight: 600;
    margin: 0 ;
    padding: 0;
}
.custom-tooltip ul.statslist {
    list-style: none;
    padding: 0;
    margin: 5px 0 0;
}
.custom-tooltip ul.statslist li {
    padding: 3px 4px; 
    display: flex;
    align-items: center;
}
.custom-tooltip ul.statslist li:nth-last-child(2) {
    padding: 8px 4px 1px;
}
.tiplab {
    width: 32px;
    font-size: 12px;
    padding: 1px 0;
    margin: 0 12px 0 0;
    color: #FFF;
    font-weight: 700;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    line-height: 1em;
}

.custom-tooltip .totvoters,
.custom-tooltip .avgvotescore { 
    font-size: 11px;
    font-weight: 700;
    margin: 0;
}
.custom-tooltip .entryValue,
.custom-tooltip .entryVotes,
.custom-tooltip .entryPerc {
    font-weight: 500;
    margin: 0 2px;
}
.custom-tooltip .entryVotes {
    width: 35px;
    text-align: left;
}
.custom-tooltip .entryPerc {
    width: 40px;
    text-align: right;
}
.custom-tooltip .totvoters {
    color: #FF9900;
}


.otherDataBtm {
    display: flex;
    justify-content: space-between;
}
.otherDataBtmBox {
    width: calc(33.3% - 27px);
    height: 100px;
    margin: 0;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.otherDataBtm .votersNav.otherDataBtmBox:hover {
    background: #FFFFFF22;
    cursor: pointer;
}
.totvot,
.posira,
.trendi {
    font-weight: 700;
    text-shadow: var(--textshadowlyt);
    color: var(--darksamegrey);
}
.totvot {
    letter-spacing: -0.5px;
}
.otherDataBtmBox strong {
    font-size: 2.5em; 
    font-weight: 600;
    height: -webkit-fill-available;
    padding: 0;
    letter-spacing: -1px;
    text-shadow: var(--textshadowlyt);
    color: var(--text-color);
}
.btmBoxInfo {
    display: flex;
    width: 100%;
    height: -webkit-fill-available;
}
.btmBoxInfo.refresher {
    align-items: center;
    justify-content: center;
}
.refreshButn {
    font-size: 0.75em;
    border-radius: 5px;
    background: var(--background-color);
    color: #f60;
    display: flex;
    align-items: center;
    padding: 6px 9px;
    border: none;
    gap: 7px;
}
.refreshButn:hover {
    background: #FF6600;
    color: #fff;
    cursor: pointer;
}

.btmBoxGraf {
    width: 52%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 3%;
}
.boxGrafWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}
.btmBoxOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    font-size: 0.6em;
    font-weight: 700;
}

.btmBoxDeet {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.boxDeetTop {
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    padding: 0 0 2px 5px;
    text-shadow: var(--textshadowlyt);
    color: var(--text-color);
}
.boxDeetTop sup {
    font-weight: 500;
    font-size: 0.5em; 
}


.boxDeetBtm {
    font-weight: 400;
    font-size: 0.9em;
}


.dado_content {
    padding: 0;
    width: calc(100% - 40px);
    margin: 0 20px 25px;
    display: flex;
}
.dadoPostLftCol {
    width: calc(72% - 30px);
    margin: 0 30px 0 0;
}
.dadoMetaRytCol {
    width: 28%;
}

.dadoVoteBox {
    padding: 10px 20px 35px;
    border-radius: 8px;
    margin: 0 0 21px;
}

.voteBoxTitle {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 15px;
    letter-spacing: -.5px;
    border-bottom: var(--borderbottomcolor);
    box-shadow: var(--borderboxshadow);
    text-shadow: var(--textshadowlyt);
    color: var(--darksamegrey);
    padding: 0px 0 10px;
    transition: border-bottom 0.5s, box-shadow 0.5s, text-shadow 0.5s;
}
.lftBoxTitle {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 35px;
    letter-spacing: -.4px;
    padding: 25px 0;
    border-bottom: var(--borderbottomcolor);
    box-shadow: var(--borderboxshadow);
    text-shadow: var(--textshadowlyt);
    color: var(--darksamegrey);
    transition: border-bottom 0.5s, box-shadow 0.5s, text-shadow 0.5s;
}
.rytBoxTitle {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px !important;
    letter-spacing: -0.5px;
    line-height: 1;
    padding: 0 0 12px;
    border-bottom: var(--borderbottomcolor);
    box-shadow: var(--borderboxshadow);
    text-shadow: var(--textshadowlyt);
    color: var(--darksamegrey)
}

.voteBoxInput  {
    padding: 10px;
    text-align: center;
    margin: 20px auto 30px;
    border-radius: 10px;
    width: fit-content;
    min-width: 500px;
} 
.voteBoxButns {
    width: 500px;
    margin: 0 auto;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.commentBox {

}
textarea.userDadoCommentBox {
    background: #E5E5E500;
    border: 1px solid #737B9944;
    min-width: 500px;
    max-width: 500px;
    min-height: 40px;
    color: #737b99;
    font-family: 'Poppins';
    field-sizing: content;
}
button.commentSubmit {
    border: none;
    font-weight: 600;
    align-self: end;
}
button.commentSubmit.orngbg.disabled-btn {
    background: #999999;
    font-weight: 400;
}
button.commentSubmit.orngbg.disabled-btn:hover {
    background: #999999;
}
button.commentSubmit.orngbg:hover {
    background: #00bb00;
    cursor: pointer;
    font-weight: 600;
}

.loginRater {
    display: flex;
    position: relative;
}
.loginRater figure {
    margin: 0 15px 0 0;
    width: 70px;
    height: 70px;
    padding: 0;
    line-height: 1;
}
.loginRater figure:after  {
    box-shadow: inset -2px -2px 6px #fff, inset 2px 2px 5px #0009;
    content: "";
    display: block;
    height: 70px;
    width: 70px;
    position: absolute;
    top: 0;
    border-radius: 50%;
}
.loginRater figure img {
    object-fit: cover;
    width: 70px;
    height: 70px;
}

.userCTA {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.9em;
}

.namebox {
    font-size: 1.6em;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 6px;
    background: var(--nameboxbg);
    color: #FFF;
    text-shadow: 1px 1px 0 #000;
}
.dadoNameBox .namebox {
    box-shadow: 2px 2px 8px #00000088;
}


.dadoPostBox {
    display: flex;
    flex-direction: column;
    padding: 13px 15px;
    border-radius: 8px;
    margin: 0 0 30px;
}
.postSep {
    width: calc(100% - 200px);
    height: 1px;
    margin: 30px 100px;
    border-bottom: var(--borderbottomcolor);
    box-shadow: var(--borderboxshadow);
    transition: border-bottom 0.5s, box-shadow 0.5s;
}
.postMetaRow  {
    display: flex; 
}
.postAvatar {
    width: 80px;
    margin: 0 15px 0 0;
    position: relative;
}
.postAvatar figure {
    margin: 0;
}
.postAvatar figure:after  {
    box-shadow: inset -2px -2px 6px #fff, inset 2px 2px 5px #0009;
    content: "";
    display: block;
    height: 80px;
    width: 80px;
    position: absolute;
    top: 0;
    border-radius: 50%;
}
.postAvatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.postMeta {
    display: flex;
    width: calc(100% - 140px);
    flex-direction: column;
    color: #737B99;
}
.postMetaTop {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0 11px;
    font-size: 0.95em;
}
.postMetaTop .metaSep {
    margin: 0 5px;
    font-weight: 300;
    text-shadow: 1px 1px 0 #FFF;
}

.userPriv {
    display: flex;
    align-items: center;
    justify-content: center;
}

.postMetaBtm {
    display: flex;
}
.postViewBtn {
    background: #E5E5E5;
    padding: 4px 14px;
    font-size: 0.7em;
    border: 0;
    border-radius: 5px;
    color: #737b99;
    display: none;
}
.postViewBtn:hover {
    background: #737b99;
    color: #FFF;
    cursor: pointer;
}
.postSrc {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
}
.dadoPostPost {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(100% - 30px);
    background-color: var(--bgwytopacity);
    padding: 15px;
    border-radius: 8px;
    margin: 6px 0 12px;
    transition: background-color 0.5s;
}
.datatag {
    color: #FFF;
    padding: 4px 8px;
    font-weight: 600;
    border-radius: 6px;
    width: fit-content;
    text-shadow: 0.5px 0.5px 1px #000000BB;
}
.dadoPostEngagement {
    display: none;
    flex-direction: column;
}
.postEngageMeta {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 24px);
    padding: 0 12px;
    font-size: 0.9em;
}
.postEngageIcons {
    display: flex;
    align-items: center;
    gap: 6px;
}
.postComntIcons {
    display: flex;
    align-items: center;
    gap: 6px;
}
.postComntIcons svg,
.postEngageIcons svg {
    color: #FF6600;
    text-shadow: 1px 1px 0 #FFF;
}
.postComments {
    display: flex;
    flex-direction: column;
}






.dadoMetaRyt {
    padding: 15px;
    border-radius: 8px;
    margin: 0 0 25px;
}
.dadoMetaSocShare {
    display: flex;
    justify-content: space-between;
}
.socsharebutn {
    padding: 5px 2px 5px 8px;
    border-radius: 6px;
    width: 30%;
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: center;  
    gap: 5px;
    border: none;
}

.fbshare {
    background: #3B5998;
}
.xshare {
    background: #000000;
}
.linkedshare {
    background: #0072B1;
}

.dadoMetaMeta {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.dadoMetaMeta div {
    margin: 5px 0;
}

.dadoMetaImgs {

}
.dadoItmImg {
    width: 48%;
    margin: 1%;
    border-radius: 6px;
}
.dadoMetaBizInfo {

}
.dadoMetaTrends {

}




.topTenPosiList {
    display: flex;
    flex-direction: column;
}

.topTenPosiItem {
    display: flex;
    width: 100%;
    padding: 0;
    font-weight: 600;
    margin: 0 0 5px;
    font-size: .9em;
}
.topTenPosiItem.topTenHdr {
    font-weight: 800;
    font-size: 0.5em;
    text-align: center;
}
.topTenRankPos {
    width: 35px; 
    text-align: center;
}
.topTenRankItem {
    width: calc(100% - 135px);
    text-wrap: nowrap; 
    overflow: hidden;
}
.topTenRankScore {
    width: 50px;
    padding: 0 0 0 5px;
    text-align: center;
}
.topTenVoters {
    width: 50px;
    padding: 0 0 0 5px;
    text-align: center;
}



/*  DaDoAds  styling */
.dado_ad1 {
    display: flex;
    align-items: center;
    font-size: 0.6em;
    color: var(--darksamegrey);
    gap: 7px;
}
.dado_ad1 img {
    max-height: 55px;
    margin: 5px 10px 0;
}
.dado_ad2 {
    padding: 0;
    width: calc(100% - 40px);
    margin: 0 20px 35px; 
    border-radius: 8px;
    box-shadow: none;
}
.dado_ad3 {
    margin: 0 0 25px;
    padding: 0;
}
.dado_ad2_hldr,
.dado_ad3_hldr {
    padding: 0;
    width: 100%; 
    height: auto; 
}
.dado_ad2_hldr img,
.dado_ad3_hldr img {
    border-radius: 8px;
}
.dado_ad45 {
    display: none;
}