/* Default font size for larger screens */
#difference-models-controls{
    font-size: var(--font-size-dropdown);
    margin: 10px;
    border-radius: 10px;
    text-align: left;
    font-weight: 700;
    border: none;
    background-color: var(--secondary);
    box-shadow: var(--shadow-m);
}


#drop_down_card-title-dm {
    font-weight: 600;
    font-size: var(--font-size-body);
    color: var(--text-main) !important;
}

#survey_unit_card_dm {
    /* Specific style for #survey_unit_card within the same media query */
    font-size: var(--font-size-heading-main);
    margin: 10px 10px 20px 10px;
    padding:5px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;/* Different font size for survey_unit_card */
    background-color: var(--accent);
    box-shadow: var(--shadow-m);
    color: var(--text-header);
}

#survey-unit-dropdown-dm .Select-value-label {
    color: var(--text-dark)
}

#survey-unit-dropdown-dm .Select-control {
    background-color: var(--bg-light)!important;
    border:none;
    color: var(--text-dark) !important;
    border-radius:10px
}

#survey-unit-dropdown-dm .VirtualizedSelectOption {
    color: var(--text-dark);
    font-weight: normal;
    border-bottom: 0.2px solid var(--bg) !important;
    background-color: var(--bg-light)!important;
    height:auto;
    display: flex;
    
}

#survey-unit-dropdown-dm .VirtualizedSelectSelectedOption {
    color: var(--text-dark);
    font-weight: 700;
    height:auto;
    padding: 5px;
    display: flex;
    background-color: var(--tertiary)!important;
    border-top: 1px solid var(--primary) !important;
    border-bottom: 1px solid var(--primary) !important;
}

#survey-unit-dropdown-dm .Select-menu-outer{
    border-radius: 10px !important;

}

#survey-unit-dropdown-dm .Select-menu {
    border-radius: 10px !important;
}

#survey-unit-dropdown-dm .Select-menu-outer {
    border:none;
    color: var(--text-dark)!important
}


 /* Default font size for larger screens */
#gain_volume_card,
#loss_volume_card,
#net_volume_change_card{
    font-size: var(--font-size-body);
    margin: 10px;
    border-radius: 10px;
    text-align: left;
    font-weight: normal;
    box-shadow: var(--shadow-m);
    color: var(--text-dark);
    background-color: var(--bg-light);


}

.basemap-btn {
    font-weight: bold;
    border-radius: 6px;
    margin-right: 5px; /* Optional: adds space around the button */
    margin-bottom: 10px;
    box-shadow:var(--shadow-s);
    border:none!important;
    background-color: var(--bg-light);
    color: var(--text-dark);
}


.diff-button-group>.basemap-btn.active{
    background-color: var(--primary)!important;
    color: var(--button-icon)!important;

}
.basemap-btn:hover {
    background-color: hsl(from var(--bg-light) h s calc(l - 10))!important;
    color: var(--text-dark)!important;
}






#diff-map-card{
    border: none !important;
    box-shadow:var(--shadow-m) !important;
    background-color: var(--bg-light) !important;
    border-radius: 20px;
    padding:10px;
    margin:10px
}

#diff-map-card-body {
    border: none !important;
    box-shadow: none !important;
    background-color: var(--bg-light) !important;
    border-radius: 10px;
    padding:10px
}





/* ===============================
   Slider base
================================ */

#year-range-slider {
    width: 100%;
}

#year-range-slider-div {
    background-color: var(--bg-light);
    border-radius: 10px;
    box-shadow: var(--shadow-l);
    padding:10px
}


/* ===============================
   Rail + track
================================ */

#year-range-slider .rc-slider-rail {
    background-color: var(--nav-button-color-disabled);
}

#year-range-slider .rc-slider-track {
    background-color: var(--primary);
}


/* ===============================
   Slider handles
================================ */

#year-range-slider .rc-slider-handle {
    border: 4px solid hsl(from var(--primary) h s calc(l - 10) );
    background-color: var(--bg-light);
}

#year-range-slider
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
    border-color: var(--primary);
    background-color: var(--bg-light);
    box-shadow: none;
}


/* ===============================
   Slider dots
================================ */

#year-range-slider .rc-slider-dot {
    border: none;
    background-color: hsl(from var(--nav-button-color-disabled) h s calc(l - 10));
}

#year-range-slider .rc-slider-dot-active {
    background-color: hsl(from var(--primary) h s calc(l + 5));
}


/* ===============================
   Slider marks
================================ */

#year-range-slider .rc-slider-mark {
    top: 18px;
}



#year-range-slider .rc-slider-mark-text-active {
    color: var(--text-dark);
    font-weight: 700;
}


#year-range-slider .rc-slider-tooltip-inner {
    box-shadow: none;
    background-color: var(--primary);
    color: var(--button-icon)
}