/* Главное меню */
.menu-sticky {
      z-index: 9999;
      position: fixed;
      width: 100%;
      

}

.main-menu {display: block;}
.menu-dark {background-color: var(--main-bg-ui-menu-dark); border-bottom: 1px solid var(--main-bg-ui-border-dark);}
.menu-dark .main-menu {background-color: var(--main-bg-ui-menu-dark);}
.menu-light {background-color: var(--main-bg-ui-menu-light); border-bottom: 1px solid var(--main-bg-ui-border-light);}
.menu-light .main-menu {background-color: var(--main-bg-ui-menu-light);}
.menu-custom {background-color: var(--main-bg-ui-menu-custom); border-bottom: 1px solid var(--main-bg-ui-border-custom);}
.menu-custom .main-menu {background-color: var(--main-bg-ui-menu-custom);}

.opacity-light {background: none !important; border-bottom: none !important;}
.opacity-light .main-menu {background: none !important;}

.main-menu-logo {float: left;}
.menu-logo-text {display: block; padding: calc(var(--main-padding) + 10px) calc(var(--main-padding) + 25px) calc(var(--main-padding) + 5px) calc(var(--main-padding) + 5px); font-weight: 600;} 
.menu-dark .main-menu .main-menu-logo {color: var(--main-ui-color-dark);}
.menu-light .main-menu .main-menu-logo {color: var(--main-ui-color-light);}
.menu-custom .main-menu .main-menu-logo {color: var(--main-ui-color-custom);}

#menu-mobile-button {float: right; width: 40px; height: 40px; padding: 10px; cursor: pointer;  display: none;}
#menu-mobile-button span {display: block; width: 20px; height: 1px; margin-top: 5px;}
.menu-dark .main-menu #menu-mobile-button span {border: 1px solid var(--main-ui-color-dark);}
.menu-light .main-menu #menu-mobile-button span {border: 1px solid var(--main-ui-color-light);}
.menu-custom .main-menu #menu-mobile-button span {border: 1px solid var(--main-ui-color-custom);}

.menu-left {float: left;}
.menu-right {float: right;}

.main-menu ul {display: block; height: auto;}
.main-menu ul li {list-style: none; display: inline-block;}

.main-menu > ul > li > a {text-transform: uppercase;}
.main-menu ul li a {
   display: block;
   padding: calc(var(--main-padding) + 10px);
   text-decoration: none;
   font-weight: 600;
   font-size: 0.9rem;
}

.menu-dark .main-menu ul li a {color: var(--main-ui-color-dark); overflow: hidden;}
.menu-light .main-menu ul li a {color: var(--main-ui-color-light);}
.menu-custom .main-menu ul li a {color: var(--main-ui-color-custom);}

.main-menu ul li a:hover {background-color: var(--main-bg-ui-item-hover);}
.menu-dark .main-menu ul li a:hover {background-color: var(--main-bg-ui-menu-hover-dark); color: var(--main-ui-menu-color-hover-dark);}
.menu-light .main-menu ul li a:hover {background-color: var(--main-bg-ui-menu-hover-light); color: var(--main-ui-menu-color-hover-light);}
.menu-custom .main-menu ul li a:hover {background-color: var(--main-bg-ui-menu-hover-custom); color: var(--main-ui-menu-color-hover-custom);}

.opacity-light {background: none !important; border-bottom: none !important;}
.opacity-light .main-menu {background: none !important;}

.opacity-panel {background: rgba(0, 0, 0, 0.5) !important; border-bottom: rgba(0, 0, 0, 0.8) !important;}
.opacity-panel .main-menu {background: none !important;}

.opacity-dark {background: none !important; border-bottom: none !important;}
.opacity-dark .main-menu {background: none !important;}



.main-menu > ul {padding-right: 20px;}
.main-menu ul .submenu > a > span {
      font-size: 0.8em; 
      padding-left: 5px; 
      vertical-align: middle;
      display: inline-flex;
      flex-direction: row;
      height: 100%;
      align-items: center;
      align-content: center;
      align-self: center;
}



.main-menu ul .submenu {height: inherit;}
.main-menu ul .submenu ul {display: none; position: absolute; z-index: 9999; min-width: 150px; background: #fff; transition: 1s;}
.menu-dark  .main-menu ul .submenu ul {display: none; position: absolute; z-index: 9999; min-width: 150px; background: var(--main-bg-ui-menu-dark-sub);}
.menu-light .main-menu ul .submenu ul {display: none; position: absolute; z-index: 9999; min-width: 150px; background: var(--main-bg-ui-menu-light-sub);}
.menu-custom .main-menu ul .submenu ul {display: none; position: absolute; z-index: 9999; min-width: 150px; background: var(--main-bg-ui-menu-custom-sub);}

.main-menu ul .submenu ul li {display: block; min-width: 150px; background: #fff; ; overflow: hidden;}
.menu-dark .main-menu ul .submenu ul li {display: block; min-width: 150px; background: var(--main-bg-ui-menu-dark-sub); overflow: hidden;}
.menu-light .main-menu ul .submenu ul li {display: block; min-width: 150px; background: var(--main-bg-ui-menu-light-sub); overflow: hidden;}
.menu-custom .main-menu ul .submenu ul li {display: block; min-width: 150px; background: var(--main-bg-ui-menu-custom-sub); overflow: hidden;}

/* Пункты ниспадающего меню */
.main-menu ul .submenu ul li a {
      display: block; 
      min-width: 220px;
      width: auto;
      background: #fff; 
      padding-top: var(--main-padding); 
      padding-right:  calc(var(--main-padding)*2); 
      padding-bottom: var(--main-padding); 
      padding-left:  calc(var(--main-padding)*2); 
      transition: 0.8s; 
      color: #000; 
      overflow: hidden;
}
.main-menu ul .submenu ul li a:hover {
      padding-left: calc(var(--main-padding) + 20px); 
      
      transition: 0.8s;
}

.menu-dark .main-menu ul .submenu ul li a {background: var(--main-bg-ui-menu-dark-sub); color: var(--main-ui-color-dark-sub);}
.menu-dark .main-menu ul .submenu ul li a:hover {background: var(--main-bg-ui-menu-hover-dark-sub); color: var(--main-ui-color-hover-dark-sub);}
.menu-light .main-menu ul .submenu ul li a {background: var(--main-bg-ui-menu-light-sub); color: var(--main-ui-color-light-sub);}
.menu-light .main-menu ul .submenu ul li a:hover {background: var(--main-bg-ui-menu-hover-light-sub); color: var(--main-ui-color-hover-light-sub);}
.menu-custom .main-menu ul .submenu ul li a {background: var(--main-bg-ui-menu-custom-sub); color: var(--main-ui-color-custom-sub);}
.menu-custom .main-menu ul .submenu ul li a:hover {background: var(--main-bg-ui-menu-hover-custom-sub); color: var(--main-ui-color-hover-custom-sub) !important;}


.main-menu ul .submenu:hover ul {display: block; box-shadow: 2px 2px 4px #393939; transition: 1s;}

.menu-close {display: none;}
.main-menu ul.js-menu-p {display: block;}
.main-menu ul.js-menu-m {display: none;}


/* Общая для всех мобилок */
@media (max-width: 1020px) {
      .main-menu ul.js-menu-p {display: none !important;}
      .main-menu ul.js-menu-m {display: block !important;}

      .menu-dark .main-menu ul li a {color: #000;}
      .menu-light .main-menu ul li a {color: #000;}
      .menu-custom .main-menu ul li a {color: #000;}

      .main-menu ul {display: none;}
      #menu-mobile-button {display: block;}

      .menu-close {text-align: right; display: block; font-size: 22px; padding: 14px;}

      .menu-left {left: 0px; box-shadow: 2px 2px 4px #696969;}
      .menu-right {right: 0px; box-shadow: -2px 2px 4px #696969; padding-right: 0px;}

      .main-menu > ul {
            padding-right: 0px !important;
            position: fixed;
            top: 0px;
            height: 100% !important;
            background: #ffffff !important;
            overflow-y: scroll;
      }
      .main-menu ul li {width: 100%; display: block; height: 45px !important  ;}
      .main-menu ul li a {display: block;}
      .main-menu ul .submenu {height: auto !important;}      
      .main-menu ul .submenu ul {position: relative; display: block;}

}



/* Планшет горизонтальный */
@media (min-width: 768px) and (max-width: 1019px) {
      .main-menu > ul {
         width: 45% !important;   
      }
      

}


/* Планшет вертикальный */
@media (min-width: 420px) and (max-width: 767px) {
      .main-menu > ul {
         width: 55% !important;   
      }

}

/* Смартфон вертикальный */
@media (max-width: 419px) {
      .main-menu > ul {
         width: 100% !important;   
      }

}


/* МЕНЮ СПИСОК */
.menu-list {
      padding: var(--main-padding) 0;
}

.menu-list ul {display: block; list-style: none;}
.menu-list ul li {display: block;}
.menu-list ul li a {
      display: block;
      border: 1px solid hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l)));
      padding: 5px 10px;
      font-size: 1rem;
      color: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 85%));
      background: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l)));;
      border-radius: 2px;
      font-weight: 500;

}
.dark-mode .menu-list ul li a {
      border: 1px solid hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 8%));
      color: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 85%));
      background: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 15%));
}

.menu-list ul li a:hover {
      border: 1px solid hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 25%));     
      color: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 100%));
      background: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 15%));;
}
.dark-mode .menu-list ul li a:hover {
      border: 1px solid hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 25%));     
      color: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 100%));
      background: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 25%));;
}


.menu-list ul li a i {color: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 65%));}
.menu-list ul li a:hover i {color: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 65%));}

.dark-mode .menu-list ul li a i {color: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 65%));}
.dark-mode .menu-list ul li a:hover i {color: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 65%));}