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

:root {
  --yellow: #ffd42a;
  --dark-yellow: #f59d1b;
  --light-orange: #ef7c1b;
  --orange: #ea5921;
  --light-blue: #6c93cc;
  --blue: #4673b7;
  --normal-blue: #224d9a;
  --dark-blue: #274188;
  --black: #000;
  --white: #fff;
  --dark-grey: #5e5e5e;
  --light-grey: #a1a1a1;
  --radius: 15px;
  --padding: 3px 5px;
  --font: 'Montserrat', sans-serif;
}

.logo-link {
  display: none;
}

/* Шрифты */
html .gc-account-leftbar {
  font-family: var(--font) !Important;
  font-weight: 500;
}

html .gc-account-leftbar h1,
html .gc-account-leftbar h2,
html .gc-account-leftbar h3 {
  font-family: var(--font) !Important;
  font-weight: 600;
}

/*Основные элементы*/
html .gc-account-leftbar {
  background: var(--light-blue) !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: transparent;
  /* фон иконки */
  position: relative;
  height: 60px;
  border: 2px solid rgba(254, 254, 254, 0.8);
  border-radius: 11px;
  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(--blue);
  border-radius: 11px;
  /*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: 11px;
  /*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://fs01.getcourse.ru/fileservice/file/download/a/813359/sc/133/h/053258444074faabdc1f290daf504e29.png');
}
/* Профиль */
 html .menu-item-profile a::before {
  background-image: url('https://fs16.getcourse.ru/fileservice/file/download/a/813359/sc/267/h/cfe3a88ce1b1b4c636c3ef20108a03b3.png');
}

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

html .menu-item-cms a::before {
  background-image: url('https://fs17.getcourse.ru/fileservice/file/download/a/813359/sc/131/h/011bace04f6b760ef7e87b71b5140515.png');
  /* сайт */
}

html .menu-item-teach a::before {
  background-image: url('https://fs01.getcourse.ru/fileservice/file/download/a/813359/sc/149/h/2f182901357d7ff404efea7d7a435a63.png');
  /* обучение */
}

html .menu-item-user a::before,
html .menu-item-chatium .sub-icon::before {
  background-image: url('https://fs17.getcourse.ru/fileservice/file/download/a/813359/sc/38/h/0f72b1a2765b309639630028af5ce0d4.png');
  /* пользователи */
}

html .menu-item-tasks a::before {
  background-image: url('https://fs02.getcourse.ru/fileservice/file/download/a/813359/sc/194/h/45a623a3af68fe85c8f05b658c0d71a1.png');
  /* задачи */
  width: 34px;
}

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

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

html .menu-item-chatium a::before {
  background-image: url('https://fs20.getcourse.ru/fileservice/file/download/a/813359/sc/170/h/56dbf710489dddf922971efa45d76493.png');
  /* чатиум */
}

/* 1 Профиль */
html .gc-account-user-menu li.menu-item.menu-item-profile {
  background: none;
  /* фон профиля (когда без фото) */
  border-radius: 11px;
  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;
  /* фон профиля (без фото) при наведении */
}

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

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: var(--padding);
}

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

html .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a:hover {
  background-color: var(--blue);
  border-radius: 11px;  
}

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

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

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

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

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

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


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-grey);
  /* цвет при наведении на прочитанное*/
}

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,
html .gc-account-leftbar .mark-viewed-all {
  color: var(--dark-grey);
  font-family: var(--font) !Important;
  /* font-size: 20px !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,
html .gc-account-leftbar .mark-viewed-all:hover {
  color: var(--dark-grey);
  font-family: var(--font) !Important;
  /* цвет ссылки Уведомления(С) наверху, цвет при наведении на другие текстовые ссылки */
  transition: all 0.3s;
}

html .gc-account-leftbar .mark-viewed-all {
  	font-family: var(--font) !Important;
    font-weight: 400;
 	/* font-size: 20px !Important; */
    /* Отметить прочитанными */
}

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

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

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

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

.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(--light-orange);
  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;
  color: rgba(101, 110, 135, 0.70);
  text-transform: inherit;
  font-family: var(--font) !important;
  font-weight: 400;
  color: var(--dark-grey);
  padding-left: 30px;
  /* цвет ссылки подменю */
}

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

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

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

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

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

  html .gc-account-leftbar .gc-account-user-menu {
    background: var(--light-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(--light-blue);
    color: var(--white);
  }
}

.talks-widget-button {
    background: var(--blue);
    box-shadow: 0 2px 7px 0 rgba(62, 69, 49, 0.12);
}

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

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

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

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