@media screen and (min-width: 0px) and (max-width:950px) {
    #all_cards_div {
         max-height: 90vh;
         overflow: auto;
         padding:0px 5px 5px 0px
    }
}

#all_cards_col {
    padding: 0px;
    margin: 0px;
}

.card_body {
    margin:0px;
    padding:5px 10px 5px 10px;
}

#survey_unit_card {
    font-size: var(--font-size-heading-main);
    margin: 0px 0px 20px 0px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    padding:5px;
}

.std_stats_card {
    font-size: var(--font-size-body);
    margin: 10px 0px 0px 0px;;
    border-radius: 10px;
    text-align: left;
    font-weight: normal;
}

.card-title {
    font-size: var(--font-size-body);
    font-weight:600;
    line-height: 1.2;
    padding-right:35px;
}

#drop_down_card {
    padding:0px;
    font-size: var(--font-size-body);
    border-radius: 10px;
    margin: 10px 0px 0px 0px;/* Adjust font size for smaller screens */
}


#report_button_div > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}



/* Media query for smaller screens (adjust max-width and font size as needed) */
@media screen and (min-width: 0px) and (max-width:992px) {
    
    #all_cards_div {
        padding-right:10px;
        padding-bottom:10px;
        padding-left:10px;
    }

}



/* Default card style for the survey unit dropdown inside the card */
.std_survey_dropdown {
    font-size: var(--font-size-dropdown);
    font-weight: 700;
    width: 100%;
    margin-top: 5px;
    border-radius: 10px;
}

/* Light MODE STYLES */
.light-mode .std_stats_card {
    background-color: white;
    box-shadow: 3px 3px 5px rgb(160, 160, 160);
}

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

.light-mode #survey_unit_card {
    box-shadow: 3px 3px 5px rgb(153, 153, 153);
    border: 1px solid #f2c11c;
    background-color: #fecd28;
}

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

.light-mode .std_survey_dropdown.Select {
    color:rgb(16, 51, 91);
    box-shadow: 3px 3px 5px lightblue;
}





/* DARK MODE STYLES */
.dark-mode .std_stats_card {
    background-color: #212121;
    box-shadow: 0px 0px 6px #202020;
    border: 2px solid #424242
}

.dark-mode .card-title {
    color: white !important;
}

.dark-mode #survey_unit_card {
    box-shadow: 0px 0px 5px rgb(153, 153, 153);
    border: 1px solid #f2c11c;
    background-color: #fecd28;
}

.dark-mode #drop_down_card {
    border:none;
    background-color: #616161;
    box-shadow: None;
}

.dark-mode .std_survey_dropdown.Select {
    color:rgb(16, 51, 91);
    box-shadow: none;
}