/* БОКОВОЕ МЕНЮ - начало */
/*@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;
 
    --cwhite:  #ffffff;
    --cblack:  #333333;
    
    --color1: #131C6D;
    --color2: #131C6D;
    --color3: #453F3F;
    --color4: #DEE5FF;
    --color5: #333333;
    --color6: #d85b53;
    --color7: #f7f7f7;
    --color8: #c3c3c3;
    --color9: transparent;
    --width1: 62px; 
    --height1: 62px;
    --width2: 32px; 
    --height2: 32px;
    --width3: 30px;
    --height3: 24px;
    
    /* фильтр синий цвет */
    --filter1: invert(93%) sepia(9%) saturate(3327%) hue-rotate(185deg) brightness(92%) contrast(85%);
    /* фильтр светло-голубой цвет */
    --filter2:  invert(100%) sepia(4%) saturate(0%) hue-rotate(194deg) brightness(111%) contrast(101%);
    --b-radius1: 10px; 
    --b-radius2: 50%;
    --b-radius3: 6px;
    
    --button-small: url('https://fs.getcourse.ru/fileservice/file/download/a/512303/sc/297/h/459bcb6e0bbc798fe1463b970fba084f.svg');
    --item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/512303/sc/224/h/008c15ed9c2f23c72c320e615dbb3a7e.svg');
    --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/512303/sc/190/h/26dca9212ed1db553e47b17090dd58e6.svg');
    --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/512303/sc/234/h/2b5e372c5343a3c5e59d90ea60d2cd4e.svg');
    --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/512303/sc/84/h/544f0a91714ed4502e70addc37b47205.svg');
    --item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/512303/sc/446/h/8c4b56baf44a964dee3ff68ed5af7bc1.svg');
    --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/512303/sc/300/h/d083441a5b75fcdad769eb4cd87d9e50.svg');
    --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/512303/sc/100/h/7dc3df46c187c96aa144e280247254e3.svg');
}

body {
    /* шрифт */
    font-family: var(--font)!important;  
    /* толщина шрифта */
    font-weight: 400;
    /*background: var(--cwhite);*/
   /* background: #fafafa;*/
}

h1, h2, h3, h4, h5, h6 {
    /* шрифт */
    font-family: var(--font)!important;
    /* толщина шрифта */
    font-weight: 600;
}

/* Боковая панель - Левая панель */
.gc-account-leftbar {
    /* ширина */
    width: 80px;
    /* фон меню */
    background: var(--cwhite);
    /* тень */
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.2);    
    /* радиус скругления */
    border-radius: 0 20px 20px 0;
}

/* Левая панель - контейнер с  разделами меню */
.gc-account-leftbar .gc-account-user-menu {
    /* ширина */
    width: 80px;
    /* фон */
    background: var(--cwhite);  
}

/* Правую часть страницы сдвигаем правее на ширину меню */
.gc-main-content.with-left-menu {
    margin-left: 80px;
}

/* Левая панель - разделы меню */
.gc-account-leftbar .gc-account-user-menu li {
    /* убираем нижнюю границу */
    border-bottom: none;
    /* задержка для плавности анимации */
    transition: all 0.3s;
    position: relative;
}

/* Разделы с иконками */
.gc-account-leftbar .gc-account-user-menu li a {
    /* блочный вид, чтобы задавать размеры */
    display: block;
    /* ширина и высота */
    width: var(--width1);
    height: var(--height1);
    /* фон под иконками */
    background: var(--color4);
    /* радиус скругления */
    border-radius: var(--b-radius1);
    /* внешние отступы */
    margin: 17px auto 0;
    /* задержка для плавности анимации */
    transition: all 0.3s;
    position: relative;
}

/* Раздел Профиль */
.gc-account-leftbar li.menu-item.menu-item-profile a {
    /* ширина и высота раздела */
    width: var(--width1);
    height: var(--height1);
    /* внутренний отступ для регуляции размера иконки */    
    padding: 5px;
    /* фон раздела под аватаркой */
    background: transparent;
}

/* Раздел с иконкой профиля - аватар */
li.menu-item-profile .menu-item-icon {
    /* блочный вид, чтобы задавать размеры */
    display: block;
    /* размер изображения */
    width: 100%;
    /* фон под иконкой */ 
    background: var(--cwhite);   
    /* радиус скругления */
    border-radius: var(--b-radius2);
    /* граница - обводка иконки профиля */
    border: 3px solid var(--color2);
    vertical-align: middle;
    /* внешние отступы */
    margin: 0 auto;
}

/* Раздел с иконками - иконка профиля админа в режиме сублогина */
.sub-icon img.user-profile-image {
    /* радиус скругления */
    border-radius: var(--b-radius2);
    /* граница - обводка */
    border: 2px solid var(--color2);
}

/* Раздел Марафон */
.gc-account-leftbar li.menu-item-marathon {
    /* скрываем, чтобы не мешал */
    display: none;
}

/* Разделы с иконками - наведение на раздел */
.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(--color2);
}

/* Разделы с иконками - скрываем системные иконки Меню */
li.menu-item-notifications_button_small a img,
li.menu-item-cms a img,
li.menu-item-teach a img,
li.menu-item-user a img,
li.menu-item-tasks a img,
li.menu-item-notifications a img,
li.menu-item-sales a img,
li.menu-item-chatium a img {
    /* скрываем, чтобы поставить свои */
    display: none;
}

/* Разделы с иконками - новые иконки через псевдоэлемент */
li.menu-item-notifications_button_small a::after,
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: 10px;
    left: 50%;
    transform: translateX(-50%);
    /* размер иконок и расположение */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* ширина и высота псевдоэлемента */
    display: block;
    width: var(--width2);
    height: var(--height2);
    /* перекрашиваем иконку в нужный цвет фильтром */
    filter: none;
    /* задержка для плавности анимации */
    transition: all 0.3s;
}

/* Разделы с иконками - задаем ссылки на новые иконки через псевдоэлемент */
li.menu-item-notifications_button_small a::after {background-image: var(--button-small);}
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 {
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%); 
    width: var(--width3);
    height: var(--height3);
    /* из черного - в сиреневый
    filter: var(--filter1); */
}

/* Цвет новых иконок при выборе/нажатии */
.gc-account-user-menu li:hover a::after,
.gc-account-user-menu li.selected a::after,
.gc-account-user-menu li.active a::after {
    /* из черного - в белый */
    filter: var(--filter2);
}

/* Надписи через псевдоэлемент - позиционируем, задаём цвет */
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 {  
    /* позиционируем */
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    /* размер шрифта */
    font-size: 10px;
    /* цвет текста */
    color: var(--color5);
    /* задержка для плавности анимации */
    transition: all 0.3s;
}

/* Надписи для каждого раздела - через псевдоэлемент */
li.menu-item.menu-item-cms a::before {content: 'Website';}
li.menu-item.menu-item-teach a::before {content: 'Education';}
li.menu-item.menu-item-user a::before {content: 'Students';}
li.menu-item.menu-item-tasks a::before {content: 'Tasks';}
li.menu-item.menu-item-notifications a::before {content: 'Letters';}
li.menu-item.menu-item-sales a::before {content: 'Sales';}
li.menu-item.menu-item-chatium a::before {content: 'Apps';}
/* Цвет надписей под иконками при выборе/нажатии */
.gc-account-user-menu li:hover a::before,
.gc-account-user-menu li.selected a::before,
.gc-account-user-menu li.active a::before {
    /* цвет текста */
    color: var(--cwhite);
}

/* Подменю */
.gc-account-leftbar .gc-account-user-submenu-bar {
    /* ширина */
    width: 250px;
    /* оступ для увеличенной боковой панели */
    left: 80px;
    /* фон прозрачный */
    background: transparent;
}

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

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

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

/* Раздел Уведомления */
.gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications_button_small {
    /* ширина */
    width: 350px;
    /* фон */
    background: var(--cwhite);
    /* скругление углов */
    border-radius: 20px;
    /* тень */
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.2);
    /* внутренние отступы */
    padding: 20px 5px 20px 5px!important;
    /* внешний оступ слева от менюшки */
    margin-left: 5px!important;
}

/* Раздел Уведомления - прочитанные уведомления */
.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
    /* фон */
    background: transparent;
}

/* Разделы в подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    font-size: 14px;
    font-weight: 400;
    color: var(--color1);
    transition: all 0.3s;
}

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

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

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

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

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

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

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

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

/* Cчетчик уведомлений - раздел Уведомления - рупор */
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count {
    z-index: 3;
    /* размер шрифта */
    font-size: 0.8em!important;
    /* толщина написания */
    font-weight: 700;
    /* выравнивание по центру */
    text-align: center;
    /* цвет текста уведомлений */
    color: var(--cwhite);
    /* цвет фона уведомлений */
    background: var(--color6);
    /* скругление границы фона */
    border-radius: var(--b-radius3);
    /* позиционирование */
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    /* внутренние отступы */
    padding: 5px 0px;
}

/* Счетчик уведомлений - разделы левой панели */
/* сообщения */
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count,
.gc-account-leftbar .gc-account-user-menu li.menu-item-tasks .notify-count,
/* обучение */
.gc-account-leftbar li.menu-item-teach .notify-count,
/* покупки */
.gc-account-leftbar li.menu-item.menu-item-sales .notify-count {
    z-index: 2;
    /* размер шрифта */
    font-size: 0.8em!important;
    /* толщина написания */
    font-weight: 700;
    /* выравнивание по центру */
    text-align: center;
    /* цвет текста уведомлений */
    color: var(--cwhite);
    /* цвет фона уведомлений */
    background: var(--color6);
    /* скругление границы фона */
    border-radius: var(--b-radius3);
    /* позиционирование */
    position: absolute;
    bottom: 42px;
    right: -2px;
    /* внутренние отступы */
    padding: 5px 0px;
}

/* Счетчик уведомлений - раскрывающееся меню */
.gc-account-leftbar .gc-account-user-submenu li .notify-count {
    z-index: 2;
    /* толщина написания */
    font-weight: 700;
    /* выравнивание по центру */
    text-align: center;
    /* цвет текста уведомлений */
    color: var(--cwhite);
    /* цвет фона уведомлений */
    background: var(--color6);
    /* скругление границы фона */
    border-radius: var(--b-radius3);
}

/* Мобильная адаптация */ 
@media (max-width: 768px) {
    /* Правую часть страницы выравниваем по левому краю */
    .gc-main-content.with-left-menu {
        margin-left: 0px;
    }
    /* Боковое меню */ 
    .gc-account-leftbar .gc-account-user-menu,
    .gc-account-leftbar.expanded {
        /* фон */ 
        background: var(--cwhite);
    }
    .gc-account-leftbar {
        /* радиус скругления */ 
        border-radius: 0 20px 0 0;
    }
    /* Нижняя плашки меню */ 
    .gc-account-leftbar .toggle-link, 
    .gc-page-nav-items-menu a {
        /* фон */ 
        background: var(--color2);
    }
    /* Иконка-бургер */ 
    .gc-account-leftbar .without-icon img {
        /* фильтр */ 
        filter: var(--filter);
    }
}

@media (max-width: 420px) {
    /* Разделы в раскрывающемся меню */
    .gc-account-user-submenu-bar .gc-account-user-submenu li a {
        /* размер шрифа */ 
        font-size: 14px;
        /* внутренний отступ слева */ 
        padding-left: 10px;
    }
    /* Контейнер с подразделами  */
    .gc-account-leftbar .gc-account-user-submenu-bar {
        /* ширина */ 
        width: 230px;
    }
}

/* Мобильная адаптация */ 
@media (max-height: 599px) and (orientation: landscape) {
    /* Контент подменю Сайт */
    .gc-account-user-submenu-bar-cms .gc-account-user-submenu,
    /* Контент подменю Обучение */
    .gc-account-user-submenu-bar-teach .gc-account-user-submenu,
    /* Контент подменю Пользователи */
    .gc-account-user-submenu-bar-user .gc-account-user-submenu,
    /* Контент подменю Задачи */
    .gc-account-user-submenu-bar-tasks .gc-account-user-submenu,
    /* Контент подменю Сообщения */
    .gc-account-user-submenu-bar-notifications .gc-account-user-submenu,
    /* Контент подменю Продажи и Приложение */
    .gc-account-user-submenu-bar-sales .gc-account-user-submenu,
    .gc-account-user-submenu-bar-chatium  .gc-account-user-submenu {
        margin-top: 0!important;
    }
    /* Раздел Уведомления */
    .gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications_button_small {
        /* скругление углов */
        border-radius: 20px 20px 0 0;
    }
}