@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap');

:root {
--Gcolor3: #b30d0d;
--Gcolor4: #1f4693;
--Gcolor5:#ca0e0e;
--Gwhite: #FFFFFF;
--Gblack: #f1f1f1;
--Gbackground: #1f4693;
--Gfont: 'Golos Text', sans-serif;
--radius-notif: 50%;
--avatar: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/145/h/379f791bb91c420d5442b34daf6c307f.png');
--button-small: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/244/h/aafc891721af83df16a2a8ca6739b843.png');
--item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/268/h/7df66805f885574d7c84fecfd2e5ba06.png');
--item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/189/h/c0cd6229cd3ba22b745913e4d6369af4.png');
--item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/178/h/71ed1389f2a9e56c8f4668e47bdf2739.png');
--item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/502/h/376ac3a6698dd977724795e58881c334.png');
--item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/347/h/766f38f7b9890db16dcf3cad32eb70db.png');
--item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/138/h/d7f041260acf18319bc71a367e00fd69.png');
--item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/240/h/a216c3c9e05774a2d09fc2d659dc8aa4.png');
--item-logo: url('https://fs.getcourse.ru/fileservice/file/download/a/271751/sc/175/h/d445019097e72465bd2b12141afabecb.png');
}

/* Левая панель */
html .gc-account-leftbar {
    background-color: var(--Gblack)!important;
    width: 70px;
    margin-top: 0px!important;
}

/* Левая панель - убираем разделители между иконками-разделами */
.gc-account-leftbar .gc-account-user-menu li {
    border-bottom: none;
}

.custom-menu .gc-account-leftbar .gc-account-user-menu {
    background-color: var(--Gblack)!important;
}

/* Иконка профиля - аватар */
html .menu-item-profile .menu-item-icon {
    margin-top: 0px!important;
    width: 60px!important;
    height: 60px!important;
    border-radius: 10px!important;
    border: 2px solid var(--Gbackground);
}
 

/* Раздел с иконкой профиля (ссылка) */
li.menu-item.menu-item-profile a {
    margin-top: 10px!important;
    width: 60px!important;
    height: 60px!important;
}


/* Левая панель - размеры разделов с иконками */
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,
li.menu-item.menu-item-profile a
 {
    display: block;
    background: var(--Gcolor4)!important;
    border: 1px solid var(--Gcolor4);
    margin: 14px auto;
    width: 44px;
    height: 44px;
    border-radius: 9px;
    transition: all 0.5s;
}

/*фон разделов под иконки при наведении */
.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 {
   border: 2px solid var(--Gcolor5);
}

.gc-account-leftbar .gc-account-user-menu .menu-item-profile:hover a,
.gc-account-leftbar .gc-account-user-menu .menu-item-profile.active a,
.gc-account-leftbar .gc-account-user-menu .menu-item-profile.selected a {
    border: none!important;
}

/* скрываем системные иконки Меню */
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!important;
    left: 50%;
    transform: translateX(-50%)!important;
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 24px;
    height: 24px;
}

/* иконки - как фоновое изображение к каждому из разделов */
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: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: var(--button-small);
    background-size: contain;
    background-repeat: no-repeat;
}

/* надписи к разделам через псевдоэлемент - позиционируем, задаём цвет
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,
li.menu-item.menu-item-profile a::before {
    font-size: 8px;
    position: absolute;
    font-family: var(--Gfont);
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--Gcolor4)!important;
} 

li.menu-item.menu-item-notifications_button_small a::before {
    font-size: 8px;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--Gcolor4);
} 

li.menu-item.menu-item-profile a::before {
    font-size: 8px;
    position: absolute;
    top: 60px!important;
    left: 50%;
    transform: translateX(-50%);
    color: var(--Gcolor4)!important;
} */

/* надписи через псевдоэлемент для каждого раздела
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-profile a::before {content: 'Профиль';}
li.menu-item.menu-item-notifications_button_small a::before {content: 'Уведомления';}
*/

/* Счетчик уведомлений в левом меню */
.gc-account-leftbar .notify-count {
    z-index: 2;
    width: 22px;
    font-family: var(--Gfont);
    font-size: 0.6em!important;
    font-weight: normal;
    text-align: center;
    color: var(--Gwhite);
    background: #ca0e0e!important;
    border-radius: 9px;
    position: absolute;
    bottom: 0px!important;
    right: 10px!important;
    padding: 3px 7px!important;
}


/* Заголовок подменю */
.gc-account-user-submenu-bar H3 {
    font-family: var(--Gfont);    
    color: var(--Gcolor5)!important;
    font-weight: 400!important;
    text-align: left;
}

/* Подменю */
    html .gc-account-leftbar .gc-account-user-submenu-bar {
    font-family: var(--Gfont);
    background-color: #fafafa!important;
}

/* Затемнение экрана */
.gc-fade-wrapper .gc-fade {
    opacity: 0.15;
}

/* Разделы в подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    font-family: var(--Gfont)!important;
    padding-bottom: 3px;
    font-weight: 400;
    font-family: var(--Gfont);    
    color: var(--Gcolor4)!important;
    transition: all 0.5s;
}

/* Разделы в подменю при наведении */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    text-decoration: none;
    background-color: var(--Gcolor4)!important;
    color: var(--Gwhite)!important; 
    transition: all 0.5s;
}

/*виджет обратной связи*/
.talks-widget-button {
  background: #1f4693!important; 
}