/* загружаем шрифты, если ранее не загружали */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');


:root {
  --bgr-color1: #3e635c; 
  --bgr-color2: #cfcfcf;
  --bgr-color3: #4a9e8d;
  --bgr-color4: #ffffff; 
  --font1:  'Montserrat', sans-serif;
  --font2: 'Oswald', sans-serif;

       
  --i-width: 50px;
  --i-height: 50px;
  --i-width2: 24px;
  --i-height2: 24px;
  --i-width3: 33px;
  --i-height3: 33px;
  --b-radius: 8px;
  --b-radius-2: 6px;
  --shadow: 0px 5px 8px rgba(0, 0, 0, 0.05);
  
  --avatar: url('https://fs.getcourse.ru/fileservice/file/download/a/612234/sc/325/h/cfef50f84065adbdb130363bc3f54cc5.png');
  --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');
  --item-search: url('https://fs.getcourse.ru/fileservice/file/download/a/612234/sc/235/h/9613fddd1e1a41c3680f036d0aba78f9.png');
    
  --filter1: invert(32%) sepia(0%) saturate(245%) hue-rotate(174deg) brightness(95%) contrast(90%);
  --filter2: invert(100%) sepia(0%) saturate(7500%) hue-rotate(215deg) brightness(104%) contrast(99%);
} 


/* подключаем шрифты */ 
body {
    font-family: var(--font1)!important;
    font-weight: 400; 
}

/* элементы с декоративным написанием */ 
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font1)!important;
    font-weight: 600; 
}

.gc-account-leftbar {
    background-color: var(--bgr-color1);
}


.gc-account-leftbar .gc-account-user-menu {
    background: transparent;
}

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

.gc-account-leftbar .gc-account-user-menu li a {
    background: transparent;
    transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-menu li:hover a {
    background: var(--bgr-color2)!important;
}

.gc-account-leftbar .gc-account-user-menu li.selected a,
.gc-account-leftbar .gc-account-user-menu li.active a {
    background: var(--bgr-color3)!important;
}

li.menu-item-profile .menu-item-icon {
    border-radius: 100px;
    width: 52px;
    height: 52px;
    border: 3px solid var(--bgr-color3);
}

.gc-account-leftbar .gc-account-user-menu li a {
    display: block;
    width: var(--i-width);
    height: var(--i-height);
    background: var(--bgr-color2);
    box-shadow: var(--shadow);
    border-radius: var(--b-radius);
    margin: 10px auto;
    transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-menu li:hover a {
    background: var(--bgr-color3);
}

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

.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a {
    height: var(--i-height)!important;
}

li.menu-item-notifications_button_small a img,
li.menu-item-cms a img,
li.menu-item-teach a img,
li.menu-item-user a img,
li.menu-item-tasks a img,
li.menu-item-notifications a img,
li.menu-item-sales a img,
li.menu-item-search a img,
li.menu-item-chatium a img {
    display: none;
}

li.menu-item-notifications_button_small a::before,
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-search a::before,
li.menu-item.menu-item-chatium a::before {  
    content: '';

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: var(--i-width2);
    height: var(--i-height2);
    filter: var(--filter1);
}

li.menu-item-notifications_button_small a::before {background-image: var(--button-small);}
li.menu-item.menu-item-cms a::before {background-image: var(--item-cms);}
li.menu-item.menu-item-teach a::before {background-image: var(--item-teach);}
li.menu-item.menu-item-user a::before {background-image: var(--item-user);}
li.menu-item.menu-item-tasks a::before {background-image: var(--item-tasks);}
li.menu-item.menu-item-notifications a::before {background-image: var(--item-notif);}
li.menu-item.menu-item-sales a::before {background-image: var(--item-sales);}
li.menu-item.menu-item-chatium a::before {background-image: var(--item-chatium);}
li.menu-item.menu-item-search a::before {background-image: var(--item-search);}
    
.gc-account-user-menu li a:hover::before,
.gc-account-user-menu li.active a::before,
.gc-account-user-menu li.selected a::before {
    filter: var(--filter2);
}    

li.menu-item-profile .menu-item-icon {
    width: var(--i-width);
    height: var(--i-height);
    border-radius: var(--b-radius);
    border: 3px solid var(--bgr-color2);
}

.gc-account-user-menu li.menu-item-profile a img {
    display: none;
}

.gc-account-user-menu li.menu-item-profile a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: var(--i-width3);
    height: var(--i-height3);
    background-image: var(--avatar);
}

.gc-account-user-menu li.menu-item-profile a img:not([src="/public/img/default_profile_50.png"]) {
    position: relative;
    z-index: 0;
    display: block;
    margin: 0 auto;
}

.sub-icon img.user-profile-image {
    border-radius: var(--b-radius);
    border: 2px solid var(--bgr-color1);
}

.gc-account-leftbar .gc-account-user-submenu-bar {
background: var(--bgr-color2);
}

.gc-account-user-submenu-bar h3 {
    font-size: 26px;
    font-weight: 500;
    color: var(--bgr-color1);
    border-bottom: 1px solid var(--bgr-color1);
    padding-bottom: 20px;
    padding-left: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    color: var(--bgr-color1);
    transition: all 0.3s;
}

.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    background-color: transparent;
    color: var(--bgr-color4);
}

.gc-account-leftbar li.menu-item-notifications_button_small .notify-count {
    z-index: 2;
    font-size: 0.8em!important;
    font-weight: 700;
    text-align: center;
    color: var(--bgr-color4);
    background: #a0a3a3;
    border-radius: 6px;
}

.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count,
.gc-account-leftbar li.menu-item-teach .notify-count,
.gc-account-leftbar li.menu-item.menu-item-sales .notify-count {
    z-index: 2;
    font-size: 0.8em!important;
    font-weight: 700;
    text-align: center;
    color: var(--bgr-color4);
    background: #a0a3a3;
    border-radius: 6px;
    position: absolute;
    bottom: 38px;
    right: 4px;
    padding: 5px 0px;
}

.gc-account-leftbar .gc-account-user-submenu li .notify-count {
    z-index: 2;
    font-weight: 700;
    text-align: center;
    color: var(--bgr-color4);
    background: #4a9e8d;
    border-radius: 6px;
}

.user-balance {
    color: var(--bgr-color1);
    margin-top: 20px!important;
    margin-bottom: 10px;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small {
    background: var(--bgr-color2);
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .header {
    background: var(--bgr-color1);
    color: var(--bgr-color4);
    margin-top: 0;
    padding: 20px;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group {
    background-color: var(--bgr-color4);
    color: #252422;
    transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group:hover {
    background-color: transparent;
    color: #252422;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
    background-color: transparent;
    color: #c3c3c3;
    transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed:hover {
    color: #252422;
}

@media (max-width: 768px) {
    .gc-account-leftbar.expanded {
        background: var(--bgr-color1);
    }

    .gc-account-leftbar .toggle-link {
        background: var(--bgr-color3);
    }
 
    .gc-page-nav-items-menu a {
        color: var(--bgr-color4);
        background: var(--bgr-color3);
    }
    
@media (max-height: 399px) and (orientation: landscape) {
    .gc-account-leftbar .gc-account-user-submenu-bar {
        background-image: none;
    }
    
}