#menu-horizont { background-color: transparent; line-height: 1; position: relative; width: auto; padding: 0;  margin: 0px; z-index: 200; }

/* !!!  1 уровень !!! */
#menu-horizont ul   { list-style: none;  line-height: 1;  padding: 0;  margin: 0; }
#menu-horizont > ul { position: relative;  display: block;  width: 100%;  z-index: 500;  text-align: left; }
#menu-horizont ul li a {  font-weight: 600; font-size:16px; display: block;  text-decoration: none; text-transform: uppercase; } /*uppercase normal*/
#menu-horizont > ul > li > a { text-transform: normal; color: #000; border-top: 0px solid transparent;}
#menu-horizont > ul > li:hover > a { color: #169A3B; background-color: transparent; border-top: 0px solid #169A3B;}

/* Изменения для растягивания элементов первого уровня */
#menu-horizont > ul {
  display: flex; /* Используем flexbox для равномерного распределения */
  justify-content: space-between; /* Равномерное распределение с промежутками */
}

#menu-horizont > ul > li {
  flex-grow: 1; /* Элементы будут растягиваться */
  text-align: left; /* Центрируем текст */
  margin-right: 0 !important; /* Убираем отрицательный margin */
}

#menu-horizont > ul > li > a {
  margin: 0 !important; /* Убираем margins у ссылок */
  padding: 20px 10px !important; /* Унифицируем padding */
  display: block; /* Занимаем всю доступную ширину */
}

/* Добавляем стрелку к ссылке (a.taphover) */
#menu-horizont > ul > li.has-sub > a.taphover {
    display: inline-block; 
    position: relative; /* Для позиционирования псевдоэлемента */
    padding-right: 20px !important; /* Место для стрелки */
}

/* Стрелка справа от текста */
#menu-horizont > ul > li.has-sub > a.taphover::after {
    content: "\f107"; /* Иконка FontAwesome (стрелка вниз) */
    font-family: 'FontAwesome';
    position: absolute;
    right: 0px; /* Отступ от правого края текста */
    top: 50%;
    transform: translateY(-50%); /* Центрирование по вертикали */
    color: inherit; /* Наследует цвет текста ссылки */
    font-size: 14px;
    transition: all 0.3s ease;
}



/* !!!  2-3 уровень !!! */

#menu-horizont ul ul li { position: relative; text-align: left;}

#menu-horizont ul ul {
  position: absolute; left: -9999px;  top: 0px;  margin: 0px;  z-index: 1000;
  opacity: 0;  -webkit-transition: opacity .3s ease, top .25s ease;  -moz-transition: opacity .3s ease, top .25s ease;  -ms-transition: opacity .3s ease, top .25s ease;  -o-transition: opacity .3s ease, top .25s ease;  transition: opacity .3s ease, top .25s ease;
  border: 1px solid #f1f1f1;
  border-top: transparent;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  background-color: #fff;
  padding-bottom: 15px !important;
  border-radius: 0 0 15px 15px;
}
#menu-horizont > ul > li:hover > ul {    	     top: 56px;    left: auto; opacity: 1;}
#cssmenu-horizont.align-right > ul > li:hover > ul { left: auto;   opacity: 1;}
#menu-horizont ul ul li:hover > ul { 		     left: 320px;   top: 0; opacity: 1; }
/*#menu-horizont ul ul li:last-child:hover > ul {      left: 276px;  top: 0;  opacity: 1; }*/
#cssmenu-horizont.align-right ul ul li:hover > ul {  right: 280px; left: auto; top: 0;  opacity: 1;  padding-right: 5px; }

#menu-horizont ul ul li a {  
  font-weight: 500; 
  font-size:16px; 
  width: 350px;
  text-transform: none;
  padding: 15px 25px 15px 25px;
  background-color: #fff;
  color: #000;
  -webkit-transition: all .35s ease;  -moz-transition: all .35s ease;  -ms-transition: all .35s ease;  -o-transition: all .35s ease;  transition: all .35s ease;
  border-bottom: 1px solid #EBEBEB;
}

#menu-horizont ul ul li:last-child a {  border-bottom: none; padding-bottom: 5px;}


#menu-horizont ul ul li:hover > a { color: #169A3B; }

#menu-horizont li.has-sub::after { display: block; content: ""; position: absolute; width: 0; height: 0; }

#menu-horizont ul ul ul { top: 40px;  padding-left: 15px;  margin: 0 0 0 -10px;  }





/* Стили для подменю меню #menu-12 (врачи) — отображение в 2 столбца */
#menu-horizont ul ul #menu-12 ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    position: static !important; /* Отменяем absolute */
    width: auto !important; /* Убираем фиксированную ширину, если нужно */
    max-width: 300px !important; /* Можно задать ограничение по ширине */
    opacity: 1 !important; /* Убираем прозрачность */
    box-shadow: none !important; /* Отменяем тени, если нужно */
    background-color: transparent !important; /* Отменяем фон */
    border: none !important; /* Отменяем бордер */
    padding: 5px !important; /* Небольшой отступ */
    left: auto !important; /* Отменяем left: -9999px и т.д. */
    top: auto !important;
    transform: none !important; /* Отменяем возможные трансформации */
}

/* Применяем к li элементам */
#menu-horizont ul ul #menu-12 ul li {
    width: auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 5px !important; /* Небольшой отступ внутри ячейки */
}

/* Стили для ссылок в сетке */
#menu-horizont ul ul #menu-12 ul li a {
    padding: 8px 12px !important; /* Уменьшаем padding, если нужно */
    width: auto !important;
    display: block;
}




/*  стрелка под меню */
#menu-horizont > ul > li > ul::after {  
  content: '';  border: 10px solid transparent;  width: 0;  height: 0;
  position: absolute;  top: -21px;  left: 20px;
  border-bottom-color: transparent; 
}
 /* стрелка в право */
#menu-horizont ul ul li.has-sub::after {             
  border: 4px solid transparent;  right: 10px;  top: 18px;  z-index: 1000; -moz-transition: all .2s ease;  -ms-transition: all .2s ease;  -o-transition: all .2s ease;  transition: all .2s ease;  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
  border-left-color: #169A3B;
  z-index:200;
}
/* ответная стрелка в лево */
#menu-horizont ul ul li.has-sub:hover::after {
  right: 15px;  -webkit-transform: rotateY(180deg);  -ms-transform: rotateY(180deg);  -moz-transform: rotateY(180deg);  -o-transform: rotateY(180deg);  transform: rotateY(180deg);
  border-left-color: #169A3B;
  z-index:1000;
}
#cssmenu-horizont.align-right ul ul li.has-sub:hover::after { border-left-color: transparent;  left: -5px;  -webkit-transform: rotateY(180deg);  -ms-transform: rotateY(180deg);  -moz-transform: rotateY(180deg);  -o-transform: rotateY(180deg);  transform: rotateY(180deg);
  border-right-color: #ffffff;
}
#indicatorContainer {  position: absolute;  height: 12px;  width: 100%;  bottom: 0px;  overflow: hidden;  z-index: -1; }
#pIndicator { position: absolute;  height: 0;  width: 100%;  border: 12px solid transparent;  z-index: -2;  -webkit-transition: left .25s ease;  -moz-transition: left .25s ease;  -ms-transition: left .25s ease;  -o-transition: left .25s ease;  transition: left .25s ease;
  border-top-color: #EEC7D4;
}
#cIndicator { position: absolute;  height: 0;  width: 100%;  border: 12px solid transparent; top: -12px;  right: 100%;  z-index: -2; 
  border-top-color: #2b2f3a;
}


/* active */
#menu-horizont > ul > li.active >    a { color: #169A3B; border-top: 0px solid #fff;}
#menu-horizont > ul ul > li.active > a { color: #169A3B;  }
#menu-horizont > ul > li.active.has-sub::after { color: #169A3B !important; }
#menu-horizont > ul > li.has-sub > a.taphover:hover::after { color: #169A3B; }
#menu-horizont > ul > li.has-sub:hover::after {color: #169A3B; }