@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;1,400;1,700&display=swap');
html,body{
    font-family: 'Roboto', sans-serif;
}

div, svg, nav, header, footer, article, img, video, audio {
    display: block;
    margin: 0; padding: 0;
}

h2 {
    color: var(--color-text-title);
    font-size: 28px;
    line-height: 38px;
    font-weight: bold;
}

h3 {
    font-size: 22px;
    line-height: 32px;
}

input, textarea, div[contenteditable=true], .select, select {
    display: block;
    min-width: 206px;
    border: 2px solid var(--color-light);
    margin: 8px 0 16px;
}
div[contenteditable=true] {
    margin-top:0px;
    border-top: 0;
}
[contenteditable][placeholder]:empty::before {
    content: attr(placeholder);
    position: absolute;
    color: var(--color-light);
    background-color: transparent;
}
input:disabled {
    background: var(--color-back-light);
    color: var(--color-light);
}
textarea::placeholder, input::placeholder {
    color: var(--color-light);
    opacity: 1;
}
.input_invalid{
    border-color: red;
    animation: inp_invalid 0.4s ease-out;
}
@keyframes inp_invalid {
    25% {
        transform:translateX(5px);
    }
    50% {
        transform:translateX(-5px);
    }
    75% {
        transform:translateX(5px);
    }
}
.input_error {
    color: var(--color-red);
    padding: 0 16px;
    font-size: 12px;
    line-height: 14px;
    margin-top: -14px;
}

div[contenteditable=true] * {
    font-size: 16px!important;
    line-height: inherit;
}
.bl_description {
    line-height: 24px;
}
div[contenteditable=true] p, ul, ol, li {
    margin: 0;
}
.select {
    position: relative;
    display:inline-block;
}
.select_arrow {
    position: absolute;
    width: 16px; height: 16px;
    top: calc(50% - 8px); right: 8px;
    transition: all 0.3s ease-out;
}
.upside_down {
    transform:rotate(180deg);
}
.select_value {
    height: 24px;
    width: calc(100% - 32px);
    margin: 0;
    line-height: 24px;
    user-select: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.select_value:empty {
    height: 24px;
}
.select_value:empty::before {
    content: attr(placeholder);
    position: absolute;
    color: var(--color-light);
}
.select_list {
    position: absolute;
    display: none;
    width: 100%;
    background: #fff;
    top: calc(100% + 16px);
    border: 2px solid var(--color-light);
    left: 0;
    padding: 4px;
    border-radius: 8px;
    z-index: 222;
}
.select_list::before {
    content: "";
    position:absolute;
    width: 0px; height: 0px;
    top: -25px;
    left: calc(50% - 12px);
    border: 12px solid transparent;
    border-bottom: 12px solid var(--color-light);
}
.select_list::after {
    content: "";
    position:absolute;
    width: 0px; height: 0px;
    top: -22px;
    left: calc(50% - 12px);
    border: 12px solid transparent;
    border-bottom: 12px solid #fff;
}
.select_elem {
    display: block;
    background: inherit;
    padding: 8px 16px;
    border-radius: 6px;
    margin-bottom: 6px;
}
.select_elem:nth-last-child(1){
    margin: 0;
}
.select_elem:hover {
    background: var(--color-back);
}
.select_open > .select_list {
    display: block;
}

.editable_top {
    width: 100%;
    min-height: 38px;
    margin-top: 8px;
    padding: 1px 36px 1px 0;
    background: var(--color-back);
    border: 2px solid var(--color-light);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-sizing: border-box;
}
.editable_top_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--color-back);
    width: 32px;
    height: 32px;
    margin: 2px 6px;
    padding:0;
    border: 0;
    outline: 0;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
}
.editable_color_wrapper,
.editable_link_wrapper {
    display: inline-flex;
    position: relative;
}
.editable_link_popup {
    display: none;
    position: absolute;
    top: 34px;
    left: 0;
    background: #fff;
    border: 1px solid var(--color-light);
    border-radius: 8px;
    padding: 6px;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    gap: 4px;
    white-space: nowrap;
}
.editable_link_popup--open {
    display: flex;
}
.editable_link_input {
    display: inline-block !important;
    border: 1px solid var(--color-light) !important;
    border-radius: 4px;
    padding: 4px 8px !important;
    font-size: 13px !important;
    width: 200px !important;
    min-width: unset !important;
    outline: none;
    line-height: normal !important;
    margin: 0 !important;
    box-sizing: border-box;
}
.editable_link_confirm {
    display: inline-block !important;
    background: var(--color-main, #5b5bd6);
    color: #fff;
    border: none !important;
    border-radius: 4px;
    padding: 4px 10px !important;
    cursor: pointer;
    font-size: 15px;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    min-width: unset !important;
}
.editable_link_highlight {
    background: rgba(91, 91, 214, 0.2);
    border-radius: 2px;
}
.editable_link_remove {
    display: none;
    background: none !important;
    border: none !important;
    color: #e73f3f;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    min-width: unset !important;
    border-radius: 4px;
}
.editable_link_remove:hover {
    background: rgba(231, 63, 63, 0.1) !important;
}
div[contenteditable=true] a {
    color: inherit;
    text-decoration: underline;
    border-radius: 3px;
    transition: background 0.15s;
}
div[contenteditable=true] a:hover {
    background: rgba(115, 115, 224, 0.15);
    cursor: pointer;
}
.editable_color_palette {
    display: none;
    position: absolute;
    top: 34px;
    left: 0;
    background: #fff;
    border: 1px solid var(--color-light);
    border-radius: 8px;
    padding: 6px 8px;
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    gap: 5px;
}
.editable_color_palette--open {
    display: flex;
}
.editable_color_swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.1s, border-color 0.1s;
}
.editable_color_swatch:hover {
    border-color: rgba(0,0,0,0.25);
    transform: scale(1.15);
}
.editable_color_swatch--active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
    position: relative;
}
.editable_color_swatch--active::after {
    content: '×';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    pointer-events: none;
}
.editable_top_btn:hover {
    background: #fff;
}
.editable_top_btn--active {
    background: var(--color-back-second) !important;
}

.editable_row_break {
    display: none;
}
.editable_top_btn img,
.editable_top_btn svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.input_name {
    color: var(--color-text-second);
    margin: 0;
}

.inp_icon {
    position:absolute;
    width: 22px;
    height: 22px;
    top: 50%; right: 14px;
    transform: translateY(-11px);
    border-radius: 50%;
    display: none;
}
.inp_ok {
    border: 2px solid rgb(81, 196, 81);
}
.inp_err {
    border: 2px solid red;
}
.inp_load {
    animation: loaderAnim 1.2s linear infinite;
}
#loginSubm[disabled=true] + label {
    cursor:not-allowed;
    opacity: 0.7;
}
#subdomainSubmit[disabled=true] + label {
    cursor:not-allowed;
    opacity: 0.7;
}
#addUserSubmit[disabled=true] + label {
    cursor:not-allowed;
    opacity: 0.7;
}

@keyframes loaderAnim {
    from {
        transform: translateY(-11px) rotateZ(0deg);
    }
    to {
        transform: translateY(-11px) rotateZ(359deg);
    }
}

/**
 * doc
 */

.doc_head_container {
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    text-align: center;
}
.doc_elems_container {
    margin: 16px 0 8px;
    max-width: 890px;
    margin: auto;
}
.doc_elems_container li {
    margin: 8px 0;
}
.doc_elems_container ol > li {
    display: block;
}
.doc_elem_title {
    text-align: center;
    color: var(--color-text-second);
}
.doc_elem_subtitle {
    font-size: 18px;
    color: var(--color-text-second);
}
.data_num::before {
    content: attr(data-num);
    font-weight: bold;
    margin-left: -24px;
    margin-right: 8px;
}

/**
 * login
 */

.register_container {
    max-width: 920px;
    margin: auto;
    text-align: center;
}
.block_img_wrapper {
    display: inline-block;
    vertical-align: top;
    width:380px;
}
.login_illust {
    width: 100%;
    margin-top: 38px;
}

.block_login_wrapper {
    display: inline-block;
    vertical-align: top;
    width: 360px;
    text-align: left;
}
.block_login_wrapper input {
    width: 100%;
}
.block_login_wrapper .button {
    margin: 8px 0;
}
.accept_wrapper{
    width: calc(100% - 24px);
    margin: 8px 12px;
}
.accept_wrapper input[type=checkbox] {
    width: 24px;
    display:inline-block;
    vertical-align: middle;
    margin-right: 8px;
}
.offer_text {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-text-second);
    width: calc(100% - 38px);
}
.offer_text a {
    color: var(--color-text-second);
    line-height: unset;
}


/**
 * backgrounds
 */

.bg_white {
    background: #fff;
}

.bg_back {
    background: var(--color-back);
}

.bg_light {
    background: var(--color-light);
}

.bg_g_deff {
    background: linear-gradient(45deg, #D0D0FE, #E6D6F6);
}
.bg_g_deff_t {
    background: linear-gradient(45deg, #D0D0FE70, #E6D6F660);
}
.bg_g_course {
    background:linear-gradient(45deg, #787bd3, #6a8ef5);
    color: #fff;
}
.bg_g_lesson {
    background: linear-gradient(45deg, #0b8be5, #1c96ff);
    color: #fff;
}

.text_g_deff {
    display: inline-block;
    background: linear-gradient(90deg, var(--color-text-title), var(--color-text-active));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/**
* profile header
*/

.header {
    height: 108px;
    margin-bottom: -108px;
}
.head_logo_container {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 15;
    width: 132px;
}
.logo{
    width: 116px;
    margin: 8px 0;
}
.logo_desk {
    display:block;
    position: fixed;
    width: 132px;
    top: 16px;
    left: 16px;
}
.logo_mob {
    display:none;
    padding: 9px 0;
}
.head_nav_container {
    position: absolute;
    top: 16px; right: 16px;
    width: calc(100% - 132px);
    text-align:right;
    z-index: 10;
}
.profile_avatar {
    display: block;
    width: 42px;
    height: 42px;
    background: #fff;
    border: solid 2px var(--color-light);
    border-radius: 50%;
    cursor: pointer;
}
#avacheck:checked + .head_nav_wrapper{
    display: block;
}

.profile_name {
    height: 42px;
    font-size: 18px;
    font-weight: bold;
    line-height: 32px;
    padding: 5px 18px;
}

.head_nav_wrapper {
    display: none;
    position: absolute;
    background: #fff;
    width: 256px;
    top: 58px; right: 0;
    z-index: 999;
}
.head_nav_wrapper::before {
    content: "";
    display: block;
    position: absolute;
    top: -6px; right: 14px;
    width: 14px; height:14px;
    background: #fff;
    transform: rotateZ(45deg);
}
.head_nav_wrapper .button {
    width: 100%;
    margin: 8px 0;
    background: transparent;
}


/**
* profile navigation
*/

.profile_nav_desk {
    position: fixed;
    width: 256px;
    height: 100%;
    left: 0; top:0;
    background: #fff;
    padding: 0 24px;
    z-index: 1;
}

.profile_nav_mob_container {
    display: none;
}
.profile_nav_mob {
    position: fixed;
    top: 0; left:0;
    background:#fff;
    width: 256px;
    height: 100%;
    padding:0 16px;
    z-index: 10;
}
.profile_nav_m_blbg {
    position:absolute;
    width:100%;height:100%;
    top:0;left:0;
    background: #00000040;
    z-index: 10;
}

.profile_content_container {
    width: calc(100% - 256px);
    margin-left: 256px;
    margin-top:112px;
    padding: 0 24px;
}

.nav_back {
    position: fixed;
    top: 0; left: 0;
    width: 320px;
    height: 100%;
    background: #fff;
}

.navlist {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
.navlist li {
    display: block;
}
.nav_el {
    display: flex;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--color-text-def);
    border-radius: var(--border-r-def);
    margin: 16px 0;
    transition: background-color 0.3s ease-in-out;
}
.nav_el:hover {
    background: var(--color-back);
}
.second_nav_el {
    display: flex;
    padding: 4px 12px;
    line-height: 21px;
    font-size: 16px;
    text-decoration: none;
    color: var(--color-text-def);
}
.second_nav_el:hover {
    text-decoration: underline;
}
.second_nav_decor {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 2px solid rgb(196, 196, 196);
    border-radius: 50%;
    margin: 16px;
}
.navlist svg {
    margin: 8px 12px 8px 0;
}
.navlist circle {
    stroke: #ccc;
}
.navlist path {
    fill: #ccc;
}
.navlist rect {
    fill: #ccc;
}

.nav_el_act {
    font-weight: bold;
    background: var(--color-back);
    color: var(--color-text-active);
}
.nav_el_act a{
    color: var(--color-text-active);
}
.nav_el_act circle {
    stroke: var(--color-text-active);
}
.nav_el_act path {
    fill: var(--color-text-active);
}
.nav_el_act rect {
    fill: var(--color-text-active);
}
.separator_h {
    width: calc(100% - 48px);
    height: 2px;
    margin: 8px auto 24px;
    background: var(--color-light);
}

/**
 * profile content block
 */

.lesson_navigation_container {
    width: 100%;
    min-height: 32px;
    margin: 16px 0;
    padding: 8px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
}
.lesson_navigation_wrapper {
    display: inline-block;
}
.lesson_nav_el {
    display: inline-block;
    vertical-align: middle;
    max-width: 300px;
    border: 2px solid var(--color-light);
    border-radius: 8px;
    padding: 8px 24px;
    margin: 8px 6px;
    color: var(--color-text-second);
    text-decoration: none;
}
.lesson_nav_el p, img {
    display: inline-block;
    vertical-align: middle;
}
.lesson_nav_el_text {
    display: inline-block;
    vertical-align: middle;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new_course_wrapper {
    width: 100%;
    max-width: 480px;
    margin: 24px auto;
}
.new_course_wrapper h3 {
    text-align: center;
}
.new_course_wrapper .button {
    margin: 8px 0;
}

 .prof_edit_form {
    width: 480px;
}
.prof_edit_form input{
    width: 100%;
}
.bl_profile_container {
    border-radius: 16px;
    padding: 16px;
    margin: 8px 0;
}
.profile_icon {
    width: 120px;
    height: 120px;
    background-color: #7373E012;
    background-image: url(/static/course/no_img.svg);
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    margin: auto;
}
.load_profile_nav {
    width: 180px;
    margin: 8px auto;
}

.bl_content {
    width: 100%;
}
h3 {
    margin: 16px 0;
    color: var(--color-text-def);
}

.bl_elem {
    border-radius: var(--border-r-def);
    padding: 16px;
    min-height: 48px;
    margin: 16px 0;
}
.bl_elem h3 {
    color: white;
}
.bg_white h3 {
    color: var(--color-text-def);
}
.profile_card_container {
    width: 100%;
    text-align: center;
}
.bl_card_main {
    display: inline-block;
    vertical-align: top;
    width: 32%;
    min-height: 280px;
    padding: 16px;
    border-radius: 16px;
    text-align: center;
}
.bl_card_main .button {
    margin: 8px auto;
}
.b_title_accent {
    display: block;
    color: #fff;
    font-size: 32px;
    margin: 16px 0;
    text-shadow: 0 2px 8px #1a237e8a;
}
.bl_card_icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 16px auto 32px;
}

.separator {
    width: calc(100% - 64px);
    height: 2px;
    background: var(--color-light);
    border-radius: 1px;
    margin: auto;
}

.bread_crumb {
    display: inline-block;
    color: var(--color-text-active);
    margin: 0;
    padding: 6px;
    text-decoration: none;
}
.bread_crumb:hover {
    color: var(--color-text-title);
}
.bread_crumb::after {
    content: ">";
    margin: 0 6px;
}

.course_icon {
    flex: 0 0 220px;
    width: 220px;
    height: 172px;
    background-color: #7373E012;
    background-image: url(/static/course/no_img.svg);
    background-position: center;
    background-size: cover;
    border-radius: var(--border-r-def);
}
.upload_img {
    width: 220px;
    height: 172px;
    margin: 8px 0;
    background-color: #7373E012;
    background-image: url(/static/course/no_img.svg);
    background-position: center;
    background-size: cover;
    border-radius: var(--border-r-def);
}

.img_size_select_wrapper {
    margin: 8px 0;
}
.img_size_sel_radio {
    display: none;
}
.img_size_sel_lbl {
    display: inline-block;
    margin: 8px 16px;
    cursor: pointer;
}
.img_sel_lbl_text {
    font-size: 14px;
    color: var(--color-text-second);
    margin-top: 0;
}
.img_size_sel_radio:checked +label .img_sel_lbl_text {
    font-weight: bold;
    color: var(--color-main);
}
.img_size_view_icon {
    display: block;
    width: 42px;
    margin: auto;
}

.course_content {
    margin-left: 16px;
}
.course_content .button {
    margin: 8px 0;
}

.lesson_list {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
}
.lesson_list li {
    display: block;
    width: 100%;
}
.l_section {
    background: rgba(255,255,255,0.4);
    border-radius: 8px;
    /* padding: 8px; */
    margin: 12px 0;
}
.section_nav {
    font-size: 0;
    background: linear-gradient(to right, #dee5ff, #c9dcff);
    border: 2px solid #c4cef3;
    border-radius: 8px;
    margin-bottom: 0;
    padding: 8px;
    user-select: none;
    -webkit-user-select: none;
}
.section_nav:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,.23);
}
.sec_nav_open > .section_name_wrapper > .section_expand {
    transform: rotateZ(180deg);
}
.section_content {
    height: 0px;
    padding: 0 24px;
    overflow: hidden;
    transition: all 0.3s ease-in-out
}
.section_name_wrapper {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 114px);
    font-size: 18px;
    font-weight: bold;
}
.section_edit_wrapper {
    display: inline-block;
    vertical-align: middle;
    width: 112px;
    text-align: right;
}
.section_expand {
    width: 24px;
    display: inline-block;
    vertical-align: middle;
    margin: 8px;
}
.l_section_data {
    width: calc(100% - 40px);
    display: inline-block;
    vertical-align: middle;
}
.l_section_title {
    font-size: 18px;
    margin-bottom: 0;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.l_section_amount {
    font-size: 14px;
    color: var(--color-text-second);
    margin: 0;
}
.l_section_lessons {
    padding: 24px 0;
}
.c_lesson {
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

.section_droppable {
    display: block;
}

.lesson_droppable {
    display: block;
}
.lc_droppable, .ls_droppable {
    display: block;
    height: 0px;
}
.s_drop_active {
    height: 26px;
    margin: -15px 0;
    width: calc(100% - 12px);
    position: absolute;
    left: 6px;
    z-index: 5;
    border-radius: 8px;
}
.l_drop_active , .ls_drop_active {
    height: 26px;
    margin: -17px 0;
    background: rgba(102, 141, 241, 0.14);
    border: 2px solid rgba(102, 141, 241, 0.4);
    width: calc(100% - 12px);
    position: absolute;
    left: 6px;
    z-index: 5;
    border-radius: 8px;
}
.l_drop_active_b, .s_drop_active_b, .ls_drop_active {
    outline: 3px solid rgb(102, 141, 241);
}

.lesson_element_wrapper {
    position:relative;
    background: #fff;
    padding: 8px;
    margin: 8px 0;
    border-radius: 16px;
    border: 2px solid transparent;
    user-select: none;
    -webkit-user-select: none;
}
.lesson_element_wrapper:hover {
    outline: 2px solid #c9dcff;
}
.result_lesson_wrapper {
    min-height: 60px;
    font-size: 0;
}
.lesson_drag_btn {
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    padding: 1px;
    user-select: none;
    cursor: pointer;
}
.b_drag_icon {
    width: 24px;
    height: 24px;
    margin: 5px;
}
.b_drag_icon path {
    fill: var(--color-light);
}
.b_drag_icon:hover path {
    fill: var(--color-text-active);
}

.open_access_manual {
    display: inline-block;
    vertical-align: middle;
    width: 36px;
    height: 36px;
    margin: 0 8px;
    cursor: pointer;
}
.access_icon {
    width: 24px;
    height: 24px;
    margin: 6px;
}
.access_icon path {
    fill: var(--color-light);
}
.access_icon circle {
    fill: var(--color-light);
}
.access_icon:hover path {
    fill: var(--color-main);
}
.access_icon:hover circle {
    fill: var(--color-main);
}

.std_lesson_element_container, .res_lesson_element_container {
    display: block;
    background: var(--color-back);
    border-radius: 16px;
    margin: 16px 0;
    text-decoration: none;
}
.res_lesson_w_bg {
    background: #FFFFFF;
}
.res_lesson_w_bg .lesson_element_res_link {
    font-weight: bold;
    color: var(--color-main);
}
.std_lesson_element_container:hover {
    background: #fff;
}
.lesson_element_link {
    max-width: calc(100% - 130px);
    display: inline-block;
    text-decoration: none;
    font-size: 18px;
    margin-bottom: 0;
    padding: 6px 16px;
    color: var(--color-text-def);
}
.lesson_element_res_link {
    display: inline-block;
    vertical-align: top;
    font-size: 18px;
    margin-bottom: 0;
    padding: 6px 16px;
    color: var(--color-text-def);
    width: calc(100% - 168px);
}
.lesson_element_res_btn_wrapp {
    display: inline-block;
    vertical-align: top;
    width: 168px;
    padding-right: 8px;
    text-align: right;
}
.lesson_element_no_res {
    font-size: 14px;
    text-align: right;
    margin: 16px;
    color: var(--color-text-second);
}
.lesson_element_link:hover {
    color: var(--color-text-active);
}
.lesson_element_desc {
    padding: 6px 16px;
    color: var(--color-text-second);
}
.lesson_element_desc p {
    margin-top: 0;
}

.component_list_wrapper {
    font-size: 0;
    width: 792px;
    margin: auto;
    text-align: center;
}
.component_list_element {
    display: inline-block;
    vertical-align: top;
    width: 33%;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    margin: 8px 0;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    color: var(--color-text-def);
    cursor: pointer;
}
.component_list_element:hover {
    background: var(--color-back);
    color: var(--color-text-active);
}
.component_list_img {
    display: block;
    width: 82px;
    margin: 8px auto;
    height: 64px;
    border-radius: 8px;
    border: 2px solid var(--color-light);
    overflow: hidden;
}
.lesson_icon {
    display:inline-block;
    vertical-align: top;
    width: 48px;
    height: 42px;
    margin: 8px 0;
    background-color: #7373E012;
    background-image: url(/static/course/no_img.svg);
    background-position: center;
    background-size: cover;
    border-radius: var(--border-r-def);
}

.profile_form {
    width: 100%;
}

.doc_img {
    display: block;
    width:100%;
    max-width:720px;
    height:auto;
    border-radius: 8px;
    margin: 16px 0;
    overflow: hidden;
}
.doc_text {
    margin: 8px 0;
    line-height: 24px;
    max-width: 920px;
}
.doc_img_desc {
    font-size: 14px;
    color: var(--color-text-second);
}

/**
* Profile content
*/

.profile_cards_container {
    display: block;
    font-size: 0;
}
.profile_card {
    display: inline-block;
    vertical-align: top;
    background: #fff;
    border-radius: 16px;
    margin: 12px 0;
    overflow: hidden;
}
.profile_card_illustration {
    position: absolute;
    width: 420px;
    bottom: 0;
    left: 50%;
}
.school_card_illustration {
    position: absolute;
    width: 100%;
    max-width: 420px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.pc_course {
    width: 100%;
    background: #7c8dd4;
    background: linear-gradient(45deg, #787bd3, #6a8ef5);
    box-shadow: 0 8px 18px #1f4fad52, 0 4px 8px #042e9340;
}
.pc_student {
    width: calc(65% - 24px);
    background: #F0D3B0;
    margin-right:24px;
    background: linear-gradient(45deg, #FF9787, #F5B682);
    box-shadow: 0 8px 18px #ad661f52, 0 4px 8px #93380440;
}
.pc_staff {
    width: 35%;
    background: #F0D3B0;
    margin-right:24px;
    background: linear-gradient(45deg, #FF9787, #F5B682);
    box-shadow: 0 8px 18px #ad661f52, 0 4px 8px #93380440;
}
.pc_storage {
    width: 35%;
    background: #475261;
    background: linear-gradient(45deg, #253d5d, #1c266c);
    box-shadow: 0 8px 18px #1f4fad52, 0 4px 8px #042e9340;
}
.pc_dashboard_img {
    width: 35%;
    min-height: 230px;
    margin-left: 24px;
    background: #7c8dd4;
    background: linear-gradient(45deg, #787bd3, #6a8ef5);
    box-shadow: 0 8px 18px #1f4fad52, 0 4px 8px #042e9340;
}
.pc_class {
    width: 33%;
    min-height: 230px;
    background: #f6d276;
    background: linear-gradient(45deg,#f6d276, #f1be72);
    box-shadow: 0 8px 18px #ad5e1f52, 0 4px 8px #930d0440;
}
.pc_class_sch {
    width: calc(65% - 24px);
    min-height: 230px;
    background: #f6d276;
    background: linear-gradient(45deg,#f6d276, #f1be72);
    box-shadow: 0 8px 18px #ad5e1f52, 0 4px 8px #930d0440;
}
.card_icon_container {
    display: inline-block;
    vertical-align: top;
    width: 98px;
    min-height: 214px;
}
.card_info_container {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 98px);
    padding: 14px 0;
    font-size: 0;
}
.card_info_block {
    display: inline-block;
    vertical-align: top;
    padding: 8px;
    font-size: 16px;
    text-align: left;
}
.card_info_block .button {
    margin: 8px 0;
}
.ci_full {
    width: 100%;
}
.ci_half {
    width: 50%;
}
.ci_third {
    width: 33%;
}
.block_title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}
.table_wrapper {
    width: 100%;
}

.sub_course_card {
    display: block;
    background:#fff;
    font-size: 0;
    margin: 16px 0;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid #fff;
}

.sub_course_wrapper, .sub_course_subscribers_wrapper {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    padding: 16px
}
.sub_course_wrapper {
    width: 356px;
}
.sub_course_subscribers_wrapper {
    position: relative;
    width: calc(100% - 356px);
    border-radius: 14px;
    background: var(--color-back);
}
.sub_course_name {
    font-size: 18px;
}
.sub_subscriber_link {
    vertical-align: middle;
    text-decoration: none;
    color:rgb(40, 143, 233);
}
.sub_subscriber_link:hover {
    text-decoration: underline;
}

/**
* Payment card
*/
.pay_card_container {
    font-size: 0;
    padding:16px 0;
    text-align: center;
}
.pay_card_part {
    display: inline-block;
    vertical-align: top;
    width: 212px;
    font-size: 16px;
}
.pay_amount_container {
    text-align: center;
    border: 2px solid var(--color-light);
    border-radius: 8px;
    background: #fff;
}
.pay_controll {
    display: inline-block;
    vertical-align: middle;
    width: 22px; height: 22px;
    border: 2px solid var(--color-light);
    border-radius: 11px;
    margin: 8px;
    text-align: center;
    line-height: 17px;
    cursor: pointer;
    user-select: none;
}
.pay_amount {
    display: inline-block;
    vertical-align: middle;
    min-width: 72px;
    font-size: 32px;
}
#pricePerItem{
    font-weight: bold;
}
#pricePerItemBefore{
    text-decoration: line-through;
}
.pay_description {
    text-align: center;
    color: var(--color-text-second);
    font-size: 14px;
    line-height: 16px;
    margin: 8px auto;
}
.pay_total {
    font-size: 32px;
    text-align: center;
    font-weight: bold;
    color: var(--color-main);
}
.pay_total::after{
    content: attr(data-curr);
    font-size: 14px;
    margin-left: 6px;
}
.pay_total_before {
    font-size: 18px;
    color: var(--color-text-second);
    text-align: center;
    text-decoration: line-through;
}
.pay_total_before::after{
    content: attr(data-curr);
}
.bill_container {
    width: 60%;
    margin: 8px auto;
    padding: 8px;
    border-top: 2px solid var(--color-light);
    border-bottom: 2px solid var(--color-light);
}
.bill_text {
    display: inline-block;
    width: 80px;
    color: var(--color-text-second);
}
.bill_text_val {
    display: inline-block;
    width: 50%;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
.bill_price::after {
    content: 'грн';
    font-size: 14px;
    margin-left: 4px;
    margin-right: -20px;
}
.bill_oferta {
    font-size: 13px;
    line-height: 12px;
    width: 60%;
    margin: 8px auto;
    color: var(--color-text-second);
}
.bill_oferta a {
    color: var(--color-text-title);
}
.payment_logo_img {
    width: 120px;
    margin: 8px auto;
    display: block;
}
.proceed_load {
    position: relative;
    color:transparent;
}
.proceed_load img {
    display: none;
}
.proceed_load::after {
    position: absolute;
    content: '';
    display:block;
    width: 18px; height:18px;
    top: calc(50% - 10px);
    right: calc(50% - 10px);
    border: 2px solid white;
    border-left: 2px solid transparent;
    border-radius: 50%;
    animation: loadAnim 1.5s linear infinite;
}
.proceed_load_main {
    position: relative;
    color:transparent;
}
.proceed_load_main img {
    display: none;
}
.proceed_load_main::after {
    position: absolute;
    content: '';
    display:block;
    width: 18px; height:18px;
    top: calc(50% - 10px);
    right: calc(50% - 10px);
    border: 2px solid var(--color-main);
    border-left: 2px solid transparent;
    border-radius: 50%;
    animation: loadAnim 1.5s linear infinite;
}
@keyframes loadAnim {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(359deg);
    }
}
.test_save_success {
    position: relative;
    color: transparent;
    pointer-events: none;
    background: var(--color-green) !important;
    border-color: var(--color-green) !important;
}
.test_save_success img {
    display: none;
}
.test_save_success::after {
    position: absolute;
    content: '';
    display: block;
    width: 7px;
    height: 14px;
    top: calc(50% - 9px);
    left: calc(50% - 4px);
    border: solid white;
    border-width: 0 2px 2px 0;
    transform-origin: center;
    animation: testSaveSuccessAnim 800ms ease forwards;
}
@keyframes testSaveSuccessAnim {
    0%   { opacity: 0; transform: rotate(45deg) scale(0.3); }
    25%  { opacity: 1; transform: rotate(45deg) scale(1.15); }
    50%  { opacity: 1; transform: rotate(45deg) scale(1); }
    80%  { opacity: 1; transform: rotate(45deg) scale(1); }
    100% { opacity: 0; transform: rotate(45deg) scale(1); }
}
.switch_body {
    display: inline-block;
    vertical-align: middle;
    width: 46px;
    height: 28px;
    padding: 4px;
    border-radius: 19px;
    margin: 0 8px;
    background: var(--color-light);
    transition: background 0.3s ease-in;
}
.sw_on {
    background: var(--color-main);
}
.sw_on > .switch_button{
    margin-left: 18px;
}
.switch_button {
    width: 20px; height: 20px;
    border-radius: 15px;
    background: #fff;
    transition: margin 0.3s ease-in
}
.switch_handler:checked + label > .switch_body {
    background: var(--color-main);
}
.switch_handler:checked + label > .switch_body > .switch_button {
    margin-left: 18px;
}

/**
* Subscriptions
*/

.sub_style {
    background: aliceblue;
    color: rgb(40, 143, 233);
}
.subscriber_course {
    display: inline-block;
    margin: 4px 6px;
    padding: 4px;
    padding-left: 16px;
    border-radius: 20px;
    border: 2px solid;
}
.s_c_removed {
    background: #f59c87;
    border-color: #a62b2c;
    color: #a62b2c;
    text-decoration: line-through;
    padding: 8px 16px;
}
.sub_course_remove {
    display: inline-block;
    vertical-align: middle;
    width: 28px; height: 28px;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    border: 2px solid;
    border-radius: 14px;
    margin-left: 8px;
    background: #fff;
    cursor:pointer;
    user-select: none;
    transform: rotate(45deg);
}
.sub_course_remove:hover {
    background: #f59c87;
    color: #a62b2c;
    border-color: #a62b2c;
}
.student_res_card_wrapper {
    border-radius: 16px;
    padding: 8px;
}
.sutdent_res_card_img {
    display: inline-block;
    vertical-align: middle;
    width:56px;
    height:56px;
    border: 2px solid var(--color-light);
    border-radius: 50%;
    margin: 8px;
}
.student_res_card_name {
    margin: 4px 0;
}
.student_res_card_desc {
    font-size: 18px;
    margin: 4px 0;
    max-width: 280px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/**
* teacher/school subscription
*/
.sub_price_table_wrapper {
    max-width: 890px;
    width: 100%;
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    margin: auto;
    margin-bottom: 24px;
}
.sub_tbl {
    text-align: left;
    font-size: 0;
}
.sub_tbl_item {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 6px 18px;
    text-align: center;
    font-size: 16px;
}
.sub_tbl_row_name {
    color: var(--color-text-second);
    padding-left: 0;
    font-size: 14px;
}
.sub_tbl_price_before, .sub_tbl_price_before_n {
    font-size: 14px;
    color: var(--color-text-second);
    text-decoration: line-through;
}
.sub_tbl_price::after {
    content: attr(data-cur);
    font-size: 14px;
}
/* .sub_tbl_price_before::after {
    content: " грн.";
    font-size: 13px;
} */
.sub_tbl_item::after {
    content: "";
    display: block;
    position: absolute;
    width: 2px;
    height: 32px;
    top: calc(50% - 16px);
    right: -1px;
    background: var(--color-light);
}
.sub_tbl_row_end::after {
    display: none;
}
.sub_info_bl {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background: var(--color-back);
    padding: 16px;
    margin-right: 16px;
    width: calc(100% - 220px);
    border-radius: 8px;
}
.sub_info_bl::after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: calc(50% - 14px);
    right: -26px;
    border: 14px solid transparent;
    border-left: 14px solid var(--color-back);
}
.sub_info_bl>div {
    max-width: 360px;
    margin: 8px auto;
}
.sub_info_separator {
    height: 2px;
    margin: auto;
    background: var(--color-light);
}
.sub_info_change_bl {
    display: inline-block;
    vertical-align: middle;
    padding: 8px;
    width: 194px;
}
.sub_info_change_bl > .button {
    margin: 8px 0;
    display: block;
}


.sub_amount_input {
    display: inline-block;
    vertical-align: middle;
    min-width: 72px;
    font-size: 32px;
    border: 0;
    width: 92px;
    text-align: center;
    padding: 0;
    min-width:unset;
    text-align: center;
}
.sub_card_wrapp {
    display:inline-block;
    width:292px;
    margin-right:8px;
    text-align:left;
}
.sub_phone_wrapp {
    display:inline-block;
    width:292px;
    text-align:left;
    margin-left: 8px;
}

.sub_price_data_wrapper {
    display: inline-block;
    vertical-align: top;
    width: 172px;
    border: 2px solid #fff;
    border-radius: 8px;
    padding: 8px;
    margin: 8px;
}
.sub_price {
    font-size: 22px;
    font-weight: bold;
    color: var(--color-main);
}
.sub_active_subscription_info_wrapper {
    color: var(--color-text-second);
}
.sub_active_subscription_info_wrapper span {
    color: var(--color-text-def);
}

/**
 * Popup
 */

.popup_bg_transparent {
    display: none;
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background: rgba(0,0,0,.3);
    padding: 32px 8px 76px;
    overflow-y: auto;
    z-index: 112;
}
.popup_container {
    max-width: 960px;
    border-radius: var(--border-r-def);
    padding: 16px;
    margin: auto;
}
.popup_container input[type=text] {
    width: 100%;
}
.b_pay {
    background: #3bb921;
    border-color: green;
}
.pop_content_edit_container {
    font-size: 0;
}
.pop_image_container {
    display: inline-block;
    vertical-align: top;
    width: 220px;
}
.pop_data_container {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 220px);
    padding-left: 16px;
}
.b_del_popup {
    float: right;
}
.edit_c_l {
    width: 280px;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-text-second);
}
.edit_c_r {
    width: calc(100% - 280px);
    padding-left: 16px;
}
.test_edit_nav_wrapp {
    position: sticky;
    width: 100%;
    bottom: -80px;
    background: #fff;
    text-align: center;
    margin-top: 24px;
    padding: 8px 0;
    z-index: 999;
}
.access_setup_wrapper {
    font-size: 16px;
}
.mat_section_setup_wrapper {
    font-size: 16px;
}
.mat_s_s_elem {
    margin-bottom: 8px;
}
.course_access_switch {
    display:none;
}
.course_access_switch:checked + label {
    color: var(--color-main);
    font-weight: bold;
}
.course_date_pick_wrapper {
    display: none;
    position: absolute;
    width: 224px;
    top: 50px;
    left: 50px;
    background: #FFF;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 12px #00000040;
    z-index: 9999;
}
.l_ac_image {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    margin: 8px;
}
.l_ac_txt {
    display: inline-block;
    vertical-align: middle;
}

.pop_slide {
    display: none;
}

/**
* Materials
*/
.add_element_btn {
    width: 64px;
    height: 64px;
    background: #fff;
    margin: 32px auto;
    color: var(--color-main);
    border: 2px solid var(--color-main);
    border-radius: 32px;
    text-align: center;
    font-size: 32px;
    line-height: 60px;
    user-select: none;
}
.course_bg_deff {
    background: linear-gradient(326deg, #A0C6FF, #B5C9FF);
}
.mat_bg_deff {
    background: linear-gradient(326deg, #a9a9ff, #b7b7ff);
}
.material_wrapper {
    width: 100%;
    max-width: 1156px;
    margin: auto;
    font-size: 0;
}
.lesson_wrapper {
    width: 100%;
    max-width: 890px;
    margin: auto;
}
.lw_L {
    max-width: 1156px !important;
}
.material_lesson {
    font-size: 16px;
    border-radius: 16px;
    margin: 0;
    padding: 16px;
}
.material_element{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 264px;
    height: 380px;
    font-size: 16px;
    border-radius: 16px;
    margin: 8px;
    padding: 16px;
    text-decoration: none;
}
.material_element_inner_pop {
    position: absolute;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 8px;
    background: var(--color-pop-back-t);
    border-radius: 16px;
    cursor: default;
}
.mat_el_inn_bg {
    background: linear-gradient(45deg, var(--color-back), #fff);
    border-radius: 8px;
    padding: 16px 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.mat_el_open_nav {
    display: inline-block;
    vertical-align: top;
    width: 38px;
    height: 38px;
    margin: 16px 0;
    padding: 4px;
    border-radius: 8px;
}
.mat_el_open_nav:hover {
    background: rgba(0,0,0,0.04);
}
.material_cover_wrapper {
    width: 100%;
    height: 280px;
    border-radius: 8px;
}
.material_name {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 40px);
    max-height: 48px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    line-height: 24px;
    margin: 16px 0;
    color: var(--color-text-def);
    overflow: hidden;
}
.popup_title_bar {
    font-size: 0;
}
#slide_back_btn {
    display:inline-block;
    vertical-align: top;
    width:34px;
    margin: 14px 6px;
    cursor:pointer;
}
#pop_name {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 48px);
}
.slide_tab_item {
    display: none;
}
.slide_lesson_check {
    display: inline-block;
    vertical-align: middle;
    margin: 16px 8px;
}
.slide_lesson_check:checked + label{
    color: var(--color-main);
}
.slide_material_item {
    display: block;
    background: #fff;
    padding:16px;
    margin: 8px 0;
    border-radius: 8px;
    cursor: pointer;
}
.slide_material_item:nth-child(odd){
    background: var(--color-back);
}
.slide_material_item::before {
    content: "";
    display:inline-block;
    width: 8px; height: 8px;
    border-radius: 4px;
    margin-right: 8px;
    background: transparent;
}
.slide_material_item:hover::before {
    background: var(--color-main);
}
.smi_diss {
    cursor: not-allowed;
    opacity: 0.5;
}
.smi_diss::before {
    content: "";
    display: none;
}
.slide_material_section {
    display: block;
    padding: 24px 0 0 24px;
    font-weight: bold;
    color: var(--color-text-active);
}
.slide_material_lesson_wrapper {
    display: block;
    background: #fff;
    padding: 8px 16px;
    margin: 8px 0;
    border-radius: 8px;
}
.slide_material_lesson_wrapper:nth-child(odd) {
    background: var(--color-back);
}
.slide_material_lesson_item {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 56px);
    margin: 0;
    padding: 8px;
    cursor:pointer;
}
.slide_material_lesson_item:hover {
    color: #5858b5;
}

.slide_component_item {
    margin: 16px 8px;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
}
.slide_component_item:nth-child(odd) {
    background: var(--color-back);
}
.slide_comp_preview {
    padding: 8px;
    cursor:pointer;
}
.sl_comp_item_check {
    display: inline-block;
    vertical-align: middle;
    margin: 8px;
}
.sl_comp_item_label {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 50px);
}
.new_lesson_form_wrapper{
    position:absolute;
    width: 380px;
    top: 32px;
    left: calc(50% - 190px);
    background: #fff;
    border-radius: 8px;
    padding: 16px;
}
.slide_nav_wrapper {
    display: inline-block;
    padding: 4px;
    border-radius: 22px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2) inset;
}
.tab_button {
    display: inline-block;
    background: #FFF;
    font-weight: bold;
    text-align: center;
    color: var(--color-main);
    margin: 0;
    padding: 6px 32px;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    border-radius: 18px;
    user-select: none;
    cursor: pointer;
}
.tab_disabled {
    background: transparent;
    color: var(--color-back);
}
.sl_comp_component_name {
    font-size: 13px;
    color: var(--color-text-second);
    margin: 8px 0 4px;
}
.sl_comp_component_title {
    margin: 8px 0;
}
.sl_comp_component_desc, .sl_comp_component_question {
    max-height: 124px;
    overflow: hidden;
}
.pop_slide_loader {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: transparent;
}
.pop_slide_spiner {
    position: absolute;
    width: 64px;
    height: 64px;
    top: 50%; left: 50%;
    margin-top: -33px;
    margin-left: -33px;
    background: #fff;
    border-radius: 32px;
    padding: 8px;
}
.pop_slide_spin_anim {
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-main);
    border-bottom: 2px solid transparent;
    border-radius: 50%;
    animation: spin_anim 2s linear infinite;
}
@keyframes spin_anim {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
.slide_nav_bottom {
    position: sticky;
    background: white;
    padding-bottom: 16px;
    bottom: -78px;
    text-align: center;
}

/*
* Online lesson
*/
.info_link {
    display:block;
    color:var(--color-main);
    text-decoration:underline;
    font-weight: normal;
    padding:8px;
    margin:0;
    float:right;
    cursor: pointer;
}
.frame_component_wrapper {
    width: 90%;
    max-width: 890px;
    margin: auto;
}
.online_tab_wrapper {
    display: block;
    margin-left: -8px;
    margin-right: -8px;
    font-size: 0;
}
.onl_student_item {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    width: calc(25% - 16px);
    max-width: 340px;
    min-height: 64px;
    border-radius: 8px;
    padding: 8px;
    margin: 8px;
    color: var(--color-text-def);
    text-decoration: none;
    cursor: pointer;
}
.onl_student_item:hover .o_stud_card_name {
    color: #2d9f31;
}
.onl_stud_back {
    background: linear-gradient(45deg,#97eca5, #85e395);
}
.onl_class_back {
    background: linear-gradient(45deg,#f6d276, #f1be72);
}
.o_stud_card_image_wrapper {
    display: inline-block;
    vertical-align: middle;
    width: 46px; height: 46px;
    margin: 6px;
    border: 2px solid #FFF;
    border-radius: 50%;
}
.o_stud_card_data {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    width: calc(100% - 64px);
}
.o_stud_card_eml {
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.o_stud_card_name {
    width:100%;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.onl_class_item {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    width: calc(25% - 16px);
    max-width: 340px;
    min-height: 64px;
    border-radius: 8px;
    padding: 8px;
    margin: 8px;
    color: var(--color-text-def);
    text-decoration: none;
}
.onl_class_item:hover .o_class_name {
    color: #92522c;
}
.o_class_data {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 64px);
}
.o_class_name {
    display: block;
    margin-bottom: 12px;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}
.o_class_amount, .o_class_t_name {
    margin: 4px 0;
    font-size: 13px;
    line-height: 16px;
    font-weight: bold;
    color: var(--color-text-second);
}
.o_class_t_name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.student_select_wrapper {
    display: inline-block;
    margin: 8px;
    padding: 8px 24px;
    border: 2px solid var(--color-light);
    border-radius: 16px;
}
.stud_sel_check {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    margin-right: 8px;
    cursor: pointer;
}
.stud_sel_name {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
}
.online_frame_container {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--color-back);
    z-index: 999;
    display:none;
}
.online_side_nav {
    position: absolute;
    width: 58px;
    max-height: 490px;
    padding: 6px 4px;
    background: white;
    left: 0;
    top: 50%;
    transform: translateY(-245px);
    border-radius: 0 16px 16px 0;
    box-shadow: 0 8px 16px rgba(0,0,0,.23);
}
.lesson_nav_btn {
    margin: 2px 5px;
}
.lesson_nav_exit {
    background: linear-gradient(45deg, #D0D0FE, #E6D6F6);
}
.lesson_nav_exit:hover {
    outline: 2px solid #a6a6c1;
    background: linear-gradient(45deg, #D0D0FE, #E6D6F6);
}
.onl_select_section {
    background: var(--color-back);
    color: var(--color-text-second);
    padding: 6px 12px;
    border-radius: 6px;
    margin: 12px 0 4px;
}
.onl_select_lesson {
    padding: 6px 6px 6px 18px;
    cursor: default;
}
.onl_select_lesson::before {
    content: "";
    display: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d5e0e7;
    margin: 3px 6px 3px -12px;
}
.onl_select_lesson:hover::before {
    display:inline-block;
}
.onl_select_lesson_active::before {
    display:inline-block;
    background: var(--color-text-def);
}

.online_frame {
    display: block;
    width: 100%;
    height: 100%;
    margin:auto;
    border: 0;
}

.online_nav_top {
    position: absolute;
    min-height: 64px;
    width: 100%;
    background: #fff;
    padding: 2px 16px;
    box-shadow: 0 6px 12px rgba(0,0,0,.3);
    font-size: 0;
}
.online_participants {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    width:50%;
}
.online_nav_wrapper {
    display:inline-block;
    vertical-align: top;
    font-size: 16px;
    width: 50%;
    text-align: right;
}
.onl_side_students_wrapper {
    width: 50px;
    overflow: hidden;
    margin: 8px 0;
}
.onl_side_many {
    background: var(--color-back);
    border-radius: 8px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
}
.onl_side_students {
    min-height: 36px;
    max-height: 234px;
    overflow-x: hidden;
    overflow-y: auto;
    /* height: 182px; */
    width: 68px;
}
.onl_participant {
    position: relative;
    display:inline-block;
    vertical-align: top;
    margin: 8px 6px;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    background: #fff;
    border: 2px solid var(--color-light);
    border-radius: 50%;
    color: var(--color-text-second);
    user-select: none;
}

.onl_side_students > .onl_participant_hov:not(.status_active):hover {
    outline: 2px solid #6bb2e2a1;
}
.status_online::after {
    content: "";
    position: absolute;
    display: block;
    width: 8px; height: 8px;
    top: -2px;
    left: 22px;
    border: 2px solid rgb(81, 196, 81);
    border-radius: 50%;
    background: rgb(157, 225, 112);
}
.status_offline::after {
    content: "";
    position: absolute;
    display: block;
    width: 8px; height: 8px;
    top: -2px;
    left: 22px;
    border: 2px solid rgb(245, 203, 96);
    border-radius: 50%;
    background: rgb(241, 220, 115);
}
.status_missing::after {
    content: "";
    position: absolute;
    display: block;
    width: 8px; height: 8px;
    top: -2px;
    left: 22px;
    border: 2px solid rgb(197, 197, 197);
    border-radius: 50%;
    background: rgb(215, 215, 215);
}
.status_active {
    outline: 6px solid #6bb3e245;
}
.wait_for_popup {
    position: fixed;
    width: 240px;
    height: 56px;
    background: white;
    border: 2px solid var(--color-light);
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-120px, -30px);
}

/**
* Online lesson "response"
*/
.rsp_button_new {
    width: 28px;
    height: 28px;
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    background: #d1daf1;
    border: 2px solid #b8c6e9;
    border-radius: 6px;
    cursor:pointer;
}
.rsp_button_ww {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
}
.rsp_button_right {
    position: absolute;
    top: -4px;
    right: 4px;
}
.rsp_button_cs {
    top: 74px;
}
.rsp_btn_img {
    width: 100%;
    opacity: 0.6;
}
.rsp_btn_disabled {
    cursor: not-allowed;
    opacity: 0.3;
}
.rsp_button_active {
    background: #9de170;
    border: 2px solid #51c451;
    outline: 0 solid #39b83957;
    animation: rsp_btn_n 1.5s ease-in-out;
}
@keyframes rsp_btn_n {
    0% {
        background: #d1daf1;
        border: 2px solid #b8c6e9;
    }
    25% {
        background: #9de170;
        border: 2px solid #51c451;
        outline-width: 6px;
    }
    50% {
        outline-width: 2px;
    }
    75% {
        outline-width: 6px;
    }
    100% {
        outline-width: 2px;
        background: #9de170;
        border: 2px solid #51c451;
    }
}
/* @keyframes rsp_btn {
    0% {
        transform: scale(.6);
    }
    25% {
        transform: scale(1.2);
        border-color: green;
    }
    50% {
        transform: scale(.8);
        border-color: transparent;
    }
    75% {
        transform: scale(1.2);
        border-color: green;
    }
    100% {
        transform: scale(.6);
        border-color: transparent;
    }
} */
.rsp_container {
    display:none;
    position: absolute;
    top: calc(100% + 4px);
    background: #fff;
    width: 256px;
    padding: 8px;
    border-radius: 8px;
    border: 2px solid var(--color-light);
    z-index: 25;
}
.rsp_container_s {
    position: absolute;
    top: 0; left: 0;
    width: 60px;
    padding-left: 16px;
    z-index: 25;
}
.rsp_cont_top {
    top: 32px;
    right:0;
}
.rsp_cont_top_cs {
    top: 108px;
    right:0;
}
.rsp_container_visible {
    display: block;
}
.rsp_container_item {
    width: 100%;
    margin-bottom: 8px;
}
.rsp_container_item:last-child{
    margin:0;
}
.rsp_item_avatar {
    display:inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-light);
    border-radius: 12px;
    margin:4px;
    font-size: 10px;
    text-align: center;
    line-height: 20px;
}
.rsp_item_data {
    display: inline-block;
    vertical-align: middle;
    line-height: 22px;
    width: calc(100% - 34px);
}
.rsp_typing {
    position: relative;
}
.rsp_typing_wrapper {
    position: relative;
}
.rsp_typing_anim {
    width: 32px;
    height: 36px;
    position: absolute;
    top: -16px;
}
.rsp_typing_anim_elem {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--color-light);
    border-radius: 3px;
    margin:2px;
}

.user_response_view {
    background: #fff;
    border-radius: 4px;
}
.user_rsp_highlight {
    background:#fff;
    animation: u_rsp_highlight 1.8s ease-in-out;
}
@keyframes u_rsp_highlight {
    25% {
        background: #e4f0db;
    }
    50% {
        background: #f1f6ee;
    }
    75% {
        background: #e4f0db;
    }
    100% {
        background: #fff;
    }
}

.typing_d_0 {
    animation: typing 1s ease-in-out infinite;
}
.typing_d_1 {
    animation: typing 1s ease-in-out .2s infinite;
}
.typing_d_2 {
    animation: typing 1s ease-in-out .4s infinite;
}

@keyframes typing {
    0% {
        transform:translateY(0px);
    }
    20% {
        transform:translateY(5px);
    }
    55% {
        transform:translateY(-2px);
    }
    80% {
        transform:translateY(0px);
    }

}

/**
* Online lesson
*/
.class_data_card {
    display: inline-block;
    vertical-align: top;
    width: calc(60% - 16px);
    margin: 0;
    margin-right: 16px;
}
.class_student_card {
    display: inline-block;
    vertical-align: top;
    min-height:204px;
    width: 40%;
    margin: 0;
}
.edit_card_icon_wrapper {
    position: relative;
    vertical-align: top;
    display: inline-block;
}
.edit_card_icon {
    width: 220px;
    height: 172px;
    background-color: #7373E012;
    background-image: url(/static/course/no_img.svg);
    background-position: center;
    background-size: cover;
    border-radius: var(--border-r-def);
}
.edit_card_content {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 236px);
    margin-left: 16px;
    font-size: 16px;
}

/**
* School
*/
.sch_access_check {
    display: inline-block;
}
.sch_access_lbl {
    display: inline-block;
}
.sch_toogle_wrapper {
    display: inline-block;
    width: 184px;
    border-radius: 16px;
    padding: 8px 24px;
    margin: 0 8px;
    text-align: left;
    text-decoration: none;
    height: 48px;
    overflow: hidden;
    cursor: pointer;
}
.sch_toggle_bg_sch {
    background: linear-gradient(45deg, rgb(255 182 111), rgb(255 143 107));
}
.sch_toggle_bg_teach {
    background: linear-gradient(45deg, rgb(171 213 255), rgb(189 189 246));
}
.sch_t_b {
    display: none;
}
.sch_toggle_bg_sch:hover {
    background: linear-gradient(45deg, rgb(171 213 255), rgb(189 189 246));
}
.sch_toggle_bg_teach:hover {
    background: linear-gradient(45deg, rgb(255 182 111), rgb(255 143 107));
}
.sch_toogle_wrapper:hover > .sch_t_b {
    display: block;
}
.sch_toogle_wrapper:hover > .sch_t_a {
    display: none;
}
.sch_toogle_type {
    font-size: 12px;
    line-height: 14px;
    font-weight: bold;
    color: #00000070;
    margin: 0;
}
.sch_toogle_name {
    margin: 0;
    line-height: 18px;
    color: var(--color-text-def);
}

/**
* Tests
*/
.component_nav {
    height: 62px;
}
.component_nav .button_icon {
    margin: 16px 4px 0 4px;
}
.lesson_view_top_back_tch {
    background: linear-gradient(45deg, #d0d8fe, #d6e1f6);
    margin:-112px -24px -142px -24px;
    height: 256px;
}
#elems_wrapper {
    width: 100%;
    /* max-width: 890px; */
    background: #fff;
    border-radius: 16px;
    padding: 8px;
    margin: auto;
    box-shadow: 0 8px 18px #4d64922b, 0 4px 8px #4070cf2b;
}
.lesson_with_section_wrapper {
    position: relative;
    width: 100%;
    font-size: 0;
}
.lesson_text_cont {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 280px);
    font-size: 16px;
}
.section_name_view {
    font-size: 0px;
    font-weight: bold;
    padding: 22px 8px;
    color: #839ecf;
    border-radius: 8px;
}
.section_name_title {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 156px);
    font-size: 18px;
}
.call_to_section_btn_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.call_to_section_btn {
    color: #46a646;
    width: 156px;
    font-size: 16px;
    margin: 0;
}
.call_to_section_btn:hover + .c_to_sec_title {
    display: block;
}
.c_to_sec_title {
    display: none;
    position: absolute;
    width: 238px;
    top: -48px;
    right: 0px;
    background: #49484b;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    padding: 8px 14px;
    border-radius: 8px;
}
.c_to_sec_title::after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    bottom: -16px;
    right: 22px;
    border: 8px solid transparent;
    border-top: 8px solid #49484b;
}
.lesson_section_cont {
    /* position: relative; */
    display: inline-block;
    vertical-align: top;
    width: 272px;
    font-size: 16px;
    margin-left: 8px;
    background: linear-gradient(to right, #dee5ff, #c9dcff);
    border: 2px solid #c4cef3;
    border-radius: 16px;
    box-shadow: 0 8px 18px #4d64922b, 0 4px 8px #4070cf2b;
}
.ls_cont_inner {
    overflow-y: auto;
    padding: 8px;
}
.ls_cont_inner_hidden {
    width: 100%;
    padding: 8px;
    overflow-y: auto;
}
.lesson_section_fix {
    position: fixed !important;
    top: 16px;
    max-height: 100%;
}
.lesson_section_fix_online_l {
    position: fixed !important;
    top: 14px;
    max-height: 100%;
}
#ls_hide_btn {
    display: none;
    position: absolute;
    width: 42px;
    height: 42px;
    padding: 8px;
    top: 16px;
    left: -56px;
    background:#0b8be5;
    background: linear-gradient(to left, #dee5ff, #c9dcff);
    border: 2px solid #c4cef3;
    border-radius: 8px;
    cursor: pointer;
}
.ls_hide_btn_open {
    border-radius: 8px 0 0 8px !important;
    left: -42px !important;
    border-right: 0px solid transparent !important;
}
#lesson_section_container {
    position: relative;
}
.lesson_section {
    background: #b2dcff00;
    width: 100%;
    min-width: 236px;
    min-height: 56px;
    padding: 8px;
    margin: 8px 0;
    margin-top: 0;
    border-radius: 8px;
    font-size: 0;
    user-select: none;
    -webkit-user-select: none;
}
.lesson_section:hover:not(.l_sec_active) {
    background: #ffffff5c;
}
.l_sec_active {
    background: var(--color-back);
}
.ls_name {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 40px);
    font-size: 16px;
    margin: 8px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ls_nav {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
}
.ls_nav .button {
    margin: 0;
}
.section_student_mark {
    display: none;
}
.stud_mark_visible {
    display: block;
}

.inp_with_options {
    padding: 12px 42px;
}
.inp_with_del {
    padding-right: 42px;
}
.inp_yt {
    padding-left: 124px;
}
.inp_yt_before {
    position: absolute;
    left: 8px;
    bottom: 6px;
    font-size: 12px;
    color: var(--color-text-def);
    user-select: none;
}
.inp_yt::before{
    content: "youtube.com/embed/";
    font-size: 12px;
}
.inp_check {
    position: absolute;
    top: 8px;
    left: 16px;
}
.inp_delete {
    position: absolute;
    width: 22px; height: 22px;
    top: 10px;
    right: 14px;
    border: 2px solid var(--color-light);
    color: var(--color-light);
    border-radius: 8px;
    text-align: center;
    line-height: 16px;
    cursor: pointer;
    user-select: none;
}
.inp_delete:hover {
    color: var(--color-red);
    border-color: var(--color-red);
}

.load_file_container {
    margin: 8px 0 16px;
}
.load_file_nav {
    text-align: center;
    width:100%;
    padding: 8px;
    padding-top: 119px;
}
.load_file_nav .button {
    margin: 0;
}
#courseImgBtn {
    margin: 0;
    line-height: 18px;
}

.component_wrapper {
    width: 100%;
}
.test_wrapper, .block_wrapper, .test_class {
    max-width: 1280px;
    margin: auto;
}
.test_wrapper {
    position: relative;
}
.test_wrapper a,
.block_wrapper a,
.test_class a {
    color: inherit;
    text-decoration: underline;
    border-radius: 3px;
    transition: background 0.15s;
}
.test_wrapper a:hover,
.block_wrapper a:hover,
.test_class a:hover {
    background: rgba(115, 115, 224, 0.15);
    cursor: pointer;
}
.test_score_wrapper {
    position: relative;
    display: inline-block;
    margin: 6px 8px 0 0;
    vertical-align: top;
}
.test_score_desc {
    display: none;
    position: absolute;
    padding: 4px 16px;
    background: linear-gradient(45deg, #D0D0FE, #E6D6F6);
    color: var(--color-main-d);
    border-radius: 8px;
    width: 202px;
    text-align: center;
    left: -8px;
    bottom: 52px;
    border: 2px solid #fff;
    box-shadow: 0 -4px 8px #7683bd47;
}
.test_score_desc::after{
    content: "";
    width: 14px;
    height: 14px;
    background: #D0D0FE;
    transform: rotateZ(45deg);
    display: block;
    position: absolute;
    left: 20px;
    bottom: -5px;
}
.test_score_wrapper:hover > .test_score_desc {
    display: block;
}

.desc_class > p {
    margin: 0;
}
.test_description > p {
    margin: 0;
}
.test_text_optional > p {
    margin: 0;
}
.block_wrapper > ul, ol {
    margin: 0;
}
.question_wrapper_text > ul, ol {
    margin: 0;
}

.audio_elem {
    max-width: 480px;
    width: 94%;
}
.video_container {
    max-width: 560px;
    width: 100%;
    border-radius: 8px;
}
.vid_frame {
    display: block;
    width: 100%;
    max-width: 560px;
    height: 315px;
    border-radius: 8px;
}
.image_single_wrapper {
    margin-bottom: 16px;
}
.single_img_desc {
    margin: 16px 0;
}
.component_img {
    max-width: 480px;
    width: 100%;
    border-radius: 8px;
    margin: auto;
}
.component_img_m {
    display: block;
    max-width: 536px;
    min-height: 48px;
    border-radius: 8px;
    margin: 8px auto;
    background: url(/static/course/no_img.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.component_img_s {
    display: block;
    max-width: 360px;
    min-height: 48px;
    border-radius: 8px;
    margin: 8px 0;
    background: url(/static/course/no_img.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}
.component_img_l {
    display: block;
    max-width: 890px;
    min-height: 48px;
    width: 100%;
    border-radius: 8px;
    margin: 8px auto;
    background: url(/static/course/no_img.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.block_up_btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px; height: 40px;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 8px;
}

.block_up_btn:hover {
    background-color: rgba(0,0,0,0.04);
}
.bl_up_cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    user-select: none;
    -webkit-user-select: none;
}
.block_drag_ico {
    user-select: none;
    -webkit-user-select: none;
}
.drag_disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
.block_move_multiple {
    display: inline-block;
    vertical-align: middle;
    margin: 12px 6px;
}

.selected_block_count_wrapp {
    position: fixed;
    background: linear-gradient(to top, #4a4a7359, #4a4a7300);
    height: 106px;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 3;
}
.sel_blo_container {
    position: fixed;
    width: 312px;
    height: 52px;
    bottom: 32px;
    left: 50%;
    transform: translateX(-156px);
    background: white;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.23);
    padding:  8px;
    border-radius: 26px;
}
.sel_blo_inner {
    display: flex;
    justify-content: space-around;
}
#selected_data {
    font-size: 18px;
    font-weight: bold;
    line-height: 34px;
}
.no_course_img {
    display:block;
    width:512px;
    margin:auto;
    user-select:none;
}

.component_add_copy_nav {
    display: block;
    margin-bottom: 12px;
}
.component_add_separator {
    display: inline-block;
    vertical-align: middle;
    background: #eaeaf3; /*var(--color-back);*/
    height: 2px;
    width: calc(40% - 64px);
}

.lesson_nav_bottom {
    text-align: center;
}

/* === answer history view === */
.hist_ans_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 32px;
    margin-right: 6px;
    margin-left: -4px;
    padding: 0 3px;
    cursor: pointer;
}
.hist_multiple {
    float: left;
    margin: 0 6px;
}
.hist_answer_btn {
    width: 100%;
    height: 8px;
    background: var(--color-test-neutral);
    border-radius: 3px;
}
.hist_ans_correct {
    background: var(--color-test-correct);
}
.hist_ans_wrong {
    background: var(--color-test-wrong);
}
.hist_ans_auto {
    background: var(--color-test-auto);
}
.hist_answer_btn:nth-child(2) {
    margin: 4px 0;
}
.hist_ans_tooltip {
    position: absolute;
    /* display: none; */
    padding: 6px 12px;
    border: 2px solid var(--color-light);
    border-radius: 8px;
    background: white;
    width: 254px;
    bottom: 36px;
    left: -128px;

    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    line-height: 28px !important;
    color: var(--color-text-second);
}
.ans_open {
    /* display: block; */
    opacity: 1;
    visibility: visible;
}
.hist_tooltip_single_answer {
    font-size: 14px;
    line-height: 16px;
}
.hist_tooltip_single_answer:nth-child(2) {
    margin: 6px 0;
    padding: 6px 0;
    border: 1px solid #eaeaea;
    border-left: 0;
    border-right: 0;
}

/**
* === image fullscreen mode
*/
#image_fullscreen_popup_wrapper {
    padding: 8px;
    background: rgba(0,0,0,.62);
}
.img_fullscr_navigation {
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
    text-align: right;
}
.img_full_loader {
    position: fixed;
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
    border: 3px solid white;
    border-top: 3px solid transparent;
    border-radius: 100%;
    animation: loaderAnim 1.5s linear infinite;
}
@keyframes loaderAnim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}
.img_fullscr {
    display: block;
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    margin: auto;
}
.img_full_zoom_in {
    cursor: zoom-in;
}
.img_full_zoom_out {
    max-width: unset;
    max-height: unset;
    cursor: zoom-out;
}
.img_full_pop_button {
    display: inline-block;
    vertical-align: top;
    width: 38px;
    height: 38px;
    margin: 8px;
    cursor: pointer;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}

/**
* === Image carousel ===
*/
.image_carousel_wrapper {
    position: relative;
}
.img_carousel {
    position: relative;
    display: block;
    width: 100%;
    height: 512px;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
}
.img_carousel_elem {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}
.carousel_img {
    display:block;
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    cursor: pointer;
}
.img_carousel_text {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
}
.img_carousel_text_elem {
    display:none;
    width: 100%;
    text-align: center;
}
.carousel_nav_wrapper {
    text-align: center;
}
.carousel_nav_wrapper button {
    display: inline-block;
    margin: 8px;
}
.carousel_slide_count {
    background: rgba(255,255,255,0.4);
    padding: 8px;
    border-radius: 8px;
}
.img_nav_slide_btn {
    position: absolute;
    top: 272px;
    width: 48px;
    height: 48px;
    padding: 12px;
    cursor: pointer;
    z-index: 10;
}
.img_prew {
    left: 0;
}
.img_next {
    right: 0;
}
.img_carousel_text {
    margin: 16px 0;
}
.img_nav_full_screen_btn {
    position: fixed;
    width: 48px;
    height: 48px;
    padding: 12px;
    top: calc(50% - 24px);
    cursor: pointer
}
.slide_num_data_wrapp {
    display: inline-block;
    vertical-align: middle;
}
.slide_num_input {
    display: inline-block;
    vertical-align: middle;
    min-width: unset;
    width: 64px;
    margin: 0;
    padding: 4px 12px;
    margin-left: 12px;
    border-radius: 8px 0 0 8px;
}
.slide_tg_to_btn {
    display: inline-block;
    vertical-align: middle;
    background: var(--color-light);
    border: 2px solid var(--color-light);
    padding: 4px 12px;
    border-radius: 0 8px 8px 0;
    line-height: 24px;
    font-size: 18px;
    margin-left: 0;
    cursor: pointer;
}
.slide_page_nav_wrapper {
    margin: 14px 0;
    text-align: center;
}
.sl_nav_wrapp_full_scr {
    position: absolute;
    margin: 8px 0;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.sl_nav_wrapp_full_scr .slide_num_data_wrapp {
    background: rgba(0,0,0,0.3);
    padding: 4px 8px;
    line-height: 24px;
    color: #fff;
    border-radius: 8px;
}
.img_slide_text_wrapp_full_scr {
    position: fixed;
    width: 100%;
    max-width: 720px;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    text-align: left;
}
#slide_text_switch {
    display: none;
}
#slide_text_switch:checked + label > div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#img_slide_text_container {
    display: block;
    cursor: pointer;
    padding: 8px 16px;
    color: white;
}
#img_slide_text_container:empty {
    display: none;
}
.carousel_synk_nav {
    position: absolute;
    top: 0; left: 0;
}
.glob_synk_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}
.carousel_synk_btn, .carousel_present_btn {
    display: inline-block;
    cursor: pointer;
    margin: 0 8px 0 0;
}
.synk_btn_icon {
    stroke: var(--color-light);
    width: 38px;
    height: 38px;
}
.glob_synk_btn, .glob_present_btn {
    display: inline-block;
    width: 38px;
    height: 38px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    margin: 8px;
}
.glob_synk_btn .synk_btn_icon,
.glob_present_btn .synk_btn_icon {
    stroke: #888;
}
.glob_synk_btn:hover .synk_btn_icon,
.glob_present_btn:hover .synk_btn_icon {
    stroke: #b2b2b2;
}
.synk_allways_on {
    cursor: not-allowed;
}

.carousel_synk_btn[data-synkstate=on] .synk_btn_icon {
    stroke: #9de070;
}
.carousel_synk_btn[data-synkstate=on] .b_t_on {
    display:block;
}
.carousel_synk_btn[data-synkstate=off] .b_t_off {
    display:block;
}
.carousel_present_btn[data-presstate=on] .synk_btn_icon {
    stroke: #9de070;
}
.carousel_present_btn[data-presstate=on] .b_t_on {
    display: block;
}
.carousel_present_btn[data-presstate=off] .b_t_off {
    display: block;
}

.btn_tooltip_container {
    position:relative;
}
.btn_tooltip_container:hover > .btn_tooltip{
    display: block;
}
.btn_tooltip {
    display: none;
    position: absolute;
    background: #49484b;
    padding: 12px 18px;
    color: #fff;
    border-radius: 8px;
    max-width: 248px;
    min-width: 112px;
    text-align: center;
    font-size: 16px;
    line-height: 18px;
    bottom: calc(100% + 6px);
    left: 0;
}
.tooltip_s {
    font-size: 13px;
    line-height: 16px;
}
.b_t_bottom {
    bottom:unset;
    top: 44px;
}
.t_ans_t_c {
    left: 50%;
    transform: translateX(-50%);
}
.btn_tooltip::before {
    position: absolute;
    content: "";
    display: block;
    width: 12px; height:12px;
    background: inherit;
    bottom: -5px;
    left: 20px;
    transform: translateX(-6px) rotate(45deg);
}
.b_t_bottom::before {
    bottom: unset;
    top: -5px;
}
.b_t_on,
.b_t_off {
    display: none;
}

/**
* === Notify ===
*/
.notify_back {
    position:fixed;
    z-index: 9999;
    background: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.notify_wrapper {
    position: fixed;
    width: calc(100% - 16px);
    max-width: 512px;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,.23);
    font-size: 0;
    z-index: 9999;
}
.notify_confirm {
    position: absolute;
    width: calc(100% - 16px);
    max-width: 512px;
    top: 62px;
    left: 50%;
    transform:translateX(-50%);
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 5px 9px rgba(0,0,0,.23);
}
.notify_confirm p {
    margin: 0;
    margin-bottom: 16px;
}
.notify_icon {
    display: inline-block;
    vertical-align: middle;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--color-back);
}
.notify_text {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 42px);
    padding-left: 14px;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
}
.notify_ok {
    border: 2px solid rgb(81, 196, 81);
}
.notify_ok .notify_icon {
    background: url(/static/icon/indicator_input_okay.svg);
}
.notify_warn {
    border: 2px solid rgb(245, 190, 9);
}
.notify_warn .notify_icon{
    background: url(/static/icon/indicator_input_warn.svg);
}
.notify_error {
    border: 2px solid rgb(245, 56, 9);
}
.notify_error .notify_icon {
    background: url(/static/icon/indicator_input_error.svg);
}

/**
* === Storage ===
*/
#page_loader {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top:0; left:0;
    z-index: 999;
    background: #ffffff45;
}
.page_load_spiner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    background: white;
    border-radius: 50%;
    border: 3px solid var(--color-main);
    border-top: 3px solid transparent;
    box-shadow: 0 0 0 5px white;
    animation: page_spin 1.5s infinite;
}
@keyframes page_spin{
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(359deg);
    }
}
.file_group_wrapper {
    border-radius: 16px;
    padding: 8px;
}
.file_group {
    display: inline-block;
    vertical-align: top;
    width: 16.5%;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}
.file_group .b_title_accent {
    margin: 8px 0;
}
.file_group_active {
    border-color: white;
    box-shadow: 0 5px 8px rgba(0,0,0,0.22);
}
.file_group:hover {
    border-color: #ffffff6b;
}
.file_item {
    position: relative;
    font-size: 0;
    background: #fff;
    padding: 8px;
    margin: 8px 0;
    border-radius: 8px;
    opacity: 1;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}
.file_item:hover {
    background: #ebebfe;
}
.file_item_del {
    overflow: hidden;
    margin-top: 8px;
    margin-bottom: 8px;
    background: #ebebfe;
    animation: fileDel 0.8s ease-out;
}
@keyframes fileDel {
    30%{
        opacity: 1;
    }
    100% {
        height: 0px;
        margin-top: 0px;
        margin-bottom: -8px;
        padding: 0 8px;
        opacity: 0;
    }
}
.file_not_in_use {
    font-size: 13px;
    color: var(--color-text-second);
    margin: 0;
    user-select: none;
}
.file_not_in_use:empty {
    display: none;
}
.file_name_wrapper {
    display:inline-block;
    vertical-align: middle;
    width: calc(100% - 200px);
    font-size: 16px;
}
.file_name {
    margin: 2px 0;
    line-height: 22px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.file_size, .file_upl_date {
    display:inline-block;
    vertical-align: middle;
    width: 78px;
    font-size: 14px;
    color: var(--color-text-second);
    text-align: left;
}
.file_upl_date {
    font-size: 14px;
    text-align: center;
}
.file_del_btn {
    position: absolute;
    width: 38px; height: 38px;
    background: white;
    top: 8px; right: 8px;
    border-radius: 8px;
    border: 2px solid transparent;
    margin: 0;
    cursor: pointer;
}
.file_del_btn:hover {
    border-color: #e3143a44;
}
.file_del_btn img {
    width: 86%;
    margin: 2px;
}
#file_pop_data {
    min-height: 72px;
    margin: 24px 0;
}
#file_pop_fname {
    text-overflow: ellipsis;
    overflow: hidden;
}
.img_preview {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 580px;
    border-radius: 8px;
}
#files_pagination {
    text-align: center;
    margin: 24px 0;
}
.pgn_button {
    display: inline-block;
    width: 42px;
    height: 42px;
    margin: 6px 8px;
    padding: 8px;
    background: #fff;
    color: var(--color-text-second);
    border: 2px solid var(--color-back);
    border-radius: 8px;
    cursor: pointer;
}
.pgn_active {
    color: var(--color-text-active);
    border: 2px solid var(--color-main);
}
.pgn_input {
    background: transparent;
    min-width: unset;
    width: 52px;
    height: 36px;
    padding: 6px;
    text-align: center;
}

.stor_card_wrapper {
    font-size: 0;
    text-align: center;
}
.stor_card {
    display: inline-block;
    font-size: 16px;
    text-align: center;
    background: #ffffff78;
    width: calc(33% - 16px);
    margin: 8px;
    padding: 24px 8px;
    border: 2px solid var(--color-light);
    border-radius: 8px;
    user-select: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.stor_card:hover {
    transform: translateY(-3px);
    border-color: var(--color-main);
}
.stor_card_price_before {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-second);
    text-decoration: line-through;
}
.stor_c_current {
    transform: translateY(-3px);
    border-bottom: 6px solid var(--color-light);
}
.stor_c_active {
    transform: translateY(-3px);
    border-color: var(--color-main);
    border-bottom: 6px solid var(--color-main);
}
.stor_c_disable {
    opacity: 0.5;
    cursor: not-allowed;
}
.stor_card_name {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
}
.stor_card_size, .stor_plan_price {
    color: var(--color-text-active);
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 3px 6px #7575f76b;
}
.stor_plan_price_before {
    color: var(--color-text-second);
    font-size: 18px;
    text-decoration: line-through;
}
.stor_card_size span {
    font-size: 14px;
}
.stor_discount {
    font-size: 14px;
    line-height: 18px;
    text-decoration: line-through;
    color: var(--color-text-second);
}

.stor_duration_wrapper {
    font-size: 0;
    text-align: center;
}
.stor_block_title {
    font-size: 16px;
    margin: 22px 0 8px;
    color: var(--color-text-second);
}
.stor_duration_item {
    display: inline-block;
    font-size: 16px;
}
.stor_duration_label {
    display: block;
    padding: 12px 24px;
    margin: 8px;
    background: var(--color-back);
    cursor: pointer;
    border-radius: 8px;
    border:2px solid var(--color-back);
}
.stor_duration_label:hover {
    border-color: var(--color-light);
}
.stor_duration_item input{
    display: none;
}
.stor_duration_item input:checked + label {
    border-color: var(--color-main);
}
.stor_info_item {
    font-size: 14px;
    line-height: 18px;
    color: var(--color-text-second);
}
.stor_info_item::before {
    content: "";
    display: inline-block;
    width: 5px;
    height:2px;
    background: var(--color-text-second);
    margin: 3px 6px 3px -10px;
}
.stor_info_block {
    background: white;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 32px;
}
.stor_message {
    padding: 8px 16px;
    border: 2px solid transparent;
    border-radius: 8px;
    margin-bottom: 24px;
}
.msg_warn {
    background: rgb(255, 183, 49);
    border-color: orange;
}
.msg_err {
    background: #ff2c48;
    border-color: rgb(208, 11, 70);
}
.stor_message p{
    display: inline-block;
    font-size: 16px;
    line-height: 18px;
    margin: 8px;
    margin-left: 0;
}
.stor_message .button {
    margin-left: 0;
}


/**
* === User file
*/
.uf_mic_icon {
    width: 64px;
    height: 64px;
    margin: 20px;
}
.uf_mic_icon_record {
    animation: mic_anim 1.2s ease-in-out infinite;
}
@keyframes mic_anim {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}
.uf_del_btn {
    display: inline-block;
    background: white;
    font-size: 14px;
    color: #f15555;
    border: 2px solid;
    border-radius: 8px;
    padding: 4px 12px;
    cursor: pointer;
    user-select: none;
}
.uf_rec_audio_img_wrapper {
    width: 120px;
    height: 120px;
    border: 7px solid rgb(187, 228, 154);
    border-radius: 50%;
    margin: 32px auto;
}
#uf_audio_rec_container {
    padding: 8px 0;
}
#uf_audio_rec_container audio {
    margin: auto;
}
.audio_time {
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    margin: 0;
}
.uf_rec_nav {
    margin-top: 24px;
}

.uf_img_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 264px;
    height: 164px;
    margin: 8px;
    border-radius: 8px;
    overflow: hidden;
}
.uf_audio_wrapper {
    padding: 8px 0;
}
.uf_audio {
    margin: 8px 0;
    width: 100%;
    max-width: 520px;
}
.uf_img {
    width: 100%;
    cursor: pointer;
}
.uf_img_delete {
    position: absolute;
    bottom: 8px;
    left: 8px;
}

/*
* === chat block ===
*/
.chat_beta {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    color: var(--color-light);
    background: white;
    line-height: 16px;
    font-size: 12px;
    text-align: center;
}
#chat_main_open {
    position: fixed;
    width: 48px;
    height: 48px;
    right: 16px;
    bottom: 16px;
    background: var(--color-main);
    padding: 9px;
    border-radius: 24px;
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(54, 16, 124, 0.421);
    z-index: 1210;
}
.chat_m_o_msgs_icon {
    display: block;
}
.chat_m_o_msgs_icon::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 34px;
    width: 14px;
    height: 14px;
    background: var(--color-red);
    border: 2px solid #b51c1c;
    border-radius: 50%;
}
#chat_main_open img {
    width: 100%;
}
#chat_main_close_second {
    display: none;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.chat_container {
    position: fixed;
    display: block;
    width: 320px;
    height: 448px;
    bottom: 72px;
    right: 16px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.27);
    overflow: hidden;
    z-index: 1200;
}
#chat_conversation_scr {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 8px;
    background: white;
    z-index: 2;
}
#chat_message_scr {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 8px;
    background: white;
    z-index: 1;
}
#chat_search_conversation_list {
    background: var(--color-back);
    width: 100%;
    height: 334px;
    top: 108px;
    left: 0;
    padding: 8px;
    border-radius: 8px;
    overflow-y: auto;
}
#chat_conversation_content {
    position: absolute;
    width: 100%;
    height: calc(100% - 58px);
    top: 58px;
    left: 0;
    overflow-y: auto;
}
.chat_top_nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 52px;
    border-bottom: 2px solid var(--color-light);
}
.chat_messages_wrapper {
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
    height: calc(100% - 106px);
    padding: 8px;
    z-index: 1;
    overflow-y: auto;
}
.chat_show_new_msgs {
    display: none;
    position: absolute;
    background: #eee;
    font-size: 12px;
    line-height: 16px;
    padding: 6px 12px;
    text-align: center;
    width: 142px;
    bottom: 72px;
    left: calc(50% - 71px);
    border-radius: 8px;
    border: 1px solid var(--color-light);
    cursor: pointer;
    z-index: 2;
}
.chat_message_wrapper {
    margin: 12px 0;
}
.chat_input_wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 56px;
    padding: 8px;
    z-index: 2;
}
.msg_wrap_my {
    text-align: right;
}
.chat_msg_text {
    display: inline-block;
    background: var(--color-back);
    border-radius: 8px 8px 8px 2px;
    padding: 4px 12px;
    color: var(--color-text-def);
    max-width: 90%;
    user-select:none;
    -webkit-user-select: none;
}
.chat_msg_reply {
    background: white;
    border-radius: 8px;
    color: var(--color-text-second);
    font-size: 12px;
    margin-top: 6px;
    padding: 4px;
    white-space: nowrap;
    overflow: hidden;
}
.ch_gr_repl {
    padding-left: 52px;
}
.msg_my {
    background: var(--color-main);
    border-radius: 8px 8px 2px 8px;
    color: #fff;
}
.msg_del {
    background: var(--color-light);
    color: var(--color-text-second);
    font-size: 12px;
    line-height: 16px;
}
.msg_group {
    max-width: calc(100% - 42px);
}
.chat_msg_t {
    text-align: left;
}
.chat_msg_time {
    font-size: 12px;
    margin: 0;
    opacity: 0.6;
}
.chat_msg_author_name {
    font-size: 12px;
    margin: 0;
    opacity: 0.6;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#chat_to_conv_btn {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin: 8px;
}
#chat_to_conv_name {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 96px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.chat_no_conversation {
    width: 100%;
    padding: 32px 0 0;
}
.chat_no_conv_img_wrap {
    width: 86px;
    height: 86px;
    background: var(--color-light);
    border-radius: 50%;
    padding: 16px;
    margin: auto;
}
.chat_no_conv_img {
    width: 100%;
    height: 100%;
    background: url(/static/icon/chat_open.svg);
    background-repeat: no-repeat;
    background-size: cover;
}
.chat_no_conversation p {
    width: 100%;
    font-size: 14px;
    color: var(--color-text-second);
    text-align: center;
}

.chat_conversation {
    margin: 8px 0;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
}
.chat_conv_separator {
    display:block;
    width: 80%;
    height: 1px;
    background: var(--color-light);
    margin: auto;
}
.chat_conversation:hover {
    background: var(--color-back);
}
.chat_no_search_result {
    font-size: 14px;
    color: var(--color-text-second);
    text-align: center;
    padding: 16px 0;
}
.chat_conversation_search {
    background: var(--color-back);
    margin: 8px 0;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
}
.chat_conversation_search:hover {
    background: white;
}
.chat_conversation_text {
    font-size: 14px;
    color: var(--color-text-second);
    margin: 0;
}
.chat_search_name {
    margin: 0;
}
.chat_search_email {
    font-size: 14px;
    line-height: 16px;
    color: var(--color-text-second);
    margin: 0;
}

.chat_search {
    position: relative;
    display: inline-block;
    width: 100%;
}
#chat_search_inp {
    display: inline-block;
    vertical-align: middle;
    padding: 4px 12px;
    margin: 8px 0;
    width: calc(100% - 42px);
    border-radius: 22px;
}
#chat_search_btn, #chat_send_btn {
    display: inline-block;
    vertical-align: middle;
    width: 34px;
    height: 34px;
    padding: 5px;
    background:var(--color-main);
    border-radius: 18px;
    cursor: pointer;
}
#chat_search_close_btn {
    width: 142px;
    padding: 9px 12px;
    margin: 0 auto 8px;
    color: var(--color-text-second);
    font-size: 14px;
    line-height: 18px;
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
}

#chat_to_exit_conv {
    display: none;
    background: var(--color-main);
    vertical-align: middle;
    width: 32px;
    height: 32px;
    padding: 4px;
    text-align: center;
    margin-right: 8px;
    border-radius: 16px;
    cursor: pointer;
}
.chat_conversation_img {
    display:inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--color-back);
    border: 2px solid var(--color-light);
}
.chat_conversation_tw {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 40px);
}
.chat_conv_msg_count {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    margin-bottom: -8px;
    line-height: 14px;
}
.chat_conv_msg_count:empty {
    display:none;
}
.chat_conversation_name {
    display: inline-block;
}

.chat_message_nav_bg {
    position: absolute;
    top: 0; left: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.23);
    z-index: 10;
}
.chat_message_nav {
    width: 90%;
    background: white;
    border-radius: 8px;
    padding: 8px;
    margin: auto;
    box-shadow: 0 5px 8px rgba(0,0,0,.3);
}
.chat_msg_edit_btn {
    padding: 8px 16px;
    color: var(--color-text-active);
    background: white;
    border-radius: 8px;
    line-height: 22px;
    user-select: none;
    cursor: pointer;
}
.chat_msg_edit_btn:hover {
    background: var(--color-back);
}
.chat_copy_response {
    display: none;
    width: 90%;
    background: white;
    border-radius: 8px;
    padding: 8px;
    margin: auto;
    box-shadow: 0 5px 8px rgba(0,0,0,.3);
}
.chat_copy_response span{
    font-size: 28px;
    vertical-align: middle;
}
#chat_msg_copy_input {
    display: block;
    height: 10px;
    margin: 0;
    padding: 0;
    opacity: 0;
}

#chat_input_view {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 38px);
    margin: 0;
    padding: 4px 16px;
    border-radius: 22px;
    min-height: 36px;
    max-height: 78px;
    border: 2px solid var(--color-light);
    overflow-y: auto;
}

#message_hint_wrapper {
    display: block;
    background: var(--color-back);
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 2px solid var(--color-light);
}
.chat_message_hint_container {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 46px);
}
#message_hint_text {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 54px);
    font-size: 12px;
}
#hint_text_desc {
    font-size: 12px;
    color: var(--color-text-second);
}
.message_hint_close {
    display: inline-block;
    vertical-align: top;
    width: 32px;
    height: 32px;
    background: var(--color-back);
    color: white;
    margin-left: 8px;
    padding: 4px;
    text-align: center;
    user-select: none;
    cursor: pointer;
    border-radius: 50px;
}
#chat_loader_view {
    display: none;
    flex-direction: row;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: rgba(255,255,255,0.4);
    z-index: 5;
}
.ch_load_circle {
    width: 22px;
    height: 22px;
    background: white;
    border: 2px solid var(--color-main);
    border-right: 2px solid transparent;
    border-radius: 50%;
    margin: auto;
    box-shadow: 0px 0px 0 2px white;
    animation: loaderAnim 1.2s linear infinite;
}
.chat_get_prev_msg {
    display: block;
    width: 212px;
    text-align: center;
    padding: 8px 16px;
    color: var(--color-main-d);
    background: white;
    border: 2px solid;
    margin: 8px auto 24px;
    border-radius: 8px;
    line-height: 18px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.chat_date_info {
    margin: 16px auto;
    width: 120px;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-second);
}

/**
* === folder ===
*/
.folder_edit_wrapper {
    font-size: 0;
}
.folder_edit_wrapper h3 {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 120px);
}
.folder_edit_nav {
    width: 120px;
    display: inline-block;
    vertical-align: middle;
    text-align: right;
}
.folder_edit_nav .button {
    margin: 0 8px;
}
.white_mat_bg {
    background:#ffffff77;
    border-radius:16px;
    border: 2px solid #fff;
    padding: 16px;
    margin: 16px 0;
    font-size: 16px;
}
.white_mat_bg_content {
    width: 1120px;
    margin: auto;
}
.folder_card {
    position: relative;
    display: inline-block;
    width: 264px;
    margin:8px;
    margin-top: 16px;
    padding:16px;
    background:#fde177;
    background: linear-gradient(45deg, #FFDC57, #FFCF52);
    border: 2px solid #FEC01E;
    border-radius: 16px;
}
.folder_card::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 5%;
    display: block;
    width: 90%;
    height: 12px;
    background: #F9E0B0;
    border-radius: 12px 12px 0 0;
}
.folder_icon {
    display: inline-block;
    vertical-align: middle;
    width: 38px;
    height: 38px;
    border-radius: 23px;
    background: #f9f2d9;
    margin-right: 8px;
}
.folder_icon img {
    margin: 7px;
}
.folder_name {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 56px);
    color: var(--color-text-def);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mv_to_radio {
    display: inline-block;
    vertical-align: middle;
    margin: 12px;
    margin-right: 6px;
}
.mv_to_radio:checked + label {
    color: var(--color-text-active);
}
.mv_to_label {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: calc(100% - 52px);
    cursor: pointer;
    margin: 12px 0;
    color: var(--color-text-second);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mv_to_label:hover {
    color: var(--color-text-def);
}

/**
* === material navigation ===
*/
.material_navigation {
    width: 100%;
    min-height: 64px;
    padding: 16px;
    border-radius: 16px;
    margin: 16px 0;
    font-size: 0;
}
.material_navigation .b_white {
    color: var(--color-light);
    border-color: var(--color-light);
}
.mat_nav_left, .mat_nav_right, .mat_nav_left_stud, .mat_nav_right_stud {
    display: inline-block;
    vertical-align: middle;
}
.mat_nav_left {
    width: 364px;
}
.mat_nav_left_stud {
    width: 294px;
}
.mat_nav_right {
    width: calc(100% - 364px);
    text-align: right;
}
.mat_nav_right_stud {
    width: calc(100% - 294px);
    text-align: right;
}
.material_nav_sort_radio {
    display: none;
}
.material_nav_sort_radio:checked + span > label > img {
    opacity: 1;
}
.mat_nav_right input[type=text] {
    display: inline-block;
    margin-left: 16px;
}
.material_search_input_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
#material_nav_search_inp {
    padding: 4px 12px;
    line-height: 24px;
    margin: 8px 0;
    background:#ffffff29;
    color: #fff;
    border-radius: 8px 0 0 8px;
}
#material_nav_search_btn {
    border-radius: 0 8px 8px 0;
    margin-left: 0;
    vertical-align: middle;
    line-height: 20px;
    border-left: 0;
}
#material_nav_search_btn img {
    opacity: 0.7;
}
#material_nav_search_btn:hover img {
    opacity: 1;
}
#material_nav_search_clear {
    position: absolute;
    display: none;
    width: 32px;
    height: 32px;
    top: calc(50% - 16px);
    right: 2px;
    font-size: 22px;
    text-align: center;
    padding: 2px;
    user-select: none;
    cursor: pointer;
}
.mat_search_cl_plus {
    display: block;
    color: var(--color-light);
    transform: rotateZ(45deg);
}
.mat_search_cl_plus:hover {
    color: #fff;
}
.material_nav_sort_lbl {
    display: inline-block;
    margin: 0px;
    font-size: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #999eae;
    cursor: pointer;
    vertical-align: middle;
}
.material_nav_sort_lbl img {
    opacity: 0.7;
}
.class_filter_active {
    background: #434b7a;
}
.class_filter_active img {
    opacity: 1;
}
.material_nav_sort_lbl:hover {
    background: #434b7a;
}
.material_nav_separator {
    display: inline-block;
    vertical-align: middle;
    height: 22px;
    width: 2px;
    background: var(--color-light);
    opacity: 0.4;
    margin: 0 8px;
}

.pop_button_wrapper {
    margin-top: 16px;
}
.pop_button_wrapper .button:nth-child(1) {
    margin-left: 0;
}
.pop_up_back_transparent {
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: var(--color-pop-back-t);
    z-index:111;
    overflow-y: auto;
}
.pop_up_content {
    display: block;
    background:#fff;
    margin: 62px auto;
    padding: 16px;
    border-radius: 16px;
    font-size: 16px;
    box-shadow: 0 4px 8px var(--color-pop-back-t);
}
.pop_S {
    width: 100%;
    max-width: 512px;
}
.pop_M {
    width: 100%;
    max-width: 1140px;
}
.pop_up_content .w_full{
    margin-left: 0;
    margin-right: 0;
}
.pop_up_content h3 {
    margin-top: 0;
}

.cl_f_inp_ch {
    display: inline-block;
    vertical-align: middle;
    margin: 12px 6px;
}
.cl_f_inp_lbl {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 36px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl_f_inp_lbl:hover {
    color: var(--color-text-active);
}
.cl_f_inp_ch:checked + label {
    color: var(--color-text-active);
}

.class_filter_wrapper label {
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

/* === library style === */
/* === paid material style === */
.lib_item_wrapper {
    font-size: 0;
}
.paid_material_card {
    display: inline-block;
    width: 25%;
    font-size: 16px;
    padding: 8px;
    cursor: pointer;
}

.paid_mat_info_wrapper {
    font-size: 0;
}
.pop_mat_img {
    display: inline-block;
    width: 280px;
    vertical-align: top;
    font-size: 16px;
}
.pop_mat_data {
    display: inline-block;
    width: calc(100% - 280px);
    vertical-align: top;
    font-size: 16px;
}
.pop_mat_title {
    font-size: 22px;
    color: var(--color-text-title);
}
.pop_mat_dop_info {
    margin-top: 16px;
}
.pop_mat_dop_text {
    color: var(--color-text-second);
    font-size: 14px;
    margin: 0;
}
.pop_paid_buy_wrapper .button:first-child {
    margin-left: 0;
}
.paid_pop_agreament_text {
    font-size: 14px;
    color: var(--color-text-second);
}
#paid_frame {
    display:none;
    width: 100%;
    border-radius: 8px;
}
.private_view_block {
    filter: blur(6px);
    user-select: none;
    -webkit-user-select: none;
}
.private_block {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/** share material link style */
#selected_material_name {
    font-size: 18px;
    color: var(--color-text-title);
    margin-bottom: 0;
}
#selected_material_name:empty {
    margin: 0;
}
.sh_l_select_mat_btns_wrapp>.button:first-child {
    margin-left: 0;
}
.paid_pop_agreament_text {
    font-size: 14px;
    color: var(--color-text-second);
}
.paid_pop_agreament_text a {
    color: inherit;
}
.share_link_wrapper {
    font-size: 0;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
}
.share_link_wrapper:hover {
    background: white;
}
.share_link_wrapper .button {
    margin: 0 0 0 6px;
}
.share_link_wrapper * {
    font-size: 16px;
}
.sh_l_img {
    width: 42px;
    margin-right: 6px;
    border-radius: 8px;
}
.sh_l_title {
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text-def);
    text-decoration: none;
    margin: 0;
}
.sh_l_link {
    display:inline-block;
    /* min-width: 316px; */
    /* width: calc(100% - 336px); */
    width: calc(100% - 372px);
    cursor: default;
}
.share_link {
    position: relative;
    display: block;
    width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    margin-bottom: -6px;
}
.sh_l_link_copied_sign::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 22px;
    height: 22px;
    padding: 0 4px;
    margin-left: 6px;
    border-radius: 4px;
    background: url(/static/icon/btn/copy_link_sign.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
}
.sh_l_copy_count {
    display:inline-block;
    width: 152px;
    color: var(--color-text-second);
}
.sh_l_active_switch {
    display: inline-block;
    /* width: 132px; */
    width: 168px;
}
.sh_l_switch_label_green {
    color: var(--color-green);
}
.sh_l_switch_label_orange {
    color: var(--color-orange);
}
.sh_l_switch_label_red {
    color: var(--color-red);
}

/** share link (share page) */
.share_card_wrapper {
    position: absolute;
    width: 512px;
    top: 64px;
    left: calc(50% - 256px);
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22), 0 3px 4px rgba(0, 0, 0, 0.12);
}
.share_card_img {
    width: 128px;
    border-radius: 8px;
    margin: auto;
    max-height: 128px;
}
.share_card_title {
    font-size: 22px;
    color: var(--color-text-title);
    margin: 8px 0;
}
.share_card_description:empty {
    display: none;
}
.share_card_warn {
    background: #fede3c;
    color: #896016;
    padding: 8px 16px;
    border-radius: 8px;
}
.share_card_profile_title {
    display: inline-block;
    width: 148px;
}
.share_card_label {
    display: inline-block;
    margin: 4px 0;
}
.share_copy_message {
    display: none;
    margin: 16px 0;
    padding: 8px;
    background: var(--color-back);
    border-radius: 8px;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.12);
}
.on_material_share_info {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 5;
}
.on_lesson_share_info {
    position: absolute;
    top: 0px;
    right: 8px;
    z-index: 5;
    font-size: 16px;
}

/** canvas style */
.canvas_bg_transparent {
    display: none;
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background: #63697f66; /* rgba(0,0,0,.3); */
    backdrop-filter: blur(8px);
    overflow-y: auto;
    z-index: 112;
}
.canvas_popup_container {
    max-width: 920px;
    margin: 16px auto;
    padding: 0px
}
canvas, .canv_nav_wrapper {
    user-select: none;
    -webkit-user-select: none;
}
#main_canvas {
    border-radius: 8px;
    /*border: 2px solid var(--color-back);*/
}
.canvas_view {
    width: 100%;
    max-width: 720px;
}
.canv_board_wrapper {
    position: absolute;
    width: 920px;
    height: 720px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#canv_instrument_nav {
    position: fixed;
    width: 320px;
    height: 50px;
    background: white;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    z-index: 2;
}
.canv_nav_section {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
}
.undo_section {
    padding-left: 12px;
}
.canv_nav_separator {
    display: inline-block;
    vertical-align: middle;
    width: 2px;
    height: 18px;
    background: lightgray;
    margin: 6px 10px;
}
.canv_btn {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 6px 0;
    padding: 6px;
    border-radius: 8px;
}
.canv_btn:hover {
    background: var(--color-back);
}
.canv_btn img {
    width: 24px;
}
.canv_btn_active {
    background: #d1d9f2 !important;
}
.canv_color_select_label {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e6d060;
}
#canv_text_editable {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid var(--canv-text-edit-border);
    display: none;
    min-width: 80px;
    padding: 0px 2px;
    min-height: 26px;
    border-radius: 0;
    line-height: 1.4;
    word-wrap: normal;
}
#canv_text_editable * {
    font-size: inherit !important;
    line-height: inherit !important;
}

.canv_text_edit_view {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid transparent;
    user-select: none;
    line-height: 1.4;
    padding: 0 2px;
    word-wrap: normal;
}
.canv_text_edit_view:hover {
    border: 1px solid var(--canv-text-edit-border);
}
.canv_text_edit_view * {
    padding: 0;
    margin: 0;
    line-height: inherit;
    font-size: inherit;
}
.ctve_wrapper {
    display: none;
    position: absolute;
    background: white;
    height: 28px;
    padding: 1px 8px;
    width: 80px;
    border-radius: 8px;
    font-size: 0;
    box-shadow: 0 6px 22px rgba(0,0,0,0.15);
}
.ctev_proportion {
    display: none;
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: relative;
}
.ctev_proportion_img {
    display: block;
    user-select: none;
    -webkit-user-select: none;
}
.ctev_proportion_img_cover {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -2px;
    left: -2px;
}
.ctev_size {
    display: inline-block;
    vertical-align: top;
    width: 26px;
    height: 26px;
    border: 0;
    font-size: 0;
    margin: 0 3px;
    cursor: default;
}
.ctev_size_img {
    display: inline-block;
    vertical-align: middle;
    width: 7px;
}
.ctev_size_value {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    text-align: center;
    font-size: 14px;
    margin: 0;
}
.ctev_color {
    display: inline-block;
    vertical-align: top;
    border: 0;
    margin: 0 3px;
}
.ctev_color_value {
    width: 20px;
    height: 20px;
    background: blue;
    border-radius: 50%;
    margin: 3px;
}
.ctev_proportion {
    position: absolute;
}
#canv_text_toolbar {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
.canv_select_pop_wrapper {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    z-index: 2;
}
.canv_color_pop_back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: transparent;
}
.canv_option_pop {
    position: absolute;
    top:0; left: 0;
    padding: 6px 8px;
    background: white;
    border: 2px solid var(--color-back);
    border-radius: 8px;
    font-size: 0;
}
.canv_option_pop::after {
    position: absolute;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid var(--color-back);
    bottom: -8px;
    left: calc(50% - 8px);
    transform: rotate(45deg);
    border-top: 0;
    border-left: 0;
}
.pop_color {
    width: 282px;
    height: 56px;
}
.pop_size {
    width: 282px;
    height: 56px;
}

.canv_color_input {
    display: inline-block;
    min-width: unset;
    width: 0;
    opacity: 0;
    visibility: hidden;
    margin: 0;
    padding: 0;
    border: 0;
}
.canv_color_select, .canv_color_indicator, .canv_size_select {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 8px 3px;
    border-radius: 50px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
}
.canv_color_select_inner {
    width: 20px;
    height: 20px;
    background: inherit;
    border: 2px solid transparent;
    margin: 3px;
    border-radius: 50%;
}
.ccs_active_color > .canv_color_select_inner {
    border-color: white;
}
.ccs_active_size::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: gray;
    border-radius: 3px;
    margin-left: 10px;
}
.canv_color_wheel {
    display: inline-block;
    vertical-align: top;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 7px 3px;
    cursor: pointer;
}
.canv_color_wheel_inner {
    position: relative;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid transparent;
    margin: -24px 4px;
    border-radius: 50%;
}
.size_indicator_wrapper {
    width: 36px;
    height: 36px;
    font-size: 14px;
    margin: 6px 0;
    padding: 6px 2px;
}
.draw_size_img {
    display: inline-block;
    vertical-align: middle;
}
#dsi_text {
    display: none;
}
.dsi_paint {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    text-align: center;
}

/* canvas start drawing buttons */
.start_draw_on_img, .start_draw_on_carousel {
    display: inline-block;
    vertical-align: top;
    width: 42px;
    height: 42px;
    margin: 8px;
    background-color: white;
    background-image: url(/static/icon/canvas/canvas_draw.svg);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
}
.delete_wb_image, .delete_wb_carousel {
    display: inline-block;
    vertical-align: top;
    width: 42px;
    height: 42px;
    margin: 8px 0;
    background-color: white;
    background-image: url(/static/icon/canvas/canvas_delete.svg);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
}
.draw_wb_absolute_tooltip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
}
.draw_wb_absolute_tooltip .start_draw_on_carousel {
    margin: 8px 0;
}
.del_wb_absolute_tooltip {
    position: absolute;
    top: 8px;
    left: 58px;
    z-index: 5;
}
.start_draw_on_img:hover,
.start_draw_on_carousel:hover,
.delete_wb_image:hover,
.delete_wb_carousel:hover {
    background-color: var(--color-back);
}

/* canvas loader */
.canvas_loader_wrapper {
    position:fixed;
    top:0; left:0;
    width:100%;
    height:100%;
    background: transparent;
    z-index:1000;
}
.canvas_loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    background: white;
    border-radius: 50%;
    padding: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22), 0 3px 4px rgba(0, 0, 0, 0.12);
}
.canvas_loader_inner {
    width: 56px;
    height: 56px;
    border: 3px solid var(--color-main);
    border-right: 3px solid transparent;
    border-radius: 50%;
    animation: canvas_loader_rotate 1.5s linear infinite;
}
@keyframes canvas_loader_rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* course access setting */
.course_access_warning {
    background: #ffd925;
    border: 2px solid #f0b11d;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
}
.course_access_warn_img {
    width: 32px;
    height: 32px;
    float: left;
    margin-right: 8px;
    border: 2px solid white;
    border-radius: 50%;
}
.c_access_radio_wrapper {
    margin: 8px 0;
}
.c_access_radio {
    display: inline-block;
    vertical-align: middle;
    margin: 8px;
    margin-left: 18px;
}
.c_access_radio_label {
    display: inline-block;
    vertical-align: middle;
    color: var(--color-text-second);
}
.c_access_radio:checked + .c_access_radio_label {
    color: var(--color-text-title);
    font-weight: bold;
}

/* event style */
.events_list {
    font-size: 0;
}
.event_card {
    display: inline-block;
    font-size: 16px;
    width: calc(33% - 16px);
    padding: 16px 8px;
    margin: 8px;
    border-radius: 8px;
    cursor: default;
}
.event_card:hover {
    transform: translateY(-2px);
}
.event_title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card_subscriber_amount {
    font-weight: bold;
}
.event_card_date {
    font-size: 14px;
}
.student_event_card_date {
    display: inline-block;
}
.card_data_wrapper {
    display: inline-block;
    width: calc(100% - 62px);
}
.event_card_delete_wrapper {
    display: inline-block;
    width: 56px;
}
.student_event_subscribe, .student_event_unsubscribe {
    display: inline-block;
    float: right;
}

#participant_wrapper {
    background: var(--color-back);
    border-radius: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}
#participant_container {
    padding: 8px;
}
.participant_item {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0;
}
.participant_item:nth-child(odd) {
    background: rgba(255,255,255,.7);
}
.participant_data {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 56px);
}
.participant_remove {
    display: inline-block;
    vertical-align: middle;
    width: 56px;
}

.participant_item > p {
    margin: 0;
}
.participant_name {
    font-size: 16px;
}
.participant_email {
    font-size: 14px;
    color: var(--color-text-second);
}

/* limit course access */
.user_access_amount {
    font-size: 16px;
    font-weight: bold;
}
.course_access_duration_info {
    font-size: 14px;
}
#duration_setup_value {
    font-size: 16px;
    font-weight: bold;
}

/* column sort test */
.cs_word_wrapp {
    display:inline-flex;
    align-items:center;
    gap:4px;
    cursor:grab;
}
/* column sort test edit */
.sc_cols_container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}
.cs_edit_col_wrapper {
    background: #f3f4ff;
    border-radius: 10px;
    padding: 12px 14px;
    position: relative;
}
.cs_words_container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cs_col_word {
    display:flex;
    align-items:center;
    max-width: calc(33% - 3px);
}


/* media 1440 */

@media (max-width: 1440px) {
    .pop_image_container {
        width: 168px;
    }
    .pop_data_container {
        width: calc(100% - 168px);
    }

    .course_icon {
        flex: 0 0 168px;
        width: 168px;
        height: 126px;
    }

    .bl_elem h3 {
        font-size: 18px;
        line-height: 26px;
    }
    .component_list_img {
        display: block;
        margin: 8px auto;
    }
    .load_file_nav {
        padding-top: 78px;
    }
    #courseImgBtn {
        padding: 8px;
    }
    .material_element {
        width: 214px;
        height: 316px;
    }
    .material_cover_wrapper {
        height: 210px;
    }
    /* folder */
    .folder_card {
        width: 214px;
    }
    .white_mat_bg_content {
        width: 920px;
        margin: auto;
    }
}

@media (max-width: 1320px) {
    .l_n_w_section .button {
        font-size: 0;
    }
    .l_n_w_section .icon_in_button {
        margin: 0;
    }
}

@media (max-width: 1280px) {
    .logo{
        width: 116px;
        margin: 8px 0;
    }
    .nav_el {
        padding: 4px 12px;
    }

    .block_title {
        font-size: 18px;
    }
    .card_icon_container {
        width: 82px;
    }
    .b_title_accent {
        font-size: 22px;
    }
    .sub_course_wrapper {
        width: 312px;
    }
    .sub_course_subscribers_wrapper {
        width: calc(100% - 312px);
    }
    .material_wrapper {
        max-width: unset;
    }
    .onl_class_item, .onl_student_item {
        width: calc(33.3% - 16px);
    }
    /* material navigation */
    #material_nav_search_inp {
        padding: 2px 8px;
    }
    .mat_nav_left {
        width: 356px;
    }
    .mat_nav_right {
        width: calc(100% - 356px);
    }
    .white_mat_bg_content {
        width: 900px;
    }
    .folder_card {
        width: 209px;
    }
    .material_element {
        width: 209px;
        height: 326px;
    }
    .material_cover_wrapper {
        height: 232px;
    }
}

@media (max-width: 1240px) {
    .material_wrapper {
        max-width: unset;
    }
    .sub_tbl_item {
        padding: 6px 12px;
    }
    .sub_tbl_row_name {
        padding-left: 0;
    }
    .mat_nav_left {
        width: 189px;
        margin-top: -6px;
        margin-bottom: -6px;
    }
    .mat_nav_right {
        width: calc(100% - 189px);
    }
    .mat_nav_left .button {
        margin: 3px;
        font-size: 14px;
    }
    .white_mat_bg_content {
        width: 688px;
    }
    .folder_card {
        width: 213px;
    }
    .material_element {
        width: 213px;
        height: 302px;
    }
    .material_cover_wrapper {
        height: 210px;
    }
}

@media (max-width: 1180px) {
    .material_nav_separator {
        display: none;
    }
}

@media (max-width: 1024px) {
    /* login */
    .block_img_wrapper {
        width: 312px;
    }
    .block_login_wrapper {
        width: 323px;
    }
    /* login end */
    .p_24 {
        padding: 16px;
    }
    .p_0-24 {
        padding: 0 16px;
    }
    .logo{
        width: 102px;
        margin: 8px 0;
    }
    .profile_nav_desk {
        width:210px;
        padding:0 16px;
    }
    .profile_content_container {
        width: calc(100% - 210px);
        margin-left: 210px;
        padding:0 16px;
    }
    .bl_elem {
        flex-direction: column;
    }

    .bl_card_main {
        width: 42%;
    }

    .course_icon {
        flex: 0 0 168px;
        width: 168px;
        height: 126px;
    }
    .course_content {
        margin-left: 0;
    }
    .profile_card_illustration {
        left: 36%;
    }
    .card_icon_container {
        display: block;
        min-height: unset;
    }
    .bl_card_icon {
        margin: 8px 8px 0;
    }
    .card_info_container {
        width: 100%;
        padding: 0 8px;
    }
    .lesson_view_top_back_tch {
        margin-left: -16px;
        margin-right: -16px;
    }
    .sub_course_wrapper {
        width: 258px;
        padding: 8px;
    }
    .sub_course_subscribers_wrapper {
        width: calc(100% - 258px);
        padding: 8px;
    }
    .sub_course_name {
        font-size: 16px;
    }
    .component_list_wrapper {
        width: 100%;
    }
    .material_wrapper {
        max-width: unset;
    }
    .class_data_card {
        width: 100%;
        margin: 0;
        margin-bottom: 16px;
    }
    .class_student_card {
        width: 100%;
        min-height: unset;
    }
    .onl_class_item, .onl_student_item {
        width: calc(50% - 16px);
        max-width: unset;
    }
    .online_nav_wrapper .button {
        margin: 4px;
    }
    /* test */
    .lesson_nav_bottom .button {
        font-size: 0;
    }
    .lesson_nav_bottom .icon_in_button {
        margin: 0;
    }
    /* online lesson */
    #lessonNext, #lessonPrev {
        width: 44px;
        min-width: unset;
        font-size: 0;
        padding: 6px;
        color:transparent;
        overflow: hidden;
        line-height: 0;
    }
    #lessonNext::after{
        display:inline-block;
        line-height: 14px;
    }
    #lessonPrev::after{
        display:inline-block;
        line-height: 14px;
    }
    /* material navigation */
    #material_nav_search_inp {
        min-width: unset;
        width: 180px;
    }
    /* lesson section */
    .lesson_section_cont {
        position: absolute;
        right: 0;
        z-index: 111;
    }
    #ls_hide_btn {
        display: block;
    }
    .lesson_text_cont {
        width: 100%;
    }
    .lesson_section_hidden {
        width: 0px;
        /* height: 0px; */
        padding: 0px;
        margin-left: -1px;
        border: 2px solid transparent;
        box-shadow: none;
    }
    
    .lesson_section_fix, .lesson_section_fix_online_l {
        right: 16px !important;
    }
    .ls_cont_inner_hidden {
        width: 0;
        padding: 0;
        overflow: hidden;
    }
    /** share link */
    .sh_l_link {
        min-width: unset;
        width: calc(100% - 368px);
        margin-bottom: -6px;
    }
    .sh_l_link_copied_sign::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 26px;
        height: 26px;
        background: url(/static/icon/btn/copy_link_sign.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-color: white;
        margin-left: 6px;
    }
    /* event style*/
    .event_card {
        width: calc(50% - 16px);
    }
    /* column sort */
    .cs_col_word {
        width: calc(50% - 4px);
        max-width: unset;
    }
}

@media (max-width: 964px) {
    .white_mat_bg_content {
        width: 458px;
    }
}

@media (max-width: 948px) {
    .material_wrapper {
        max-width: unset;
    }
    .material_nav_separator {
        display: block;
        height: 0;
    }
}

@media (max-width: 900px) {
}

@media (max-width: 815px) {
    .component_img_m {
        max-width: 485px;
    }
}

@media (max-width: 768px) {
    .block_img_wrapper {
        width: 280px;
    }
    .logo_desk{display:none;}
    .logo_mob{display:block;}
    .profile_nav_desk {
        display:none;
    }
    .profile_content_container {
        width: 100%;
        margin:0;
        margin-top:84px;
    }
    .navlist .nav_el p {
        font-size: 16px;
    }
    .bl_card_main {
        width: 100%;
    }
    .no_course_img {
        width: 420px;
    }
    .pc_storage, .pc_student, .pc_class, .pc_class_sch, .pc_staff, .pc_dashboard_img {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    .head_logo_container {
        width: 42px;
    }
    .head_nav_container {
        width: calc(100% - 69px);
    }
    .pop_image_container {
        width: 100%;
    }
    .pop_data_container {
        width: 100%;
        padding:0;
    }
    .profile_name {
        padding: 5px 8px;
    }
    .edit_c_l {
        width: 100%;
    }
    .edit_c_r {
        width: 100%;
        padding-left: 0;
    }
    .sub_course_wrapper {
        width: 100%;
    }
    .sub_course_subscribers_wrapper {
        width: 100%;
    }
    .sub_course_name {
        font-size: 18px;
    }
    .material_wrapper {
        max-width: unset;
    }
    .edit_card_content {
        width: 100%;
    }
    /* material navigation */
    .material_nav_separator {
        display: none;
    }
    .white_mat_bg_content {
        width: 687px;
    }
}

@media (max-width: 752px) {
    .white_mat_bg_content {
        width: 458px;
    }
}

@media (max-width: 738px) {
    .material_wrapper {
        max-width: unset;
    }
}

@media (max-width: 728px) {
    .material_nav_separator {
        display: block;
        height: 0;
    }
}

@media (max-width: 600px) {
    .d_row {
        flex-direction: column;
    }
    .new_course_wrapper input {
        min-width: 206px;
    }
    .no_course_img {
        width: 320px;
    }
    .prof_edit_form {
        width: 100%;
    }
    .profile_card_illustration {
        width: 310px;
    }
    .pop_edit_nav_wrapper {
        max-width: 100%;
        text-align: center;
    }
    .pop_edit_nav_wrapper .button {
        vertical-align: top;
    }
    .b_back_popup {
        font-size: 0;
    }
    .b_back_popup .icon_in_button {
        margin: 0;
    }
    .b_del_popup {
        float: unset;
    }
    .profile_name {
        font-size: 16px;
    }
    .vid_frame {
        height:275px;
    }
    .frame_component_wrapper {
        width: 100%;
    }
    .lesson_element_res_link {
        width: 100%;
    }
    .lesson_element_res_btn_wrapp {
        width: 100%;
    }
    .sutdent_res_card_img {
        width: 46px; height: 46px;
    }
    .student_res_card_name {
        margin: 0;
    }
    .student_res_card_desc{
        max-width: 200px;
        margin: 0;
    }
    .lesson_element_link {
        max-width: unset;
        width: 100%;
        padding: 6px 0;
    }
    .component_list_element {
        width: 50%;
    }
    #slide_back_btn {
        margin: 12px 6px;
    }
    #pop_name {
        font-size: 20px;
        line-height: 26px;
    }
    .material_wrapper {
        max-width: 100%;
    }
    /*
    * online-lesson
    */
    .info_link {
        float:unset;
        margin: 8px 0;
    }
    .online_participants {
        width: 100%;
    }
    .online_nav_wrapper {
        width: 100%;
        text-align: center;
    }
    .online_nav_wrapper .button {
        margin: 4px;
    }
    /* #onlineEndLesson {
        padding: 6px 16px;
    } */
    .onl_class_item, .onl_student_item {
        width: 100%;
        max-width: unset;
        margin: 8px 0;
    }
    .sub_price_data_wrapper {
        width: 120px;
        margin: 6px;
    }
    .sub_card_wrapp, .sub_phone_wrapp {
        width: 242px;
        margin-left: 0;
        margin-right: 0;
    }
    .ci_third {
        width: 50%;
    }
    /*
    * storage
    */
    .file_group_wrapper {
        text-align: center;
        margin-left: -16px;
        width: calc(100% + 32px);
        border-radius: 0;
    }
    .file_group {
        width: 33%;
        padding: 4px;
    }
    .file_name_wrapper {
        width: calc(100% - 42px);
        font-size: 14px;
    }
    .file_name {
        line-height: 18px;
    }
    .file_not_in_use {
        margin-bottom: 6px;
    }
    .file_upl_date {
        white-space: nowrap;
    }
    #file_pop_fname {
        font-size: 14px;
        line-height: 18px;
    }
    .component_img_m {
        max-width: 390px;
    }
    /*
    * image carousel
    */
    .img_carousel {
        height: 428px;
    }
    .img_nav_slide_btn {
        top: 245px;
    }
    /* tests */
    .lesson_nav_bottom .button {
        padding: 8px 16px;
        margin: 8px 4px;
        min-width: unset;
    }
    .sub_tbl {
        text-align: left;
    }
    .sub_tbl_item {
        width: 100%;
        text-align: left;
    }
    .sub_tbl_item::after {
        height: 2px;
        width: calc(100% - 44px);
        left: 22px;
        bottom: 0;
        right: unset;
        top: unset;
    }
    .sub_tbl_item>p {
        display: inline-block;
        margin: 0;
    }
    .sub_tbl_item_r {
        float: right;
    }
    .sub_tbl_price, .sub_tbl_price_before, .sub_tbl_price_before_n {
        float: right;
    }
    .sub_info_bl {
        width: 100%;
    }
    .sub_info_bl::after{
        top:unset; 
        right: calc(50% - 14px);
        bottom: -26px;
        border: 14px solid transparent;
        border-top: 14px solid var(--color-back);
    }
    .sub_info_change_bl {
        display: block;
        margin: auto;
    }
    /** chat */
    .chat_container {
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
        z-index: 1220;
    }
    #chat_main_close_second {
        display: inline-block;
    }
    .chat_search {
        width: calc(100% - 38px);
    }
    #chat_conversation_content {
        top: 58px!important;
        height: calc(100% - 58px)!important;
    }
    /* folder */
    .folder_edit_nav {
        width: 60px;
    }
    .folder_edit_wrapper h3 {
        width: calc(100% - 60px);
    }
    .white_mat_bg {
        padding: 8px;
    }
    .mat_nav_left_stud, .mat_nav_right_stud {
        width: 100%;
        text-align: center;
    }

    /** share link */
    .sh_l_link {
        display: block;
        width: 100%;
        /* max-width: 320px; */
        margin: 4px 0;
    }
    .sh_l_copy_count {
        /* width: calc(100% - 180px); */
        width: calc(100% - 216px);
        font-size: 14px;
    }
    .share_card_wrapper {
        position: unset;
        width: calc(100% - 32px);
        margin: 42px auto;
    }
    /** history answers */
    .hist_ans_wrapper {
        margin-right: 0;
    }
    /* event style */
    .event_card {
        width: 100%;
        margin: 8px 0;
    }
    /* column sort */
    .cs_col_word {
        width: 100%;
        max-width: unset;
    }
}

@media (max-width: 530px) {
    .mat_nav_left {
        width: 100%;
        text-align: center;
        margin-bottom: 8px;
    }
    .mat_nav_right {
        width: 100%;
        text-align: center;
    }
    .white_mat_bg_content {
        width: 100%;
        max-width: 238px;
    }
}

@media (max-width: 426px) {
    .w_part {
        width: 100%;
    }
    .block_img_wrapper {
        width: 264px;
    }
    .login_illust {
        margin-top: 0;
    }
    .block_login_wrapper {
        width: 100%;
        min-width: 286px;
        max-width: 320px;
    }
    .no_course_img {
        width: 220px;
    }
    .ci_half, .ci_third {
        width: 100%;
    }
    th {
        font-size: 12px;
    }
    tr p {
        font-size: 14px;
    }
    .table_wrapper {
        width: 100%;
    }
    .pay_card_part {
        width:190px;
    }
    .pop_edit_nav_wrapper .button {
        min-width: 32px;
        padding: 8px 16px;
    }
    .vid_frame {
        height:225px;
    }
    .sub_course_subscribers_wrapper {
        padding: 4px;
    }
    .sub_subscriber_link {
        font-size: 14px;
    }
    .material_wrapper {
        margin: auto;
    }
    .material_element {
        width: 100%;
        margin: 8px 0;
    }
    .folder_card {
        width: 100%;
        margin-left: 0;
    }
    .new_lesson_form_wrapper {
        width: 100%;
        border-radius: 0;
        left: 0;
        top: unset;
    }
    /*
    * storage
    */
    .file_group .b_title_accent{
        font-size: 18px;
    }
    /*
    * image carousel
    */
    .img_carousel {
        height: 378px;
    }
    .img_nav_slide_btn {
        top: 218px;
    }
    .component_img_s, .component_img_m, .component_img_l {
        min-height: 42px;
        width: 100%;
    }

    /** share link */
    .share_card_wrapper {
        width: calc(100% - 16px);
        padding: 16px 8px;
    }
}

@media (max-width: 600px) {
    .popup_container {
        box-sizing: border-box;
        width: 100%;
    }
    div[contenteditable=true] {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }
    .editable_top {
        box-sizing: border-box;
        height: auto;
        min-height: 38px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 2px 0;
    }
    .editable_row_break {
        display: block;
        width: 100%;
        height: 0;
        flex-shrink: 0;
    }
    .editable_link_popup {
        max-width: calc(100vw - 40px);
        white-space: normal;
    }
    .editable_link_input {
        width: 130px !important;
        min-width: 0 !important;
    }
}

@media (max-width: 376px) {
    select {
        min-width: unset;
    }
    .popup_bg_transparent {
        padding:76px 0;
    }
    .popup_container {
        padding: 8px;
        border-radius: 0;
    }
    .editable_top_btn {
        width: 30px;
        margin: 2px;
    }
    .pop_edit_nav_wrapper .button {
        min-width: 42px;
        padding: 8px 10px;
    }
    .vid_frame {
        height:195px;
    }

    .slide_num_input {
        margin-left: 6px;
        width: 46px;
    }
    .slide_tg_to_btn {
        padding: 4px 8px;
    }
    .glob_present_btn, .glob_synk_btn,
    .img_full_pop_button {
        margin: 8px 4px;
    }
}

@media (max-width: 321px) {
    html, body {
        width: 320px;
    }
    .share_card_profile_title {
        width: 100%;
    }
}

@media (max-height: 522px) {
    .online_side_nav {
        max-height: calc(100% - 16px);
        top: 8px;
        transform: unset;
        overflow-y: auto;
    }
}
/* Notification bell */
.notification_bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    cursor: pointer;
    color: var(--color-text-def);
    vertical-align: middle;
    border-radius: 8px;
}
.notification_bell:hover {
    background: rgba(0,0,0,0.04);
}
.notif_bell_icon {
    pointer-events: none;
}
.notif_count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #e74c3c;
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}
.notif_count_hidden { display: none; }
.notif_dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 16px);
    max-height: min(480px, calc(100vh - 80px));
    background: #f4f5fa;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    display: none;
    flex-direction: column;
    z-index: 1000;
    cursor: default;
}
@media (max-width: 480px) {
    .notif_dropdown {
        position: fixed;
        top: 60px;
        right: 8px;
        left: 8px;
        width: auto;
    }
}
.notif_dropdown_header { background: #fff; border-radius: 12px 12px 0 0; }
.notif_dropdown_open { display: flex; }
.notif_dropdown_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-light, #e8e8f0);
    flex-shrink: 0;
}
.notif_dropdown_header h4 { margin: 0; font-size: 14px; }
.notif_actions { display: flex; align-items: center; gap: 8px; }
.notif_refresh,
.notif_mark_all_read,
.notif_load_more {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-main, #6c63ff);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: inherit;
}
.notif_refresh { padding: 4px; display: inline-flex; align-items: center; justify-content: center; }
.notif_refresh:hover, .notif_mark_all_read:hover, .notif_load_more:hover {
    background: rgba(108,99,255,0.08);
}
.notif_list {
    overflow-y: auto; flex: 1 1 auto;
    padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.notif_empty {
    margin: 0;
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-second, #888);
    font-size: 13px;
}
.notif_item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px 10px 22px;
    border: 1px solid var(--color-light, #e0e3ee);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s;
}
.notif_item:hover { background: rgba(108,99,255,0.08); border-color: rgba(108,99,255,0.25); }
.notif_item_unread { border-color: rgba(108,99,255,0.35); }
.notif_item_unread::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 16px;
    width: 6px;
    height: 6px;
    background: var(--color-main, #6c63ff);
    border-radius: 50%;
}
.notif_top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.notif_item:not(.notif_item_unread) .notif_top { display: none; }
.notif_tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    background: var(--color-main, #6c63ff);
    color: #fff;
    white-space: nowrap;
}
.notif_tag_icon { flex-shrink: 0; }
.notif_sender_row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0;
}
.notif_sender_row_no_name { justify-content: flex-end; }
.notif_item_sender {
    flex: 1 1 auto; min-width: 0;
    font-size: 13px; font-weight: 600; color: var(--color-text-def); line-height: 1.3;
    text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif_item_path {
    font-size: 12px; color: var(--color-text-second, #888); line-height: 1.3;
    text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif_item_time { flex-shrink: 0; font-size: 11px; color: var(--color-text-second, #888); }
.notif_load_more { padding: 10px; border-top: 1px solid var(--color-light, #e8e8f0); flex-shrink: 0; }
.cmp_highlight { animation: cmp_highlight_pulse 2.4s ease-out; border-radius: 12px; }
@keyframes cmp_highlight_pulse {
    0%   { box-shadow: 0 0 0 0 rgba(108,99,255,0.4); }
    20%  { box-shadow: 0 0 0 8px rgba(108,99,255,0.25); }
    100% { box-shadow: 0 0 0 0 rgba(108,99,255,0); }
}