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

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

:root {
     --Gcolor1:#6173b0; /* синий */
    --Gcolor2: #739847; /* светло-зеленый */
    --Gcolor3: #453F3F; /* почти черный */
    --Gcolor4: #ffffff; /* белый */
    --Gcolor5: #D9A806; /* горчичный */
    --Gwhite:  #ffffff;
    --Gblack:  #333333;
    --Gbackground: #F9F9FB;
    --Gfont: 'Montserrat', Roboto, sans-serif!important; 
    /* фильтр синий цвет */
    --ikonka1: invert(93%) sepia(20%) saturate(3327%) hue-rotate(160deg) brightness(92%) contrast(10%);
    /* фильтр белый цвет */
    --ikonka2:  invert(100%) sepia(4%) saturate(0%) hue-rotate(194deg) brightness(111%) contrast(101%);
    --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/722451/sc/241/h/867e5e30ffa4b8cdc0e338d9c2341a34.png');
    --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/722451/sc/195/h/342bd54b730b6ad68284fcb3666cf0d9.png');
    --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/722451/sc/235/h/6f2737dc527dab61f0e4b18c226d82ac.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/722451/sc/462/h/428db1649d6d900b3616bd7335305283.png');
    --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/108/h/96320db2f55c10e184d0014e002e1aab.png');
}

/* Скрыть названия под иконками */
html .gc-account-leftbar .menu-item-label {
    display: none !important;
}

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

/*  Контейнер с меню - высота - под контент, тень, скругление */
.gc-account-leftbar .gc-account-user-menu {
    /* высота - под количество контента */
    height: auto;
    /* заливка фона цветом */
    background: #224423;
    /* радиус скругления */
    border-radius: 0px 20px 20px 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: 3px 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: #39583a;
    /* внешний отступ */
    margin: 12px auto 20px;
    /* размеры раздела */
    width: 62px;
    height: 62px;
    /* радиус скругления */
    border-radius: 10px;
    /* задержка для плавности анимации */
    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: 10px;
    left: 50%;
    transform: translateX(-50%);
    /* иконка как фоновое изображение - помещается полностью в псведоэлемент */
    background-size: contain;
    /* иконка как фоновое изображение - размещаем один раз */
    background-repeat: no-repeat;
    display: block;
    /* размер псевдоэлемента */
    width: 32px;
    height: 32px;
    /* цвет иконки - через фильтр */
    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: 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(--ikonka2);
}

/* надписи к разделам через псевдоэлемент - позиционируем, задаём цвет */
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: #a8a8a8;
}

/* надписи через псевдоэлемент для каждого раздела */
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: 'Apps';}

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

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

.gc-account-leftbar .notify-count.with-label {
    bottom: 15px;
    right: 5px;
    top: 25px;
    left: 35px;
}

/* Скрываем раздел в меню с бонусными рублями, депозитом и монетами */
.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;
    /* подключаем флекс, чтобы содержимое подменю выравнивать по нужному краю */
    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(--Gwhite);
    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(--Gfont)!important; 
    font-size: 14px;
    font-weight: 400;
    color: #224423;
    transition: all 0.3s;
}

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

/* Счетчик уведомлений в раскрывающемся меню - подменю */
.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(--Gwhite)!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;
}

/* Мобильная адаптация */ 
@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 {
       filter: var(--ikonka2);
    }
    /* Контент подменю Продажи */
    .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;
    }
}