.avg-card {background:#fcfcfc; justify-content:center; padding:10px}
.avg-values {font-size:14px; line-height:1.6}
.blackistoriya {background:yellow; color:black; font-size:14px; font-weight:bold; padding:5px}
.blackistoriya1 {background:green; color:white; font-size:14px; font-weight:bold; padding:5px}
.blackistoriya2 {background:red; color:white; font-size:14px; font-weight:bold; padding:5px}
.blackistoriya3 {background:blue; color:white; font-size:14px; font-weight:bold; padding:5px}
.blokdanipp {white-space:nowrap}
.blue-label {background:#5bc0de}
.borderpogoda {background:#fffff8; border:1px solid black; margin:4px}
.card-body {padding:12px; text-align:center}
.card-dates {color:#666; font-size:11px; height:45px; overflow:hidden; padding:0 12px 8px 12px}
.card-footer {background:#eee; font-size:0.85rem; font-style:italic; margin-top:auto; padding:6px; text-align:center}
.card-header {align-items:center; background:#f8f9fa; border-bottom:1px solid #eee; display:flex; padding:12px}
.card-label {color:#fff; font-size:11px; font-weight:bold; padding:4px; text-align:center}
.card-main {align-items:center; display:flex; justify-content:space-between; padding:8px 12px}
.card-temp {font-size:22px; font-weight:bold}
.card-title {color:#888; font-size:12px; margin-bottom:5px; text-transform:uppercase}
.cold {color:#007bff}
.cold-svg {color:#add8e6}
.compact-card {background:#fff; border-radius:8px; border:1px solid #e0e0e0; display:flex; flex-direction:column; font-family:Arial, sans-serif; overflow:hidden; width:200px}
.custom-slider {-webkit-overflow-scrolling:touch; display:flex; gap:10px; overflow-x:auto; padding:10px 0; scroll-snap-type:x mandatory}
.custom-slider {display:flex; gap:8px; overflow-x:auto; padding:10px 40px; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none}
.custom-slider::-webkit-scrollbar {display:none}
.custom-slider::-webkit-scrollbar {display:none}
.datapogodadd {font-size:14px; white-space:nowrap}
.dry-val {color:#666}
.form-wrapper {align-items:center; display:flex; justify-content:center; margin:30px 0; width:100%}
.hot {color:#d9534f}
.hot-svg {color:#ff8c00}
.icon {fill:currentColor; height:18px; width:18px}
.icon-svg {fill:currentColor; height:28px; width:28px}
.jegy1 {-webkit-user-drag:none; cursor:pointer; flex:0 0 auto; height:100px; scroll-snap-align:start}
.jegy1 {cursor:pointer; flex:0 0 auto; height:80px; scroll-snap-align:start; transition:opacity 0.3s; width:auto}
.jegy1 {cursor:pointer; padding:4px}
.jegy1:hover {border-radius:7px}
.jegy1:hover {opacity:0.7}
.label-red {color:#e63946; display:block; font-size:12px; font-weight:700; letter-spacing:0.5px; margin-bottom:6px; text-transform:uppercase}
.marker {border-radius:4px; display:inline-block; height:20px; margin-right:10px; width:20px}
.marker.default {background:#eee}
.marker.rainy {background:#3498db}
.marker.snowy {background:#95a5a6}
.marker.sunny {background:#ffce00}
.messs img {display:block; height:auto; max-width:100%}
.nav-btnpogoda {background:rgba(0,0,0,0.5); border-radius:4px; border:none; color:white; cursor:pointer; padding:15px 10px}
.nav-btnpogoda:hover {background:#000}
.orange-label {background:#f0ad4e}
.pogodaimg:hover {border-radius:20px; opacity:0.7}
.pogodatit {font-size:14px; font-weight:bold}
.redbut {background:blue; border-radius:6px; border:none; color:white; cursor:pointer; padding:12px}
.redbut-modern {align-items:center; background-color:#e63946; border-radius:8px; border:none; color:white; cursor:pointer; display:flex; font-size:14px; font-weight:600; gap:10px; padding:11px 24px; transition:all 0.2s ease}
.redbut-modern:hover {background-color:#c1121f; box-shadow:0 4px 12px rgba(230, 57, 70, 0.3)}
.redbut:hover {background:green; color:white}
.search-weather-container {align-items:flex-end; background:#ffffff; border-radius:12px; border:1px solid #f0f0f0; box-shadow:0 4px 20px rgba(0,0,0,0.08); display:flex; gap:15px; padding:20px 30px}
.searchdani {background:#fffeb4; margin:auto; max-width:250px; padding:20px; text-align:center}
.stat-item {align-items:center; display:flex; margin-bottom:8px}
.status-rainy {border-top:4px solid #3498db}
.status-snowy {border-top:4px solid #95a5a6}
.status-sunny {border-top:4px solid #ffce00}
.table-responsive {-webkit-overflow-scrolling:touch; margin-bottom:20px; overflow-x:auto; width:100%}
.tabledanni {background:#fbffe7; border:1px dashed black; color:black; display:inline-block; font-size:15px; margin:4px; padding:3px}
.tabpadpogodahis {margin-right:10px}
.tabpadpogodahis31 {background:blue; color:#fff; font-size:14px; font-weight:700; text-align:center}
.tabpadpogodahis32 {background:red; color:#fff; font-size:14px; font-weight:700; text-align:center}
.tabporiv {border-collapse:collapse; border:1px solid #ccc; font-family:sans-serif; width:auto}
.tabporiv {min-width:600px}
.tabporiv td {border:1px solid #eee; font-size:13px; padding:6px 10px; text-align:center}
.tabporiv td {border:1px solid black; font-size:14px; padding:5px; text-align:center}
.tabporiv th {background:#f1f1f1; border:1px solid #ddd; font-size:11px; padding:8px 12px; text-align:center}
.tabporiv th {background:#f4fcf8; border:1px solid black; color:red; font-size:14px; padding:5px}
.tabporiv th, .tabporiv td {padding:10px 15px; white-space:nowrap}
.tabporiv tr td:nth-child(2) {background:#f9f4fc; color:#0004a7; font-weight:bold}
.tabporiv tr td:nth-child(3) {background:#f9f4fc; color:red; font-weight:bold}
.tabporiv tr:hover {background:#f9f9f9}
.tabporiv1 {display:inline-block}
.tabporiv1 td {border:1px solid black; font-size:14px; padding:5px; text-align:center}
.tabporiv1 th {background:#f4fcf8; border:1px solid black; color:red; font-size:14px; padding:5px}
.tabporiv1 tr td:nth-child(2) {background:#f9f4fc; color:#0004a7; font-weight:bold}
.tabporiv1 tr td:nth-child(3) {background:#f9f4fc; color:red; font-weight:bold}
.tabzagalna {}
.tabzagalna td {border:1px solid black; font-size:14px; padding:5px}
.tabzagalna th {background:#f4fcf8; border:1px solid black; color:red; font-size:14px; padding:5px}
.tabzagalna tr td:nth-child(2) {background:#f9f4fc; color:#0004a7; font-weight:bold}
.tabzagalna tr td:nth-child(4) {background:#f9f4fc; color:#0004a7; font-weight:bold}
.temp-d, .day-val {color:#fd7e14}
.temp-item {display:flex; flex-direction:column}
.temp-item small {color:#999; font-size:0.7rem}
.temp-item span {font-size:1.1rem; font-weight:bold}
.temp-label {color:#888; font-size:0.8rem; margin-bottom:5px; text-transform:uppercase}
.temp-n, .night-val, .rain-val {color:#007bff}
.temp-values {display:flex; justify-content:space-around}
.txtzagol1 {font-size:21px; font-weight:bold}
.txtzagol2 {font-size:21px; font-weight:bold; text-transform:uppercase}
.weather-card {background:#fff; border-radius:12px; border:1px solid #eee; box-shadow:0 4px 6px rgba(0,0,0,0.1); display:flex; flex-direction:column; overflow:hidden; transition:transform 0.2s}
.weather-card:hover {transform:translateY(-5px)}
.weather-compact-container {display:flex; flex-wrap:wrap; gap:12px; margin:20px 0 40px 0}
.weather-container {display:grid; gap:15px; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); padding:20px 0}
.weather-date {color:#333; font-size:0.85rem; line-height:1.2}
.weather-icon img {border-radius:50%; height:45px; margin-right:10px; width:45px}
.weather-stats {background:#fdfdfd; border-radius:8px; margin-top:30px; padding:15px}
@media (max-width: 550px) {.search-weather-container {align-items:stretch; flex-direction:column; width:90%}.redbut-modern {justify-content:center}}
#month {border-radius:8px; border:2px solid #e0e0e0; cursor:pointer; font-size:16px; outline:none; padding:10px 14px; transition:all 0.3s ease}
#month:focus {border-color:#e63946; box-shadow:0 0 0 3px rgba(230, 57, 70, 0.1)}
#month:invalid + .validity:after {color:#888; content:'✖'; padding-left:10px}
#month:valid + .validity:after {color:#2b9348; content:'✓'; font-weight:bold; padding-left:10px}