/* GLOBAL */
.text_gray_200 {
    color: var(--gray-200);
}
.bg_white {
    background: var(--white);
    color: var(--gray-950);
}
.bg_transparent {
    background: transparent;
}
ul.default_ul {
    list-style-type: none;
    padding: 0 0 0 30px;
}
ul.default_ul li {
    position: relative;
}
ul.default_ul li + li {
    margin: 8px 0 0;
}
ul.default_ul li:before {
    content: '';
    position: absolute;
    top: 6px;
    left: -18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-950);
}
.back_main,
.to_address {
    height: 40px;
    padding: 4px;
    cursor: pointer;
    position: absolute;
    top: 14px;
    left: 12px;
    z-index: 5;
}
/* Back button over full-screen content (route map, route control) */
.transfer_route_map__back {
    top: calc(14px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    z-index: 2;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(10, 10, 10, 0.3);
}

/* Full-screen map page shell (route map, route control) */
.full_screen_map_page {
    background: var(--white);
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}
.full_screen_map_page_wrap {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}
.transfer_route_map {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

/* Start/end popups (HTML overlay marker content) */
.transfer_route_map__popup {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 240px;
    padding: 7px 10px;
    border-radius: 12px;
    background: var(--white);
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.16);
    font-family: var(--font-main);
    pointer-events: none;
    z-index: 2;
}
.transfer_route_map__popup_hidden {
    display: none;
}
.transfer_route_map__popup::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--white);
}
.transfer_route_map__popup_address {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
}
.transfer_route_map__popup_label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: var(--gray-500);
}

/* Map markers (OverlayView HTML content) */
.transfer_route_map__marker_with_popup {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.transfer_route_map__marker_with_popup .transfer_route_map__popup {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    transform: translateX(-50%);
    z-index: 2;
    width: max-content;
    max-width: 240px;
}
.transfer_route_map__marker_icon {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    cursor: pointer;
    pointer-events: auto;
}
.transfer_route_map__marker_icon svg {
    display: block;
    overflow: visible;
}
.additional_menu_icon {
    height: 40px;
    padding: 4px;
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 12px;
}
.h1_wrapper_mb {
    margin-bottom: 15px;
}
.h2_wrapper_mb {
    margin-bottom: 8px;
}
.footer_btns {
    position: relative;
    z-index: 2;
    width: 100%;
}
.error_text_block {
    width: calc(100% + 40px);
    background: var(--red-500);
    margin: 0 0 28px -20px;
    text-align: center;
    font-size: 13px;
    line-height: 28px;
    color: var(--white);
    /* display: none; */
    display: block;
}
.success_text_block {
    width: calc(100% + 40px);
    background: var(--green-500);
    margin: 0 0 28px -20px;
    text-align: center;
    font-size: 13px;
    line-height: 28px;
    color: var(--green-950);
    /* display: none; */
    display: block;
}
.upload_files_wrapper,
.uploaded_files,
.children_list_wrapper,
.children_list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.uploaded_file {
    display: flex;
    gap: 16px;
    width: 100%;
    padding: 0 56px 0 16px;
    border: 2px solid var(--blue-500);
    position: relative;
    align-items: center;
    height: 72px;
    border-radius: 16px;
}
.uploaded_file_with_image {
    height: auto;
}
.uploaded_file_with_image img {
 margin: 10px 0;
}
.uploaded_file_with_image .uploaded_file_size {
    margin-bottom: 5px;
}
.uploaded_file_center {
    overflow: hidden;
    white-space: nowrap;
}
.uploaded_file_filename {
    font-size: 14px;
    font-weight: 600;
}
.uploaded_file_filename a {
    text-decoration: none;
    color: var(--green-600);
}
.uploaded_file_size {
    font-size: 12px;
    line-height: 16px;
    margin: 4px 0 0;
    font-weight: 500;
    color: var(--gray-400);
}
.uploaded_file_remove {
    width: 24px;
    height: 24px;
    background: var(--gray-950);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 18px;
    margin-top: -12px;
}
.upload_new_file_wrapper,
.add_new_child_btn {
    border: 1px dashed var(--gray-400);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    gap: 8px;
    border-radius: 16px;
    cursor: pointer;
    position: relative;
}
.upload_new_file_icon{
    width: 16px;
    height: 16px;
}
.upload_new_file_icon svg {
    margin: -4px 0 0;
}
.upload_new_file_wrapper input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.footer-info {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 30px 20px 0;
    background-color: #fff;
    border-top: 1px solid var(--gray-100);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    z-index: 2;
}
.footer-info .footer-info-title {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    position: relative;
    top: -5px;
}
.footer-info .footer-info-logo-wrp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -10px 0 15px 0;
}
.footer-info .footer-info-close {
    cursor: pointer;
}
.footer-info .box-elements > * {
    margin-bottom: 10px;
}
.footer-info .box-elements > a:first-of-type {
    margin-top: 20px;
}
.footer-info .footer-info-cost {
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
}
.footer-info .footer-info-cost .footer-info-cost-title {
    font-size: 15px;
    font-weight: 600;
}
.footer-info .footer-info-cost .footer-info-cost-sum {
    font-size: 32px;
    font-weight: 700;
}
.footer-info .footer-info-cost .footer-info-cost-sum .footer-info-cost-sum-currency-symbol {
    font-size: 18px;
    color: var(--gray-950);
}
.footer-info-calendar {
    height: 452px;
    bottom: -452px;
}
.footer-info-add {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    /* A tall sheet must stop below the status bar: the installed app on iPhone draws the page
       under it (viewport-fit=cover), and a sheet of 100vh put its logo and close button right
       under the clock, out of reach. 100dvh is the screen really visible - in Safari with its
       toolbars 100vh is taller than that. The first line is for browsers without env()/dvh */
    max-height: 100vh;
    max-height: calc(100vh - env(safe-area-inset-top) - 12px);
    max-height: calc(100dvh - env(safe-area-inset-top) - 12px);
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.7s;
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    z-index: 3;
}
.footer-info-add.active {
    transform: translateY(0);
}
.footer-info-add .icon_svg svg {
    vertical-align: text-top;
    margin-right: 5px;
}
#footer-calendar {
    width: 100%;
    height: 1px;
    border: none;
    border-top: 1px solid var(--gray-100);
    color: #fff;
}
.footer-info-calendar .flatpickr-calendar {
    margin: 10px auto 0;
    box-shadow: none;
}
.hidden {
    display: none !important;
}

/* Popover of the cabinet pages — view/template/blocks/main_popover.php */
.wf-info-wrp {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 8;
    width: calc(100% - 40px);
}
.wf-info {
    background-color: var(--white);
    border-radius: 16px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    min-height: 74px;
    box-shadow: 0 10px 15px var(--gray-200);
    margin: 0 auto 30px;
    width: 100%;
    max-width: 960px;
    position: relative;
}
.wf-info .wf-info-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}
.wf-info .wf-info-close svg {
    display: block;
}
.wf-info .wf-info-image {
    margin-right: 20px;
}
.wf-info .wf-info-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wf-info .wf-info-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.wf-info .wf-info-description {
    font-size: 12px;
    font-weight: 500;
}
/* Bell of the cabinet header — the dot stays while the teacher has unopened messages */
.homepage_header_notification {
    position: relative;
}
.homepage_header_notification_unread:after {
    position: absolute;
    content: '';
    top: 8px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red-500);
}
.tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 10px;
    position: relative;
    background-color: var(--green-200);
    border-radius: 4px;
    margin-bottom: 12px;
}
.tag .text-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 600;
    color: var(--gray-950);
    font-size: 12px;
    text-align: center;
    letter-spacing: 0;
    line-height: 16px;
    white-space: normal;
    word-break: break-word;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
table thead {
    background-color: var(--gray-100);
}
table thead th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-950);
    border-bottom: 2px solid var(--gray-200);
}
table tr:nth-child(even) {
    background-color: #fafafa;
}
table td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
}
table tr:last-child td {
    border-bottom: none;
}
.wf-info-wrp {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 4;
    width: calc(100% - 40px);
}
.wf-info {
    background-color: #fff;
    border-radius: 16px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    min-height: 74px;
    box-shadow: 0 10px 15px var(--gray-200);
    margin: 0 auto 30px;
    width: 100%;
    max-width: 960px;
    position: relative;
}
.wf-info .wf-info-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}
.wf-info .wf-info-close svg {
    display: block;
}
.wf-info .wf-info-image {
    margin-right: 20px;
}
.wf-info .wf-info-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wf-info .wf-info-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}
.wf-info .wf-info-description {
    font-size: 12px;
    font-weight: 500;
}
.wf-info .wf-info-description a {
    text-decoration: none;
    font-weight: 600;
    color: var(--green-600);
}

.content_scroll_page {
    padding-top: 0;
    padding-bottom: 30px;
    overflow: auto !important;
    background: var(--white);
    touch-action: pan-y;
}

.content.content_flex.content_flex_columns.content_item.content_item_text .item-info {
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}
.all_pages_main_subtitle {
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    color: var(--gray-700);
    margin: 24px 0 0;
}
.all_pages_main_currency {
    font-weight: 700;
    font-size: 24px;
    line-height: 56px;
    color: var(--gray-950);
    margin: 0 0 16px;
}
.all_pages_main_currency .currency_big {
    font-size: 40px;
    line-height: 56px;
}
.all_pages_main_currency .currency_symbol {
    margin: 0 0 0 4px;
}
.all_pages_main_child {
    height: 36px !important;
    padding: 0 40px 0 16px !important;
    line-height: 36px !important;
}
.all_pages_rules {
    display: flex;
    gap: 15px;
    margin: 32px 0 0;
}
.all_pages_rule {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--white);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    color: var(--gray-950);
    text-decoration: none;
    width: 50%;
    min-height: 76px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
body:not(.mobile_device) .all_pages_rule:hover {
    background: rgba(255, 255, 255, 0.75);
}
.all_pages_rule span {
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
}
.all_pages_need_view_rules,
.all_pages_main_is_empty,
.all_pages_main_child_not_selected {
    border: 1px solid var(--blue-500);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--blue-50);
    margin: 24px 0 30px 0;
}
.all_pages_main_child_not_selected {
    border: 1px solid var(--red-500);
    background: var(--red-50);
}
.all_pages_need_view_rules_top {
    display: flex;
    gap: 12px;
}
.all_pages_need_view_rules_title {
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: var(--gray-950);
}
.all_pages_need_view_rules_text {
    font-size: 12px;
    line-height: 16px;
}
.all_pages_need_view_rules_btn {
    height: 36px;
    margin: 12px 0 0;
    text-transform: none;
}
.oferta_text {
    margin: 40px 0 0;
    width: 100%;
    background: transparent;
    border-radius: unset;
    padding: 0;
}
/* ADDITIONAL MENU */
.additional_menu {
    position: fixed;
    z-index: 3;
    bottom: 32px;
    left: 20px;
    width: calc(100% - 40px);
    flex-direction: column;
    align-items: center;
    /* Menu stays in the layout and is hidden by opacity — display none/flex switches at once
       and the popup jumps out while the dim behind it is still fading in */
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease, visibility 0s linear 1s;
    -moz-transition: opacity 1s ease, transform 1s ease, visibility 0s linear 1s;
    -o-transition: opacity 1s ease, transform 1s ease, visibility 0s linear 1s;
    transition: opacity 1s ease, transform 1s ease, visibility 0s linear 1s;
}
.additional_menu.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease, visibility 0s;
    -moz-transition: opacity 1s ease, transform 1s ease, visibility 0s;
    -o-transition: opacity 1s ease, transform 1s ease, visibility 0s;
    transition: opacity 1s ease, transform 1s ease, visibility 0s;
}
.additional_menu_items {
    width: 100%;
    max-width: 1000px;
    margin: 0 0 24px;
}
.additional_menu_item {
    height: 56px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.additional_menu_item:first-child {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}
.additional_menu_item:last-child {
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
}
.additional_menu_item + .additional_menu_item {
    border-top: 1px solid var(--gray-950);
}
.additional_menu_close {
    width: 56px;
    height: 56px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.additional_menu_item_support_service {
    color: var(--gray-950);
    text-decoration: none;
}
/* Profile switcher menu — view/template/blocks/profile_menu.php, above the bottom tab menu */
.profile_menu {
    z-index: 7;
}
/* Overlay keeps its layer while it fades out, otherwise the header and the tab menu
   jump back above it at once and only the content stays dimmed until the end of the transition */
body.body_home .main_overlay,
body.body_profile .main_overlay {
    z-index: 6;
}
.profile_menu_item {
    justify-content: flex-start;
    gap: 12px;
    padding: 0 25px;
}
.profile_menu_item + .profile_menu_item {
    border-top: 1px solid var(--gray-100);
}
.profile_menu_letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}
/* The cabinet of the individual lessons is called the tutor in its own switcher and the
   teacher in everybody else's — one colour for both, or his row loses it outside his cabinet */
.profile_menu_letter_tutor,
.profile_menu_letter_teacher {
    background: var(--green-100);
    color: var(--green-950);
}
.profile_menu_letter_curator {
    background: #d0f993;
    color: var(--green-950);
}
.profile_menu_name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-950);
}
.profile_menu_check {
    display: inline-flex;
    margin-left: auto;
}
.tooltipster-box {
    margin-left: 20px;
    margin-right: 20px;
}
.checkout_box {
    padding: 0 20px 20px 20px;
    border: 1px solid var(--gray-200);
    background-color: #fff;
    border-radius: 12px;
    color: var(--gray-950);
    text-decoration: none;
    position: relative;
    margin-bottom: 100px;
}
.checkout_box div.title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: var(--gray-950);
}
.checkout_box div {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--gray-950);
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
}
.checkout_box .sup_title {
    display: inline-block;
    width: 155px;
    min-width: 155px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--gray-400);
    padding-right: 10px;
}
.checkout_box hr {
    border: none;
    height: 1px;
    background: repeating-linear-gradient(
            to right,
            var(--gray-100),
            var(--gray-100) 12px,
            transparent 6px,
            transparent 20px
    );
    margin: 20px 0;
    position: relative;
}
.checkout_box hr::before,
.checkout_box hr::after {
    content: '';
    display: block;
    width: 22px;
    height: 25px;
    border-radius: 100%;
    position: absolute;
    top: -11px;
    background-color: var(--gray-50);
}
.checkout_box hr::before {
    left: -30px;
    border-right: 1px solid var(--gray-200);
}
.checkout_box hr::after {
    right: -30px;
    border-left: 1px solid var(--gray-200);
}
.sum_red {
    color: var(--red-500) !important;
}
.box_title_page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -30px 0 40px;
}
.box_title_page .back_step,
.box_title_page .item_left,
.box_title_page .item_right{
    width: 35px;
}
.box_title_page_fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 40px 20px 20px 20px;
    z-index: 2;
    background: var(--gray-50);
}
.box_title_page_fixed + .content {
    padding-top: 100px;
}
.box_title_page_sticky {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -20px 0;
    padding: 20px;
    background: var(--white);
}
.box_title_page .back_step{
    cursor: pointer;
}
.route_bottom_action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Route stops list — shared between /route/ and the /route/control/ details panel */
.route_details_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.route_details_title {
    margin: 0;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    font-family: var(--font-main);
}
.route_stops_list {
    display: flex;
    flex-direction: column;
}
.route_stop_item {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    /*padding-bottom: 18px;*/
}
.route_stop_item > svg {
    width: 20px;
    min-width: 20px;
    height: 20px;
    display: block;
    position: relative;
    z-index: 1;
}
.route_stop_item::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 53px;
    width: 1px;
    height: 25px;
    background:
        linear-gradient(var(--gray-400), var(--gray-400)) center top / 1px 4px no-repeat,
        linear-gradient(var(--gray-400), var(--gray-400)) center center / 1px 8px no-repeat,
        linear-gradient(var(--gray-400), var(--gray-400)) center bottom / 1px 4px no-repeat;
}
.route_stop_item_arrived::after {
    background:
        linear-gradient(var(--blue-w-400), var(--blue-w-400)) center top / 1px 4px no-repeat,
        linear-gradient(var(--blue-w-400), var(--blue-w-400)) center center / 1px 8px no-repeat,
        linear-gradient(var(--blue-w-400), var(--blue-w-400)) center bottom / 1px 4px no-repeat;
}
.route_stop_item:last-child {
    padding-bottom: 0;
}
.route_stop_item:last-child::after {
    display: none;
}
.route_stop_content {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
    min-height: 64px;
}
.route_stop_address {
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-main);
}
.route_stop_meta {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-main);
    color: var(--gray-600);
}

/* Rows of the switcher that lead to another cabinet are links, so they must not look like links */
a.profile_menu_item {
    text-decoration: none;
    color: inherit;
}
/* One colour per cabinet, so the row is recognised before it is read */
.profile_menu_letter_parent {
    background: #cfe6ff;
    color: #0b3c6b;
}
.profile_menu_letter_coach {
    background: #ffe1b5;
    color: #6b3c0b;
}
.profile_menu_letter_driver {
    background: #e2d7ff;
    color: #3c1f78;
}