/* ОФОРМЛЕНИЕ БОКОВОГО МЕНЮ - начало */

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

:root {
    --color1:  #791207;
    --color2: #753b40;
    --color3: linear-gradient(#D1913C 0%, #FFD194 51%, #D1913C 100%);
    --white:  #ffffff;
    --black:  #0c1521;
    --background-menu: rgb(117,59,64) ;
    --background-menu-gradient: linear-gradient(90.91deg, #753b40 0.21%, #f4dadc 100%);
    --background-ikonka: transparent;
    --radius-notif: 5px;
    --font: 'Lora';
    --weight: 700;
}

html .gc-account-leftbar, 
html .gc-account-leftbar h1,
html .gc-account-leftbar h2,
html .gc-account-leftbar h3 {
     font-family: var(--font), Lora, sans-serif; 
     font-weight: var(--weight);
}

/* фон меню */
html .gc-account-leftbar {     
    background: var(--background-menu);
    background: var(--background-menu-gradient);
}

/* убираем чёрточки-разделители внизу иконок-ссылок */
html .gc-account-leftbar .gc-account-user-menu li {
    border-bottom: 0;
}

/* фон ссылок (иконок) */
html .gc-account-leftbar .gc-account-user-menu li a {
    background: var(--background-ikonka);
    transition: all 0.3s;
}

/* фон ссылок (иконок) при наведении */
html .gc-account-leftbar .gc-account-user-menu li a:hover {
     background-color: var(--color1);  
} 

/* фон ссылок (иконок) при выборе раздела и нажатии на него */
html .gc-account-leftbar .gc-account-user-menu li.active a,
html .gc-account-leftbar .gc-account-user-menu li.selected a {
     background: var(--color2);
} 

/* фон подраздела */
html .gc-account-leftbar .gc-account-user-submenu-bar {
      background: var(--background-menu);
    background: var(--background-menu-gradient);
} 

/* заголовок подраздела - толщина и цвет*/
html .gc-account-user-submenu-bar h3 {
     color: var(--color1);
}

/* цвет ссылок в подразделе */
html .gc-account-user-submenu-bar .gc-account-user-submenu li a {
     color: var(--white);
     padding-bottom: 6px; 
     transition: all 0.3s;
} 

/* фон и цвет ссылки в подразделе при наведении */
html .gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
     background: var(--color1); 
     color: var(--white);
}

/* фото профиля - радиус скругления и обводка */
.menu-item-profile .menu-item-icon {
    border-radius: 50%;
    border: 3px solid var(--color1);
    width:64px;
    height:64px;
    overflow: hidden;
}

/* рупор (уведомления) - светлее */ 
html .gc-account-leftbar .gc-account-user-menu .menu-item-notifications_button_small img {
     filter: brightness(1.2);
     transition: all 0.3s;
} 

/* рупор (уведомления) при наведении - ярче  */ 
html .gc-account-leftbar .gc-account-user-menu .menu-item-notifications_button_small a:hover img {
     filter: brightness(0.4);
}  

/* фон рупора при наведении (уведомления) */ 
html .gc-account-leftbar .gc-account-user-menu .menu-item-notifications_button_small a:hover {
     background-color: var(--color1); 
} 

/* фон счётчиков уведомлений и радиус скругления */ 
html .gc-account-leftbar .notify-count {
     background: var(--color3);
     border-radius: var(--radius-notif);
} 

/* фон счётчиков уведомлений в Сообщениях */ 
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count {
     background: var(--color3);
} 

/* УСТАНАВЛИВАЕМ СОБСТВЕННЫЕ ИКОНКИ - НАЧАЛО */

/* Позиционирование относительно иконок-ссылок разделов */
html .gc-account-leftbar .gc-account-user-menu li a {
    position: relative;
}

/* Скрываем системные иконки */
/*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;
}

/* Собственные иконки через псевдоэлемент - Позиционируем по центру, задаём размеры*/
html .menu-item a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 34px;
    height: 34px;
}

/* УВЕДОМЛЕНИЯ (рупор)*/
/*html .menu-item-notifications_button_small a::before {
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/36/h/2946c5377a2608f96438682ebdf7976c.png');
    width: 32px;
    height: 24px;
}*/

/*html .menu-item-notifications_button_small.active a::before, 
html .menu-item-notifications_button_small.selected a::before {     
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/148873/sc/173/h/6a37067e3595497b6ff3dde58ce83d53.png');
}*/

/* САЙТ */
html .menu-item-cms a::before {
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/228/h/bc21cddec269d2e8ec5023a507d01692.png');
}

html .menu-item-cms.active a::before, 
html .menu-item-cms.selected a::before {     
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/193/h/ee8fc33cec01558313f71024d6d91fc6.png');
}

/* ОБУЧЕНИЕ */
html .menu-item-teach a::before {
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/226/h/2f910ebb0fdf0d11f91942b08d471ae2.png');
}

html .menu-item-teach.active a::before, 
html .menu-item-teach.selected a::before {     
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/56/h/77bcf56ac62008902777a61c897cd015.png');
}


/* ПОЛЬЗОВАТЕЛИ */
html .menu-item-user a::before {
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/106/h/00a176aff01e6f797a5b9c0681f51679.png');
}

html .menu-item-user.active a::before, 
html .menu-item-user.selected a::before {     
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/459/h/d426fc301a83f21158472f8262065c80.png');
}

/* ЗАДАЧИ */
html .menu-item-tasks a::before {
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/166/h/bb2748cf6be9ed7e9084260535ea9385.png');
}

html .menu-item-tasks.active a::before, 
html .menu-item-tasks.selected a::before {     
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/202/h/63d99d86434b3e45617fac9a4a0c33ef.png');
}

/* СООБЩЕНИЯ */
html .menu-item-notifications a::before {
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/221/h/b6e97cde6a7532f4e47955fa731e87b7.png');
}

html .menu-item-notifications.active a::before, 
html .menu-item-notifications.selected a::before {     
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/142/h/423eaab66779e92b3206dd26e1951af0.png');
}

/* ПРОДАЖИ */
html .menu-item-sales a::before {
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/181/h/ff1f21841511b22592354ccedd2bd3f5.png');
}

html .menu-item-sales.active a::before, 
html .menu-item-sales.selected a::before {     
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/128/h/7918334493c35e1c4dc67586beee689f.png');
}

/* ПРИЛОЖЕНИЕ */
html .menu-item-chatium a::before {
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/184/h/6a06968242adf14268d2db1596b1babc.png');
}

html .menu-item-chatium.active a::before, 
html .menu-item-chatium.selected a::before {     
    background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/238422/sc/125/h/bd24727a4bf45e8102b754e6d001e02b.png');
}

/* УСТАНАВЛИВАЕМ СОБСТВЕННЫЕ ИКОНКИ - КОНЕЦ */

/* прокрашиваем фон меню для мобильных устройств */ 
@media screen and (max-width: 768px) {
         html .gc-account-leftbar .toggle-link,
         html .gc-account-leftbar .gc-account-user-menu {
            background: var(--background-menu);
            background: var(--background-menu-gradient);
         }  
}

/* ОФОРМЛЕНИЕ БОКОВОГО МЕНЮ - конец */