/*подключаем шрифты */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    --Gcolor1: #bf6cfe;
    --Gcolor2: #8663ff;
    --Gcolor3: #ec4882;
    --Gwhite:  #ffffff;
    --Gblack:  #333333;
    --Gbackground: #F9F9FB;
    --Gfont: 'Montserrat', Roboto, sans-serif!important; 
    /* фильтр сереневый цвет */
    --ikonka1: invert(39%) sepia(24%) saturate(5106%) hue-rotate(233deg) brightness(101%) contrast(102%);;
    /* фильтр белый цвет */
    --ikonka2:  invert(100%) sepia(4%) saturate(0%) hue-rotate(194deg) brightness(111%) contrast(101%);
    
    --button-small: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/354/h/b435024d0b6abca30bbecb5a0a99fd61.png');
    --item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/265/h/ffa1dadbe81c8618ae93695665b4b799.png');
    --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/151/h/46cb8968cdcd63078d60116bd32f624d.png');
    --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/371/h/5ec98d7202dd9588cfafcf66ac779c7f.png');
    --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/114/h/020c22bc2b2e9912edbf13c623a04219.png');
    --item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/207/h/49b0e5a2975d806cbf6b256b36b2f98f.png');
    --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/268/h/3f8633cf98d886bc3eb8d54157bfd2c9.png');
    --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/395001/sc/119/h/929ef354374cf2d9174727ec352cf81f.png');
}

/* Боковая панель */
html .gc-account-leftbar {
    background: var(--Gwhite);
    height: 90%;
    border-radius: 20px;    
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.2);
}

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

/* Иконка профиля - аватар */
html .menu-item-profile .menu-item-icon {
    border-radius: 100px;
    width: 52px;
    border: 3px solid var(--Gcolor2);
}

/* Раздел с иконкой профиля (ссылка) */
li.menu-item.menu-item-profile a {
    background: transparent!important;
    transition: all 0.3s;
}

/*  Левая панель - размеры разделов с иконками */
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 {
    display: block;
    background: transparent;
    margin: 12px auto 20px;
    width: 58px;
    height: 58px;
    border-radius: 10px;
    transition: all 0.3s;
}

/* выделим фон разделов под иконки при наведении */
.gc-account-leftbar .gc-account-user-menu li:hover a,
.gc-account-leftbar .gc-account-user-menu li.active a, 
.gc-account-leftbar .gc-account-user-menu li.selected a {
    background: rgb(134,99,255);
    background: linear-gradient(151deg, rgba(134,99,255,1) 0%, rgba(225,113,251,1) 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-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.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: 24px;
    height: 24px;
    /* из черного - в сиреневый */
    filter: var(--ikonka1);
}

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

/* Счетчик уведомлений в левом меню */
.gc-account-leftbar .notify-count {
    z-index: 2;
    width: 25px;
    font-family: var(--Gfont)!important; 
    font-size: 0.8em!important;
    font-weight: 700;
    text-align: center;
    color: var(--Gwhite);
    background: var(--Gcolor3)!important;
    border-radius: 6px;
    position: absolute;
    bottom: 38px;
    right: 4px;
    padding: 5px 0px;
}

/* Раскрывающееся меню - подменю */
.gc-account-leftbar .gc-account-user-submenu-bar {
    background: var(--Gwhite);
    border-radius: 20px;
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.2);
}

/* Скрываем раздел в меню с бонусными рублями, депозитом и монетами */
.user-balance {
    display: none;
}


/* Заголовок подменю */
.gc-account-user-submenu-bar H3 {
    font-family: var(--Gfont);
    font-weight: 500;
    /*text-transform: uppercase;*/
    color: var(--Gcolor2);
    padding-left: 19px;
}

/* Разделы в подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    font-family: var(--Gfont); 
    font-weight: 400;
    color: var(--Gblack);
    transition: all 0.3s;
}

/* разделы в подменю при наведении */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    background: #e171fb50;
    border-radius: 9px;
}

.gc-fade-wrapper .gc-fade {
    top: 0px;
    left: 0px;
    opacity: 0.1;
}

/* Счетчик уведомлений в раскрывающемся меню - подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li .notify-count {
    font-family: var(--Gfont)!important; 
    font-size: 0.7em!important;
    bottom: 14px;
    right: 10px;    
}


/* Мобильная адаптация */ 
@media (max-width: 768px) {
    /* Левая панель */
    html .gc-account-leftbar {
        box-shadow: none;
    }
    /* Боковое меню */ 
    html .gc-account-leftbar .gc-account-user-menu {
        background: var(--Gwhite);
        height: 94%;
        border-radius: 20px;    
        box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.2);
    }   
    /* Нижняя плашки меню */ 
    .gc-account-leftbar .toggle-link, 
    .gc-page-nav-items-menu a {
        background: var(--Gcolor1);
    }
    /* Иконка-бургер */ 
    .gc-account-leftbar .without-icon img {
        filter: var(--ikonka2);
    }
    .gc-page-nav-items-menu.lt-page-edit-link {
         font-family: var(--Gfont);
    }
}

@media (max-width: 460px) {
    /* Подменю Уведомления */
    .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small {
        max-width: 223px;
    }
    /* Заголовок подменю */
    .gc-account-user-submenu-bar h3 {
        font-size: 20px!important;
    }
    /* Разделы в раскрывающемся меню */
    .gc-account-user-submenu-bar .gc-account-user-submenu li a {
         font-size: 14px!important;
    }
}