.font-mute {
    font-size: 10px;
}

.fix_conn {
    width: 100%;
}

#weather7days .card {
    min-width: 100%;
    background: linear-gradient(
        180deg,
        #ffffff -4%,
        rgba(255, 255, 255, 0.81) 2.6%,
        rgba(255, 255, 255, 0.8) 71.87%
    ) !important;
    padding: 12px !important;
}

#weather7days .col:first-child .card {
    background: linear-gradient(
        180deg,
        #ffffff -1.4%,
        rgba(255, 255, 255, 0.8) 1.81%,
        #ffffff 21.68%,
        #ffffff 100.11%
    ) !important;
    filter: drop-shadow(0px 1px 12px rgba(0, 0, 0, 0.25)) !important;
}

#weather7days .col:first-child .card .today-header div {
    color: var(--dark1) !important;
}

#weather7days .col:first-child .card .sub-heading,
#weather7days .col:first-child .card .today-header div:first-child {
    font-weight: 600 !important;
    color: var(--dark1) !important;
}

.conn {
    width: 100%;
}

#weather7days .row > * {
    padding: 0 !important;
    padding-right: 16px !important;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background-color: var(--light2) !important;
}

#banner-currentweather #temperature {
    font-size: 2.375rem !important;
    line-height: 3.625rem !important;
}

#widget-forcast-text {
    font-weight: 400 !important;
}

#FrameCurrentWeather #item-1 {
    font-size: 1.125rem !important;
    line-height: normal !important;
}

.w-55 {
    width: 55% !important;
}

.card-content-aws {
    height: 100% !important;
    max-height: 90.5%;
    background: linear-gradient(
        180deg,
        rgba(241, 244, 243, 0.95) 0%,
        rgba(241, 244, 243, 0.8) 99.99%,
        rgba(241, 244, 243, 0.8) 100%
    );
    box-shadow:
        0px 5px 30px rgba(0, 0, 0, 0.07),
        0px 10px 20px rgba(0, 0, 0, 0.04),
        0px 4px 100px rgba(0, 0, 0, 0.04);
}

@media (min-width: 1024px) and (max-width: 1024px) {
    .col-lg-2 {
        width: 19.66667% !important;
    }
    .col-lg-10 {
        width: 80.33333% !important;
    }
    .card-content-aws, #awsContent {
        max-height: 88.5% !important;
    }
}

@media (min-width: 1180px) and (max-width: 1180px) {
    .col-lg-2 {
        width: 17.6666666667% !important;
    }
    .col-lg-10 {
        width: 82.3333333333% !important;
    }
}

@media (min-width: 601px) and (max-width: 767px) {
    .card.card-nohover .rain-details-aws {
        display: flex !important;
        gap: 6rem;
    }
    
    #eleAwsRainFrom7Am {
        display: block !important;
    }

    .w-55,
    #eleAwsRain15min .w-50 {
        width: auto !important;
        padding-right: 0.5rem;
    }

    #eleAwsRain15min div:first-child,
    #eleAwsRainFrom7Am div:first-child {
        justify-content: flex-start !important;
    }
     #widget-forcast-area .card.card-nohover div:last-child {
        padding: 0px !important;
    }
} 

@media (max-width: 768px) {
    #eleAwsRainFrom7Am {
        gap: 4px;
        padding: 0px !important;
    }
    #awsContent {
        flex-direction: column !important;
    }
}

/*X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .fix_conn {
        overflow-x: auto !important;
    }

    .conn {
        width: 1000px !important;
    }
    #widget-forcast-area .card.card-nohover div:last-child {
        padding: 0px !important;
    }

    #eleAwsRainFrom7Am {
        display: block !important;
    }

    .w-55,
    #eleAwsRain15min .w-50 {
        width: auto !important;
        padding-right: 0.5rem;
    }

    #eleAwsRain15min div:first-child,
    #eleAwsRainFrom7Am div:first-child {
        justify-content: flex-start !important;
    }

    .card-content-aws,
    #awsContent {
        height: auto !important;
        max-height: none !important;
    }

    .card.card-nohover .rain-details-aws {
        display: flex !important;
    }
    
    #eleAwsRain15min, #eleAwsRainFrom7Am, .weatherIconArea {
        width: 50% !important;
    }
}
/*X-Small devices (portrait phones, less than 420px)*/
@media (max-width: 420.98px) {
    .select2-container {
        max-width: 375px !important;
    }
}
/*X-Small devices (portrait phones, less than 420px)*/
@media (max-width: 375.98px) {
    .select2-container {
        max-width: 350px !important;
    }
}