@import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Roboto:wght@300;400;500&display=swap');
:root {
    --title-color: #b69256;
    --fon: #000000;
    --primary: #1F1F1F;
    --secondary: #d8c193;
    --tertiary: #5f646a;
    --grey: #a8a9ac;
    --white: #ffffff;
    --dark: #1e1e1e;
    --background: #b69256;
    --radius: 12px;
    --padding: 5px 5px;
    --font1: 'PT Serif';
    --font: 'Roboto';
  --color-link: #b69256;
  --color-link-hover: #d8c193;
}

/* Шрифты */
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(--font1), Roboto, sans-serif;
font-weight: 700;
}
/* Основные элементы */
html .gc-account-leftbar {
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
background-color: var(--fon)!important; /* общий фон меню */
}
html .gc-account-leftbar .gc-account-user-menu li {
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
padding: var(--padding);
margin-bottom: 0;
}
html .gc-account-leftbar .gc-account-user-menu li a {
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
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(--title-color); /* фон иконки при наведении и нажатии*/
}
html .menu-item a img {
display: none; /* скрываем исходные иконки */
}
html .menu-item a::before,
html .sub-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
background-size: contain;
background-repeat: no-repeat;
display: block;
width: 30px; /* задаём размеры для собственных иконок */
height: 30px;
}
/* Если нужно обратить цвет иконки у активного элемента меню, раскомментируйте свойство 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/667909/sc/31/h/064b81a4210f254eb0668c5522eb8b13.png'); /* профиль */
}
html .menu-item-notifications_button_small a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/667909/sc/197/h/5d750b44acbdc5708ae8514da36c8947.png'); /* уведомления */
width: 20px;
height: 20px;
}
html .menu-item-cms a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/667909/sc/472/h/bda15ebfe4c35231ec876ffa0ff0b5fa.png'); /* сайт */
}
html .menu-item-teach a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/667909/sc/142/h/e2469547e9f9342fd94c9d1973ed4f97.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/667909/sc/256/h/793f464af501ad8f97d4e1a2ee7d7c09.png'); /* пользователи */
}
html .menu-item-tasks a::before {
background-image: url('https://fs02.getcourse.ru/fileservice/file/download/a/667909/sc/476/h/6f45e67cd3156a771a46686156b19422.png'); /* задачи */
}
html .menu-item-notifications a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/667909/sc/218/h/7c427ac943ed9965accf903a8d6a7399.png'); /* сообщения */
}
html .menu-item-sales a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/667909/sc/238/h/2ef322244ecbc0cef8875eebf6714203.png'); /* продажи */
}
html .menu-item-chatium a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/667909/sc/81/h/6fbcea22b13096b5289b60c4617071b0.png'); /* чатиум */
}
/* 1 Профиль */
html .gc-account-user-menu li.menu-item.menu-item-profile {
background: var(--fon); /* фон профиля (когда без фото) */
border-radius: 6px;
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(--primary); /* фон профиля (без фото) при наведении */
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile a {
display: block;
overflow: hidden;
border-radius: 3px;
width: 66px;
padding: 1px 1px 0px 1px;
}
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;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
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(--primary); /* цвет фона непрочитанных */
color:  var(--white); /* цвет текста непрочитанных */
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group:hover {
background-color: var(--tertiary); /* фон непрочитанных при наведении */
color: var(--dark); /* текст непрочитанных при наведении */
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
background-color: var(--grey); /* фон прочитанных уведомлений */
color: var(--white); /* текст прочитанных уведомлений*/
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed:hover {
background-color: var(--white); /* фон наведения на прочитанные */
color: var(--primary)!important; /* цвет при наведении на прочитанное*/
}
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); /* цвет текста на кнопке Все уведомления */
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
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(--color-link-hover); /* цвет ссылки Уведомления(С) наверху, цвет при наведении на другие текстовые ссылки */
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-header-link:hover {
color: var(--color-link); /* Цвет при наведении на ссылку Уведомления(С) наверху */
}
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;
color: var(--dark); /* текст всех счётчиков */
}
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(--secondary); /* текст активных-нажатых счётчиков */
color: var(--dark); /* фон активных-нажатых счётчиков */
border: 1px solid var(--secondary);
}
/* Вылезающее подменю */
html .gc-account-leftbar .gc-account-user-submenu-bar {
background-color: var(--primary); /* фон подменю */
}
html .gc-account-user-submenu-bar .gc-account-user-submenu li a {
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: var(--white); /* цвет ссылки подменю */
-webkit-text-decoration-color: var(--title-color);
        text-decoration-color: var(--title-color);
}
html .gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
background: none!important; /* фон ссылки подменю при наведении */
-webkit-text-decoration: underline solid 2px;
        text-decoration: underline solid 2px;
-webkit-text-decoration-color: var(--title-color);
        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;
}
}