

/* БОКОВОЕ МЕНЮ - начало */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600&display=swap');
:root {
  
  --font: 'Montserrat', 'Roboto', sans-serif;
  --color-rose: #000;
  --color-gray: #FFAD05;
  --color-white: #ffffff;
  --color-black: #000;
  --button_small: url('https://fs.getcourse.ru/fileservice/file/download/a/900763/sc/321/h/914d6a20e9b03d70cd1cfd6fd2ce600c.svg');
  --item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/900763/sc/424/h/66d44adb2f1eb5ddfd27d3d48ca0d6b2.svg');   
  --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/900763/sc/401/h/b18da3fafdaf44aa6c086c99e4a8f969.svg');
  --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/900763/sc/26/h/bce48f32f88d572f56985435333b3349.svg');
  --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/900763/sc/193/h/10817fe8abda5e211f613e6c2fb98275.svg');
  --item-notification: url('https://fs.getcourse.ru/fileservice/file/download/a/900763/sc/213/h/ca6d258b6a6af7ea5759d8d246927e53.svg');
  --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/900763/sc/388/h/be669bc0eb1c582f32a4669aee6ccd4e.svg');
  --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/900763/sc/107/h/41b828c26c664eb09a872c16f2980fc6.svg');
    
}

#gcAccountUserMenu .gc-account-leftbar .gc-account-user-menu li.menu-item-search {
    display:none;
}

body {
    font-family: var(--font)!important;
    font-style: normal;
    font-weight: 400;
    background: var(--color-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font)!important;
    font-style: normal;
    font-weight: 600;
}

/* Боковое меню */
.gc-account-leftbar {
    /* ширина меню */
    width: 80px;
    /* фон */
    background: var(--color-black);
    /* радиус скругления */
    border-radius: 0 20px 20px 0;
}

/*Правую часть страницы сдвигаем правее на ширину меню ;*/
.gc-main-content.with-left-menu {
    margin-left: 80px;
}

/* Боковое меню - фон для мобильной версии */
.gc-account-leftbar .toggle-link, 
.gc-page-nav-items-menu a.toggler-item, 
.gc-account-leftbar .gc-account-user-menu, 
.gc-account-leftbar.expanded {
    /* фон */
    background: var(--color-black);
}

/* Боковое меню - разделы */
.gc-account-leftbar .gc-account-user-menu li {
    /* убираем разделитель */
    border-bottom: none;
    /* внешние отступы */
    margin-left: 2px;
    margin-top: 5px;
}

/* Боковое меню - раздел Профиль */
.gc-account-leftbar .gc-account-user-menu li:first-child {
    /* внешние отступы */
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 15px;
}

/* Боковое - раздел Марафон */
.gc-account-leftbar .gc-account-user-menu li.menu-item-marathon {
    /* скрываем */
    display:none;
}

/* Боковое - ссылки в разделах */
.gc-account-leftbar .gc-account-user-menu li a {
    position: relative;
    /* фон */
    background: transparent;
    /* границы */
    border: none;
    /* тень */
    box-shadow: none;
    transition: 0.3s ease-in-out;
}

/* Боковое - раздел Профиль */
.gc-account-leftbar .gc-account-user-menu li:first-child a {
    /* размер */
    display: block;
    width: 50px;
    height: 50px;
    /* радиус скругления */
    border-radius: 50%;
}

/* Боковое - раздел Профиль - изображение */
.gc-account-leftbar li:first-child a img {
    /* радиус скругления */
    border-radius: 50%;
}

/* Боковое - ссылки в разделах, кроме Профиля */
.gc-account-leftbar .gc-account-user-menu li:not(:first-child) a {
    /* размер */
    display: block;
    width: 80px;
    height: 60px;
    /* внешний отступ */    
    margin-left: auto;
    /* радиус скругления */
    border-radius: 20px 0 0 20px;
}

/*  Боковое - раздел Уведомления */
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a {
    /* высота */
    height:50px;
}

/* Боковое меню - Разделы при наведении - выделении */
.gc-account-leftbar .gc-account-user-menu li a:hover, 
.gc-account-leftbar .gc-account-user-menu li.active a, 
.gc-account-leftbar .gc-account-user-menu li.selected a {
    /* фон */
    background-color: var(--color-gray);
}

/* Боковое меню - Системные надписи к разделам меню, если забыли скрыть */
.gc-account-leftbar .menu-item-label {
    /* скрываем */
   display: none;
}

/* Боковое  меню - Разделы - системные иконки */
.gc-account-leftbar li:not(:first-child) a img {
    /* скрываем */
    display: none;
}

/* Боковое меню - Надписи к разделам меню - псевдоэлемент */
.gc-account-leftbar .gc-account-user-menu li:not(:first-child) a::before {
    /* позиционируем */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    /* шрифты */
    font-size: 10px;
    /* высота строки */
    line-height: 10px;
    /* слой */
    z-index: 2;
    transition: 0.3s ease-in-out;
}

/* Боковое меню - Надписи к разделам меню - при выборе-наведении */
.gc-account-leftbar .gc-account-user-menu li:not(:first-child):hover a::before, 
.gc-account-leftbar .gc-account-user-menu li.active:not(:first-child) a::before, 
.gc-account-leftbar .gc-account-user-menu li.selected:not(:first-child) a::before {
    /* цвет */
    color: var(--color-rose);
    /* толщина текста */ 
    font-weight: 600;
}

/* Разделы с иконками - новые иконки через псевдоэлемент */
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: '';
    /* ширина и высота */
    display: block;
    width: 50px;
    height: 50px;
    margin-top: -10px;
    /* позиционируем */
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    /* размер иконок - через фоновое изображение - и расположение */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s ease-in-out;
    /* фильтр - обесцвечиваем иконку */
    filter: grayscale(100%);
}

/* Разделы с иконками - новые иконки через псевдоэлемент */
li.menu-item.menu-item-notifications_button_small a::after {  
    content: '';
    /* ширина и высота */
    display: block;
    width: 50px;
    height: 50px;
    /* позиционируем */
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    /* размер иконок - через фоновое изображение - и расположение */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.3s ease-in-out;
    /* фильтр - обесцвечиваем иконку */
    filter: grayscale(100%);
}

/* Раздел Уведомления */
li.menu-item.menu-item-notifications_button_small a::after {
    /* позиционируем */
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* новая иконка */
    /* background: var(--button_small1); */
    background-image: var(--button_small);
}
li.menu-item.menu-item-notifications_button_small:hover a::after,
li.menu-item.menu-item-notifications_button_small.selected a::after, 
li.menu-item.menu-item-notifications_button_small.active a::after {
    /* новая иконка */
    /* background: var(--button_small2); */
    /* убираем фильтр */
    filter: grayscale(0);
}

/* Раздел Сайт*/
li.menu-item.menu-item-cms a::after {
    /* новая иконка */
    /* background: var(--item-cms1); */
    background-image: var(--item-cms);
}
li.menu-item.menu-item.menu-item-cms:hover a::after,
li.menu-item.menu-item.menu-item-cms.selected a::after, 
li.menu-item.menu-item.menu-item-cms.active a::after {
    /* новая иконка */
    /* background: var(--item-cms2); */
    /* убираем фильтр */
    filter: grayscale(0);
}
li.menu-item.menu-item.menu-item-cms a::before {
    content: 'Сайт';
}

/* Раздел Обучение */
li.menu-item.menu-item-teach a::after {
    /* размер изображения на иконки - регулируйте, если нужно увеличить/уменьшить */    
    width: 50px;
    height: 50px;
    margin-top: -10px;
    background-image: var(--item-teach);
}
li.menu-item.menu-item-teach:hover a::after,
li.menu-item.menu-item-teach.selected a::after, 
li.menu-item.menu-item-teach.active a::after {
    /* убираем фильтр */
    filter: grayscale(0);
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-teach a::before {
    content: 'Клуб';
}

/* Раздел Пользователи */
li.menu-item.menu-item-user a::after {
   background-image: var(--item-user);
}
li.menu-item.menu-item-user:hover a::after,
li.menu-item.menu-item-user.selected a::after, 
li.menu-item.menu-item-user.active a::after {
    /* убираем фильтр */
    filter: grayscale(0);
}
li.menu-item.menu-item-user a::before {
    content: 'Ученики';
}

/* Раздел Задачи */
li.menu-item.menu-item-tasks a::after {
    background-image: var(--item-tasks);
}
li.menu-item.menu-item-tasks:hover a::after,
li.menu-item.menu-item-tasks.selecteda::after, 
li.menu-item.menu-item-tasks.active a::after {
    /* убираем фильтр */
    filter: grayscale(0);
}
li.menu-item.menu-item-tasks a::before {
    content: 'Задачи';
}

/* Раздел Сообщения */
li.menu-item.menu-item-notifications a::after {
    /* размер изображения на иконки - регулируйте, если нужно увеличить/уменьшить */  
    width: 50px;
    height: 50px;
    margin-top: -10px;
    background-image: var(--item-notification);
}
li.menu-item.menu-item-notifications:hover a::after,
li.menu-item.menu-item-notifications.selected a::after, 
li.menu-item.menu-item-notifications.active a::after {
    /* убираем фильтр */
    filter: grayscale(0);
}
li.menu-item.menu-item-notifications a::before {
    content: 'Сообщения';
}

/* Раздел Продажи */
li.menu-item.menu-item-sales a::after {
    background-image: var(--item-sales);
}
li.menu-item.menu-item-sales:hover a::after,
li.menu-item.menu-item-sales.selected a::after, 
li.menu-item.menu-item-sales.active a::after {
    /* убираем фильтр */
    filter: grayscale(0);
}
li.menu-item.menu-item-sales a::before {
    content: 'Продажи';
}

/* Раздел Приложение */
li.menu-item.menu-item-chatium a::after {
    background-image: var(--item-chatium);
}
li.menu-item.menu-item-chatium:hover a::after,
li.menu-item.menu-item-chatium.selected a::after, 
li.menu-item.menu-item-chatium.active a::after {
    /* убираем фильтр */
    filter: grayscale(0);
}
li.menu-item.menu-item-chatium a::before {
    content: 'Приложение';
}

/* Раскрывающееся меню*/
.gc-account-leftbar .gc-account-user-submenu-bar {
    /* радиус скругления */
    border-radius: 0 20px 20px 0;
}

/* Подменю */
.gc-account-leftbar .gc-account-user-submenu-bar {
    /* фон */
    background: var(--color-gray);
    /* отступ слева */
    left: 80px;
}

/* Подменю - Заголовок */
.gc-account-user-submenu-bar h3 {
    /* шрифт */
    font-size: 20px;
    font-family: var(--font)!important;
    /* толщина написания */
    font-weight: 600;
    /* заглавные буквы */
    text-transform: uppercase;
    /* цвет */
    color: var(--color-black);
}

/* Подменю - Подразделы */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    /* шрифт */
    font-size: 16px;
    font-family: var(--font)!important;
    /* толщина написания */
    font-weight: 500;  
    /* убираем заглавные буквы */
    text-transform: none;
    /* цвет */
    color: var(--color-black);
    /* внутренние отступы */
    padding: 12px 10px 12px 20px;
    transition: 0.3s ease-in-out;
}

/* Подменю - Подразделы - наведение */
.gc-account-user-submenu-bar .gc-account-user-submenu li:hover a {
    /* цвет */
    color: var(--color-rose);
    /* фон */
    background: var(--color-gray);
}

/* Счётчик уведомлений - общий класс для всех счетчиков в левом меню */
.gc-account-leftbar .notify-count {
    /* шрифт */
    font-size: 10px;
    /* высота строки */
    line-height: 17px;
    /* цвет */
    color: var(--color-white);
    /* фон */
    background-color: rgba(14, 14, 14, 0.01) !important;
    /* внутренние отступы */
    padding: 3px;
    transition: 0.3s ease-in-out;
}

/* Счётчик уведомлений - общий класс для всех счетчиков в левом меню - при наведении, 
выборе подразделов подменю */
.gc-account-leftbar .gc-account-user-menu li:hover .notify-count,
.gc-account-leftbar .gc-account-user-menu li.selected .notify-count, 
.gc-account-leftbar .gc-account-user-menu li.active .notify-count {
    /* цвет */
    color: var(--color-rose);
    /* толщина написания */
    font-weight: 600;
}

/* Счётчик уведомлений - счетчики в левом меню и в разделе Уведомления */
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count,
.gc-account-leftbar .notify-count {
    /* позиционируем */
    right: 0px;
    left: auto;
    bottom: auto;
    top: 3px;
}

/* Счётчик уведомлений - счетчики в подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li .notify-count {
    /* размер шрифта */
    font-size: 12px;
    /* цвет */
    color: var(--color-black);
    transition: 0.3s ease-in-out;
    /* позиционируем */
    right: 5px !important;
    left: auto;
    bottom: auto !important;
    top: auto;
}

/* Счётчик уведомлений - счетчики в подменю при наведении на подразделы */
.gc-account-user-submenu-bar .gc-account-user-submenu li:hover .notify-count {
    /* цвет */
    color: var(--color-rose);
    /* толщина написания */
    font-weight: 600 !important;
}

/* Раскрывающееся меню - Раздел Уведомления */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small {
    /* цвет фона */
    background: var(--color-gray);
}


/* Раскрывающееся меню - Раздел Уведомления - новое уведомление */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group {
    transition: 0.3s ease-in-out;
}
    
/* Раскрывающееся меню - Раздел Уведомления - новое уведомление */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group:hover {
    /* цвет фона */
    background-color: transparent;
    /* цвет текста */
    color: var(--color-black);
}

/* Раскрывающееся меню - Раздел Уведомления - прочитанное уведомление */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
    /* цвет фона */
    background-color: transparent;
}

/* Раскрывающееся меню - Раздел Уведомления - прочитанное уведомление - наведение */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed:hover {
    /* цвет текста */
    color: var(--color-black);
}

/* Раскрывающееся меню - Раздел Уведомления - Заголовок */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .header {
    margin-top: 0;
    padding: 20px;
    /* цвет фона */
    background: var(--color-gray);   
    /* цвет текста */
    color: var(--color-black);
}

/* Раскрывающееся меню - Раздел Уведомления - Надпись Уведомления */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-header-link {
    /* цвет текста */
    color: var(--color-black);
}
