/* БОКОВОЕ МЕНЮ - начало */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600&display=swap');

:root {
    /* Основные цвета */
    /* обводка аватара в профиле (тем же цветом - иконки в разделах) */
    --Mcolor1: #cea661;
    /* фон уведомлений в подменю */
    --Mcolor2: #cea661;
    
    --Mcolor3:#cea661;
    /* белый */
    --Mwhite: #ffffff;
    /* черный */
    --Mblack: #cea661; /*цвет текста в подменю*/
    /*черный */
    --Mblack2: #4D4D4D;
    /* фон меню */
    --Mbackground: #000;
    /* фон под иконки в состоянии покоя */
    --Mbackground2: transparent;
    /* фон под иконки в состоянии наведения */
    --Mbackground3: #FFFFFF30;
    /* фон всего субменю */
    --Mbackground4: #000;
    /* шрифт заголовки */
    --Mfont: 'Oswald', sans-serif!important; 
    /* шрифт основной текст */
    --Mfont2: 'Montserrat', sans-serif!important; 
    --filter1: invert(69%) sepia(53%) saturate(356%) hue-rotate(359deg) brightness(90%) contrast(88%);
    /* Иконки меню в спокойном состоянии */
    /* рупор-уведомления */
    --button-small: url('/pl/fileservice/user/file/download/h/0e73c3078781b2c0ff49bf3b4b0779e8.png');
    /* сайт */
    --item-cms: url('/pl/fileservice/user/file/download/h/3ec9fc98f6c6fbe0c4b8ee15c253b4b1.png');
    /* обучение */
    --item-teach: url('/pl/fileservice/user/file/download/h/b8195c45724a475c177ccc6ee6f73cb5.png');
    /* пользователи */
    --item-user: url('/pl/fileservice/user/file/download/h/009a14e56e58f693ed7e3875e2859807.png');
    /* задачи */
    --item-tasks: url('/pl/fileservice/user/file/download/h/85d659fece768f663de8cae82ecf3786.png');
    /* сообщения */
    --item-notif: url('/pl/fileservice/user/file/download/h/56e98b7d1c0b8ea67241414f041fd8ba.png');
    /* продажи */
    --item-sales: url('/pl/fileservice/user/file/download/h/b1d77bde569aa422e8ac386b12f80e5e.png');
    /* приложение */
    --item-chatium: url('/pl/fileservice/user/file/download/h/336a8660600b90fce389126ce69cb424.png');
}

/* Боковая панель  */
.gc-account-leftbar, 
/* контейнер в боковой панели с  разделами меню */
.gc-account-leftbar .gc-account-user-menu {
    /* фон меню */
    background-color: var(--Mbackground);
}

/*  Левая панель - Разделы с иконками (ссылки) */
/*  рупор - уведомления */
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: var(--Mbackground2);
    /* оступы сверху слева-справа и снизу */
    margin: 12px auto 20px;
    /* размеры разделов под иконки */
    width: 58px;
    height: 58px;
    /* радиус скругления */
    border-radius: 10px;
    transition: all 0.3s;
}

/* Скрываем марафон для админов чтоб не мешал */
li.menu-item-marathon {
    display: none;
}

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

/* Разделы под иконки при наведении на разделы */
.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(--Mbackground3)!important;
}

/* Раздел с иконкой профиля - аватар */
li.menu-item-profile .menu-item-icon {
    /* радиус скругления */
    border-radius: 100px;
    /* размер изображения */
    width: 52px;
    height: 52px;
    /* граница - обводка иконки профиля */
    border: 3px solid var(--Mcolor1);
}

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


/* Раздел с аватаркой профиля при наведении/выборе */
li.menu-item.menu-item-profile a:hover,
li.menu-item.menu-item-profile.active a,
li.menu-item.menu-item-profile.selected a {
    background: none!important;
}


/* Системные иконки Меню - скрываем, чтобы поставить свои */
/*  рупор - уведомления */
li.menu-item.menu-item-notifications_button_small a img,
/*  сайт */
li.menu-item.menu-item-cms a img,
/* обучение */
li.menu-item.menu-item-teach a img,
/* пользователи */
li.menu-item.menu-item-user a img,
/* задачи */
li.menu-item.menu-item-tasks a img,
/* сообщения */
li.menu-item.menu-item-notifications a img,
/* продажи */
li.menu-item.menu-item-sales a img,
/* приложение */
li.menu-item.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: 28px;
    height: 28px;
}

/* ссылки на новые иконки к разделам меню - в состоянии покоя */
li.menu-item.menu-item-cms a::after {background-image: var(--item-cms);
/* перекрашиваем иконку в нужный цвет фильтром */
    filter: var(--filter1);}
li.menu-item.menu-item-teach a::after {background-image: var(--item-teach);
/* перекрашиваем иконку в нужный цвет фильтром */
    filter: var(--filter1);}
li.menu-item.menu-item-user a::after {background-image: var(--item-user);
/* перекрашиваем иконку в нужный цвет фильтром */
    filter: var(--filter1);}
li.menu-item.menu-item-tasks a::after {background-image: var(--item-tasks);
/* перекрашиваем иконку в нужный цвет фильтром */
    filter: var(--filter1);}
li.menu-item.menu-item-notifications a::after {background-image: var(--item-notif);
/* перекрашиваем иконку в нужный цвет фильтром */
    filter: var(--filter1);}
li.menu-item.menu-item-sales a::after {background-image: var(--item-sales);
/* перекрашиваем иконку в нужный цвет фильтром */
    filter: var(--filter1);}
li.menu-item.menu-item-chatium a::after {background-image: var(--item-chatium);
/* перекрашиваем иконку в нужный цвет фильтром */
    filter: var(--filter1);}


/* новая иконка - рупор - позиционируем, задаём цвет */
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(--filter1);
}

/* Счетчик уведомлений в боковом меню - у рупора */
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count {
    z-index: 2;
    font-family: var(--Mfont2)!important; 
    font-size: 0.8em!important;
    font-weight: 700;
    text-align: center;
    /* цвет текста уведомлений */
    color: var(--Mwhite);
    /* цвет фона уведомлений */
    background: var(--Mcolor2);
   /* скругление границы фона */
    border-radius: 6px;
}

/* Счетчик уведомлений в боковом меню - разделы */
/* сообщения */
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count,
/* обучение */
.gc-account-leftbar .gc-account-user-menu li.menu-item-teach .notify-count,
/* покупки */
.gc-account-leftbar .gc-account-user-menu li.menu-item.menu-item-sales .notify-count {
    z-index: 2;
    font-family: var(--Mfont2)!important; 
    font-size: 0.8em!important;
    font-weight: 700;
    text-align: center;
    /* цвет текста уведомлений */
    color: var(--Mwhite);
    /* цвет фона уведомлений */
    background: var(--Mcolor2);
   /* скругление границы фона */
    border-radius: 6px;
   /* позиционирование */
    position: absolute;
    bottom: 38px;
    right: 4px;
    padding: 5px 0px;
}
/* Надписи через псевдоэлемент - позиционируем, задаём цвет */
li.menu-item.menu-item-cms a::before,
li.menu-item.menu-item-teach a::before,
li.menu-item.menu-item-user a::before,
li.menu-item.menu-item-tasks a::before,
li.menu-item.menu-item-notifications a::before,
li.menu-item.menu-item-sales a::before,
li.menu-item.menu-item-chatium a::before {  
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    /* размер шрифта */
    font-size: 10px;
    /* цвет текста */
    color: var(--Mcolor1);
    /* задержка для плавности анимации */
    transition: all 0.3s;
}

/* Надписи через псевдоэлемент для каждого раздела */
li.menu-item.menu-item-cms a::before {content: 'Cайт';}
li.menu-item.menu-item-teach a::before {content: 'Обучение';}
li.menu-item.menu-item-user a::before {content: 'Ученики';}
li.menu-item.menu-item-tasks a::before {content: 'Задачи';}
li.menu-item.menu-item-notifications a::before {content: 'Общение';}
li.menu-item.menu-item-sales a::before {content: 'Продажи';}
li.menu-item.menu-item-chatium a::before {content: 'Apps';}

/* Цвет надписей под иконками при выборе/нажатии */
.gc-account-user-menu li:hover a::before,
.gc-account-user-menu li.selected a::before,
.gc-account-user-menu li.active a::before {
    /* цвет текста */
    color: var(--Mcolor1);
}
/* Раскрывающееся меню - подменю */
.gc-account-leftbar .gc-account-user-submenu-bar {
    /* фон подменю */
    background: var(--Mbackground4);
}

/* Заголовок подменю */
.gc-account-user-submenu-bar H3 {
    /* шрифт */
    font-family: var(--Mfont);
    /* размер шрифта */
    font-size: 26px;
    /* толщина написания */
    font-weight: 500;
    /* цвет текста */
    color: var(--Mcolor2);
    /* нижнее подчеркивание */
    border-bottom: 1px solid var(--Mcolor2);
    padding-bottom: 20px;
    padding-left: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* Разделы в подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    /* шрифт */
    font-family: var(--Mfont2); 
    /* размер шрифта */
    font-size: 16px;
    font-weight: 400;
    /* каждое слово с заглавной буквы */
    text-transform: capitalize;
    /* цвет текста */
    color: var(--Mblack);
    padding-left: 20px;
    transition: all 0.3s;
}

/* разделы в подменю при наведении */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    /* цвет фона */
    background-color: var(--Mcolor3);
    /* цвет текста */
    color: #fff;
    border-radius:0 15px 15px 0;
}

/* Счетчик уведомлений в раскрывающемся меню */
.gc-account-leftbar .gc-account-user-submenu li .notify-count {
    font-family: var(--Mfont2)!important; 
    /* цвет текста */
    color: var(--Mwhite);
   /* фон уведомлений в подменю */
    background: var(--Mcolor2);
   /* скругление границы фона */
    border-radius: 6px;
}

/* раздел в меню с бонусными рублями, депозитом и монетами */
.user-balance {
    margin-top: 20px!important;
    margin-bottom: 10px;
    /* шрифт */
    font-family: var(--Mfont2);     
    /* цвет текста */
    color: #fff;
}

/* Скрываем марафон для админов чтоб не мешал */
.menu-item-marathon {
    display: none;
}

/* Мобильная адаптация */ 
@media (max-width: 768px) {
    /* Нижняя плашка меню */ 
    .gc-account-leftbar .toggle-link {
        /* фон */ 
        background: var(--Mcolor2);
    }
    /* Надпись Действие */     
    .gc-page-nav-items-menu a {
        /* шрифт текста */ 
        font-family: var(--Mfont2);
        /* цвет текста */ 
        color: var(--Mwhite);
        /* фон */ 
        background: var(--Mcolor2);
    }
}

@media (max-width: 460px) {
    /* Заголовок подменю */
    .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;
    }
}
.gc-account-leftbar .gc-account-user-submenu-bar li.menu-item-delimiter a, .gc-account-leftbar .gc-account-user-submenu-bar li.menu-item-help a {
    border-top: 1px solid #cea661;
}
.mark-viewed-all {
    color: wheat;
}
/* БОКОВОЕ МЕНЮ - конец */