* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    min-height: 100%;
}

body {
    font-family: Rubik, sans-serif;
    color: #333333;
}

a {
    font-size: 14px;
    color: #2F80ED;
    text-decoration: none;
    transition: color 0.2s, text-decoration 0.2s;
}

a:hover {
    color: #2A72D4;
    text-decoration: underline;
}

a.disabled {
    color: #BFBFBF;
    cursor: not-allowed;
}

.page-wrapper {
    /*background: #38A6DF;*/
    background: #EFF5F8;
    min-height: 100%;
    display: flex;
    justify-content: stretch;
    flex-direction: row;
    align-items: stretch;
}

.page-title {
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    letter-spacing: 0.116667px;
    color: #333333;
    position: relative;
    margin-bottom: 10px;
}

.page-title-with-back {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-subtitle {
    font-size: 14px;
    line-height: 24px;
    color: #828282;
    /*margin-top: -10px;*/
    margin-bottom: 10px;
}

.page-title-actions {
    width: 35%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    right: 0;
}

.button-on-top {
    top: -36px;
}

/*.page-title-actions .btn {*/
/*    margin-right: 10px;*/
/*}*/

.page-title-actions .btn:last-child {
    margin-right: 0;
}

.clearfix {
    overflow: hidden;
}

.main-menu-wrapper {
    min-height: 100%;
    background: #189FDA;
    margin: 7px;
    border-radius: 30px;
}

.main-menu-container {
    padding: 20px;
    width: 290px;
}

.main-menu-footer {
    padding: 45px;
    width: 290px;
    height: 150px;
    min-height: 100%;
    display: flex;
    justify-content: space-between;
}

.main-menu-logo {
    text-align: center;
    margin-top: 30px;
}

.main-menu-logo img {
    margin: 0 auto;
    margin-bottom: 20px;
    width: 150px;
}

.page-content-wrapper {
    background: #EFF5F8;
    /*box-shadow: -10px 0 60px #006CAA, inset -1px 0 0 #E2E2EA;*/
    /*border-radius: 40px 0 0 40px;*/
    padding: 75px 50px;
    width: calc(100% - 290px);
    position: relative;
}

.menu-item-list {
    display: flex;
    flex-direction: column;
    position: relative;
}

.menu-item-empty {
    background: transparent;
    height: 1px;
}

.menu-item {
    border: 1px solid transparent;
    color: #fff !important;
    /*opacity: 0.6;*/
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 10px 0 10px 16px;
    transition: opacity 0.2s, margin-top 0.2s;
    position: relative;
    outline: none;
    font-size: 16px;
    margin-top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    margin-bottom: 5px;
}

.menu-item:hover, .menu-item:focus, .menu-item:hover .menu-item::before, .menu-item:focus .menu-item::before {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    text-decoration: none;
}

.menu-item-active {
    background: rgba(255, 255, 255, 0.1);
    opacity: 0.5;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
}

.menu-item-active, .menu-item-active::before {
    opacity: 1 !important;
    /*font-weight: bold;*/
}

.menu-item::before {
    width: 26px;
    height: 24px;
    /*opacity: 0.6;*/
    content: "";
    background-position-x: center !important;
    margin-right: 7px;
}

.menu-dropdown-item::before {
    content: unset;
    width: unset;
    height: unset;
}

.main-menu-content .menu-dropdown-content:before {
    content: '';
    position: absolute;
    left: 3px;
    height: calc(100% - 45px);
    transform: translateY(-52%);
    top: 50%;
    width: 1px;
    background: #64BFE7;
}

.main-menu-content .menu-dropdown {
    margin-top: 12px;
    left: 26px;
    width: calc(100% - 26px);
}

.main-menu-content .menu-item.menu-dropdown-item:before {
    content: '';
    position: relative;
    left: -14px;
    width: 5px;
    height: 5px;
    background: #64BFE7;
    border-radius: 50%;
}

.menu-item-active::after {
    /*content: "";*/
    display: none;
    width: 7px;
    height: 100%;
    background: #fff;
    border-radius: 10px 0 0 10px;
    opacity: 1;
    z-index: 1;
    position: absolute;
    right: -45px;
}

.menu-item-main::before {
    background: url('/images/icons/main-page-icon.svg') no-repeat;
}

.menu-item-games::before {
    background: url('/images/icons/games-icon.svg') no-repeat;
}

.menu-item-abakus-games::before {
    background: url('/images/icons/games-icon.svg') no-repeat;
}

.menu-item-courses::before {
    background: url('/images/icons/courses-icon.svg') no-repeat;
}

.menu-item-freetime::before {
    background: url('/images/icons/freetime-icon.svg') no-repeat;
}

.menu-item-templessons::before {
    background: url('/images/icons/temp-lesson-icon.svg') no-repeat;
}

.menu-item-salesLeads::before {
    background: url('/images/icons/temp-lesson-icon.svg') no-repeat;
}

.menu-item-schedule::before {
    background: url('/images/icons/schedule-icon.svg') no-repeat;
}

.menu-item-gift-lessons::before {
    background: url('/images/icons/gift.svg') no-repeat;
}

.menu-item-promo-codes-admin-panel::before {
    background: url('/images/icons/promo.svg') no-repeat;
}

.menu-item-admin::before {
    background: url('/images/icons/tariff-admin.svg') no-repeat;
    background-size: 100%;
}

.menu-item-tariff::before {
    background: url('/images/icons/schedule-icon.svg') no-repeat;
}

.menu-item-chat::before {
    background: url('/images/icons/chat-icon.svg') no-repeat;
    background-size: contain;
}

.menu-item-balance::before {
    background: url('/images/icons/balance-icon.svg') no-repeat;
}

.menu-item-library::before {
    background: url('/images/icons/library-icon.svg') no-repeat;
}

.menu-item-center::before {
    background: url('/images/icons/library-icon.svg') no-repeat;
}

.menu-item-news::before {
    background: url('/images/icons/news-icon.svg') no-repeat;
}

.menu-item-profile::before {
    background: url('/images/icons/profile-icon.svg') no-repeat;
}

.menu-item-profile-sales::before {
    background: url('/images/icons/settings-icon-white.svg') center/80% no-repeat;
}

.menu-item-additional::before {
    background: url('/images/icons/profile-icon.svg') no-repeat;
}

.menu-item-students::before {
    background: url('/images/icons/profile-icon.svg') no-repeat;
}

.menu-item-booking::before {
    background: url('/images/icons/library-icon.svg') no-repeat;
}

.menu-item-logout::before {
    background: url('/images/icons/logout-icon.svg') no-repeat;
}

.menu-item-support::before {
    background: url('/images/icons/support-icon.svg') no-repeat;
}

.menu-item-resources::before {
    background: url('/images/icons/resources-icon.svg') no-repeat;
    background-size: contain;
}

.menu-item-centers::before {
    background: url('/images/icons/centers-icon.svg') no-repeat;
    background-size: contain;
}

.menu-item-shop::before {
    background: url('/images/icons/shop-icon.svg') no-repeat;
    background-size: contain;
}

.menu-item-payment::before {
    background: url('/images/icons/payment-icon.svg') no-repeat;
    background-size: contain;
    background-position: center;
}

.menu-item-testlesson::before {
    background: url('/images/icons/training-icon.svg') no-repeat;
    background-size: contain;
}

.menu-item-training::before {
    background: url('/images/icons/training-icon.svg') no-repeat;
    background-size: contain;
}

/*.menu-item-statistics::before {*/
/*    background: url('/images/icons/statistics-icon.svg') no-repeat;*/
/*    background-size: contain;*/
/*}*/

.menu-dropdown {
    position: absolute;
    top: 40px;
    display: none;
    left: 34px;
}

.menu-dropdown-content {
    display: flex;
    flex-direction: column;
}

.menu-dropdown-content .menu-item {
    padding: 7px 0;
    font-weight: normal;
    margin-left: 14px;
}

.btn {
    display: inline-flex;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    line-height: 16px;
    font-weight: 500;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    transition: box-shadow 0.2s, -webkit-box-shadow 0.2s, -moz-box-shadow 0.2s, border 0.2s, background 0.2s;
}

.btn-wide {
    display: block;
    text-align: center;
    width: 100%;
}

.btn-large {
    padding: 9px 16px;
    font-size: 14px;
    line-height: 17px;
}

.btn.btn-add, .btn.btn-play {
    padding: 5px 12px 5px 20px;
}

.btn.btn-large.btn-add, .btn.btn-large.btn-play {
    padding: 9px 16px 9px 30px;
}

.btn-add::before {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url('/images/icons/plus-circle.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    left: 5px;
}

.btn-large.btn-add::before, .btn-large.btn-play::before {
    width: 14px;
    height: 14px;
    left: 9px;
}

.btn-outline.btn-add::before {
    background-image: url('/images/icons/plus-circle-blue.svg') !important;
}

.btn-disabled.btn-add::before {
    background-image: url('/images/icons/plus-circle-disabled.svg') !important;
}

.btn-large.btn-add::before {
    background-image: url('/images/icons/plus-circle-outline.svg') !important;
}

.btn-large.btn-outline.btn-add::before {
    background-image: url('/images/icons/plus-circle-outline-blue.svg') !important;
}

.btn-large.btn-disabled.btn-add::before {
    background-image: url('/images/icons/plus-circle-outline-disabled.svg') !important;
}

.btn-play::before {
    content: "";
    width: 12px;
    height: 12px;
    background-image: url('/images/icons/play-white-icon.svg') !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    left: 5px;
}

.btn-wide.btn-play::before {
    margin-left: -16px;
    margin-top: 2px;
    left: unset;
}

.btn-disabled.btn-play::before {
    background-image: url('/images/icons/play-gray-icon.svg') !important;
}

.btn-primary {
    background: #2F80ED;
    border: 1px solid #2F80ED;
    color: #FFFFFF !important;
}

.btn-primary:hover {
    border: 1px solid #2A72D4;
    -webkit-box-shadow: 0 2px 4px 0 rgba(19, 90, 186, 0.24);
    -moz-box-shadow: 0 2px 4px 0 rgba(19, 90, 186, 0.24);
    box-shadow: 0 2px 4px 0 rgba(19, 90, 186, 0.24);
    color: #FFFFFF !important;
}

.btn-primary:focus {
    border: 1px solid #2A72D4;
    color: #FFFFFF !important;
}

.btn-primary:active {
    border: 1px solid #2A72D4;
    background: #2A72D4;
    color: #FFFFFF !important;
}

.btn-success {
    background: #2FA84F;
    border: 1px solid #2FA84F;
    color: #FFFFFF !important;
}

.btn-success:hover {
    border: 1px solid #299446;
    -webkit-box-shadow: 0 2px 4px 0 rgba(59, 167, 87, 0.24);
    -moz-box-shadow: 0 2px 4px 0 rgba(59, 167, 87, 0.24);
    box-shadow: 0 2px 4px 0 rgba(59, 167, 87, 0.24);
    color: #FFFFFF !important;
}

.btn-success:hover.btn-disabled {
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    color: #BFBFBF !important;
    cursor: not-allowed;
    -webkit-box-shadow: unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
}

.btn-success:focus {
    border: 1px solid #299446;
    color: #FFFFFF !important;
}

.btn-success:focus.btn-disabled {
    border: 1px solid #D9D9D9;
    color: #BFBFBF !important;
}

.btn-success:active {
    border: 1px solid #299446;
    background: #299446;
    color: #FFFFFF !important;
}

.btn-success:focusactive.btn-disabled {
    border: 1px solid #D9D9D9;
    background: #F5F5F5;
    color: #BFBFBF !important;
}

.btn-danger {
    background: #EA3D2F;
    border: 1px solid #EA3D2F;
    color: #FFFFFF !important;
}

.btn-danger:hover {
    border: 1px solid #C93528;
    -webkit-box-shadow: 0 2px 4px 0 rgba(199, 63, 52, 0.24);
    -moz-box-shadow: 0 2px 4px 0 rgba(199, 63, 52, 0.24);
    box-shadow: 0 2px 4px 0 rgba(199, 63, 52, 0.24);
    color: #FFFFFF !important;
}

.btn-danger:focus {
    border: 1px solid #C93528;
    color: #FFFFFF !important;
}

.btn-danger:active {
    border: 1px solid #C93528;
    background: #C93528;
    color: #FFFFFF !important;
}

.btn-warning {
    background: #FFB800;
    border: 1px solid #FFB800;
    color: #FFFFFF !important;
}

.btn-warning:hover {
    border: 1px solid #DB9E00;
    -webkit-box-shadow: 0 2px 4px 0 rgba(235, 173, 12, 0.24);
    -moz-box-shadow: 0 2px 4px 0 rgba(235, 173, 12, 0.24);
    box-shadow: 0 2px 4px 0 rgba(235, 173, 12, 0.24);
    color: #FFFFFF !important;
}

.btn-warning:focus {
    border: 1px solid #DB9E00;
    color: #FFFFFF !important;
}

.btn-warning:active {
    border: 1px solid #DB9E00;
    background: #DB9E00;
    color: #FFFFFF !important;
}

.btn-outline {
    color: #2F80ED !important;
    border: 1px solid #2F80ED;
    background: #FFFFFF;
}

.btn-outline:hover {
    border: 1px solid #2A72D4;
    -webkit-box-shadow: 0 2px 4px 0 rgba(19, 90, 186, 0.24);
    -moz-box-shadow: 0 2px 4px 0 rgba(19, 90, 186, 0.24);
    box-shadow: 0 2px 4px 0 rgba(19, 90, 186, 0.24);
    color: #2F80ED !important;
}

.btn-outline:focus {
    border: 1px solid #2A72D4;
    color: #2F80ED !important;
}

.btn-outline:active {
    border: 1px solid rgba(47, 128, 237, 0.5);
    background: rgba(47, 128, 237, 0.1);
    color: #2F80ED !important;
}


.btn-smooth.btn-primary, .btn-smooth.btn-outline {
    background: #EBF2FF;
    border: 1px solid #EBF2FF;
    color: #2F80ED;
}

.btn-smooth.btn-primary:hover, .btn-smooth.btn-outline:hover {
    border: 1px solid #B8D1FF;
    -webkit-box-shadow: 0 2px 4px 0 rgba(142, 185, 255, 0.24);
    -moz-box-shadow: 0 2px 4px 0 rgba(142, 185, 255, 0.24);
    box-shadow: 0 2px 4px 0 rgba(142, 185, 255, 0.24);
}

.btn-smooth.btn-primary:focus, .btn-smooth.btn-outline:focus {
    border: 1px solid #B8D1FF;
}

.btn-smooth.btn-primary:active, .btn-smooth.btn-outline:active {
    border: 1px solid #B8D1FF;
    background: #B8D1FF;
}

.btn-smooth.btn-success {
    background: #DCF7E3;
    border: 1px solid #DCF7E3;
    color: #2FA84F !important;
}

.btn-smooth.btn-success:hover {
    border: 1px solid #AFDEBB;
    -webkit-box-shadow: 0 2px 4px 0 rgba(47, 168, 79, 0.24);
    -moz-box-shadow: 0 2px 4px 0 rgba(47, 168, 79, 0.24);
    box-shadow: 0 2px 4px 0 rgba(47, 168, 79, 0.24);
}

.btn-smooth.btn-success:focus {
    border: 1px solid #AFDEBB;
}

.btn-smooth.btn-success:active {
    border: 1px solid #AFDEBB;
    background: #AFDEBB;
}

.btn-smooth.btn-danger {
    background: #FEE4E2;
    border: 1px solid #FEE4E2;
    color: #EA3D2F;
}

.btn-smooth.btn-danger:hover {
    border: 1px solid #FFB6B0;
    -webkit-box-shadow: 0 2px 4px 0 rgba(214, 45, 32, 0.24);
    -moz-box-shadow: 0 2px 4px 0 rgba(214, 45, 32, 0.24);
    box-shadow: 0 2px 4px 0 rgba(214, 45, 32, 0.24);
}

.btn-smooth.btn-danger:focus {
    border: 1px solid #FFB6B0;
}

.btn-smooth.btn-danger:active {
    border: 1px solid #FFB6B0;
    background: #FFB6B0;
}

.btn-smooth.btn-warning {
    background: #FCF3D7;
    border: 1px solid #FCF3D7;
    color: #FFB800;
}

.btn-smooth.btn-warning:hover {
    border: 1px solid #FFE9A6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(255, 190, 22, 0.24);
    -moz-box-shadow: 0 2px 4px 0 rgba(255, 190, 22, 0.24);
    box-shadow: 0 2px 4px 0 rgba(255, 190, 22, 0.24);
}

.btn-smooth.btn-warning:focus {
    border: 1px solid #FFE9A6;
}

.btn-smooth.btn-warning:active {
    border: 1px solid #FFE9A6;
    background: #FFE9A6;
}

.btn-disabled {
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    color: #BFBFBF !important;
    cursor: not-allowed;
}


.btn-tester {
    padding: 30px;
    border: 1px solid #ccc;
}

.btn.disabled, .btn[disabled] {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65
}

.form-group {
    margin-bottom: 15px;
    overflow: hidden;
}

.form-group.flex {
    display: flex;
    align-items: center;
}

.form-group-start-date {
    overflow: visible;
    display: flex;
    align-items: center;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group__archive {
    margin-top: 10px;
}
.form-tip {
    font-size: 12px;
    margin: 0;
    color: #646464;
}
.form-tip > b {
    font-weight: 500;
}

input[type='text'].form-control, input[type='tel'].form-control, input[type='password'].form-control, input[type='email'].form-control, input[type='date'].form-control, input[type="number"].form-control, textarea.form-control, select.form-control, input[type='url'].form-control {
    background: #FFFFFF;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    outline: none;
    /*min-width: 300px;*/
    -webkit-box-shadow: 0 0 15px 0 rgba(68, 68, 79, 0);
    -moz-box-shadow: 0 0 15px 0 rgba(68, 68, 79, 0);
    box-shadow: 0 0 15px 0 rgba(68, 68, 79, 0);
    transition: box-shadow 0.2s, -webkit-box-shadow 0.2s, -moz-box-shadow 0.2s, border 0.2s;

    border: 1px solid #D9D9D9;
}

#search-by-users {
    background-image: url('/images/icons/search.svg');
    background-position: 10px center;
    background-repeat: no-repeat;
    padding-left: 40px;
    height: 40px;
    width: 100%;
    box-sizing: border-box;
}


input[type='text'].form-control:disabled,
input[type='password'].form-control:disabled,
input[type='email'].form-control:disabled,
input[type='date'].form-control:disabled,
input[type="number"].form-control:disabled,
textarea.form-control:disabled,
select.form-control:disabled {
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    color: #BFBFBF;
}

input[type="text"].form-control:focus, input[type="password"].form-control:focus, input[type='email'].form-control:focus, input[type='date'].form-control:focus, input[type="number"].form-control:focus, textarea.form-control:focus {
    border: 1px solid #2F80ED;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(142, 185, 255, 0.24), 0 2px 4px rgba(35, 119, 253, 0.24);
}

input[type="text"].form-control:active, input[type="password"].form-control:active, input[type='email'].form-control:active, input[type='date'].form-control:active, input[type="number"].form-control:active, textarea.form-control:active {
    border: 1px solid #2F80ED;
}

.form-horizontal input.form-control, .form-horizontal select {
    width: 100%;
}

.form-check-label {
    font-size: 12px;
    color: #4F4F4F;
    display: flex;
    margin-top: 4px;
}

.form-check-label-align {
    margin-top: 5px;
}

.form-check-label input[type="checkbox"], .form-check-label input[type="radio"] {
    margin-right: 4px;
}

select.form-control {
    margin-right: 10px;
    height: 37px;
    padding: 6px 16px;
}

div.control-label,
label.control-label {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #828282;
    display: block;
    margin-bottom: 6px;
}

div.control-label span {
    font-weight: initial;
    font-size: 14px;
    color: black;
    text-transform: none;
}

label.settings-checkbox-label {
    font-weight: 400;
    font-size: 16px;
}

#student-phone, #student-parentPhone {
    margin-top: 8px;
}

label.control-label__archive {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #828282;
    margin-bottom: 6px;
    padding-left: 10px;
}

.table-search-actions > div {
    margin-right: 15px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.table-search-actions > div:last-child {
    margin-right: 0;
}

textarea.form-control {
    margin-bottom: 15px;
}

.table-search-actions div:last-child {
    margin-right: 0;
}

textarea.form-control:last-child {
    margin-bottom: 0;
}

textarea.form-control {
    border: 1px solid #D9D9D9;
    padding: 16px 16px;
    width: 100%;
    resize: none;
    font-family: Rubik, sans-serif;
}

.with-search-icon, .with-calendar-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.with-search-icon > input {
    padding-right: 30px !important;
}
.with-calendar-icon > input {
    padding-left: 40px !important;
}

.with-search-icon:after, .with-calendar-icon:after {
    content: "";
    position: absolute;
    right: 10px;
    width: 20px;
    height: 20px;
    background: url('/images/icons/search.svg') no-repeat center;
}
.with-calendar-icon:after {
    right: unset;
    left: 10px;
    background: url('/images/icons/calendar-icon.svg') no-repeat center;
}
.d-flex > .pay-total-additional-item {
    margin-top: 0 !important;
    margin-right: 10px;
    flex-shrink: 0;
}

.form-schedule-label {
    font-size: 12px;
    font-weight: 400;
    margin-left: 12px;
    margin-bottom: 0;
}
#form-schedule-from-today {
    margin-top: 0;
}
.full-width {
    width: 100%;
}
.form-schedule-from-today-desc {
    font-size: 12px;
    line-height: 18px;
    margin-top: 12px;
    padding-bottom: 12px;
}

/* ========= CUSTOM TABLES BASED BY DIV ======== */
.table-wrapper {
    border-top: 1px solid #E7E7EC;
    padding-top: 30px;
}

.table-title-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.table-tabs-wrapper {
    position: relative;
    margin-top: 30px;
    min-height: 50px;
}

.table-tab-list {
    display: inline-flex;
    padding-top: 10px;
}

.table-tab {
    color: #BDBDBD;
    cursor: pointer;
    font-size: 16px;
    margin: 0 20px;
    transition: color 0.2s;
}

.table-tab:hover {
    color: #a5bdd2;
}

.table-tab:first-child {
    margin-left: 0;
}

.table-tab:last-child {
    margin-right: 0;
}

.table-search-actions {
    position: absolute;
    right: 0;
    top: -22px;
    min-height: 70px;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}

.table-search-action-popup {
    position: absolute;
    right: 0;
    top: unset;
    bottom: 4px;
}

.table-search-actions-popup {
    top: 30px;
    background: #ffffff;
    padding: 20px 35px;
    border-radius: 8px;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(68, 68, 79, 0.1);
}

.table-tab-active {
    font-weight: bold;
    color: #2F80ED !important;
    margin-bottom: 0;
}

.table-tab:after {
    content: "";
    height: 4px;
    display: block;
    background: transparent;
    border-radius: 4px 4px 0 0;
    margin-top: 20px;
    transition: background 0.2s, font-weight 0.2s;
}

.table-tab-active:after {
    background: #2F80ED;
}

.table-title {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.116667px;
}

.table-title a {
    font-size: 18px;
}

.table-subtitle {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.116667px;
    color: #828282;
    margin-top: 5px;
}

.table-title-actions {
    position: absolute;
    right: 0;
    top: 0;
}

.table-title-actions .btn {
    margin-right: 10px;
}

.table-title-actions .btn:last-child {
    margin-right: 0;
}

.table {
    max-width: 100%;
    min-width: 100%;
    display: table;
}

.table-content-wrapper {
    width: 100%;
    overflow-x: auto;
}

.table .table-row {
    display: table-row;
    /*width: auto;*/
    /*clear: both;*/
}

.table .th {
    color: #828282;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-align: left;
}

.table .td, .table .th {
    padding: 16px;
    display: table-cell;
    vertical-align: middle;
}

.table.table-bordered .td, .table.table-bordered .th {
    border-right: 1px solid #E7E7EC !important;
    border-bottom: 1px solid #E7E7EC !important;
}

.table.table-bordered .td:last-child, .table.table-bordered .th:last-child {
    border-right: none !important;
}

.table.table-bordered .table-row:last-child .td, .table.table-bordered .table-row:last-child .th {
    border-bottom: none !important;
}

.table .td-actions {
    text-align: right;
}

.table .td-wrap {
    overflow-wrap: anywhere;
}

.table > .table-body > .table-row > .td, .table > .table-body > .table-row > .th {
    background: #FFFFFF;
    color: #333333;
    font-size: 12px;
    position: relative;
}

.table > .table-body > .table-row > .th {
    text-align: center;
    padding-right: 0;
}

.table > .table-body > .table-row > div {
    border-bottom: 1px solid #E7E7EC;
}

.table > .table-body > .table-row:last-child > div {
    border: none;
}

.table .table-head {
    font-weight: bold;
    display: table-header-group;
}

.table.table-white-top .table-head {
    background: #ffffff;
}

.table.table-white-top .table-head .table-row .th {
    border-bottom: 1px solid #E7E7EC !important;
}

.table .table-body {
    display: table-footer-group;
}

/* top left radius*/
.table:not(.table-white-top) > .table-body > .table-row:first-child > div:first-child,
.table.table-white-top .table-head .table-row .th:first-child {
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
}

/* top right radius */
.table:not(.table-white-top) > .table-body > .table-row:first-child > div:last-child,
.table.table-white-top .table-head .table-row .th:last-child {
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
}

/* bottom left radius*/
.table > .table-body > .table-row:last-child > div:first-child {
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}

/* bottom right radius */
.table > .table-body > .table-row:last-child > div:last-child {
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
}

.table-loader {
    /*display: block;*/
    display: none;
}

.table-loader-content, .empty-table {
    position: relative;
    height: 120px;
    background: white;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-dialog-messages-list .table-loader-content,
.chat-users-list .table-loader-content {
    background: transparent;
}

.table-loader-icon {
    position: absolute;
    background: url('/images/icons/reload-icon.svg') no-repeat;
    background-size: cover;
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
    width: 39px;
    height: 52px;
    z-index: 10;
    filter: blur(3px);
    opacity: 0.8;
}

.table-loader-text {
    font-size: 16px;
    z-index: 11;
}

.table-pagination-wrapper {
    margin-top: 18px;
    font-size: 12px;
    color: #333333;
    display: flex;
    justify-content: space-between;
}

.table-pagination-options {
    border: 1px solid #F5F5F5;
    background: #FFFFFF;
    border-radius: 4px;
    padding-left: 16px;
    display: inline-flex;
    align-items: center;
    height: 28px;
    letter-spacing: 0.4px;
}
.table-pagination-options.pr-2 {
    padding-right: 16px;
}

.table-pagination-options-showing-word {
    color: #828282;
}

.table-pagination-options-showing {
    margin: 0 5px;
    position: relative;
}

.table-pagination-options-showing-modal {
    position: absolute;
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
    box-shadow: 0 5px 15px rgba(68, 68, 79, 0.1);
    border-radius: 8px;
    padding: 6px 0;
    top: -13px;
    left: -15px;
}

.table-pagination-options-showing-modal-item {
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.table-pagination-options-showing-modal-item:hover {
    background: rgba(224, 224, 224, 0.3);
}

.table-pagination-options-showing, .table-pagination-option-reload {
    cursor: pointer;
}

.table-pagination-option-reload {
    width: 22px;
    height: 22px;
    background-image: url('/images/icons/reload-icon.svg');
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
    margin-left: 5px;
    margin-right: 5px;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear, -moz-transform 0.2s linear, -ms-transform 0.2s linear, -o-transform 0.2s linear;
}

.table-pagination-option-reload:hover, .table-pagination-option-reload:focus {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.table-pagination-option-reload:active {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.game-setting-row.bg {
    font-size: 12px;
}

.notification-link {
    text-decoration: underline;
}

#paymentBalanceButton {
    width: 100%;
    padding: 13px 16px 13px 30px;
}

@-moz-keyframes flip {
    100% {
        -moz-transform: rotate(180deg);
    }
}

@-webkit-keyframes flip {
    100% {
        -webkit-transform: rotate(180deg);
    }
}

@keyframes flip {
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@-moz-keyframes rot90 {
    100% {
        -moz-transform: rotate(90deg);
    }
}

@-webkit-keyframes rot90 {
    100% {
        -webkit-transform: rotate(90deg);
    }
}

@keyframes rot90 {
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

@-webkit-keyframes rotating /* Safari and Chrome */
{
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.table-pagination-actions {
    position: relative;
    display: flex;
}

.table-pagination-page-action {
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
    border-radius: 4px;
    transition: background-color 0.2s linear;
    border: 1px solid #F5F5F5;
}

.table-pagination-page-action-disabled {
    cursor: not-allowed;
}

.table-pagination-page-action-disabled:hover {
    background-color: transparent;
}

.table-pagination-page-action-disabled:hover .table-pagination-page-action-button {
    background-color: #FFFFFF;
}

.table-pagination-page-action:hover {
    background-color: #E2E2EA;
}

.table-pagination-page-action:last-child {
    margin-right: 0;
}

.table-pagination-page-action-button {
    background-color: #FFFFFF;
}

.table-pagination-page-action-button:hover {
    background-color: #d7d6d6;
}

.table-pagination-page-action-button-forward {
    background-image: url('/images/icons/play-icon.svg');
    background-position: center;
    background-repeat: no-repeat;
}

.table-pagination-page-action-button-forward-fast {
    background-image: url('/images/icons/skip-next.svg');
    background-position: center;
    background-repeat: no-repeat;
}

.table-pagination-page-action-button-back {
    background-image: url('/images/icons/play-icon.svg');
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg);
}

.table-pagination-page-action-button-back-fast {
    background-image: url('/images/icons/skip-next.svg');
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg);
}

.table-pagination-page-action-active {
    background-color: #38A6DF !important;
    color: #FFFFFF;
}

/* ========= CUSTOM TABLES BASED BY DIV END ======== */

.table-ceil-course-title a {
    font-weight: 700;
}

.table-ceil-course-title a:hover {
    text-decoration: underline;
}

.table-ceil-course-group {
    display: flex;
    margin-top: 5px;
}

.table-ceil-course-group-title {
    color: #828282;
}

.table-ceil-course-group-count {
    margin-left: 3px;
}

.course-status-tag {
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    width: 105px;
    position: relative;
}

.course-status-tag-active {
    background: #DCF7E3;
    color: #2FA84F;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    width: unset;
    display: inline-block;
    font-weight: bold;
    font-size: 14px;
}

.course-status-tag-active::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #219653;
    border-radius: 8px;
    display: inline-block;
    margin-right: 5px;
}

.course-status-tag-frozen {
    background: #C2EEFF;
    color: #189FDA;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    width: unset;
    display: inline-block;
    font-weight: bold;
    font-size: 14px;
}

.course-status-tag-frozen::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #189FDA;
    border-radius: 8px;
    display: inline-block;
    margin-right: 5px;
}

.course-status-tag-in-progress {
    background: #FFB800;
    color: white;
    white-space: nowrap;
    padding-right: 10px;
    padding-left: 10px;
    width: unset;
    display: inline-block;
    font-size: 14px;
}

.course-status-tag-in-progress::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #b18000;
    border-radius: 8px;
    display: inline-block;
    margin-right: 5px;
}

.course-status-tag-finished {
    background: #FEE4E2;
    color: #EA3D2F;
    font-weight: bold;
    font-size: 14px;
}

.sub-status-auto-pay-count {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 3px 0;
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    position: relative;
}

.sub-status-auto-pay-count .tooltiptext {
    visibility: hidden;
    width: 141px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 10px 15px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    margin-left: -70px;
}

.sub-status-auto-pay-count:hover .tooltiptext {
    visibility: visible;
}

.sub-status-auto-pay-count .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.sub-status-auto-pay-count.one {
    background: #FFC9C9;
}

.sub-status-auto-pay-count.two {
    background: #FF8F8F;
}

.sub-status-auto-pay-count.three {
    background: #FF3D3D;
}

.td .course-status-tag-finished,
.td .course-status-tag-active,
.td .course-status-tag-in-progress {
    font-size: 12px;
}

.appeal-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #E7E7EC;
    padding: 15px;
}

.appeal-item {
    background: white;
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.appeal-item:first-child {
    margin-top: 0 !important;
}

.appeal-item:last-child {
    margin-bottom: 0 !important;
}

.appeal-item-title a {
    font-size: 16px;
}

.appeal-date {
    padding: 10px 15px;
    font-size: 12px;
    color: #828282;
}

.appeals-list {
    margin-top: 25px;
}

.appeal-status {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.appeal-status > div {
    margin-right: 5px;
}

.appeal-status > div:last-child {
    margin-right: 0;
}

.action-button {
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    display: inline-block;
    transition: border 0.2s, background-color 0.2s;
    cursor: pointer;
}

.action-button:hover {
    background-color: #E5EFFF;
    border: 1px solid #E5EFFF;
}

.action-button:focus {
    background-color: #E5EFFF;
    border: 1px solid #2F80ED;
}

.action-button:active {
    background-color: #2F80ED;
    border: 1px solid #2F80ED;
}

.action-button.danger:hover {
    background-color: #ffc3c3;
    border: 1px solid #ffc3c3;
}

.action-button.danger:focus {
    background-color: #ffc3c3;
    border: 1px solid #ff5e5e;
}

.action-button.danger:active {
    background-color: #ff5e5e;
    border: 1px solid #ff5e5e;
}

.action-button-statistic:before {
    background-image: url('/images/icons/statistic-icon.svg');
    background-size: 20px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.action-button:active.action-button-statistic {
    background-image: url('/images/icons/statistic-icon-white.svg');
    background-size: 20px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.action-button-settings {
    background-image: url('/images/icons/settings-icon-blue.svg');
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.action-button-remove {
    background-image: url('/images/icons/minus-icon.svg');
    /*background-size: cover;*/
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.action-button-delete {
    background-image: url('/images/icons/trash-icon.svg');
    /*background-size: cover;*/
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.action-button-file {
    background-image: url('/images/icons/file-attachment-icon.svg');
    /*background-size: cover;*/
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.action-button-link {
    background-image: url('/images/icons/url-icon.svg');
    /*background-size: cover;*/
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.action-button:active.action-button-settings {
    background-image: url('/images/icons/settings-icon-white.svg');
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
}

.page-content-footer {
    font-size: 12px;
    margin-top: 30px;
    border-top: 1px solid #E7E7EC;
    padding: 20px 0;
    color: #828282;
}

.page-content-footer a {
    font-size: 12px;
}

.appeal-chat-messages {

}

.appeal-chat-message {
    border-bottom: 1px solid #E7E7EC;
    padding: 10px;
    display: flex;
    background: #FFFFFF;
    border-radius: 10px;
    margin: 10px 0;
    position: relative;
}

.appeal-chat-message-date {
    color: #828282;
    font-size: 12px;
}

.appeal-chat-message-avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background: #F2994A;
    color: #FFFFFF;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px;
}

.appeal-chat-message-avatar-admin {
    background: #38A6DF;
}

.appeal-chat-message-avatar > img {
    width: 100%;
}

.appeal-chat-message-content-wrapper {

}

.appeal-chat-message-content {
    margin-top: 3px;
}

.appeal-chat-message-name {
    display: flex;
    align-items: baseline;
}

.appeal-chat-message-name-text {
    margin-right: 10px;
    font-weight: bold;
    font-size: 14px;
}

.appeal-chat-footer-send-form {
    margin-top: 10px;
}

.appeal-rating {
    position: relative;
}

.appeal-rating-wrapper {
    display: flex;
}

.appeal-rating-wrapper .appeal-rating-item {
    cursor: pointer;
    width: 20px;
    height: 20px;
    padding: 0 5px;
}

.appeal-rating-item {
    background: url('/images/icons/star.svg');
}


/* prev siblings should be red */
.appeal-rating-wrapper:hover .appeal-rating-item {
    background: url('/images/icons/star-active.svg');
}

.appeal-rating-item-disabled {
    cursor: default !important;
    background: url('/images/icons/star.svg') !important;
}

.appeal-rating-item-active {
    cursor: default !important;
    background: url('/images/icons/star-active.svg') !important;
}

.appeal-rating-wrapper .appeal-rating-item:hover ~ .appeal-rating-item {
    background: url('/images/icons/star.svg');
}

.tooltip.tooltip-right {
    position: absolute;
    white-space: nowrap;
    left: calc(100% + 10px);
    padding: 10px;
    top: -10px;
    background: #FFFFFF;
    border-radius: 8px;
}

.tooltip.tooltip-right:before {
    content: "";
    width: 5px;
    height: 5px;
    background: #FFFFFF;
    transform: rotate(45deg);
    position: absolute;
    left: -4px;
    top: calc(50% - 4px);
}

.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    overflow-y: auto;
}

.modal.fade {
    /*opacity: 0;*/
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.modal-dialog {
    width: 600px;
    margin: 30px auto
}

.modal-wide {
    width: 700px;
}

.modal-super-wide {
    width: 987px;
}

.modal-content {
    position: relative;
    background-color: #FFFFFF;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
    box-shadow: 0 24px 32px rgba(8, 35, 48, 0.06), 0 8px 16px rgba(8, 35, 48, 0.1);
    border-radius: 4px;
    padding: 30px;
}

.modal-backdrop {
    opacity: .5;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}

.modal-header {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(215, 223, 233, 0.6);
}

.modal-header .close {
    margin-top: -2px;
}

.modal-divider {
    height: 1px;
    margin: 20px 0;
    background: rgba(215, 223, 233, 0.6);
}

button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

.modal-body {
    position: relative;
    margin-top: 30px;
}

.modal-body img {
    max-width: 100%;
}

.modal-footer {
    margin-top: 30px;
    padding-top: 20px;
    text-align: right;
    border-top: 1px solid rgba(215, 223, 233, 0.6);
}

.modal-footer-left {
    float: left;
}
.modal-loader {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    /* background: rgba(0,0,0,0.1); */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    z-index: 2;
    font-size: 22px;
}
.flex-column {
    flex-direction: column;
}

.modal-body-loading .table-loader-content {
    background: transparent !important;
}

.modal-loader:before {
    display: none;
    content: "";
    position: absolute;
    background: url('/images/icons/reload-icon.svg') no-repeat;
    background-size: cover;
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
    width: 39px;
    height: 52px;
    z-index: 1;
    margin-top: -80px;
}

.modal-body.modal-body-loading {
    /*filter: blur(3px);*/
    overflow: hidden;
    min-height: 110px;
}

.comment-actions {
    text-align: right;
}

.col-with-sort {
    cursor: pointer;
}

.col-with-sort:after,
.col-with-sort-active:after,
.col-with-sort-reverse:after {
    content: "";
    display: inline-block;
    cursor: pointer;
    width: 10px;
    height: 6px;
    background-image: url("/images/icons/sort-rect.svg");
    opacity: 0.2;
    margin-left: 5px;
    transition: transform 0.2s;
}

.col-with-sort-active:after {
    opacity: 1;
    transform: rotate(180deg);
}

.col-with-sort-active .col-with-sort:after, .col-with-sort-reverse .col-with-sort:after {
    background-image: unset;
    width: unset;
    height: unset;
    content: unset;
}

.col-with-sort-reverse:after {
    opacity: 1;
    transform: rotate(0deg);
}

.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
    display: none;
    background: #FFFFFF;
    border: 1px solid #F2F2F2;
    box-shadow: 0 5px 15px rgba(68, 68, 79, 0.1);
    border-radius: 8px;
    padding: 6px 0;
    text-align: left;
    z-index: 10000;
}

.dropdown-content .dropdown-item {
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 14px;
    transition: background 0.2s;
    display: block;
    color: #333333;
}

.dropdown-content .dropdown-item:hover {
    background: rgba(224, 224, 224, 0.3);
    text-decoration: none;
}

.dropdown-item-simple {
    cursor: default !important;
}

.dropdown-item-danger {
    color: #EB5757;
}

.dropdown-item-statistic:before,
.dropdown-item-control:before,
.dropdown-item-archive:before,
.dropdown-item-phone:before,
.dropdown-item-random:before,
.dropdown-item-credit-card:before,
.dropdown-item-comment:before,
.dropdown-item-bell:before,
.dropdown-item-link:before,
.dropdown-item-appeals:before,
.dropdown-item-edit:before,
.dropdown-item-edit-email:before,
.dropdown-item-screen:before,
.dropdown-item-restore:before,
.dropdown-item-breakup:before,
.dropdown-item-unbreakup:before,
.dropdown-item-tags:before,
.dropdown-item-rebooking:before,
.dropdown-item-password:before,
.dropdown-item-login:before,
.dropdown-item-write-off:before {
    content: "";
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 10px;
}



.dropdown-item-link:before {
    background: url('/images/icons/link-icon.svg');
    background-size: cover;
}
.dropdown-item-edit-email:before {
    background: url('/images/icons/change-email-icon.svg');
    background-size: cover;
}

.dropdown-item-statistic:before {
    background: url('/images/icons/statistic-icon.svg');
    background-size: cover;
}

.dropdown-item-breakup:before {
    background: url('/images/icons/minus-icon.svg');
    background-size: cover;
}

.dropdown-item-unbreakup:before {
    background: url('/images/icons/plus-circle-disabled.svg');
    background-size: cover;
}

.dropdown-item-control:before {
    background: url('/images/icons/control-icon.svg');
    background-size: cover;
}

.dropdown-item-archive:before {
    background: url('/images/icons/minus-icon.svg');
    background-size: cover;
}

.dropdown-item-restore:before {
    background: url('/images/icons/plus-circle-outline-disabled.svg');
    background-size: cover;
}

.dropdown-item-phone:before {
    background: url('/images/icons/phone-icon.svg');
    background-size: cover;
}

.dropdown-item-random:before {
    background: url('/images/icons/random-icon.svg');
    background-size: cover;
}

.dropdown-item-credit-card:before {
    background: url('/images/icons/credit-card-icon.svg');
    background-size: cover;
}

.dropdown-item-comment:before {
    background: url('/images/icons/comment-icon.svg');
    background-size: cover;
}

.dropdown-item-login:before {
    background: url('/images/icons/login-icon.svg');
    background-size: cover;
}

.dropdown-item-bell:before {
    background: url('/images/icons/bell-icon.svg');
    background-size: cover;
}

.dropdown-item-rebooking:before {
    background: url('/images/icons/rebooking-icon.svg');
    background-size: cover;
}

.dropdown-item-appeals:before {
    background: url('/images/icons/support-gray-icon.svg') no-repeat;
    background-size: cover;
}

.dropdown-item-edit:before {
    background: url('/images/icons/pencil-gray-icon.svg') no-repeat;
    background-size: cover;
}

.dropdown-item-screen:before {
    background: url('/images/icons/screen-icon.svg') no-repeat center center;
    background-size: contain;
}

.dropdown-item-danger.dropdown-item-archive:before {
    background: url('/images/icons/minus-icon-red.svg');
    background-size: cover;
}

.dropdown-item-write-off:before {
    background: url('/images/icons/card-payment-icon.svg');
    background-size: cover;
}

.dropdown-item-tags:before {
    background: url('/images/icons/star.svg');
    background-size: cover;
}
.dropdown-item-password:before {
    background: url('/images/icons/lock-icon.svg');
    background-size: cover;
}

.alert-container {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 1100;
}

.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1100;
    display: none;
    flex-direction: column;
    max-height: 100vh;
    overflow-y: auto;
    width: 404px;
    padding-bottom: 15px;
}

.line-alert,
.alert {
    position: relative;
    padding: 16px 24px;
    margin-left: -50%;
    margin-right: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    opacity: 0;
}

.line-alert {
    opacity: 1;
    margin: 0;
}

.line-alert:last-child,
.alert:last-child {
    margin-bottom: 0;
}

.line-alert .alert-icon,
.alert .alert-icon {
    min-width: 24px;
    max-width: 24px;
    height: 24px;
    border-radius: 12px;
    margin-right: 16px;
}

.alert .alert-close {
    cursor: pointer;
    padding: 0 3px;
    margin-left: 20px;
    color: #333333;
}

.line-alert .alert-content .alert-title,
.alert .alert-content .alert-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.line-alert .alert-content .alert-text,
.alert .alert-content .alert-text {
    font-size: 14px;
    line-height: 24px;
}


.line-alert.alert-danger,
.alert.alert-danger {
    background: #FEE4E2;
    border: 1px solid #EA3D2F;
    border-radius: 4px;
    color: #EA3D2F;
}

.line-alert.alert-danger .alert-icon,
.alert.alert-danger .alert-icon {
    background-image: url("/images/icons/error-icon.svg");
}

.alert.alert-success {
    background: #DCF7E3;
    border: 1px solid #2FA84F;
    border-radius: 4px;
    color: #2FA84F;
}

.alert.alert-success .alert-icon {
    background-image: url("/images/icons/success-icon.svg");
}

.notification-wrapper {
    position: relative;
    padding: 16px 24px;
    align-self: center;
    margin-bottom: 20px;
    opacity: 0;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    width: 384px;
}

.notification-wrapper:last-child {
    margin-bottom: 0;
}

.notification-close {
    float: right;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.notification-title {
    font-size: 16px;
    line-height: 24px;
    color: #4F4F4F;
    margin-bottom: 4px;
}

.notification-text {
    font-size: 14px;
    line-height: 22px;
    color: #4F4F4F;
}

.ui-datepicker {
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    margin-top: 8px;
    display: none;
    z-index: 1052 !important;
}

.ui-state-default {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
}

.ui-state-active {
    background: rgba(215, 223, 233, 0.5);
    border-radius: 2px;
}

.ui-state-highlight {
    border: 1px solid rgba(215, 223, 233, 0.5);
}

.ui-datepicker-title {
    text-align: center;
    margin-top: 6px;
}

.ui-datepicker-prev {
    float: left;
}

.ui-datepicker-prev, .ui-datepicker-next {
    padding: 6px 12px;
    cursor: pointer;
}

.ui-datepicker-next {
    float: right;
}

.confirm-block {
    position: absolute;
    background: #FFFFFF;
    border-radius: 4px;
    padding: 16px;
    z-index: 1070;
    min-width: 259px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-left: -265px;
}

.confirm-block-right {
    margin-left: unset;
    right: -259px;
}

.confirm-block-top {
    margin-left: unset;
    right: 10px;
    margin-top: -144px;
}

.confirm-block-icon {
    width: 16px;
    height: 16px;
    background: url("/images/icons/confirm-icon.svg") no-repeat;
    background-size: cover;
    margin-right: 8px;
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
}

.confirm-block-text {
    font-size: 14px;
    line-height: 18px;
    color: #4F4F4F;
    max-width: 200px;
    display: inline-block;
    text-align: left;
}

.confirm-block-buttons {
    text-align: right;
    margin-top: 10px;
}

.user-comment {
    padding: 20px 0;
    border-bottom: 1px solid rgba(215, 223, 233, 0.6);
}

.user-comment:first-child {
    padding-top: 0;
}

.user-comment:last-child {
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
}

.user-comment-employee {
    display: inline-block;
    color: #333333;
    font-weight: 500;
    font-size: 14px;
}

.user-comment-date {
    font-size: 12px;
    color: #828282;
    margin-left: 15px;
    display: inline-block;
}

.user-comment-text {
    font-size: 14px;
    margin-top: 7px;
    color: #333333;
}

.games-grid {
    display: grid;
    gap: 16px;
    padding: 16px;
}

/* До 900px - 1 колонка */
@media screen and (max-width: 900px) {
    .games-grid {
        grid-template-columns: 1fr;
    }
}

/* От 900px до 1200px - 2 колонки */
@media screen and (min-width: 901px) and (max-width: 1200px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* От 1200px до 1400px - 3 колонки */
@media screen and (min-width: 1201px) and (max-width: 1400px) {
    .games-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Выше 1400px - 4 колонки */
@media screen and (min-width: 1401px) {
    .games-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.game-card > span {
    text-decoration: none;
}
.game-card {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    color: #333;
}

.game-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}
.game-card:hover,
.game-card:hover .game-title {
    color: #333;
    text-decoration: none;
}

.game-icon {
    width: 48px;
    height: 48px;
    margin-right: 12px;
    flex-shrink: 0;
}

.game-title {
    font-size: 16px;
    line-height: 1.4;
    word-break: break-word;
    hyphens: auto;
}


.schedule {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}

.schedule-day {
    display: flex;
    flex-direction: column;
    min-width: 250px;
    margin-right: 16px;
}

.schedule-day:last-child {
    margin-right: 0;
}

.schedule-day-head {
    margin-bottom: 6px;
    text-align: center;
}

.schedule-day-head-title {
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    border-radius: 4px;
}

.day-of-week {
    color: #4F4F4F;
    opacity: 0.8;
    font-size: 12px;
    line-height: 16px;
}

.schedule-current-day {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
    opacity: 0.8;
}

.schedule-lesson {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    border-radius: 4px;
    padding: 20px 15px 18px;
    margin-top: 6px;
    position: relative;
}

.schedule-lesson:active {
    border: 1px solid #2F80ED;
}

.schedule-lesson-time {
    background: #F2F2F2;
    border-radius: 4px;
    padding: 5px 10px;
    color: #4F4F4F;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
}

.course-type {
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 14px;
    padding: 5px;
    border-radius: 6px;
}

.course-type.trial {
    background: #3a983c;
    color: white;
}

.schedule-lesson-title {
    margin-top: 12px;
}

.schedule-lesson-title a {
    color: #2F80ED;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.schedule-lesson-additional-info span {
    display: block;
    font-size: 12px;
    color: #4F4F4F;
}

.schedule-lesson-teacher {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #4F4F4F;
}

.schedule-lesson-connect {
    margin-top: 15px;
}

.course-description-item {
    display: flex;
    flex-direction: row;
}

.course-description-item-title {
    font-size: 14px;
    line-height: 24px;
    color: #828282;
    margin-right: 8px;
}

.lessons-left.red {
    color: #EA3D2F;
}

.course-description-item-text {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #333333;
}

.lessons-left.red {
    color: #EA3D2F;
}

.course-schedule-time {
    background: #F2F2F2;
    border-radius: 8px;
    padding: 3px 6px;
    color: #828282;
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
    margin-bottom: 6px;
}

.course-schedule-time.burned {
    background: #EE877E;
    color: white;
}

.course-schedule-time-active {
    background: #38A6DF;
    font-weight: 500;
    color: #FFFFFF;
}

.course-schedule-date {
    color: #4F4F4F;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
}

.course-schedule-date.burned {
    color: #EE877E;
}

.course-schedule-visit-empty {
    cursor: pointer;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.course-schedule-visit-empty.burned {
    background: #EE877E;
}

.interval-period {
    padding: 4px 10px;
    font-family: Rubik;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: #4F4F4F;
    background-color: #FFFFFF;
    border-radius: 4px;
    transform: rotate(-90deg) scaleX(1);
}

.course-schedule-visit-attended, .course-schedule-visit-was-absent, .course-schedule-visit-was-absent-by-reason {
    cursor: pointer;
    border-radius: 4px;
    padding: 6px 10px;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
}

.course-schedule-visit-empty.disabled, .course-schedule-visit-attended.disabled,
.course-schedule-visit-was-absent.disabled, .course-schedule-visit-was-absent-by-reason.disabled {
    cursor: not-allowed;
}

.course-schedule-visit-attended {
    background: #2FA84F;
}

.course-schedule-visit-was-absent {
    background: #F2994A;
}

.course-schedule-visit-was-absent-by-reason {
    background: #F2C94C;
}

.text-center {
    text-align: center;
}

.course-schedule-visit-dd-item {
    display: flex !important;
    justify-content: start;
    align-items: center;
    padding: 6px 12px;
    transition: background 0.2s;
    border-bottom: 1px solid #E7E7EC;
}

.course-schedule-visit-dd-item:hover {
    background: #f5f5f5;
}

.course-schedule-visit-dd-item:last-child {
    border: none;
}

.course-schedule-visit-dd-item div {
    white-space: nowrap;
    margin-right: 6px;
}

.course-schedule-visit-dd-item div:last-child {
    margin-right: 0;
}

#schedule {
    margin-top: 30px;
}

.createLessonFormElements {
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    position: relative;
}

.createLessonFormElements:last-child {
    border: none;
    padding-bottom: 0;
}

.remove-lesson-from-elements {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 28px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 200ms linear;
    z-index: 1;
}

.remove-lesson-from-elements:hover {
    opacity: 1;
}

.partnersList, .studentsList {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #cccc;
    padding: 0 10px 10px;
}

.checkbox, .radio {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 27px;
}

.checkbox, .checkbox-inline, .radio, .radio-inline {
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 0;
}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -20px;
}

input[type=checkbox], input[type=radio] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}

input[type=checkbox], input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

input[type=checkbox].form-control,
input[type=checkbox].form-control-n {
    display: none;
}

input[type=checkbox].form-control + label:before,
input[type=checkbox].form-control-n + label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("/images/icons/checkbox/default.svg") no-repeat center;
    background-size: contain;
    margin-right: 5px;
}

input[type=checkbox].form-control + label:before {
    margin-top: 7px;
}

input[type=checkbox].form-control:checked + label:before,
input[type=checkbox].form-control-n:checked + label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("/images/icons/checkbox/active.svg") no-repeat center;
    background-size: contain;
    margin-right: 5px;
}

input[type=checkbox].form-control:checked + label:before {
    margin-top: 7px;
}

input[type=checkbox].form-control:disabled + label:before,
input[type=checkbox].form-control-n:disabled + label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("/images/icons/checkbox/disabled.svg") no-repeat center;
    background-size: contain;
    margin-right: 5px;
}

input[type=checkbox].form-control:disabled + label:before {
    margin-top: 7px;
}

input[type=checkbox].form-control:checked:disabled + label:before,
input[type=checkbox].form-control-n:checked:disabled + label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("/images/icons/checkbox/disabled_active.svg") no-repeat center;
    background-size: contain;
    margin-right: 5px;
}

input[type=checkbox].form-control:checked:disabled + label:before {
    margin-top: 7px;
}

.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

label.form-control-n {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.course-schedule-user-control-trigger {
    width: 4px;
    height: 16px;
    cursor: pointer;
    margin-left: 10px;
    padding: 3px 7px;
    background: url("/images/icons/dots-icon.svg") no-repeat center;
}

.course-schedule-user-wrapper {
    display: flex;
    align-items: center;
}

.course-schedule-user-control {
    display: inline-block;
}

/* для двух столбцов */
.help-elements > *:nth-child(2n - 1) {
    clear: both;
}

.help-elements div {
    margin-top: 20px;
}

.lesson-topic-edit-link {
    background-color: #ffffff;
    border-radius: 6px;
    background-image: url("/images/icons/pencil-icon.svg");
    width: 36px;
    height: 36px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;

    margin-left: 24px;
}

.lesson-abstract-text-btn {
    background-color: #ffffff;
    border-radius: 6px;
    background-image: url("/images/icons/book-icon.svg");
    width: 36px;
    height: 36px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;

    margin-left: 6px;
}

.btn-group.btn-group-justified {
    display: flex;
}

.btn-group .btn-group {

}

.btn-group .btn-group .btn.btn-default {
    border-radius: 0;
    border: 1px solid #2F80ED;
    border-right: 0;
    background: #ffffff;
}

.btn-group .btn-group:first-child .btn.btn-default {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.btn-group .btn-group:last-child .btn.btn-default {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    border-right: 1px solid #2F80ED;
}

.btn-group .btn-group .btn.btn-default.active {
    border-radius: 0;
    background: rgba(47, 128, 237, 0.3);
}

.short-user-schedule-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 22px;
}

.short-user-schedule-item {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 20px 15px 15px 15px;
    width: 249px;
    margin-right: 10px;
    flex-shrink: 0;
}

.short-user-schedule-item:last-child {
    margin-right: 0;
}

.short-user-schedule-item-time {
    background: #F2F2F2;
    border-radius: 4px;
    padding: 5px 10px;
    color: #4F4F4F;
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    cursor: default;
}

.short-user-schedule-item-date {
    /*background: #F2F2F2;*/
    /*border-radius: 4px;*/
    padding: 5px 0;
    color: #828282;
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    cursor: default;
}

.short-user-schedule-item-date__wrp {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.short-user-schedule-item-course-name {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #2F80ED;
    cursor: pointer;
    margin-top: 12px;
    margin-bottom: 4px;
}

.short-user-schedule-item-teacher-name {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #4F4F4F;
    cursor: default;
}

.login-page-bg {
    background: #E5E5E5;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.login-page {
    margin: 85px auto auto;
    width: 550px;
    z-index: 1;
    position: relative;
}

.login-page-container {
    text-align: center;
}

.locale-link-usa .icon {
    background-image: url(/images/locales/en_locale_new.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.locale-link-en .icon {
    background-image: url(/images/locales/en_locale_new.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.locale-link-bg .icon {
    background-image: url(/images/locales/bg_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.locale-link-ru .icon {
    background-image: url(/images/locales/ru-flag.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.locale-link-de .icon {
    background-image: url(/images/locales/de_locale_new.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.locale-link-po .icon {
    background-image: url(/images/locales/po_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.locale-link-ro .icon {
    background-image: url(/images/locales/ro_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.locale-link-ge .icon {
    background-image: url(/images/locales/ge_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.locale-link-ua .icon {
    background-image: url(/images/locales/ua-flag.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.locale-link-es .icon {
    background-image: url(/images/locales/es_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}
.locale-link-fr .icon {
    background-image: url(/images/locales/fr_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 32px;
    height: 24px;
    overflow: hidden;
    padding: 0;
    border-radius: 2px;
}

.login-page-hello-text {
    font-size: 32px;
    line-height: 40px;

    color: #333333;
    margin-top: 34px;
    margin-bottom: 60px;
}

.login-page-form {
    width: 100%;
    max-width: 360px;
    margin: auto
}

.login-page-locales {
    display: flex;
    justify-content: center;
}

.login-page .control-label {
    text-align: left;
}

.login-page-remember {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.login-logo {
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
}

.login-logo img {
    max-width: 250px;
    transform: scale(120%);
}

.login-logo-eu img {
    max-width: 250px;
    transform: scale(120%);
}

.locale-trigger {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.locale-trigger:before, .locale-dd-content a:before {
    content: "";
    width: 20px;
    height: 15px;
    margin-right: 10px;
    display: inline-block;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.1));
}

.locale-ru-main.locale-trigger:before, .locale-ru::before {
    background-image: url(/images/locales/ru-flag.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.locale-en-main.locale-trigger:before, .locale-en::before {
    background-image: url(/images/locales/en_locale_new.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.locale-bg-main.locale-trigger:before, .locale-bg::before {
    background-image: url(/images/locales/bg_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.locale-de-main.locale-trigger:before, .locale-de::before {
    background-image: url(/images/locales/de_locale_new.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.locale-po-main.locale-trigger:before, .locale-po::before {
    background-image: url(/images/locales/po_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.locale-ge-main.locale-trigger:before, .locale-ge::before {
    background-image: url(/images/locales/ge_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.locale-ua-main.locale-trigger:before, .locale-ua::before {
    background-image: url(/images/locales/ua-flag.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.locale-ro-main.locale-trigger:before, .locale-ro::before {
    background-image: url(/images/locales/ro_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.locale-es-main.locale-trigger:before, .locale-es::before {
    background-image: url(/images/locales/es_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.locale-fr-main.locale-trigger:before, .locale-fr::before {
    background-image: url(/images/locales/fr_locale.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.menu-locale {
    position: relative;
}

.locale-dd-content {
    display: none;
    position: absolute;
    background: #ffffff;
    border: 1px solid #F2F2F2;
    box-shadow: 0 4px 40px rgba(16, 81, 140, 0.34);
    border-radius: 4px;
    top: -180px;
    left: 100px;
    padding: 17px 14px;
    z-index: 1;
    transform: translateY(-30px);
}

.locale-dd-content a {
    font-size: 14px;
    line-height: 24px;
    color: #4F4F4F;
    margin-bottom: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.locale-dd-content a:last-child {
    margin-bottom: 0;
}

.accept-offer {
    font-size: 14px;
}

.payout-is-paidout .th, .payout-is-paidout .td {
    background: rgba(59, 242, 15, 0.15) !important;
}

.payout-item {
    display: flex;
    margin-bottom: 10px;
}

.payout-item:last-child {
    margin-bottom: 0;
}

.payout-item-date {
    margin-right: 7px;
}

.payout-item-status {
    cursor: pointer;
    text-decoration: underline;
}

.proceedLead .th, .proceedLead .td {
    background: rgba(0, 175, 0, 0.18) !important;
}

.convertLead .th, .convertLead .td {
    background: rgba(0, 175, 0, 0.40) !important;
}

.boughtLead .th, .boughtLead .td {
    background: rgb(250, 232, 99) !important;
}


.city-trip, .address-trip, .subway-trip {
    position: absolute;
    padding: 10px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    z-index: 2;
    background: white;
    width: 200px;
    display: none;
    max-height: 400px;
    overflow-y: auto;
}

.address-trip {
    width: 350px;
}

.city-trip-item {
    padding: 5px;
    cursor: pointer;
}

.city-trip-item:hover {
    background: #f1f1f1;
}


.searchResults, .searchToMoveResults {
    position: absolute;
    display: none;
    min-width: 250px;
    max-width: 400px;
    background: #fff;
    margin-top: 5px;
    margin-left: 5px;
    padding: 10px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    z-index: 2;
}

#moveFilesButton {
    display: none;
}

.materialFromSearch {
    padding: 10px;
    display: block;
}

.materialToMoveFromSearch {
    cursor: pointer;
    padding: 10px;
    display: block;
}

.material-link:before {
    content: "";
    margin-right: 7px;
    display: inline-block;
}

.material-link:after {
    content: "";
    margin-left: 7px;
    display: inline-block;
}

.material-link.material-folder:before {
    background: url('/images/icons/folder-icon.svg');
    width: 12px;
    height: 10px;
}

.material-link.material-url:before {
    background: url('/images/icons/url-icon.svg');
    width: 12px;
    height: 12px;
}

.material-link.material-url.material-ebook:before {
    background: url('/images/icons/e-book-icon.svg');
    width: 12px;
    height: 12px;
}

.material-link.material-url.material-ebook:after {
    background: url('/images/icons/e-book.svg');
    width: 28px;
    height: 10px;
}

.material-link.material-file:before {
    background: url('/images/icons/file-icon.svg');
    width: 10px;
    height: 12px;
}

.page-alert {
    margin-left: unset !important;
    margin-right: unset !important;
    opacity: 1;
}

.chat-icon {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #299446;
    background-image: url("/images/icons/chat-icon.svg");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    box-shadow: 0 24px 32px rgba(8, 35, 48, 0.06), 0 8px 16px rgba(8, 35, 48, 0.1);
    border-radius: 30px;
    z-index: 2;
}

.chat-modal-wrapper {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 300px;
    display: none;
    z-index: 1;
}

.chat-modal {
    background: #FFFFFF;
    box-shadow: 0 8px 16px rgba(23, 31, 70, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.chat-modal-header {
    background: #299446;
    padding: 16px;
    position: relative;
}

.chat-modal-messages {
    padding: 0 16px 16px;
    overflow: auto;
    max-height: 400px;
    display: flex;
    flex-direction: column;
}

.chat-modal-message {
    max-width: 210px;
    color: #4F4F4F;
    font-size: 14px;
    line-height: 18px;
    padding: 8px;
    border-radius: 4px;
    margin-top: 20px;
}

.chat-message-outcome {
    background: #EBF2FF;
    align-self: flex-end;
    position: relative;
}

.chat-message-income {
    background: #F6F6F9;
    align-self: flex-start;
}

.chat-message-author {
    font-weight: bold;
    margin-right: 27px;
}

.chat-modal-input {
    padding: 16px;
    position: relative;
}

.chat-modal-input-send {
    width: 27px;
    height: 38px;
    background: url("/images/icons/send-message-icon.svg") center no-repeat;
    position: absolute;
    right: 19px;
    top: 17px;
    cursor: pointer
}

.chat-modal-input-attachments {
    width: 21px;
    height: 21px;
    margin-top: 9px;
    background: url("/images/icons/paper-clip.svg") center no-repeat;
    cursor: pointer;
    position: absolute;
    right: 48px;
    top: 17px;
}

.chat-dialog-add-attachment-icon {
    width: 24px;
    height: 24px;
    background: url("/images/icons/paper-clip.svg") center no-repeat;
    cursor: pointer;
    background-size: contain;
    display: inline-flex;
    margin-bottom: -5px;
    transform: rotate(45deg);
    margin-top: 10px;
    margin-right: 8px;
}

.chat-modal-header-logo {
    background-color: #2FA84F;
    border-radius: 99px;
    width: 40px;
    height: 40px;
    padding: 8px;
}

.chat-modal-header-logo img {
    width: 100%;
}

.chat-modal-header-close {
    position: absolute;
    cursor: pointer;
    right: 22px;
    top: 19px;
    font-size: 30px;
    color: #fff;
}

.chat-wrapper {
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 #0000000A;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
}

.chat-users {
    width: 354px;
    padding: 12px 0;
    min-height: 500px;
    height: 90vh;
    overflow-y: auto;
}

.chat-users-title {
    color: #3E4345;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    margin-top: 16px;
    padding: 0 16px;
}

.chat-users-search {
    padding: 0 16px;
}

.chat-users-list {

}

.chat-users-user {
    display: flex;
    flex-direction: row;
    cursor: pointer;
    padding: 12px 16px;
    background: transparent;
    transition: background 0.2s linear;
    margin-left: 8px;
    border-radius: 8px;
}
.chat-users-user.active-chat {
    background: #E8F5FB;
}
.chat-users-user:first-child {
    margin-top: 12px;
}

.chat-users-user-avatar-block {
    margin-right: 10px;
    position: relative;
    display: flex;
    align-items: center;
}

.chat-users-user-avatar, .chat-dialog-messages-list-item-avatar-income {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-image: url("/images/icons/person-icon.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-color: #2FA84F;
}

.budge {
    background: #EA3D2F;
    position: absolute;
    font-size: 12px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    right: 0;
    top: 20px;
    min-width: 24px;
    height: 24px;
    border-radius: 12px;
    transform: translateX(-1px);
}
.budge.isLarge {
    padding: 0 8px;
}

.chat-users-user-info-block {
    width: calc(100% - 50px);
}

.chat-users-user-info-block-username {
    position: relative;
}

.chat-users-user-info-block-name {
    color: rgba(0, 0, 0, 0.87);
    font-size: 16px;
    line-height: 24px;
    width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-users-user-info-block-time {
    font-size: 14px;
    line-height: 20px;
    float: right;
    color: #C6CACC;
}

.chat-users-user-info-block-message {
    font-size: 14px;
    line-height: 20px;
    color: #BDBDBD;
    width: 85%;
    transition: border-bottom 0.2s linear;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-users-user:last-child .chat-users-user-info-block-message,
.chat-users-user-active .chat-users-user-info-block-message {
    border-bottom: 1px solid transparent;
}

.chat-users-user-active {
    background: rgba(215, 223, 233, 0.24);
}
.chat-dialog-header-username {
    display: flex;
    align-items: center;
}

.chat-dialog {
    border-left: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px;
    height: 90vh;
    width: 696px;
}

.chat-dialog-header {
    padding: 13px;
    border-bottom: 1px solid #ededed;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    position: relative;
    color: #333333;
}

.chat-dialog-header a {
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    color: #333333;
}

.chat-dialog-input {
    padding: 12px 12px 6px 12px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.chat-dialog-input-wrapper {
    border: none;
    width: 88%;
    position: relative;
}
.chat-send-msg-icon {
    margin-top: 8px;
    margin-left: 6px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.chat-send-msg-icon:hover {
    filter: brightness(0) saturate(100%) invert(46%) sepia(84%) saturate(579%) hue-rotate(156deg) brightness(96%) contrast(90%);
}
.chat-mobile-back-button {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    position: absolute;
    left: 10px;
    top: calc(50% - 12px);
}

.chat-dialog-input-textarea {
    width: 100%;
    border: 1px solid #C2C2C2;
    border-radius: 6px;
    padding: 8px 16px;
    resize: none;
    outline: none;
    max-height: 100px;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.44px;
    font-family: Rubik, sans-serif;
}
.chat-dialog-messages-incourse-sender {
    font-size: 14px;
    font-weight: bold;
}

.chat-dialog-input-send {
    background: white;
    padding: 6px 16px;
    text-align: right;
}

.chat-dialog-history {
    padding: 0 28px;
    overflow: auto;
}

.chat-dialog-messages {
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: flex-end;
}

.chat-dialog-messages-list-item {
    display: flex;
    margin-top: 24px;
    position: relative;
}
.chat-dialog-messages-list-item.income {
    justify-content: flex-start;
}
.chat-dialog-messages-list-item.outcome {
    justify-content: flex-end;
}
.chat-dialog-messages-list-item-avatar-outcome {
    width: 40px;
    height: 40px;
    margin-left: 24px;
}
.chat-dialog-messages-list-item-avatar-income {
    width: 40px;
    height: 40px;
    margin-right: 24px;
}
.chat-dialog-messages-list-item-info-block {
    position: relative;
}
.chat-dialog-messages-list-item-info-block.outcome {
    padding-left: 64px;
}
.chat-dialog-messages-list-item-info-block.income {
    padding-right: 64px;
}
.chat-dialog-messages-list-item-info-block-message {
    padding: 14px;
    font-size: 14px;
    line-height: 24px;
    position: relative;
}
.chat-dialog-messages-list-item-info-block-message.income {
    background: #E8F6FC;
    color: black;
    border-radius: 0 8px 8px 8px;
}
.chat-dialog-messages-list-item-info-block-message.income:before {
    content: '';
    background-image: url('data:image/svg+xml,%3Csvg width="30" height="21" viewBox="0 0 30 21" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M30 1C30 0.447716 29.5523 0 29 0H2.05497C0.959562 0 0.569073 1.70804 1.52316 2.24622C4.193 3.75219 7.44206 5.92758 9.5 8.5C13.5 13.5 15 16.5 15 20C15 23.1335 27.0229 15.8471 29.541 14.2867C29.8323 14.1062 30 13.7923 30 13.4496V1Z" fill="%23E8F6FC"/%3E%3C/svg%3E');
    position: absolute;
    top: 0;
    left: -15px;
    width: 30px;
    height: 21px;
}
.chat-dialog-messages-list-item-info-block-message.outcome:before {
    content: '';
    background-image: url('data:image/svg+xml,%3Csvg width="30" height="21" viewBox="0 0 30 21" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 1C0 0.447716 0.447715 0 1 0H27.945C29.0404 0 29.4309 1.70804 28.4768 2.24622C25.807 3.75219 22.5579 5.92758 20.5 8.5C16.5 13.5 15 16.5 15 20C15 23.1335 2.97706 15.8471 0.459016 14.2867C0.167741 14.1062 0 13.7923 0 13.4496V1Z" fill="%23189FDA"/%3E%3C/svg%3E');
    position: absolute;
    top: 0;
    right: -15px;
    width: 30px;
    height: 21px;
}
.chat-dialog-messages-list-item-info-block-message.outcome {
    background: #189FDA;
    color: white;
    border-radius: 8px 0 8px 8px;
}
.chat-dialog-messages-list-item-info-block-message.empty {
    display: none;
}
.chat-dialog-messages-list-item-info-block-time {
    font-size: 14px;
    margin-top: 4px;
    color: #BDBDBD;
}







.teachers-list-wrapper {
    position: relative;
}

.teachersList {
    position: absolute;
    z-index: 1;
    background: #fff;
    padding: 6px;
    border-radius: 3px;
    border: 1px solid #ccc;
    top: -16px;
    left: 20px;
    display: none;
}

.searchByTeacherElem {
    padding: 4px 8px;
    cursor: pointer;
    background: transparent;
    transition: background 0.2s linear;
    border-radius: 3px;
}

.searchByTeacherElem:hover {
    background: rgba(204, 204, 204, 0.3);
}

.appeal-chat-footer-send-form-text-field {
    position: relative;
}

.appeal-chat-footer-send-form-smiles,
.chat-footer-send-form-smiles {
    position: absolute;
    z-index: 1;
    right: 5px;
    top: 1px;
    padding: 4px;
    background: transparent;
    border-radius: 3px;
    transition: background 0.2s linear;
    cursor: pointer;
}

.chat-footer-send-form-smiles {
    right: 68px;
    top: 18px;
}

.chat-main-send-form-smiles {
    right: 5px !important;
    top: 5px !important;
}

.chat-attachment-item, .chat-message-attachment-item {
    background: rgba(215, 223, 233, 0.24);
    border-radius: 4px;
    padding: 5px;
    color: #4F4F4F;
    font-size: 10px;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 3px;
    margin-right: 5px;
}

.chat-attachment-item a {
    font-size: 12px;
}

.chat-attachment-item div {
    display: inline-block;
    margin-right: 6px;
}

.chat-attachment-item:last-child {
    margin-right: 0;
}

.chat-modal-message .chat-attachment-item {
    margin-right: 0 !important;
    display: block;
}

.chat-modal-message-outcome .chat-attachment-item {
    background: #fff;
}

.chat-modal-message-attachments {
    margin-top: 10px !important;
}

.chat-attachment-item-link {
    display: block !important;
}

.chat-message-attachment-item {
    background: #fff;
    display: block;
}

.chat-attachment-item-icon {
    width: 9px;
    height: 11px;
}

.chat-dialog-attachment-item-icon {
    width: 15px;
    height: 18px;
    margin-right: 14px;
}

.chat-attachment-item-file .chat-attachment-item-icon, .chat-dialog-attachment-item-file .chat-dialog-attachment-item-icon {
    background: url('/images/icons/file-attachment-icon.svg');
    background-size: cover;
}

.chat-attachment-item-image .chat-attachment-item-icon, .chat-dialog-attachment-item-image .chat-dialog-attachment-item-icon {
    background: url('/images/icons/file-attachment-icon.svg');
    background-size: cover;
}

.appeal-chat-footer-send-form-smiles:hover {
    background: rgba(204, 204, 204, 0.5);
}

.appeal-chat-footer-send-form-smiles-container,
.chat-footer-send-form-smiles-container {
    position: absolute;
    max-height: 200px;
    max-width: 302px;
    border-radius: 4px;
    padding: 4px;
    overflow: auto;
    background: #fff;
    z-index: 2;
    box-shadow: 0px 24px 32px rgba(8, 35, 48, 0.06), 0px 8px 16px rgba(8, 35, 48, 0.1);
    top: -90px;
    right: 40px;
    display: none;
}

.chat-footer-send-form-smiles-container {
    top: -190px;
    left: 20px;
}

.appeal-chat-footer-send-form-smiles-container-items-list,
.chat-footer-send-form-smiles-container-items-list {
    user-select: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.appeal-chat-footer-send-form-smiles-container-item,
.chat-footer-send-form-smiles-container-item {
    cursor: pointer;
}

.not-read-messages-count {
    position: absolute;
    padding: 4px 8px;
    background: red;
    color: #fff;
    border-radius: 30px;
    right: -4px;
    top: -7px;
    font-size: 12px;
    display: none;
}

.chat-dialog-message-list-empty {
    font-size: 18px;
    color: #818c99;
    cursor: default;
    text-align: center;
}

.chat-modal-form-control {
    padding-right: 72px !important;
}

.unified-loader, .chat-attachments-loader, .news-poster-loader, .quest-landscape-image-loader, .quest-friend-image-loader, .appeal-attachments-loader, .appeal-chat-attachments-loader {
    display: none;
}

.unified-loader div, .chat-attachments-loader div, .news-poster-loader div, .quest-landscape-image-loader div, .quest-friend-image-loader div, .appeal-attachments-loader div, .appeal-chat-attachments-loader div {
    border-radius: 4px;
    height: 12px;
    background: gray;
    width: 0;
    transition: width linear 30ms;
}

.chat-dialog-message-attachment-container, .appeal-attachments-container {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.chat-dialog-attachment-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    background: white;
    border: 1px solid #189fda;
    padding: 13px;
}
.chat-dialog-attachment-item.outcome {
    border-radius: 12px 0 12px 12px;
}
.chat-dialog-attachment-item.income {
    border-radius: 0 12px 12px 12px;
}

.chat-dialog-attachment-item-title {
    font-size: 12px;
    line-height: 14px;
    color: #4F4F4F;
}

.chat-dialog-attachment-item-link a {
    font-size: 10px;
    line-height: 12px;
}

.chat-attachments-container, .quest-attachments-container {
    text-align: left;
    margin-top: 10px;
    display: none;
}

.main-menu-notify {
    background: url("/images/icons/bell.svg");
    width: 18px;
    height: 20px;
    cursor: pointer;
    position: relative;
}

.main-menu-no-notify {
    background: url("/images/icons/no-bell.svg");
    width: 18px;
    height: 20px;
    cursor: pointer;
    position: relative;
}

.badge {
    display: inline-block;
    padding: .35em .35em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem !important;
}

.bg-danger {
    background-color: #dc3545 !important;
}

.main-menu-notify-badge {
    position: absolute;
    right: 0;
    display: none;
}

.empty-course-error {
    margin-top: 12px;
    font-size: 18px;
    margin-bottom: 6px;
}

.login-page-wrapper {
    z-index: 1;
    position: relative;
    display: flex;
}

.login-page-img {
    width: 45%;
    background: url("/images/login-img.jpg");
    background-position-x: 23%;
    background-size: cover;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .login-page-img {
        display: none;
    }
}

#empty-hw-placeholder {
    height: 300px;
}

.hw-blocks-wrapper {
    padding: 13px 0 20px;
    overflow-x: scroll;
}

.hw-blocks {
    display: flex;
    justify-content: start;
    flex-direction: row;
    width: 100%;
    margin-top: 7px;
    /*overflow-x: scroll;*/
    overflow: visible;
}

.hw-blocks.hw-page {
    margin-top: 10px;
    overflow-x: scroll;
    padding-bottom: 12px;
    margin-bottom: 50px;
}

.hw-block {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #189fda;
    border-radius: 18px;
    min-width: 249px;
    max-width: 249px;
    margin-right: 20px;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
}

.hw-block:last-child {
    margin-right: 0;
}

.hw-block-title {
    padding: 12px 10px;
    border-bottom: 1px solid #E7E7EC;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.hw-block-day {
    background: #F2F2F2;
    border-radius: 4px;
    padding: 5px 10px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #4F4F4F;
}

.hw-block-reward {
    cursor: default;
    border: 1px solid #2FA84F;
    box-sizing: border-box;
    border-radius: 15px;
    padding: 3px 8px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #2FA84F;
    display: flex;
    justify-content: center;
    align-items: center;

    /*TODO: REMOVE!*/
    display: none;
}

.hw-block-content {
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
    justify-content: space-between;
}

.hw-block-content-list {
    flex-grow: 1;
    overflow-y: auto;
    overflow: visible;
}

.hw-block-content-list-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    padding: 0 0 5px;
}

.hw-block-content-list-items {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.hw-block-content-list-item:last-child {
    padding: 0;
}

.hw-block-content-list-item-title {
    font-size: 14px;
    line-height: 17px;
    color: #333333;
}

.hw-block-content-list-item-title.hw-done {
    color: #2FA84F;
    position: relative;
    margin-left: 18px;
}

.done-hw-icon-in-block {
    position: absolute;
    left: 0;
    width: 16px;
    height: auto;
    object-fit: contain;
}

.hw-block-content-list-item-done {
    width: 14px;
    height: 14px;
    background: url('/images/icons/done-hw-icon.svg');
    background-size: cover;
    margin-top: 1px;
}

.hw-table {
    margin-top: 60px;
}

.course-hw-list {
    margin-top: 15px;
}

.course-hw-list-content {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 15px;
}

.course-hw-list-students {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
    margin-left: 10px;
}

.course-hw-list-students-user {
    padding: 12px 18px 10px;
    font-size: 14px;
    color: #828282;
    cursor: pointer;
    background-color: transparent;
    font-weight: 400;

    transition: color 0.3s linear, background-color 0.3s linear, font-weight 0.3s linear;
}

.course-hw-list-students-user-active {
    background-color: #FFFFFF;
    border-radius: 4px 4px 0px 0px;

    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    /* identical to box height */

    display: flex;
    align-items: center;
    text-align: center;

    /* Gray 1 */

    color: #333333;
}

.course-hw-slider {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.course-hw-slider-elements {
    display: flex;
    flex-direction: row;
}

.course-hw-slider-element {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url("/images/icons/play-icon.svg") center no-repeat;
    transition: box-shadow 0.2s, -moz-box-shadow 0.2s, -webkit-box-shadow 0.2s;
    -webkit-box-shadow: 0px 0px 5px -1px rgba(34, 60, 80, 0);
    -moz-box-shadow: 0px 0px 5px -1px rgba(34, 60, 80, 0);
    box-shadow: 0px 0px 5px -1px rgba(34, 60, 80, 0);
}

.course-hw-slider-element:hover {
    -webkit-box-shadow: 0px 0px 5px -1px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 5px -1px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 5px -1px rgba(34, 60, 80, 0.2);
}

.course-hw-slider-element:active {
    -webkit-box-shadow: 0px 0px 3px -1px rgba(34, 60, 80, 0.2) inset;
    -moz-box-shadow: 0px 0px 3px -1px rgba(34, 60, 80, 0.2) inset;
    box-shadow: 0px 0px 3px -1px rgba(34, 60, 80, 0.2) inset;
}

.hw-slider-left {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    margin-right: 5px;
}

#quest-map {
    /*background: url("/images/quest/backgrounds/bg1.png");*/
    width: 1150px;
    height: 692px;
    margin-left: -50px;
    position: relative;
}

#landscape-preview {
    width: 927px;
    height: 557px;
    position: relative;
}

.quest-btn-wrapper {
    background: #94644C;
    border-radius: 12px;
    padding-bottom: 5px;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}

.quest-btn-wrapper:hover {
    text-decoration: none;
}

.quest-btn-wrapper:last-child {
    margin-right: 0;
}

.quest-btn {
    border-radius: 11px;
    padding: 11px 24px 6px;
    font-size: 24px;
    font-weight: 700;
    font-family: Bangbang, Rubik, serif;
    line-height: 24px;
    letter-spacing: 0.05em;
}

.quest-btn-yellow-wrapper {
    background: #7E4238;
    border-radius: 12px;
    padding-bottom: 5px;
}

.quest-btn-yellow {
    background: #FFDA3A;
    border-top: 5px solid #FFFF85;
    color: #B3633F;
}

.quest-btn-green-wrapper {
    background: #357016;
    border-radius: 12px;
    padding-bottom: 5px;
}

.quest-btn-green {
    background: #89DE16;
    border-top: 5px solid #F3F94F;
    color: #52632D;
}

.quest-top-buttons {
    padding-top: 20px;
    padding-left: 50px;
}

.quest-weekly-tasks {
    width: 293px;
    height: 272px;
    background: url("/images/quest/weekly-task-bg.svg") center no-repeat;
    position: absolute;
    right: 31px;
    top: -41px;
}

.quest-weekly-tasks-title {
    font-family: Bangbang, Rubik, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 25px;
    line-height: 25px;
    text-align: center;
    letter-spacing: 0.05em;
    color: #931937;
    margin-top: 38px;
}

.quest-weekly-task-item-icon {
    width: 23px;
    height: 26px;
    background: url("/images/quest/weekly-task-icon.svg") center no-repeat;
}

.quest-weekly-task-item-icon-done {
    background: url("/images/quest/weekly-task-icon-done.svg") center no-repeat;
}

.quest-weekly-task-list {
    width: 200px;
    margin: 30px auto auto;
    height: 139px;
    overflow-y: auto;
}

.quest-weekly-task-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 9px;
}

.quest-weekly-task-item-title {
    font-family: Bangbang, Rubik, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.05em;
    color: #7E4238;
    width: 153px;
    padding: 0 9px;
}

.quest-weekly-task-item-reward {
    font-family: Bangbang, Rubik, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
    text-align: right;
    letter-spacing: 0.05em;
    color: #52632D;
}

.quest-friends {
    background: #FFF0D1;
    border-bottom: 5px solid #94644C;
    border-radius: 33px;
    /*width: 288px;*/
    height: 66px;
    position: absolute;
    left: 40px;
    bottom: 13px;
    z-index: 2;
    display: flex;
}

.quest-bubble {
    position: absolute;
    width: 72px;
    height: 53px;
}

.quest-bubble-done {
    background: url("/images/quest/bubble.svg") center no-repeat;
    cursor: pointer;
}

.quest-bubble-active {
    background: url("/images/quest/bubble-empty.svg") center no-repeat;
    cursor: pointer;
}

.quest-bubble-index {
    -webkit-text-stroke: 2px white;
    margin-top: -21px;
    font-size: 45px;
    font-family: Bangbang, Rubik, serif;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    font-feature-settings: 'pnum' on, 'lnum' on;


    background: -webkit-linear-gradient(#1BA2DD, #084E6C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quest-friend {
    position: absolute;
}

.quest-friend-fox {
    background: url("/images/quest/fox.svg") center no-repeat;
    width: 63px;
    height: 69px;
    background-size: cover;
}

.quest-friend-bee {
    background: url("/images/quest/bee.svg") center no-repeat;
    width: 51px;
    height: 64px;
    background-size: cover;
}

.quest-friend-bird {
    background: url("/images/quest/bird.svg") center no-repeat;
    width: 92px;
    height: 64px;
    background-size: cover;
}

.quest-modal-bg {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    display: none;
    z-index: 20;
}

.quest-modal {
    position: fixed;
    display: none;
    z-index: 21;
    text-align: center;
    width: 100%;
}

.quest-modal-wrapper {
    background: #FFFFFF;
    box-shadow: 0 24px 32px rgba(8, 35, 48, 0.06), 0 8px 16px rgba(8, 35, 48, 0.1);
    border-radius: 20px;
    padding: 28px 30px;
    display: inline-block;
}

.quest-modal-title {
    font-family: Bangbang, Rubik, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 26px;
    line-height: 26px;
    /* identical to box height */

    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-feature-settings: 'pnum' on, 'lnum' on;

    color: #6F3921;
    margin-bottom: 25px;
}

.quest-modal-task-image {
    text-align: center;
}

.quest-modal-task-image img {
    max-width: 100%;
    max-height: 350px;
}

.quest-modal-task-text {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    color: #4F4F4F;
    margin-top: 20px;
    max-width: 528px;
}

.quest-modal-task-buttons {
    text-align: center;
}

.quest-modal-task-answers {
    text-align: center;
    margin-bottom: 25px;
    margin-top: 15px;
}

.quest-input {
    border: 1px solid #D9D9D9;
    box-sizing: border-box;
    border-radius: 4px;
    outline: none;
    padding: 8px 16px;
}

.profile-grid {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: start;
    margin-top: 30px;
    gap: 30px;
    flex-wrap: wrap;
}

.abakus-quest-profile-block {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    position: relative;
    height: 174px;
    flex-direction: column;
    padding-left: 136px;
    padding-right: 30px;
    margin-top: 22px;
    justify-content: center;
}

.abakus-olympiad-profile-block-2 {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    overflow: visible;
    position: relative;
    height: 174px;
    flex-direction: column;
    padding-left: 136px;
    padding-right: 70px;
    margin-top: 22px;
    justify-content: center;
}

.abakus-olympiad-profile-block {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    position: relative;
    height: 174px;
    flex-direction: column;
    padding-right: 10px;
    margin-top: 22px;
    justify-content: center;
}

.profile-grid-elem-olympiad-block {
    display: block;
}

.abakus-olympiad-profile-block-row {
    display: flex;
}

.image-olympiad-ru, .image-olympiad-en {
    width: 150px;
    height: 170px;
}

.abakus-olympiad-profile-block-column-1 {
    width: 32%;
}

.abakus-olympiad-profile-block-column-2 {
    width: 68%;
}

.abakus-olympiad-profile-block-item-column-2 {
    margin-right: 20px;
    /*margin-top: 20px;*/
}

.abakus-olympiad-profile-block-item-2 {
    /*display: flex;*/
    /*justify-content: center;*/
    /*margin-top: 20px;*/
    /*margin-left: 15px;*/
}

.abakus-olympiad-profile-block-item-column-1 {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: start;
}

.olympiad-block-marker::marker {
    margin-right: 1px;
}

.abakus-olympiad-profile-block-item-row {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    margin-left: 20px;
}

.abakus-olympiad-profile-block-title {
    text-align: center;
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    color: #333333;
    margin-top: 20px;
}

.btn-olympiad-registration {
    background: #f43c44;
    border: 1px solid #f43c44;
    border-radius: 4px;
    padding-left: 23px;
    padding-right: 23px;
    color: #FFFFFF !important;
    margin-bottom: 10px;
}

.btn-olympiad-demo {
    color: #2F80E;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #2F80ED;
    padding-left: 44px;
    padding-right: 44px;
}

.btn-olympiad-demo:hover {
    transition-duration: 1s;
    color: white;
    text-decoration: none;
    background-color: #2F80ED;
}

.abakus-olympiad-profile-block-item-column-item-demo p {
    font-size: 9px;
    text-align: center;
}

.abakus-olympiad-profile-block-item-column-item-demo:last-child {
    margin-top: 10px;
}

.btn-olympiad-login {
    background: white;
    border: 1px solid #f43c44;
    color: #f43c44 !important;
    border-radius: 4px;
    margin-bottom: 10px;
}

.abakus-olympiad-profile-block-item-column-item-position {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.abakus-olympiad-profile-block-item-column-item-appendix {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.link-olympiad-position {
    font-size: 12px;
    font-weight: 500;
    /*margin-left: -10px;*/
}

.link-olympiad-appendix {
    font-size: 12px;
    font-weight: 500;
    margin-left: 20px;
    text-align: center;
}

.abakus-olympiad {
    max-width: 590px;
}

.abakus-olympiad h3 {
    font-family: Rubik;
    font-size: 19px;
    font-weight: 600;
    line-height: 16px;
    text-align: left;
}

.profile-grid-elem {
    width: 48%;
}

.profile-grid-elem:last-child {
    margin-right: 0;
}

.abakus-quest-profile-block:before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 105px;
    height: 174px;
    background: url("/images/quest/profile-img.svg") center no-repeat;
}

.abakus-olympiad-profile-block-2:before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 118px;
    height: 174px;
    background: url("/images/olympiad-registration/group-olympiad-en.svg") center no-repeat;
}

.abakus-olympiad-profile-block-2.lang-ru:before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 118px;
    height: 174px;
    background: url("/images/olympiad-registration/group-olympiad.svg") center no-repeat;
}

.abakus-olympiad-profile-block-2.lang-ru:after {
    content: "";
    position: absolute;
    right: -12%;
    top: -35%;
    width: 100%;
    height: 100%;
    background: url("/images/olympiad-registration/abakus-promo-ru.svg") right no-repeat;
}

.abakus-olympiad-profile-block-2.lang-en:after {
    content: "";
    position: absolute;
    right: -12%;
    top: -35%;
    width: 100%;
    height: 100%;
    background: url("/images/olympiad-registration/abakus-promo-en.svg") right no-repeat;
}

.abakus-olympiad-profile-block-2.lang-de:after {
    content: "";
    position: absolute;
    right: -12%;
    top: -35%;
    width: 100%;
    height: 100%;
    background: url("/images/olympiad-registration/abakus-promo-de.svg") right no-repeat;
}

.abakus-quest-profile-block-title {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    color: #333333;
}

.abakus-quest-profile-block-text {
    margin-top: 8px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    color: #4F4F4F;
    margin-bottom: 22px;
}

.quest-profile-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}

.quest-profile-col {
    display: flex;
    flex-direction: column;
}

.quest-profile-block {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 12px 16px;
}

.quest-profile-block-profile {
    width: 218px;
    height: 344px;
}

.quest-profile-block-rewards {
    width: 468px;
    height: 344px;
}

.quest-profile-block-balance {
    width: 334px;
    height: 122px;
    margin-bottom: 15px;
}

.quest-profile-block-history {
    width: 334px;
    height: 205px;
}

.quest-profile-avatar {
    background: #FAEEEE;
    border: 1px solid #E7E7EC;
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -52px auto 0;
    border-radius: 50%;
}

.teachers-profile-avatar {
    background: #FAEEEE;
    border: 1px solid #E7E7EC;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    border-radius: 50%;
    overflow: hidden;
}

.teachers-profile-avatar-filled {
    max-width: 150px;
    max-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    overflow: hidden;
    border-radius: 5px;
}

.teachers-profile-avatar img,
.teachers-profile-avatar-filled img {
    width: 100%;
}

.quest-profile-avatar img {
    max-width: 70px;
}

.quest-profile-level {
    margin-top: 13px;
    position: relative;
}

.quest-profile-level-text {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #4F4F4F;
}

.quest-profile-level-icon {
    width: 34px;
    height: 34px;
    background: url("/images/quest/flash.svg");
    position: absolute;
    right: 28px;
    top: -15px;
}

.quest-profile-name {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    text-align: center;
    color: #333333;
    margin-top: 2px;
}

.quest-profile-exp {
    height: 10px;
    background: #E0E0E0;
    border-radius: 5px;
    margin-top: 20px;
    width: 100%;
    position: relative;
}

.quest-profile-exp-filled {
    background: #EA3D2F;
    border-radius: 5px;
    height: 10px;
    transition: width 0.3s;
    width: 0;
}

.quest-profile-exp-text {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
}

.quest-profile-exp-text div {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #828282;
}

.quest-profile-divider {
    width: 100%;
    height: 1px;
    background: #E7E7EC;
}

.quest-profile-friends {
    margin-top: 14px;
    overflow-y: auto;
    max-height: 123px;
    margin-right: -15px;
}

.quest-profile-friends-row {
    margin-bottom: 11px;
}

.quest-profile-friends-row:last-child {
    margin-bottom: 0;
}

.quest-profile-friends-elem {
    opacity: 0.1;
    width: 54px;
    height: 54px;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
}

.quest-profile-friends-elem:last-child {
    margin-right: 0;
}

.quest-profile-friends-elem img {
    max-width: 40px;
    position: relative;
    z-index: 1;
}

.quest-profile-friends-elem-active {
    opacity: 1;
}

.quest-profile-friends-elem-active:before {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    background: transparent;
    content: "";
    position: absolute;
    z-index: 0;
}

.quest-profile-rewards-title {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 12px;
    align-items: center;
}

.quest-profile-rewards-title-text {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quest-profile-rewards-title-help {
    border: 1px solid #F2F2F2;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 14px;
    color: #4F4F4F;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.quest-profile-rewards-title-help:before {
    content: "";
    display: inline-block;
    background: url("/images/quest/help-gray.svg") center no-repeat;
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

.quest-profile-rewards-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 250px;
}

.quest-profile-reward {
    padding: 10px 0;
    border-bottom: 1px solid #E7E7EC;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.quest-profile-reward-img {
    /*background: #FAEEEE;*/
    /*border: 1px solid #E7E7EC;*/
    width: 41px;
    height: 41px;
    border-radius: 50%;
    box-sizing: border-box;
    margin-right: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quest-profile-reward-img img {
    max-width: 100%;
    max-height: 100%;
}

.quest-profile-reward-content {
    display: flex;
    flex-direction: column;
    width: 380px;
}

.quest-profile-reward-content-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.quest-profile-reward-content-title-text {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: #333333;
}

.quest-profile-reward-content-date {
    font-style: normal;
    font-weight: normal;
    font-size: 10px;
    line-height: 12px;
    color: #828282;
}

.quest-profile-reward-content-desc {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #4F4F4F;
    margin-top: 2px;
}

.quest-profile-reward-link-all {
    margin-top: 12px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #2F80ED;
    cursor: pointer;
    display: inline-block;
}

.quest-profile-reward-link-all-profile {
    margin-top: 0;
    margin-right: 30px;
}

.quest-profile-reward-link-all:hover {
    text-decoration: underline;
}

.quest-profile-balance {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

.quest-profile-balance-abaks {
    font-style: normal;
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    margin-left: 17px;
    color: #508B8F;
}

.quest-profile-history-btn {
    width: 13px;
    height: 12px;
    background: url("/images/quest/chart-line.svg") no-repeat center;
    background-size: contain;
    cursor: pointer;
}

.quest-profile-history-list {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 92px;
}

.quest-profile-history-item {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;

}

.quest-profile-history-item-title {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #4F4F4F;
}

.quest-profile-history-item-count {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #299446;
}

.quest-profile-history-item-count-minus {
    color: #942929;
}

.quest-profile-game {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    width: 248px;
    height: 265px;
    margin-right: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 10px;
}

.quest-profile-game:last-child {
    margin-right: 0;
}

.quest-profile-game-title {
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: #333333;
    margin-top: 11px;
}

.quest-profile-game-desc {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #4F4F4F;
    margin-top: 6px;
    margin-bottom: 14px;
    padding: 0 5px;
}

.quest-profile-game-button {
    text-align: center;
    justify-self: flex-end;
    align-self: center;
    position: absolute;
    bottom: 10px;
}

.quest-profile-game-quest .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-quest-wide.svg") center no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.quest-profile-game-mental .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-mental-wide.svg") center no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.quest-profile-game-brain .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-brain-wide.svg") center no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.quest-profile-games-container {
    margin-top: 42px;
}

.quest-profile-games-container .page-title {
    margin-bottom: 32px;
}

.quest-profile-game-soon {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 3px 8px;
    background: #FFFFFF;
    border-radius: 8px;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    cursor: default;
    color: #38A6DF;
}

.quest-answer-option {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    margin-top: 5px;
    align-items: center;
}

.quest-answer-option div {
    margin-right: 15px;
}

.quest-answer-option div:last-child {
    margin-right: 0;
}

.quest-landscape-item {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 15px;
    margin-bottom: 15px;
}

.quest-landscape-item-title {
    padding: 16px 10px 12px;
    display: flex;
    justify-content: space-between;
}

.quest-landscape-item-title-name a {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333333;
}

.quest-landscape-item-title-status-creating {
    background: rgba(255, 184, 0, 0.1);
    border-radius: 8px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #FFB800;
}

.quest-landscape-item-title-status-done {
    background: rgba(58, 255, 0, 0.25);
    border-radius: 8px;
    padding: 5px 8px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #189e00;
}

.quest-landscape-item-preview img {
    max-width: 100%;
    margin-bottom: -4px;
}

.quest-landscape-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.quest-landscape-item {
    max-width: 247px;
    min-width: 247px;

}

.quest-landscape-item-preview {
    position: relative;
}

.quest-landscape-item-preview-control {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-color: #fff;
    border-radius: 6px;
    height: 36px;
}

.quest-modal-task-radio-answers {
    width: 350px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
}

.quest-answer-option-elem input {
    margin-right: 7px;
}

.quest-answer-option-elem {
    width: 46%;
}

.quest-weekly-reward-modal-wrapper, .quest-coins-reward-modal-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    text-align: center;
    display: none;
}

.quest-coins-reward-modal-wrapper {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.4);
}

.quest-weekly-reward-modal {
    margin-top: 100px;
    padding: 16px 12px;
    display: inline-block;
    background: #FFFFFF;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 49px 21px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 49px 21px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 49px 21px rgba(34, 60, 80, 0.2);
}

.quest-small-reward-modal, .quest-coins-reward-modal, .quest-coins-reward-modal-euro {
    margin-top: 10px;
    padding: 16px 12px;
    display: inline-block;
    background: linear-gradient(180deg, #9DC423 0%, #8AAB11 100%);
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 49px 21px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 49px 21px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 49px 21px rgba(34, 60, 80, 0.2);
    position: relative;
    width: 250px;
    cursor: pointer;
}

.quest-coins-reward-modal, .quest-coins-reward-modal-euro {
    height: 233px;
    margin-top: 100px;
}

.quest-coins-reward-modal:before,
.quest-coins-reward-modal-euro:before {
    content: "";
    position: absolute;
    background: url("/images/quest/abaks_min.svg") no-repeat center;
    background-size: contain;
    width: 60px;
    height: 60px;
    top: -12px;
    left: calc(50% - 30px);
}

.quest-coins-reward-modal:after {
    content: "";
    position: absolute;
    background: url("/images/quest/great_abakus.svg") no-repeat center;
    background-size: contain;
    width: 270px;
    height: 190px;
    bottom: -70px;
    right: -15px;
}

.quest-coins-reward-modal.lang-de:after {
    background: url("/images/new-img/well-done/DE_great_abakus.svg") no-repeat center;
}

.quest-coins-reward-modal.lang-en:after {
    background: url("/images/new-img/well-done/EN_great_abakus.svg") no-repeat center;
}

.quest-coins-reward-modal.lang-ru:after {
    background: url("/images/new-img/well-done/RU_great_abakus.svg") no-repeat center;
}

.quest-coins-reward-modal.lang-ge:after {
    background: url("/images/new-img/well-done/GE_great_abakus.svg") no-repeat center;
}

.quest-coins-reward-modal.lang-po:after {
    background: url("/images/new-img/well-done/PO_great_abakus.svg") no-repeat center;
}

.quest-coins-reward-modal.lang-ua:after {
    background: url("/images/new-img/well-done/UA_great_abakus.svg") no-repeat center;
}

.quest-coins-reward-modal-euro:after {
    content: "";
    position: absolute;
    background: url("/images/quest/great_abakus_en.svg") no-repeat center;
    background-size: contain;
    width: 270px;
    height: 190px;
    bottom: -70px;
    right: -15px;
}

.quest-coins-reward-modal-header {
    margin-top: 45px;
}

.quest-reward-reward-modal-header {
    margin-top: 15px;
}

.quest-coins-reward-modal-title {
    font-family: Bangbang, serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.quest-reward-reward-modal-title {
    font-family: Bangbang, serif;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-bottom: 5px;
}

.quest-coins-reward-modal-text {
    font-family: Bangbang, serif;
    font-size: 17px;
    line-height: 17px;
    text-align: center;
    letter-spacing: 0.05em;
    font-feature-settings: 'pnum' on, 'lnum' on;
    color: #FFFFFF;
}

.quest-reward-reward-modal-text {
    font-family: Bangbang, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #FFFFFF;
}

.quest-weekly-reward-modal-header {
    background: #FFB800;
    border-radius: 20px;
    padding: 25px 17px 16px;
    position: relative;
}

.quest-weekly-reward-modal-header:before {
    content: "";
    position: absolute;
    background: url("/images/quest/abaks_min.svg") no-repeat center;
    background-size: contain;
    width: 25px;
    height: 25px;
    top: -9px;
    left: calc(50% - 12px);
}

.quest-weekly-reward-modal-header:after {
    content: "";
    position: absolute;
    background: url("/images/quest/abakus_notebook.svg") no-repeat center;
    background-size: contain;
    width: 70px;
    height: 49px;
    bottom: -35px;
    right: -5px;
}

.quest-weekly-reward-modal-title {
    font-family: Bangbang, Rubik, serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 14px;
    margin-bottom: 5px;
    /* identical to box height */

    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: #6F3921;
}

.quest-weekly-reward-modal-desc {
    font-family: Bangbang, Rubik, serif;
    font-size: 16px;
    line-height: 14px;
    letter-spacing: 0.05em;
    color: #6F3921;
}

.quest-weekly-reward-chest {
    margin-top: -50px;
    margin-bottom: 7px;
    text-align: center;
}

.quest-weekly-reward-btn {
    text-align: center;
}

.quest-profile-rewards-empty {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #828282;
}

.list-short {
    justify-content: start;
    align-items: normal;
}

.user-balance {
    display: inline-block;
    margin-left: 20px;
    background: #38A6DF;
    border-radius: 8px;
    padding: 6px 10px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #FFFFFF;
    position: absolute;
    top: 2px;
}

.user-balance-alert {
    height: 57px;
    border: 1px solid #EA3D2F;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Rubik';
    font-weight: 400;
    font-size: 18px;
    line-height: 21px;
    color: #EA3D2F;
}

.user-info-wrapper {
    margin-top: 20px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
}

.user-info {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 16px;
    width: 500px;
}

.user-info-rewards {
    width: 335px;
}

.user-info-levels {
    position: relative;
    width: 335px;
}

.user-info-title {
    padding-bottom: 15px;
    border-bottom: 1px solid #E7E7EC;
    margin-bottom: 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.user-info-title-profile {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.user-info-title-text {
    font-size: 16px;
    line-height: 19px;
    color: #333333;
}

.user-info-title-link {
    font-size: 12px;
    line-height: 14px;
    color: #2F80ED;
    cursor: pointer;
}

.user-info-content-item-title {
    font-size: 14px;
    line-height: 24px;
    color: #828282;
    display: inline-block;
}

.user-info-content-value {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #333333;
    display: inline-block;
    position: relative;
}

.user-info-content-value .user-balance {
    top: -18px;
    margin-left: 5px;
}

.user-info-content {
    display: flex;
}

.user-info-content-col {
    width: 50%;
}

.user-info-content-col-full {
    width: 100%;
}

.user-info-content-item {
    margin-bottom: 2px;
}

.select {
    position: relative;
    min-width: 115px;
}

.select-trigger {
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
    font-size: 14px;
    line-height: 24px;
    color: #333333;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 30px 8px 16px;
}

.select-multiple .select-trigger {
    padding: 8px;
}

.select-multiple .select-trigger-wrapper {
    display: flex;
    align-items: center;
    justify-content: start;
    padding-right: 20px;
    flex-wrap: wrap;
    margin-top: -5px;
}

.select-trigger:after {
    content: "";
    background: url("/images/icons/down-icon.svg");
    width: 16px;
    height: 16px;
    margin-left: 5px;
    display: inline-block;
    position: absolute;
    right: 10px;
}

.select-content {
    background: #FFFFFF;
    border: 1px solid #D9D9D9;
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 5px 0px rgba(34, 60, 80, 0.2);
    position: absolute;
    display: none;
    z-index: 1051;
    max-height: 200px;
    overflow-y: auto;
}

.select-item {
    padding: 7px 15px 9px;
    font-size: 14px;
    line-height: 24px;
    color: #333333;
    cursor: pointer;
    background: #ffffff;
    transition: background 0.1s;
    position: relative;
}

.select-item:hover {
    background: rgba(215, 223, 233, 0.24);
}

.select-item-active:after {
    background: url("/images/icons/check-black-icon.svg");
    content: "";
    width: 11px;
    height: 10px;
    position: absolute;
    right: 16px;
    top: 15px;
}

.reward-to-select-item {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.reward-to-select-item img {
    max-width: 28px;
    max-height: 28px;
}

.reward-to-select-item-title {
    font-size: 14px;
    line-height: 17px;
    color: #333333;
    margin-left: 10px;
    white-space: nowrap;
}

.user-reward-item {
    display: inline-block;
    margin-right: 10px;
    width: 54px;
}

.user-reward-item img {
    width: 100%;
}

.user-reward-item:last-child {
    margin-right: 0;
}

.quest-bubble-current {
    width: 91px;
    height: 90px;
    position: absolute;
    background: url("/images/quest/baku-hello.svg") center no-repeat;
    background-size: cover;
    margin-top: -62px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
}

.quest-bubble-current-reverse {
    -moz-transform: unset;
    -o-transform: unset;
    -webkit-transform: unset;
    transform: unset;
    filter: unset;
    margin-left: -20px;
}

.quest-bubble-current-tip.lang-ru {
    width: 195px;
    height: 154px;
    position: absolute;
    background: url("/images/quest/abak/current-tip/RU_quest-bubble-current-tip.svg") center no-repeat;
    background-size: cover;
    margin-top: -147px;
    margin-left: 55px;
    z-index: 1;
}

.quest-bubble-current-tip.lang-en {
    width: 195px;
    height: 154px;
    position: absolute;
    background: url("/images/quest/abak/current-tip/EN_quest-bubble-current-tip.svg") center no-repeat;
    background-size: cover;
    margin-top: -147px;
    margin-left: 55px;
    z-index: 1;
}

.quest-bubble-current-tip.lang-de {
    width: 195px;
    height: 154px;
    position: absolute;
    background: url("/images/quest/abak/current-tip/DE_quest-bubble-current-tip.svg") center no-repeat;
    background-size: cover;
    margin-top: -147px;
    margin-left: 55px;
    z-index: 1;
}

.quest-bubble-current-tip.lang-po {
    width: 195px;
    height: 154px;
    position: absolute;
    background: url("/images/quest/abak/current-tip/PO_quest-bubble-current-tip.svg") center no-repeat;
    background-size: cover;
    margin-top: -147px;
    margin-left: 55px;
    z-index: 1;
}

.quest-bubble-current-tip.lang-ua {
    width: 195px;
    height: 154px;
    position: absolute;
    background: url("/images/quest/abak/current-tip/UA_quest-bubble-current-tip.svg") center no-repeat;
    background-size: cover;
    margin-top: -147px;
    margin-left: 55px;
    z-index: 1;
}

.quest-bubble-current-tip.lang-ge {
    width: 195px;
    height: 154px;
    position: absolute;
    background: url("/images/quest/abak/current-tip/GE_quest-bubble-current-tip.svg") center no-repeat;
    background-size: cover;
    margin-top: -147px;
    margin-left: 55px;
    z-index: 1;
}

.quest-bubble-current-done-tip {
    width: 195px;
    height: 154px;
    position: absolute;
    background-size: cover;
    margin-top: -147px;
    margin-left: 55px;
    z-index: 1;
}

.quest-bubble-current-done-tip.lang-ru {
    background: url("/images/quest/abak/current-done-tip/RU_no-more-tasks-quest.svg") center no-repeat;
}

.quest-bubble-current-done-tip.lang-ua {
    background: url("/images/quest/abak/current-done-tip/UA_no-more-tasks-quest.svg") center no-repeat;
}

.quest-bubble-current-done-tip.lang-ro {
    background: url("/images/quest/abak/current-done-tip/RO_no-more-tasks-quest.svg") center no-repeat;
}

.quest-bubble-current-done-tip.lang-po {
    background: url("/images/quest/abak/current-done-tip/PO_no-more-tasks-quest.svg") center no-repeat;
}

.quest-bubble-current-done-tip.lang-fr {
    background: url("/images/quest/abak/current-done-tip/FR_no-more-tasks-quest.svg") center no-repeat;
}

.quest-bubble-current-done-tip.lang-es {
    background: url("/images/quest/abak/current-done-tip/es_no-more-tasks-quest.svg") center no-repeat;
}

.quest-bubble-current-done-tip.lang-en {
    background: url("/images/quest/abak/current-done-tip/EN_no-more-tasks-quest.svg") center no-repeat;
}

.quest-bubble-current-done-tip.lang-de {
    background: url("/images/quest/abak/current-done-tip/DE_no-more-tasks-quest.svg") center no-repeat;
}

.quest-bubble-current-done-tip.lang-bg {
    background: url("/images/quest/abak/current-done-tip/BG_no-more-tasks-quest.svg") center no-repeat;
}

.quest-bubble-current-tip-reverse {
    margin-left: -168px;
    background: url("/images/quest/abak/quest-bubble-current-tip-reverse.svg") center no-repeat;
    background-size: cover;
    width: 205px;
    margin-top: -157px;
}

.total-rewards-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.total-rewards-item {
    position: relative;
    margin-right: 15px;
    margin-bottom: 15px;
}

.total-rewards-item:nth-child(6) {
    margin-right: 0;
}

.total-rewards-item img {
    width: 75px;
    height: 75px;
}

.total-rewards-item-count {
    position: absolute;
    background: #508B8F;
    padding: 3px 7px;
    border-radius: 15px;
    font-size: 14px;
    text-align: center;
    top: -6px;
    right: -8px;
    color: #ffffff;
}

.popover-wrapper {
    position: absolute;
    z-index: 2100;
    background: #fff;
    padding: 6px;
    -webkit-box-shadow: 0 0 8px 0 rgba(34, 60, 80, 0.3);
    -moz-box-shadow: 0 0 8px 0 rgba(34, 60, 80, 0.3);
    box-shadow: 0 0 8px 0 rgba(34, 60, 80, 0.3);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s;
    display: none;
}

.with-popover:hover > .popover-wrapper {
    opacity: 1;
    display: block;
}

.popover-title {
    font-size: 14px;
}

.popover-text {
    font-size: 12px;
}

.own-chart-wrapper {
    min-height: 300px;
    position: relative;
}

.own-chart-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.own-chart-rows {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 26px;
    flex-direction: column;
}

.own-chart-cols {
    position: absolute;
    bottom: 0;
    display: flex;
    left: 0;
    right: 23px;
    justify-content: space-between;
}

.own-chart-row {
    height: 100%;
    border-bottom: 1px dashed #E3E5E6;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: 8px;
}

.own-chart-row-val {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #5E6366;
}

.own-chart-col:before {
    content: "";
    width: 2px;
    height: 7px;
    background: #E3E5E6;
    border-radius: 0 0 2px 2px;
    display: inline-block;
}

.own-chart-col {
    text-align: center;
}

.own-chart-col.own-chart-col-invisible::before, .own-chart-col-invisible > .own-chart-col-val {
    display: none
}

.own-chart-col-val {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.4px;
    color: #5E6366;
    display: inline-block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.own-chart-items {
    position: absolute;
    left: 0;
    right: 23px;
    bottom: 26px;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.own-chart-item {
    width: 100%;
    margin-right: 5px;
    background: rgba(120, 144, 156, 0.48);
    border-radius: 2px 2px 0 0;
    position: relative;
}

.own-chart-item:last-child {
    margin-right: 0;
}

.own-chart-item-reverse {
    border-radius: 0 0 2px 2px;
}

.own-chart-item-zero {
    min-height: 3px;
    border-radius: 2px 2px 2px 2px;
    margin-bottom: -1px;
}

.own-chart-row-zero {
    border-bottom: 1px solid #919699;
}

.own-chart-item:hover > .own-chart-item-placeholder {
    display: block;
    margin-top: -100%;
}

.own-chart-item-placeholder {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: 8px;
    background: #919699;
    display: none;
}

.own-chart-item-placeholder-val {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    position: absolute;
    right: 0;
}

.chart-search-list {
    display: inline-block;
}

.quest-user-incomes-chart-placeholder {
    display: flex;
    flex-direction: column;
    padding: 4px 7px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 0px 4px 0px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 0px 4px 0px rgba(34, 60, 80, 0.2);
    margin-right: 3px;
}

.quest-user-incomes-chart-placeholder div {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    text-align: right;
    color: #3E4345;
}

#quest-friend-image-preview {
    text-align: center;
}

#quest-friend-image-preview img {
    max-width: 100%;
    max-height: 450px;
}

.quest-bubble-friend {
    position: absolute;
    max-width: 60px;
    max-height: 60px;
}

.quest-bubble-friend img {
    max-width: 60px;
    max-height: 60px;
}

.quest-friends .quest-bubble-friend {
    position: relative;
    padding: 6px;
}

.quest-friends .quest-bubble-friend img {
    max-height: 100%;
}

.edit-friend-element {
    margin-top: 6px;
    margin-bottom: 6px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(215, 223, 233, 0.6);
}

.edit-friend-element:first-child {
    margin-top: 0;
}

.edit-friend-element:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.edit-friend-element-name {
    text-align: center;
    font-size: 16px;
    margin-bottom: 5px;
}

.edit-friend-element-desc {
    width: 90%;
    text-align: center;
    font-size: 14px;
    margin: 7px auto;
}

.edit-friend-element-image img {
    max-width: 100%;
}

.edit-friend-element-image {
    position: relative;
    text-align: center;
}

.edit-friend-element-control {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 8px;
}

.edit-friend-element-control-remove {
    position: relative;
    display: inline-block;
}

#quest-landscape-image-preview img {
    max-width: 100%;
}

.quest-modal-reward-wrapper-container {
    text-align: center;
}

.quest-modal-reward-wrapper, .quest-modal-friend-header {
    background: linear-gradient(180deg, #1BA2DD 0%, #0B91CC 100%);
    border-radius: 20px;
    padding: 30px 50px;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
}

.quest-modal-reward-image {
    margin-top: -50px;
    text-align: center;
}

.quest-modal-reward-image img {
    width: 150px;
}

.quest-modal-reward-title, .quest-modal-friend-title {
    font-family: Bangbang, serif;
    font-style: normal;
    font-weight: normal;
    font-size: 26px;
    line-height: 26px;
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 10px;
}

.quest-modal-reward-text, .quest-modal-friend-text {
    font-family: Bangbang, serif;
    font-style: normal;
    font-weight: bold;
    font-size: 35px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #FFFFFF;
}

.quest-modal-friend-header-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.quest-modal-friend-description {
    border: 1px solid #38A6DF;
    box-sizing: border-box;
    border-radius: 20px;

    font-family: Bangbang, serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.05em;
    color: #333333;
    margin-top: 10px;
    padding: 20px;
}

.quest-modal-friend-image {
    margin-right: 25px;

}

.quest-modal-friend-image img {
    width: 90px;
}

.quest-modal-friend-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quest-modal-friend-content {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
}

.show-reward-footer-modal {
    text-align: center;
    margin-top: 30px;
}

.quest-coins-reward-modal-wrapper-modal .quest-coins-reward-modal,
.quest-coins-reward-modal-wrapper-modal .quest-coins-reward-modal-euro {
    margin-top: 0;
}

.quest-coins-reward-modal-wrapper-modal {
    margin-bottom: 70px;
    text-align: center;
}

.quest-coins-reward-modal-wrapper-modal .quest-coins-reward-modal-text {
    font-size: 20px;
    line-height: 20px;
}

#quest-landscape-additional-images-preview {
    display: flex;
    flex-direction: column;
}

#quest-landscape-additional-images-preview img {
    max-width: 100%;
}

.quest-landscape-additional-images-preview-item {
    position: relative;
    margin-bottom: 10px;
}

.quest-background-changer {
    display: none;
    background: #fff;
    padding: 6px;
    position: absolute;
    margin-top: 8px;
    border-radius: 4px;
}

.quest-background-changer-item {
    cursor: pointer;
    max-width: 70px;
    max-height: 70px;
    margin-right: 7px;
}

.quest-background-changer-item:last-child {
    margin-right: 0;
}

.quest-background-changer-item img {
    max-width: 100%;
    max-height: 100%;
}

.quest-profile-history-item-count-negative {
    color: #94292f;
}

.table-search-select {
    display: inline-block;
}

.quest-abak-walk {
    /* width: 60px; */
    position: absolute;
    width: 149px;
    height: 112px;
    /*top: 303px;*/
    /*left: 0;*/
}

.quest-abak-walk img {
    width: 100%;
}

.appeal-attachments-list {
    margin-top: 5px;
}

#appeal-attachments {
    display: none;
}

.idea-for-abaks {
    position: fixed;
    right: 10px;
    bottom: 100px;
    z-index: 1;
    cursor: pointer;
    width: 10%;
}

.idea-for-abaks img {
    max-width: 100%;
}

.abaks-tip-img {
    position: absolute;
    right: -25px;
    bottom: -10px;
    width: 220px;
}

.abaks-tip-img img {
    width: 100%;
}

.chat-dialog-messages-list-item-info-block-message-remove, .chat-dialog-messages-list-item-info-block-message-edit {
    position: absolute;
    left: 0;
    bottom: 28px;
    cursor: pointer;
    opacity: 0;
    width: 18px;
    height: 18px;
    transition: opacity 100ms linear;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.chat-dialog-messages-list-item-info-block-message-remove {
    background-image: url('/images/icons/trash-icon.svg');
}
.chat-dialog-messages-list-item-info-block-message-edit {
    left: 26px;
    background-image: url('/images/icons/pencil-icon.svg');
}

.chat-message-outcome .chat-dialog-messages-list-item-info-block-message-edit {
    left: -24px;
    height: 19px;
}

.appeal-chat-message .chat-dialog-messages-list-item-info-block-message-edit {
    left: -24px;
    top: 14px;
    height: 13px;
}

.appeal-chat-message .chat-dialog-messages-list-item-info-block-message-remove {
    left: -48px;
}

.chat-message-outcome .chat-dialog-messages-list-item-info-block-message-remove {
    left: -48px;
}

.chat-dialog-messages-list-item:hover .chat-dialog-messages-list-item-info-block-message-remove,
.chat-dialog-messages-list-item:hover .chat-dialog-messages-list-item-info-block-message-edit,
.chat-message-outcome:hover .chat-dialog-messages-list-item-info-block-message-remove,
.chat-message-outcome:hover .chat-dialog-messages-list-item-info-block-message-edit,
.appeal-chat-message:hover .chat-dialog-messages-list-item-info-block-message-remove,
.appeal-chat-message:hover .chat-dialog-messages-list-item-info-block-message-edit {
    opacity: 0.6;
}

.chat-dialog-messages-list-item-info-block-message-remove:hover, .chat-dialog-messages-list-item-info-block-message-edit:hover {
    opacity: 1 !important;
}

.chat-dialog-input-wrapper-edit {
    padding: 5px;
    display: none;
}

.chat-modal-messages-container .chat-dialog-input-wrapper-edit {
    padding: 10px 19px 0 20px;
}

.chat-dialog-input-wrapper-edit-abort {
    cursor: pointer;
    float: right;
}

.smile-with-edit {
    top: 54px !important
}

.file-input-tip {
    font-size: 12px;
    color: #828282;
}

.bill-service-item:first-child {
    margin-top: 0;
}

.bill-service-item:last-child {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.bill-service-item {
    margin-top: 8px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(215, 223, 233, 0.6);
}

.small-check-label {
    margin-left: 10px;
    margin-right: 10px;
}

.small-check-label:before {
    width: 15px !important;
    height: 15px !important;
    margin-top: 0 !important;
}

.promocode {
    padding: 3px 10px;
    background: #299446;
    border-radius: 3px;
    border: 1px solid #196c32;
    color: #fff;
    font-size: 14px;
}

.ck-editor__editable_inline {
    min-height: 300px;
}

.short-user-news-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 15px;
}

.short-news-elem {
    background: #FFFFFF;
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 18px 15px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 10px;
}

.show-news-elem-poster {
    margin-bottom: 15px;
}

.show-news-elem-poster img {
    max-width: 100%;
    border-radius: 4px;
    max-height: 250px;
}

.show-news-elem-date {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 16px;
    color: #828282;
    margin-bottom: 4px;
}

.show-news-elem-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    margin-bottom: 12px;
    cursor: pointer;
}

.short-news-preview-poster {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.short-news-preview-poster img {
    max-width: 100%;
}

.short-news-preview-poster-start {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.short-news-preview-poster-start img {
    max-width: 100%;
}

.profile-short-news-list-wrapper {
    display: none;
}

.profile-short-news-list-show-all {
    display: none;
}

.h3-right {
    float: right;
}

.show-news-elem-views {
    color: #828282;
    font-size: 12px;
    line-height: 16px;
    font-style: normal;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    float: right;
}

.show-news-elem-views:before {
    content: '';
    display: inline-block;
    margin-right: 5px;
    height: 12px;
    width: 16px;
    background: url('/images/icons/eye-icon.svg') no-repeat;
    background-size: contain;
}

.news-list-tip {
    padding: 20px;
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    border-radius: 10px;
    margin-top: 15px;
    text-align: center;
    font-size: 16px;
    color: #BFBFBF;
}

.news-list-tip, .news-list-tip-end, .news-list-tip-loading {
    display: none;
}

.ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners {
    z-index: 2000;
}

.clear-col {
    margin-left: -15px;
    margin-right: -15px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.01em;
    color: #828282;
    align-self: center;
}

input[type=checkbox].form-control + label.checkbox-label:before {
    margin-top: 0;
}

.teachers-profile-disciplines-empty {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ededed;
    border-radius: 5px;
    margin-top: 10px;
    color: #919191;
}

.select-trigger-value {
    background: #EBF2FF;
    border-radius: 4px;
    padding: 4px 8px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #2F80ED;
    display: flex;
    margin-right: 8px;
    margin-top: 5px;
}

.select-trigger-value:last-child {
    margin-right: 0;
}

.select-trigger-value-abort {
    width: 16px;
    height: 16px;
    margin-left: 4px;
    cursor: pointer;
    background: url('/images/icons/x-mark-icon.svg') center center no-repeat;
}

.select-item-active {
    font-weight: bold;
}

.select-trigger-empty {
    font-size: 14px;
    line-height: 24px;
    color: #B5B5B5;
}

.select-multiple .select-trigger-empty {
    margin-top: 5px;
    margin-left: 8px;
}

.languages-extended-item {
    margin-bottom: 10px;
}

.languages-extended-item:last-child {
    margin-bottom: 0;
}

.teacher-profile-subject {
    padding: 7px 0;
    border-bottom: 1px solid rgba(215, 223, 233, 0.6);
}

.teacher-profile-subject:last-child {
    border-bottom: 0;
}

.teacher-profile-subject-subject {
    margin-bottom: 7px;
}

.user-comment-remove {
    display: inline-block;
    right: 0;
    position: absolute;
}

.brain-game-settings-block {
    display: flex;
    justify-content: center;
}

.brain-game-settings-block-content {
    margin-left: 45px;
    min-width: 260px;
}

.brain-game-settings-block-content-title {
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    color: #333333;
}

.brain-game-settings-block-content-items {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.brain-game-settings-block-content-items-item label {
    display: flex;
    margin-top: 12px;
}

.brain-game-settings-block-content-items-item label:before {
    margin-top: 0 !important;
}

.game-instruction-content-block {
    font-size: 14px;
    line-height: 22px;
    color: #333333;
}

.game-instruction-content-block-title {
    margin-top: 15px;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
    color: #333333;
}

.brain-games-gold-abak-in-modal {
    width: 155px;
    height: 155px;
    position: absolute;
    left: calc(50% - 77px);
    background: url('/images/brain_games/games/sushi/gold-abak.svg') center no-repeat;
    top: -90px;
}

.brain-games-result-modal-title {
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    color: #333333;
    margin-bottom: 40px;
}

.brain-games-result-modal-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.brain-games-result-modal-row:first-child {
    margin-top: 0;
}

.brain-games-result-modal-row-value {
    background: #F5F5F5;
    border: 1px solid #D9D9D9;
    padding: 5px 6px;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
    /*text-align: center;*/
    color: #259CD3;
    margin-left: 10px;
    margin-right: 10px;
    cursor: default;
}

.brain-games-result-modal-row-time {
    margin-top: 40px;
}

.brain-games-buy-time-btn {
    text-align: center;
    margin-top: 25px;
}

.brain-games-sushi .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-brain-games-sushi.svg") bottom no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.brain-games-twin .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-brain-games-twin.svg") bottom no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.brain-games-extra .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-brain-games-extra.svg") bottom no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.brain-games-jump .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-brain-games-jump.svg") bottom no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.brain-games-chest .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-brain-games-chest.svg") bottom no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.brain-games-maze .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-brain-games-maze.svg") bottom no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.brain-games-memory .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-brain-games-memory.svg") top no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.brain-games-story .quest-profile-game-img {
    height: 116px;
    background: url("/images/quest/abakus-brain-games-story.svg") bottom no-repeat;
    background-size: cover;
    margin-top: -1px;
}

.stripe-systems-images {
    display: flex;
    align-items: center;
}

.stripe-systems-images img {
    max-height: 14px;
    margin-right: 5px;
}

.stripe-systems-images img:last-child {
    margin-right: 0;
}

.stripe-systems-images-mc {
    max-height: 20px !important;
}

.pay-stripe-btn {
    margin-bottom: 15px;
}

.list-group {
    border: 1px solid #E7E7EC;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.list-group-item {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E7E7EC;
    font-size: 16px;
    line-height: 19px;
    color: #4F4F4F;
}

.list-group-item:first-child {
    padding-top: 0;
}

.list-group-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.hw-plate-quest-img {
    height: 20px;
    margin-left: 6px;
}

.hw-block-quest-item-title {
    display: flex;
    align-items: center;
}

.teachers-control-action-btn-ban {
    display: inline-block;
    padding: 4.5px 5px;
    font-size: small;
    color: red;
    cursor: pointer;
    text-align: center;
    padding-left: 5px;
}

.teachers-control-action-btn-ban::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("/images/icons/minus-icon-red.svg") 50%/cover no-repeat;
    position: relative;
    top: 2px;
    margin-right: 6px;
}

.teachers-control-action-btn-rem {
    display: inline-block;
    padding: 4.5px 5px;
    font-size: small;
    cursor: pointer;
    text-align: center;
    padding-left: 5px;
}

.teachers-control-action-btn-rem::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("/images/icons/plus-circle-outline-disabled.svg") 50% no-repeat;
    position: relative;
    top: 2px;
    margin-right: 6px;
}

.teachers-control-action-extra {
    visibility: hidden;
    color: black;
    padding: 3px 17px;
    text-align: center;
    display: inline-block;
    border: 1px solid #828282;
    border-radius: 20px;
    cursor: pointer;
}

.students-control-action-btn-ban {
    display: inline-block;
    padding: 4.5px 5px;
    font-size: small;
    color: red;
    cursor: pointer;
    text-align: center;
    padding-left: 5px;
}

.students-control-action-btn-ban::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("/images/icons/minus-icon-red.svg") 50%/cover no-repeat;
    position: relative;
    top: 2px;
    margin-right: 6px;
}

.students-control-action-btn-rem {
    display: inline-block;
    padding: 4.5px 5px;
    font-size: small;
    cursor: pointer;
    text-align: center;
    padding-left: 5px;
}

.students-control-action-btn-rem::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("/images/icons/plus-circle-outline-disabled.svg") 50% no-repeat;
    position: relative;
    top: 2px;
    margin-right: 6px;
}

.students-control-action-btn-olymp {
    display: inline-block;
    padding: 4.5px 5px;
    font-size: small;
    cursor: pointer;
    text-align: center;
    padding-left: 5px;
}

.students-control-action-btn-olymp > a {
    text-decoration: none;
    color: #333333;
    font-size: small;
}

.students-control-action-btn-olymp::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("/images/icons/cup.svg") 50%/cover no-repeat;
    margin-right: 6px;
    transform: scale(110%);
    position: relative;
    top: 2.3px;
}

.add-olympiad-popap {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}

.add-olympiad-popap__area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.add-olympiad-popap:target {
    opacity: 1;
    visibility: visible;
    position: absolute;
    z-index: 2;
}

.add-olympiad-popap__body {
    display: flex;
    justify-content: center;
    margin-top: 110px;
    padding: 30px 10px;
    height: 500px;
}

.add-olympiad-popap__content {
    background-color: rgba(255, 255, 255, 1);
    color: black;
    min-width: 500px;
    max-width: 600px;
    padding: 30px;
    position: relative;
}

.add-olympiad-popap__close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    color: black;
    text-decoration: none;
}

.add-olympiad-popap__title {
    font-size: 24px;
    margin: 0px 0px 1em 0px;
    text-align: center;
}

.add-olympiad-popap__select {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    height: 70%;
}

.add-olympiad-popap__button {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.add-olympiad-popap__button > p {
    background: #2FA84F;
    border: 1px solid #2FA84F;
    border-radius: 10px;
    color: #FFFFFF !important;
}

.add-olympiad-popap__form {
    display: none;
}

.students-control-action-extra {
    visibility: hidden;
    color: black;
    padding: 3px 17px;
    text-align: center;
    display: inline-block;
    border: 1px solid #828282;
    border-radius: 20px;
    cursor: pointer;
}

.partners-control-action-btn-ban {
    display: inline-block;
    padding: 4.5px 5px;
    font-size: small;
    font-weight: lighter;
    color: red;
    cursor: pointer;
    text-align: center;
    padding-left: 5px;
}

.partners-control-action-btn-ban::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("/images/icons/minus-icon-red.svg") 50%/cover no-repeat;
    position: relative;
    top: 2px;
    margin-right: 6px;
}

.partners-control-action-btn-rem {
    display: inline-block;
    padding: 4.5px 5px;
    font-size: small;
    font-weight: lighter;
    cursor: pointer;
    text-align: center;
    padding-left: 5px;
}

.partners-control-action-btn-rem::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("/images/icons/plus-circle-outline-disabled.svg") 50% no-repeat;
    position: relative;
    top: 2px;
    margin-right: 6px;
}

.partners-control-action-extra {
    visibility: hidden;
    color: black;
    font-size: medium;
    padding: 3px 17px;
    text-align: center;
    display: inline-block;
    border: 1px solid #828282;
    border-radius: 20px;
    cursor: pointer;
}

.buttons-ban-rem {
    transform: translateY(120px);
    padding-left: 150px;
}

.selected-positions {
    appearance: none;
    content: '';
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #adb5bd;
    border-radius: 0.25em;
    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}

.selected-positions:checked {
    border-color: #0b76ef;
    background-color: #0b76ef;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.selected-positions:not(:disabled):not(:checked):hover {
    border-color: #b3d7ff;
}

.selected-positions:not(:disabled):active {
    background-color: #b3d7ff;
    border-color: #b3d7ff;
}

.selected-positions:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.selected-positions:focus:not(:checked) {
    border-color: #80bdff;
}

.selected-positions:disabled {
    background-color: #e9ecef;
}

.popup-abduction {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease 0s;
    z-index: 1000;
}

.popup-abduction__area {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.popup-abduction__body {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
}

.popup-abduction__content {
    background-color: #fff;
    color: black;
    width: 1150px;
    height: 620px;
    font-family: 'Rubik';
    font-style: normal;
    font-size: 16px;
    line-height: 100%;
    border-radius: 12px;
    position: relative;
    transition: all 0.5s ease 0s;
    opacity: 0;
    transform: scale(0.8);
}

.popup-abduction__close {
    position: absolute;
    right: 25px;
    top: 25px;
    font-size: 20px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    z-index: 3;
}

.abacus-quest__block-abduction {
    background-color: #189FDA;
    width: 1150px;
    height: 620px;
    position: relative;
    display: flex;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
}

.abacus-quest__img > img {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 30px;
    z-index: 2;
    position: absolute;
    left: 0;
}

.abacus-quest__wrapper {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    width: 65%;
    height: 90%;
    z-index: 5;
}

.block-abduction__cards {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.block-abduction__oh-no {
    font-family: 'Rubik';
    font-weight: 600;
    font-size: 44px;
    line-height: 44px;
    line-height: 100%;
    text-align: center;
    color: #189FDA;
    margin-top: 10px;
    margin-left: -100px;
    margin-bottom: -15px;
}

.block-abduction__cards-dashed {
    max-width: 250px;
    border: 2px dashed #189FDA;
    padding: 10px 12px;
    font-family: 'Rubik';
    font-size: 16px;
    line-height: 21px;
}

.block-abduction__cards-digimonstricks img:first-child {
    transform: translate(20px, -15px);
}

.block-abduction__cards-digimonstricks img:last-child {
    transform: translate(-10px, 8px);
}

.block-abduction__text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    margin-top: 30px;
}

.block-abduction__text-1 h3,
.block-abduction__text-2 h3 {
    font-family: 'Rubik';
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    line-height: 100%;
    margin-bottom: 10px;
}

.block-abduction__text-1 p:last-child,
.block-abduction__text-2 p:last-child {
    width: auto;
    font-family: 'Rubik';
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
}

.block-abduction__text-1,
.block-abduction__text-2 {
    width: 50%;
}

.block-abduction__text-2 {
    position: relative;
    left: 80px;
}

.block-abduction__buttons-area {
    display: flex;
    justify-content: space-between;
}

.popup-abduction:target {
    opacity: 1;
    visibility: visible;
}

.popup-abduction:target .popup-abduction__content {
    opacity: 1;
}

.buttons-area__text {
    width: 52%;
    font-family: 'Rubik';
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    line-height: 140%;
}

.buttons-area__button {
    width: 52%;
    display: flex;
    align-items: center;
}

.buttons-area__button {
    position: relative;
    left: 80px;
}

.buttons-area__button > a {
    text-align: center;
    font-family: 'Rubik';
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    line-height: 100%;
    color: #FFFFFF;
    padding: 12px 24px;
    background-color: #189FDA;
    border-radius: 12px;
}

#ellipse-small-1 {
    width: 85px;
    height: 85px;
    position: absolute;
    top: 270px;
    left: 162px;
}

#ellipse-small-2 {
    width: 85px;
    height: 85px;
    position: absolute;
    top: 270px;
    left: 620px;
}

#cross-white-1 {
    width: 13px;
    height: 26px;
    position: absolute;
    top: 122px;
    left: 82px;
}

#cross-white-2 {
    width: 13px;
    height: 26px;
    position: absolute;
    top: 52px;
    left: 100px;
}

#cross-white-3 {
    width: 13px;
    height: 26px;
    position: absolute;
    top: 64px;
    left: 157px;
}

#cross-blue-1 {
    width: 13px;
    height: 26px;
    position: absolute;
    top: 474px;
    left: 73px;
}

#cross-blue-2 {
    width: 13px;
    height: 26px;
    position: absolute;
    top: 424px;
    left: 103px;
}

#cross-blue-3 {
    width: 13px;
    height: 26px;
    position: absolute;
    top: 514px;
    left: 133px;
}

#bubble-1 {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 89px;
    left: 990px;
}

#bubble-2 {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 162px;
    left: 1066px;
}

#bubble-3 {
    width: 13px;
    height: 13px;
    position: absolute;
    top: 102px;
    left: 1076px;
}

.buttons-area__button a {
    text-decoration: none;
    color: white;
    font-family: 'Rubik';
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
}

.block-payment-unsuccess {
    width: 1050px;
    height: 596px;
    background: #FFFFFF;
    border-radius: 12px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 30px auto;
    top: calc(50% - 298px);
    position: relative;
}

.payment-unsuccess__back {
    margin: 30px 0px 6px 32px;
}

.payment-unsuccess__back a {
    text-decoration: none;
}

.payment-unsuccess__back span {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    text-align: right;
    letter-spacing: 0.25px;
    color: #189FDA;
    margin-left: 12px;
}

.block-payment-unsuccess__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.block-payment-unsuccess__body p {
    margin: 0px;
}

.block-payment-unsuccess__body a {
    margin-top: 43px;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    text-align: right;
    letter-spacing: 0.25px;
    text-decoration-line: underline;
    color: #189FDA;
}

.block-payment-unsuccess__body p:first-of-type {
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 100%;
    color: #189FDA;
}

.block-payment-unsuccess__body p:last-of-type {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    color: #BDBDBD;
    margin-top: 28px;
    text-align: center;
}

.abacus-sad {
    width: 100%;
    height: 282px;
}

#abacus {
    position: absolute;
    width: 389.33px;
    height: 292px;
    left: 263.08px;
    top: 58px;
}

#bird {
    position: absolute;
    width: 138.28px;
    height: 99.3px;
    left: 590.96px;
    top: 52.64px;
}

#ellipse-1 {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 791.9px;
    top: 57.59px;
}

#ellipse-2 {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 843.52px;
    top: 107.6px;
}

#ellipse-3 {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 794.03px;
    top: 142.95px;
}

#cross-1 {
    position: absolute;
    width: 13px;
    height: 26px;
    left: 211px;
    top: 137px;
}

#cross-2 {
    position: absolute;
    width: 13px;
    height: 26px;
    left: 181px;
    top: 187px;
}

#cross-3 {
    position: absolute;
    width: 13px;
    height: 26px;
    left: 241px;
    top: 227px;
}

.block-payment-success {
    width: 1050px;
    height: fit-content;
    background: #FFFFFF;
    border-radius: 12px;
    margin: 30px auto;
    padding: 30px;
}

.payment-success__back {
    margin: 30px 0px 6px 32px;
}

.payment-success__back a {
    text-decoration: none;
}

.payment-success__back span {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    text-align: right;
    letter-spacing: 0.25px;
    color: #189FDA;
    margin-left: 12px;
}

.block-payment-success__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.block-payment-success__body img {
    margin-bottom: 57px;
}

.block-payment-success__body p {
    margin: 0px;
}

.block-payment-success__body a {
    margin-top: 43px;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    text-align: right;
    letter-spacing: 0.25px;
    text-decoration-line: underline;
    color: #189FDA;
}

.block-payment-success__body p:first-of-type {
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 100%;
    color: #189FDA;
}

.block-payment-success__body p:last-of-type {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    color: #BDBDBD;
    margin-top: 28px;
}

#ellipse-11 {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 691.9px;
    top: 57.59px;
}

#ellipse-22 {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 743.52px;
    top: 107.6px;
}

#ellipse-33 {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 694.03px;
    top: 142.95px;
}

#cross-11 {
    position: absolute;
    width: 13px;
    height: 26px;
    left: 321px;
    top: 137px;
}

#cross-22 {
    position: absolute;
    width: 13px;
    height: 26px;
    left: 291px;
    top: 187px;
}

#cross-33 {
    position: absolute;
    width: 13px;
    height: 26px;
    left: 351px;
    top: 227px;
}

.radio-flex {
    display: flex;
}

.radio-flex > label {
    margin-bottom: 0;
    margin-left: 10px;
}

.radio-flex > input {
    margin-top: 0
}

.is-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.value-recommended {
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
}

.main-page-titles {
    display: flex;
}

.switch-zoom {
    align-self: center;
}

.abakus-olympiad-profile-block-second-column-1 {
    height: 100%;
    width: 19%;
    background-color: #0097D2;
    background-image: url("/images/olympiad-registration/crosses.svg");
    background-repeat: no-repeat;
    background-size: 100%;
}

.abakus-olympiad-profile-block-second-column-2 {
    width: 81%;
    padding-left: 53px;
    padding-top: 30px;
}

.abakus-olympiad-profile-block-second-row {
    width: 100%;
}

.abakus-olympiad-profile-block-second-ellipse {
    position: relative;
    top: 25%;
    right: -35%;
    z-index: 3;
}

.abakus-olympiad-profile-block-second {
    flex-direction: row;
    padding-right: 0px;
}

.abakus-olympiad-profile-block-second-champion img {
    position: absolute;
    top: 25%;
    left: 45%;
    width: 75px;
    height: 75px;
    z-index: 5;
}

.abakus-quest-profile-block-second-title {
    font-size: 16px;
}

.abakus-quest-profile-block-second-text {
    font-family: 'Rubik';
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.abakus-quest-profile-block-buttons {
    display: flex;
    justify-content: space-between;
}

.btn-signup-olympiad {
    background-color: #189FDA;
    border: 1px solid #189FDA;
    color: #FFFFFF !important;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    text-decoration: none;
}

.btn-trial-access {
    border: 2px solid #189FDA;
    color: #189FDA !important;
    margin-left: 16px;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    text-decoration: none;
}

.news-days-btn {
    display: inline-flex;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    line-height: 16px;
    font-weight: 500;
    position: relative;
    transition: box-shadow 0.2s, -webkit-box-shadow 0.2s, -moz-box-shadow 0.2s, border 0.2s, background 0.2s;
    padding: 2px 4px;
    border: 1px solid #2F80ED;
    margin-right: 10px;
}

.news-days-btn-active {
    background-color: #2F80ED;
    color: white;
}

.news-time-row {
    display: flex;
    align-items: center;
}

.news-time-col {
    margin-left: 15px;
    margin-right: 5px;
}

.control-label-news {
    font-weight: 500;
    font-size: 12px;
    line-height: 32px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #828282;
    display: block;
    margin-bottom: 6px;
}

.news-settings {
    display: none;
}

.show-news-settings {
    display: block;
}

.course-tag {
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 6px;
    width: fit-content;
    margin-top: 4px;

    /*default color*/
    background: #169fda;
    color: white;
}

.course-tag.in-modal {
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 8px;
    margin-right: 10px;
    margin-top: 0;
}

#change-course-tags-modal, #edit-tag-modal {
    left: calc(50% - 350px);
}

#change-course-tags-modal > .modal-dialog, #edit-tag-modal > .modal-dialog {
    width: 700px;
}

#antifreeze-block-modal > .modal-dialog {
    width: 800px;
}
#move-lessons-modal > .modal-dialog {
    width: 850px;
}

#move-lessons-modal p {
    font-family: Rubik;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #333333;
}
#move-lessons-modal b {
    font-weight: 500;
}
.move-modal-input {
    width: 70px;
    text-align: center;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    margin-top: 6px;
}
#move-all-lessons-datepicker {
    width: 150px;
}
.move-modal-col-name {
    color: #999999 !important;
}
.move-modal-col-text {
    color: #333333;
}

.antifreeze-row.modified * {
    text-decoration: line-through;
}
.antifreeze-row.modified > .actual {
    text-decoration: none;
}
.block-num-row {
    flex-shrink: 0;
    display: flex;
    gap:10px
}


.tag-color-button {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
    margin-right: 4px;
    margin-bottom: 3px;
    position: relative;
}

.tag-color-button.active:before {
    content: "✓";
    color: white;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.tag-color-button::-webkit-color-swatch-wrapper {
    padding: 0;
}

.tag-color-button::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.add-new-tag-btn:disabled,
.add-new-tag-btn[disabled] {
    cursor: progress;
    opacity: 0.8;
}

.d-flex {
    display: flex;
}

.justify-content-space-between {
    justify-content: space-between;

}

.align-items-center {
    align-items: center;
}

.dropdown-content.in-modal {
    z-index: 1051;
}

.dropdown.in-modal {
    height: 36px;
}

.tag-row-in-modal {
    padding: 8px 0;
    border-bottom: 1px solid #c2c2c2;
}

.tag-row-in-modal:last-child {
    border-bottom: none;
}

.course-tag-action-button {
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
    font-size: 14px;
}

.course-tag-action-button:hover {
    filter: brightness(0.8);
    -webkit-filter: brightness(0.8);
}

.course-tag-action-button.add {
    background: #189fda;
    color: white;
}

.course-tag-action-button.remove {
    background: #e03833;
    color: white;
}

.paymentRadio-wrp {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.paymentRadio {
    display: flex;
    align-items: center;
    gap: 8px;
}

.paymentRadio img {
    width: 160px;
}

.paymentRadio input {
    display: none;
}

.paymentRadio input ~ img {
    cursor: pointer;
    border: 1px solid rgba(128, 128, 128, 0.81);
    padding: 23px;
    box-sizing: border-box;
    border-radius: 4px;
    height: 98px;
    object-fit: contain;
}

.paymentRadio input:checked ~ img {
    border: 1px solid #56a5dc;
    padding: 23px;
    background: #ebf8fc;
}

.button-modal-loader {
    display: none;
    position: relative;
    width: 80px;
    height: 11px;
    margin: 0 auto;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    box-sizing: content-box;
}

.button-modal-loader div {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.button-modal-loader div:nth-child(1) {
    left: 8px;
    animation: button-modal-loader1 0.6s infinite;
}

.button-modal-loader div:nth-child(2) {
    left: 8px;
    animation: button-modal-loader2 0.6s infinite;
}


.button-modal-loader div:nth-child(3) {
    left: 32px;
    animation: button-modal-loader2 0.6s infinite;
}

.button-modal-loader div:nth-child(4) {
    left: 56px;
    animation: button-modal-loader3 0.6s infinite;
}

@keyframes button-modal-loader1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes button-modal-loader3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes button-modal-loader2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}

.promo-banner {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.promo-banner__wrp {
    background: #e0eef4;
    display: flex;
    gap: 23px;
    position: relative;
    max-width: 500px;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    padding-bottom: 29px;
    border-radius: 18px;
}

.promo-banner__wrp .close {
    position: absolute;
    right: 22px;
    color: black;
    top: 18px;
    opacity: 0.7;
}

.promo-banner #promoBannerCloseLink {
    text-align: center;
    align-self: flex-end;
    margin-right: 30px;
}

.fullscreen-game .main-menu-wrapper {
    display: none;
}

.fullscreen-game .page-content-footer {
    display: none;
}

.fullscreen-game .page-content-wrapper {
    padding: 0;
    box-shadow: none;
    width: 100%;
}

.fullscreen-game .page-wrapper {
    background: none;
}

.invite-friend__steps {
    display: flex;
    justify-content: space-between;
}

.invite-friend {
    min-width: 1050px;
    min-height: 645px;
    padding: 50px 110px;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
    border-radius: 8px 0px 0px 8px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.invite-friend__step {
    max-width: 91px;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    color: #333333;
}

.invite-friend__instruction {
    margin-top: 37px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.invite-friend__instruction-title {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 100%;
    color: #000000;
}

.invite-friend__instruction-text {
    color: #189FDA;
}

.invite-friend__instruction-text_bordered {
    border: 3px;
    border-style: dashed;
    padding: 1px 11px 6px 9px;
}

.invite-friend__instruction-list {
    margin-top: 38px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.invite-friend__instruction-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.invite-friend__instruction-item:before {
    content: '';
    width: 24px;
    height: 21px;
    background-image: url("/images/friends/instruction-list-type.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.invite-friend__instruction-btns {
    align-self: center;
    gap: 20px;
    display: flex;
    margin-top: 34px;
}

.invite-friend__instruction-btn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.invite-friend__instruction-btn:disabled {
    background: #E7E7E7;
    border-radius: 8px;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    color: #BDBDBD;
}

.invite-friend__instruction-btn:disabled:after {
    display: none;
}

.invite-friend__instruction-btn_back {
    padding: 7px 10px;
    border: 1px solid #189FDA;
    border-radius: 8px;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    color: #189FDA;
}

.invite-friend__instruction-btn_next {
    background: #189FDA;
    border-radius: 8px;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    color: #FFFFFF;
    padding: 7px 10px;
}

.invite-friend__instruction-btn_back:before {
    content: '';
    background: url("/images/friends/back.svg") no-repeat center;
    background-size: contain;
    width: 15px;
    height: 8px;
}

.invite-friend__instruction-btn_next:after {
    content: '';
    background: url("/images/friends/next.svg") no-repeat center;
    background-size: contain;
    width: 15px;
    height: 8px;
}

.invite-friend__step-icons {
    display: flex;
    gap: 4px;
    justify-content: space-between;
    align-items: center;
    margin-right: 63px;
}

.invite-friend__step-icon {
    width: 30px;
    height: 30px;
    border: 3px solid #189FDA;
    border-radius: 50%;
}

.invite-friend__step-icon_disable {
    background: #FFFFFF;
    border: 3px solid #E7E7E7;
}

.invite-friend__step-line {
    height: 4px;
    background: #E7E7E7;
    border: 1px solid #E7E7E7;
    border-radius: 2px;
    flex-grow: 1;
}

.invite-friend__step-icon_active {
    background: #189FDA;
}

.invite-friend__step-line_active {
    background: #189FDA;
}

.invite-friend__how {
    display: none;
}

.invite-friend__how-title {
    font-weight: 500;
    font-size: 28px;
    line-height: 100%;
    text-align: left;
    color: #000000;
    margin-bottom: 25px;
}

.invite-friend__how-list {
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: #000000;
    position: relative;
}

.invite-friend__how-list li {
    position: absolute;
    padding-left: 52px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.invite-friend__how-list li:before {
    content: '';
    height: 44px;
    width: 24px;
    background-size: contain;
}

.invite-friend__how-list li:nth-child(2):before {
    background: url("/images/friends/1.svg") no-repeat center;
}

.invite-friend__how-list li:nth-child(3):before {
    background: url("/images/friends/2.svg") no-repeat center;
}

.invite-friend__how-list li:nth-child(4):before {
    background: url("/images/friends/3.svg") no-repeat center;
}

.invite-friend__how-list li:nth-child(2) {
    top: 55px;
}

.invite-friend__how-list li:nth-child(3) {
    top: 130px;
}

.invite-friend__how-list li:nth-child(4) {
    top: 215px;
}

.invite-friend__create {
    display: none;
    padding-top: 60px;
}


.invite-friend__create-wrp {
    margin-top: 60px;
    display: flex;
    gap: 30px;
}

.invite-friend__create-btn {
    background: #189FDA;
    border-radius: 8px;
    text-align: center;
    padding: 8px 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
}

.invite-friend__create-input {
    padding: 6px 12px;
    flex-grow: 1;
    background: #FFFFFF;
    border: 1px solid #189FDA;
    border-radius: 8px;
}

.invite-friend__create-wrapper {
    visibility: hidden;
    margin-top: 40px;
    display: flex;
    gap: 50px;
}

.invite-friend__create-wrapper p {
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: #000000;
}

.invite-friend__create-links {
    display: flex;
    gap: 24px;
}

.invite-friend__create-link {
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.invite-friend__create-link_wa {
    background-image: url("/images/friends/Whatsapp.svg");
}

.invite-friend__create-link_tg {
    background-image: url("/images/friends/Telegram.svg");
}

.invite-friend__create-link_mail {
    background-image: url("/images/friends/mail.svg");
}

.invite-friend__create-link_gmail {
    background-image: url("/images/friends/gmail.svg");
}

.invite-friend__create-btns {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
}

.invite-friend__create-success {
    visibility: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
}

.invite-friend__create-success:before {
    content: '';
    width: 30px;
    height: 30px;
    background-image: url("/images/friends/success.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.invite-friend__create-btn_success {
    background: #47BF67;
    opacity: 0.4;
    border-radius: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
}

.invite-friend__step-icon_success {
    background: #47BF67;
    border: 3px solid #47BF67;
}

.invite-friend__step-line_success {
    background: #47BF67;
    border: 1px solid #47BF67;
}

@font-face {
    font-family: "Proxima Nova";
    src: url("/fonts/ProximaNova/ProximaNova-Reg.otf") format("opentype");
}

@font-face {
    font-family: "Proxima Nova";
    font-style: italic;
    src: url("static/fonts/ProximaNova/ProximaNova-RegIt.otf") format("opentype");
}

@font-face {
    font-family: "Neometric Alt Black";
    src: url("/fonts/Neometric Alt Black (Regular).woff") format("woff");
}

@font-face {
    font-family: "Neometric Alt Medium";
    src: url("/fonts/Neometric Alt Medium (Regular).woff") format("woff");
}

@font-face {
    font-family: "Neometric Alt Medium";
    src: url("/fonts/Neometric/Neometric Alt Medium (Regular).otf") format("otf");
}

#friendsShipLanding * {
    font-family: 'Raleway', sans-serif;
}

.container {
    max-width: 1235px;
    margin: 0 auto;
}


.friends-header {
    padding: 26px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.friends-marquee {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    background: rgb(123, 190, 223);
    background: linear-gradient(90deg, rgba(123, 190, 223, 1) 0%, rgba(20, 138, 191, 1) 48%, rgba(91, 174, 125, 1) 100%);

}

.friends-marquee p {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 110%;
    text-transform: uppercase;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 10px;
    /*animation-name: scrolling;*/
    /*animation-timing-function: linear;*/
    /*animation-iteration-count: infinite;*/
    /*animation-duration: 2s;*/
}

.friends-marquee p:before {
    content: '';
    width: 20px;
    height: 20px;
    background: url("/images/friends/abakus-marquee.svg") no-repeat center;
    background-size: contain;
}

.marquee {
    position: relative;
    overflow: hidden;
    --offset: 20vw;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
}

.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 15s linear infinite;
}

.marquee p {
    padding: 0 20vw;
    min-width: 401px;
    box-sizing: content-box;

}


@keyframes marquee {
    0% {
        transform: translate3d(var(--move-initial), 0, 0);
    }

    100% {
        transform: translate3d(var(--move-final), 0, 0);
    }
}

@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translatex(-400px);
    }
}

.land-reg-form {
    padding: 50px 0;
    background: rgb(5, 109, 160);
    background: linear-gradient(31deg, rgba(5, 109, 160, 1) 0%, rgba(19, 141, 204, 1) 29%, rgba(63, 167, 172, 1) 65%, rgba(118, 190, 111, 1) 100%);
}

.land-reg-form__title {
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 76px;
    color: #FFFFFF;
}


.friends-header a {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 76px;
    text-align: center;
    text-decoration-line: underline;
    color: #333333;
}

.friends-header h1 {
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
    text-align: center;
    color: #333333;
}


.friends-banner {
    padding-top: 36px;
    padding-bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.friends-banner img {
    width: 513.91px;
    height: 441px;
}

.friends-banner__text {
    margin-bottom: 40px;
}

.friends-banner__text {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
}

.friends-banner__text h2, .friends-banner__text span {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 32px;
    line-height: 150%;
    margin-bottom: 14px;
}

.friends-banner__text p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    margin-bottom: 48px;
}

.friends-banner__text p span {
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 32px;
    line-height: 150%;
    margin-bottom: 48px;
}

.friends-banner__text h3 {
    margin-bottom: 12px;
}

.friends-banner__text ul li {
    ont-weight: 400;
    font-size: 18px;
    line-height: 100%;
    color: #333333;
}

.friends-banner__text ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.land-instruction h2 {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 150%;
    text-align: center;
    margin-bottom: 21px;
}

.land-instruction__list {
    position: relative;
    padding-top: 70px;
}

.land-instruction__list li {
    padding-left: 71px;
    position: absolute;
    display: flex;
    gap: 20px;
    align-items: center;
}

.land-instruction__list li:nth-child(2) {
    top: 3%;
}

.land-instruction__list li:nth-child(4) {
    top: 22%;
}

.land-instruction__list li:nth-child(6) {
    top: 43%;
}

.land-instruction__list li:nth-child(8) {
    top: 68%;
}


.land-instruction__list li:before {
    content: '';
    height: 44px;
    width: 24px;
    background-size: contain;
    flex-shrink: 0;
}

.land-instruction__list li:nth-child(2):before {
    background: url("/images/friends/1.svg") no-repeat center;
}

.land-instruction__list li:nth-child(4):before {
    background: url("/images/friends/2.svg") no-repeat center;
}

.land-instruction__list li:nth-child(6):before {
    background: url("/images/friends/3.svg") no-repeat center;
}

.land-instruction__list li:nth-child(8):before {
    background: url("/images/friends/4.svg") no-repeat center;
}

.land-instruction__wrp {
    position: relative;
}

.land-instruction__wrp:before {
    content: '';
    background: url("/images/friends/logoBird.svg") no-repeat center;
    background-size: contain;
    width: 75px;
    height: 80px;
    position: absolute;
    width: 109px;
    height: 122px;
    bottom: 11px;
    right: 3px;
}

.land-instruction__wrp-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 100%;
}

.land-instruction__wrp-text {
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
}

.land-instruction__wrp-title:before {
    content: '';
    width: 40px;
    height: 50px;
    background: url("/images/friends/title-steps.svg") no-repeat center;
    background-size: contain;
}

.land-reg-form form {
    width: 100%;
}

.land-reg-form_wrp {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 22px;
    grid-row-gap: 16px;
    width: 100%;
}

.land-reg-form__input {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 120%;
    color: #FFFFFF;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.land-reg-form__input_birthday {
    display: flex;
    justify-content: space-between;
}

.land-reg-form__input input::placeholder {
    opacity: 0.7;
    color: inherit;
}

.land-reg-form__input select,
.land-reg-form__input input {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    padding: 16px 16px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 120% !important;
    color: #333333 !important;
    height: 57px !important;
}

.land-reg-form-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.land-reg-form-box form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.land-reg-form__text {
    font-weight: 600;
    font-size: 12px;
    line-height: 120%;
    color: #FFFFFF;
    align-self: flex-start;
}

.land-reg-form__checkboxs {
    display: flex;
    gap: 30px;
    align-items: center;
    align-self: flex-start;
    padding-left: 10%;
}

.land-reg-form__checkbox input[type="checkbox"] {
    display: none;
}

.land-reg-form__checkbox input[type="checkbox"] ~ label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    color: #FFFFFF;
}

.land-reg-form__checkbox input[type="checkbox"] ~ label:before {
    content: '';
    width: 30px;
    height: 30px;
    background: #FFFFFF;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    flex-shrink: 0;
}


.land-reg-form__checkbox input[type="checkbox"]:checked ~ label:after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    background: #333333;
    border-radius: 2px;
    left: 10.5px;
}

.land-reg-form__btns {
    display: flex;
    gap: 20px;
    align-items: center;
}

.land-reg-form__btns button {
    border-radius: 12px;
    width: 485px;
    height: 50px;
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    color: #FFFFFF;
}

.land-reg-form__btns button:nth-child(1) {
    background: linear-gradient(140.84deg, #EA3D2F 8.42%, #C13125 84.96%);
}

.land-reg-form__btns button:nth-child(2) {
    background: #F37368;
}

.friends-header__mobile-link {
    display: none;
}

.arrow_2 {
    position: relative;
    transform: rotate(90deg);
    padding-bottom: 32px;
}

.arrow_2 div {
    position: relative;
    width: 27px;
    height: 2px;
    background-color: #189FDA;
    display: block;
}

.arrow_2 div::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    top: 2.5px;
    right: -1px;
    background-color: #189FDA;
    transform: rotate(-45deg);
}

.arrow_2 div::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    top: -2.5px;
    right: -1px;
    background-color: #189FDA;
    transform: rotate(45deg);
}

.arrow_2 {
    display: none;
}

@media screen and (max-width: 1290px) {

    .container {
        width: 90%;
    }

    .friends-banner {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .land-reg-form_wrp {
        grid-template-columns: 1fr;
    }

    .land-reg-form__input_birthday {
        gap: 10px;
    }

    .land-reg-form__input_birthday input {
        flex-grow: 1;
    }

    .land-reg-form__btns {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .land-instruction__wrp:before {
        /*width: 75px;*/
        /*height: 80px;*/
    }

    .land-instruction__list li:nth-child(2) {
        top: 3%;
    }

    .land-instruction__list li:nth-child(4) {
        top: 26%;
    }

    .land-instruction__list li:nth-child(6) {
        top: 48%;
    }

    .land-instruction__list li:nth-child(8) {
        top: 68%;
    }
}

.land-confirm {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.land-confirm-error {
    color: #ca3427;
}


.land-confirm,
#getNewCodeToNewPhone,
.land-confirm-error,
#resend-change-phone {
    display: none;
}

.land-confirm input {
    width: 413px;
}

.land-confirm p {
    font-family: 'Proxima Nova';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    color: #FFFFFF;
}

.land-confirm h3 {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 100%;
    color: #FFFFFF;
}

.land-confirm button {
    padding: 16px 50px;
    background: linear-gradient(140.84deg, #EA3D2F 8.42%, #C13125 84.96%);
    border-radius: 12px;
    width: 413px;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    color: #FFFFFF;
}

.land-confirm button:disabled {
    background: #E7E7E7;
    border-radius: 12px;
}

.change-phone {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 100%;
    color: #066A9D;
}

.p-0 {
    padding: 0;
}
.desktop-hidden {
    display: block;
}
.td.adaptive > .mobile-title {
    display: none;
}
.payment-type-income, .payment-type-canceled, .payment-type-outcome, .payment-type-refund, .payment-currency, .payment-type-paid, .payment-type-scheduled, .payment-type-notPaid {
    border-radius: 4px;
    padding: 1px 8px;
    width: fit-content;
}
.payment-type-outcome, .payment-type-notPaid {
    border: 1px solid #F59E97;
    background: #FDECEA;
    color: #EA3D2F;
}
.payment-type-autopay {
    border: 1px solid #F59E97;
    background: #FDECEA;
    color: #EA3D2F;
}
.payment-type-income, .payment-type-paid {
    border: 1px solid #97D3A7;
    background: #EAF6ED;
    color: #2FA84F;
}
.payment-type-refund, .payment-type-scheduled {
    border: 1px solid #8BCFED;
    background: #E8F5FB;
    color: #189FDA;
}
.payment-currency {
    border: 1px solid #D6D6D6;
    background: #F9F9F9;
    color: #333333;
}
.payment-type-canceled {
    border: 1px solid #F59E97;
    background: #FDECEA;
    color: #EA3D2F;
}
.table-search-action-popup {
    font-size: 14px;
    padding: 6px 12px;
    background: inherit;
    border-radius: 15px;
    height: 30px;
    font-family: 'Rubik';
    font-weight: 400;
}
.table-search-action-popup > img {
    height: 14px;
    margin-right: 8px;
}
.block-reduce-datepicker {
    width: 145px;
}


@media screen and (min-width: 685px) {
    .desktop-hidden {
        display: none;
    }

}
@media screen and (max-width: 685px) {
    .table-tab-list {
        display: flex;
        flex-direction: row;
        position: relative;
        flex-wrap: nowrap;
    }
    .table-search-action-popup {
        top: unset;
        bottom: -55px;
    }
    .table .table-row.adaptive {
        display: flex;
        flex-direction: column;
        margin-top: 1.5rem;
        border-radius: 8px;
        overflow: hidden;
    }
    .adaptive-hidden {
        display: none !important;
    }
    .table-head > .table-row.adaptive {
        display: none;
    }
    .td.adaptive > .mobile-title {
        display: block;
        font-weight: 700;
        font-size: 16px;
    }
    .td.adaptive {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-weight: 400;
        font-size: 16px !important;
        text-align: right;
    }







    #paymentBalanceButton {
        width: 100%;
        margin-top: 12px;
    }
    .my-subs-tab-wrp {
        position: relative;
        margin-top: 50px !important;
    }
    .my-subs-tab.purchase {
        background: white;
        position: absolute;
        top: -46px;
        right: 0;
        width: fit-content;
        height: 40px;
    }
    .chat-dialog-messages-list-item-info-block-message-edit.inPage {
        left: 0;
    }
    .chat-dialog-messages-list-item-info-block-message-remove.inPage {
        left: -30px;
    }

    .friends-header__company-name {
        display: none;
    }

    .friends-header__company-link {
        display: none;
    }

    .friends-header__mobile-link {
        display: block;
    }

    .land-reg-form__input_birthday {
        flex-direction: column;
    }

    .land-reg-form__checkboxs {
        flex-direction: column;
        align-items: flex-start;
    }

    .land-instruction__list img {
        display: none;
    }

    .land-instruction__list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .land-instruction__list li {
        padding-left: initial;
        position: static;
    }

    .land-instruction__list li:before {
        height: 44px;
        width: 44px;
        padding: 27px;
        background-size: contain;
        border: 2px dashed #199fda;
        border-radius: 50%;
    }

    .land-instruction__wrp:before {
        display: none;
    }

    .land-instruction {
        padding-bottom: 50px;
    }

    .arrow_2 {
        display: block;
    }

    .student-hw-decorative-bg {
        display: none;
    }

}


#mailing-modal input[type=checkbox].form-control {
    display: block;
}

#mailing-modal .course-tags-select-wrp {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#mailing-modal .course-tags-select-wrp label {
    margin: 0;
}

#mailing-modal .course-tags-select-wrp input[type="checkbox"] {
    width: auto;
    margin: 0;
}

#mailing-modal #courses-tags-select-include,
#mailing-modal #courses-tags-select-exclued {
    display: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    min-width: auto !important;
    min-height: auto !important;
}

.feedback-inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.feedback-inputfile + label {
    border: 1px solid #2F80ED;
    color: black;
    display: inline-flex;
    padding: 5px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    outline: none;
    line-height: 16px;
    font-weight: 400;
}

.booking-calendar {
    overflow: hidden;
    position: relative;
}

.calendar-loader {
    position: absolute;
    height: 100%;
    top: 47px;
    background: #ffffffa1;
    margin-top: 10px;
    margin-bottom: 10px;
    border: none;
    border-radius: initial;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    width: 100%;
}

.create-slot-confirm {
    position: absolute;
    background: white;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 18px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    width: 218px;
}

.create-slot-confirm_left {
    transform: translate(calc(-100% - 130px), -50%);
}

.create-slot-confirm select {
    margin-right: inherit;
}

.create-slot-confirm label {
    display: none;
    align-items: center;
    gap: 8px;
}

.create-slot-confirm-btns {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.create-slot-confirm-btns button {
    flex-grow: 1;
}

.centered-label-wrp {
    display: flex;
    align-items: center;
    gap: 8px
}

.centered-label-wrp input {
    margin-top: initial;
}

.centered-label-wrp label {
    font-size: 16px;
    margin-bottom: initial;
}

body.calendar-page .main-menu-footer {
    height: 0 !important;
}

.event-type {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
    gap: 5px;
    margin-top: 15px;
}

.event-type > .event-type-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

#editTeacherSlotModal select,
#editTeacherSlotModal input[type="text"] {
    width: 100%;
}

.rebooking-calendar .ec-event.ec-preview,
.search-result .ec-event.ec-preview {
    opacity: 1 !important;
}

.search-teacher {
    background: #FFFFFF;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 30px;
    position: relative;
    margin-bottom: 20px;
}

.search-teacher summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-teacher-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.search-teacher-title h3 {
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 26px;
    white-space: nowrap;
    margin-right: 40px;
}

.search-teacher-tags {
    display: flex;
    gap: 10px;
    overflow: hidden;
}

.search-teacher-tags.visible {
    overflow: visible;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
    flex-wrap: wrap;
    justify-content: end;
}

.search-teacher-tag {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #189FDA;
    background: #E7F5FB;
    border-radius: 4px;
    padding: 4px 8px;
    position: relative;
    white-space: nowrap;
    height: 22px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.search-teacher-tag:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    top: 50%;
    left: -7px;
    background: #189FDA;
    transform: translateY(-50%);
}

.search-teacher-tag:nth-child(1):before {
    content: none;
    display: none;
}

.hw-form-group {
    margin-bottom: 10px;
    padding-left: 0;
}

.hw-field {
    height: 45px;
    display: flex;
    justify-content: left;
    align-items: center;
    /*padding-left: 0;*/
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #828282;
    /* display: block; */
    margin-bottom: 6px;
}

.hw-title-preview {
    height: 45px;
    display: flex;
    justify-content: left;
    align-items: center;
    /*padding-left: 0;*/
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #828282;
    /* display: block; */
    margin-bottom: 6px;
}

.hw-field-preview {
    height: 45px;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 14px;
}

.create-hw-tooltip {
    height: 37px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.create-hw-tooltip img {
    /*transform: scale(170%);*/
    width: 30px;
    height: auto;
    object-fit: contain;
}

.create-hw-tooltip::after {
    content: attr(mytitle);
    position: absolute;
    width: 170px;
    top: 0;
    right: 100%;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.2);
    font-family: Rubik;
    font-style: normal;
    color: #4F4F4F;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    z-index: 999999;
    overflow-y: visible;
    overflow-x: visible;
    opacity: 0;
    visibility: hidden;
    overflow-wrap: break-word;
}

.create-hw-tooltip::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: -20%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent white;
    transform: rotate(-45deg);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
}

.create-hw-tooltip:hover::after,
.create-hw-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    z-index: 99999999;
}

.search-teacher-subtitle {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    color: #707070;
    flex-grow: 1;
    flex-shrink: 0;
    width: 100%;
}

.search-teacher-periods {
    display: flex;
    gap: 10px 20px;
    flex-wrap: wrap;
}

.search-teacher-periods p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #BDBDBD;
}

.search-teacher-periods p > span {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
    background: #189FDA;
    border-radius: 4px;
    padding: 4px 8px;
}

.search-teacher-btn {
    position: relative;
    align-self: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #189FDA;
    cursor: pointer;
}

.search-teacher-btn:after {
    position: absolute;
    content: '';
    width: 12px;
    height: 6px;
    background: url("/images/booking/book-arrow.svg") no-repeat center;
    background-size: contain;
    right: -20px;
    top: 6px;
    transform-origin: center;
    transition: transform .3s linear;
}

.search-teacher[open] .search-teacher-btn:after {
    transform: rotate(180deg);
}

.search-teacher-wrp {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-teacher-summary {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.search-teacher-summary > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-teacher-summary > div > h5 {
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    color: #707070;
}

.search-teacher-summary > div > p {
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #9D9D9D;
}

.search-teacher-tag.counter {
    position: sticky;
    position: -webkit-sticky;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 999;
}


#createLeadModal .modal-body input[type="text"],
#createLeadModal .modal-body select,
#subscriptionsBuyModal .modal-body select,
#subscriptionsBuyModal .modal-body input[type="text"] {
    width: 100%;
}

#editTeacherSlotModal .modal-body,
#editLeadDateModal .modal-body,
#subscriptionsBuyModal .modal-body,
#createLeadModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#createLeadModal .modal-body input[type="text"],
#createLeadModal .modal-body input[type="email"],
#createLeadModal .modal-body select,
#tempBuyModal .modal-body select,
#tempBuyModal .modal-body input[type="text"] {
    width: 100%;
}

#editTeacherSlotModal .modal-body,
#editLeadDateModal .modal-body,
#tempBuyModal .modal-body,
#createLeadModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.create-lead-info span {
    font-weight: bold;
}

.teacher-calendar {
    position: relative;
}

details summary {
    cursor: pointer;
    transition: margin 150ms ease-out;
}

details[open] summary {
    margin-bottom: 10px;
}

#event-type-circle-TEMPORARY_INSTANT {
    padding: 4px;
}

/*#event-type-circle-TEMPORARY_INSTANT:before {*/
/*    content: '🔥';*/
/*    position: absolute;*/
/*    left: 4px;*/
/*    top: 1px;*/
/*    font-size: 13px;*/
/*}*/

/*#event-type-circle-TRIAL_LESSON:before {*/
/*    content: '🚀';*/
/*    position: absolute;*/
/*    left: 4px;*/
/*    top: 1px;*/
/*    font-size: 13px;*/
/*}*/

details summary::-webkit-details-marker {
    display: none;
}

.teacher-calendar {
    max-height: 555px;
}

#changeSchedule .teacher-calendar {
    max-height: initial;
}

.select-teacher-schedule {
    top: 0;
    right: 0;
    position: absolute;
}

.payment-wrp {
    display: none;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 40px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.payment-wrp h2 {
    font-weight: 400;
    font-size: 30px;
    line-height: 100%;
    color: #189FDA;
}

.payment-wrp a {
    color: #189FDA;
    text-decoration: underline;
}

.payment-wrp p {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #BDBDBD;
}

.schedule-lesson-booking, short-user-schedule-item-booking {
    position: relative;
    border: 2px solid #D4A236;
}

.schedule-lesson-booking:before, short-user-schedule-item-booking:before {
    content: '';
    position: absolute;
    right: 15px;
    top: 21px;
    width: 25px;
    height: 25px;
    background-image: url("/images/booking/booking-lesson-icon.svg");
    background-size: contain;
    background-position: center;
}


.schedule-lesson-booking .schedule-lesson-time,
.short-user-schedule-item-booking .short-user-schedule-item-time {
    background: #ECB236;
    color: #FFFFFF;
}

.abakus-profile-block,
.abakus-profile-block {
    margin-top: 22px;
}

.abakus-profile-block a img,
.abakus-profile-block a img {
    width: 100%;
}

.dropdown-lesson-type {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #BDBDBD;
    padding: 6px 14px;
    border-bottom: 1px solid #E7E7E7;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
}

.dropdown-lesson-color {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.dropdown-lesson-close {
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    width: 15px;
    top: -1px;
}

.dropdown-lesson-close:before, .dropdown-lesson-close:after {
    content: "";
    position: absolute;
    width: 15px;
    height: 2px;
    background: #BDBDBD;
    border-radius: 2px;
}

.dropdown-lesson-close:before {
    transform: rotate(45deg);
}

.dropdown-lesson-close:after {
    transform: rotate(-45deg);
}

.dropdown-lesson-type .TEMPORARY_INSTANT {
    background: #c9decb;
    padding: 3px;
    width: 22px;
    border-radius: 50%;
    height: 22px;
}

.event-type-tooltip {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #333333;
    width: 21px;
    height: 20px;
    border: 1px solid #CFD4D9;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
}

.event-description {
    padding: 6px 8px;
}

.event-desc-empty {
    border-radius: 2px;
    padding: 0 2px;
}

.event-desc-lesson {
    background: #ECB236;
    border-radius: 2px;
    padding: 0 2px;
}

.event-desc-trial {
    background: #ECB236;
    border-radius: 2px;
    padding: 0 2px;
}

.event-desc-permanent {
    background: #BAE2F4;
    border-radius: 2px;
    padding: 0 2px;
}

.event-desc-instant {
    background: #C9DECA;
    border-radius: 2px;
    padding: 0 2px;
}

.dropdown-lesson-content {
    padding: 6px 14px;
}

.dropdown-lesson-student {
    display: flex;
    gap: 12px;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    color: #467EE5;
}

.dropdown-lesson-student > div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dropdown-lesson-student:before {
    content: '';
    width: 22px;
    height: 22px;
    background-image: url("/images/booking/profile-icon.svg");
    background-size: contain;
    background-position: center;
}

.dropdown-lesson-date-time {
    font-weight: 400;
    font-size: 12px;
    line-height: 130%;
    color: #333333;
}

#counterMessages {
    margin-left: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #FFFFFF;
    background-color: #ffffff;
    width: 30px;
    height: 21px;
    border-radius: 10px;
    display: none;
    justify-content: center;
    align-items: center;
    color: #189FDA;
}

#counterNotification {
    margin-left: 20px;
    font-size: 12px;
    border: 1px solid #FFFFFF;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
}

.payment-description h1 {
    font-family: 'Rubik';
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    color: #BDBDBD;
    margin-bottom: 18px;
}

.payment-list-courses {
    margin-bottom: 26px;
}

.payment-courses-block {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 31px;
    margin-bottom: 28px;
}

.payment-courses-block p {
    font-family: 'Rubik';
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    color: #333333;
    word-break: break-word;
    flex: 1 1 25%;
}

.payment-courses-block p:first-child {
    flex: 1 1 60%;
}

.payment-courses-block p:last-child {
    color: #189FDA;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
}

#createSlot[disabled] {
    cursor: progress;
    opacity: 0.7;
}

.lesson-info-modal-content {
    padding: 0;
    width: 700px;
    height: 650px;
}

.lesson-info-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(0deg, #EBF8FC 0%, #FFFFFF 100%);
    padding: 13px 30px 13px 30px;
}

.lesson-info-modal-logo {
    display: inline-block;
    width: auto;
    max-height: 50px;
}

.lesson-info-modal-title {
    font-family: Rubik;
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0em;
}

.lesson-info-modal-container input,
.lesson-info-modal-container label {
    display: block;
}

.lesson-info-modal-container {
    width: 100%;
    display: grid;
    grid-template: 1fr 1fr 1fr auto auto / repeat(2, 1fr);
    grid-auto-rows: 1fr;
    column-gap: 24px;
    row-gap: 24px;
    padding: 0px 30px 20px 30px;
}

.lesson-info-modal-container > div:nth-child(5) {
    grid-row: 3;
    grid-column: 1 / -1;
}

.lesson-info-modal-container > div:nth-child(6) {
    grid-row: 4;
    grid-column: 1 / -1;
}

.lesson-info-modal-container > div:nth-child(7) {
    grid-row: 5;
    grid-column: 1 / -1;
}

.lesson-info-modal-container label {
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.12px;
    text-transform: uppercase;
    color: #828282;
}

.lesson-info-modal-container input[type="text"] {
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    padding: 8px 0px 8px 16px;
    font-family: Rubik;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

.lesson-info-modal-radio {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.lesson-info-modal-radio > label {
    margin-right: 36px;
}

.lesson-info-modal-radio input {
    margin-right: 4px;
    position: relative;
    top: -2px;
}

.lesson-info-modal-radio label {
    display: flex;
    align-items: center;
    color: #333333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    text-transform: none;
    margin-bottom: 0px;
}

#lessonComment {
    min-height: 100px;
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    padding: 8px 0px 8px 16px;
    font-family: Rubik;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;
}

.lesson-info-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 20px;
}

.lesson-info-modal-save {
    display: inline-block;
    padding: 8px 40px;
    border-radius: 8px;
    background: #189fda;
    color: #FFF;
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    cursor: pointer;
    transition: 0.2s;
}

.lesson-info-modal-save:hover {
    background: #3562b6;
}

.lesson-comments-wrapper {
    display: flex;
    gap: 10px;
    width: 100%;
    background-color: white;
}

.lesson-comments-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lesson-comments-header-info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.lesson-comments-header-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.lesson-comments-date {
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #333333;
}

.lesson-comments-point {
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #BDBDBD;
    padding-left: 8px;
    padding-right: 8px;
}

.lesson-comments-teacher {
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #828282;
}

.lesson-comments-discipline {
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #189FDA;
    padding: 4px 8px;
    border-radius: 4px;
    background: #E7F5FB;
}

.lesson-comments-topic {
    overflow: hidden;
    color: #828282;
    text-overflow: ellipsis;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.lesson-comments-edit img {
    min-width: 26px;
    min-height: 26px;
    margin-right: 20px;
    cursor: pointer;
}

.lesson-comments-delete img {
    min-width: 18px;
    min-height: 18px;
    cursor: pointer;
}

.lesson-comments-delete {
    position: relative;
}

.lesson-comments-text {
    width: 100%;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: #333333;
    padding: 12px 24px;
    border: 1px solid #BDBDBD;
    border-radius: 12px;
}

.lesson-comments-text.grey {
    color: #BDBDBD;
}

.user-info-content-levels-col-1 {
    width: 25%;
}

.user-info-content-levels-col-1 img {
    width: 100%;
    padding-top: 15px;
}

.user-info-content-levels-col-2 {
    width: 75%;
    padding: 32px 16px 46px 10px;
    color: #333;
    text-align: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.user-info-content-levels-link {
    color: #2E80EC;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration-line: underline;
    cursor: pointer;
}

.lesson-info-modal-levels-label {
    color: #828282;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.12px;
    text-transform: uppercase;
}

.lesson-info-modal-levels-select {
    display: block;
    color: black;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    padding: 8px 0px 8px 16px;
    width: 100%;
}

.lesson-info-modal-levels-select::placeholder {
    color: #B5B5B5;
}

.lesson-info-modal-content.levels {
    width: 530px;
    height: auto;
}

.lesson-info-modal-levels-container {
    padding: 0px 40px 40px 40px;
}

.lesson-info-modal-save.levels {
    width: 100%;
    margin-top: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lesson-info-modal-save.levels img {
    margin-right: 10px;
}

#levelsSelectDiscipline {
    margin-bottom: 24px;
}

.lesson-info-modal-content.certificate {
    width: 600px;
    height: auto;
}

.lesson-info-modal-content.allСertificates {
    width: 676px;
    height: auto;
}

.lesson-info-modal-levels-container.allСertificates {
    display: grid;
    grid-template-columns: 24% 24% 24% 24%;
    grid-gap: 12px;
}

#certificateInfo {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.certificate-info-span {
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    max-width: 300px;
    word-break: break-word;
}

#languageCertificate {
    display: flex;
    align-items: center;
    gap: 100px;
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 24px;
}

#languageCertificate input {
    margin-right: 16px;
}

#fullNameRus {
    width: 336px;
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    padding: 8px 0px 8px 16px;
    margin-bottom: 36px;
}

.create-certificate-modal-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.certificate-modal-btn {
    padding: 8px 14px;
    border: 1px solid #2A72D4;
    color: #2A72D4;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    transition: 0.2s;
}

.certificate-modal-btn:hover {
    background: #2A72D4;
    color: white;
}

.certificate-modal-btn:hover > img {
    filter: brightness(0) invert(100%);
}

.certificate-modal-btn > img {
    width: 20px;
    height: 20px;
    margin-right: 12px;
}

.certificate-modal-btn.danger {
    border: 1px solid #f43c44;
    color: #f43c44;
    background: white;
}

.certificate-modal-btn.danger:hover {
    color: white;
    background: #f43c44;
}

.certificate-modal-btn.danger:hover > img {
    filter: brightness(0) invert(100%);
}

.create-new-degree-span {
    text-align: center;
    margin-top: 12px;
    font-size: 16px;
    cursor: pointer;
    color: #189fda;
    text-decoration: underline;
}

.all-certificates-prize-item {
    display: flex;
    width: 140px;
    height: 104px;
    padding: 4px 12px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border-radius: 4px;
    border: 1px solid #2E80EC;
    background: #EFF6FF;
    cursor: pointer;
}

.all-certificates-prize-item > img {
    height: 70%;
    width: auto;
}

.all-certificates-prize-item-title {
    color: #333;
    font-family: Rubik;
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

.all-certificates-prize-item-text {
    color: #979696;
    font-family: Rubik;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 10px;
    text-overflow: ellipsis;
    text-align: center;
}

.user-assign-stage-title {
    color: #2E80EC;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin-left: 35px;
}

.user-assign-stage-col {
    width: 33%;
}

.all-cups-title {
    color: #2E80EC;
    font-family: Rubik;
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

#agreed-schedule-option {
    display: flex;
    align-items: center;
    gap: 50px;
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#lesson-duration-option {
    display: flex;
    align-items: center;
    gap: 50px;
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#agreed-schedule-option input {
    margin-right: 10px;
}

.tariffs-tabs {
    display: flex;
    gap: 20px;
    border-bottom: 2px solid #E7E7E7;
}

.tariffs-tab {
    cursor: pointer;
    display: flex;
    align-content: center;
    gap: 8px;
    padding: 16px;
    color: #333;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
    border-bottom: 2px solid transparent;
}

.tariffs-tab-active {
    border-bottom: 2px solid #189FDA;
}

.tariff-content {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tariff-content h4 {
    margin-bottom: 10px;
}

.tariff-flex-block {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tariffs-currency-filters,
.tariffs-discipline-filters,
.tariffs-lesson-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tariffs-currency-filters label,
.tariffs-lesson-filters label,
.tariffs-discipline-filters label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 10px 16px;
    color: #189FDA;
    border-radius: 40px;
    border: 1px solid #189FDA;
    background: #FFF;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    font-family: Rubik;
}

div label.available-item-active {
    background: #189FDA;
    color: #FFF;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.tariffs-currency-filters label input,
.tariffs-lesson-filters label input,
.tariffs-discipline-filters label input {
    display: none;
}

.slick-list.draggable {
    padding: 30px 0 !important;
}

.slick-prev-arrow {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
}

.slick-next-arrow {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}

.slick-prev-arrow,
.slick-next-arrow {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #EDEDED;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.slick-prev-arrow:hover,
.slick-next-arrow:hover {
    background: #5DBCE5;
    /*background: #DADADA;*/
}

.slick-prev-arrow svg path,
.slick-next-arrow svg path {
    fill: #C2C2C2;
}

.slick-prev-arrow:hover svg path,
.slick-next-arrow:hover svg path {
    fill: #FFFFFF;
    /*fill: #858585;*/
}

.slick-prev-arrow:active,
.slick-next-arrow:active{
    background: #028AC5;
}

.slick-prev-arrow.slick-disabled,
.slick-next-arrow.slick-disabled {
    visibility: hidden;
}

.tariffs-select {
    width: 224px;
    max-width: 224px;
    position: relative;
    border-radius: 18px;
    border: 1px solid #BDBDBD;
    background: #FFF;
    flex: 0;
}

.tariffs-select-header {
    min-width: 224px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    border-radius: 17px 17px 0px 0px;
    background: #29A4DD;
    padding: 20px;
    text-align: center;
    color: #FFF;
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    min-height: 63px;
}

.tariffs-select-header span {
    color: #333;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 19.2px */
    border-radius: 6px;
    background: #FFCB43;
    padding: 2px 6px;
}

.tariffs-select-body {
    padding: 30px 15px 15px 15px;
}

.tariffs-select-btn {
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    /*padding: 23px 38px;*/
    padding: 23px 0;
    width: 100%;
    text-align: center;
    border-radius: 12px;
    border: 2px solid #FFF;
    background: #F09D04;

    display: flex;
    justify-content: center;
    align-items: center;
}

.tariffs-select-btn > img {
    margin-right: 12px;
}

.tariffs-select-price {
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    margin-bottom: 12px;
}

.tariffs-select-lesson-price {
    color: #6B6363;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%; /* 17.6px */
    margin-bottom: 30px;
}

.tariffs-select-hr {
    height: 1px;
    width: 100%;
    background: #29A4DD;
    margin-bottom: 16px;
}

.tariffs-select-type {
    color: #6B6363;
    text-align: center;
    font-family: Montserrat;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 24px;
}

.tariff-benefits {
    margin-top: 36px;
    margin-bottom: 15px;
}

.tariff-benefits h3 {
    color: #000;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 24px;
    line-height: 18.96px;
    text-align: left;
}

.tariff-benefits > div {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.tariff-benefits > div > ul {
    max-width: 50%;
    color: #000;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 156%; /* 21.84px */
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tariff-benefits > div > ul > li {
    display: flex;
    gap: 10px;
    font-family: Rubik;
    font-size: 14px;
    font-weight: 400;
    line-height: 21.84px;
    text-align: left;
}

.tariff-benefits > div > ul > li:before {
    content: '';
    border-radius: 50%;
    background: #29A4DD;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-top: 5px;
}

.my-subs-tab-wrp {
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
}

.my-subs-tab {
    color: #333;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 2px solid #EFF5F8;
}

.my-subs-tab.purchase {
    padding: 10px 24px;
    border: 1px solid #189FDA;
    border-radius: 6px;
    margin-left: 15px;
}

.my-subs-tab.purchase a {
    color: #189FDA !important;
    font-family: Rubik;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 21px !important;
    text-align: center !important;
}

.my-subs-tab.purchase img {
    width: 16px;
    height: 16px;
}

.my-subs-tab a {
    color: #333;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
    text-decoration: none;
}

.my-subs-tab.all {
    border-bottom: 2px solid #189FDA;
}

.my-subs-tab img {
    width: 24px;
    height: 24px;
}

.my-subs-item {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #189FDA;
    background: #FFFFFF;
    padding: 8px 24px 12px 24px;
    margin-bottom: 24px;
}

.my-subs-item-not {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #189FDA;
    background: #FFFFFF;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 36px;
}

.my-subs-item-not__button {
    border-radius: 12px;
    background: #189FDA;
    padding: 15px 40px;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.my-subs-item-not__content {
    display: flex;
    gap: 24px;
    align-items: center;
}

.my-subs-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #E7E7E7;
    cursor: default !important;
}

.my-subs-item-header__title {
    display: flex;
    justify-self: flex-start;
    align-self: center;
    gap: 24px;
}

.my-subs-item-header__title img {
    width: 60px;
    height: 60px;
}

.my-subs-item-header__text p:first-child {
    color: #189FDA;
    font-family: Rubik;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.status-first {
    color: #47BF67;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 4px;
    text-transform: lowercase;
}

.status-first::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: url("/images/icons/subs-circle-green.svg") no-repeat;
    position: relative;
    margin-right: 4px;
}

.status-first-disabled {
    color: #EA3D2F;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 4px;
    text-transform: lowercase;
}

.status-first-disabled::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: url("/images/icons/subs-circle-red.svg") no-repeat;
    position: relative;
    margin-right: 4px;
}

.my-subs-item-header__text {
    align-self: center;
}

.my-subs-item-header__schedule {
    color: #189FDA;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
    cursor: pointer;
}

.my-subs-item-content {
    padding: 12px 0;
    border-bottom: 1px solid #E7E7E7;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 4px;
    cursor: default !important;
}

.my-subs-item-content__element p:first-child {
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 8px;
}

.my-subs-item-content__element p:last-child {
    color: #189FDA;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 8px 0;
}

.my-subs-item-footer {
    padding: 12px 0 6px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-subs-item-footer__button {
    display: inline-flex;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 12px;
    background: #189FDA;
    padding: 10px 30px;
    cursor: pointer;
}

.my-subs-item-footer__button.disabled {
    color: #C2C2C2;
    background: #EBEBEB;
    cursor: not-allowed;
    position: relative;
}

.schedule-more-item {
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.change-tariff-item {
    display: flex;
    justify-content: start;
    margin-bottom: 15px;
}

.change-tariff-item__title {
    color: #707070;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 140px;
    flex-shrink: 0;
}

.change-tariff-item__value {
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.modal-title.change-tariff {
    color: #171F46;
    font-family: Rubik;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.change-tariff-h {
    margin-bottom: 16px;
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.change-tariff-dialog {
    width: 472px;
}

.change-tariff-footer {
    display: flex;
    gap: 8px;
    border-top: none;
    margin-top: 10px;
}

.change-tariff-outline {
    width: 50%;
    border-radius: 4px;
    border: 1px solid #189FDA;
    background: #FFF;
    color: #189FDA;
    text-align: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 10px 14px;
    cursor: pointer;
}

.change-tariff-primary {
    width: 50%;
    border-radius: 4px;
    background: #189FDA;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 10px 14px;
    cursor: pointer;
}

.change-tariff-error {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #F8C1BD;
    background: #FCE2E0;
    color: #EA3D2F;
    text-align: left;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding: 10px 14px;
    margin-top: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;
}

.change-tariff-error img {
    width: 24px;
    height: 24px;
}

.schedule-more-wrp {
    margin-top: 0;
    padding: 16px 30px 30px 30px;
}

.schedule-more-item-exclamation {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
}

.schedule-more-item-exclamation img {
    width: 16px;
    height: 16px;
    margin-right: 12px;
}

.schedule-more-item-exclamation {
    margin-top: 12px;
    margin-bottom: 8px;
}

.tariff-select-title {
    color: #333;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#payScheduleModal .close {
    opacity: 1;
}

#cancelSubModal .close {
    opacity: 1;
}

#tariffSelectModal img {
    width: 11px;
    height: 11px;
    fill: #828282;
    opacity: 1;
}

.tariff-select-content {
    padding: 0;
    width: 750px !important;
}

.tariff-select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 22px 30px;
    background: linear-gradient(0deg, #EBF8FC 0%, #FFF 100%);
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    overflow: hidden;
}

.tariff-select-dialog {
    width: 750px !important;
    margin: 30vh auto;
}

.cancel-sub-dialog {
    width: 600px;
    margin: 30px auto;
}

.schedule-more-column-wrp {
    /*display: grid;*/
    /*grid-template-columns: 1.5fr 2fr 1.5fr 2fr 2fr !important;*/
    /*grid-template-rows: 1fr;*/
    /*grid-column-gap: 12px;*/
    display: block;
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    min-height: 130px;
}
.schedule-more-table-row {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1.5fr 2fr 2fr !important;
    grid-template-rows: 1fr;
    grid-column-gap: 12px;
}

.schedule-more-column__extra p:first-child {
    color: #333;
    font-family: Rubik;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: normal;
}

.schedule-more-column p {
    margin-bottom: 8px;
}


.schedule-more-column p:first-child {
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.schedule-more-column__month p:first-child,
.schedule-more-column__dateWrittenOff p:first-child,
.schedule-more-column__total p:first-child,
.schedule-more-column__status p:first-child {
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.schedule-more-column__total {
    justify-self: center;
}

.schedule-more-column.with-icon > p {
    cursor: default;
    display: inline;
    position: relative;
}

.schedule-more-column.with-icon > p > img {
    width: 14px;
    height: 14px;
    position: absolute;
    top: calc(50% - 7px);
    right: -20px;
}

.schedule-refund-button {
    color: #189fda;
    font-size: 12px;
    font-weight: 400 !important;
    text-decoration: underline;
    cursor: pointer;
}

.schedule-refund-button.disabled {
    color: #C2C2C2 !important;
    cursor: default;
    text-decoration: none;
}

.schedule-refund-button.refunded {
    color: #F09D04 !important;
    cursor: default;
    text-decoration: none;
}

.pay-total-green {
    color: #47BF67 !important;
}

.pay-total-red {
    color: red !important;
}

#my-subs-tab-img__bonus {
    width: 18px;
    height: 18px;
    position: relative;
    top: -1px;
}

.subscription-management-item {
    border: 1px solid #189FDA;
    border-radius: 12px;
    margin-bottom: 24px;
}

.subscription-management-item__title {
    padding: 20px 30px 20px 30px;
    color: #333;
    font-family: Rubik;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    background-color: #E8F5FB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.subscription-management-item__title.disabled {
    background-color: #EBEBEB;
}

.subscription-management-item.disabled {
    border: none;
}

.subscription-management-item.disabled .subscription-management-item__title {
    background-color: #EBEBEB;
}

.subscription-management-item__title div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.subscription-management-item__title p:last-child {
    color: #189FDA;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    cursor: pointer;
}

#changeNumberLessons {
    color: #189FDA;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    cursor: pointer;
    margin-right: 70px;
}

#on-freeze {
    color: #189FDA;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}

.subscription-management-item__title img {
    width: 24px;
    height: 24px;
    margin-left: 10px;
}

.subscription-management-content__wrp {
    align-items: center;
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr;
    grid-row-gap: 20px;
    background-color: #FFFFFF;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.subscription-management-content__wrp.auto {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
    "a b b b b"
    "c c c c c";
    align-items: center;
}

.subscription-management-element__title.auto {
    grid-area: a;
}

.subscription-management-element__button.auto {
    grid-area: b;
}

.subscription-management-element__note {
    grid-area: c;
}

.subscription-management-content__wrp.payment-data {
    grid-template-rows: 1fr;
}

.partner-freeze {
    padding: 10px 0;
    gap: 10px;
}

.subscription-management-element__title {
    color: #707070;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.subscription-management-element__value {
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.subscription-management-element__note {
    color: #999999;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-top: 10px;
    grid-template-columns: 5fr;
}

.subscription-management-element__note a {
    color: #189FDA;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.subscription-management-element__card-icon {
    height: 20px;
    width: auto;
    margin-right: 8px;
}

#statusWrpBlock.active {
    color: #47BF67;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#statusWrpBlock.active img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    position: relative;
    top: -1px;
}

#statusWrpBlock.frost {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

#statusWrpBlock.frost div:last-child {
    color: #189FDA;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}

#daysFrost {
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-right: 16px;
}

.subscription-management-element__button .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.subscription-management-element__button .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.subscription-management-element__button .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.subscription-management-element__button .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.subscription-management-element__button input:checked + .slider {
    background-color: #189FDA;
}

.subscription-management-element__button input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.subs-manage-transaction__wrapper {
    padding: 30px;
    background: #FFFFFF;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.subs-manage-transaction__title {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}

.subscription-management-transaction__title {
    color: #333;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    padding: 18px 16px;
}

.subscription-management-transaction__value {
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding: 18px 16px;
}

.subscription-management-button__cancel {
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 12px;
    background: #EA3D2F;
    padding: 12px 24px;
    cursor: pointer;
}

.subscription-management-button__resume {
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 12px;
    background: #299446;
    padding: 12px 24px;
    cursor: pointer;
}

.subscription-management-content__wrp.cancel {
    display: flex;
    justify-content: center;
    align-items: center;
}

.subscription-management-content__wrp.canceled {
    justify-content: flex-start;
}

.pay-total-additional-tooltip-text {
    width: 434px;
    border-radius: 4px;
    border: 1px solid #CFD4D9;
    background: #FFF;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    padding: 8px;
    position: absolute;
    bottom: 25px;
    /*right: -220px;*/
    z-index: 9999;
    left: calc(100% - 300px);
}

.auto-sub-renewal-tooltip-text {
    width: 450px;
    border-radius: 4px;
    border: 1px solid #CFD4D9;
    background: #FFF;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    padding: 8px;
    position: absolute;
    bottom: 35px;
    /*right: -220px;*/
    z-index: 9999;
    left: calc(100% - 250px);
}

.auto-sub-renewal-tooltip-text a {
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    color: #189FDA;
}

.pay-total-additional-tooltip-title {
    border-radius: 2px;
    background: #E7E7E7;
    padding: 0px 2px;
}

.pay-total-additional-tooltip-wrp {
    position: relative;
}

.option-comingsoon-tooltip {
    position: absolute;
    z-index: 1;
    height: 46px;
    width: 300px;
    padding-left: 4px;
    padding-right: 4px;
    display: none;
    justify-content: center;
    align-items: center;
    top: -30px;
    left: 0;
    background: white;
    font-size: 16px;
    font-weight: normal;
    border-radius: 8px;
    color: black;
    box-shadow: 0 0 26px rgba(0, 0, 0, 0.28);
}

.my-subs-item-footer__button.disabled:hover > .option-comingsoon-tooltip {
    display: flex;
}

.pay-subscription-return {
    color: #A2A2A2;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.25px;
    cursor: pointer;
    margin-bottom: 8px;
}

.pay-subscription-return:before {
    content: url("/images/icons/tariffs-return.svg");
    margin-right: 8px;
    vertical-align: center;
}

.subscription-management-wrapper {
    margin-top: 36px;
}

.menu-item-subs::before {
    background: url('/images/icons/subs-icon.svg') no-repeat;
}

.tariffs-course-filters {
    display: flex;
    gap: 25px;
}

.tariffs-course-block {
    width: 442px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #189FDA;
    border-radius: 12px;
    border: 1px solid #189FDA;
    background: #FFFFFF;
    padding: 12px;
    cursor: pointer;
}

.tariffs-course-block__content {
    display: flex;
    align-items: center;
    gap: 18px;
}

.tariffs-course-block__tick {
    align-self: flex-start;
    justify-self: flex-end;
}

.tariffs-course-block__tick img {
    width: 24px;
    height: 24px;
}

.tariffs-course-block__img img {
    width: 90px;
    height: 90px;
}

.tariffs-course-block__txt div {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tariffs-course-block__txt div p:first-child {
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.tariffs-course-block__txt div p:last-child {
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.available-block-active {
    background: #189FDA;
    color: #FFFFFF !important;
}

.tariffs-course-no-courses {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #189FDA;
    background: #FFF;
    padding: 32px 150px 36px 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 38px;
}

.tariffs-course-no-courses__header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.tariffs-course-no-courses__header img {
    width: 62px;
    height: 68px;
}

.tariffs-course-no-courses__header p {
    color: #333;
    font-family: Rubik;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.tariffs-course-no-courses__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.tariffs-course-no-courses__footer a {
    color: #189FDA;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
}

.available-disciplines-item {
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.my-schedule-title {
    display: flex;
    gap: 10px;
    color: #999;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    opacity: 0.8;
    padding-top: 16px;
    margin-top: 20px;
    border-top: 1px solid #dedede;
}
.my-schedule-title.no-border {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.my-schedule-date {
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    padding: 12px 6px;
    width: 15%;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.my-schedule-date p:first-child {
    opacity: 0.8;
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.my-schedule-date p:last-child {
    opacity: 0.8;
    color: #333;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.my-schedule-item {
    width: 49%;
    padding: 12px 16px 16px 16px;
    border-radius: 8px;
    border-top: 5px solid #189FDA;
    background: #E8F5FB;
    flex-shrink: 1;
}

.my-schedule-item.disabled {
    display: none;
}

.my-schedule-item.green {
    border-top: 5px solid #47BF67;
    background: #EDF9F0;
}

.my-schedule-item.gray {
    border-top: 5px solid #999999;
    background: #EBEBEB;
}

.my-schedule-item.red {
    border-top: 5px solid #EA3D2F;
    background: #FDECEA;
}

.my-schedule-item.second {
    border-top: 5px solid #FFB800;
    background: #FFF8E5;
}

.my-schedule-item.third {
    border-top: 5px solid #9E00FF;
    background: #F5E5FF;
}

.my-schedule-item__time {
    color: #C2C2C2;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    display: flex;
    justify-content: space-between;
}

.my-schedule-item__time.student {
    display: flex;
    justify-content: space-between;
}

.my-schedule-item__time.student span {
    color: #C2C2C2;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.my-schedule-item__subject {
    color: #333;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.my-schedule-item__teacher {
    color: #333;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.my-schedule-item__button {
    color: #FFF;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    padding: 4px 8px 4px 8px;
    border-radius: 4px;
    background: #189FDA;
    position: relative;
    margin-top: 4px;
}

.my-schedule-item__button.disabled {
    background: #ccc;
}

.my-schedule-lesson {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

#my-schedule {
    background: #FFFFFF;
    padding: 12px 24px 24px 30px;
    border-radius: 12px;
    border: 3px solid #FFF;
}

.my-schedule-title {
    margin-bottom: 2px;
}

.my-schedule-items {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
}

.my-schedule-item__time,
.my-schedule-item__subject,
.my-schedule-item__teacher,
.my-schedule-item__button {
    margin-bottom: 0;
}

.my-schedule-item.orange {
    border-top: 5px solid #FFB800;
    background: #FFF8E5;
}

.my-schedule-item.purple {
    border-top: 5px solid #9E00FF;
    background: #F5E5FF;
}

.my-schedule-item__change {
    color: #189FDA;
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    text-decoration-line: underline;
}

#my-schedule-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.my-schedule-next-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 24px;
    cursor: pointer;
}

.my-schedule-next-button__text {
    display: inline-block;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 12px;
    background: #189FDA;
    padding: 20px 80px;
}

.select-schedule {
    padding: 16px 16px;
    margin-bottom: 25px;
    border-radius: 8px;
    border-top: 5px solid #EA3D2F;
    background: #FFF;
}

.select-schedule__title {
    color: #333;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.select-schedule__button {
    display: inline-block;
    color: #FFF;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    border-radius: 4px;
    background: #F37368;
    padding: 6px 8px;
    margin-top: 12px;
    cursor: pointer;
}

div input.input-success {
    border: 1px solid green;
}

.input-error {
    border: 1px solid red;
}


.discipline-loader {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal-back-icon {
    font-style: normal;
    font-size: 24px;
    cursor: pointer;
    margin-right: 8px;
    padding-left: 6px;
    padding-right: 6px;
}

.form-control.danger {
    border: 2px solid #d9534f !important;
}

.document-preview {
    position: relative;
    display: none;
}


.cert-fields-preview {
    position: absolute;
    user-select: none;
    cursor: move;
    display: flex;
    align-items: center;
}

.cert-fields-preview > select {
    font-size: 16px;
    position: absolute;
    left: -65px;
    width: 60px;
}


.discipline-level-row {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.get-preview-cert {
    position: relative;
}

.get-preview-cert > p {
    text-align: center;
    width: 20px;
    font-size: 10px;
    font-weight: bold;
    color: #447ee1;
    position: absolute;
    top: -6px;
    left: calc(50% - 10px);
}

.cancel-sub-content {
    padding: 0;
    width: 600px;
}

.cancel-sub__body {
    margin-top: 0;
    padding: 24px 30px 30px 30px;
}

.cancel-sub__row {
    margin-bottom: 20px;
}

.cancel-sub__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: #EA3D2F;
    padding: 12px 24px;
    color: #FFF;
    text-align: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 20px;
    cursor: pointer;
}

.cancel-sub__title {
    color: #333;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    display: flex;
    align-items: center;
}

.cancel-sub__title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("/images/icons/cancel-sub-icon.svg") 50%/cover no-repeat;
    position: relative;
    top: -2px;
    margin-right: 8px;
}

.cancel-sub__cat {
    margin-right: 4px;
}

.cancel-sub__cat-text {
    color: #EA3D2F;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

#on-freeze {
    cursor: pointer;
}

.dateFreezeWrapper {
    display: flex;
    gap: 24px;
}

.dateFreezeWrapper p {
    margin-bottom: 8px;
}

.freezeCountWrp {
    display: flex;
    align-items: center;
    text-transform: lowercase;
}

.on-freeze-buttons {
    display: flex;
    gap: 10px;
}

.on-freeze-buttons div {
    border-radius: 12px;
    padding: 12px 24px;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

.on-freeze-buttons div:first-child {
    background: #189FDA;
    color: #FFF;
}

.on-freeze-buttons div:last-child {
    background: #FFF;
    color: #189FDA;
}

#statusWrpBlock {
    display: flex;
}

.black-friday .tariffs-select-header {
    background: #333;
    justify-content: flex-start;
}

.black-friday .tariffs-select-header {
    background: #333;
    justify-content: flex-start;
}

.black-friday .tariffs-select-btn {
    border: 2px solid #333;
    background: #333;
}

.black-friday:before {
    content: '';
    position: absolute;
    width: 126px;
    height: 126px;
    background: url("/images/booking/black-friday-en.svg") no-repeat center;
    background-size: contain;
    top: -30px;
    right: -40px;
    z-index: 1;
}

.black-friday:after {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: url("/images/booking/special-tariff.svg") no-repeat center;
    background-size: contain;
    top: -65px;
    left: 30px;
    z-index: 1;
}

.black-friday-ru:before {
    background: url("/images/booking/black-friday-ru.svg") no-repeat center;
    background-size: contain;
}

.birthday .tariffs-select-header {
    background: #A258DC;
    justify-content: flex-start;
}

.birthday .tariffs-select-header {
    background: #A258DC;
    justify-content: flex-start;
}

.birthday .tariffs-select-header span {
    display: none;
}

.birthday .tariffs-select-btn {
    border: 2px solid #A258DC;
    background: #A258DC;
}

.birthday:before {
    content: '';
    position: absolute;
    width: 126px;
    height: 126px;
    background: url("/images/booking/birthday-en.svg") no-repeat center;
    background-size: contain;
    top: -30px;
    right: -40px;
    z-index: 1;
}

.birthday:after {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: url("/images/booking/special-tariff.svg") no-repeat center;
    background-size: contain;
    top: -65px;
    left: 30px;
    z-index: 1;
}

.birthday-ru:before {
    background: url("/images/booking/birthday-ru.svg") no-repeat center;
    background-size: contain;
}

.summer-intensive .tariffs-select-header {
    background: #FF8A22;
    justify-content: flex-start;
}

.summer-intensive .tariffs-select-header {
    background: #FF8A22;
    justify-content: flex-start;
}

.summer-intensive .tariffs-select-header span {
    display: none;
}

.summer-intensive .tariffs-select-btn {
    border: 2px solid #FF8A22;
    background: #FF8A22;
}

.summer-intensive:before {
    content: '';
    position: absolute;
    width: 126px;
    height: 126px;
    background: url("/images/booking/summer-intensive.svg") no-repeat center;
    background-size: contain;
    top: -30px;
    right: -40px;
    z-index: 1;
}

.summer-intensive-ru:before {
    background: url("/images/booking/summer-intensive-ru.svg") no-repeat center;
    background-size: contain;
}

.summer-lite .tariffs-select-header {
    background: #1DC50E;
    justify-content: flex-start;
}

.summer-lite .tariffs-select-header {
    background: #1DC50E;
    justify-content: flex-start;
}

.summer-lite .tariffs-select-header span {
    display: none;
}

.summer-lite .tariffs-select-btn {
    border: 2px solid #1DC50E;
    background: #1DC50E;
}

.summer-lite:before {
    content: '';
    position: absolute;
    width: 126px;
    height: 126px;
    background: url("/images/booking/summer-lite.svg") no-repeat center;
    background-size: contain;
    top: -30px;
    right: -40px;
    z-index: 1;
}

.summer-lite-ru:before {
    background: url("/images/booking/summer-lite-ru.svg") no-repeat center;
    background-size: contain;
}

.ui-hr {
    height: 1px;
    align-self: stretch;
    background: var(--grey-grey-110, #EBEBEB);
    width: 100%;
}

.ui-btn {
    border: none;
    border-radius: 4px;
    background: var(--blue-accent-110, #E8F5FB);
    padding: 6px 14px;
    color: var(--blue-accent-1100, #189FDA);
    text-align: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.ui-btn-secondary {
    border: 1px solid var(--blue-accent-1100, #189FDA);
    background: var(--White, #FFF);
    color: var(--blue-accent-1100, #189FDA);
    text-align: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.ui-btn-primary {
    background: var(--blue-accent-1100, #189FDA);
    color: var(--white, var(--White, #FFF));
    text-align: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.ui-btn:hover {
    cursor: pointer;
}

.ui-number-input {
    width: 90px;
    height: 40px;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--grey-grey-130, #C2C2C2);
}

.add-days-wrp {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.add-days-wrp h4 {
    color: var(--grey-grey-170, #707070);
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.add-days-btns {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.add-days-btns .ui-btn {
    width: 50%;
}

#createTeacherDiscipline {
    margin-top: 10px;
}

.choose-teacher-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.choose-teacher-buttons div {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #FFF;
    padding: 12px 15px;
}

.choose-teacher-buttons__return {
    width: 120px;
    cursor: pointer;
}

.choose-teacher-buttons__filters {
    width: 260px;
    position: relative;
    gap: 0;
    cursor: pointer;
}

.choose-teacher-buttons__filter {
    padding-left: 0 !important;
}

.choose-teacher-buttons__filters div {
    gap: 0 !important;
}

.choose-teacher-buttons__search {
    width: 80%;
}

.choose-teacher-buttons__search input {
    width: 100%;
}

.choose-teacher-buttons__hidden {
    display: none;
}

#filterList {
    border-radius: 8px 8px 8px 8px;
    background: #FFFFFF;
    color: #333333;
    position: absolute;
    top: 108%;
    left: 0;
    display: none;
    z-index: 9999;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12);
}

#filterList li {
    display: flex;
    width: 250px;
    height: 40px;
    padding: 13px 12px;
    justify-content: space-between;
    align-items: center;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    position: relative;
}

.subFilterList {
    border-radius: 8px 8px 8px 8px;
    background: #FFFFFF;
    color: #333333;
    position: absolute;
    top: 0;
    right: -102%;
    display: none;
    z-index: 9999;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.12);
}

.subFilterList li {
    display: flex;
    width: 225px;
    height: 40px;
    padding: 10px 12px;
    justify-content: flex-start !important;
    align-items: center;
    gap: 8px;
}

.subMenuItem label {
    font-weight: 400;
}

.subMenuItem .custom-checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.subMenuItem .custom-checkbox + label {
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.subMenuItem .custom-checkbox + label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #189FDA;
    border-radius: 0.25em;
    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%;
}

.subMenuItem .custom-checkbox:checked + label::before {
    border-color: #189FDA;
    background-color: #189FDA;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.subMenuItem .custom-checkbox:not(:disabled):active + label::before {
    background-color: #189FDA;
    border-color: #189FDA;
}

.choose-clean-filter {
    color: #189FDA;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    cursor: pointer;
    border-bottom: 1px solid #E7E7E7;
    padding-left: 38px !important;
}


.new-year .tariffs-select-header {
    background: #EA3D2F;
    justify-content: flex-start;
}

.new-year .tariffs-select-header {
    background: #EA3D2F;
    justify-content: flex-start;
}

.new-year .tariffs-select-btn {
    border: 2px solid #EA3D2F;
    background: #EA3D2F;
}

.new-year:before {
    content: '';
    position: absolute;
    width: 126px;
    height: 126px;
    background: url("/images/booking/new-year-en.svg") no-repeat center;
    background-size: contain;
    top: -30px;
    right: -40px;
    z-index: 1;
}

.new-year:after {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: url("/images/booking/new-year-image.svg") no-repeat center;
    background-size: contain;
    top: -65px;
    left: 30px;
    z-index: 1;
}

.new-year-ru:before {
    background: url("/images/booking/new-year-ru.svg") no-repeat center;
    background-size: contain;
}

#filterCounter {
    border-radius: 11px;
    background: #189FDA;
    padding: 4px 4px;
    color: #FFF;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    visibility: hidden;
    margin-left: 4px;
    min-width: 22px;
    flex-shrink: 0;
    text-align: center;
}

#filterCross {
    margin-left: 15px;
}

.page-title-align {
    display: flex;
    align-items: center;
}

.course-sub-container {
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    margin-left: 16px;
    display: none;
    padding: 5px 16px 5px 10px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
}

.course-sub-container.active {
    border: 1px solid #2FA84F;
    background: #DCF7E3;
    color: #2FA84F;
}

.course-sub-container.inactive {
    border: 1px solid #999;
    background: #EBEBEB;
    color: #999999;
}

.course-sub-container.frozen {
    border: 1px solid #189FDA;
    background: #C2EEFF;
    color: #189FDA;
}

.courseSubStatusDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #999;
}

.courseSubStatusDot.grey {
    background-color: #999999;
}

.courseSubStatusDot.green {
    background-color: #2FA84F;
}

.courseSubStatusDot.blue {
    background-color: #189FDA;
}

.mobile-header {
    display: none;
    position: fixed;
    z-index: 3;
    background: #FFF;
    justify-content: space-between;
    top: 0;
    left: 0;
    transition: all 100ms linear;
    align-items: center;
    margin-top: 0;
    margin-bottom: -5px;
}

.mobile-header img.white-logo {
    display: none;
}

.mobile-header.menu-open img.white-logo {
    display: block;
}

.mobile-header.menu-open img.black-logo {
    display: none;
}

.mobile-header.menu-open {
    background: #189FDA;
}

.mobile-header.menu-open .burger span {
    background: #FFF;
}

.mobile-header .main-menu-logo {
    margin: 0;
}

.mobile-header .main-menu-logo img {
    width: 80px;
    margin: 0;
}

.burger {
    position: relative;
    width: 23px;
    height: 17px;
    background: transparent;
    cursor: pointer;
    display: block;
    margin-bottom: 0;
}

.burger input {
    display: none;
}

.burger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #333333;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.burger span:nth-of-type(1) {
    top: 0px;
    transform-origin: left center;
}

.burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
    transform-origin: left center;
}

.burger span:nth-of-type(3) {
    top: 100%;
    transform-origin: left center;
    transform: translateY(-100%);
}

.burger input:checked ~ span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 0px;
    left: 5px;
}

.burger input:checked ~ span:nth-of-type(2) {
    width: 0%;
    opacity: 0;
}

.burger input:checked ~ span:nth-of-type(3) {
    transform: rotate(-45deg);
    top: 16px;
    left: 5px;
}

.tariffs-discipline-filters label.available-disciplines-item-hide {
    display: none;
}

.available-disciplines-item-showmore {
    color: var(--blue-accent-1100, #189FDA);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    text-decoration-line: underline;
    cursor: pointer;
}

#pay-calendar-header {
    margin-bottom: 25px;
}

#pay-calendar-header h2 {
    color: var(--grey-grey-1100, #333);
    font-family: Rubik;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 24px */
}

#pay-calendar-header h5 {
    margin-top: 25px;
    color: var(--grey-grey-1100, #333);
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
    letter-spacing: 0.12px;
    text-transform: uppercase;
}

#pay-calendar-header li,
#pay-calendar-header p {
    color: var(--grey-grey-150, #999);
    font-family: Rubik;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

#pay-calendar-header li.selected-event p {
    color: var(--grey-grey-1100, #333);

    /* Rubik/Mobile/Body 2_R_12|140 */
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 16.8px */
}

#pay-calendar-header li.selected-event {
    margin-top: 10px;
    border-radius: 3px;
    border: 1px solid var(--blue-accent-1100, #189FDA);
    background: #FFF;
    padding: 8px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.is-cancelled-class {
    border: 1px solid #EA3D2F;
}

.schedule-write-off__wrp {
    display: flex;
    align-items: center;
}

.schedule-write-off__wrp label {
    margin-top: 5px;
}

.schedule-write-off__wrp input {
    width: 80%;
}

.chosen-tariff {
    background-color: #189FDA;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 21px 38px;
}

.chosen-tariff-disabled {
    background-color: #C2C2C2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 21px 38px;
    pointer-events: none;
}

.game-setting-control-value-button {
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.2s;
    background: rgba(255, 255, 255, 1);
}

.game-setting-control-value-button:hover {
    background: rgba(46, 190, 255, 0.1);
}

.game-setting-control-value-button.minus {
    border-radius: 6px 0 0 6px;
}

.game-setting-control-value-button.plus {
    border-radius: 0 6px 6px 0;
}

.game-setting-row {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.game-setting-row.show-at-setting {
    display: none;
}

.game-setting-col-3.header {
    display: flex;
    align-items: center;
}


#flash-cards-complication {
    font-size: 15px;
}

.game-col {
    display: flex;
    padding: 0;
}

.flex-start {
    justify-content: flex-start;
}

.game-setting-col-2 {
    width: calc((100% / 12) * 2);
}

.game-setting-col-1 {
    width: calc((100% / 12) * 1);
}

.game-setting-col-1-from-13 {
    width: calc((100% / 13) * 1);
}

.game-setting-col-3 {
    width: calc((100% / 12) * 3);
}

.game-setting-col-4 {
    width: calc((100% / 12) * 4);
}

.game-setting-col-5 {
    width: calc((100% / 12) * 5);
}

.game-setting-col-6 {
    width: calc((100% / 12) * 6);
}

.game-setting-col-7 {
    width: calc((100% / 12) * 7);
}

.game-setting-col-8 {
    width: calc((100% / 12) * 8);
}

.game-setting-col-9 {
    width: calc((100% / 12) * 9);
}

.game-setting-col-1-from-5 {
    width: calc((100% / 5) * 1);
}

.game-setting-col-1-from-7 {
    width: calc((100% / 7) * 1);
}

.game-setting-col-1-from-9 {
    width: calc((100% / 9) * 1);
}

#game-lvl, #game-halfer, #game-progress {
    display: flex;
}

.game-setting-row.between {
    display: flex;
    justify-content: space-between;
}

.game-setting-row.auto {
    display: flex;
    justify-content: space-between;
}

.game-setting-row.auto .game-setting-col-auto {
    flex: 1;
    align-items: center;
}

.game-setting-row.auto .game-setting-col-auto:nth-child(1):only-child {
    width: 100%;
}

.game-setting-row.auto .game-setting-col-auto:nth-child(2),
.game-setting-row.auto .game-setting-col-auto:nth-child(3) {
    width: 50%;
}

.game-setting-row.auto .game-setting-col-auto:nth-child(3) {
    width: 33.3%;
}

.game-setting-col-auto > .game-setting-row {
    justify-content: flex-start;
}


.game-setting-value {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    transition: 0.2s;
}

.game-setting-value:hover {
    background: rgba(46, 190, 255, 0.1);
}

.game-setting-row-btn {
    height: auto;
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    background: white;
    transition: 0.2s;
    width: 100%;
}

.game-setting-row-btn.first, .game-setting-row-btn:first-child {
    border-radius: 5px 0 0 5px;
}

.game-setting-row-btn.last, .game-setting-row-btn:last-child {
    border-radius: 0 5px 5px 0;
}

.game-setting-row-btn.last.first {
    border-radius: 5px;
}

.game-setting-row-btn:hover {
    background: rgba(46, 190, 255, 0.15);
}

.game-setting-row-btn.active {
    background: #189fda;
    color: white;
}

.on-number-lessons-buttons {
    display: flex;
    gap: 10px;
}
.move-modal-lessons-row {
    display: flex;
    flex-shrink: 0;
    gap: 48px;
}
.lessons-move-modal-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-bottom: 0;
    margin-left: 5px;
    margin-right: 5px;
}

.lessons-move-modal-switch {
    position: relative;
    display: inline-block;
    width: 53px;
    height: 27px;
}

.lessons-move-modal-switch .lessons-move-modal-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.lessons-move-modal-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #189fda;
    -webkit-transition: .4s;
    transition: .4s;
}

.lessons-move-modal-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
.move-lessons-modal-tumbler {
    transition: 0.2s;
}
.move-lessons-modal-tumbler.active {
    color: #189fda;
}

.lessons-move-modal-checkbox:checked + .lessons-move-modal-slider {
    background-color: #2196F3;
}

.lessons-move-modal-checkbox:focus + .lessons-move-modal-slider {
    box-shadow: 0 0 1px #2196F3;
}

.lessons-move-modal-checkbox:checked + .lessons-move-modal-slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Закругленные ползунки */
.lessons-move-modal-slider.lessons-move-modal-round {
    border-radius: 34px;
}

.lessons-move-modal-slider.lessons-move-modal-round:before {
    border-radius: 50%;
}








.on-number-lessons-buttons div {
    border-radius: 12px;
    padding: 12px 24px;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

.on-number-lessons-buttons div:first-child {
    background: #189FDA;
    color: #FFF;
}

.on-number-lessons-buttons div:last-child {
    background: #FFF;
    color: #189FDA;
}

.new-btn {
    border-radius: 12px;
    padding: 12px 24px;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    cursor: pointer;
}

.new-btn__primary {
    background: #189FDA;
    color: #FFF;
}

.new-btn__secondary {
    background: #FFF;
    color: #189FDA;
}

button.new-btn[disabled] {
    color: #C2C2C2;
    border: 1px solid #C2C2C2;
    background: #EBEBEB;
}


.number-lessons-select {
    position: relative;
    display: inline-block;
    width: 215px;
    height: 40px;
}

.number-lessons-select select {
    width: 215px;
    height: 40px;
    display: inline-block;
    padding: 10px;
    font-size: 16px;
    appearance: none;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 8px 16px;
    color: #333;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.number-lessons-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url('/images/icons/chevron-down-number-lessons.svg') no-repeat center center;
    background-size: contain;
    pointer-events: none;
}

.number-lessons-select:hover select {
    border-color: #888;
}

.number-lessons-select:focus {
    outline: none;
    border-color: #555;
}

.hw-modal-header {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.hw-modal-table {
    margin-bottom: 12px;
    width: 100%;
    height: auto;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 12px;
    border: 1px solid #EBEBEB;
}

.hw-modal-table > thead {
    height: 60px;
}

.hw-modal-table > thead > tr > th {
    font-size: 16px;
    line-height: 20px;
    width: 25%;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    padding: 18px 16px;
    border-bottom: 1px solid #ebebeb;
}

.hw-modal-table > tbody > tr > td {
    font-size: 16px;
    line-height: 20px;
    width: 25%;
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
    padding: 16px;
    border-bottom: 1px solid #ebebeb;
}

.hw-modal-table > thead > tr {
    border-bottom: 1px solid #EBEBEB;
}

.hw-modal-table > tbody > tr:last-child > td {
    border-bottom: none;
}

#responseModal > .modal-dialog {
    width: 660px;
}

.hw-modal-result-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pyramid-answer-hw-modal {
    width: auto;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column-reverse;
}

.pyramid-row-hw-modal {
    display: flex;
    justify-content: center;
}

.pyramid-row-hw-modal > span {
    width: auto;
    min-width: 60px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border: 1px solid #C2C2C2;
    background: #F5F5F5;
    margin: 2px;
    border-radius: 8px;
}

.pyramid-container-hw-modal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px;
}

.pyramid-row-hw-modal > span.correct {
    background: #daf2e1;
    border: 1px solid #47BF67;
}

.pyramid-row-hw-modal > span.incorrect {
    background: #fbd8d5;
    border: 1px solid #ea3d2f;
}

#autoRenewalFirst {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #189FDA;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 8px 0;
}

.tariff-promo-title {
    margin-top: 15px;
    font-family: Rubik;
    font-size: 16px;
    font-weight: 600;
    line-height: 13.54px;
    text-align: left;
}

.tariff-promo-wrp {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.tariff-promo_course {
    display: block;
}

.tariff-promo_course img {
    min-width: 510px;
    max-width: 510px;
}

.hw-list-pages {
    border-bottom: 4px solid #189fda;
    display: flex;
    margin-top: 22px;
}

.hw-page-button {
    padding: 10px 24px;
    font-size: 18px;
    border: 1px solid #b6b6b6;
    background: inherit;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
}

.hw-page-button > img {
    width: 36px;
    height: 36px;
    margin-right: 8px;
}

.hw-page-button.given:hover, .hw-page-button.given.active {
    background: #BAE2F4;
    border: 1px solid #189fda;
}

.hw-page-button.overdue:hover, .hw-page-button.overdue.active {
    background: #FDECEA;
    border: 1px solid #ea3d2f;
}

.hw-page-button.done:hover, .hw-page-button.done.active {
    background: #E6FAEB;
    border: 1px solid #47BF67;
}

.student-hw-decorative-bg {
    position: absolute;
    z-index: 0;
    width: 100vw;
    max-width: unset;
    height: auto;
}

.student-hw-decorative-bg.top {
    top: 0;
    left: 0;
}

.student-hw-decorative-bg.bottom {
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
}

.student-hw-stats {
    z-index: 2;
    position: absolute;
    top: 50px;
    right: 50px;
    background: white;
    box-shadow: 0 4px 8px 0 #0000000A;
    border-radius: 10px;
    width: 250px;
    padding: 10px 20px;
}

.student-hw-stats-field {
    width: 180px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.student-hw-stats-field > p, .student-hw-stats-field > b {
    font-size: 16px;
    color: #333333;
    line-height: 16px;
    font-weight: 600;
}

.student-hw-stats-field.completed > b {
    color: #189fda;
}

.student-hw-stats-field.correct > b {
    color: #47BF67;
}

.student-hw-stats-field > .tooltip-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    right: -36px;
}

#student-hws {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    gap: 12px;
    margin-right: -12px;
}

.student-hw {
    background: white;
    border-radius: 12px;
    width: calc((100% / 3) - 12px);
    height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none !important;
}

.student-hw.given {
    border: 1px solid #189FDA;
}

.student-hw.given:hover {
    background: #BAE2F4;
}

.student-hw.overdue {
    border: 1px solid #EA3D2F;
}

.student-hw.overdue:hover {
    background: #FDECEA;
}

.student-hw.done {
    border: 1px solid #47BF67;
}

.student-hw.done:hover {
    background: #E6FAEB;
}


.hw-tooltip-icon {
    width: 15px;
    height: 15px;
    margin-left: 15px;
    cursor: pointer;
    position: relative;
}

.hw-tooltip-icon img {
    width: 100%;
    height: 100%;
}

.hw-tooltip-icon::after {
    content: attr(mytitle);
    position: absolute;
    max-width: 180px;
    top: -40%;
    right: 160%;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.2);
    font-family: Rubik;
    font-style: normal;
    color: #4F4F4F;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    z-index: 999999;
    /*overflow-y: visible;*/
    /*overflow-x: visible;*/
    opacity: 0;
    visibility: hidden;
    overflow-wrap: break-word;
}

.hw-tooltip-icon::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: -100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent white;
    transform: rotate(-45deg);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
}

.hw-tooltip-icon:hover::after,
.hw-tooltip-icon:hover::before {
    opacity: 1;
    visibility: visible;
    z-index: 999999;
}


.modal-field {
    padding: 25px;
}
.pos-relative {
    position: relative;
}
#success-added-img {
    width: 10rem;
    height: 10rem;
    animation: 1.5s spin linear infinite;
}
.mt-3 {
    margin-top: 20px;
}
.mt-4 {
    margin-top: 30px;
}
.row {
    display: flex;
}
.w-40 {
    width: 40%;
}
.p-3 {
    padding: 15px;
}
.pl-0 {
    padding-left: 0;
}
.new-status-select {
    width: 100%;
    font-size: 18px;
    margin-top: 4px;
    border: 1px solid #c7c7c7;
    padding: 4px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}
.new-status-select.error {
    border: 1px solid red;
}
.w-60 {
    width: 60%;
}
.pr-0 {
    padding-right: 0;
}
.new-status-textarea {
    width: 100%;
    font-size: 14px;
    margin-top: 4px;
    resize: none;
    border: 1px solid #c7c7c7;
    outline: none;
    border-radius: 5px;
    padding: 6px;
}
.modal-status {
    border-radius: 15px;
    margin-top: 15px;
    padding: 15px;
    border: 1px dashed #cccccc;
    margin-right: 15px;
}
.d-flex {
    display: flex;
}
.flex-wrap {
    flex-wrap: wrap;
}
.justify-center {
    justify-content: center;
}
.mt-2 {
    margin-top: 10px;
}
.booking-page-button {
    padding: 0.5rem 2rem;
    background-color: #189FDA;
    border: 1px solid #189FDA;
    border-radius: 0.5rem;
    color: white;
    font-size: 1.2rem;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
    transition: 0.3s;
}
.booking-page-button.red {
    background-color: #EA3D2F;
    border: 1px solid #EA3D2F;
}
.booking-page-button:hover {
    background-color: #0e719c;
}
.booking-page-button.red:hover {
    background-color: #a42c22;
    border: 1px solid #a42c22;
}

.booking-page-button:disabled, .booking-page-button[disabled] {
    background-color: #64c9f5;
    cursor: not-allowed;
}
.booking-page-button:disabled:hover {
    background-color: #64c9f5;
}
.mt-2 {
    margin-top: 10px;
}
.modal-container {
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background: rgba(0,0,0,0.5);
}
.modal-box {
    width: 650px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}
.top-bar {
    background: linear-gradient(0deg, #EBF8FC 0%, #FFFFFF 100%);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.top-bar > .left-icon {
    height: 50px;
    position: absolute;
    left: 25px;
}
.top-bar > .close-icon {
    position: absolute;
    right: 25px;
    cursor: pointer;
}
.top-bar > .close-icon > img {
    height: 20px;
}


.notifications-settings-table {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    align-items: center;
}

.notifications-settings-option-col-bold {
    font-weight: bold;
}

.notifications-settings-option-col {
    margin-top: 10px;
}

.notifications-settings-name {
    font-weight: bold;
    padding-left: 12px;
}

.notifications-settings-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    margin-bottom: 0;
    margin-top: 7px;
}

.notifications-settings-switch input {
    display: none;
}

.notifications-settings-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.notifications-settings-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .notifications-settings-slider {
    background-color: #2196F3;
}

input:focus + .notifications-settings-slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .notifications-settings-slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.notifications-settings-slider.round {
    border-radius: 20px;
}

.notifications-settings-slider.round:before {
    border-radius: 50%;
}


.student-hw > .game-icon {
    width: 100px;
    height: 50%;
    object-fit: contain;
    display: flex;
    justify-content: center;
    align-items: center;
}

.student-hw-deadlines {
    display: flex;
    align-items: center;
}

.student-hw-deadline-span-from {
    color: #189fda;
    font-size: 14px;
    line-height: 14px;
    margin-top: 2px;
}

.student-hw-deadline-span-to {
    color: #EA3D2F;
    font-size: 14px;
    line-height: 14px;
    margin-top: 2px;
}

.student-hw-plate-comment {
    font-size: 14px;
    color: #999999;
    line-height: 14px;
    margin-top: 6px;
}

.student-hw-done-date {
    color: #999999;
    font-size: 14px !important;
    margin: 0;
}

.student-hw-game-name {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
}

.student-hw-no-hws {
    width: 100%;
    height: 100%;
    min-height: 370px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.student-hw-no-hws > img {
    width: 130px;
    height: auto;
    object-fit: contain;
}

.student-hw-no-hws > p {
    color: #333333;
    font-size: 18px;
    margin-top: 18px;
}

.hw-tooltip-icon {
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: absolute;
    right: 12px;
}

.hw-tooltip-icon.in-block {
    right: unset;
    top: unset;
    position: relative;
    margin-right: 8px;
}

.hw-tooltip-icon img {
    width: 100%;
    height: 100%;
}

.hw-tooltip-icon::after {
    content: attr(mytitle);
    position: absolute;
    max-width: 180px;
    top: -40%;
    right: 160%;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.2);
    font-family: Rubik;
    font-style: normal;
    color: #4F4F4F;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    z-index: 999999;
    /*overflow-y: visible;*/
    /*overflow-x: visible;*/
    opacity: 0;
    visibility: hidden;
    overflow-wrap: break-word;
}

.hw-tooltip-icon.head {
    width: 24px;
    height: 24px;
    position: absolute;
    right: -36px;
    top: 0;
}

.hw-tooltip-icon.head::after {
    max-width: 400px;
    width: 400px;
}

.hw-tooltip-icon::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: -100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent white;
    transform: rotate(-45deg);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
}

.hw-tooltip-icon:hover::after,
.hw-tooltip-icon:hover::before {
    opacity: 1;
    visibility: visible;
    z-index: 999999;
}

.done-hw-mark {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 24px;
    line-height: 24px;
    color: #47BF67;
}

.student-hw-pagination-container {
    display: flex;
    justify-content: end;
    margin-top: 18px;
}

#student-hws-preloader {
    min-height: 370px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

#student-hws-preloader > img {
    width: 100px;
    height: 100px;
    animation: rotating 1s infinite;
}

.hw-page-button > .red-mark {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #f43c44;
}
.mobile-only {
    display: none;
}
.desktop-only {
    visibility: visible;
}
.color-189fda {
    color: #189fda !important;
}
#paymentModal .sum-input {
    outline: none;
    border: 1px solid #ededed;
}
#paymentModal .sum-input:focus-visible {
    border: 1px solid #189fda;
}
.payment-accept-offer {
    font-size: 10px;
    line-height: 12px;
}
.payment-accept-offer > a {
    font-size: 10px;
    line-height: 12px;
    color: #189fda;
    cursor: pointer;
    text-decoration: none;
}
.refund-modal-title {
    color: #333333;
    font-family: 'Rubik';
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-right: 5px;
}
#refundModalSum {
    color: #333333;
    font-family: 'Rubik';
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}



/* ПИСАТЬ CSS КОД СЮДА!!! */

@media (max-width: 768px) {
    .page-wrapper {
        display: block;
    }

    .page-content-wrapper {
        max-width: initial;
        width: auto;
        padding: 5% 5%;
        margin-top: 70px;
    }

    .main-menu-wrapper {
        display: none;
        position: fixed;
        top: 0;
        width: 100vw;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
        overflow-y: scroll;
        max-height: 100vh;
        padding-top: 64px;
        z-index: 100000;
    }

    .main-menu-container .main-menu-logo {
        display: none;
    }

    .mobile-header {
        display: flex;
        width: 100vw;
        margin-top: 0;
        z-index: 100001;
    }

    .profile-grid-elem {
        width: 100%;
    }

    .short-user-schedule-wrapper {
        flex-wrap: wrap;
        gap: 20px;
    }

    .short-user-schedule-item {
        flex-shrink: 0;
        width: 100%;
    }

    .short-user-news-list {
        gap: 15px;
    }

    .short-news-elem {
        margin-right: 0;
        width: 100%;
    }

    .boxes-row {
        flex-wrap: wrap;
        gap: 40px;
    }

    .quest-profile-game {
        width: 100%;
        margin: 0;
    }

    .tariff-flex-block {
        align-items: flex-start;
        flex-direction: column;
    }

    .tariff-benefits > div > ul,
    .tariffs-plans ul,
    .tariffs-select {
        width: 100%;
        max-width: initial;
    }

    .ec-toolbar {
        flex-wrap: wrap;
        gap: 20px;
    }

    .modal-dialog {
        width: 95%;
    }

    .pay-total-additional-tooltip-text {
        max-width: 90vw;
    }

    .tariff-benefits > div {
        gap: 20px;
    }

    .alert-container {
        z-index: 100002;
    }

    .tariff-promo_course img {
        min-width: initial;
        width: 100%;
    }

    .course-hw-slider {
        margin-top: 20px;
    }

    .student-hw-stats {
        margin-top: 26px;
        position: relative;
        width: 100%;
        right: unset;
        top: unset;
    }

    .student-hw-stats-field {
        position: unset;
    }

    .hw-tooltip-icon.head {
        right: 12px;
        top: 12px;
    }

    .hw-page-button > img {
        display: none;
    }

    .hw-page-button {
        padding: 10px 8px;
        width: calc(100% / 3);
        font-size: 16px;
    }

    #student-hws {
        flex-direction: column;
        margin-right: 0;
    }
}
@media screen and (max-width: 685px) {
    .payment-accept-offer, .payment-accept-offer > a {
        font-size: 12px;
        line-height: 14px;
    }
    .mobile-w-full {
        width: 100% !important;
    }
    #paymentModal .file-input-tip {
        font-weight: normal;
        color: #C2C2C2;
    }
    #paymentModal .tw-grow {
        margin-bottom: 10px;
    }
    #paymentModal .tw-leading-4 {
        color: #BDBDBD;
        font-size: 16px !important;
    }
    #paymentModal input[type=number] {
        margin-left: 0 !important;
        height: 36px !important;
    }
    #paymentModal .payment-choice.tw-flex {
        flex-direction: column;
    }
    .payment-courses-block p:first-child {
        color: #333333;
    }
    .payment-courses-block p:last-child {
        font-size: 16px;
        font-weight: bold;
    }
    .payment-courses-block p {
        color: #999999;
        font-size: 14px;
    }
    .payment-description h1 {
        font-size: 16px;
    }
    #paymentModal .modal-body {
        padding: 2rem 1rem !important;
    }
    .payment-courses-block {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .pay-total-additional-tooltip-text {
        left: calc(100% - 215px);
    }
    .table-pagination-actions {
        margin-top: 1rem;
    }
    .table-pagination-wrapper {
        display: flex;
        flex-direction: column;
    }
    .table-title-actions {
        top: -45px;
        right: unset;
        left: 0;
    }
    #courses-list > .table-tabs-wrapper {
        margin-top: 100px;
    }
    .table-wrapper {
        padding-top: 70px;
    }
    .table-tab {
        width: fit-content;
        flex-shrink: 0;
    }
    .table-tab-list {
        width: calc(100% + 5%);
        overflow-x: scroll;
    }


    .tariff-select-header, #paymentModal .tw-bg-gradient-to-t {
        background: white;
        background-image: unset !important;
        box-shadow: 0 1px 4px 0 #0000001F;
    }

    .modal-title.tariff-select-title, #AddModalLabel {
        margin-left: 30px !important;
        margin-bottom: 0 !important;
    }
    .schedule-more-column__refund > .schedule-refund-button {
        font-size: 16px !important;
    }
    #payScheduleModal .close, #paymentModal .tw-text-2xl {
        right: unset;
        left: 1rem;
        position: absolute;
    }
    #payScheduleModal .close > span:before, #paymentModal .tw-text-2xl > span:before {
        font-weight: normal;
        content: '<';
        font-size: 30px;
    }
    #payScheduleModal .close > span > img, #paymentModal .tw-text-2xl > span > img {
        display: none;
    }
    .schedule-more-column__month p:first-child, .schedule-more-column__dateWrittenOff p:first-child, .schedule-more-column__total p:first-child, .schedule-more-column__status p:first-child {
        font-size: 16px;
        font-weight: bold;
    }
    .schedule-more-column__month, .schedule-more-column__dateWrittenOff, .schedule-more-column__total, .schedule-more-column__status {
        font-size: 16px;
    }
    #payScheduleModal > div > .modal-content, #paymentModal .modal-content {
        box-shadow: none;
    }
    .modal-backdrop {
        background: #fff;
        opacity: 1;
    }
    .schedule-refund-button {
        text-align: center;
    }
    #pay-with-bonus {
        flex-direction: column;
        padding: 1rem;
    }
    #pay-with-bonus > img {
        display: none;
    }
    .tariff-select-header {
        padding: 1.5rem 1rem;
    }
    .schedule-more-wrp {
        padding: 1rem;
        height: calc(100vh - 132px);
    }
    .schedule-more-column__month,
    .schedule-more-column__dateWrittenOff,
    .schedule-more-column__total,
    .schedule-more-column__status {
        display: flex;
        justify-content: space-between;
    }
    .schedule-more-table-row {
        display: flex;
        flex-direction: column;
        border: 1px solid #EBEBEB;
        margin: 1rem 0;
        padding: 1rem;
        border-radius: 8px;
    }
    .desktop-only {
        display: none;
    }
    .schedule-more-column {
        width: 100%;
    }
    .mobile-only {
        display: block;
    }
    .my-subs-item {
        position: relative;
        padding: 30px 20px 20px 20px;
    }
    .my-subs-item-header__title img {
        width: 32px;
        height: 32px;
    }
    .status-first {
        position: absolute;
        top: 10px;
        left: 20px;
    }
    .my-subs-item-header {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .my-subs-item-header__title {
        gap: 12px;
        width: 100%;
    }
    .my-subs-item-header__text p:first-child {
        font-size: 18px;
    }
    .my-subs-item-header__schedule {
        margin-top: 10px;
        font-size: 15px;
    }
    .my-subs-item-content, .schedule-more-wrp > .schedule-more-column-wrp {
        grid-template-columns: 1fr !important;
        grid-template-rows: none;
        grid-row-gap: 8px;
        width: 100%;
    }
    .my-subs-item-content__element p:first-child {
        font-size: 14px;
    }
    .modal > .tariff-select-dialog, #paymentModal > .modal-dialog {
        width: 100% !important;
        margin: 0;
    }
    .tariff-select-dialog  > .tariff-select-content {
        width: 100% !important;
    }
    .modal#payScheduleModal, .modal#paymentModal {
        top: 64px !important;
    }
    .schedule-more-column {
        width: 100%;
    }
}


/* ПИСАТЬ CSS КОД ВЫШЕ ЭТОГО МЕДИА ЗАПРОСА!!! */


.change-tariff-primary.disabled,
.change-tariff-outline.disabled {
    opacity: 60%;
}

#ui-datepicker-div {
    position: absolute !important;
}

.join-tooltip-icon::after {
    content: attr(mytitle);
    position: absolute;
    max-width: 180px;
    max-height: 100px;
    /*width: 150px;*/
    /*height: 75px;*/
    color: black;
    top: -25px;
    right: -195px;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.2);
    font-family: Rubik;
    font-style: normal;
    color: #4F4F4F;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    z-index: 999999;
    /*overflow-y: visible;*/
    /*overflow-x: visible;*/
    opacity: 0;
    visibility: hidden;
    overflow-wrap: break-word;
}

.join-tooltip-icon::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: -19px;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent white;
    transform: rotate(-45deg);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
}

.join-tooltip-icon:hover::after,
.join-tooltip-icon:hover::before {
    opacity: 1;
    visibility: visible;
    z-index: 999999;
}

.add-new-level-button {
    margin-top: 16px;
    width: 100%;
    height: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #189fda;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s;
}

.add-new-level-button > img {
    margin-right: 8px;
}

.add-new-level-button:hover {
    background: #0a6ebd;
}

#courseProductInfo {
    width: 100%;
    padding: 12px;
    border: 1px solid #189FDA;
    border-radius: 12px;
    background-color: #FFFFFF;
    margin-top: 16px;
}

#startPeriodProduct {
    /*width: 25px;*/
    height: 100%;
    padding: 12px 4px;
    border-radius: 4px 0px 0px 4px;
    background-color: #E7E7EC;
}

#pay-with-bonus {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    background: #F7F6F7;
    border-radius: 12px;
    border: 1px solid #189FDA;
    padding-right: 20px;
}

#pay-with-bonus > img {
    border-radius: 12px;
}

.pay-with-bonus-wrp {
    flex-grow: 1;
}

.pay-with-bonus-wrp > div {
    display: flex;
    gap: 10px;
}

.pay-with-bonus-wrp > h4 {
    color: #999999;
    font-family: Rubik;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.10000000149011612px;
}

.pay-with-bonus-wrp > p {
    margin-top: 10px;
    font-family: Rubik;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.10000000149011612px;
}

#pay-with-bonus-balance {
    font-family: Rubik;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.10000000149011612px;
    text-align: center;
}

#pay-with-bonus > button {
    font-family: Rubik;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: center;
    color: #FFFFFF;
    padding: 12px 25px;
    background: #189FDA;
    cursor: pointer;
    border-radius: 12px;
}

.write-off-option label {
    font-family: Rubik;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0px;
    text-align: left;
}

#confirmWriteOffBonusesModal .modal-dialog {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#confirmWriteOffBonusesModal .modal-content {
    width: 400px;
}

.modal-content {
    box-shadow: 20px 19px 20px 20px rgba(8, 35, 48, 0.06), -20px -20px 20px 20px rgba(8, 35, 48, 0.1);
}

.product-state {
    width: fit-content;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #999999;
    background: #EBEBEB;
    border: 1px solid #999999;
    border-radius: 10px;
    font-family: Rubik;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
}

.product-state > div {
    width: 8px;
    height: 8px;
    border: inherit;
    border-width: 5px;
    border-radius: 50%;
}

.product-state__ACTIVE {
    color: #2FA84F;
    background: #DCF7E3;
    border: 1px solid #2FA84F;
}

.product-state__FROZEN {
    color: #189FDA;
    background: #C2EEFF;
    border: 1px solid #189FDA;
}

.product-state__DISABLED {
    color: #EA3D2F;
    background: #FEE4E2;
    border: 1px solid #EA3D2F;
}

.product-state__INACTIVE {
    color: #EA3D2F;
    background: #FEE4E2;
    border: 1px solid #EA3D2F;
}

.product-state__FAILED_TO_RENEW {
    color: #2FA84F;
    background: #DCF7E3;
    border: 1px solid #2FA84F;
}

.product-state__FAILED_TO_CHARGE {
    color: #2FA84F;
    background: #DCF7E3;
    border: 1px solid #2FA84F;
}

.schedule-empty {
    display: flex;
    justify-content: center;
    margin: 30px 30px;
}

#payScheduleModal {
    top: -180px !important;
}

#payment-data-wrp {
    width: 100%;
    max-width: 350px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#payment-data-wrp input {
    width: 100%;
}

#stages.blocked {
    pointer-events: none;
    opacity: 0.5;
}

#isArchived {
    margin-bottom: 20px;
}

.archived-wrapper {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: 24px 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 4px;
    padding: 28px 24px;
    border: 1px solid #189FDA;
    background: #FFFFFF;
    border-radius: 12px;
    align-items: center;
}

.archived-wrapper svg {
    grid-area: 1 / 1 / 3 / 2;
    width: 80px;
    height: 76px;
}

.archived-wrapper h3 {
    grid-area: 1 / 2 / 2 / 5;
    font-family: Rubik;
    font-size: 20px;
    font-weight: 700;
    line-height: 23.7px;
    text-align: left;
}

.archived-wrapper p span {
    cursor: pointer;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 700;
    line-height: 21.33px;
    text-align: left;
    color: #189FDA;
}

.archived-wrapper p {
    grid-area: 2 / 2 / 3 / 5;
    font-family: Rubik;
    font-size: 18px;
    font-weight: 400;
    line-height: 21.33px;
    text-align: left;
}

#user-id {
    position: absolute;
    top: 60px;
    left: -17px;
    font-family: Rubik;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    text-align: left;
    color: #31B8F3;
    transform: rotate(-90deg);
}

.rocket-background-img {
    opacity: 0.2;
    width: 80px;
    height: 80px;
    left: 34px;
}

.banned-student {
    color: #8c8c8c !important;;
}

.low-balance-student {
    color: rgb(255, 62, 62) !important;
}

.line-btn {
    color: #189FDA;
    font-family: Rubik;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    cursor: pointer;
}

#paymentMethod {
    padding: 8px 12px;
    gap: 12px;
    border: 1px solid #189FDA;
    border-radius: 8px;
    width: fit-content;
}

.radio-label {
    font-family: Rubik;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
}

#auto-renew-check {
    margin-top: 10px;
    padding: 12px;
    display: flex;
    gap: 16px;
    align-items: center;
    background: #FCF3D7;
    border: 1px solid #FFB800;
    border-radius: 4px;
}

#auto-renew-check li {
    font-family: Rubik;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #FFB800;
}

#auto-renew-check ul {
    list-style: disc;
    padding-left: 20px;
}

#auto-renew-check p {
    font-family: Rubik;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #FFB800;
}

#manageTariffLink {
    text-decoration: underline;
    color: #FFB800;
    font-size: 14px;

}

.chat-tabs {
    display: flex;
    padding: 0;
    margin: 0 16px 16px 16px;
    border-bottom: 1px solid #ededed;
}

.chat-tab {
    padding: 16px;
    color: #333;
    text-align: center;
    font-family: Rubik;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    display: flex;
}
.chat-tab > img {
    width: 17px;
    object-fit: contain;
    margin-right: 10px;
    filter: brightness(10%);
}

.antifreeze-row {
    display: flex;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.ui-state-disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

#control-material-modal input[type="text"] {
    width: 100%;
}

div.dinamic-dd-list {
    display: flex;
    flex-direction: column;
    height: auto;
}

.settings-page .row {
    display: block;
}

.pay-total-additional-tooltip {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #333333;
    width: 16px;
    height: 16px;
    border: 1px solid #CFD4D9;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
}

label[for="timeZoneShift"] {
    display: flex;
    gap: 5px;
}

.styled-range datalist {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 200px;
}

.styled-range label {
    font-size: 12px;
    margin: 0;
    font-weight: inherit;
}

.styled-range option {
    font-size: 11px;
    padding: 0 2px;
}

.styled-range input[type="range"] {
    width: 200px;
    margin: 0;
    height: 17px;
}

.styled-range input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 200px;
    background: transparent;
}

/* Chrome, Safari, Edge */
.styled-range input[type="range"]::-webkit-slider-runnable-track {
    background: lightgray;
    height: 4px;
    border-radius: 2px;
}

.styled-range input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #8BCFED;
    border-radius: 50%;
    margin-top: -5px;
    cursor: pointer;
}

/* Firefox */
.styled-range input[type="range"]::-moz-range-track {
    background: lightgray;
    height: 4px;
    border-radius: 2px;
}
.styled-range input[type="range"]::-moz-range-progress {
    background: transparent;
}
.styled-range input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #8BCFED;
    border-radius: 50%;
    cursor: pointer;
}

/* IE/Edge */
.styled-range input[type="range"]::-ms-track {
    background: transparent;
    border-color: transparent;
    color: transparent;
    height: 4px;
}
.styled-range input[type="range"]::-ms-fill-lower,
.styled-range input[type="range"]::-ms-fill-upper {
    background: lightgray;
    border: none;
}
.styled-range input[type="range"]::-ms-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid #8BCFED;
    border-radius: 50%;
    cursor: pointer;
}

#split-options {
    margin-top: 10px;
    flex: 0 0 100%;
}

#select-game-stat-radios {
    display: flex;
    flex-direction: column;
}

#select-game-stat-radios > label {
    display: flex;
    align-items: center;
    gap: 5px;
}

#select-game-stat-radios > label > input {
    margin: 0;
}

@media screen and (max-width: 900px) {
    .student-hw {
        width: 100%;
    }
}

@media screen and (min-width: 900px) and (max-width: 1300px) {
    .student-hw {
        width: calc((100% / 2) - 12px);
    }
}