body { background: #f1f5f9; }

#location { min-width: 220px; }

.wx-card { border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); height: 100%; }
.wx-card .time { font-weight: 600; color: #475569; }
.wx-card .temp { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.wx-card .stat { display: flex; justify-content: space-between; font-size: .9rem; border-top: 1px solid #e2e8f0; padding: .2rem 0; }
.wx-card .stat span:first-child { color: #64748b; }
.wx-card .short { font-size: .8rem; color: #64748b; min-height: 2.4em; }

.wx-icon { color: #f59e0b; font-size: 1.8rem; vertical-align: -.1em; margin-right: .15rem; }
.bi-cloud-rain.wx-icon, .bi-cloud-drizzle.wx-icon, .bi-cloud-lightning-rain.wx-icon,
.bi-cloud-snow.wx-icon, .bi-cloud.wx-icon, .bi-clouds.wx-icon, .bi-cloud-fog.wx-icon,
.bi-cloud-haze.wx-icon, .bi-wind.wx-icon, .bi-moon-stars.wx-icon, .bi-cloud-moon.wx-icon { color: #64748b; }
.bi-cloud-rain.wx-icon, .bi-cloud-drizzle.wx-icon, .bi-cloud-lightning-rain.wx-icon { color: #0d6efd; }

.rain-high { color: #0d6efd; font-weight: 700; }
.temp-hi { color: #dc3545; }
.temp-lo { color: #0d6efd; }

.alert-details { white-space: pre-line; }

.skeleton { opacity: .5; }