/* ОФОРМЛЕНИЕ БОКОВОГО МЕНЮ С РАСКРЫВАЮЩИМСЯ СПИСКОМ - НАЧАЛО */

/*подключаем шрифты */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --Gcolor1: #1d5349;
    --Gcolor2: #1d5349;
    --Gcolor3: #453F3F;
    --Gwhite:  #ede8e0;
    --Gblack:  #333333;
    --Gbackground: #F9F9FB;
    --Gfont: 'Montserrat', sans-serif!important; 
    /* фильтр без наведения */
    --ikonka1: invert(100%) sepia(3%) saturate(3390%) hue-rotate(321deg) brightness(98%) contrast(91%);
    /* фильтр с наведением */
    --ikonka2: invert(96%) sepia(8%) saturate(3921%) hue-rotate(296deg) brightness(110%) contrast(116%);
    --button-small: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/372/h/b438fe5bbe8bdaaf1c3237704daaf046.png');
    --item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/251/h/962c3afe7cb2871730356d4c49d6aedf.png');
    --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/382/h/b129e3f928dddf5bad3413c8b4af5ea3.png');
    --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/473/h/f3194aefcb17bcc08efb407d3ff3b0ed.png');
    --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/128/h/45d1a6fb2e269a1b561184b2bc26f016.png');
    --item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/289/h/cc4e51fe5e20b971798af13cad41d63e.png');
    --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/129/h/f55a33d17aa260088e5c234e1019f1dc.png');
    --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/108/h/96320db2f55c10e184d0014e002e1aab.png');
}

/* Левая панель */
html .gc-account-leftbar {
    /* заливка фона - прозрачный */
    background: transparent;
    /* ширина панели */
    width: 70px;
}

/*  Контейнер с меню - высота - под контент, тень, скругление */
.gc-account-leftbar .gc-account-user-menu {
    /* высота - под количество контента */
    height: 98%;
    /* заливка фона цветом */
    background: var(--Gwhite);
    /* радиус скругления */
    border-radius: 20px;
    /* внутренний отступ */
    padding-bottom: 5px;
    padding-top: 5px;
    /* внешние отступы */
     margin-top: 5px;
     margin-left: 5px;
    /* тень */
     box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
}

/*  Левая панель - убираем разделители между иконками-разделами */
.gc-account-leftbar .gc-account-user-menu li {
    border-bottom: none;
}

/* Иконка профиля - аватар */
html .menu-item-profile .menu-item-icon {
    /* радиус скругления */
    border-radius: 100px;
    /* ширина аватарки */
    width: 55px;
    /* граница - обод аватарки */
    border: 2px solid var(--Gcolor2);
}

/* Раздел с иконкой профиля (ссылка) */
li.menu-item.menu-item-profile a {
    /* заливка фона - прозрачный */
    background: transparent!important;
    /* задержка для плавности анимации */
    transition: all 0.3s;
}

/*  Левая панель - размеры разделов с иконками */
li.menu-item.menu-item-notifications_button_small a,
li.menu-item.menu-item-cms a,
li.menu-item.menu-item-teach a,
li.menu-item.menu-item-user a,
li.menu-item.menu-item-tasks a,
li.menu-item.menu-item-notifications a,
li.menu-item.menu-item-sales a,
li.menu-item.menu-item-chatium a {
    display: block;
    /* заливка фона цветом */
    background: #2a7868;
    /* внешний отступ */
    margin: 1px auto 12px;
    /* размеры раздела */
    width: 55px;
    height: 55px;
    /* радиус скругления */
    border-radius: 16px;
    /* задержка для плавности анимации */
    transition: all 0.5s;
}

/* выделим фон разделов под иконки при наведении */
.gc-account-leftbar .gc-account-user-menu li:hover a,
.gc-account-leftbar .gc-account-user-menu li.active a, 
.gc-account-leftbar .gc-account-user-menu li.selected a {
    /* заливка фона цветом */
    background: var(--Gcolor2);
}

/* скрываем системные иконки Меню */
html .menu-item-notifications_button_small a img,
html .menu-item-cms a img,
html .menu-item-teach a img,
html .menu-item-user a img,
html .menu-item-tasks a img,
html .menu-item-notifications a img,
html .menu-item-sales a img,
html .menu-item-chatium a img {
    display: none;
}

/* новые иконки через псевдоэлемент - позиционируем, задаём цвет */
li.menu-item.menu-item-cms a::after,
li.menu-item.menu-item-teach a::after,
li.menu-item.menu-item-user a::after,
li.menu-item.menu-item-tasks a::after,
li.menu-item.menu-item-notifications a::after,
li.menu-item.menu-item-sales a::after,
li.menu-item.menu-item-chatium a::after {  
    content: '';
    /* позиционирование по левому и правому углу */
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    /* иконка как фоновое изображение - помещается полностью в псведоэлемент */
    background-size: contain;
    /* иконка как фоновое изображение - размещаем один раз */
    background-repeat: no-repeat;
    display: block;
    /* размер псевдоэлемента */
    width: 28px;
    height: 28px;
    /* цвет иконки - через фильтр */
    filter: var(--ikonka1);
}

/* иконки - как фоновое изображение к каждому из разделов */
li.menu-item.menu-item-cms a::after {background-image: var(--item-cms);}
li.menu-item.menu-item-teach a::after {background-image: var(--item-teach);}
li.menu-item.menu-item-user a::after {background-image: var(--item-user);}
li.menu-item.menu-item-tasks a::after {background-image: var(--item-tasks);}
li.menu-item.menu-item-notifications a::after {background-image: var(--item-notif);}
li.menu-item.menu-item-sales a::after {background-image: var(--item-sales);}
li.menu-item.menu-item-chatium a::after {background-image: var(--item-chatium);}

/* новая иконка - рупор - позиционируем, задаём цвет */
li.menu-item.menu-item-notifications_button_small a::after {
    content: ''; 
    display: block;
    /* размер псевдоэлемента */
    width: 18px;
    height: 18px;
    /* позиционирование по левому и правому углу */
    position: absolute;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%); 
    /* изображение рупора */
    background-image: var(--button-small);
    /* иконка как фоновое изображение - помещается полностью в псведоэлемент */
    background-size: contain; 
    /* иконка как фоновое изображение - размещаем один раз */
    background-repeat: no-repeat; 
    /* из черного - в сиреневый */
    filter: var(--ikonka1);
}

/* задаём цвет новых иконок при выборе/нажатии */
li.menu-item.selected a::after,
li.menu-item.active a::after,
li.menu-item:hover a::after {
    /* из черного - в белый */
    filter: var(--ikonka2);
}

/* Счетчик уведомлений в левом меню */
.gc-account-leftbar .notify-count {
    /* счетчик - выше слоем других элементов */
    z-index: 2;
    /* ширина уведомления */
    width: 26px;
    /* шрифт */
    font-family: var(--Gfont)!important; 
    /* размер шрифта */
    font-size: 0.75em!important;
    /* толщина написания */
    font-weight: bold;
    /* выравнивание посередине */
    text-align: center;
    /* цвет текста */
    color: var(--Gwhite);
    /* заливка фона */
    background: #d32d2f!important;
    /* радиус скругления */
    border-radius: 16px;
    /* позиционируем от нижнего и правого края */
    position: absolute;
    bottom: 42px;
    right: 4px;
    /* внутренние отступы */
    padding: 4px 0px;
}

/* Скрываем раздел в меню с бонусными рублями, депозитом и монетами */
.user-balance {
    display: none;
}

/* Заголовок подменю */
.gc-account-user-submenu-bar H3 {
    display: none;
}

/* Подменю */
html .gc-account-leftbar .gc-account-user-submenu-bar {
    /* размеры */
    height: 100%;
    width: 300px; 
    /* фон прозрачный */
    background: transparent;
    /* подключаем флекс, чтобы содержимое подменю выравнивать по нужному краю */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    /* контент будет выровнен по верхнему краю */
    justify-content: flex-start;
}

/* Контент подменю сдвигаем с верхнего края на нужную высоту */
/* Контент подменю Сайт */
.gc-account-user-submenu-bar-cms .gc-account-user-submenu {
    margin-top: 100px!important;
}

/* Контент подменю Профиль */
.gc-account-user-submenu-bar-profile .gc-account-user-submenu {
    margin-top: 5px!important;
}

/* Контент подменю Обучение */
.gc-account-user-submenu-bar-teach .gc-account-user-submenu {
    /* для учеников */
    margin-top: 120px!important;
}

.gc-account-user-submenu-bar-teach .gc-account-admin-submenu {
    /* для администратора */
    margin-top: 217px!important;
 }

/* Контент подменю Пользователи */
.gc-account-user-submenu-bar-user .gc-account-user-submenu {
    margin-top: 230px!important;
}

/* Контент подменю Задачи */
.gc-account-user-submenu-bar-tasks .gc-account-user-submenu {
    margin-top: 300px!important;
}

/* Контент подменю Сообщения */
.gc-account-user-submenu-bar-notifications .gc-account-user-submenu {
    margin-top: 320px!important;
}

/* Контент подменю Продажи и Приложение */
.gc-account-user-submenu-bar-sales .gc-account-user-submenu,
.gc-account-user-submenu-bar-chatium  .gc-account-user-submenu {
   /* для учеников */
    margin-top: 250px!important;
    /* для администратора  margin-top: 350px!important; */
}

.gc-account-user-submenu-bar-chatium  .gc-account-user-submenu {
    padding-bottom: 10px!important;
}

/* Контент подменю со списком подразделов */
ul.gc-account-user-submenu {
    background: var(--Gwhite);
    border-radius: 20px;
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.3);
    padding: 10px 5px 10px 5px!important;
    margin-left: 10px!important;
}

/* Затемнение экрана */
.gc-fade-wrapper .gc-fade {
    /* сдвигаем в верхний левый угол */
    top: 0px;
    left: 0px;
    /* затемнение - меньше */
    opacity: 0.1;
}

/* Разделы в подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    font-family: var(--Gfont)!important; 
    font-size: 14px;
    font-weight: 500;
    color: var(--Gcolor1);
    transition: all 0.3s;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Разделы в подменю при наведении */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    /* цвет */
    color: var(--Gwhite);
    /* заливка фона */
    background: #2a7868;;
    /* радиус скругления */
    border-radius: 14px;
}

/* Счетчик уведомлений в раскрывающемся меню - подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li .notify-count {
    /* шрифт */
    font-family: var(--Gfont)!important; 
    /* размер шрифта */
    font-size: 0.65em!important;
    /* выравнивание по нижнему и по правому краю */
    bottom: 6px;
    right: 15px;    
}

/* Контент подменю раздела Уведомления */
.gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications_button_small {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    /* ширина и высота - под количество контента */
    width: auto!important;
    height: auto!important;
    /* заливка фона */
    background: var(--Gwhite)!important;
    /* радиус скругления */
    border-radius: 20px;
    /* тень */
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.3);
    /* внутренние отступы */
    padding: 20px 10px 20px 10px!important;
    /* внешний отступ слева */
    margin-left: 10px!important;
    margin-top: 5px;
}

/* Мобильная адаптация */ 
@media (max-width: 768px) {
    /* Боковое меню */ 
    html .gc-account-leftbar .gc-account-user-menu {
       background: var(--Gwhite);
    }
    /* Нижняя плашка меню */ 
    .gc-account-leftbar .toggle-link, 
    .gc-page-nav-items-menu a {
       background: var(--Gcolor2);
    }
    /* Иконка-бургер */ 
    .gc-account-leftbar .without-icon img {
       border-radius: 100px;
       background: #ede8e0;
}
      /* Контент подменю Продажи */
    .gc-account-user-submenu-bar-sales .gc-account-user-submenu {
        margin-top: 369px!important;
    }
    /* Контент подменю Приложение */
    .gc-account-user-submenu-bar-chatium  .gc-account-user-submenu {
        margin-top: 303px!important;
    }
}

@media (max-width: 360px) {
    html .gc-account-leftbar .gc-account-user-submenu-bar {
        width: 230px;
    }
    /* подменю со списком подразделов */
    ul.gc-account-user-submenu {
        margin-left: 10px!important;
    }
    /* Разделы в раскрывающемся меню */
    .gc-account-user-submenu-bar .gc-account-user-submenu li a {
        font-size: 14px;
    }
    /* Контент подменю Сообщения */
    .gc-account-user-submenu-bar-notifications .gc-account-user-submenu {
        margin-top: 424px!important;
    }
    /* Контент подменю Продажи */
    .gc-account-user-submenu-bar-sales .gc-account-user-submenu {
        margin-top: 349px!important;
    }
    /* Контент подменю Приложение */
    .gc-account-user-submenu-bar-chatium  .gc-account-user-submenu {
        margin-top: 333px!important;
    }
}

/* кнопка в разделе сообщения*/
.talks-widget-window .talks-widget-body .conversations-list-block .conversation-list-footer .btn {
    font-size: 16px;
    background: #1d5349;
    border-radius: 14px;
}

/* виджет общения*/
.talks-widget-button {
    color: #ede8e0;
    background: #1d5349;
}