html,
body {
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    touch-action: none;
    display: block;
    height: 100%;
    min-height: 100%;
    min-height: -webkit-fill-available;
}
/* -webkit-fill-available changes while the browser panels appear and hide, and the page jumps
with it; the dynamic screen height keeps the same value all the time */
@supports (min-height: 100dvh) {
    html,
    body {
        min-height: 100dvh;
    }
}
@media (min-width: 992px) {
    html, body {
        height: auto;
    }
}
body {
    background: var(--blue-200);
    color: var(--gray-950);
    font-size: 15px;
    line-height: 20px;
    font-family: var(--font-main);
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    transform-origin: center center;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
body:not(.body_registration_enter_phone):not(.body_registration_enter_sms_code):not(.body_make_security_code):not(.body_registration_enter_security_code):not(.body_registration_forgot_security_code_enter_phone) {
    color: var(--gray-950);
}
body.body_home,
body.body_schedule,
body.body_chats,
body.body_settings,
body.body_rules,
body.body_services,
body.body_personal_data,
body.body_change_security_code,
body.body_financial_statistics {
    background: var(--background-light);
}
body.body_profile {
    background: var(--white);
}
body.body_lesson_details,
body.body_class_schedule,
body.body_notification,
body.body_student_requests {
    background: var(--gray-50);
}
/* Page of the height of one screen: the document itself must not scroll, the open panel does */
body.body_lesson_details {
    overflow: hidden;
}
/* Lock page scroll behind the additional menu overlay while it is open (functions.js) — the document
itself scrolls on pages without body_auto_height, not .content, so lock html/body directly */
html.additional_menu_open,
body.additional_menu_open {
    overflow: hidden;
}
#main {
    width: 100%;
    max-width: 1000px;
    min-height: 100vh;
    display: none;
    position: relative;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}
/* Page must not be taller than the screen of the phone: with 100vh the browser panels are not
counted, the page gets a scroll and the fixed bottom menu leaves the visible area */
@supports (min-height: 100dvh) {
    #main {
        min-height: 100dvh;
    }
}
/*body:not(.body_registration_enter_phone) #main,*/
/*body:not(.body_registration_enter_sms_code) #main,*/
/*body:not(.body_make_security_code) #main,*/
/*body:not(.body_registration_enter_security_code) #main,*/
/*body:not(.body_registration_forgot_security_code_enter_phone) #main {*/
/*    min-height: 100%;*/
/*}*/
/* Height of the step follows --vh, which main.js keeps equal to the visual viewport. The keyboard
of the phone shrinks that viewport, so the step shrinks with it and the heading stays on the
screen — exactly as the cabinet of the parent behaves. A dynamic unit (100dvh) must not be put
back here: it does not count the keyboard and the page would scroll instead of shrinking */
body.body_auto_height #main {
    height: calc(var(--vh, 1vh) * 100);
    /* Keyboard of the phone shrinks the viewport: min-height of 100vh would keep the step
    taller than the screen, the page would scroll and the background would stay shifted */
    min-height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}
#main {
    margin: 0 auto;
}
#main.visible {
    display: flex;
}
.main_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(0px);
    transition: all 1s ease;
    opacity: 0;
    visibility: hidden;
    /* Layer of the dim never changes: z-index cannot be animated, and dropping it on closing
       would return the header of the page at once while the dim is still fading out */
    z-index: 2;
}
.main_overlay.visible {
    opacity: 1;
    visibility: visible;
    background: rgba(10, 10, 10, 0.48);
    backdrop-filter: blur(5px);
}
/* Cabinet page shell — fixed header, scrolling content and bottom tab menu of /home/ and /schedule/ */
.page_header {
    position: fixed;
    height: 76px;
    width: 100%;
    max-width: 1000px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--background-light);
    z-index: 2;
}
.page_header_left,
.page_header_right {
    display: inline-flex;
    min-width: 45px;
}
.page_header_center {
    display: inline-flex;
}
.page_header_title {
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
}

.homepage_main {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    min-height: 100vh;
    padding-top: 90px;
}
.homepage_content {
    overflow-y: auto;
    padding: 0 20px;
}
/* Pages with the bottom menu are split into a column of the height of one screen: the menu is the
last row of the page, not a floating layer, so the browser panels cannot drag it while the page
opens. The list of the page scrolls inside itself */
@supports (height: 100dvh) {
    .homepage_main {
        min-height: 100dvh;
    }
    body.body_home,
    body.body_schedule,
    body.body_chats,
    body.body_profile {
        display: flex;
        flex-direction: column;
        height: var(--layout-h, 100dvh);
        overflow: hidden;
    }
    body.body_home .homepage_main,
    body.body_schedule .homepage_main,
    body.body_chats .homepage_main,
    body.body_profile .homepage_main {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow-y: auto;
    }
    body.body_home .homepage_footer,
    body.body_schedule .homepage_footer,
    body.body_chats .homepage_footer,
    body.body_profile .homepage_footer {
        position: static;
        flex: 0 0 auto;
        left: auto;
        bottom: auto;
        transform: none;
        margin: 0 auto;
    }
}

/* Bottom tab menu */
.homepage_footer {
    position: fixed;
    background: var(--white);
    height: 88px;
    width: 100%;
    max-width: 1000px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 5;
}
.homepage_footer_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    min-width: 72px;
    gap: 6px;
}
.homepage_footer_icon {
    height: 32px;
    display: flex;
    border-radius: 32px;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* Unread messages marker of the chats tab */
.homepage_footer_dot {
    position: absolute;
    top: 2px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: var(--red-500);
}
.homepage_footer_btn_active .homepage_footer_icon {
    background: var(--blue-100);
}
.homepage_footer_btn_active .fill_svg svg path {
    fill: var(--blue-600);
}
.homepage_footer_btn_active .stroke_svg svg path {
    stroke: var(--blue-600);
}
.homepage_footer_text {
    color: var(--gray-600);
    font-weight: 600;
    font-size: 10px;
    line-height: 15px;
}
.content {
    padding: 70px 20px 32px;
    position: relative; /* android ok */
    width: 100%;
    -webkit-overflow-scrolling: touch;
    /*overscroll-behavior: none;*/
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.page_with_footer .content {
    padding-bottom: 90px;
}
body.body_auto_height .content {
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}
.content_flex {
    display: flex;
    flex-shrink: 0;
}
.content.content_transition {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.content_left_position {
    transform: translateX(-100%);
}
.content_flex_columns {
    flex-direction: column;
}
.content_flex_columns_fullpage {
    justify-content: space-between;
    color: var(--gray-950);
}
/* Pattern of the login background. The file is one black silhouette with an alpha channel,
shared by every EdSpace cabinet, so it is masked and not drawn: the shapes carry their own
colour instead of whatever a blend mode makes of a black file. The silhouette is a @2x asset
(956x1186), hence the 478px CSS width — the same scale the parent PWA draws it at.

The design adds the shapes with Plus lighter, that is white light poured over the page. The
parent PWA ships that blend already baked into its own file, and measuring it gives the amount:
shapes #daff9d over a #d0f993 page, exactly +10/255 on every channel (green clamps at 255).
This layer sits at z-index -1 over nothing but the flat page colour, so the blend has one
possible outcome and is written out as that colour: --blue-200 #b4e1f6 + 10 = #beebff.
Plain alpha compositing would not do — over a light page it lightens far less than
Plus lighter does — and mix-blend-mode: plus-lighter would hang the result on how a browser treats the canvas
background as a blending backdrop, which is exactly the trap on a negative z-index. */
.content_bg_success_with_icon {
    background-color: #beebff;
    -webkit-mask-image: url('/images/black_bg_logo.png');
    mask-image: url('/images/black_bg_logo.png');
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: 478px auto;
    mask-size: 478px auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    z-index: -1;
}
/* Background of the registration is drawn once by the page shell: it covers the whole screen,
stays in place while the keyboard is open and does not slide together with the step */
.registration_bg {
    position: fixed;
    height: 100vh;
    height: 100dvh;
    max-height: none;
}
#main .content_bg_success_with_icon {
    display: none;
}
.all_pages_main_top {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: -47px 0 0;
}
.all_pages_main_title {
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: var(--gray-950);
}
.blue_info {
    border: 1px solid var(--blue-500);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--blue-50);
    margin: 24px 0 0;
}
.blue_info .blue_info_top {
    display: flex;
    gap: 12px;
}
.blue_info .blue_info_title {
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: var(--gray-950);
    margin-bottom: 5px;
}
.blue_info .blue_info_text {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 5px;
}
.blue_info .blue_info_btn {
    height: 36px;
    margin: 12px 0 0;
    text-transform: none;
}
.blue_info .wf_btn_white {
    color: var(--gray-950);
}
.blue_info .blue_info_btn_wrp {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.blue_info .blue_info_btn_half {
    width: 47%;
    font-size: 12px;
}
@media (max-width: 430px) {
    .blue_info .blue_info_btn_half {
        width: 100%;
    }
}
.success-wrp {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.content_success .footer-info-success {
    background-color: transparent;
    border: none;
    position: relative;
    padding: 0 20px;
    margin-top: 20px;
}
.content_success .footer-info-success a:first-child {
    margin-bottom: 20px;
}
.footer-info-success a.wf_btn_white {
    color : var(--gray-950);
}
.success-icon {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
.content_success h1 {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}
.content_success .success-text {
    font-size: 15px;
    font-weight: 500;
}