@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Tenor+Sans&display=swap');
:root {
--primary: #000000; /* Черный */
--secondary: #fd5030;
--tertiary: #217D61;
--grey: #ebebeb;
--white: #ffffff;
--dark: #3a3a3a;
--background: #393939;
--radius: 15px;
--padding: 3px 5px;
--font: 'Montserrat';
}
/* Шрифты */
html .gc-account-leftbar {
font-family: 'Gilroy-Bold', sans-serif !important;
font-weight: 400;
}
html .gc-account-leftbar h1, html .gc-account-leftbar h2, html .gc-account-leftbar h3 {
font-family: 'Gilroy-Regular', sans-serif;
font-weight: 700;
}
/* Основные элементы */
html .gc-account-leftbar {
transition: all 0.3s;
background: linear-gradient(0.39deg, #121615 52.38%, #121615 83.79%); /* общий фон меню */
}
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-color: transparent; /* фон иконки */
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: transparent; /* фон иконки при наведении и нажатии*/
}
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: 32px; /* задаём размеры для собственных иконок */
height: 32px;
}
/* Если нужно обратить цвет иконки у активного элемента меню, раскомментируйте свойство 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: transparent; /* фон активной иконки */
}
/* Ссылки на картинки */
html .menu-item-profile a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/860109/sc/136/h/6f11161288ec03f63acdbef0b1059844.png'); /* профиль */
}
html .menu-item-notifications_button_small a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/868522/sc/434/h/a503373910c63517769d9772b8026f9e.svg'); /* уведомления */
    width: 25px;
    height: 25px;
    
}
html .menu-item-cms a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/868522/sc/125/h/c8db474895d486206eb78759ba18a9b6.svg'); /* сайт */
}
html .menu-item-teach a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/868522/sc/155/h/0a7c7945ad5289c5aeb1a298696801dc.svg'); /* обучение */
}
html .menu-item-user a::before,
html .menu-item-chatium .sub-icon::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/868522/sc/304/h/2034e96a8482fdd347ffb3ce4efa8f81.svg'); /* пользователи */
}
html .menu-item-tasks a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/868522/sc/401/h/1012a301c4740e9e12727ed304738752.svg'); /* задачи */
}
html .menu-item-notifications a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/868522/sc/235/h/28dff1250cdad724a3562c1db859ef04.svg'); /* сообщения */
}
html .menu-item-sales a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/868522/sc/439/h/e26d28d0c44fdb7ffcfb2833ee6be19b.svg'); /* продажи */
}
html .menu-item-chatium a::before {
background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/868522/sc/302/h/dcee6e7773da298401c9d9be8a5a4f13.svg'); /* чатиум */
}
/* 1 Профиль */
html .gc-account-user-menu li.menu-item.menu-item-profile {
background: none; /* фон профиля (когда без фото) */
border: 0;
padding: 0;
}
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: none; /* фон профиля (без фото) при наведении */
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile a {
display: block;
overflow: hidden;
border-radius: 30px;
height: 80px;
}
html .gc-account-leftbar .gc-account-user-submenu-bar div.user-balance {
color: var(--white); /* Цвет текста про монеты */
}
/* 2 Уведомления small */
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small {
padding: 0;
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a {
background-color: transparent; /* фон иконки уведомлений */
border-radius: 0;
transition: all 0.3s;
height: 18px; /* высота маленькой иконки уведомлений */
}
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: transparent; /* цвет уведомлении при наведении и выделении */
}
/* 2A Окно уведомлений (непрочитанные) */
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group {
border-top-color: #217D61; /* цвет границы между уведомлениями */
background-color: var(--white); /* цвет фона непрочитанных */
color: var(--background); /* цвет текста непрочитанных */
transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group:hover {
background-color: var(--grey); /* фон непрочитанных при наведении */
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(--grey); /* фон наведения на прочитанные */
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: #217D61; /* цвет текста на кнопке Все уведомления */
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(--white); /* цвет ссылки Уведомления(С) наверху, цвет при наведении на другие текстовые ссылки */
transition: all 0.3s;
}
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-header-link:hover {
color: #217D61; /* Цвет при наведении на ссылку Уведомления(С) наверху */
}
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(--tertiary); /* фон всех счётчиков */
padding: 2px 0;
}
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count {
background-color: #217D61; /* фон счётчика в Сообщениях */
}
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(--tertiary); /* фон активных-нажатых счётчиков */
}
/* Вылезающее подменю */
html .gc-account-leftbar .gc-account-user-submenu-bar {
background-color: var(--background); /* фон подменю */
}
html .gc-account-user-submenu-bar .gc-account-user-submenu li a {
transition: all 0.3s;
color: var(--white); /* цвет ссылки подменю */
}
html .gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
background-color: #217D61; /* фон ссылки подменю при наведении */
color: var(--white); /* цвет ссылки подменю при наведении */
}
html .gc-account-user-submenu-bar h3 {
color: #217D61; /* Цвет заголовка подменю */
}
/* 4 Маленькие иконки (чатиум и тд) */
html .gc-account-leftbar span.sub-icon {
background-color: transparent; /* Фон иконки чатиума */
display: none;

}
html .menu-item.menu-item-profile a img:not([src="/public/img/default_profile_50.png"]) {
display: block;
position: relative;
z-index: 0;
border-radius: 30px;
width: 80%;
margin: 5px 5px 5px 5px;
}
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(--background); /* фон скукоженного меню на мобильном */
}
html .gc-account-leftbar .gc-account-user-menu {
background: var(--background); /* фон раскрытого меню на мобильном */
}
html .gc-account-leftbar .gc-account-user-menu li {
border-bottom: 0;
}
html .gc-page-nav-items-menu {
left: 70px;
}
}

/* BRICKSPACE */

.gc-account-leftbar .menu-item-label {
	margin-top: 60px !important;
    font-size: 10px;
    
}

.gc-account-leftbar li.active .menu-item-label, .gc-account-leftbar li.selected .menu-item-label {
	color: #217D61;
}


@media screen and (max-width: 700px) {
    h2 {
    	font-size: 22px;
    }
}


html .lt-block-wrapper {
	border-radius: 0px 0px 20px 20px;
}
