@charset "UTF-8";

.weather-forecast h4 {
    margin-bottom: 1em;
}

.weather-date, .weather-header, .weather-detail, .forecast-timetable {
    text-align: center;
}

.weather-temp {
    font-size: 5rem;
    padding-left: 2rem;
}

.weather-date, .weather-temp {
    font-weight: bold;
}

.weather-header, .weather-detail {
    list-style: none !important;
    margin: 0 0 2rem 0 !important;
}

.weather-detail {
    display: flex;
    justify-content: space-evenly;
}

.weather-detail span {
    display: block;
}

.forecast-timetable {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--ast-border-color);
    border-radius: var(--border-radius-small);
    box-shadow: var(--box-shadow-style-3);
    margin-bottom: 2em;
}

.forecast-detail {
    list-style: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    width: 12.5%;
    border-right: 1px solid var(--ast-border-color);
}

.forecast-detail:nth-child(1) .forecast-time {
    border-top-left-radius: var(--border-radius-small);
}

.forecast-detail:nth-child(1) .forecast-temp {
    border-bottom-left-radius: var(--border-radius-small);
}

.forecast-detail:nth-child(8) {
    border-right: none;
}

.forecast-detail:nth-child(8) .forecast-time {
    border-top-right-radius: var(--border-radius-small);
}

.forecast-detail:nth-child(8) .forecast-temp {
    border-bottom-right-radius: var(--border-radius-small);
}

.forecast-time, .forecast-icon, .forecast-temp {
    background: var(--ast-global-color-4);
}

.forecast-time {
    border-bottom: 1px solid var(--ast-border-color);
}

@media screen and ( max-width: 768px ) {
    .weather-detail li {
        padding: 0;
    }

    .weather-detail li, .forecast-detail {
        width: 25%;
    }

    .forecast-detail:nth-child(4) {
        border-right: none;
    }

    .forecast-detail:nth-child(4) .forecast-time {
        border-top-right-radius: var(--border-radius-small);
    }

	.forecast-detail:nth-child(5) .forecast-temp {
        border-bottom-left-radius: var(--border-radius-small);
    }

    .forecast-detail:nth-child(8) .forecast-time {
        border-top-right-radius: none;
    }

    .forecast-detail:nth-last-child(n+5),
    .forecast-detail:nth-last-child(n+5) ~ .forecast-detail:nth-child(-n+4) {
        border-bottom: 1px solid var(--ast-border-color);
    }
}