#diff-map-card-body {
    padding-top: 10px !important;  /* optional: if padding shows background edge */
}


/* 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;
}

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

#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 */
}

 /* 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;

}

.basemap-btn {
    font-weight: bold;
    border-radius: 6px;
    margin-right: 5px; /* Optional: adds space around the button */
}


/* LIGHT MODE STYLES */

.light-mode .basemap-btn {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    border: 2px solid #ccc; 
    background-color: white;
    color: black;
}

.light-mode .basemap-btn:hover {
    background-color: #d8d8d8cb;
    color: rgb(16,51,91);
}

.light-mode #gain_volume_card,
.light-mode #loss_volume_card,
.light-mode #net_volume_change_card {
    box-shadow: none;
    color: black;

}

.light-mode #survey_unit_card_dm {
    background-color: #f7d32f;
    box-shadow: 3px 3px 5px rgb(153, 153, 153);
}

.light-mode #drop_down_card-title-dm {
    color: rgb(16,51,91) !important;
}

.light-mode #difference-models-controls {
    border:1px solid #ccc;
    background-color: #d4f7ff;
    box-shadow: 3px 3px 5px lightblue;
}

.light-mode #diff-map-card {
    border: none !important;
    box-shadow: none !important;
    background-color: black !important;
}

.light-mode #diff-map-card-body {
    border: none !important;
    box-shadow: none !important;
    background-color: white !important;
}







/* DARK MODE STYLES */

.dark-mode #diff-map-card {
    border: none !important;
    box-shadow: none !important;
    background-color: black !important;
}

.dark-mode #diff-map-card-body {
    border: none !important;
    box-shadow: none !important;
    background-color: black !important;
}

.dark-mode #drop_down_card-title-dm {
    color: white !important;
}

.dark-mode #survey_unit_card_dm {
    background-color: #f7d32f;
}
.dark-mode .basemap-btn {
    box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 2px solid #ccc;
}
.basemap-btn:hover {
    background-color: #2a2a2a;
    color: #66ccff;
}
.dark-mode #survey-unit-dropdown-dm .Select-control {
    background-color: #292929!important;
    border: none;
    background-color: #424242;
}
.dark-mode #difference-models-controls {
    border:none;
    background-color: #616161;
    box-shadow: None;
}
.dark-mode #gain_volume_card,
.dark-mode #loss_volume_card,
.dark-mode #net_volume_change_card {
    background-color: #212121;
    box-shadow: 0px 0px 6px #202020;

}
.dark-mode .rc-slider-mark-text-active{
    color:rgb(153, 153, 153)
}
.dark-mode .rc-slider-dot-active {
    background-color: #ffffff;
    border-color: #424242
}
.dark-mode .rc-slider-handle {
    border:3px solid #212121;
    background-color: white;
}
.dark-mode .rc-slider-track {
    background-color: #424242;
}

.dark-mode .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
    border-color: #212121;
    background-color: white;
    box-shadow: 0px 0px 6px 3px #212121;
}