.weather-alert-banner {
display: flex;
align-items: center;
padding: 15px;
margin: 10px 0;
border-radius: 8px;
border-left: 5px solid;
background-color: #f8f9fa;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.weather-alert-banner .alert-icon {
font-size: 2em;
margin-right: 15px;
flex-shrink: 0;
}
.weather-alert-banner .alert-content {
flex: 1;
}
.weather-alert-banner .alert-type {
display: inline-block;
margin-right: 5px;
font-weight: bold;
} .alert-severe {
border-left-color: #dc3545;
background-color: #f8d7da;
}
.alert-high {
border-left-color: #fd7e14;
background-color: #ffe5d0;
}
.alert-moderate {
border-left-color: #ffc107;
background-color: #fff3cd;
} .weather-alerts-list .weather-alert {
padding: 10px;
margin: 8px 0;
border-left: 4px solid #6c757d;
background-color: #f8f9fa;
border-radius: 4px;
}
.weather-alerts-list .alert-emoji {
font-size: 1.2em;
margin-right: 8px;
} .weather-no-alerts {
padding: 15px;
background-color: #d1e7dd;
border: 1px solid #badbcc;
border-radius: 8px;
color: #0f5132;
text-align: center;
margin: 10px 0;
} .weather-forecasts-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin: 20px 0;
}
.weather-card {
border: 1px solid #dee2e6;
border-radius: 8px;
overflow: hidden;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s, box-shadow 0.2s;
}
.weather-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.weather-card-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.weather-card-header h4 {
margin: 0;
font-size: 1.1em;
}
.weather-emoji {
font-size: 1.5em;
}
.weather-card-body {
padding: 15px;
line-height: 1.6;
} .weather-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.weather-table thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.weather-table th,
.weather-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #dee2e6;
}
.weather-table tbody tr:hover {
background-color: #f8f9fa;
}
.weather-table .weather-period {
width: 30%;
white-space: nowrap;
} .weather-forecasts-simple {
margin: 20px 0;
}
.weather-forecasts-simple .weather-item {
padding: 10px;
margin: 8px 0;
background: #f8f9fa;
border-left: 4px solid #667eea;
border-radius: 4px;
line-height: 1.6;
} .weather-all-alerts {
margin: 20px 0;
}
.weather-alerts-section {
margin-bottom: 30px;
}
.weather-alerts-section h3 {
color: #495057;
border-bottom: 2px solid #dee2e6;
padding-bottom: 10px;
margin-bottom: 15px;
} .weather-type-marine .weather-card-header {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.weather-type-marine .weather-item {
border-left-color: #1e3c72;
} .weather-type-extended .weather-card-header {
background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
}
.weather-type-extended .weather-item {
border-left-color: #134e5e;
} .weather-error {
padding: 15px;
background-color: #f8d7da;
border: 1px solid #f5c6cb;
border-radius: 8px;
color: #721c24;
margin: 10px 0;
} @media (max-width: 768px) {
.weather-forecasts-cards {
grid-template-columns: 1fr;
}
.weather-alert-banner {
flex-direction: column;
text-align: center;
}
.weather-alert-banner .alert-icon {
margin-right: 0;
margin-bottom: 10px;
}
.weather-table {
font-size: 0.9em;
}
.weather-table th,
.weather-table td {
padding: 8px;
}
}