@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Space+Grotesk:wght@300..700&display=swap');

:root {
    --colorYellow: #FFBC20;
	--colorYellowHover: #FFCA4E;
    --colorBlack: #000000;
	--colorWhite: #FFFFFF;
	--colorBlackHover: #404040;
    --colorGray: #171A1F;
    --colorGrayText: #A3A3A3;
    --colobg: #D7D7D7; /* светло-светлосерый для фона */
    --colorLightGray: #F8F8F8;/* почти белый для подложки */
	--colorLightGrayHover: #EFEFEF;
	
	--colorGrayBg: #f5f5f5;
	
	--colorTextWhiteBg: #A3A3A3;
	--colorTextWhiteBgHover: #5B5B5B;

	--gradientGray: linear-gradient(242.41deg, #D7D7D7 51.37%, #B4B4B4 93.73%);
	--gradientYellow: linear-gradient(235.82deg, #FFBC20 52.49%, #E0A212 100%);
	
	--fontFamilyMain: "Montserrat", sans-serif;
	--fontWeight: 400;
	
	--fontFamilyMenu: "Space Grotesk", sans-serif;
	
	--fontFamilyNunito: "Nunito Sans", sans-serif;
	
	--menuBoxShadow: 4px 4px 25px 0px #00000014; /* box-shadow */
	--menuOpenedBoxShadow: 4px 4px 10px 0px #0000000D; /* box-shadow */
}

html, body, head {
	font-family: var(--fontFamilyMain);
	font-weight: var(--fontWeight);
	font-optical-sizing: auto;
	font-style: normal;
	background-color: var(--colorGrayBg);
}

.gc-fade-wrapper .gc-fade {left: 0; background: white; opacity: 0.7;}

.block-style-popover {left: 120px !important;}

.with-left-menu .gc-into-main-content,
.v-dialog--fullscreen, .v-dialog__content {left: 120px;}
.v-application,
.gc-main-content.with-left-menu {
    margin-left: 120px;
}

.custom-menu .gc-account-leftbar, .custom-menu .gc-account-leftbar .gc-account-user-menu, .custom-menu .gc-account-leftbar .toggle-link {
    background: transparent !important;
}

.custom-menu .gc-account-leftbar,
.gc-account-leftbar {
	background: transparent !important;
	width: 90px;
	left: 20px;
	padding-top: 20px;
}

.gc-account-leftbar .gc-account-user-menu li {
	margin-bottom: 11px;
}


.gc-account-leftbar .gc-account-user-menu li,
.gc-account-leftbar .gc-account-user-menu li.active,
.gc-account-leftbar .gc-account-user-menu li.selected {
	background: var(--colorWhite);
	box-shadow: var(--menuBoxShadow);
	border-radius: 10px;
}

/* выбранное - пока отключил, не работает на активном */
/*
.gc-account-leftbar .gc-account-user-menu li.selected {
	width: 100px;
	padding-right:  10px;
	border-radius: 10px 0 0 10px;
}
*/

.gc-account-leftbar .menu-item-label,
.gc-account-leftbar .gc-account-user-menu li a:after {
	color: var(--colorBlack) !important;
	
	font-family: var(--fontFamilyMenu);
	font-size: 11px;
	font-weight: var(--fontWeight);
	line-height: 120%;
	letter-spacing: 0;
	text-align: center;
}

.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a,
.gc-account-leftbar .gc-account-user-menu li a {
	background-color: transparent !important;
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
    flex-direction: column;
    justify-content: center;
	gap: 5px;
}

/* субменю */
.gc-account-leftbar .gc-account-user-submenu-bar {
    height: auto;
	left: 100px;
	top: 20px;
	background-color: var(--colorWhite) !important;
	box-shadow: var(--menuOpenedBoxShadow);
	border-radius: 10px;
	padding: 20px;
	z-index: 10;
}
.gc-account-user-submenu-bar h3 {
	font-family: var(--fontFamilyMenu);
	font-weight: var(--fontWeight);
	font-size: 16px;
	line-height: 110%;
	letter-spacing: 0.98;

    padding: 0 15px;
    margin: 0 0 10px 0;
    color: #313131 !important;
}

.gc-account-user-submenu-bar .gc-account-user-submenu li {}
.gc-account-user-submenu-bar .gc-account-user-submenu li:first-child {}

.gc-account-user-submenu-bar .gc-account-user-submenu li a {
	color: var(--colorBlack) !important;
	text-transform: none;
	font-weight: var(--fontWeight);
	font-size: 14px;
	line-height: 110%;
	letter-spacing: 0.98;
	
	padding: 10px 15px;
	border-radius: 7px;
}

.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
	background-color: var(--colorYellow) !important;
}
/* субменю  конец */

/* связь субменю с левым меню */
.gc-account-leftbar .gc-account-user-submenu-bar:after {
    position: absolute;
    content: '';
    height: 81px;
    width: 20px;
    left: -20px;
    top: 20px;
    background: var(--colorWhite);
}

.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-profile {top: 0;}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications_button_small {top: 92px; overflow: visible; max-height: 75vh; display: flex; flex-direction: column;}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications_button_small > div:not(.header) {overflow: auto; height: 100%;}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-cms {top: 244.5px; transform: translatey(-50%);}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-teach {top: 336.5px; transform: translatey(-50%);}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-user {top: 428.5px; transform: translatey(-50%);}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-tasks {top: 519.5px; transform: translatey(-50%);}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications {top: 256px; bottom: unset !important;}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-sales {top: 744.5px; transform: translateY(-100%) translateY(20px); bottom: unset !important;}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-chatium {top: unset; bottom: 100% !important; transform: translatey(857px);}

.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-cms:after {top: 50%; transform: translatey(-50%);}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-teach:after {top: 50%; transform: translatey(-50%);}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-user:after {top: 50%; transform: translatey(-50%);}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-tasks:after {top: 50%; transform: translatey(-50%);}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-notifications:after {top: unset; bottom: 40px;}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-sales:after {top: unset; bottom: 20px;}
.gc-account-leftbar .gc-account-user-submenu-bar.gc-account-user-submenu-bar-chatium:after {top: unset; bottom: 20px;}

/* счетчики */
.gc-account-leftbar .notify-count {
    bottom: unset !important;
    right: unset !important;
    top: 50% !important;
    left: 50% !important;
	transform: translate(0, -30px);
	
	width: 22px;
	height: 22px;

	font-family: var(--fontFamilyNunito);
	font-weight: var(--fontWeight);
	font-style: Regular;
	font-size: 11px;
	line-height: 22px !important;
	leading-trim: none;
	letter-spacing: 0;
	color: var(--colorBlack);
	
	text-align: center;
	padding: 0;
	
	background: var(--colorYellow) !important;
	border-radius: 50% !important;
}

.gc-account-user-submenu .notify-count {
	transform: translate(-50%, -50%);
    left: 100% !important;
}

/* новые картинки в меню */
.gc-account-leftbar .gc-account-user-menu li:not(.menu-item-profile) a img {display: none;}
.gc-account-leftbar .gc-account-user-menu li.menu-item-profile a img {width: 43px; height: 43px; border-radius: 50%;}
.gc-account-leftbar .gc-account-user-menu li:not(.menu-item-profile) a:before {
	display: block;
	content: '';
	width: 100%;
	height: 20px;
	background-position: center center;
	background-size: auto 20px;
	background-repeat: no-repeat;
}

.gc-account-leftbar .gc-account-user-menu li.menu-item-cms a:before {
	background-image: url("/fileservice/file/download/a/848946/sc/151/h/44c6f0c970b9ed08223df54e382c26a9.png");
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-teach a:before {
	background-image: url("/fileservice/file/download/a/848946/sc/195/h/a5593f6d3ffc4d337fc1228d06d0b816.png");
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a:before {
	background-image: url("/fileservice/file/download/a/848946/sc/96/h/7e3b67a3f20236e36d03099eafe05734.png");
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a:after {
	display: block;
	height: auto;
	width: 100%;
	content: 'Уведомления';
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-user a:before {
	background-image: url("/fileservice/file/download/a/848946/sc/125/h/fc6af8652f34f6d5ba94189486902b96.png");
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-tasks a:before {
	background-image: url("/fileservice/file/download/a/848946/sc/124/h/4020935844d60bb3081cead7e06cba24.png");
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications a:before {
	background-image: url("/fileservice/file/download/a/848946/sc/191/h/8c2d4a1e14910ad7a9b8bc44e85052e9.png");
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-sales a:before {
	background-image: url("/fileservice/file/download/a/848946/sc/204/h/f4f64dce66f61527e9a931534a5ea2d5.png");
}
.gc-account-leftbar .gc-account-user-menu li.menu-item-chatium a:before {
	background-image: url("/fileservice/file/download/a/848946/sc/96/h/c10cd850f977c381cba33882a221f729.png");
}

/* белый блок */
.white-bg-block {
    background: var(--colorWhite);
    border-radius: 20px;
    padding: 30px !important;
}
.white-bg-block h2 {
    color: var(--colorBlack);
    font-size: 20px;
    line-height: 110%;
    margin-bottom: 30px;
    position: relative;
}
/* общее для кнопок */
.button-link {
    display: block;
    width: 100%;
    font-weight: var(--fontWeight);
    font-size: 14px;
    text-decoration: underline;
    color: var(--colorTextWhiteBg);
    border: 0;
    text-align: left;
    position: relative;
    padding: 0;
    background-color: var(--colorWhite);
}

.button-link:hover {
    color: var(--colorTextWhiteBgHover);
    text-decoration: none;
}

button.button-gray, button.button-black {
    display: block;
    width: 100%;
    font-weight: var(--fontWeight);
    font-size: 16px;
    line-height: 25px;
    height: 45px;
    border-radius: 23px;
    border: 0;
    text-align: left;
    position: relative;
    padding: 10px 10px 10px 40px;
}

button.button-gray:before, button.button-gray:after,
button.button-black:before, button.button-black:after{
    position: absolute;
    content: '';
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
button.button-gray:before,
button.button-black:before {
    width: 25px;
    height: 25px;
    left: 10px;
    top: 10px;
    background-color: var(--colorWhite);
    border-radius: 50%;
}

button.button-gray:after,
button.button-black:after {
    width: 15px;
    height: 15px;
    right: 15px;
    top: 17.5px;
}

/* черные кнопки */
button.button-black {
    color: var(--colorWhite);
    background-color: var(--colorBlack);
}

button.button-black:hover {
    background-color: var(--colorBlackHover);
}

button.button-black:after {
    background-image: url("//fs.getcourse.ru/fileservice/file/download/a/848946/sc/147/h/ad37f8f2fec2f3d447426c65453d2132.png");
}


/* серые кнопки */
button.button-gray {
    color: var(--colorBlack);
    background-color: var(--colorLightGray);
}

button.button-gray:hover {
    background-color: var(--colorLightGrayHover);
}

button.button-gray:after {
    background-image: url("//fs.getcourse.ru/fileservice/file/download/a/848946/sc/205/h/d36d3281f81e657450cfacf6728fb82c.png");
}

.buttons-container {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.white-bg-block h2 .balance_virtual {
    display: block;
    position: absolute;
    padding-right: 40px;
    right: 14px;
    top: 50%;
    transform: translatey(-50%);
}

.white-bg-block h2 .balance_virtual:after {
    position: absolute;
    content: '';
    right: 0;
    top: 50%;
    transform: translatey(-50%);
    background-color: var(--colorYellow);
    width: 32px;
    height: 32px;
    background-image: url("//fs.getcourse.ru/fileservice/file/download/a/848946/sc/171/h/d356043c1b2d5d240cfccc02f620493e.png");
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .gc-main-content.with-left-menu {margin-left: 0 !important;}

    .gc-account-leftbar .gc-account-user-menu {
        margin-bottom: 200px;
        width: 100% !important;
        height: 100%;
    }
}

@media (max-width: 480px) {
	.white-bg-block {padding: 15px !important;}
}