/*All cards div css, this is the col that holds all the cards */


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

/* Default font size for larger screens */
#trend_card_div, #highest_card_div, #lowest_card_div {
    font-size: 15px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px lightblue;
    color: black;
    text-align: left;
    font-weight: bold;
     font-family: 'Calibri', sans-serif;

}
#report_card_div {
    font-size: 15px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px lightblue;
    color: black;
    text-align: left;
    font-weight: bold;
    font-family: 'Calibri', sans-serif;
}

#survey_unit_card {
    background-color: #f7d32f;
    margin: 10px 10px 20px 10px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px lightblue;
    text-align: center;
    font-weight: bold;
     font-family: 'Calibri', sans-serif;
     }


/* Media query for smaller screens (adjust max-width and font size as needed) */
@media screen and (min-width: 0px) and (max-width:950px) {
   #trend_card_div, #highest_card_div, #lowest_card_div  {
        font-size: 20px;
        margin: 10px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px lightblue;
        color:black;
        text-align: left;
        font-weight:bold;
        font-family: 'Calibri', sans-serif;

        /* Adjust font size for smaller screens */
    }

    #survey_unit_card {
        /* Specific style for #survey_unit_card within the same media query */
        font-size: 20px;
        background-color: rgb(16, 51, 91);
        margin: 10px 10px 20px 10px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px lightblue;
        text-align: center;
        font-weight: bold;/* Different font size for survey_unit_card */
         font-family: 'Calibri', sans-serif;
    }
}

/* Media query for screens between 801px and 1800px wide */
@media screen and (min-width: 950px) and (max-width: 1300px) {
    #survey_unit_card,#trend_card_div,#highest_card_div,#lowest_card_div {
        font-size: 15px;
        margin: 10px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px lightblue;
        color:black;
        text-align: left;
        font-weight:bold;
        font-family: 'Calibri', sans-serif;
    }

    #survey_unit_card {
        /* Specific style for #survey_unit_card within the same media query */
        font-size: 15px;
        background-color: #f7d32f;
        margin: 10px 10px 20px 10px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px lightblue;
        text-align: center;
        font-weight: bold;
        font-family: 'Calibri', sans-serif;
        /* Different font size for survey_unit_card */
        /* Other specific styles for survey_unit_card */
    }
}

/* Media query for screens between 1801px and 2000px wide */
@media screen and (min-width: 1300px) and (max-width: 10000px) {

    #trend_card_div,#highest_card_div,#lowest_card_div {
        font-size: 20px;
        margin: 10px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px lightblue;
        color:black;
        text-align: left;
        font-weight:bold;
         font-family: 'Calibri', sans-serif;
    }

    #survey_unit_card {
        /* Specific style for #survey_unit_card within the same media query */
        font-size: 20px;
        background-color: #f7d32f,
        margin: 10px 10px 20px 10px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px lightblue;
        text-align: center;
        font-weight: bold;
        font-family: 'Calibri', sans-serif;
        /* Other specific styles for survey_unit_card */
    }
}
}

/* THE DROP DOWN CARD AND ITS COMPONENTS:

/* Default card style for the dropdown */
#drop_down_card {

    margin: 10px;
    border-radius: 10px;
    box-shadow: 5px 5px 5px lightblue;
    background-color: #d4f7ff;


}

/* Default H6 style for the dropdown titles */
.light-mode .card-title {
    color: rgb(16, 51, 91) !important;
    font-weight: bold;
    font-family: Calibri;
}

/* Default card style for the survey unit dropdown inside the card */
#survey-unit-dropdown{
    font-size: 13px;
    font-weight: bold;
    color: blue;
    width: 100%;
    border-radius: 10px;
    box-shadow: 5px 5px 5px lightblue;
    background-color: #d4f7ff;
     font-family: 'Calibri', sans-serif;


}

/* Default card style for the survey unit dropdown inside the card */
#survey-type-dropdown{
    font-size: 13px;
    font-weight: bold;
    color: blue;
    width: 100%;
    border-radius: 10px;
    box-shadow: 5px 5px 5px lightblue;
    background-color: #d4f7ff;
    margin-top: 5px;
     font-family: 'Calibri', sans-serif;


}


/* Default card style for the survey line dropdown inside the card */
#survey-line-dropdown{
      font-size: 13px;
      font-weight: bold;
      color: rgb(16, 51, 91);
      width: 100%;
      margin-top: 5px;
      border-radius: 10px;
      border-radius: 10px;
    box-shadow: 5px 5px 5px lightblue;
    background-color: #d4f7ff;
     font-family: 'Calibri', sans-serif;
}


/* Media query for smaller screens (adjust max-width and font size as needed) */
@media screen and (min-width: 0px) and (max-width:950px) {
    #drop_down_card {
        font-size: 20px;
         border-radius: 10px;
         box-shadow: 5px 5px 5px lightblue;
         background-color: #d4f7ff;
         margin: 10px;/* Adjust font size for smaller screens */
          font-family: 'Calibri', sans-serif;
    }
}

/* Media query for screens between 801px and 1800px wide */
@media screen and (min-width: 950px) and (max-width: 1300px) {
    #drop_down_card {
        font-size: 15px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px lightblue;
        background-color: #d4f7ff;
        margin: 10px;/* Adjust font size for screens in this range */
         font-family: 'Calibri', sans-serif;
    }
}


/* Media query for screens between 1801px and 2000px wide */
@media screen and (min-width: 1300px) and (max-width: 10000px) {
    #drop_down_card {
        font-size: 20px;
        border-radius: 10px;
        box-shadow: 5px 5px 5px lightblue;
        background-color: #d4f7ff;
        margin: 10px;/* Adjust font size for screens in this range */
          font-family: 'Calibri', sans-serif;
    }
}


/* DARK MODE STYLES */
.dark-mode #report_card_div,
.dark-mode #trend_card_div,
.dark-mode #highest_card_div,
.dark-mode #lowest_card_div,
.dark-mode #drop_down_card{
    background-color: #2c2c2c;
    color: #f0f0f0;
    box-shadow: 5px 5px 5px #111;
}

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

.dark-mode #survey_unit_card {
    color: #000;
    box-shadow: 5px 5px 5px #111;
}

.dark-mode #drop_down_card {
    background-color: #1f3b4d;
    box-shadow: 5px 5px 5px #111;
}

.dark-mode #drop_down_card-title {
    color: #6ab0f3;
}

.dark-mode #survey-unit-dropdown,
.dark-mode #survey-type-dropdown,
.dark-mode #survey-line-dropdown {
    background-color: #1f3b4d;
    color: #6ab0f3;
    box-shadow: 5px 5px 5px #111;
}

/* DARK MODE MEDIA QUERIES */
@media screen and (min-width: 0px) and (max-width:950px) {
    .dark-mode #trend_card_div,
    .dark-mode #highest_card_div,
    .dark-mode #lowest_card_div {
        font-size: 20px;


    }

    .dark-mode #survey_unit_card {
        font-size: 20px;
    }

    .dark-mode #drop_down_card {
        font-size: 20px;
    }
}

@media screen and (min-width: 950px) and (max-width: 1300px) {
    .dark-mode #trend_card_div,
    .dark-mode #highest_card_div,
    .dark-mode #lowest_card_div {
        font-size: 15px;
    }

    .dark-mode #survey_unit_card {
        font-size: 15px;
    }

    .dark-mode #drop_down_card {
        font-size: 15px;
    }
}

@media screen and (min-width: 1300px) and (max-width: 10000px) {
    .dark-mode #trend_card_div,
    .dark-mode #highest_card_div,
    .dark-mode #lowest_card_div {
        font-size: 20px;
    }

    .dark-mode #survey_unit_card {
        font-size: 20px;
    }

    .dark-mode #drop_down_card {
        font-size: 20px;
    }
}