http://10.0.12.15/localscript/LA_e/la.php

/*
@media (min-width>= 992px) {
    .site-grid {
        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 20%) [sidebar-l-end] minmax(0, 50%) [sidebar-r-start] minmax(0, 30%) [main-end] minmax(0, 1fr) [full-end];
    }
}
*/
div
{
}
.head1{
padding-bottom:10px
}
 .mainblock {
 border-top: 3px solid;
 padding: 10px;
background-color:#ffffff;
 }
 .city_head{
/* border-bottom: 1px solid;*/
 padding:10px;
 }
 .city_body{
  max-width: 100vw; 
  overflow-x: auto;
  border-top: 1px solid black;
 }
.sp_h1{
font-size: 1.3em;
text-align: center;
}
.sp_s{
}
td
{
/*border:1px solid black;*/
}
.td_city{
text-align: center;
border-left: 1px solid black;
}
.headertable td{
border:0px;
}
 .district{
background-color:#eef2f7;
padding:10px;
border:3px solid #fff2f7;
text-align:center;
border-bottom:2px solid #000000;
}

.v1{
text-align: center;
color:#ffffff;
background-color:#008000;
border:2px solid #000000;
}

.v2{
text-align: center;
color:#000000;
background-color:#ffff00;
border:2px solid #000000;
}

.v3{
text-align: center;
color:#000000;
background-color:#ffa500;
border:2px solid #000000;
}

.v4{
text-align: center;
color:#ffffff;
background-color:#b22222;
border:2px solid #000000;
}

.v5{
text-align: center;
color:#000000;
background-color:#ffffff;
border:2px solid #000000;
}

.legend_level{
border: 1px solid #c8cfd7;
margin-top: 20px;
display:flex;
}
.legend_level_item{
flex:1;
display:flex;
padding:9px 14px;
gap:8px;
align-items:center;
}
span{
}
.legend_level_v1{
width:18px;
height:18px;
border:1px solid #888;
flex-shrink:0;
background:#008000;
}
.legend_level_v2{
width:18px;
height:18px;
border:1px solid #888;
flex-shrink:0;
background:#ffff00;
}
.legend_level_v3{
width:18px;
height:18px;
border:1px solid #888;
flex-shrink:0;
background:#ffa500;
}
.legend_level_v4{
width:18px;
height:18px;
border:1px solid #888;
flex-shrink:0;
background:#b22222;
}
.note_level{
margin-top:16px;
padding:14px 16px;
border-left: 3px solid navy;
}

div#mod-custom112{
background:white;
background-image:url("../../../../../images/templates/bb.gif");
padding:10px;
color:#0b2845
}
div.header1{
background:white;
background-image:url("../../../../../images/templates/bb.gif");
padding:10px;
color:#0b2845
}



[data-tooltip] {
    position: relative; /* Относительное позиционирование */ 
    z-index: 10000;
   }
[data-tooltip]::after {
    content: attr(data-tooltip); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    font-size: 15px;
    left: 0; top: 0; /* Положение подсказки */
    background: #0b2835; /* Синий цвет фона */
    color: #fff; /* Цвет текста */
    padding: 0em; /* Поля вокруг текста */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */
    pointer-events: none; /* Подсказка */
    opacity: 0; /* Подсказка невидима */
    transition: 1s; /* Время появления подсказки */
    text-align:center;
   } 
   [data-tooltip]:hover::after {
    opacity: 1; /* Показываем подсказку */
    top: 2em; /* Положение подсказки */
   }


div.wind_im_value::after {
    content: attr(data-tooltip); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    font-size: 15px;
    right: 0; top: 0; /* Положение подсказки */
    background: #0b2835; /* Синий цвет фона */
    color: #fff; /* Цвет текста */
    padding: 0em; /* Поля вокруг текста */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Параметры тени */
    pointer-events: none; /* Подсказка */
    opacity: 0; /* Подсказка невидима */
    transition: 1s; /* Время появления подсказки */
    min-width: 200px;
    margin-left:auto;
}

/* Показываем подсказку при наведении */
div.wind_im_value:hover::after {
    visibility: visible;
    opacity: 1;
}

.divhr {
    border-bottom: 2px solid blue;
}

.pogoda_mod
{
padding: 10px;
border: 1px solid #0b2845;
text-align:center;
background:#526a7d;
color:#ffffff;
}
.head_pogoda
{
padding: 10px;
background:  #0b2845;
color: #ffffff;
}
.temp_pogoda_graph{
width:50px;
height:50px;
/*
background-image:url('../../../../../images/pogoda_im/temp.png');
background-repeat: no-repeat;
background-size: contain;
--hue: calc((40 - var(--num)) * 3);
*/

--hue: calc(120 - (var(--num) * 3));
background-color: hsl(var(--hue), 90%, 40%); /* Цвет, в который нужно перекрасить */
mask-image: url('../../../../../images/pogoda_im/temp.png');
-webkit-mask-image: url('../../../../../images/pogoda_im/temp.png');
mask-size: contain;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
}
/*
.temp_pogoda_color
{
--hue: calc((40 - var(--num)) * 3);
background: hsl(var(--hue), 90%, 40%); 
}
*/
.temp_pogoda_full {
  display: flex;
  justify-content: center;
}
.temp_pogoda{
font-size:30px;
overflow-x:auto;
}
.wind_pogoda{
/*padding:5px;*/
text-align:center;
/*border: 1px solid #0b2845;*/
margin:1px;
/*max-width:6em;*/
min-width:80px;
display:flex;
}
.hum_pogoda{
/*padding:5px;*/
text-align:center;
/*border: 1px solid #0b2845;*/
margin:1px;
min-width:80px;
display:flex;
}
.press_pogoda{
/*padding:5px;*/
text-align:center;
/*border: 1px solid #0b2845;*/
margin:1px;
min-width:80px;
display:flex;
}
.press_unit {
  font-size: 0.6em;
}
.param_pogoda{
display: flex;
flex-wrap: wrap; 
}

#mod-custom115
{
width:100%;
margin:0px;
}

.head_oa{
  border-top: 3px solid #9a0e25;
  padding: 10px;
}
.oa_contaner1{
  display:flex;
  gap:10px;
  border-top:1px solid #042846
}
.oa_contaner1_1{
  width:30%;
  padding:10px;
}
.oa_contaner1_2{
  width:70%;
  padding:10px;
  text-indent:10px;
}
.oa_s{
  background:#9a0e25;
  color:#ffffff;
  padding:5px;
  display: block;
  width:100%
}

.na_contaner1{
  display:flex;
  gap:10px;
  border-top:1px solid #042846
}
.na_contaner1_1{
  width:30%;
  padding:10px;
}
.na_contaner1_2{
  width:70%;
  padding:10px;
  text-indent:10px;
}
.na_s{
  background:#a8470f;
  color:#ffffff;
  padding:5px;
  display: block;
  width:100%
}

.lavina_contaner1{
  display:flex;
  gap:10px;
  border-top:1px solid #042846
}
.lavina_contaner1_1{
  width:30%;
  padding:10px;
}
.lavina_contaner1_2{
  width:70%;
  padding:10px;
  text-indent:10px;
}
.lavina_s{
  background:#9a0e25;
  color:#ffffff;
  padding:5px;
  display: block;
  width:100%
}

.hydro_contaner1{
  display:flex;
  gap:10px;
  border-top:1px solid #042846
}
.hydro_contaner1_1{
  width:30%;
  padding:10px;
}
.hydro_contaner1_2{
  width:70%;
  padding:10px;
  text-indent:10px;
}
.hydro_s{
  background:#1d4ed8;
  color:#ffffff;
  padding:5px;
  display: block;
  width:100%
}
.vertmenu li.nav-item{
  margin-top:10px;
  max-width:100%;
}
.mod-list li .mod-menu__sub{
  max-width:100%;
}
.item-101{
  margin-top:0px !important;
}

ul.show-menu li{
  margin-top:0px !important;
/*  padding-top:10px;
  padding-bottom:10px;*/
}
.vertmenu li{
  background:#0b2845;
  color:#ffffff;
/*  margin-top:10px;*/
/*  padding-left:20px;*/
}
.hormenu li{
  background:#0b2845;
  color:#ffffff;
  margin:0px;
  padding: 10px !important;
  border:1px solid #0b2846;
}
.hormenu li a{
/*  background:#0b2845;
  color:#ffffff;*/
  margin-top:0px;
  padding: 0px !important;
}
.vertmenu li a{
 color:#ffffff;
 display:block;
/* margin-left:10px;*/
 padding-top:10px;
 padding-bottom:10px;
 padding-left:20px;
 padding-right:10px;
/*  background: #0b2845;*/
}
.vertmenu li.current .active a{
/*color:black;*/
}
span.vertmenu{
/*  color:#ffffff;*/
/*  padding-left:10px;*/
}
.maximenuck.horMenu
{
margin: 0;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
}
/*
.vertmenu li :hover{
background:white  !important;
color:black !important;
}

.vertmenu li :hover{
background:white;
color:black;
}
.vertmenu li a:hover{
background:white;
color:black;
}
*/
.icon-chevron-down:hover::before {
  content: "";
  pointer-events: none;
}

.vertmenu item-101{
margin-top:0px;
}


.vertmenu .deeper.parent{
padding-left:30px;
}

.head_level
{
padding: 10px;
background:  #0b2845;
color: #ffffff;
}
.level_mod
{
padding: 10px;
border: 1px solid #0b2845;
background:#526a7d;
color:#ffffff;
}

.level_city
{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
.level_city_value
{
font-size:30px;
text-align:center;
}
.login li
{
color:#000000;
background:#ffffff;

}
.login li a
{
background:#ffffff;
color:#000000;
}

.head_prognoz
{
padding: 10px;
background:  #0b2845;
color: #ffffff;
}
.prognoz_mod
{
padding: 10px;
border: 1px solid #0b2845;
background:#526a7d;
color:#ffffff;
}

.proznoz_city_value {
  padding-top: 5px;
}


.proznoz_city
{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}

.onmu_head {
  padding: 10px;
  background: #eef2f7;
  border-top: solid 3px #0b2846;
  font-size: 1.3em;
  text-align:center;
}

.onum_mod {
  padding: 10px;
  border: 1px solid;
  margin-bottom: 10px;
}

.onmu_city {
  font-size: 18px;
  border-bottom: 3px double black;
  padding-bottom: 10px;
}

.onum_text {
  padding-top: 10px;
}

.icon-chevron-down:before {
/*  color:#ffffff;*/
}

.li.maximenuck.level1.active a{
color: white;
background #0b4628;
}

.meteo h2{
text-align: center;
border-top: 1px solid #0b2846;
font-size: 2rem;
font-weight:400;
}
.meteo td {
border: 0px;
}
.page-header h1 {
  justify-content: center;
  display: grid;
  font-size: 2rem;
  font-weight:400;
}
.item-pagegidro td{
border: 0px;
}
.item-pagegidro ul{
overflow:visible;
border: 0px;
}

 li.current span{
background: #f0f0f0;
color: #000000;
}
 li.current a{
background: #f0f0f0;
color: #000000;
}


.icon-chevron-down::before{
/*background:#0b2846;*/
}

.navigation .nav-item a,
.mod-menu .nav-link {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.item-content
{
background:#ffffff;
border-top:2px solid #0b3528;
padding-left:10px;
padding-right:10px;
}

.meteomod li{
  background: #fff;
  color: #000000;
  padding: 10px;
}
.meteomod h2 {
  font-weight: 400;
  border-top: 1px solid black;
/*  text-transform: lowercase;*/
}
.meteomod h2:first-letter {
  text-transform: uppercase;
}
.card-header.meteomod {
  font-weight: 600;
  text-transform: lowercase;
  text-align:center;
}
.card-header.meteomod:first-letter {
  text-transform: uppercase;
}

.head_nmeteo {
  text-align: center;
  font-size: 1.3em;
}

#mod-custom124 {
  padding: 10px;
  border-top: 1px solid black;
}
.nmeteo_place {
  text-align: center;
  font-size: 1.15em;
  border-top: 1px solid black;
}

.nav-item.item-122.current.active {
  background: white;
  color: black;
}
.nav-item.item-122.current.active a {
  background: white;
  color: black;
}
.vertmenu li{
  border-width: 1px;
  border-style: solid;
  border-color:#0b2845; 
}
.vertmenu li.active {
  background: white;
  color: black;
}
.vz_head {
  text-align: center;
  font-size: 1.3em;
  padding: 10px;
  border-top: 1px solid #0b2846;
}
.mod_vz {
  padding-left: 10px;
  padding-right: 10px;
}
.nmeteo_textd {
  text-indent: 10px;
}
.mod_pogoda{
    display:flex;
}
.press_im{
    width:25px;
    height:25px;
    background-image:url('../../../../../images/pogoda_im/pressury.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.hum_im{
    width:25px;
    height:25px;
    background-image:url('../../../../../images/pogoda_im/humidity.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.wind_im{
    width:25px;
    height:25px;
    background-image:url('../../../../../images/pogoda_im/wind.png');
    background-repeat: no-repeat;
    background-size: contain;
}
.wind_unit{
    font-size:0.6em;
}
.wind_value{
    padding-left:8px;
}
.blog li {
  padding-left: 20px;
  list-style-position: inside;
}
.table_u td {
  border: 1px solid black;
}
.page-header h1{
font-weight:500;
font-size:1.5rem;
text-align:center;
}
.category-list h1{
font-weight:500;
font-size:1.5rem;
text-align:center;
}






/* ==========================================================================
   1. КОНТЕЙНЕР ШКАЛЫ И БАЗОВАЯ ЛОГИКА ЗОН
   ========================================================================== */
.progress-container {
  /* Перевод числовых значений в проценты от максимума (660) */
  --m1: 43.94%; /* Соответствует числу 290 */
  --m2: 59.09%; /* Соответствует числу 390 */

  width: 100%;
  height: 24px;
  background-color: #2a2a2a; /* Тёмная подложка шкалы */
  border-radius: 12px;
  position: relative;
  margin-top: 55px;          /* Отступ сверху для чисел и подсказки */
  box-sizing: border-box;
  cursor: pointer;
  
  /* ВАЖНО: Здесь НЕ должно быть свойства overflow: hidden, 
     иначе всплывающая подсказка над полосой будет обрезаться! */
}

/* Сброс боксовой модели для всех дочерних элементов */
.progress-container *, 
.progress-container *::before, 
.progress-container *::after {
  box-sizing: border-box;
}

/* ==========================================================================
   2. ПОЛОСА ЗАПОЛНЕНИЯ (СМЕНА ЦВЕТА НА ЧИСТОМ CSS)
   ========================================================================== */
.progress-bar {
  width: var(--value, 0%);   /* Ширина берется из атрибута style в HTML */
  height: 100%;
  border-radius: 12px;
  position: relative;        /* База для позиционирования толтипа */
  transition: width 0.4s ease, background-color 0.3s ease;

  /* Проверка пересечения отметок на чистом CSS (возвращает 1 или 0) */
  --is-yellow: clamp(0, sign(var(--value) - var(--m1)), 1);
  --is-red:    clamp(0, sign(var(--value) - var(--m2)), 1);

  /* Динамическое смешивание цветов: Зеленый (#4CAF50), Желтый (#FFC107), Красный (#F44336) */
  background-color: rgb(
    calc((1 - var(--is-yellow)) * 76  + (var(--is-yellow) * (1 - var(--is-red))) * 255 + var(--is-red) * 244),
    calc((1 - var(--is-yellow)) * 175 + (var(--is-yellow) * (1 - var(--is-red))) * 193 + var(--is-red) * 67),
    calc((1 - var(--is-yellow)) * 80  + (var(--is-yellow) * (1 - var(--is-red))) * 7   + var(--is-red) * 54)
  );
}


/* ==========================================================================
   4. ВЕРТИКАЛЬНЫЕ КОНТРАСТНЫЕ ОТМЕТКИ ЧИСЕЛ
   ========================================================================== */

/* Сами вертикальные линии-засечки на шкале */
.mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 4px;
  border-radius: 2px;
  z-index: 2;
}
.mark-1 { left: var(--m1); background-color: #FFC107; } /* Линия 290 (желтая) */
.mark-2 { left: var(--m2); background-color: #F44336; } /* Линия 390 (красная) */

/* Текст чисел (290 и 390) над линиями */
.mark::before {
  content: attr(data-label);   /* Отображает число из HTML-атрибута data-label */
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;              /* Контрастный белый текст */
  
  background-color: rgba(255, 255, 255, 0.12); /* Прозрачная защитная капсула */
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* Индивидуальное свечение рамок чисел для лучшего визуального разделения */
.mark-1::before { border-color: rgba(255, 193, 7, 0.4); }
.mark-2::before { border-color: rgba(244, 67, 54, 0.4); }










li:hover{
  background: white;
  color: black;
  border: 1px solid black;
}
.item-content li:hover {
  color: initial;
  border: 0px;
}
.com-content-article__body li:hover {
  color: initial;
  border: 0px;
  background:  initial;
}