div.template {
    display: none !important;
}

.text-orange {
    color: #fd7e14;
}

.text-purple {
    color: #6f42c1;
}


.current {
    width: min(500px, 90vw);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border: solid 1px #cecece;
    border-radius: 50%;
    position: relative;
    color: #666;
    margin-top: 15px;
}

    .current .sun, .current .moon {
        position: absolute;
        width: 32px;
        height: 32px;
        transform: translate(-50%, -50%);
        transition: top 0.5s ease, left 0.5s ease;
    }

    .current .col-3, .current .col-4, .current .col-6 {
        padding: 0;
    }

    .current div.icon {
        position: absolute;
        top: 5%;
        left: 50%;
        width: 60%;
        aspect-ratio: 1 / 1;
        transform: translate(-50%,0);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
    }

        .current div.icon img {
            width: 100%;
        }

    .current .data {
        position: relative;
        text-align: center;
        top: 50%;
    }

    .current .temp {
        position: relative;
    }

        .current .temp .now {
            font-size: 60px;
        }

.row.circle-centered {
    padding: 5px 20%;
}

.temp div::after, .forecast #hourly .hour .temp::after {
    content: '\0000B0F';
}

.temp .high, .temp .low {
    position: absolute;
    top: 20%;
    left: 75%;
}

.temp .low {
    top: 45%;
}

    .temp .high::before, .temp .low::before {
        font-family: "Font Awesome 6 Free";
        content: '\f0de';
        font-weight: bold;
        margin-right: 5px;
    }

    .temp .low::before {
        content: '\f0dd';
    }


.current .wind::before, .forecast .wind .speed::before {
    font-family: "Font Awesome 6 Free";
    content: '\f72e';
    font-weight: bold;
}

.current .apparentTemperature {
    font-weight: bold;
    font-size: 1.2em;
}

.apparentTemperature::before {
    content: 'Feels Like: ';
}

.forecast .wind .speed::before {
    padding-right: 5px;
}

.current .wind span.gust::before {
    content: ' / ';
}

.rainfall::before {
    font-family: "font awesome 6 free";
    font-weight: bold;
    content: '\f740';
    margin-right: 5px;
}

.rainfall.snow::before {
    content: '\f2dc';
}

.rainfall::after {
    content: ' in';
}

.rainfall .chance::after {
    content: '% / ';
}

.pressure::before {
    font-family: "Font Awesome 6 Free";
    content: '\f625';
    font-weight: bold;
    margin-right: 5px;
}

.pressure::after {
    content: ' inHg';
}

.humidity > span::after {
    content: '%';
}

.humidity .now::before {
    font-family: "Font Awesome 6 Free";
    content: '\f043';
    font-weight: bold;
    margin-right: 5px;
}

.humidity .dewpoint::before {
    font-family: "Font Awesome 6 Free";
    content: '\f4c1';
    font-weight: bold;
    margin-right: 5px;
}

.humidity > span.dewpoint::after {
    content: '\0000B0F' !important;
}

.solar-radiation::after {
    content: 'w/m\00b2';
}


.forecast > div {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
}

.forecast .day {
    position: relative;
    display: inline-block;
    height: 165px;
    border: solid 1px #666;
    border-radius: 6px;
    padding: 10px;
    margin: 5px;
    min-width: 110px;
    width: 183px;
}

    .forecast .day .temp .high, .forecast .day .temp .low {
        right: 5px;
        left:auto;
    }

    .forecast .day.first {
        margin-left: 58px;
    }

    .forecast .day.last {
        margin-right: 48px;
    }

.forecast .name {
    text-align: center;
}

.forecast .icon img {
    width: 50px;
    height: auto;
}

.alerts {
    padding: 10px;
}

    .alerts div.alert {
        border: solid 1px #ccc;
        padding: 5px;
        margin: 5px;
        cursor: pointer;
    }

        .alerts div.alert i {
            padding-right: 10px;
        }

        .alerts div.alert .text {
            display: inline-block;
            transform: translateY(-0.4em);
        }

        .alerts div.alert:not(.active) p.description {
            display: none;
        }

.chart-container {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
}

#map {
    height: 80vh;
    width: 70vw;
}

.leaflet-control-layers .leaflet-control-layers-list > div {
    text-align: left;
}

.radar-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
}

    .radar-controls input.form-range {
        width: 200px;
    }

#map-container .btn.gps-btn {
    display: none;
}

.forecast #hourly .hour {
    display: block;
    border: solid #333 1px;
    border-radius: 6px;
    padding: 5px 10px;
    margin: 5px;
}

    .forecast #hourly .hour.newDay {
        border-width: 2px !important;
    }

    .forecast #hourly .hour > div {
        display: inline-block;
    }

    .forecast #hourly .hour .dayName {
        font-weight: bold;
    }

    .forecast #hourly .hour .dayName {
        display: none;
    }

    .forecast #hourly .hour.newDay .dayName {
        display: inline-block;
    }

    .forecast #hourly .hour .time {
        width: 55px;
    }

    .forecast #hourly .hour .temp, .forecast #hourly .hour .humidity {
        margin-left: 20px;
        margin-right: 5px;
    }

        .forecast #hourly .hour .humidity::before {
            font-family: "Font Awesome 6 Free";
            content: '\f043';
            font-weight: bold;
            margin-right: 5px;
            color: #0d6efd;
        }

        .forecast #hourly .hour .humidity::after, .forecast #hourly .hour .cloudCover::after {
            content: '%';
        }

    .forecast #hourly .hour .wind {
        width: 105px;
        margin-left: 15px;
    }

    .forecast #hourly .hour .cloudCover {
        margin-left: 25px;
    }

        .forecast #hourly .hour .cloudCover::before {
            font-family: "font awesome 6 free";
            font-weight: bold;
            content: "\f0c2";
            margin-right: 5px;
            color: #888;
        }

div#hourly-chart {
    height: 300px;
    overflow-x: auto;
    min-width: 1656px;
}

#hourly .accordion-button:not(.collapsed) {
    background: #ececec;
    color: #333;
    font-weight: bold;
}

@media (max-width: 767px) {
    #map {
        height: 80vh;
        width: 90vw;
    }

    #map-container .btn.gps-btn {
        display: block;
        width: 48px;
        height: 48px;
        background: white;
        padding: 2px 0px 0 1px;
    }

    .current div.icon i.fas {
        font-size: 150px;
    }

    .current .apparentTemperature {
        margin-top: -15px;
        padding: 0;
        margin-bottom: -5px;
    }

    .current .data {
        font-size: 0.85em;
    }

        .current .data .temp .windchill {
            display: none;
        }

    .forecast {
        text-align: center;
        padding-top: 20px;
    }

        .forecast .name {
            font-size: 0.6em;
        }

        .forecast .day {
            padding: 8px;
            margin: 2px;
            width: 114px;
            overflow: hidden;
        }

        .forecast .icon img {
            width: 35px;
            margin-left: -35px;
        }

        .forecast .temp, .forecast .wind, .forecast .rainfall {
            text-align: left;
            padding-top: 5px;
        }

            .forecast .temp .high, .forecast .temp .low {
                top: 35px;
                position: absolute;
                right: 5px;
                left: auto;
            }

            .forecast .temp .high {
                top: 20px;
            }

        .forecast #hourly .hour {
            font-size: 0.75em;
        }

            .forecast #hourly .hour .time {
                width: 45px;
            }

            .forecast #hourly .hour .temp, .forecast #hourly .hour .humidity {
                margin-left: 0;
            }

            .forecast #hourly .hour .icon img {
                width: 24px;
                margin-left: 0px;
                margin-top: -10px;
            }

            .forecast #hourly .hour .wind {
                width: 70px;
                margin-left: 0;
            }

            .forecast #hourly .hour .cloudCover {
                margin-left: 5px;
            }

    div#hourly-chart {
        width: 1056px;
        min-width: 1056px;
    }
}