@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'Fustat';
    src:url('/fileservice/file/download/h/8363c1d56f958ec20c0c59c9d3fc37c5.ttf/a/920714/sc/207') format('truetype'), 
        url('/fileservice/file/download/h/ac7286226e1def6204a1201db182ee4c.woff2/a/920714/sc/173') format('woff2'),
        url('/fileservice/file/download/h/8e51a8685384e105828ed140d5fd1972.woff/a/920714/sc/15') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fustat';
    src:url('/fileservice/file/download/h/40d25dc11a5527ddebbcef7206501eb1.ttf/a/920714/sc/264') format('truetype'), 
        url('/fileservice/file/download/h/6cd9b1609fecb0ce7e906c92a82f2b42.woff2/a/920714/sc/292') format('woff2'),
        url('/fileservice/file/download/h/b7f361a6e01b83b952db48b6ec629bfb.woff/a/920714/sc/290') format('woff');
    font-weight: 700;
    font-style: normal;    
}

:root {  
  --blue: #3772ff;
  --light-blue: #EAF1FF;
  --soft-blue: #265bdb;
  --dark-blue: #283353;  
  --white: #F4F7FF;
  --light-grey: #a1a9be;
  --font1: 'Inter', sans-serif;  
  --font2: 'Fustat', sans-serif;
  --min-width: 700px;  /*ширина плитки в пикселях*/
  --min-height: 120px; /*высота плитки в пикселях*/
  --radius: 5px;
  --padding: 3px 5px;
}

/* Шрифты */
html .gc-account-leftbar {
  font-family: var(--font1) !Important;
  font-weight: 400;
  /*letter-spacing: .2rem !Important;*/
  font-size: 16px;
  color: var(--white);
}

html .gc-account-leftbar h1,
html .gc-account-leftbar h2,
html .gc-account-leftbar h3 {
  font-family: var(--font1) !Important;
  font-weight: 500;
  /*letter-spacing: .2rem !Important;*/
  font-size: 18px;
  color: var(--white);
}

/*Основные элементы*/
html .gc-account-leftbar {
  background: var(--white) !important;
}

.gc-account-leftbar .gc-account-user-menu {
    position: relative;
    height: 100%;
    z-index: 10000;
}

html .gc-account-leftbar .gc-account-user-menu li {
  padding: var(--padding);
  margin-bottom: 0;
}

html .gc-account-leftbar .gc-account-user-menu li a {
  background-color: var(--blue);
  /* фон иконки */
  position: relative;
  height: 60px;
  /*border: 2px solid rgba(66, 57, 234, 0.8);*/
  border-radius: 16px;
  /*box-shadow: rgba(55, 114, 255, 0.7) 0px 0px 5px 0px;*/ 
  transition: all 0.3s;
  /* высота иконки */
}

html .gc-account-leftbar .gc-account-user-menu li.selected a,
html .gc-account-leftbar .gc-account-user-menu li.active a {
  background-color: var(--soft-blue);
  border-radius: 16px;
  /*box-shadow: rgba(162, 31, 159, 0.8) 0px 0px 10px 0px;*/
  /*border: none;*/
/* фон выбранной иконки*/
}

html .gc-account-leftbar .gc-account-user-menu li a:hover,
html .gc-account-leftbar .gc-account-user-menu li.active a:hover {
  background-color: var(--blue);
  border-radius: 9px;
  /*box-shadow: rgba(162, 31, 159, 0.8) 0px 0px 10px 0px;*/
  transform: scale(1.01);
  /*border: none;*/
  /* фон иконки при наведении и нажатии*/
}

html .menu-item:not(.menu-item-profile):not(.menu-item-monitoring) a img {
  display: none;
  /* скрываем исходные иконки */
}

html .menu-item:not(.menu-item-profile) a::before,
html .sub-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  width: 25px;
  /* задаём размеры для собственных иконок */
  height: 25px;
}
    
/* Ссылки на картинки */
/* Марафон Геткурса */
 html .menu-item-marathon a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/241/h/c325cdd09586057168f56ebdbcfb404a.png');
}

/* Поиск */
 html .menu-item-search a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/241/h/c325cdd09586057168f56ebdbcfb404a.png');
}

/* Профиль */
 html .menu-item-profile a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/319/h/f03bbbdb851ef8509a052d24cb12dc7c.png');
}

html .menu-item-notifications_button_small a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/405/h/979cf52c91a9a91f6beded1b8d04fd9d.png');
  /* уведомления */
  width: 25px;
  height: 25px;
}

html .menu-item-cms a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/89/h/ad55f7a45111bb276976b3a715ab4580.png');
  /* сайт */
}

html .menu-item-teach a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/338/h/f3a1ea5f6fcddfed74305d523542cf29.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/920714/sc/259/h/57ab39a6f45ff73da03d2b99b57c38f8.png');
  /* пользователи */
}

html .menu-item-tasks a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/281/h/7b87b215bc4d2b9ada1a8c7d853d332c.png');
  /* задачи */
  width: 34px;
}

html .menu-item-notifications a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/190/h/a5a3bb21ef5ff2a09a7f3202d9763946.png');
  /* сообщения */
}

html .menu-item-sales a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/191/h/d305307e3c80ed418ff04b65ea5944af.png');
  /* продажи */
}

html .menu-item-chatium a::before {
  background-image: url('https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/422/h/beccbfa94a1c2e4ff381f1d7510f1f1e.png');
  /* чатиум */
}

/* 1 Профиль */
html .gc-account-user-menu li.menu-item.menu-item-profile {
  background: none;
  /* фон профиля (когда без фото) */
  border-radius: 16px;
  padding: 11px 5px 3px;
}

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;*/
  border-radius: 9px;
  /* фон профиля (без фото) при наведении */
}

html .gc-account-leftbar .gc-account-user-menu li.menu-item-profile a {
  padding: 0 5px;
}

html .gc-account-leftbar .gc-account-user-submenu-bar div.user-balance {
  color: var(--blue);
  /* Цвет текста про монеты */
}

/* 2 Уведомления small */
html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small {
  padding: var(--padding);
}

html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a {
  transition: all 0.3s;
  background-color: var(--blue);
  /* фон иконки */
  position: relative;
  border-radius: 16px;
  height: 60px;
  /* высота маленькой иконки уведомлений */
}

html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a:hover {
  background-color: var(--blue);
  border-radius: 9px;
  /*box-shadow: rgba(162, 31, 159, 0.8) 0px 0px 10px 0px;*/
}

html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small.selected a {
  border-radius: 16px;  
  /* цвет уведомлении при наведении и выделении */
}

/* 2A Окно уведомлений (непрочитанные) */
html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group {
  border-top-color: var(--light-blue);
  /* цвет границы между уведомлениями */
  background-color: var(--light-blue);
  /* цвет фона непрочитанных */
  color: var(--dark-blue);
  font-family: var(--font1) !Important;
  /*letter-spacing: .2rem !Important;*/
  font-size: 13px; 
  /* цвет текста непрочитанных */
  transition: all 0.3s;
}

html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group:hover {
  background-color: var(--light-blue);
  /* фон непрочитанных при наведении */
  color: var(--dark-blue);
  /* текст непрочитанных при наведении */
}

html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
  background-color: transparent;
  /* фон прочитанных уведомлений */
  color: var(--dark-blue); 
  font-size: 13px;
  /* текст прочитанных уведомлений*/
}

html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed .date {
  color: var(--dark-blue);
  font-family: var(--font1) !Important;
  /*letter-spacing: .2rem !Important;*/
  font-size: 11px;  
  /* даты прочитанных уведомлений */
}

html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group .date {
  color: var(--soft-blue);
  /* даты непрочитанных уведомлений */
}


html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed:hover {
  background-color: transparent;
  /* фон наведения на прочитанные */
  color: var(--dark-blue);
  /* цвет при наведении на прочитанное*/
}

html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-footer-link {
  border-bottom-color: var(--white);
  /* цвет границы под кнопкой Все уведомления */
}

html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-footer-link {
  color: var(--dark-blue);
  font-family: var(--font1) !Important;
  /*letter-spacing: .2rem !Important;*/
  font-size: 16px !Important;*/
  /* цвет текста на кнопке Все уведомления */
  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 {
  color: var(--dark-blue);
  font-family: var(--font1) !Important;
  /*letter-spacing: .2rem !Important;*/
  font-size: 16px !Important;
  font-weight: 500;  
  /* цвет ссылки Уведомления(С) наверху, цвет при наведении на другие текстовые ссылки */
  transition: all 0.3s;
}

html .gc-account-leftbar .mark-viewed-all {
  color: var(--dark-blue);
  font-family: var(--font1) !Important;
  /*letter-spacing: .2rem !Important;*/
  font-size: 13px !Important;
  /* Отметить прочитанными */
}

html .gc-account-leftbar .mark-viewed-all:hover {
   color: var(--soft-blue);
  /* Отметить прочитанными при наведении */
}

html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .no-notifications-message {
  color: var(--dark-blue);
  font-family: var(--font1) !Important;
  /*letter-spacing: .2rem !Important;*/
  font-size: 12px !Important;    
}

html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .all-notifications-header-link:hover {
  color: var(--dark-blue);
  /* Цвет при наведении на ссылку Уведомления(С) наверху */
}

html .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group .user-image {
  overflow: hidden;
  border-radius: 50px;
  /* закругляем углы */
  background-color: rgb(38 91 219 / 9%);
  /* прозрачная подложка для аватаров пользователей */
}

/* 3 Счётчики уведомлений */
html .gc-account-leftbar .notify-count {
  bottom: inherit;
  /*width: 20px;*/
  top: 5px;
  background-color: var(--soft-blue);
  /* фон всех счётчиков */
  padding: 3px 0;
}

html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count {
  background-color: var(--soft-blue);
  /* фон счётчика в Сообщениях */
}

.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count {
    bottom: inherit;
    right: 10px;
    top: 10px;
}

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(--soft-blue);
  color: var(--white);
  /* фон активных-нажатых счётчиков */
}

/* Вылезающее подменю */
html .gc-account-leftbar .gc-account-user-submenu-bar {
  background: var(--white);
  /* фон подменю */
}

html .gc-account-user-submenu-bar .gc-account-user-submenu li a {
  transition: all 0.3s;
  text-transform: inherit;
  font-family: var(--font1) !important;
  /*letter-spacing: .2rem !Important;*/
  font-weight: 400;
  color: var(--dark-blue);
  font-size: 14px;
  padding-left: 20px;
  /* цвет ссылки подменю */
}

html .gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
  background-color: var(--light-blue);
  transition: all 0.3s;
  /* фон ссылки подменю при наведении */
  color: var(--dark-blue);
  /* цвет ссылки подменю при наведении */
}

html .gc-account-user-submenu-bar h3 {
  color: var(--dark-blue);
  padding-left: 20px
  /* Цвет заголовка подменю */
}

/* 4 Маленькие иконки (чатиум и тд) */
html .gc-account-leftbar span.sub-icon {
  background-color: transparent;
  /* Фон иконки чатиума */
  width: 30px;
  height: 30px;
  border-radius: 16px;
}

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: 16px;
}

html .sub-icon::before {
  width: 25px;
  height: 25px;
}

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(--blue);
    /* фон скукоженного меню на мобильном */
  }

  html .gc-account-leftbar .gc-account-user-menu {
    background: var(--blue);
    /* фон раскрытого меню на мобильном */
  }

  html .gc-account-leftbar .gc-account-user-menu li {
    border-bottom: 0;
  }

  html .gc-page-nav-items-menu {
    left: 70px;
  }
    
  html .gc-page-nav-items-menu a {
    background: var(--blue);
    color: var(--white);
  }
}

.talks-widget-button {
    background: var(--blue);
    /*border: 2px solid rgba(66, 57, 234, 0.8);
  	box-shadow: rgba(66, 57, 234, 0.7) 0px 0px 5px 0px;*/
}

.talks-widget-button .conversations-counter {
    background: var(--soft-blue);
}

.talks-widget-button .comments-icon {
    top: 11px; left: 12px !important;
}

.talks-widget-button .comments-icon::before {
    content: "" !important;
    display: block;
    width: 22px;
    height: 22px;
    background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/920714/sc/266/h/2a0cea2c601ee70cbd55c613f31b7f62.png");
    background-size: cover;
    background-repeat: no-repeat;
}

html .gc-account-leftbar .gc-account-user-menu li.selected span.sub-icon {
    background: transparent;
}