@charset "UTF-8";
.weather { display: flex; gap: 40px; margin-bottom: 60px; }

.weather__tabs { flex: 1 1 auto; max-width: calc(100% - 413px); }

.weather__tab { position: relative; display: none; overflow: hidden; }
.weather__tab.active { display: block; }

.weather__tab-inner { position: relative; z-index: 2; padding: 40px; color: #fff; }

.weather__tab-title { font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 5px; }

.weather__tab-time { font-size: 14px; font-style: normal; font-weight: 400; line-height: 160%; /* 22.4px */ margin-bottom: 60px; }

.weather__current { max-width: 400px; width: fit-content; margin-bottom: 30px; display: flex; align-items: center; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 15px 20px; gap: 9px; }

.weather__current-value { color: #FFF; font-family: Ubuntu; font-size: 46px; font-style: normal; font-weight: 700; line-height: normal; }

.weather__current-icon { height: 64px; flex: 0 0 60px; display: flex; align-items: center; justify-content: center; }
.weather__current-icon img { width: 100%; height: 100%; object-fit: contain; }

.weather__current-description { font-size: 14px; font-style: normal; font-weight: 400; line-height: 160%; /* 22.4px */ }

.weather__options { font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; margin-bottom: 60px; display: flex; align-items: center; gap: 11px; }

.weather__option { padding-right: 3px; padding-left: 29px; background-position: 0 50%; background-repeat: no-repeat; }

.weather__option_wind { background-image: url(../images/ico__wind.svg); }

.weather__option-sep { width: 4px; height: 4px; flex-shrink: 0; background: #fff; opacity: 0.6; border-radius: 50%; }

.weather__option_humidity { background-image: url(../images/ico__humidity.svg); }

.weather__option_pressure { background-image: url(../images/ico__pressure.svg); }

.weather__points { display: flex; gap: 8px; margin-right: -40px; scroll-snap-type: x mandatory; overflow-x: auto; padding-right: 40px; }
.weather__points::-webkit-scrollbar { display: none; }

.weather__point { width: 81px; flex-shrink: 0; text-align: center; padding: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4px; background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

.weather__point-time { font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }

.weather__point-icon { width: 29px; height: 29px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.weather__point-icon img { width: 100%; height: 100%; object-fit: contain; }

.weather__point-temperature { font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }

.weather__video { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.weather__video video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

.weather__tabs-nav { flex: 0 0 373px; }

.weather__tabs-nav-title { color: #5E5E5E; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; margin-bottom: 30px; }

.weather__btn { display: flex; background: rgba(255, 255, 255, 0.9); height: 82px; border-left: 3px solid transparent; padding-left: 17px; margin-bottom: 10px; align-items: center; padding-right: 20px; cursor: pointer; transition: all 0.3s; }
.weather__btn:last-child { margin-bottom: 0; }
.weather__btn.active { border-left-color: rgba(224, 44, 44, 0.9); pointer-events: none; }

.weather__btn-title { flex: 0 0 77px; color: #000; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }

._redtitle { color: #E02C2C; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }

.weather__btn-date { color: #000; font-size: 12px; font-style: normal; font-weight: 300; line-height: normal; margin-top: 10px; }

.weather__btn-temperature { flex: 1 1 auto; display: flex; align-items: center; }

.weather__btn-temperature-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; margin-right: 10px; }
.weather__btn-temperature-icon img { width: 100%; height: 100%; object-fit: contain; }

.weather__btn-temperature-info { color: #000; font-family: Ubuntu; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; }
.weather__btn-temperature-info div:last-child { opacity: 0.5; margin-top: 6px; }

.weather__btn-description { flex: 0 0 92px; color: #000; text-align: right; font-size: 12px; font-style: normal; font-weight: 300; line-height: normal; }

.header__temperature { margin-right: 15px; font-weight: 300; margin-left: 5px; font-weight: 400; background: #e02c2c; color: white; padding: 7px; }

.header__temperature:hover { background: #333; }

.cityselect { margin-right: 15px; }

@media (max-width: 991px) { .weather { display: block; margin-bottom: 40px; }
  .weather__tabs { max-width: 100%; margin-bottom: 40px; }
  .weather__tabs-nav-title { margin-bottom: 20px; } }
@media (max-width: 767px) { .weather__tab-inner { padding: 20px; }
  .weather__tab-time { margin-bottom: 20px; }
  .weather__current { flex-wrap: wrap; padding: 20px; gap: 1px; margin-bottom: 20px; }
  .weather__options { margin-bottom: 20px; }
  .weather__point { width: 91px; }
  .weather__points { margin-right: -20px; padding-right: 20px; }
  .weather__current-value { font-size: 36px; }
  .weather__current-icon { flex: 0 0 53px; height: 53px; }
  .weather__current-description { flex: 0 0 100%; } }
@media (max-width: 480px) { .weather__options { flex-wrap: wrap; }
  .weather__option-sep ~ .weather__option-sep { display: none; }
  .weather__option_pressure { flex: 0 0 100%; }
  .weather__options { row-gap: 9px; }
  .weather__btn-temperature-info div::before { content: 'д'; }
  .weather__btn-temperature-info div:last-child::before { content: 'н'; }
  .weather__btn-temperature-info span { font-size: 0; }
  .weather__btn-temperature-info span::first-letter { font-size: 14px; }
  .weather__btn-title { font-size: 14px; flex: 0 0 70px; } }