@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap');
:root {
    --title-color: #8F1B09;
    --fon: #FEC000;
    --primary: #FFDC73;
    --secondary: #8cdebb87;
    --tertiary: #FFD840;
    --grey: #696969;
    --white: #ffffff;
    --dark: #18061D;
    --background: #FFE273;
    --radius: 10px;
    --padding: 2px 5px;
    --font: 'Montserrat';
}

/* Шрифты */
html .gc-account-leftbar {
font-family: var(--font), Roboto, sans-serif !important;
font-weight: 300;
}
html .gc-account-leftbar h1, html .gc-account-leftbar h2, html .gc-account-leftbar h3 {
font-family: var(--font), Roboto, sans-serif;
font-weight: 700;
}
/* Основные элементы */
html .gc-account-leftbar {
transition: all 0.3s;
background-color: var(--fon)!important; /* общий фон меню */
}
html .gc-account-leftbar .gc-account-user-menu li {
transition: all 0.3s;
padding: var(--padding);
margin-bottom: 0;
}
html .gc-account-leftbar .gc-account-user-menu li a {
transition: all 0.3s;
background: none; /* фон иконки */
position: relative;
border-radius: var(--radius);
height: 60px; /* высота иконки */
}
html .gc-account-leftbar .gc-account-user-menu li.selected a,
html .gc-account-leftbar .gc-account-user-menu li a:hover {
background-color: var(--secondary); /* фон иконки при наведении и нажатии*/
}
html .menu-item a img {
display: none; /* скрываем исходные иконки */
}
html .menu-item a::before,
html .sub-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: contain;
background-repeat: no-repeat;
display: block;
width: 45px; /* задаём размеры для собственных иконок */
height: 45px;
}
/* Если нужно обратить цвет иконки у активного элемента меню, раскомментируйте свойство filter*/
html li.menu-item.active a::before {
/* filter: invert(1); */
}
html .gc-account-leftbar .gc-account-user-menu li.active a,
html .gc-account-leftbar .gc-account-user-menu li.active a:hover {
background-color: var(--primary); /* фон активной иконки */
}

/* Ссылки на картинки */
html .menu-item-profile a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/550420/sc/131/h/7d13a012ae93a5162a0a15567eb7f92f.png'); /* профиль */
}
html .menu-item-notifications_button_small a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/550420/sc/146/h/9752fa01369ed53ae8b250e043cd567d.png'); /* уведомления */
width: 36px;
height: 36px;
}
html .menu-item-cms a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/550420/sc/386/h/162d7c1fd3a79dc20a949fea0fca7c6f.png'); /* сайт */
}
html .menu-item-teach a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/550420/sc/133/h/d312d06ac1d6d163f3649c910f7a425b.png'); /* обучение */
}
html .menu-item-user a::before,
html .menu-item-chatium .sub-icon::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/550420/sc/167/h/6db4dbe17f17c033182221a6da5c1a07.png'); /* пользователи */
}
html .menu-item-tasks a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/550420/sc/53/h/3af8d92496de773d6a40732a1a116467.png'); /* задачи */
}
html .menu-item-notifications a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/550420/sc/325/h/8aa1c61ba1cbf20ee38b34e227e949cc.png'); /* сообщения */
}
html .menu-item-sales a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/550420/sc/385/h/dbb359cfdd547483cfacd09bff17007a.png'); /* продажи */
}
html .menu-item-chatium a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/550420/sc/375/h/c74384cc4abcf74e7ec5de0acea25330.png'); /* чатиум */
}
/* 1 Профиль */
html .gc-account-user-menu li.menu-item.menu-item-profile {
background: var(--fon); /* фон профиля (когда без фото) */
border-radius: 12px;
padding: 2px;
}
html .gc-account-user-menu li.menu-item.menu-item-profile:hover,
html .gc-account-user-menu li.menu-item.menu-item-profile a:hover {
background: var(--tertiary); /* фон профиля (без фото) при наведении */
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile a {
display: block;
overflow: hidden;
border-radius: 12px;
width: 66px;
padding: 2px 2px 0px 2px;
}
html .gc-account-leftbar .gc-account-user-submenu-bar div.user-balance {
color: var(--grey); /* Цвет текста про монеты */
}
/* 2 Уведомления small */
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small {
padding: 0px;
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a {
background-color: var(--primary); /* фон иконки уведомлений */
border-radius: 0px;
transition: all 0.3s;
height: 32px; /* высота маленькой иконки уведомлений */
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a:hover,
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small.selected a {
background-color: var(--tertiary); /* цвет уведомлении при наведении и выделении */
}
/* 2A Окно уведомлений (непрочитанные) */
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group {
border-top-color: var(--grey); /* цвет границы между уведомлениями */
background-color: var(--white); /* цвет фона непрочитанных */
color:  var(--dark); /* цвет текста непрочитанных */
transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group:hover {
background-color: var(--secondary); /* фон непрочитанных при наведении */
color: var(--dark); /* текст непрочитанных при наведении */
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
background-color: transparent; /* фон прочитанных уведомлений */
color: var(--dark); /* текст прочитанных уведомлений*/
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed:hover {
background-color: var(--white); /* фон наведения на прочитанные */
color: var(--dark); /* цвет при наведении на прочитанное*/
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-footer-link {
border-bottom-color: var(--grey); /* цвет границы под кнопкой Все уведомления */
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-footer-link,
html .gc-account-leftbar .mark-viewed-all {
color: var(--title-color); /* цвет текста на кнопке Все уведомления */
transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-header-link,
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-footer-link:hover,
html .gc-account-leftbar .mark-viewed-all:hover {
color: var(--title-color); /* цвет ссылки Уведомления(С) наверху, цвет при наведении на другие текстовые ссылки */
transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-header-link:hover {
color: var(--dark); /* Цвет при наведении на ссылку Уведомления(С) наверху */
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group .user-image {
overflow: hidden;
border-radius: var(--radius); /* закругляем углы */
background-color: rgb(0 0 0 / 5%); /* прозрачная подложка для аватаров пользователей */
}
/* 3 Счётчики уведомлений */
html .gc-account-leftbar .notify-count {
background-color: var(--title-color); /* фон всех счётчиков */
padding: 2px 0;
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count {
background-color: var(--title-color); /* фон счётчика в Сообщениях */
}
html .gc-account-leftbar .gc-account-user-menu li.selected .notify-count,
html .gc-account-leftbar .gc-account-user-menu li.selected span.sub-icon,
html .gc-account-leftbar .gc-account-user-menu li.active .notify-count {
background-color: var(--background); /* фон активных-нажатых счётчиков */
color: var(--title-color); /* фон активных-нажатых счётчиков */
border: 1px solid var(--title-color);
}
/* Вылезающее подменю */
html .gc-account-leftbar .gc-account-user-submenu-bar {
background-color: #8cdebb; /* фон подменю */
}
html .gc-account-user-submenu-bar .gc-account-user-submenu li a {
transition: all 0.3s;
color: var(--dark); /* цвет ссылки подменю */
}
html .gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
background: none!important; /* фон ссылки подменю при наведении */
text-decoration: underline solid 2px;
text-decoration-color: var(--title-color);
}
html .gc-account-user-submenu-bar h3 {
color: var(--title-color); /* Цвет заголовка подменю */
}
/* 4 Маленькие иконки (чатиум и тд) */
html .gc-account-leftbar span.sub-icon {
background-color: var(--dark); /* Фон иконки чатиума */
width: 30px;
height: 30px;
border-radius: 50%;
}
html .menu-item.menu-item-profile a img:not([src="/public/img/default_profile_50.png"]) {
display: block;
position: relative;
z-index: 0;
}
html .sub-icon::before {
width: 16px;
height: 16px;
}
html .sub-icon .fa, html .sub-icon img { display: none; }
/* Адаптивность */
@media (max-width: 768px) {
html .gc-account-leftbar .toggle-link,
html .gc-account-leftbar.expanded .toggle-link {
background-color: var(--fon)!important; /* фон скукоженного меню на мобильном */
}
html .gc-account-leftbar .gc-account-user-menu {
background: var(--fon)!important; /* фон раскрытого меню на мобильном */
}
html .gc-account-leftbar .gc-account-user-menu li {
border-bottom: 0;
}
html .gc-page-nav-items-menu {
left: 70px;
}
}