/* ------------- 
content start - leftbar
------------- */

/* ОФОРМЛЕНИЕ БОКОВОГО МЕНЮ - НАЧАЛО */

/* импорт шрифта */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700;800;900&display=swap');

:root {
    --color1: rgba(255,255,255,.1);
    --color2: #6735A4;
    --color3: #A9819980;
    --black: #1b191a;
    --white: #ffffff;    
    
    --background-menu: linear-gradient(180deg, #BFA1B3 0%, #FFCACC 100%);
    --background-ikonka: transparent;
    --ikonka1:  invert(100%) sepia(4%) saturate(0%) hue-rotate(194deg) brightness(111%) contrast(101%);    
    --ikonka2: invert(25%) sepia(35%) saturate(3571%) hue-rotate(249deg) brightness(85%) contrast(92%);
    --subColor:  #FAF3F0;
    
    --font: 'Jost';
    
    --radius-notif: 50%; 
    
    /* указываем ссылки на файлы новых иконок */
    --button-small: url('https://fs.getcourse.ru/fileservice/file/download/a/663565/sc/304/h/3a51f1868fdcc95796cbe76c7e0c3af2.png');
    --item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/663565/sc/135/h/360dfc112b08bb67eb234785c2e6b057.png');
    --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/663565/sc/140/h/e6cec01a4ea15633386d781b01990c9b.png');
    --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/663565/sc/356/h/9fc88f84cccc4eebc5b36d9d51f47900.png');
    --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/663565/sc/283/h/c9e7f74df99d1f47ecd2b95859529a9b.png');
    --item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/663565/sc/211/h/6c3e98e1cfa27cff6e8249224905e29a.png');
    --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/663565/sc/253/h/fe2027eb0863ca2b9658b8ce9e15c8c7.png');
    --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/663565/sc/435/h/55d4ae2a5ddfcfff33de86ed42f0a625.png');
}


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

/* фон меню и тень */
html .gc-account-leftbar {
    background: var(--background-menu);
    box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

/* фон и размеры разделов под иконки */
html .gc-account-leftbar .gc-account-user-menu li a {
    display: block;
    margin: 0 auto 10px auto;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    background: var(--background-ikonka);
    font-size: 11px !important;
    transition: all 0.3s;
}

/* выделим фон разделов под иконки при наведении */
html .gc-account-leftbar .gc-account-user-menu li a:hover {
    background: var(--color1);
}

/* фон разделов под иконки при выборе раздела и нажатии на него */
html .gc-account-leftbar .gc-account-user-menu li.active a,
html .gc-account-leftbar .gc-account-user-menu li.selected a {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    background: var(--color3);
}

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

/* заголовок подменю - толщина и цвет*/
html .gc-account-user-submenu-bar h3 {
    font-weight: 600;
    color: var(--black);
    font-size: 18px;
}

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

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

/* псевдоэлемент (яркая заливка в движении слева направо) - опишем элемент */
html .gc-account-user-submenu-bar .gc-account-user-submenu li::after {
    content: '';
    width: 0%;
    height: 100%;
    position: absolute;
    background: var(--color2);
    top:0;
    left:0;
    z-index: 0;
    transition: all .3s;
}

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

/* УСТАНАВЛИВАЕМ СОБСТВЕННЫЕ ИКОНКИ - НАЧАЛО */
/* скрываем системные иконки Меню */
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 .3s; 
}

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

/* оформляем иконку профиля */
html .menu-item-profile .menu-item-icon {
    border-radius:100px;
    width:50px;
    border:3px solid var(--color2);
    margin-top: 5px;
}

/* новая иконка - рупор - позиционируем, задаём цвет и размер */
li.menu-item.menu-item-notifications_button_small a:after {
    content: ''; 
    position: absolute; 
    background-image: var(--button-small);
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%); 
    background-size: contain; 
    background-repeat: no-repeat; 
    display: block;
    width: 30px;
    height: 24px;
        /* из черного - в cерый цвет */
   filter: invert(93%) sepia(10%) saturate(248%) hue-rotate(346deg) brightness(87%) contrast(85%);
}

/* новые иконки через псевдоэлемент - позиционируем, задаём цвет и размер */
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: var(--ikonka1);
}

/* подгружаем новые иконки */
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); }

/* задаём цвет новых иконок при выборе/нажатии */
li.menu-item.selected a::after,
li.menu-item.active a::after {
    /* из черного - в красный цвет */
    filter: var(--ikonka2);
}

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

/* цвет для счётчика уведомлений */
html .gc-account-leftbar .notify-count {
    background-color: #F16195;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-notif);
} 

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


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

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

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

/* собственная иконка на Бургер в скрытом меню */
html .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) {
    /* прокрашиваем фон меню для мобильных устройств */ 
    html .gc-account-leftbar .toggle-link,
    html .gc-account-leftbar .gc-account-user-menu {
       background: #6735A4;
    }
    .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;
    }
}

/* ОФОРМЛЕНИЕ БОКОВОГО МЕНЮ  - КОНЕЦ */
/* ------------- 
content finish - leftbar
------------- */