@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;
    box-shadow: var(--shadow-l);
    border: none;
    background-color: var(--accent);
    color: var(--text-header);
}

.std_stats_card {
    font-size: var(--font-size-body);
    margin: 10px 0px 0px 0px;;
    border-radius: 10px;
    text-align: left;
    font-weight: normal;
    background-color: var(--bg-light);
    box-shadow: var(--shadow-m);
    border: none;
}

.trend-card-value {
    font-size: var(--font-size-body);
    font-weight: 400;
    line-height: 1.4;
}

.trend-card-strong-loss { color: #FD1918; }
.trend-card-loss        { color: #FF6766; }
.trend-card-neutral     { color: #808080; }
.trend-card-gain        { color: #0091FE; }
.trend-card-strong-gain { color: #18587E; }






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




#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;
}


/* --------DROP DOWNS --------- */
#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 */
    border:none;
    background-color:var(--primary);
    box-shadow: var(--shadow-m);
}

#search_card_title {
    color: var(--text-main)!important;
}


.std_survey_dropdown.Select {
    color:var(--text-main);
    box-shadow: var(--shadow-s);
}

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

#survey-unit-dropdown .Select-value-label,
#survey-line-dropdown .Select-value-label,
#survey-type-dropdown .Select-value-label,
#error-bar-dropdown .Select-value-label {
    color: var(--text-dark) !important; 
}

#survey-unit-dropdown .VirtualizedSelectOption,
#survey-line-dropdown .VirtualizedSelectOption,
#survey-type-dropdown .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 .VirtualizedSelectSelectedOption,
#survey-line-dropdown .VirtualizedSelectSelectedOption,
#survey-type-dropdown .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 .Select-menu-outer,
#survey-line-dropdown .Select-menu-outer,
#survey-type-dropdown .Select-menu-outer {
    border-radius: 10px !important;

}

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

#survey-unit-dropdown .Select-menu-outer,
#survey-line-dropdown .Select-menu-outer,
#survey-type-dropdown .Select-menu-outer {
    background-color: var(--bg-light)!important;
    border:none;
    color: var(--text-dark)!important
}