/* БОКОВОГО МЕНЮ */

@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
    --Gcolor1: #3C448D;
    --Gcolor2: #BDC5E6;
    --Gcolor3: #E1C886;
    --Gcolor-text: #1F2026;
    --Gcolor-border: #F6F6F6;
    --Gcolor-bg: #303561;
    --Gfont: 'Tenor Sans', sans-serif !important;
    --Gfont2: 'Roboto Condensed', sans-serif !important;

    /* фильтр фиолетовый цвет */
    --ikonka1: invert(100%) sepia(4%) saturate(0%) hue-rotate(194deg) brightness(111%) contrast(101%);
    /* фильтр белый цвет */
    --ikonka2:  invert(98%) sepia(9%) saturate(3008%) hue-rotate(535deg) brightness(92%) contrast(85%);
    --radius-notif: 50%; 
    
    --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/676509/sc/266/h/daf1d233dee4b3081e8cd025012cc47c.svg');
    --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/676509/sc/49/h/c79d2e75850b2279c3cd32a090c35535.svg');
    --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/676509/sc/133/h/1219ec7d5aa5500d15136dd9255b8c5a.svg');
    --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/676509/sc/89/h/048a31d1a063b6fc94451f930829fad1.svg');
    --item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/676509/sc/73/h/074b278010f6f6e1296fc55d9f9759e2.svg');
    --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/676509/sc/331/h/4aa4cedfb77aabfe041c8737e24d9205.svg');
    --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/108/h/96320db2f55c10e184d0014e002e1aab.png');
}


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

/*  Контейнер с меню - высота - под контент, тень, скругление */
.gc-account-leftbar .gc-account-user-menu {
    /* высота - под количество контента */
    height: auto;
    /* заливка фона цветом */
    background: #1C2E49!important;
    /* радиус скругления */
    border-radius: 0px;
    /* внутренний отступ */
    padding-bottom: 5px;
    /* тень */
    /*box-shadow: 0px 25px 40px -20px 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: 52px;
    /* граница - обводка аватарки */
    border: 1px solid var(--Gcolor3);
}

/* Раздел с иконкой профиля (ссылка) */
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: transparent!important;
    /* внешний отступ */
    margin: 12px auto 20px;
    /* размеры раздела */
    width: 62px;
    height: 62px;
    /* радиус скругления */
    border-radius: 0px;
    /* задержка для плавности анимации */
    transition: all 0.3s;
}

/* выделим фон разделов под иконки при наведении */
.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: 4px;
    left: 50%;
    transform: translateX(-50%);
    /* иконка как фоновое изображение - помещается полностью в псведоэлемент */
    background-size: contain;
    /* иконка как фоновое изображение - размещаем один раз */
    background-repeat: no-repeat;
    display: block;
    /* размер псевдоэлемента */
    width: 40px;
    height: 40px;
    /* цвет иконки - через фильтр */
    filter: var(--ikonka2);
}

/* иконки - как фоновое изображение к каждому из разделов */
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: 30px;
    height: 24px;
    /* позиционирование по левому и правому углу */
    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(--ikonka1);
}

/* надписи к разделам через псевдоэлемент - позиционируем, задаём цвет */
li.menu-item.menu-item-cms a::before,
li.menu-item.menu-item-teach a::before,
li.menu-item.menu-item-user a::before,
li.menu-item.menu-item-tasks a::before,
li.menu-item.menu-item-notifications a::before,
li.menu-item.menu-item-sales a::before,
li.menu-item.menu-item-chatium a::before {  
    /* размер шрифта */
    font-size: 10px;
    /* позиционируем от левого и правого края */
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    /* цвет текста */
    color: var(--Gcolor-border);
}

/* надписи через псевдоэлемент для каждого раздела */
li.menu-item.menu-item-cms a::before {content: 'Cайт';}
li.menu-item.menu-item-teach a::before {content: 'Обучение';}
li.menu-item.menu-item-user a::before {content: 'Ученики';}
li.menu-item.menu-item-tasks a::before {content: 'Процессы';}
li.menu-item.menu-item-notifications a::before {content: 'Служба поддержки';}
li.menu-item.menu-item-sales a::before {content: 'Заказы';}
li.menu-item.menu-item-chatium a::before {content: 'Приложение';}

/* задаём цвет надписей под иконками при выборе/нажатии */
li.menu-item.selected a::before,
li.menu-item.active a::before,
li.menu-item:hover a::before {
    color: var(--Gcolor-border);
}

/* Счетчик уведомлений в левом меню */
.gc-account-leftbar .notify-count {
    /* счетчик - выше слоем других элементов */
    z-index: 2;
    /* ширина уведомления */
    width: 30px;
    /* шрифт */
    font-family: var(--Gfont2)!important; 
    /* размер шрифта */
    font-size: 0.8em!important;
    /* толщина написания */
    font-weight: bold;
    /* выравнивание посередине */
    text-align: center;
    /* цвет текста */
    color: var(--Gcolor-border);
    /* заливка фона */
    background: var(--Gcolor3)!important;
    /* радиус скругления */
    border-radius: 10px;
    /* позиционируем от нижнего и правого края */
    position: absolute;
    bottom: 44px;
    right: 4px;
    /* внутренние отступы */
    padding: 3px 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: 250px; 
    /* фон прозрачный */
    background: transparent!important;
    /* подключаем флекс, чтобы содержимое подменю выравнивать по нужному краю */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    /* контент будет выровнен по верхнему краю */
    justify-content: flex-start;
}

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

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

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

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

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

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

/* Контент подменю со списком подразделов */
ul.gc-account-user-submenu {
    background: var(--Gcolor-border);
    border-radius: 20px;
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.2);
    padding: 20px 5px 20px 5px!important;
    margin-left: 20px!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(--Gfont2)!important; 
    font-size: 16px;
    font-weight: 400;
    color: var(--Gcolor1)!important;
    transition: all 0.3s;
}

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

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

/* Контент подменю раздела Уведомления */
.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(--Gcolor-border)!important;
    /* радиус скругления */
    border-radius: 20px;
    /* тень */
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.2);
    /* внутренние отступы */
    padding: 20px 5px 20px 5px!important;
    /* внешний отступ слева */
    margin-left: 20px!important;
}
html .gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications_button_small {
  background: var(--Gcolor-border)!important;
}

/* Мобильная адаптация */ 
@media (max-width: 768px) {
    /* Боковое меню */ 
  html .gc-account-leftbar {
    /* заливка фона - прозрачный */
    background: transparent;
  }
  /*  Контейнер с меню - высота - под контент, тень, скругление */
.gc-account-leftbar .gc-account-user-menu {
    /* высота - под количество контента */
    height: auto;
    /* заливка фона цветом */
    background: var(--Gcolor1);
    /* радиус скругления */
    border-radius: 20px;
  }
    html .gc-account-leftbar .gc-account-user-menu {
       background: var(--Gcolor1)!important;
    }
    /* Нижняя плашки меню */ 
    .gc-account-leftbar .toggle-link, 
    .gc-page-nav-items-menu a {
       background: var(--Gcolor1)!important;
    }
    /* Иконка-бургер */ 
    .gc-account-leftbar .without-icon img {
       filter: var(--ikonka1);
    }
    /* Контент подменю Продажи */
    .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: 210px;
    }
    /* подменю со списком подразделов */
    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;
    }
}