/* БОКОВОЕ МЕНЮ - начало */
/* подгрузите шрифты и подключите их */
:root {
    --Gcolor1: rgb(42, 95, 117);
    --Gcolor2: #ff7f51;
    /*--Gcolor2: #5b9bb6;*/
    --Gcolor3: #cea763;/*золото;*/
    --Gcolor4: #caf8f4;
    --Gwhite: #ffffff;
    --Gblack: #333333;
    --Gfont: 'Montserrat', Roboto, sans-serift;
    --Gfont2: Roboto, sans-serif;  
    
   /* фильтр синий цвет */
    --ikonka1: invert(64%) sepia(16%) saturate(1060%) hue-rotate(152deg) brightness(86%) contrast(89%);
    /* фильтр белый цвет */
    --ikonka2:  invert(100%) sepia(4%) saturate(0%) hue-rotate(194deg) brightness(111%) contrast(101%);
    /* фильтр оранжевый цвет */
    --ikonka3: invert(77%) sepia(58%) saturate(2315%) hue-rotate(310deg) brightness(101%) contrast(101%);
    
        --button-small: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/372/h/b438fe5bbe8bdaaf1c3237704daaf046.png');
    --item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/251/h/962c3afe7cb2871730356d4c49d6aedf.png');
    --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/382/h/b129e3f928dddf5bad3413c8b4af5ea3.png');
    --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/473/h/f3194aefcb17bcc08efb407d3ff3b0ed.png');
    --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/128/h/45d1a6fb2e269a1b561184b2bc26f016.png');
    --item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/289/h/cc4e51fe5e20b971798af13cad41d63e.png');
    --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/129/h/f55a33d17aa260088e5c234e1019f1dc.png');
    --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/591225/sc/108/h/96320db2f55c10e184d0014e002e1aab.png');

}

body {
    /* шрифт */
    font-family: var(--Gfont2)!important;  
    /* толщина шрифта */
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    /* шрифт */
    font-family: var(--Gfont)!important;
    /* толщина шрифта */
    font-weight: 600;
}


/* Левая панель */
html .gc-account-leftbar {
    background: #5c5143;
    height: 90%;
    border-radius: 20px;    
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.2);
    margin-top: 25px;
    margin-left: 5px;
}
/* Левая панель - убираем разделители между иконками-разделами */
.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(--Gcolor3);
}
/* Раздел с иконкой профиля (ссылка) */
li.menu-item.menu-item-profile a {
    background: transparent!important;
    transition: all 0.3s;
}

/*  Левая панель - лупа */
.gc-account-leftbar .gc-account-user-menu li a {
    display: table-cell;
    vertical-align: middle;
    color: white;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    width: 70px;
    height: 70px;
    padding-left: 10px;
    padding-right: 10px;
    background: #5b5143;
    line-height: 12px;
    text-decoration: 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 {
    display: block;
    position: relative;
    background: transparent;
    margin: 12px auto 20px;
    width: 58px;
    height: 58px;
    border-radius: 100px;
    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: var(--Gcolor3);
}
/* скрываем системные иконки Меню */
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(--ikonka2);
}
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(--ikonka2);
}
/* выделим фон разделов под иконку с рупором при наведении */
.gc-account-leftbar .gc-account-user-menu li.menu-item.menu-item-notifications_button_small:hover a,
.gc-account-leftbar .gc-account-user-menu li.menu-item.menu-item-notifications_button_small.active a, 
.gc-account-leftbar .gc-account-user-menu li.menu-item.menu-item-notifications_button_small.selected a {
    background: transparent!important;
}
/* задаём цвет рупора при выборе/нажатии */
li.menu-item.menu-item-notifications_button_small.selected a::after,
li.menu-item.menu-item-notifications_button_small.active a::after,
li.menu-item.menu-item-notifications_button_small:hover a::after {
    /* из черного - в орнажевый */
    filter: var(--ikonka3);
}
/* задаём цвет новых иконок при выборе/нажатии */
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-size: 0.8em!important;
    font-weight: 700;
    text-align: center;
    color: var(--Gwhite);
    background: var(--Gcolor2)!important;
    border-radius: 6px;
    position: absolute;
    bottom: 38px;
    right: 4px;
    padding: 5px 0px;
}
/* Раскрывающееся меню - подменю */
.gc-account-leftbar .gc-account-user-submenu-bar {
    background: #000a1c; /* Т.синий как угол на баннере */
    border-radius: 20px;
    box-shadow: 0px 25px 40px -20px rgba(0,0,0,0.2);
}
/* Скрываем раздел в меню с бонусными рублями, депозитом и монетами */
.user-balance {
    display: none;
}

/* Скрываем ракету */
.menu-item-marathon {
    display: none;
}

/* Заголовок подменю */
.gc-account-user-submenu-bar H3 {
    font-weight: 500;
    /*text-transform: uppercase;*/
    color: var(--Gcolor2);
    padding-left: 19px;
}
/* Разделы в подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    font-weight: 400;
    font-size: 16px;
    text-transform: capitalize;
    color: var(--Gwhite);
    transition: all 0.3s;
}
/* разделы в подменю при наведении */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    background: #cea763; /* золото */
    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-size: 0.7em!important;
    bottom: 14px;
    right: 10px;    
}
/* Мобильная адаптация */ 
@media (max-width: 768px) {
    /* Левая панель */
    html .gc-account-leftbar {
        box-shadow: none;
        margin-top: 0px;
        margin-left: 0px;
    }
    /* Боковое меню */ 
    html .gc-account-leftbar .gc-account-user-menu {
        background: #f3e2d2;
        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 {
    }
}
@media (max-width: 460px) {
    html .gc-account-leftbar {
        margin-left: 0;
    }
    /* Подменю Уведомления */
    .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small {
        max-width: 230px;
    }
    /* Заголовок подменю */
    .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;
    }
}
/* Мобильная адаптация */ 
@media (max-height: 800px) and (orientation: landscape) {
    html .gc-account-leftbar {
        height: 100%;
        /* скругление углов */
        border-radius: 20px 20px 0 0;    
    }
    /* Раздел Уведомления */
    .gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications_button_small {
        height: 100%;
        /* скругление углов */
        border-radius: 20px 20px 0 0;
    }
}
/* БОКОВОЕ МЕНЮ - конец */