:root {
/* указываем ссылки на файлы новых иконок */
    --button-small: url('https://fs.getcourse.ru/fileservice/file/download/a/593268/sc/509/h/94c0635f41064441e40ccb044f75692e.png');
    --item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/593268/sc/295/h/3811f9c830feb7ba0d8f24ef9d8e030f.png');
    --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/593268/sc/247/h/7be25dfb57a128e2740eb86fe1a94e08.png');
    --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/593268/sc/250/h/955ea758603fc8a08057dc7c1f1dfe5a.png');
    --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/593268/sc/193/h/270880c76d5ca2b6d266efa8a9cc4250.png');
    --item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/593268/sc/146/h/9a84e0a720a6d7f595330ab54efa7454.png');
    --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/593268/sc/212/h/9e1aacf1570695bc5e6784bcd97f9207.png');
    --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/593268/sc/50/h/27d3b117f17d52fcb38563536325f5f1.png');
}

.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count {
    bottom: 3px;
    right: 15px;
}

/* подключаем шрифты к элементам бокового меню */
.gc-account-leftbar,
.gc-account-user-submenu li a,
.gc-account-leftbar h1,
.gc-account-leftbar h2,
.gc-account-leftbar h3,
.gc-account-leftbar p {
     font-family: var(--font); 
}

/* фон меню и тень */
.gc-account-leftbar {
  background: -webkit-linear-gradient(140deg, #131111,#43225e);
background: linear-gradient(140deg, #131111,#43225e);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.custom-menu .gc-account-leftbar .gc-account-user-menu {
  background: transparent;
}

/* фон и размеры разделов под иконки */
 .gc-account-leftbar .gc-account-user-menu li a {
    display: block;
    margin: 5px 5px 7px 7px;
    width: 55px;
    height:55px;
    border-radius: 10px;
    background: none!important;
    transition: all 0.5s;
}

/* выделим фон разделов под иконки при наведении */
 .gc-account-leftbar .gc-account-user-menu li a:hover {
    background: rgba(255, 255, 255, 0.1)!important;
}

/* фон разделов под иконки при выборе раздела и нажатии на него */
 .gc-account-leftbar .gc-account-user-menu li.active a,
.gc-account-leftbar .gc-account-user-menu li.selected a {
    width: 55px;
    height: 55px;
    border-radius: 10px;
     background: rgba(255, 255, 255, 0.3)!important;
}

/* фон подменю и тень */
.gc-account-leftbar .gc-account-user-submenu-bar {
    background: #b4a7bf!important;
    box-shadow: 10px 0 20px RGBA(27, 25, 26, .2);
}

/* заголовок подменю - толщина и цвет*/
.gc-account-user-submenu-bar h3 {
    font-weight: 600;
    color: #131111!important;
    font-size: x-large;
   
    }

/* цвет текста разделов подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    color:#000!important;
    position: relative !important;
    font-weight: 500;
    text-transform: capitalize;
    z-index: 9999;
    transition: all .5s;
}

/* цвет текста разделов подменю при наведении */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    background: transparent!important;
    z-index: 1;
}

/* псевдоэлемент (яркая заливка в движении слева направо) - опишем элемент */
.gc-account-user-submenu-bar .gc-account-user-submenu li::after {
    content: '';
    width: 0%;
    height: 2%;
    position: absolute;
    background: -webkit-linear-gradient(140deg, #131111,#43225e);
background: linear-gradient(140deg, #131111,#43225e);
    top:40px;
    left:0;
    z-index: 0;
    transition: all .5s;
}

/* задаем фон псевдоэлементом (яркая заливка в движении слева направо) 
для разделов подменю при наведении */
.gc-account-user-submenu-bar .gc-account-user-submenu li:hover::after {
    width: 90%;
    
}

/* УСТАНАВЛИВАЕМ СОБСТВЕННЫЕ ИКОНКИ - НАЧАЛО */
/* скрываем системные иконки Меню */
html .menu-item-notifications_button_small a img,
html .menu-item-cms a img,
html .menu-item-teach a img,
html .menu-item-user a img,
html .menu-item-tasks a img,
html .menu-item-notifications a img,
html .menu-item-sales a img,
html .menu-item-chatium a img  {
    display: none;
}

/* задержка для мягкости анимации */
li.menu-item.menu-item-notifications_button_small a,
li.menu-item.menu-item-cms a,
li.menu-item.menu-item-teach a,
li.menu-item.menu-item-user a,
li.menu-item.menu-item-tasks a,
li.menu-item.menu-item-notifications a,
li.menu-item.menu-item-sales a,
li.menu-item.menu-item-chatium a { 
    transition: all .5s; 
}

/* убираем разделители-черточки между иконками Меню */
.gc-account-leftbar .gc-account-user-menu li {
  border-bottom: none;
}

/* оформляем иконку профиля */
 .menu-item-profile .menu-item-icon {
    border-radius: 100px;
    border:1px solid #fff;
    width:70px;
    margin-top: 2px;
    }

/* новая иконка - рупор - позиционируем, задаём цвет и размер */
li.menu-item.menu-item-notifications_button_small a:after {
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 57%;  
    transform: translate(-50%, -50%); 
    background-image: var(--button-small);
    background-size: contain; 
    background-repeat: no-repeat; 
    display: block;
    width: 32px;
    height: 22px;
  filter: invert(81%) sepia(11%) saturate(11%) hue-rotate(358deg) brightness(99%) contrast(99%);
   }

/* фон разделов рупор при выборе раздела и нажатии на него */
 li.menu-item.menu-item-notifications_button_small.active a,
li.menu-item.menu-item-notifications_button_small.selected a {
    width: 55px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3)!important;
}

/* новые иконки через псевдоэлемент - позиционируем, задаём цвет и размер */
li.menu-item.menu-item-cms a:after,
li.menu-item.menu-item-teach a:after,
li.menu-item.menu-item-user a:after,
li.menu-item.menu-item-tasks a:after,
li.menu-item.menu-item-notifications a:after,
li.menu-item.menu-item-sales a:after,
li.menu-item.menu-item-chatium a:after {     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: invert(81%) sepia(11%) saturate(11%) hue-rotate(358deg) brightness(99%) contrast(99%);
}

/* подгружаем новые иконки */
li.menu-item.menu-item-cms a::after
{ background-image: var(--item-cms); }

li.menu-item.menu-item-teach a:after
{ background-image: var(--item-teach); }

li.menu-item.menu-item-user a:after
{ background-image: var(--item-user); }

li.menu-item.menu-item-tasks a:after
{ background-image: var(--item-tasks); }

li.menu-item.menu-item-notifications a:after
{ background-image: var(--item-notif); }

li.menu-item.menu-item-sales a:after
{ background-image: var(--item-sales); }

li.menu-item.menu-item-chatium a:after 
{ background-image: var(--item-chatium);
  }

/* счетчики уведомлений всегда наверху */
.gc-account-leftbar .gc-account-user-menu li .notify-count {
    z-index: 9999;
}

/* цвет для счётчика уведомлений */
.gc-account-leftbar .notify-count {
    background-color: #6091cb;
    width: 16px;
    height: 16px;
    border-radius: 50px;
    font-size: xx-small;
    margin-left: 5px;
} 

/* цвет уведомления раздела "Сообщения" */ 
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count {
     background: #66CC66!important;
} 


/* ОФОРМЛЕНИЕ ВИДЖЕТА ОБЩЕНИЯ */
/* виджет мессененджера - цвет виджета */
.talks-widget-button {
    background: #43225e!important;
}

/* виджет мессенджера - заливка иконки "Мессенджер" */
.talks-widget-button span {
    color: #ffffff;
}

/* виджет мессененджера - кнопка "Начать разговор" */
.talks-widget-window .talks-widget-body .conversations-list-block .conversation-list-footer .btn {
    background: #43225e;
    border: none;
}

/* собственная иконка на Бургер в скрытом меню */
.gc-account-leftbar a.toggle-link::before {
    content: '';
    position: absolute !important;
    top: 5px;
    left: 5px;
    width: 35px !important;
    height: 35px !important;
    /* иконка с сервиса https://icons8.com/icons */
    background-image: url(https://img.icons8.com/ios-filled/35/D0C6BD/xbox-menu.png) !important;
    background-size: cover !important;
}

@media screen and (max-width: 768px) {
    /* прокрашиваем фон меню для мобильных устройств */ 
   .gc-account-leftbar .toggle-link,
   .gc-account-leftbar .gc-account-user-menu {
       background: -webkit-linear-gradient(140deg, #131111,#43225e);
background: linear-gradient(140deg, #131111,#43225e);
    }
    .gc-account-leftbar a.toggle-link {
       position: relative;   
    }
    /* скрываем системную иконку-Бургер сжатого меню и далее позиционируем */
    a.toggler-item {
        display: none !important;
    }
    .gc-account-leftbar a.toggle-link {
        position: relative;   
    }
    .gc-account-leftbar .without-icon img {
        display: none;
    }
    .gc-account-leftbar a.toggle-link::before {
        position: relative;
        left: 10px;
    }
}