@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
  font-family: "TRIAL_FactorA-Bold"; 
  src: url('/fileservice/file/download/h/e923119c0ca5f7812cbdb19d90c73288.otf/a/344477/sc/147') format('opentype'),
       url('/fileservice/file/download/h/ae5c8ad43d7ca37438bf7418567f4f0a.woff/a/259457/sc/249') format('woff');
}


@font-face {
  font-family: "TRIAL_FactorA-Medium"; 
  src: url('/fileservice/file/download/h/9e387d1024f79cea96cd024040134190.otf/a/344477/sc/508') format('opentype'),
       url('/fileservice/file/download/h/7eb3d27afedb041d209fb7628dd8c17f.woff/a/259457/sc/340') format('woff');
}

@font-face {
  font-family: "TRIAL_FactorA-Regular"; 
  src: url('/fileservice/file/download/h/08b2a52d393572db73dc2e6065b37a0f.otf/a/344477/sc/135') format('opentype'),
       url('/fileservice/file/download/h/e7f31486a7b51423cd56a53e2ef07ff5.woff/a/259457/sc/198') format('woff');
}


@font-face {
  font-family: "sfuidisplay_bold"; 
  src: url('/fileservice/file/download/h/d257cc561af6c78a6b8cf4cf42ebe35d.otf/a/344477/sc/392') format('opentype'),
       url('/fileservice/file/download/h/c174a8447a9626afa7d233b8f7c7342e.woff/a/259457/sc/153') format('woff');
}

@font-face {
  font-family: "sf-ui-display-medium"; 
  src: url('/fileservice/file/download/h/d75f0830af02cc5939d3830dc18bb6d2.otf/a/344477/sc/188') format('opentype'),
       url('/fileservice/file/download/h/ce0921c55e10f556d7d3cec.woff/a/942812947/sc/104') format('woff');
}

@font-face {
  font-family: "sf-ui-display-semibold"; 
  src: url('/fileservice/file/download/h/3649b5fe44ec544bf2b7080e730dd023.otf/a/344477/sc/140') format('opentype'),
       url('/fileservice/file/download/h/d397d6820ae6f5a57e9a4f04e448effc.woff/a/344477/sc/309') format('woff');
}

:root{
    --f-bold:"TRIAL_FactorA-Bold", "Roboto" !important;
    --f-medium:"TRIAL_FactorA-Medium", "Roboto" !important;
    --f-regular:"TRIAL_FactorA-Regular", "Roboto" !important;
    --f-sf-bold: "sfuidisplay_bold", "Roboto" !important;
    --f-sf-medium: "sf-ui-display-medium", "Roboto" !important;
    --f-sf-semibold: "sf-ui-display-semibold", "Roboto" !important;
    --black: #353535;
    --white: #fff;
    --grey1: #DADADA;
     --grey2: #505050;
    --grey3: #F5F5F5;
    --radius1: 20px;
     --radius2: 16px;
    --shadow: 0px 0px 16px 0px rgba(53, 53, 53, 0.10);
    --yellow: linear-gradient(95deg, #FFD12D 8.34%, #FFD606 100.96%);
    --transform: translatey(-3px) scale(1.02);
    /* фильтр бордовый цвет */
  --ikonka1: invert(18%) sepia(1%) saturate(0%) hue-rotate(175deg) brightness(100%) contrast(92%);
    /* фильтр белый цвет */
  --ikonka2: invert(99%) sepia(86%) saturate(266%) hue-rotate(259deg) brightness(115%) contrast(100%);
    --radius-notif: 50%;    
  --button-small: url('https://fs.getcourse.ru/fileservice/file/download/a/344477/sc/188/h/e059a148d4b318a5d2f4b22f44cfc159.png');
    --item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/344477/sc/295/h/32ef74240597ed22dbc6ff95af2efb05.png');
    --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/344477/sc/205/h/4556c5d2ea51974db45bca7d1bf97459.png');
    --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/344477/sc/105/h/8273d2d0570dbe9695065b8a51f29df0.png');
    --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/344477/sc/8/h/b9176266a4b053d4f0d9d5399465071b.png');
    --item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/344477/sc/432/h/26a5befb1c3ebf0b528c8dff84bcd482.png');
    --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/344477/sc/150/h/7ba462b41283bb3267fe62e15f99c6c4.png');
    --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/344477/sc/192/h/8e7a9a5106aa58f883b15d4320fcbe53.png');
}



/* Левая панель */
html .gc-account-leftbar {
    background: transparent;
    width: 72px;
}

/*  Контейнер с меню  */
.gc-account-leftbar .gc-account-user-menu { 
    height: 100%;
    background: var(--black);
    border-radius: 0px 16px 16px 0px;
}


.gc-account-leftbar .gc-account-user-menu li {
    border-bottom:  none;    
}


html .menu-item-profile .menu-item-icon { 
    border-radius: 100px;
    width: 50px;
    border: 2px solid var(--black);
    margin: 10px 12px 10px;
    position: relative;
}

.custom-menu .gc-account-leftbar .gc-account-user-menu li:not(.menu-item-notifications_button_small):not(.menu-item-profile) img {
    display: none;
}


li.menu-item.menu-item-profile a {
    background: transparent!important;
    transition: all 0.3s;
}


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: 15px auto;  
    width: 50px;
    height: 50px;
    border-radius: 100px;   
    transition: all 0.3s;
}

li.menu-item.menu-item-cms a:hover,
li.menu-item.menu-item-teach a:hover,
li.menu-item.menu-item-user a:hover,
li.menu-item.menu-item-tasks a:hover,
li.menu-item.menu-item-notifications a:hover,
li.menu-item.menu-item-sales a:hover,
li.menu-item.menu-item-chatium a:hover {
     background: var(--grey1)!important;
}


.gc-account-leftbar .gc-account-user-menu li{
      height: 50px;
}

li.menu-item.menu-item-notifications_button_small a{
    display: block;
    background: transparent;
     border-radius: 100px;  
    margin: 20px auto 15px;  
    width: 50px;
    height: 50px!important;
   transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-menu li.active a, 
.gc-account-leftbar .gc-account-user-menu li.selected a {
    border-radius: 100px;  
    width: 50px;
    height: 50px; 
    
}

li.menu-item.menu-item-notifications_button_small.active a, 
li.menu-item.menu-item-notifications_button_small.selected a{
    width: 50px;
    height: 50px!important;
   background: var(--grey1)!important;
  border-radius: 100px;  
}

li.menu-item.menu-item-notifications_button_small:hover a{
    width: 50px;
    height: 50px!important; 
   background: var(--grey1)!important;
  border-radius: 100px;  
}


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: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 30px;
    height: 30px;
    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: ''; 
    display: block;
    width: 30px;
    height: 24px;
    position: absolute;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%); 
    background-image: var(--button-small);
    background-size: contain; 
    background-repeat: no-repeat; 
    filter: var(--ikonka2);
}

.custom-menu .gc-account-leftbar
.gc-account-user-menu li.active a,
.custom-menu .gc-account-leftbar
.gc-account-user-menu li.selected a{
    background: var(--grey1);
  
}

li.menu-item.selected a::after,
li.menu-item.active a::after {
  filter: var(--ikonka1);
 }


li.menu-item:hover a::after {
    filter: var(--ikonka1);
 
}


.gc-account-leftbar .notify-count {
    z-index: 2;
    width: 20px;
    height: 20px; 
    font-family: var(--f-sf-bold)!important;
    font-size: 0.8em!important;
    font-weight: bold;
    text-align: center;
    color: var(--black);
    background-image: var(--yellow)!important;
}

.gc-account-user-submenu-bar H3 {
    display: none;
}


/* Подменю */
html .gc-account-leftbar .gc-account-user-submenu-bar {
    /* размеры */
    height: 100%;
    width: 250px; 
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    /* контент будет выровнен по верхнему краю */
    justify-content: flex-start;
    
}

/* Контент подменю со списком подразделов */
ul.gc-account-user-submenu {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 5px 4px 7px 0px rgba(0, 0, 0, 0.25);
    padding: 20px 5px 20px 5px!important;
    margin-left: 5px!important;
}

/* Контент подменю сдвигаем с верхнего края на нужную высоту */
/* Контент подменю Сайт */
.gc-account-user-submenu-bar-cms .gc-account-user-submenu {
    margin-top: 125px!important;
}

/* Контент подменю Обучение */
.gc-account-user-submenu-bar-teach .gc-account-user-submenu {
    /* для администратора */
    /* margin-top: 217px!important; */
    /* для учеников */
    margin-top: 190px!important;
}

/* Контент подменю Пользователи */
.gc-account-user-submenu-bar-user .gc-account-user-submenu {
    margin-top: 250px!important;
}

/* Контент подменю Задачи */
.gc-account-user-submenu-bar-tasks .gc-account-user-submenu {
    margin-top: 320px!important;
}

/* Контент подменю Сообщения */
.gc-account-user-submenu-bar-notifications .gc-account-user-submenu {
    margin-top: 270px!important;
}

/* Контент подменю Продажи и Приложение */
.gc-account-user-submenu-bar-sales .gc-account-user-submenu {
    margin-top: 300px!important;
}
.gc-account-user-submenu-bar-chatium  .gc-account-user-submenu {
   margin-top: 330px!important;
}


/* Затемнение экрана */
.gc-fade-wrapper .gc-fade {
    /* сдвигаем в верхний левый угол */
    top: 0px;
    left: 0px;
    /* затемнение - меньше */
    opacity: 0.4;
}
/* Разделы в подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    font-family: var(--f-sf-semibold);
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    transition: all 0.3s;
}

/* Разделы в подменю при наведении */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    /* цвет */
    color: var(--black);
    /* заливка фона */
    background: Var(--grey1);
    /* радиус скругления */
    border-radius: 8px;
}
/* Счетчик уведомлений в раскрывающемся меню - подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li .notify-count {
    font-family: var(--f-sf-bold);
    font-size: 0.8em!important;
    bottom: 9px;
    right: 10px;    
}

/* Контент подменю раздела Уведомления */
.gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications_button_small {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    /* ширина и высота - под количество контента */
    width: 400px!important;
    height: auto!important;
    background: var(--white)!important;
    border-radius: 16px;
    padding: 20px 5px 20px 5px!important;
    margin-left: 5px!important;
}

/* Мобильная адаптация */ 
@media (max-width: 768px) {
    /* Боковое меню */ 
  .gc-account-leftbar .gc-account-user-menu {
    height: 100%;
  }
    /* Нижняя плашки меню */ 
    .gc-account-leftbar .toggle-link, 
    .gc-page-nav-items-menu a {
       background: var(--black);
        color: var(--white)!important;
    }
    .toggler-item{
        font-family: var(--f-sf-bold);
        font-size: 16px;}
    
    .gc-page-nav-items-menu a{
        padding-left: 0px;
        line-height: 170%;
        
    }
    /* Иконка-бургер */ 
    .gc-account-leftbar .without-icon img {
       filter: var(--ikonka1);
    }
    /* Контент подменю Продажи */
    .gc-account-user-submenu-bar-sales .gc-account-user-submenu {
    }
    /* Контент подменю Приложение */
    .gc-account-user-submenu-bar-chatium  .gc-account-user-submenu {
        margin-top: 303px!important;
    }
}
@media(max-width: 480px){
    .gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications_button_small{
        width: auto!important;
    }
}
@media (max-width: 360px) {
    html .gc-account-leftbar .gc-account-user-submenu-bar {
        width: 210px;
    }
    /* подменю со списком подразделов */
    ul.gc-account-user-submenu {    }
    /* Разделы в раскрывающемся меню */
    .gc-account-user-submenu-bar .gc-account-user-submenu li a {
        font-size: 12px;
    }
    /* Контент подменю Сообщения */
    .gc-account-user-submenu-bar-notifications .gc-account-user-submenu {
        margin-top: 200px!important;
    }
    /* Контент подменю Продажи */
    .gc-account-user-submenu-bar-sales .gc-account-user-submenu {
        margin-top: 180px!important;
    }
    /* Контент подменю Приложение */
    .gc-account-user-submenu-bar-chatium  .gc-account-user-submenu {
        margin-top: 190px!important;
    }
}