.weather-control {
    --temp-color: white;
    background-color: var(--temp-color);
    color: black;
    padding: 10px;
    box-shadow: 0 0 3px 3px var(--temp-color);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: center;
    font-size: 30px;
}

.weather-control .condition {
    margin-left: auto;
    margin-right: auto;
}

.weather-control span.icon {
    display: none;
}

.weather-control[data-cond="light-rain-day"] span.icon.light-rain-day,
.weather-control[data-cond="light-rain-night"] span.icon.light-rain-night,
.weather-control[data-cond="heavy-rain-day"] span.icon.heavy-rain-day,
.weather-control[data-cond="heavy-rain-night"] span.icon.heavy-rain-night,
.weather-control[data-cond="thunderstorm-day"] span.icon.thunderstorm-day,
.weather-control[data-cond="thunderstorm-night"] span.icon.thunderstorm-night,
.weather-control[data-cond="normal-day"] span.icon.normal-day,
.weather-control[data-cond="normal-night"] span.icon.normal-night,
.weather-control[data-cond="light-cloud-day"] span.icon.light-cloud-day,
.weather-control[data-cond="light-cloud-night"] span.icon.light-cloud-night,
.weather-control[data-cond="heavy-cloud-day"] span.icon.heavy-cloud-day,
.weather-control[data-cond="heavy-cloud-night"] span.icon.heavy-cloud-night,
.weather-control[data-cond="loading"] span.icon.loading {
    display: inline-block;
}

span.normal-day,
span.light-cloud-day {
    color: #ed871a;
}

span.light-rain-day,
span.light-rain-night {
    --fa-primary-color: darkblue;
    --fa-secondary-color: white;
}

span.heavy-rain-day,
span.heavy-rain-night {
    color: darkblue;
}

span.thunderstorm-day,
span.thunderstorm-night {
    --fa-primary-color: darkgray;
    --fa-secondary-color: #9f9f09;
}

span.normal-night,
span.light-cloud-night {
    color: darkgray;
}