.dateselected
{
    padding: 4px 18px !important;
}

.ads-right .text-days
{
    font-size: 12px !important;
}

.filter-box
{
    border: 1px solid #dadce0;
    border-radius: 15px;
}


a:hover
{
    text-decoration: unset !important;
}

.filter-box span
{
    color: #5f6368;
    font-weight: 500;
    font-size: 12px !important;
}

.ads-panel
{
    height: 100% !important;
}

.overview-main
{
    overflow: scroll;
    height: 770px;
}

.overview-main .first-bar-overview button
{
    background-color: #1a73e8;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
    font-family: Google Sans,Roboto,Arial,sans-serif;
    font-size: .875rem;
    letter-spacing: .0107142857em;
    font-weight: 500;
    text-transform: none;
    color: white;
    border-radius: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.overview-main .first-bar-overview i
{
    font-size: 1.2rem;
}

.set-overivew-left
{
    width: 80px;
}

.overviewadd img
{
    width: 16px;
}

.overviewadd p
{
    color: #5f6368;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .025em;
    line-height: .875rem;
}

.overview-wrapper-1
{
    background-color: white;
    border-width: 0;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
    border-radius: 8px;
    height: 328px;
}

.overview-wrapper-1 .cateog-4 .set-col
{
    background-color: #fff;
    border-bottom: 1px solid;
    border-right: 1px solid;
    border-color: #e8eaed;
    color: #3c4043;
    min-width: 112px;
    max-width: 184px;
    height: 116px;
    cursor: pointer;
}

.overview-wrapper-1 .cateog-4 .set-col-1
{
    border-top-left-radius: 8px;
    background-color: #1a73e8 !important;
    border: 0 !important;
}

.bg-red
{
    background-color: #d93025 !important;
    border: 0 !important;
}


.overview-wrapper-1 .cateog-4 .set-col:hover
{
    background-color: #f1f3f4;
    box-shadow: inset 0 1px 1px #e8eaed;
}


.overview-wrapper-1 .cateog-4 .set-col input
{
    border: unset;
}

.overview-wrapper-1 .cateog-4 .set-col p
{
    border-radius: 4px;
    margin:  20px 8px 0 12px;
    max-height: inherit;
    padding: 8px;
    color: #3c4043;
    line-height: 1.25rem;
    font-size: .875rem;
    letter-spacing: .0142857143em;
    font-weight: 400;
    outline: unset;
}


.overview-wrapper-1 .cateog-4 .set-col span
{
    outline: unset;
}


.overview-wrapper-1 .cateog-4 .set-col-1 p
{
    color: white;
}

.overview-wrapper-1 .cateog-4 .set-col p i
{
    color: white;
}


.overview-wrapper-1 .cateog-4 .set-col .padding-set
{
    padding: 0px 20px;
    color: #3c4043;
    line-height: 2.5rem;
    font-size: 2rem;
    letter-spacing: 0;
    font-weight: 400;
}

/* .canvasjs-chart-tooltip label::before
{
    content: "";
    border-radius: 2px;
    height: 3px;
    width: 10px;
    display: inline-block;
    margin-left: 3px;
    margin-right: 8px;
    margin-top: 3px;
    margin-bottom: 3px;
    background: #ee1515;
} */
/* 
.canvasjs-chart-tooltip span
{
    padding-top: 10px;
    padding-bottom: 5px;
    color: #5f6368;
    line-height: 1.25rem;
    font-size: 0.95rem;
    letter-spacing: .0142857143em;
    font-weight: 400;
} */

.canvasjs-chart-tooltip p
{
    font-size: 0.9rem;
} 
.col-set-box 
{
    flex: 0 0 32.6%;
    max-width: 32.6%;
}

.overview-content .boxbox
{
    border-width: 0;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    color: #3c4043;
    cursor: default;
    margin: 8px;
    position: relative;
    transition: height 436ms cubic-bezier(0,0,.2,1);
    width: 488px;
    height: fit-content;
}

.overview-content .boxbox .box-head
{   
    background-color: #f8f9fa;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    max-height: 48px;
    min-height: 48px;
}

.overview-content .search-box .box-head .text
{   
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    color: #3c4043;
    line-height: 1rem;
    font-size: .75rem;
    letter-spacing: .025em;
    font-weight: 400;
}

.search-box .box-head .sort-by
{
    color: #5f6368;
    font-size: 13px;
}

.box-head .dropdown-match span
{
    border-bottom: 1px solid #dadce0;
    color: #5f6368;
    cursor: pointer;
    white-space: nowrap;
}

.search-box .head-title p
{
    line-height: 1.25rem;
    font-size: .875rem;
    letter-spacing: .0178571429em;
    font-weight: 500;
    color: #202124;
    padding: 16px 16px 0;
}


.search-box .click-wrapper span
{
    color: #202124;
    font-weight: 400;
    font-size: 14px;
}

.search-box .words-content 
{
    max-height: 224px;
    overflow: scroll;

}

.search-box .text-box
{
    line-height: 1.25rem;
    font-size: .875rem;
    letter-spacing: .0142857143em;
    font-weight: 400;
    color: #3c4043;
    align-items: center;
    border: 2px solid #dadce0;
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    height: 28px;
    margin: 2px;
    overflow: hidden;
    padding: 0 12px;
    text-overflow: ellipsis;
    white-space: nowrap;  
    border-color: rgb(178, 206, 251);
}


.search-box .text-box:hover
{
    background-color: rgb(154, 190, 249);
}


.search-box .text-box-1:hover
{
    background-color: rgb(43, 119, 243) !important;
}

.search-box .words-content :nth-child(1)
{
    border-color: rgb(43, 119, 243) !important;
}

.search-box .words-content :nth-child(2)
{
    border-color: rgb(115, 166, 247) !important;
}

.search-box .words-content :nth-child(3)
{
    border-color: rgb(154, 190, 249) !important;
}

.search-box .words-content :nth-child(4)
{
    border-color: rgb(154, 190, 249) !important;
}

.search-box .search-footer span
{
    color: #1a73e8;
    font-size: 13px;
    letter-spacing: .01em;
    line-height: normal;
    font-weight: 500;
}

.ads-box .ads-footer span
{
    color: #1a73e8;
    font-size: 13px;
    letter-spacing: .01em;
    line-height: normal;
    font-weight: 500;
}

.ads-box .ads-footer label
{
    color: #3c4043;
    cursor: default;
    font-size: 13px;
}

.search-box .search-footer label
{
    color: #3c4043;
    cursor: default;
    font-size: 13px;
}


.active
{
    font-weight: 500 !important;
}

.click-select-2
{
    cursor: pointer;
}

.click-select
{
    cursor: pointer;
}

.click-select:hover
{
    color: #202124;
    background: rgba(60,64,67,.04);
}

.click-select-2:hover
{
    color: #202124;
    background: rgba(60,64,67,.04);
}
.custom-border
{
    border-bottom: 2px solid #1a73e8;
}


.ads-box .box-head span
{
    color: #3c4043;
    line-height: 1rem;
    font-size: .75rem;
    letter-spacing: .025em;
    font-weight: 400;
}

.ads-box .ads-title i
{
    font-size: 8px;
    color: green;
}


.ads-box .ads-title span
{
    font-size: 12px;
    color: #1967d2;
    cursor: pointer;
}

.ads-box .ads-title label
{
    font-size: 13px;
    font-weight: 500;
    color: #1967d2;
    cursor: pointer;
}

.ads-items
{
    
}

.ads-box .mobile
{
    border-color: #fff;
    margin: auto 48px;
    padding: 8px 4px 0;
    border-style: solid;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    border-width: 32px 16px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}

.ads-box .mobile .camera
{
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 100%;
    height: 8px;
    left: 0;
    margin: -32px auto 16px;
    position: absolute;
    right: 0;
    top: 12px;
    transition: border-color 218ms cubic-bezier(0,0,.2,1);
    width: 8px;
}

.ads-box .mobile .inner-frame
{
    box-sizing: border-box;
    border: 1px solid #dadce0;
    border-bottom-width: 0;
    bottom: 0;
    left: 4px;
    position: absolute;
    right: 4px;
    height: 275px;
    top: 0;
    transition: border-color 218ms cubic-bezier(0,0,.2,1);
}

.ads-box .mobile .outer-frame
{
    box-sizing: border-box;
    border: 4px solid #dadce0;
    border-bottom-width: 0;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    bottom: 0;
    left: -12px;
    position: absolute;
    right: -12px;
    top: -32px;
    height: 305px;
    transition: border-color 218ms cubic-bezier(0,0,.2,1);
}

.ads-box .ads-cards
{
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
    margin: 8px;
    margin-top: 0;
    padding: 12px;
    position: relative;
    transition: box-shadow 218ms cubic-bezier(0,0,.2,1);
    font-size: 13px;
    line-height: 19px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    cursor: default;
}

.ads-box .ads-cards .header-content
{   
    font-size: 16px;
    font-weight: 400;
    width: 312px;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ads-box .ads-cards .header-content .text
{   
    color: #1a0dab;
    display: block;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
}


.ads-box .ads-cards .header-content .text p:hover
{   
    text-decoration: underline;
    cursor: pointer;
}

.ads-cards .header-content .ads-text .display
{
    background: #fff;
    border-radius: 2px;
    border: 1px solid #006621;
    color: #006621;
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-right: 7px;
    padding: 0 2px;
    vertical-align: baseline;
}

.ads-cards .header-content .ads-text span
{
    font-size: 14px;
    font-weight: 400;
    color: #006621;
    min-height: 19px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.border-x-s
{
    border-bottom: 1px solid #dadce0;
    margin: 8px -8px;
}

.ads-cards .description
{
    font-size: 13px;
    font-weight: 400;
    color: rgba(0,0,0,.87);
}

.ads-box .ads-footer
{
    box-shadow: 0 -2px 2px 0 rgb(0 0 0 / 0%), 0 -3px 1px -2px rgb(0 0 0 / 3%), 0 -1px 5px 0 rgba(0,0,0,.2);
}

.ads-box .ads-footer .footer-wrapper p
{
    color: #5f6368;
    text-align: left;
    font-size: 13px;
}

.ads-box .ads-footer .footer-wrapper .status
{
    color: rgba(0,0,0,.54);
    line-height: 1.25rem;
    font-size: .875rem;
    letter-spacing: .0142857143em;
    font-weight: 400;
}

.ads-box .ads-footer .footer-wrapper .result
{
    letter-spacing: .0178571429em;
    font-weight: 500;
    color: #202124;
    font-size: 18px;
}

.gender-wrapper .bar
{
    height: 52px;
    background-color: rgb(66, 131, 244);
    border: 1px solid #fff;
    box-sizing: border-box;
    display: block;
    transition-duration: 436ms;
    transition-property: background-color,height,width;
}

.gender-wrapper .bar1:hover
{
    border-color: #fff;
    background-color: #1a0dab!important;
    outline: none;
}

.gender-wrapper .bar2:hover
{
    border-color: #fff;
    background-color: #1a0dab!important;
    outline: none;
}
.gender-wrapper .graph
{
    color: #5f6368;
    font-weight: 400;
    font-size: 13px;
}

.gender-wrapper .description p
{
    color: #5f6368;
    font-weight: 400;
    font-size: 13px;
}

.gender-wrapper .gender-age .border-r
{
    border-right: 1px solid #9aa0a6;
}

.gender-wrapper .gender-age .box
{
    border: 1px solid #fff;
    box-sizing: border-box;
    display: block;
    height: 52px;
}

.gender-age .box-1
{
    background-color: rgb(126, 170, 247);
}

.gender-age .box-2
{
    background-color: rgb(63, 129, 243);
}

.gender-age .box-3
{
    background-color: rgb(92, 148, 245);
}

.gender-age .box-4
{
    background-color: rgb(212, 227, 252);
}

.gender-age .box-5
{
    background-color: rgb(241, 246, 254);
}

.gender-age .box-6
{
    background-color: rgb(250, 252, 255);
}

.gender-age .box-f-6
{
    background-color: rgb(250, 252, 255);
}

.gender-wrapper .age .r-box
{
    border: 1px solid #fff;
    box-sizing: border-box;
    display: block;
    width: 52px;
    background-color: rgb(66, 131, 244);
}

.gender-age .box:hover
{
    border-color: #80868b;
    outline: none;
}

.gender-wrapper .age .r-box:hover
{
    border-color: #fff;
    background-color: #1a0dab!important;
    outline: none;
}

.r-box-5
{
    height: 8px;
}

.r-box-6
{
    height: 4px;
}

/* 3rd progress bar */
.mask .fill-3 {
    clip: rect(0px, 9px, 18px, 0px);
    background-color: #188038   ;
  }
  
  .mask.full-3,
  .circle .fill-3 {
    animation: fill-3 ease-in-out 3s;
    transform: rotate(50deg);
  }
  
  @keyframes fill-3{
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(50deg);
    }
  }

  .circle-wrap {
    display: grid;
    grid-template-columns: repeat(1, 160px);
    grid-gap: 80px;
    width: 18px;
    height: 18px;
    background: #d5d8da;
    border-radius: 50%;
  }
  
  .circle-wrap .circle .mask,
  .circle-wrap .circle .fill-3 {
    width: 18px;
    height: 18px;
    position: absolute;
    border-radius: 50%;
  }
  
  .circle-wrap .circle .mask {
    clip: rect(0px, 18px, 18px, 9px);
  }
  
  .circle-wrap .inside-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    line-height: 120px;
    text-align: center;
    margin-top: 3px;
    margin-left: 3px;
    position: absolute;
    z-index: 100;
}

.get-start .check-list p
{
    color: #1a73e8;
    line-height: 1.25rem;
    font-size: .875rem;
    letter-spacing: .0142857143em;
    font-weight: 400;
}

.status-plus
{
    height: 16px;
    width: 16px;
    background: #1967d2;
    color: #fff;
    border-radius: 28px;
    border-width: 0;
}

.status-plus i
{
    font-size: 8px;
}


.keywrods-wrap
{
    border-bottom: 1px solid #dadce0;
    color: #5f6368;
    cursor: pointer;
}

.get-start .table-row .table-border
{
    border-top: 1px solid #dadce0;
}

.get-start .table-row:hover
{
    box-shadow: inset 0 57px 0 0 rgba(0,0,0,.06);
}

.get-start .table-row i
{
    font-size: 12px;
    color: green;
}

.get-start .table-row .table-border span
{
    line-height: 1.25rem;
    font-size: .875rem;
    letter-spacing: .0142857143em;
    font-weight: 400;
    color: #3c4043;
}

.get-start .table-row .table-border .name
{
    color: #1a73e8;
    font-size: 13px;
}

.get-start .footer span
{
    color: #1a73e8;
    font-size: 13px;
    letter-spacing: .01em;
    line-height: normal;
    font-weight: 500;
}

.get-start .footer p label
{
    color: #3c4043;
    cursor: default;
    font-size: 13px;
}

.all-camp
{
    line-height: 1.75rem;
    font-size: 1.375rem;
    letter-spacing: 0;
    font-weight: 400;
}


.bg-yellow
{
    background-color: #f9ab00 !important;
}

.bg-green
{
    background-color: #1e8e3e !important;

}

.bg-green p
{
    color: white !important;
}


/* ---------------------------- ADD ON for Overview Campaign -------------------------- */
.pencil-btn-span{
    display: none;
}

.pencil-btn img{
    width: 17px;
    height: auto;
}

.trash-btn-span{
    display: none;
}
.icon-container {
    display: none;
    align-items: center;
    justify-content: flex-start; 
}

.table-row:hover .icon-container {
    display: flex;
}

.icon-container a {
    margin-right: 20px; 
}

.icon-container a + a {
    margin-left: -5px; 
}

.pencil-btn img {
    width: 17px;
    height: auto;
}

.trash-btn svg {
    width: 17px;
    height: auto;
}
.dropdown-menu {
    display: none; /* Initially hidden */
    position: absolute; /* Position it absolutely inside the parent */
    right: 0; /* Align it to the right of the parent */
    top: 100%; /* Place the dropdown directly below the three dots */
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 0px;
    margin-top: 5px;
    z-index: 10; /* Ensure dropdown appears above other elements */
}

/* Optional: Styling to improve the dropdown appearance */
.dropdown-item {
    padding: 8px 16px;
    cursor: pointer;
    display: block;
}
/* --------------------------- ADD ON for Youtube / GDN dropdown for Overview Graph ----------------- */
.center-dropdown {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.graph-text-boxes:hover .center-dropdown {
    display: flex;
}
.center-dropdown .dropdown-content {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    min-width: 160px;
    z-index: 1;
}
.center-dropdown .dropdown-content .dropdown-icon {
    cursor: pointer;
    font-size: 24px;
    color: #5f6368;
}