@media only screen and (min-width: 480px) {
    .login_box {
        padding: 30px 60px;
    }

    /*HEADER SITE*/
    /*FOOTER SITE*/
    /*QUIZ LIST*/
    /*CABINET*/
    /*EDIT QUIZ*/
    .publication {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    /*START PAGE*/
    /*FORM QUIZ*/
    /*RESUL*/
    /*SEARCH QUIZ*/
    .search_form {
        padding: 30px 22px;
    }

    /*CATEGORIES QUIZ*/
    /*QUIZ GRID*/
    /* NEWS */
    /* COMMENTS */

    .quiz_list-link {
        display: flex;
        margin-bottom: 12px;
        flex-direction: column;
    }

    .result-status {
        font-size: 20px;
        font-weight: 800;
        color: var(--primary);
        margin-right: 5px;
    }

    .quiz_box .quiz_buttons .btn.edit_btn Span {display:flex;}
}

@media only screen and (min-width: 640px) {
    .popup.login_popup {
        padding: 30px 60px;
    }

    /*HEADER SITE*/
    /*FOOTER SITE*/
    /*QUIZ GRID*/
    .quizes_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .quizes_list {
        grid-template-columns: repeat(2, 1fr);
    }
    /*QUIZ LIST*/
    .quiz_nav {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .quiz_nav > .col:nth-child(1) {
        margin: 0;
    }
    /*CABINET*/
    .cabinet_top {
        flex-direction: row;
        align-self: center;
        margin-bottom: 18px;
    }

    .cabinet_top .item_title {
        margin: 0 0 12px 0;
    }

    .cabinet_top .star_wrap {
        flex: 0 0 auto;
    }

    /*EDIT QUIZ*/
    .edit_quiz {
        padding: 0;
    }

    .quiz_content {
        padding: 0;
        flex: 1 1 auto;
    }

    .select_variant {
        grid-template-columns: repeat(2, 1fr);
    }

    .question_place {width:calc(100% - 98px);}

    /*START PAGE*/
    /*FORM QUIZ*/
    .list_quiz {
        grid-template-columns: 1fr 1fr;
        grid-gap: 16px;
    }

    .photo_quiz {
        grid-template-columns: 1fr 1fr;
    }

    .list-photo_quiz {
        flex-direction: row;
        align-items: flex-start;
    }

    .list-photo_quiz .col-1 {
        flex: 0 1 calc(50% - 14px);
        margin-right: 28px;
    }

    .list-photo_quiz .col-2 {
        flex: 0 1 calc(50% - 14px);
        margin-bottom: 0;
    }

    /*RESUL*/
    /*SEARCH QUIZ*/
    /*CATEGORIES QUIZ*/
    .categories_list {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
    }

    /*QUIZ GRID*/
    .quiz_grid-list {
        grid-template-columns: 1fr 1fr;
    }

    /* NEWS */
    /* COMMENTS */

    .quiz_box .quiz_buttons .btn.edit_btn Span {display:none;}
}

@media only screen and (min-width: 768px) {
    body {
        padding-top: 64px;
    }

    .site-left_menu {
        flex: 0 0 240px;
        max-width: 240px;
        display: flex;
        padding: 16px 16px 0 0;
        height: 100%;
        overflow-y: unset;
        overflow-x: unset;
        position: relative;
        bottom: auto;
        left: auto;
        transition: 0.3s;
        z-index: 0;
        justify-content:space-between;
    }

    .close-left_menu {
        display: none;
    }

    .top_menu {position:sticky; top:80px;}
        .top_menu .my_profile-btn {margin:0;}
            .top_menu .my_profile-btn::before {display:none;}
    .bottom_menu {position:sticky; bottom:0; padding:16px 0;}
        .bottom_menu .use_menu-info {padding-bottom:16px;}

    .change_size-menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 8px 0;
        position: relative;
    }

    .change_size-menu::before {
        content: "";
        width: 100%;
        height: 1px;
        background-color: var(--base-color-9);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .change_size-menu .minimize {
        font-size: 14px;
        color: var(--base-color-9);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        border: none;
        min-height: 30px;
        padding: 6px 0 6px 16px;
        background-color: var(--base-color-7);
        position: relative;
        cursor: pointer;
        transition: 0.3s;
    }

    .change_size-menu .minimize .icon {
        display: block;
        margin-right: 8px;
        width: 16px;
        height: 16px;
        fill: var(--base-color-9);
        transition: 0.3s;
    }

    .logout {
        order: 1;
        margin-top: 0;
    }

    .logout::before {
        display: none;
    }

    .site-left_menu.min {
        flex: 0 0 56px;
        max-width: 56px;
        padding-right: 0;
    }

    .site-left_menu.min .menu_list a {
        padding-right: 16px;
    }

    .site-left_menu.min .menu_list a .icon {
        margin: 0 0 0 3px;
    }

    .site-left_menu.min .menu_list a span {
        font-size: 0;
        overflow: hidden;
    }

    .site-left_menu.min .my_profile-btn {
        padding-right: 16px;
    }

    .site-left_menu.min .my_profile-btn .icon {
        margin: 0 0 0 3px;
    }

    .site-left_menu.min .my_profile-btn span {
        font-size: 0;
        overflow: hidden;
    }

    .site-left_menu.min .user_box .user_image {
        margin: 0 0 0 8px;
    }

    .site-left_menu.min .user_box .user_name {
        font-size: 0;
    }

    .site-left_menu.min .user_box .user_status {
        font-size: 0;
    }

    .site-left_menu.min .user_menu-data {
        flex-direction: column;
        text-align: center;
    }

    .site-left_menu.min .user_menu-data .icon {
        margin: 0 0 4px 0;
    }

    .site-left_menu.min .user_menu-data span {
        font-size: 0;
    }

    .site-left_menu.min .user_menu-data b i.points {
        display: none;
    }

    .site-left_menu.min .user_menu-data b i.points_small {
        display: inline;
    }

    .site-left_menu.min .minimize {
        font-size: 0;
        padding: 6px;
    }

    .site-left_menu.min .minimize .icon {
        margin-right: 0;
        transform: rotate(180deg);
    }

    .site-left_menu.min .use_menu-info {
        padding-left: 4px;
        padding-right: 4px;
    }


    .site-left_menu.min .logout {
        padding-right: 16px;
    }

    .site-left_menu.min .logout .icon {
        margin: 0 0 0 3px;
    }

    .site-left_menu.min .logout span {
        font-size: 0;
        overflow: hidden;
    }

    .site_content {
        padding: 16px;
    }

    /* BOTTOM NAVIGATION */

    .bottom_nav {
        display: none;
    }

    /*HEADER SITE*/
    .header_site {
        min-height: 64px;
    }
    
    .open-top_menu {
        display: none;
    }

    .quiz_list>ul>li>div .quiz_item .statistic,
    .quiz_list>ul>li>div .quiz_item .statistic>div {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    .quiz_list>ul>li>div .quiz_item .statistic>div {
        padding: 0 16px 0 0;
    }

    .quiz_list>ul>li>div .quiz_item .statistic span {
        padding-right: 10px;
    }

    .quiz_list>ul>li>div .quiz_item .statistic ul li:not(:last-child) {
        display: block;
    }

    .quiz_list-link {
        display: flex;
        margin-bottom: 12px;
        /* flex-direction: row; */
    }

    .quiz_list-link .links {
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

    .create_btn.btn {
        font-size: 18px;
        min-height: 44px;
        padding: 4px 20px;
        margin-right: 25px;
    }

    .create_btn.btn .icon {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
    }

    .header_logo {
        width: 100px;
    }

    .header-top_menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0;
        width: auto;
        flex: 1 1 auto;
        position: relative;
        top: auto;
        left: auto;
    }

    .header-top_menu ul {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-top_menu ul li+li {
        margin-top: 0;
    }

    .header-top_menu ul li {
        margin: 0 5%;
    }

    .header-top_menu ul a {
        display: flex;
        padding: 0;
        color: var(--link-color);
        font-weight: 700;
    }

    .buttons.sort_links {
        flex-direction: row;
        justify-content: flex-start;
    }

    .filters-block {
        display: flex;
        flex-direction: row;
    }

    .sorting-block {
        display: flex;
        flex-direction: row;
    }
    .sorting-block .end, .sorting-block .start {display:flex;}

    .buttons.sort_links .filters-block .dropdown {
        margin: 0px;
    }

    .header-top_menu ul a.active {
        color: var(--text-color);
        cursor: unset;
    }

    .user_btn {
        width: 48px;
        height: 48px;
    }

    .user_btn .icon {
        width: 20px;
        height: 20px;
    }
    /* CREATE QUIZ HEADER */

    .question_top-wrap {
        margin-bottom: 14px;
        padding-top: 10px;
        justify-content: flex-end;
    }

    .create_quiz-header {
        min-height: 64px;
    }

    .create_quiz-header .header_logo {
        flex: 0 0 100px;
        margin-right: 42px;
    }

    .create_quiz-header .quiz_back-btn {
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        color: var(--base-color-7);
        display: flex;
        align-items: center;
        padding-right: 10px;
    }

    .create_quiz-header .quiz_back-btn i {
        flex: 0 0 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
        width: 36px;
        height: 36px;
        border: 1px solid var(--base-color-8);
        border-radius: 6px;
        transition: 0.3s;
    }

    .create_quiz-header .quiz_back-btn i .icon {
        fill: var(--base-color-7);
    }

    .create_quiz-header .quiz_back-btn span {
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .moderation_percent {
        text-align: center;
        font-size: 12px;
        line-height: 1;
        color: var(--base-color-3);
        display: block;
        margin-right: 16px;
        padding: 6px 12px;
        border-radius: 16px;
        z-index: 1;
        position: relative;
    }

    .moderation_percent::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--base-color-3);
        border-radius: 16px;
        opacity: 0.25;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }

    .moderation_percent.full {
        color: var(--base-color-5);
    }

    .moderation_percent.full::before {
        background-color: var(--base-color-5);
    }

    .create_quiz-header .preview_btn {
        white-space: nowrap;
    }

    .create_quiz-header .btn.save_btn {
        white-space: nowrap;
        display: flex;
        margin-right: 12px;
        padding: 4px 12px;
        min-height: 32px;
    }

    .create_quiz-header .user_btn {
        flex: 0 0 48px;
    }

    .quiz_back-row {
        display: none;
    }

    /* CREATE QUIZ ASIDE */

    .crete_quiz-aside {
        flex: 0 0 224px;
        max-width: 224px;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        padding: 10px 4px 0 0;
        height: 100%;
        overflow-y: unset;
        overflow-x: unset;
        position: relative;
        bottom: auto;
        left: auto;
        transition: 0.3s;
        z-index: 1;
        justify-content:space-between;
    }

    .crete_quiz-aside::after {
        content: "";
        display: block;
        width: calc(100% + 16px);
        height: calc(100% + 32px);
        background-color: var(--base-color-7);
        position: absolute;
        top: -16px;
        right: 0;
        z-index: -1;
    }

    .create_menu {
        flex-direction: column;
        width: calc(100% + 16px);
        margin-left: -16px;
        position:sticky;
        top:90px;
    }

    .create_menu li {
        flex: 0 1 auto;
        width: 100%;
    }

    .create_menu li + li {
        margin-top: 8px;
    }
    
    .create_menu a {
        font-size: 14px;
        font-weight: 400;
        flex-direction: row;
        justify-content: flex-start;
        padding: 8px 16px;
        height: auto;
        border-radius: 0 6px 6px 0;
    }

    .create_menu a::before {
        width: 4px;
        height: 100%;
    }

    .create_menu a .icon {
        flex: 0 0 16px;
        display: block;
        margin: 0 12px 0 0;
        width: 16px;
        height: 16px;
        transition: 0.3s;
    }

    .create_menu a span {
        white-space: nowrap;
        position: relative;
        display: block;
        z-index: 1;
        overflow: hidden;
        transition: 0.3s;
    }

    .change_size-crete {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0 0 16px -16px;
        width: calc(100% + 16px);
        position: sticky;
        bottom:0;
        padding:16px 0;
    }

    .change_size-crete::before {
        content: "";
        width: 100%;
        height: 1px;
        background-color: var(--base-color-9);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .change_size-crete .minimize {
        font-size: 14px;
        color: var(--base-color-9);
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        border: none;
        min-height: 30px;
        padding: 6px 16px;
        background-color: var(--base-color-7);
        position: relative;
        cursor: pointer;
        transition: 0.3s;
    }

    .change_size-crete .minimize .icon {
        display: block;
        margin-right: 8px;
        width: 16px;
        height: 16px;
        fill: var(--base-color-9);
        transition: 0.3s;
    }

    .crete_quiz-aside.min {
        flex: 0 0 40px;
        max-width: 40px;
        padding-right: 0;
    }

    .crete_quiz-aside.min .create_menu a span {
        font-size: 0;
        overflow: hidden;
    }

    .crete_quiz-aside.min .create_menu a .icon {
        margin: 0 0 0 3px;
    }

    .crete_quiz-aside.min .change_size-crete .minimize {
        font-size: 0;
        padding: 6px;
    }

    .crete_quiz-aside.min .change_size-crete .minimize .icon {
        margin-right: 0;
        transform: rotate(180deg);
    }

    .quiz_content {
        padding-left: 16px;
    }

    /*FOOTER SITE*/
    /*QUIZ GRID*/

    .quizes_grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .quizes_list {
        display: grid;
        grid-template-columns: 1fr;
    }

    /*QUIZ LIST*/

    .quizes_top {
        flex-direction: row;
        align-items:center;
    }

    .quizes_top > .col:nth-child(1) {
        flex: 1 1 auto;
    }

    .quizes_top .breadcrumbs {
        margin-bottom: 0;
    }

    .quizes_top .breadcrumbs li + li {
        padding-left: 15px;
        margin-left: 15px;
    }

    .quizes_top .breadcrumbs a {
        font-size: 22px;
    }

    .quizes_top .breadcrumbs span {
        font-size: 22px;
    }

    .quizes_top .sort_links {
        display: flex;
        flex-wrap: wrap;
        margin: 28px 0 0 0;
    }

    .quizes_top .sort_links .sorting-block {
        flex-wrap: wrap;
    }

    .quizes_top .sort_links {
        
    }

    .quizes_top > .col:nth-child(2) {
        align-items: flex-end;
        flex-direction: column;
    }

    .quizes_top .btn.sorted_quizes-btn {
        display: none;
    }

    .quizes_top .btn.add_subfolder {
        margin: 0;
        white-space: nowrap;
    }

    .quizes_menu {
        display: flex;
        margin-bottom: 20px;
    }

    .quizes_menu .buttons.sort_links {
        margin: 0 auto 0 0;
    }


    /*CABINET*/
    .cabinet .centre {
        padding: 20px;
    }

    .cabinet_inner {
        flex-direction: row;
        justify-content: space-between;
    }

    .cabinet_inner>.col-1 {
        width: calc(50% - 10px);
    }

    .cabinet_inner>.col-2 {
        margin-top: 0;
        width: calc(50% - 10px);
    }

    /*EDIT QUIZ*/

    .questions {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .first_page {
        margin: 0;
        width: 100%;
    }

    .categories_menu .edit_place {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .categories_menu .category_name {
        margin-bottom: 0;
    }

    .categories_menu .children-add {
        margin-left: 18px;
    }

    /*START PAGE*/
    .start_page {
        flex-direction: row;
    }

    .start_page>.col-1 {
        flex: 0 1 60%;
        height: auto;
        min-height: 100%;
        transition: 1s;
        position: unset;
    }

    .start_page>.col-2 {
        flex: 0 1 40%;
        min-width: 400px;
        justify-content: center;
        align-items: flex-start;
        transition: 1s;
    }

    /*.start_page.anim > .col-1 {*/
    /*  animation: anim-col-1 0.5s ease-in 0.3s forwards;*/
    /*}*/

    /*.start_page.anim > .col-2 {*/
    /*  max-width: unset;*/
    /*  animation: anim-col-2 0.5s ease-in 0.3s forwards;*/
    /*}*/

    /*@keyframes anim-col-1 {*/
    /*  0% {*/
    /*    flex: 0 1 60%;*/
    /*  }*/
    /*  100% {*/
    /*    flex: 0 1 0%;*/
    /*  }*/
    /*}*/
    /*@keyframes anim-col-2 {*/
    /*  0% {*/
    /*    flex: 0 1 40%;*/
    /*  }*/
    /*  100% {*/
    /*    flex: 0 1 100%;*/
    /*  }*/
    /*}*/
    .start_page.anim>.col-2>.scroll_box {
        transition: 1s;
        transform: translate(0px, -1000px);
    }



    .start_page.anim>.col-2>.scroll_box {
        /*transition: 0.3s;*/
        opacity: 0;
    }

    .start_page-text {
        margin-bottom: 20px;
    }

    .start_page-text.no_margin {
        margin-bottom: 0px;
    }

    .start_page-text.top_margin {
        margin-top: 20px;
    }

    .start_page>.col-2 .btn {
        margin: 0 0 35px 0;
        width: auto;
    }

    .start_page-bottom {
        flex-direction: row;
        align-items: center;
    }

    .start_page-bottom .confident {
        text-align: end;
    }

    /*FORM QUIZ*/
    /*RESUL*/
    .resul .centre {
        padding: 25px 20px;
    }

    .share_quiz {
        width: max-content;
    }

    .duel .user {
        font-size: 18px;
    }

    /*SEARCH QUIZ*/
    /*CATEGORIES QUIZ*/
    .categories_list {
        grid-template-columns: repeat(4, 1fr);
    }

    /*QUIZ GRID*/
    /* NEWS */
    /* COMMENTS */

    .final_review {
        width: 100%;
        margin: 0 0 16px 0;
    }

    .moderation_control {
        flex-direction: row;
        justify-content: space-between;
    }

    .not_approved_block,
    .approved_block {
        text-align: start;
        align-self: stretch;
        width: calc(50% - 8px);
        margin-bottom: 0;
        height: auto;
    }

    .not_approved_block > span,
    .approved_block > span {
        margin-bottom: auto;
    }

    .not_approved_block .btn,
    .approved_block .btn {
        width: fit-content;
        max-width: 100%;
    }

    .quiz_box .quiz_buttons .btn.edit_btn Span {display:flex;}
}

@media only screen and (min-width: 1024px) {
    :root {
        --section-bottom: 75px;

        --h1: 60px;
        --h2: 46px;
        --h3: 32px;
        --h4: 22px;
        --h5: 16px;
    }

    h4,
    .box_title A {
        color: var(--dark);
        text-decoration: none;
    }

    .start_page .item_title,
    .form_quiz .item_title {
        font-size: 26px;
    }

    /*HEADER SITE*/

    .header-top_menu ul a {
        font-size: 22px;
    }

    /*FOOTER SITE*/
    /*QUIZ GRID*/
    .quizes_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quizes_list {
        grid-template-columns: repeat(2, 1fr);
    }
    /*QUIZ LIST*/
    /*CABINET*/
    /*EDIT QUIZ*/
    .first_page {
        flex-direction: row;
        padding: 25px;
    }

    .first_page>.col-1 {
        flex: 0 0 50%;
        padding-right: 10px;
        padding-bottom: 0;
    }

    .first_page>.col-2 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 10px;
    }

    .next_settings {
        width: max-content;
        margin-left: auto;
    }

    .select_variant {
        grid-template-columns: repeat(3, 1fr);
    }

    .question_control {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .question_control .error_message {
        width: 100%;
        margin-bottom: 20px;
    }

    .question_control .btn {
        margin: 0;
    }
    
    .question_control .btn.add_question {
        margin-right: auto;
        order: 0;
    }
    
    .question_control .btn.preview_question {
        margin: 0 auto 0 0;
    }

    .question_control .btn.add_question + .btn.preview_question {
        margin: 0;
    }
    
    .question_control .btn.send_to_moderation {
        margin: 0 0 0 auto;
    }

    .line.col-to-row {
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 0;
    }

    .line.col-to-row .small_title {
        margin-bottom: 0;
    }

    /*START PAGE*/
    /*FORM QUIZ*/
    /*RESUL*/
    /*SEARCH QUIZ*/
    /*CATEGORIES QUIZ*/
    /*QUIZ GRID*/
    /* NEWS */
    /* COMMENTS */

    .rate_item .head {
        flex-wrap: nowrap;
        padding: 16px 20px;
    }

    .rate_item .title {
        flex: 1 1 auto;
    }

    .rate_item .star_wrap {
        width: auto;
        margin: 0 32px 0 0;
        order: 0;
    }

    .rate_item .star_wrap .icon {
        margin: 0 0 0 12px;
        width: 32px;
        height: 32px;
    }

    .rate_item .body {
        padding: 16px 20px 20px 20px;
    }

    @media (hover: hover) {
        .radio_box-btn .radio_inner:hover {
            color: var(--base-color-2);
            border-color: var(--base-color-2);
        }

        .radio_box-btn .radio_inner:hover .icon {
            fill: var(--base-color-2);
        }

        .radio_box-btn input[type=radio]:checked + .radio_inner:hover {
            color: var(--base-color-2)
        } 

        .radio_box-btn input[type=radio]:checked + .radio_inner:hover .icon {
            fill: var(--base-color-2);
        }

        a:hover {
            text-decoration: none;
        }

        article a:hover {
            color: var(--link-color-active);
        }

        .btn:hover {
            opacity: 0.75;
        }

        .btn.gray_outline:hover {
            color: var(--base-color-2);
            border-color: var(--base-color-2);
            opacity: 1;
        }

        .btn.gray_outline:hover .icon {
            fill: var(--base-color-2);
        }

        .btn.outline:hover {
            color: var(--base-color-6);
            background-color: var(--base-color-2);
            border-color: var(--base-color-2);
            opacity: 1;
        }

        .btn.outline:hover .icon {
            fill: var(--base-color-6);
        }

        .close_btn:hover::before,
        .close_btn:hover::after {
            background-color: var(--danger);
        }

        .close_popup:hover::before,
        .close_popup:hover::after {
            background-color: var(--danger);
        }

        .popup.edit_category_popup .remove_icon:hover .icon {
            fill: var(--danger);
        }

        .dropdown_short:hover .drop_arrow {
            background-color: #618d2e;
        }

        .dropdown UL LI A:hover {
            color: var(--link-color);
        }

        .dropdown_short ul li a:hover {
            background-color: #e6e6e6;
            color: initial;
        }

        .breadcrumbs a:hover {
            text-decoration: underline;
        }

        .header-top_menu ul a:hover {
            color: var(--link-color-active);
        }

        .toggle_language a:hover {
            border-color: var(--primary);
        }

        .menu_list a:hover .icon {
            fill: var(--base-color-2);
        }

        .social_list a:hover .icon {
            fill: var(--link-color-active);
        }

        .logout:hover .icon {
            fill: var(--base-color-2);
        }

        .my_profile-btn:hover .icon {
            fill: var(--base-color-2);
        }

        .footer_email li:hover .icon {
            fill: var(--primary);
        }

        .quiz_list>ul>li>div .quiz_item .statistic ul a:hover {
            color: var(--primary);
        }

        .select_list_type a:hover .icon {
            fill: var(--btn-bg-hover)
        }

        .to_quiz:hover {
            color: var(--link-color-active);
        }

        .copy_quiz:hover {
            opacity: 0.7;
        }

        .quiz_list-more:hover .icon {
            fill: var(--primary);
        }

        .quiz_list-control a:hover {
            text-decoration: underline;
        }

        .quiz_list-control a:hover .icon {
            fill: var(--link-color-active);
        }

        .publication_share a:hover {
            filter: contrast(1);
        }

        .setting_info a:hover+span {
            color: var(--link-color-active);
        }

        .close_change:hover .icon {
            fill: var(--danger);
        }

        .select_picture:hover {
            border-color: var(--base-color-5);
        }

        .add_hashtag a:hover {
            background-color: #dd70a2;
        }

        .del_hashtag:hover {
            filter: saturate(2);
        }

        .move_question a:hover::before,
        .move_question a:hover::after {
            background-color: var(--warning);
        }

        .select_variant li:hover {
            border-color: var(--primary);
        }

        .add_photo-btn:hover .icon {
            fill: var(--base-color-2);
        }

        .author_social a:hover .icon {
            fill: var(--dark);
        }

        .start_page-bottom ul a:hover {
            text-decoration: underline;
            color: var(--link-color-active);
        }

        .start_page.temp-2 .start_page-bottom .confident a:hover {
            text-decoration: underline;
        }

        .list_quiz .label_box:hover,
        .list-photo_quiz .label_box:hover {
            border-color: var(--primary);
        }

        .photo_quiz picture:hover {
            border-color: var(--primary);
        }

        .prev_quiz:hover {
            border-color: var(--text-color-light);
            background-color: var(--text-color-light);
        }

        .prev_quiz:hover .icon {
            fill: var(--text-color-contrast);
        }

        .prev_next:hover {
            color: var(--text-color-contrast);
            background-color: var(--primary);
        }

        .prev_next:hover .icon {
            fill: var(--text-color-contrast);
        }

        .text-box_quiz input:hover {
            border-color: var(--primary);
        }

        .quiz_result a:hover {
            text-decoration: underline;
        }

        .categories_list a:hover {
            text-decoration: underline;
        }

        .sort_wrap .sort a:hover {
            text-decoration: underline;
        }

        .quiz_list .tile_categories ul a:hover {
            text-decoration: none;
            color: var(--primary);
        }

        .change_variant .variants_list li:hover {
            background-color: var(--accent-color-2);
        }

        .social_article a:hover {
            filter: grayscale(0);
        }

        .dropdown-group UL a:hover {
            color: var(--link-color);
        }

        .dropdown-group UL a.add_new-menu:hover {
            color: #282828;
        }

        .categories_menu .holder div.icon>a:hover {
            background-color: var(--primary);
        }

        .categories_menu .holder div.icon>a:hover .icon {
            fill: #ffffff;
        }

        .categories_menu .category_name:hover {
            color: var(--link-color);
        }

        .categories_menu .children-add:hover {
            text-decoration: underline;
        }

        .change_size-menu .minimize:hover {
            color: var(--base-color-6);
        }

        .change_size-menu .minimize:hover {
            color: var(--base-color-6);
        }

        .change_size-menu .minimize:hover .icon {
            fill: var(--base-color-6);
        }

        .header-top_menu ul a.active:hover {
            color: var(--text-color);
            cursor: unset;
        }

        .create_quiz-header .quiz_back-btn:hover i {
            border-color: var(--base-color-2);
        }

        .create_menu a:hover .icon {
            fill: var(--base-color-2);
        }

        .change_size-crete .minimize:hover {
            color: var(--base-color-6);
        }

        .change_size-crete .minimize:hover .icon {
            fill: var(--base-color-6);
        }

        .choose_variant:hover .icon, 
        .hide_question:hover .icon, 
        .copy_question:hover .icon {
            fill: var(--base-color-2);
        }

        .delete_question:hover .icon {
            fill: var(--base-color-1);
        }

        /* .variant_inner li:hover {
            border-color: var(--base-color-2);
        } */

        .show_more:hover .icon {
            fill: var(--base-color-2);
        }

        .del_variant:hover .icon {
            fill: var(--base-color-1);
        }

        .question_one .sorter:hover .icon,
        .move_variant:hover .icon {
            fill: var(--base-color-7);
        }

        .add_variant:hover {
            color: var(--base-color-7);
        }

        .add_variant:hover .icon {
            fill: var(--base-color-7);
        }

        .btn.publication_copy:hover {
            opacity: 1;
            background-color: #dd70a2;
        }

        .publication_share a:hover .icon {
            fill: var(--base-color-2)
        }

        .delete_picture:hover {
            opacity: 0.75;
        }

        .styled_inner.styled_text .buttons_wrap a:hover {
            color: var(--base-color-6);
        }
        
        .styled_inner.styled_text .buttons_wrap a:hover .icon {
            fill: var(--base-color-6);
        }

        .quiz_box .quiz_item-category ul a:hover {
            color: var(--base-color-2);
        }

        .quiz_box .quiz_list-title:hover {
            color: var(--base-color-2);
        }
    }
}

@media only screen and (min-width: 1280px) {
    .select_list_type {display:flex;}
    .trash .select_list_type, .main.list .select_list_type {width:100%; justify-content:flex-end; margin:0 0 20px 0;}
    .trash .select_list_type {margin:0;}

    /*HEADER SITE*/
    .create_quiz-header .open_mob-chat {
        display: none;
    }
    
    /* CREATE QUIZ HEADER */
    .create_quiz-header .header_logo {
        margin-right: 142px;
    }

    .create_quiz-header .quiz_back-btn {
        font-size: 22px;
    }

    .create_quiz-header .quiz_back-btn i {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }

    .moderation_percent {
        font-size: 14px;
        margin-right: 40px;
        padding: 9px 16px;
    }

    .create_quiz-header .preview_btn {
        font-size: 20px;
        margin-right: 16px;
        padding: 4px 20px;
        min-height: 44px;
    }

    .create_quiz-header .preview_btn .icon {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
    }

    .create_quiz-header .btn.save_btn {
        font-size: 20px;
        margin-right: 32px;
        padding: 4px 20px;
        min-height: 44px;
    }
    /* CREATE QUIZ */
    .variant_inner li {
        padding: 14px;
    }

    .del_variant .icon {
        width: 20px;
        height: 20px;
    }

    .move_variant {
        margin: 0 0 0 20px;
    }

    .move_variant .icon {
        width: 20px;
        height: 20px;
    }
    /*FOOTER SITE*/
    /*QUIZ GRID*/
    .quizes_menu.list_type {
        flex-direction: column;
        margin-bottom: 0;
    }

    .quizes_menu.list_type .buttons.sort_links {
        margin: 0;
        padding:6px 16px;
        width: 100%;
        min-height: 42px;
        background-color: var(--base-color-6);
        border-bottom: 1px solid var(--base-color-9);
        border-radius: 6px 6px 0 0;
        order: 1;
    }

    .quizes_menu.list_type .sorting-block {
        width: 100%;
        flex-wrap: nowrap;
        justify-content:space-between;
    }

    .quizes_menu.list_type .buttons a:not(.btn) {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
        color: var(--accent-color-1);
        padding: 0 16px 0 0;
        height: 100%;
        margin:0 16px 0 0;
    }
    
    .quizes_menu.list_type .buttons a:not(.btn)::before {
        display: none;
    }
    
    .quizes_menu.list_type .buttons a:not(.btn)::after {
        display: block;
        flex: 0 0 6px;
        margin: 0 0 0 6px;
        width: 6px;
        height: 6px;
        border-bottom: 1px solid var(--base-color-2);
        border-left: 1px solid var(--base-color-2);
        background-color: transparent;
        position: relative;
        top: auto;
        right: auto;
        transform: translate(-50%, 0) rotate(-45deg);
    }

    .quizes_menu.list_type .buttons a[data-order="asc"]::after {
        margin-top: -4px;
        transform: translate(-50%, 0) rotate(135deg);
    }

    .quizes_menu.list_type .buttons a:nth-child(1) {width:144px;}
    .quizes_menu.list_type .buttons a:nth-child(2) {width:72px;}
    .main.list .quizes_menu.list_type .buttons a:nth-child(2) {width:140px;}
    .quizes_menu.list_type .buttons .end a:nth-child(1) {width:194px; margin:0;}
    .main.list .quizes_menu.list_type .buttons .end a:nth-child(1) {width:auto; padding:0;}
    .quizes_menu.list_type .buttons .end a:nth-child(2) {width:180px; margin:0 0 0 16px;}

    .quizes_grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .quizes_list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .quizes_list > li + li {
        border-top: 1px solid var(--border-color);
    }

    /*QUIZ GRID*/
    
    /*QUIZ LIST*/

    .quizes_list .quiz_box {border-radius:0; flex-wrap:wrap; padding:8px 16px; position:relative;}

        .quizes_list .quiz_box .naming {margin:0 0 8px 0;}
            .quizes_list .quiz_box .quiz_image {flex:0 0 40px; margin:0 8px 0 0; width:40px; height:24px; order:0;}
            .quizes_list .quiz_box .btn.copy_quiz {display:flex; flex:0 0 24px; margin-right:8px; width:24px; height:24px; min-height:24px; order:2;}
            .quiz_box .quiz_buttons .btn + .btn.copy_quiz {display:none;}
        .quizes_list .quiz_box .quiz_list-title {font-size:14px; flex:0 0 calc(100% - 80px); padding:0 200px 0 0; margin:0; height:auto; order:3;}
        .main.list .quizes_list .quiz_box .quiz_list-title {padding:0 238px 0 0;}
            .quiz_box .quiz_list-title span {height:auto; padding:2px 0 0 0;}

        .quizes_list .quiz_box .rest {align-items:center; flex-wrap:nowrap;}
            .quizes_list .quiz_box .quiz_raty {width:144px; margin:0 16px 0 0; order:4;}
            .quizes_list .quiz_box .coutnt {margin:0;}
            .quizes_list .quiz_box .coutnt span {display:block; width:32px;}
            .quizes_list .status_date-wrap {flex:unset; flex-direction:row; align-items:center; margin:0 16px 0 0; order:7;}
                .quizes_list .moderate_quiz-wrap {margin:0;}
                    .rest .moderate_staus {flex-shrink:0; margin:0 16px 0 0;}
                    .rest .ern {margin:4px 16px 0 0;}
                .quizes_list .quiz-moderate_date {font-size:14px; flex:0 0 72px;}
                    .quizes_list .quiz-moderate_date span {display:none;}
            .quizes_list .quiz_box .created_date {font-size:14px; flex:0 0 72px; margin:0 16px 0 0; order:5;}
            .quizes_list .quiz_box .quiz_item-category {width:100%; flex:unset; margin:0 16px 0 0; order:6;}
            .quizes_list .quiz_box .quiz_item-user {flex:0 0 180px; justify-content:flex-start; margin:0; order:8;}
        .quizes_list .quiz_buttons {order:9; flex:unset; position:absolute; top:8px; right:16px; z-index:1;}
        .main.list .quizes_list .quiz_buttons {z-index:unset; width:260px;}
            .quizes_list .quiz_buttons .btn {padding:2px 8px; min-height:22px;}
            .list .quiz_box .quiz_buttons .big.quiz_list-more, .quiz_list.trash .quizes_list .quiz_buttons .big.quiz_list-more, .quiz_list.trash .quizes_list .quiz_list-wrap {height:24px;}
                .quiz_list-wrap A {margin:0 0 0 8px;}

    .quizes_list .quiz_box .created_date .icon {
        display: none;
    }

    .quiz_box .quiz_buttons .btn.edit_btn span {
        display: none;
    }

    .quizes_list .quiz_box .btn.comments_btn {
        display: none;
    }

    /* list template nav */

    .quizes_list + .quiz_nav {
        padding: 24px;
        background-color: var(--base-color-6);
        border-radius: 0 0 6px 6px;
        border-top: 1px solid var(--border-color);
    }

    .quizes_list + .quiz_nav .pagination {
        padding: 0;
    }
    /*CABINET*/
    /*EDIT QUIZ*/
    .select_picture {
        height: 294px;
    }

    .select_place .icon {
        margin-bottom: 32px;
        width: 70px;
        height: 70px;
    }

    .upload_place {
        height: 294px;
    }

    .upload_place .icon {
        margin-bottom: 32px;
        width: 56px;
        height: 56px;
    }
    /*START PAGE*/
    /*FORM QUIZ*/
    /*RESUL*/
    /*SEARCH QUIZ*/
    /*CATEGORIES QUIZ*/
    /*QUIZ GRID*/
    /* NEWS */
    /* COMMENTS */

    /* COMMENT BLOCK */

    .comment_block {
        margin-left: 16px;
        flex: 0 0 300px;
        height: 100%;
        max-height: unset;
        min-height: 500px;
        height: calc(100vh - 96px);
        border-radius: 6px;
        visibility: visible;
        position: sticky;
        top: 80px;
        bottom: auto;
        left: auto;
        opacity: 1;
        z-index: 0;
    }

    .comments_col {
        max-height: unset;
    }

    .close-comment_block {
        display: none;
    }

    .comments_box {
        overflow-y: auto;
        overflow-x: hidden;
    }



}

@media only screen and (min-width: 1500px) {
    /* COMMENT BLOCK */

    .comment_block {
        flex: 0 0 456px;
    }

    .comment_block .top {
        padding: 24px;
    }

    .comment_block .title {
        font-size: 22px;
    }

    .comments_box {
        padding: 20px;
        flex: 1 1 auto;
    }

    .comments_col {padding:0 12px 0 0;}

    .comments_box .top_name {
        font-size: 18px;
        margin-bottom: 20px;
    }

    /*QUIZ GRID*/
    .quizes_grid {grid-template-columns: repeat(4, 1fr);}
    .main .quizes_grid {grid-template-columns: repeat(3, 1fr);}

    .quizes_menu.list_type .buttons a:nth-child(5) {
        flex: 0 0 10%;
    }

    .quiz_box .quiz_buttons .btn.edit_btn span {
        display: block;
    }
}

@media only screen and (min-width: 1600px) {
    .quizes_menu.list_type .sorting-block {
        justify-content:flex-end;
    }
        .sorting-block .end {padding:0 183px 0 0;}
        .main.list .sorting-block .end {padding:0;}
        .for_moderation .sorting-block .end {padding:0 127px 0 0;}
        .sorting-block .start {padding:0 196px 0 0;}
        .main.list .sorting-block .start {padding:0 453px 0 0;}
        .tile .sorting-block .end, .tile .sorting-block .start {padding:0;}
        .if_tile .sorting-block .end, .if_tile .sorting-block .start {padding:0;}

    .quizes_list .quiz_box {flex-wrap:nowrap;}

        .quizes_list .quiz_box .naming {width:100%; margin:0 16px 0 0;}
            .quizes_list .quiz_box .quiz_list-title, .main.list .quizes_list .quiz_box .quiz_list-title {padding:0;}

        .quizes_list .quiz_box .rest {width:auto;}
            .quizes_list .quiz_box .quiz_item-category {width:auto; min-width:180px;}
            .main.list .quizes_list .quiz_box .quiz_item-category {width:auto; min-width:360px;}
            .quizes_list .quiz_box .quiz_item-user {flex:unset; min-width:180px;}

        .quizes_list .quiz_buttons {position:relative; top:unset; right:unset; flex-shrink:0;}

    .question_header {
        flex-wrap: nowrap;
        align-items: center;
        background-color: var(--accent-color-2);
        border-bottom: 1px solid var(--base-color-8);
        border-radius: 6px 6px 0 0;
    }

    .question_place {min-height:64px; width:100%;}

    .question_place:before {width:52px;}

    .question_inner {padding:10px 16px 10px 52px;}

    .question_inner::before,
    .question_inner::after {
        background: linear-gradient(0deg,var(--accent-color-2) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .question_actions-wrap {
        margin-right: 24px;
        width: auto;
        order: 0;
    }

    .question_actions {
        border-top: none;
        padding: 0 4px;
        border-radius: 6px;
        width:186px;
    }

    .change_variant .variants_list li + li {margin-top:1px;}

    .choose_variant,
    .hide_question,
    .copy_question,
    .delete_question {
        height: 40px;
        flex: 0 0 44px;
    }
     .change_variant .variants_list {
        left: auto;
        right: 0;
        transform: none;
    }
    .question_content {
        padding: 16px 20px 20px 20px;
    }
    .show_more {
        height: 64px;
    }

    .question_one .sorter {
        height: 64px;
    }

}

@media only screen and (min-width: 1740px) {
    .main .quizes_grid {grid-template-columns: repeat(4, 1fr);}
}