/* body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
} */

@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css');

@media (max-width: 768px) {
    .container {
        padding-right: 0;
        padding-left: 0;
    }
    .o-rich-text__columns {
        padding-right: 10px;
        padding-left: 10px;
    }
}


#content-container {
    max-width: 102.5rem;
}

.cb-page-root p {
    color: #0f2d46 !important;
}

.cb-page-root .a-link__open-new-window,
.cb-page-root .a-link__open-new-window:after,
.cb-page-root .a-link__open-new-window:hover,
.cb-page-root .a-link__open-new-window:hover:after,
.cb-page-root .a-link__open-new-window:focus,
.cb-page-root .a-link__open-new-window:focus:after,
.cb-page-root .a-link__open-new-window:focus-visible,
.cb-page-root .a-link__open-new-window:focus-visible:after,
.cb-page-root .a-link__open-new-window:visited,
.cb-page-root .a-link__open-new-window:visited:after,
.user-guide-page .a-link__open-new-window,
.user-guide-page .a-link__open-new-window:after,
.user-guide-page .a-link__open-new-window:hover,
.user-guide-page .a-link__open-new-window:hover:after,
.user-guide-page .a-link__open-new-window:focus,
.user-guide-page .a-link__open-new-window:focus:after,
.user-guide-page .a-link__open-new-window:focus-visible,
.user-guide-page .a-link__open-new-window:focus-visible:after,
.user-guide-page .a-link__open-new-window:visited,
.user-guide-page .a-link__open-new-window:visited:after {
    color: #0b3b5f !important;
}

.cb-page-root .a-link__open-new-window::after,
.user-guide-page .a-link__open-new-window::after {
    content: "\f1c5";
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    margin-left: 0.3rem;
    vertical-align: baseline;
    line-height: 1;
}

.cb-page-root .a-link__open-new-window:empty::after,
.user-guide-page .a-link__open-new-window:empty::after {
    margin-left: 0;
    font-size: 1rem;
}

#dr-projects-tbody input[type="checkbox"],
#dr-projects-tbody-internal input[type="checkbox"],
#select-bcn-all {
    accent-color: #0b3b5f;
    border-color: #0b3b5f;
}

#dr-projects-tbody input[type="checkbox"]:checked,
#dr-projects-tbody-internal input[type="checkbox"]:checked,
#select-bcn-all:checked {
    background-color: #0b3b5f;
    border-color: #0b3b5f;
}

.cb-user-guide-link,
.cb-user-guide-link:hover,
.cb-user-guide-link:focus,
.cb-user-guide-link:active,
.cb-user-guide-link:visited {
    text-decoration: none !important;
    border-bottom: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
}

.cb-user-guide-link::after,
.cb-user-guide-link:hover::after,
.cb-user-guide-link:focus::after,
.cb-user-guide-link:active::after {
    display: none !important;
    content: none !important;
}

.cb-user-guide-icon {
    padding-left: 8px;
    color: #0f766e;
    font-size: 0.5em;
    cursor: pointer;
    vertical-align: super;
    line-height: 1;
}

.info-span{
    font-size: larger;
}


@media (min-width:1225px) {
    .info-span{
        font-size:x-large;
    }
}

.filters-list {
    display: flex;
    flex-wrap: wrap;      /* Allow items to wrap onto multiple lines */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); Optional: adds a shadow for visual separation */
    overflow: auto;       /* Add scrollbars if content exceeds the container's dimensions */
    gap: 10px;            /* Optional: adds space between items */
    min-height: 30px;
    padding-left: 20px;
}

.clear-all {
    background-color: rgb(255, 255, 255);
    color: #0f4c81;
    border: 1px solid #0f4c81;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 8px;
    margin-left: auto;
}

@media (min-width:1225px) {
    .clear-all {
        background-color: rgb(255, 255, 255);
        color: #0f4c81;
        border: 1px solid #0f4c81;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 10px;
        margin-left: auto;
    }
}


.clear-all:hover {
    background-color: #e1f054;
}

.add-filter {
    background-color:#ffffff;
    color: #0f4c81;
    border: 1px solid #0f4c81;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 10px;
    /* margin-left: 10px; */
}

.add-filter:hover {
    background-color: #e1f054;
}

.add-filter:disabled {
    color: #ffffff;
    background-color: #707070;  /* Grey background */
    cursor: not-allowed;     /* Change the cursor to indicate the button is not clickable */
    opacity: 0.6;            /* Optional: makes the button look more faded */
}

#cost-calculator {
    display: flex;
    align-items: center; /* Vertically center items */
    border-radius: 5px;
    padding: 10px;
    background-color: #dff5ef;
    color: #0f2d46;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    /* text-align: center; */
    position: sticky;      /* Fixes the element in a specific position */
    bottom: 0;            /* Sticks the element to the bottom of the viewport */
    z-index: 10;          /* Ensures it appears above other content */
}

#cost-calculator button {
    margin-left: auto;  /* Align the button to the rightmost side */
}


@media (min-width:1225px) {
    #cost-calculator {
        display: flex;
        align-items: center; /* Vertically center items */
        justify-content: center; /* Horizontally center items */
        padding: 20px;
        background-color: #dff5ef;
        color: #0f2d46;
        border-bottom: 1px solid #ddd;
        font-weight: bold;
        position: sticky;      /* Fixes the element in a specific position */
        bottom: 0;            /* Sticks the element to the bottom of the viewport */
        z-index: 10;          /* Ensures it appears above other content */
        font-size: medium;
    }

    #cost-calculator button {
        margin-left: auto;  /* Align the button to the rightmost side */
    }

}

#cost-label::before {
    content: url('data:image/svg+xml;charset=UTF-8,<svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><path d="M22.0449 9.99001H17.2549L12.8749 3.43001C12.6849 3.15001 12.3649 3.01001 12.0449 3.01001C11.7249 3.01001 11.4049 3.15001 11.2149 3.44001L6.83492 9.99001H2.04492C1.49492 9.99001 1.04492 10.44 1.04492 10.99C1.04492 11.08 1.05492 11.17 1.08492 11.26L3.62492 20.53C3.85492 21.37 4.62492 21.99 5.54492 21.99H18.5449C19.4649 21.99 20.2349 21.37 20.4749 20.53L23.0149 11.26L23.0449 10.99C23.0449 10.44 22.5949 9.99001 22.0449 9.99001ZM12.0449 5.79001L14.8449 9.99001H9.24492L12.0449 5.79001ZM18.5449 19.99L5.55492 20L3.35492 11.99H20.7449L18.5449 19.99ZM12.0449 13.99C10.9449 13.99 10.0449 14.89 10.0449 15.99C10.0449 17.09 10.9449 17.99 12.0449 17.99C13.1449 17.99 14.0449 17.09 14.0449 15.99C14.0449 14.89 13.1449 13.99 12.0449 13.99Z" fill="%230f4c81"/></svg>');
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}


.tab-title {
    margin-left: 10px;
    cursor: pointer;
    color: #0f4c81;
    background-color: #9dd9cc;  /* Pink color for sidebar tabs */
    padding: 20px;
    /* border-radius: 5px; */
    text-align: left;
}

.tab-title:hover {
    background-color: #e1f054;  /* Darker pink when hovered */
}

.tab-title.active {
    background-color: #0f766e;  /* Even darker pink for active state */
    color: #ffffff;
}

.filter-group {
    display: none;
}

.filter-group.active {
    display: block;
}

.filter-item {
    margin-bottom: 10px;
}

.filter-container-wrapper{
    display: flex;           /* Make the container a flex container */
    flex-wrap: wrap;         /* Allow items to wrap to the next line */
    gap: 20px;               /* Add space between the items */
    padding: 0;           /* Add padding around the container */
    width: 100%;

}
@media (min-width:1225px) {
    .filter-container-wrapper {
        padding: 20px;           /* Add padding around the container */
    }
}
.filter-container {
    display: flex;
    align-items: center;
    width: calc(100% - 20px);
}

@media (min-width:1225px) {
    .filter-container {
        display: flex;
        align-items: center;
        width: calc(50% - 20px);
    }
}

.filter-header {
    /* display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px; */
    background-color: #0b3b5f;
    color: #ffffff;
    /* font-weight: bold; */
    margin-right: 5px; /* Space between the label and the select element */
    padding: 5px;
    min-width: 135px;
    border-radius: 5px;
    text-align: center;
    font-size: small;
}

@media (min-width:1225px) {
    .filter-header {
        /* display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px; */
        background-color: #0b3b5f;
        color: #ffffff;
        /* font-weight: bold; */
        margin-right: 10px; /* Space between the label and the select element */
        padding: 10px;
        min-width: 190px;
        border-radius: 5px;
        text-align: center;
        font-size: medium;
    }
}

.filter-options {
    width: 42vw;
    margin-left: 10px;
    font-size: x-small;
}

@media (min-width:1225px) {
    .filter-options {
        width: clamp(160px, 12vw, 200px);
        margin-left: 10px;
        font-size: x-small;
    }

}

@media (min-width:1525px) {
    .filter-options {
        width: clamp(300px, 12vw, 400px);
        margin-left: 10px;
        font-size: x-small;
    }

    .filter-container > .bootstrap-scope {
        width: auto;
        flex: 0 0 auto;
    }

    .filter-container > .tooltip {
        margin-left: 8px;
    }

}

.custom-slider{
    height: 10px;
}

.custom-slider .noUi-connect {
    background: #9dd9cc;
}

.custom-slider .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px; /* half the width */
    box-shadow: none;
    /* Remove any background or border styles */
    background: #dff5ef; /* Set a solid color for the handle */
    box-shadow: none; /* Remove any shadow effect */
}

.custom-slider .noUi-handle::before, 
.custom-slider .noUi-handle::after {
    display: none; /* Remove pseudo-elements if they are causing the lines */
}

.bootstrap-scope .btn-group-sm>.btn, .bootstrap-scope .btn-sm{
    font-size: x-small;
}

.bootstrap-select>.dropdown-toggle {
    width: 42vw;
    font-size: 11px;
}

.bootstrap-scope .dropdown-item {
    width: 42vw;
    font-size: 11px;
}

.sub-option{
    font-size: 9px!important;
    padding-left: 60px!important;
}

@media (min-width:1225px) {

    .bootstrap-select>.dropdown-toggle {
        width: 100%;
        min-width: 160px;
        max-width: 200px;
        font-size: medium;
    }

    .bootstrap-scope .dropdown-item {
        width: 100%;
        min-width: 160px;
        max-width: 200px;
        font-size: medium;
    }
}


@media (min-width:1525px) {
    .bootstrap-scope .btn-group-sm>.btn, .bootstrap-scope .btn-sm{
        font-size: small;
    }

    .bootstrap-select>.dropdown-toggle {
        width: 100%;
        min-width: 200px;
        max-width: 300px;
        font-size: medium;
    }

    .bootstrap-scope .dropdown-item {
        width: 100%;
        min-width: 200px;
        max-width: 300px;
        font-size: medium;
    }

    .sub-option{
        font-size: small!important;
        padding-left: 60px!important;
    }
}

.removable-predicate {
    cursor: pointer;
    color: red;
    /* margin-right: 10px; */
    padding: 5px;
    padding-right: 20px; /* Adjusted for the icon */
    background-color: bisque;
    border: 1px solid red;
    position: relative; /* For positioning the icon */
    border-radius: 10px;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 30vw; /* some width */
}

@media (min-width:1225px) {
    .removable-predicate {
        cursor: pointer;
        color: red;
        /* margin-right: 10px; */
        padding: 5px;
        padding-right: 30px; /* Adjusted for the icon */
        background-color: bisque;
        border: 1px solid red;
        position: relative; /* For positioning the icon */
        border-radius: 10px;
        font-size: 10px;
    }    
}

.removable-predicate::after {
    content: '\00d7'; /* Unicode for a multiplication sign (cross) */
    position: absolute;
    right: 10px; /* Adjust to align with padding */
    top: 50%;
    transform: translateY(-50%);
    color: red;
    font-size: 16px; /* Adjust size as needed */
    cursor: pointer;
    transition: color 0.3s; /* Smooth color transition on hover */
}

.removable-predicate:hover::after {
    color: darkred; /* Highlight color when hovered */
}

.custom-details {
    border-radius: 5px;
    margin-top: 0;
    padding: 0 5px 0 5px;
    /* background-color: #fffaf1; */
    color: #283618;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    position: sticky;       /* Makes the element sticky */
    z-index: 10;            /* Ensure the sticky elements are on top of other elements */
    top: 86px;              /* Keep the summary below the portal header */
}

@media (min-width:1225px) {
    .custom-details {
        border-radius: 5px;
        margin-top: 20px;
        padding: 0;
        /* background-color: #fffaf1; */
        color: #283618;
        font-weight: bold;
        position: sticky;       /* Makes the element sticky */
        z-index: 10;            /* Ensure the sticky elements are on top of other elements */
        top: 94px;              /* Keep the summary below the portal header */
    }
}

#dr-projects-table{
    font-size: 9px;
}

.bootstrap-scope .table td, .bootstrap-scope .table th{
    padding: 5px;
}

@media (min-width:1225px) {
    #dr-projects-table{
        font-size: small;
    }
    .bootstrap-scope .table td, .bootstrap-scope .table th{
        padding: 15px;
    }

}

.custom-details[open] {
    padding-bottom: 5px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.custom-details summary {
    cursor: pointer;
    padding: 15px 30px 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    outline: none;
    list-style: none;
    gap: 10px;
    color: #0f2d46;
    border: 1px solid #dda15e;
    border-radius: 8px;
    min-height: 80px;
}

.custom-details summary::-webkit-details-marker {
    display: none;
}

.custom-details summary::after {
    content: "\F229";
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    /* Down arrow icon */
    font-size: 24px;
    position: absolute;
    right: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.custom-details summary:hover::after {
    color: #2e7d32; /* Change color on hover */
}

.custom-details[open] summary::after {
    transform: rotate(-180deg);
    transition: transform 0.3s ease;
}

.details-content {
    /* border-top: 1px solid #ddd; */
    margin-top: 5px;
    animation: expand-downwards 0.3s ease-in-out;
    background-color: #f3fbff;
    display: flex;           /* Make the container a flex container */
    flex-wrap: wrap;         /* Allow items to wrap to the next line */
    padding: 20px 5px;           /* Add padding around the container */
    transform-origin: top;  /* Set the transform origin to the top */
    
}

@media (min-width:1225px) {
    .details-content {
        /* border-top: 1px solid #ddd; */
        margin-top: 5px;
        animation: expand-downwards 0.3s ease-in-out;
        background-color: #f3fbff;
        display: flex;           /* Make the container a flex container */
        flex-wrap: wrap;         /* Allow items to wrap to the next line */
        gap: 20px;               /* Add space between the items */
        padding: 20px;           /* Add padding around the container */
        transform-origin: top;  /* Set the transform origin to the top */
    }
}


#plot-container{
    /* border-top: 1px solid #ddd; */
    margin-top: 0px;
    animation: expand-downwards 0.3s ease-in-out;
    background-color: #fff;
    display: flex;           /* Make the container a flex container */
    gap: 0px;               /* Add space between the items */
    padding: 0px;           /* Add padding around the container */
    transform-origin: top;  /* Set the transform origin to the top */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    height: 266px;
}

.summary_chart{
    width: calc(33.3% - 20px);
    border: 1px solid #c7c3c3;
}

.chart-header {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 10px; */
    background-color:  #dff5ef;
    color: #0f2d46;
    font-weight: bold;
    font-size: 13PX;
    padding: 10px;
    text-align: center;
}

.bootstrap-scope .a-link__open-new-window,
.bootstrap-scope .a-link__open-new-window:visited,
.bootstrap-scope .a-link__open-new-window:hover,
.bootstrap-scope .a-link__open-new-window:focus {
    color: #0f766e !important;
}

@keyframes expand {
    from {
        opacity: 0;
        transform: scaleY(0); /* Start scaled down */
    }

    to {
        opacity: 1;
        transform: scaleY(1); /* Scale up to original size */
    }
}

.filter-details {
    border-radius: 5px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    position: relative; /* Ensure position is relative for absolute positioning of icons */
}

.filter-details[open] {
    padding-bottom: 5px;
    /* background-color: #fff; */
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.filter-details summary {
    border-radius: 5px;
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: flex-start; /* Align items to the start */
    align-items: center;
    font-weight: bold;
    outline: none;
    list-style: none;
    color: #ffffff; 
    background-color: #0f766e;
    position: relative; /* For positioning the plus/minus icon */
    font-size: large;
}


@media (min-width:1225px) {
    .filter-details summary {
        border-radius: 5px;
        padding: 20px;
        cursor: pointer;
        display: flex;
        justify-content: flex-start; /* Align items to the start */
        align-items: center;
        font-weight: bold;
        outline: none;
        list-style: none;
        color: #ffffff; 
        background-color: #0f766e;
        position: relative; /* For positioning the plus/minus icon */
    }
}


.filter-details summary::-webkit-details-marker {
    display: none;
}

.filter-details summary::before {
    content: '\229E'; /* Plus sign */
    font-size: 24px;
    margin-right: 10px; /* Space between symbol and text */
    transition: content 0.3s ease, color 0.3s ease;
}

@media (min-width:1225px) {
    .filter-details summary::before {
        content: '\229E'; /* Plus sign */
        font-size: 24px;
        margin-right: 20px; /* Space between symbol and text */
        transition: content 0.3s ease, color 0.3s ease;
    }
}

.filter-details summary:hover::before {
    color: #e1f054;
}

.filter-details[open] summary::before {
    content: '\229F'; /* Minus sign */
}

.info-text{
    font-size:small;
}

@media (min-width:1225px) {
    .info-text{
        font-size:medium;
    }
}

#costModal{
    max-width: 800px;
    margin: auto;
    padding: 20px;
    font-size: small;
}

#costModal table {
    width: 100%;
    border-collapse: collapse; /* Remove gaps between table cells */
}

#costModal table td, 
#costModal table th {
    padding: 10px; /* Add padding to each cell */
    border: 1px solid #ddd; 
    text-align: center;
}

#costModal input[type="number"]  {
    border-radius: 10px;
    font-size: small;
    width: 50px;
    padding: 5px;
}

#costModal select  {
    border-radius: 10px;
    font-size: small;
    width: 50px;
    padding: 5px;
}

.cost-btn {
    display: block; 
    margin: 0;
    font-size: small;
    padding: 3px;
}


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 320px;
    background-color: black;
    color: #fff;
    text-align: justify;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    left: 450%;
    top: 100%;
    transform: translateX(-50%);
    font-size: x-small;
    font-weight: normal;
    transition: top 0.2s, left 0.2s;
}

.tooltip .add-filter-tooltip{
    left: -120%;
}

#download-tooltip, #reset-tooltip{
    display: none;
}

#example-tooltip{
    left:50%;
}

#summary-tooltip{
    left: -120%;
}

#diagnosis-tooltip, #summary-tooltip{
    width: 320px;
}



.tooltip:hover .tooltiptext {
    visibility: visible;
}

@media (min-width:1225px) {

    .tooltip .tooltiptext {
        visibility: hidden;
        max-width: 400px;
        background-color: black;
        color: #fff;
        text-align: justify;
        border-radius: 6px;
        padding: 10px;
        position: absolute;
        z-index: 1;
        top: -35px;
        left: 1010%;
        font-size: small;
        font-weight: normal;
        transition: top 0.2s, left 0.2s;
    }
    
    .tooltip .add-filter-tooltip{
        left: 550%;
        width: max-content;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent;
    }

    #example-tooltip::after, #download-tooltip::after, #reset-tooltip::after{
        top: 110%;
        right: 50%;
        transform: rotate(270deg);
    }

    #summary-tooltip::after {
        top: 105%;
        right: 50%;
        transform: rotate(270deg);
    }

    #download-tooltip, #reset-tooltip, #example-tooltip{
        display: block;
        top: -150%!important;
    }

    #diagnosis-tooltip{
        top: -190px; 
        left:1250%; 
        width: 500px;
    }

    #summary-tooltip{
        top: -80px; 
        left:20px; 
        width: 400px;
    }

}

#download-cohort-btn:hover {
    background-color: #e1f054;
    border-radius: 10px;
}

#reset-btn:hover {
    background-color: #e1f054;
    border-radius: 10px;
}

.example-span{
    background-color: var(--cb-accent);
    border-radius: 8px !important;
    padding: 5px;
    font-weight: bold !important;
    font-size: large !important;
}

.example-span:hover{
    text-decoration: underline;
}

#linearGauge {
    width: 100px!important;
}
#gauge-container, #results-count-container {
    width: 240px;
    /* background-color: #fffaf1; */
    color: #283618;
    border-radius: 8px;
}

#gauge-container #results-count,
#results-count-container #results-count {
    color: #283618;
    font-weight: 700;
}

@media (min-width:1225px) {
    #linearGauge {
        width: 300px!important;
    }
    #gauge-container, #results-count-container {
        width: 100%;
    }

}

/* Palette update: 606c38, 283618, fffaf1, dda15e, 99581e */
:root {
    --cb-primary: #606c38;
    --cb-primary-dark: #283618;
    --cb-surface: #fffaf1;
    --cb-accent: #dda15e;
    --cb-accent-dark: #99581e;
}

.cb-page-root p {
    color: var(--cb-primary-dark) !important;
}

.cb-page-root .a-link__open-new-window,
.cb-page-root .a-link__open-new-window:after,
.cb-page-root .a-link__open-new-window:hover,
.cb-page-root .a-link__open-new-window:hover:after,
.cb-page-root .a-link__open-new-window:focus,
.cb-page-root .a-link__open-new-window:focus:after,
.cb-page-root .a-link__open-new-window:focus-visible,
.cb-page-root .a-link__open-new-window:focus-visible:after,
.cb-page-root .a-link__open-new-window:visited,
.cb-page-root .a-link__open-new-window:visited:after {
    color: var(--cb-accent-dark) !important;
}

#dr-projects-tbody input[type="checkbox"],
#dr-projects-tbody-internal input[type="checkbox"],
#select-bcn-all {
    accent-color: var(--cb-accent-dark);
    border-color: var(--cb-accent-dark);
}

.cb-user-guide-icon,
.tooltip .bi-info-circle-fill {
    color: var(--cb-accent-dark) !important;
}

.clear-all,
.add-filter {
    background-color: var(--cb-surface);
    color: var(--cb-accent-dark);
    border-color: var(--cb-accent-dark);
}

.clear-all:hover,
.add-filter:hover,
#download-cohort-btn:hover,
#reset-btn:hover,
.tab-title:hover {
    background-color: var(--cb-accent);
}

#cost-calculator {
    background-color: #edd0a6;
    color: var(--cb-primary-dark);
    border-color: var(--cb-accent);
}

.tab-title {
    color: var(--cb-primary-dark);
    background-color: var(--cb-accent);
}

.tab-title.active {
    background-color: var(--cb-primary);
    color: #fffaf1;
}

.filter-header {
    background-color: var(--cb-primary-dark);
    color: #fffaf1;
}

.custom-slider .noUi-connect {
    background: var(--cb-accent);
}

.custom-slider .noUi-handle {
    background: var(--cb-surface);
    border: 1px solid var(--cb-accent);
}

.example-span {
    background-color: var(--cb-accent);
}

/* Cohort Browser final palette overrides */
.custom-details summary {
    color: #283618 !important;
    background-color: #edd0a6 !important;
}

.filter-details summary {
    color: #fffaf1 !important;
    background-color: #606c38 !important;
}

.filter-details summary:hover::before {
    color: #dda15e !important;
}

.custom-details summary:hover::after {
    color: #99581e !important;
}

.details-content {
    background-color: #fffaf1 !important;
}

.chart-header {
    background-color: #fffaf1 !important;
    color: #283618 !important;
}

.custom-details summary,
.custom-details summary::after,
.info-text,
.filters-list,
#cost-calculator,
#total-cost {
    color: #283618 !important;
}

.bootstrap-scope .a-link__open-new-window,
.bootstrap-scope .a-link__open-new-window:visited,
.bootstrap-scope .a-link__open-new-window:hover,
.bootstrap-scope .a-link__open-new-window:focus {
    color: #99581e !important;
}

.clear-all,
.add-filter,
#download-cohort-btn,
#reset-btn,
#export {
    border-color: #99581e !important;
    color: #99581e !important;
    background-color: #edd0a6 !important;
    border-radius: 10px;
}

.clear-all:hover,
.add-filter:hover,
#download-cohort-btn:hover,
#reset-btn:hover,
#export:hover {
    background-color: #dda15e !important;
    color: #283618 !important;
}

#download-cohort-btn:hover,
#reset-btn:hover {
    background-color: #fffaf1 !important;
}

.tooltip .tooltiptext {
    background-color: #283618 !important;
    color: #fffaf1 !important;
}

.tooltip .tooltiptext::after {
    border-color: transparent #283618 transparent transparent !important;
}

#cost-label::before {
    content: url('data:image/svg+xml;charset=UTF-8,<svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><path d="M22.0449 9.99001H17.2549L12.8749 3.43001C12.6849 3.15001 12.3649 3.01001 12.0449 3.01001C11.7249 3.01001 11.4049 3.15001 11.2149 3.44001L6.83492 9.99001H2.04492C1.49492 9.99001 1.04492 10.44 1.04492 10.99C1.04492 11.08 1.05492 11.17 1.08492 11.26L3.62492 20.53C3.85492 21.37 4.62492 21.99 5.54492 21.99H18.5449C19.4649 21.99 20.2349 21.37 20.4749 20.53L23.0149 11.26L23.0449 10.99C23.0449 10.44 22.5949 9.99001 22.0449 9.99001ZM12.0449 5.79001L14.8449 9.99001H9.24492L12.0449 5.79001ZM18.5449 19.99L5.55492 20L3.35492 11.99H20.7449L18.5449 19.99ZM12.0449 13.99C10.9449 13.99 10.0449 14.89 10.0449 15.99C10.0449 17.09 10.9449 17.99 12.0449 17.99C13.1449 17.99 14.0449 17.09 14.0449 15.99C14.0449 14.89 13.1449 13.99 12.0449 13.99Z" fill="%2399581e"/></svg>');
}