.answer_long {
    line-height: 1.3
}

.answer__title {
    word-break: break-word
}

.answer_long .answer__title {
    font-weight: 700;
    margin-bottom: .375rem
}

.answer_long .answer__title+.answer__text {
    color: var(--color-bg-6,var(--grey-blue))
}

.quiz-container_rtl .answer__text,.quiz-container_rtl .answer__title {
    text-align: right
}

.other-input {
    height: 100%;
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.other-input label input {
    display: none!important
}

.other-input .field {
    width: 100%
}

.other-input .control {
    height: 100%;
    width: 100%
}

.other-input .control input,.other-input .control textarea {
    width: 100%;
    border: none!important;
    background: var(--color-bg-2,#f7f7f7);
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
    max-height: 100%!important
}

.other-input .control textarea {
    min-height: 100%!important;
    resize: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.other-input .counter {
    position: absolute;
    bottom: 0;
    right: 5px;
    opacity: .5;
    color: #999;
    font-size: 10px
}

.answer_verifying-end {
    pointer-events: none
}

.answer_verifying-correct {
    --color-alpha: var(--color-success);
    --color: var(--color-success);
    background-color: var(--color-success-light)
}

.answer_verifying-correct.b-checkbox.checkbox,.answer_verifying-correct .b-checkbox.checkbox,.answer_verifying-correct.b-radio.radio,.answer_verifying-correct .b-radio.radio {
    overflow: hidden
}

.answer_verifying-correct.b-checkbox.checkbox:after,.answer_verifying-correct .b-checkbox.checkbox:after,.answer_verifying-correct.b-radio.radio:after,.answer_verifying-correct .b-radio.radio:after {
    content: "";
    height: 120px;
    width: 120px;
    border-radius: 50%;
    display: block;
    opacity: 0;
    position: absolute;
    top: -34px;
    left: -34px;
    background-color: var(--color);
    will-change: transition;
    -webkit-animation: flash .6s cubic-bezier(.25,.46,.45,.94) forwards;
    animation: flash .6s cubic-bezier(.25,.46,.45,.94) forwards
}

.answer_verifying-correct.b-radio.radio input[type=radio]+.check,.answer_verifying-correct .b-radio.radio input[type=radio]+.check {
    -webkit-box-shadow: 0 2px 6px 0 var(--color-alpha)!important;
    box-shadow: 0 2px 6px 0 var(--color-alpha)!important;
    border: 2px solid var(--color);
    display: block!important
}

.answer_verifying-correct.b-radio.radio input[type=radio]+.check:before,.answer_verifying-correct .b-radio.radio input[type=radio]+.check:before {
    background: var(--color);
    -webkit-transform: scale(.5);
    transform: scale(.5)
}

.answer_verifying-correct.b-checkbox.checkbox input[type=checkbox]+.check,.answer_verifying-correct .b-checkbox.checkbox input[type=checkbox]+.check {
    background: url(../img/mark.e3f2a312.svg) no-repeat 50%/.9rem!important;
    background-color: var(--color)!important;
    -webkit-transition: none!important;
    transition: none!important
}

.answer_verifying-correct.b-checkbox.checkbox:after,.answer_verifying-correct .b-checkbox.checkbox:after {
    top: -37px
}

.answer-image:focus,.answer-image:hover,.answer-image_checked {
    border-color: var(--color-alpha);
    -webkit-box-shadow: 0 1px 3px 0 var(--color-bg-2,rgba(0,0,0,.1));
    box-shadow: 0 1px 3px 0 var(--color-bg-2,rgba(0,0,0,.1))
}
.answer_verifying-correct .answer-image,.answer_verifying-correct.answer-one-image__variant,.answer_verifying-correct.answer-variants__variant {
    border: solid 1px var(--color)!important
}

.answer_verifying-correct.answer-one-image__variant.b-radio.radio:after,.answer_verifying-correct.answer-one-image__variant .b-radio.radio:after {
    top: -37px
}

.answer_verifying-correct.answer-images__answer-container.b-checkbox.checkbox:after,.answer_verifying-correct.answer-images__answer-container .b-checkbox.checkbox:after,.answer_verifying-correct.answer-images__answer-container.b-radio.radio:after,.answer_verifying-correct.answer-images__answer-container .b-radio.radio:after {
    left: auto;
    top: -27px;
    right: -27px
}

.answer_verifying-correct.answer-images__answer-container .b-radio.radio input[type=radio]+.check:before {
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

.answer_verifying-correct.answer-images__answer-container .b-checkbox.checkbox input[type=checkbox]+.check {
    display: block!important;
    background: url(../img/mark.e3f2a312.svg) no-repeat 50%/21px!important;
    background-color: var(--color)!important
}

.answer_verifying-correct.answer-emoji__item-wrapper.b-checkbox.checkbox:after,.answer_verifying-correct.answer-emoji__item-wrapper .b-checkbox.checkbox:after,.answer_verifying-correct.answer-emoji__item-wrapper.b-radio.radio:after,.answer_verifying-correct.answer-emoji__item-wrapper .b-radio.radio:after {
    left: auto;
    top: -43px;
    right: -43px
}

.answer_verifying-correct.answer-emoji__item-wrapper.b-checkbox.checkbox,.answer_verifying-correct.answer-emoji__item-wrapper.b-radio.radio {
    border: solid 1px var(--color)
}

.answer_verifying-correct.answer-emoji__item-wrapper.b-checkbox.checkbox input[type=checkbox]+.check {
    display: block!important;
    background: url(../img/mark.e3f2a312.svg) no-repeat 50%/.9rem!important;
    background-color: var(--color)!important
}

.answer_verifying-wrong {
    --color-alpha: var(--color-danger);
    --color: var(--color-danger);
    pointer-events: none;
    background-color: var(--color-danger-light)
}

.answer-images__group .b-radio  input[type=checkbox]:checked+.check,.answer-images__group .b-radio .checkbox input[type=checkbox]:checked+.check {
    -webkit-animation: swing .6s ease-out forwards;
    animation: swing .6s ease-out forwards;
    background-image: url(../img/close.831d21da.svg);
    background-size: .6rem!important;
    background-position: 48%;
    -webkit-transition: none!important;
    transition: none!important;
    -moz-transition: none!important;
    -ms-transition: none!important;
    -o-transition: none!important;
}

.answer_verifying-wrong.b-radio.radio input[type=radio]:checked+.check,.answer_verifying-wrong .b-radio.radio input[type=radio]:checked+.check {
    -webkit-animation: headShake .6s ease-out forwards;
    animation: headShake .6s ease-out forwards
}
.answer-images .check {
    display: none!important;
    -webkit-box-flex: 0!important;
    -ms-flex: 0 0 1.25rem!important;
    flex: 0 0 1.25rem!important;
    position: absolute!important;
    z-index: 100!important;
    right: 15px!important;
    top: 15px!important;
    border-radius: 50%!important;
    width: 30px!important;
    height: 30px!important;
    background-color: hsla(0,0%,100%,.5)!important;
    -webkit-box-shadow: 0.6px 1.9px 6px 0 var(--color-alpha2)!important;
    box-shadow: 0.6px 1.9px 6px 0 var(--color-alpha2)!important;
    border: 2px solid var(--color)!important;
}
.answer_verifying-wrong.answer-emoji__item-wrapper.b-checkbox.checkbox,.answer_verifying-wrong.answer-emoji__item-wrapper.b-radio.radio {
    border: solid 1px var(--color-alpha)
}
.b-radio.radio input[type=radio]:checked+.check {
    -webkit-box-shadow: 0 2px 6px 0 var(--color-alpha)!important;
    box-shadow: 0 2px 6px 0 var(--color-alpha)!important;
    border: 2px solid var(--color);
    background: var(--color-bg-2,#fff);
}
.answer_verifying-wrong.answer-emoji__item-wrapper.b-checkbox.checkbox input[type=checkbox]:checked+.check {
    -webkit-animation: headShake .6s ease-out forwards;
    animation: headShake .6s ease-out forwards
}

.answer_verifying-wrong.answer-images__answer-container .b-checkbox.checkbox input[type=checkbox]:checked+.check {
    -webkit-animation: headShake .6s ease-out forwards;
    animation: headShake .6s ease-out forwards;
    background-size: 16px!important
}

.answer_verifying-wrong.answer-one-image__variant_selected {
    border-color: var(--color-danger)
}

.answer-select .select select option.answer_verifying-correct,.answer-select .select select option.answer_verifying-wrong {
    position: relative;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.answer-select .select select option.answer_verifying-correct:after,.answer-select .select select option.answer_verifying-wrong:after {
    position: absolute;
    right: 2%;
    top: 20%;
    bottom: 0;
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(../img/mark.e3f2a312.svg) no-repeat 50%/1.3rem;
    background-color: var(--color-success);
    border-radius: 50%
}

.answer-select .select select option.answer_verifying-wrong:after {
    background-color: var(--color-danger);
    -webkit-animation: headShake .6s ease-out forwards;
    animation: headShake .6s ease-out forwards
}

.answer-select .select select option.answer_verifying-correct:after {
    -webkit-animation: zoomIn .1s ease-in-out forwards;
    animation: zoomIn .1s ease-in-out forwards
}

.answer-select__verifying-correct .select.is-multiple select {
    border: 1px solid var(--color-success)
}

@media (max-width: 767px) {
    .answer-select__verifying-correct .select select option {
        color:var(--color-success)!important
    }
}

.answer-select__verifying-correct .select:not(.is-multiple):not(:active) {
    --color-bg-text: var(--color-success);
    --color-bg-2: var(--color-success);
    --color-lighten: var(--color-success);
    --color: var(--color-success)
}

.answer-select__verifying-correct .select select:hover {
    border: 1px solid var(--color-success)!important
}

.answer-select__verifying-wrong {
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.answer-select__verifying-wrong .select.is-multiple select {
    border: 1px solid var(--color-danger)
}

.answer-select__verifying-wrong .select:not(.is-multiple) {
    --color-bg-text: var(--color-danger);
    --color-bg-2: var(--color-danger);
    --color-lighten: var(--color-danger);
    --color: var(--color-danger)
}

.answer-select__verifying-wrong .select select:hover {
    border: 1px solid var(--color-danger)!important
}

@-webkit-keyframes dots {
    0% {
        content: ""
    }

    25% {
        content: "."
    }

    50% {
        content: ".."
    }

    75% {
        content: "..."
    }
}

@keyframes dots {
    0% {
        content: ""
    }

    25% {
        content: "."
    }

    50% {
        content: ".."
    }

    75% {
        content: "..."
    }
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes flash {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        opacity: .8
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes flash {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        opacity: .8
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@-webkit-keyframes button__preloader {
    0% {
        width: 0;
        left: 0
    }

    50% {
        width: 100%;
        left: 0
    }

    to {
        width: 0;
        left: 100%
    }
}

@keyframes button__preloader {
    0% {
        width: 0;
        left: 0
    }

    50% {
        width: 100%;
        left: 0
    }

    to {
        width: 0;
        left: 100%
    }
}

:root {
    --light-grey-blue: #b1b5be;
    --gray: #e2e2e2;
    --dark-grey-blue: #2e2e54;
    --light-blue-grey: #d2d4d8;
    --white-two: #f7f7f7;
    --grey-blue: #69748c;
    --black: #000;
    --color-danger: #d10a34;
    --color-success: #52bc77;
    --color-danger-light: rgba(209,10,52,0.05);
    --color-success-light: rgba(59,173,75,0.05)
}

@-webkit-keyframes fade-hide-button {
    0% {
        opacity: 0
    }

    30% {
        opacity: 0
    }

    to {
        opacity: .53
    }
}

@keyframes fade-hide-button {
    0% {
        opacity: 0
    }

    30% {
        opacity: 0
    }

    to {
        opacity: .53
    }
}

.answer-variants {
    width: 100%;
    height: 100%;
    max-height: 100%
}

.answer-variants__group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
    grid-gap: 16px;
    padding-bottom: 6px;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto
}
.answer-variants__group.answer-images__group {
    grid-template-columns: 1fr 1fr 1fr;

}
.answer-variants__group::-webkit-scrollbar {
    width: 10px
}

.answer-variants__group::-webkit-scrollbar-track {
    border-left: 8px solid transparent;
    -webkit-box-shadow: inset 0 0 10px 10px var(--color-bg-2,#eae9f1);
    box-shadow: inset 0 0 10px 10px var(--color-bg-2,#eae9f1)
}

.answer-variants__group::-webkit-scrollbar-thumb {
    border-left: 8px solid transparent;
    -webkit-box-shadow: inset 0 0 10px 10px var(--color);
    box-shadow: inset 0 0 10px 10px var(--color)
}

@media (max-width: 767px) {
    .answer-variants__group {
        grid-template-columns:1fr
    }
    .answer-variants__group.answer-images__group {
        grid-template-columns: 1fr 1fr;
    }
}

.answer-variants__group .answer-variants__variant {
    border-radius: 5px;
    border: solid 1px var(--color-bg-2,rgba(217,216,230,.55));
    will-change: box-shadow;
    -webkit-transition: -webkit-box-shadow .15s ease-out;
    transition: -webkit-box-shadow .15s ease-out;
    transition: box-shadow .15s ease-out;
    transition: box-shadow .15s ease-out,-webkit-box-shadow .15s ease-out
}

.answer-variants__group .answer-variants__variant:focus,.answer-variants__group .answer-variants__variant:hover {
    -webkit-box-shadow: 0 1px 3px 0 var(--color-bg-2,rgba(0,0,0,.1));
    box-shadow: 0 1px 3px 0 var(--color-bg-2,rgba(0,0,0,.1))
}

.answer-variants__group .answer-variants__variant label {
    padding: .8rem 1rem;
    width: 100%;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%
}

.answer-variants__group .answer-variants__variant label .control-label {
    padding-left: 0rem!important;
}

.answer-variants__group .answer-variants__variant label .check {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 1.25rem;
    flex: 0 0 1.25rem
}

.answer-variants__group .answer-variants__variant_selected {
    -webkit-box-shadow: 0 1px 3px 0 var(--color-bg-2,rgba(0,0,0,.1));
    box-shadow: 0 1px 3px 0 var(--color-bg-2,rgba(0,0,0,.1));
    border: solid 1px var(--color-alpha)
}

.answer-variants__other {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}

.answer-variants__other label {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 52px;
    flex: 1 1 52px;
    width: 52px!important;
    max-width: 52px
}

.answer-variants__other .field {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%
}

.answer-variants__other input {
    border: none!important;
    background: var(--color-bg-2,#f7f7f7);
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important
}

.answer-variants__other .control,.answer-variants__other input {
    height: 100%!important
}

.answer-variants_long .answer-variants__group {
    grid-template-columns: 1fr
}

.answer-variants_long .check {
    -ms-flex-item-align: start;
    align-self: flex-start
}

.answer-variants_has_image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 2rem
}

.answer-variants_has_image .answer-variants__group {
    grid-template-columns: 1fr;
    -webkit-box-flex: 2;
    -ms-flex: 2 1 47%;
    flex: 2 1 47%
}

.answer-variants_has_image .answer-variants__group .answer-variants__variant {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto
}

@media (max-width: 767px) {
    .answer-variants_has_image {
        -webkit-box-orient:vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .answer-variants_has_image .answer-variants__group,.answer-variants_has_image .answer-variants__image {
        -webkit-box-flex: 0;
        -ms-flex: none;
        flex: none
    }
}

.answer-variants__image {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 47%;
    flex: 0 1 47%
}

.answer-variants__image-img {
    border-radius: 4px
}

.answer-variants__image-loading {
    width: 100%;
    height: 275px;
    background: var(--color-bg-1,#f6f5f6);
    position: relative;
    padding: 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.answer-variants__image-loading:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: url(../img/image-loader.3e3a718c.svg) no-repeat 58% 48%;
    background-size: 75px auto
}

.quiz-container_rtl .answer-variants__group::-webkit-scrollbar-thumb,.quiz-container_rtl .answer-variants__group::-webkit-scrollbar-track {
    border-left: none;
    border-right: 8px solid transparent
}

.quiz-container_rtl .answer-variants__variant .control-label {
    padding-right: 1rem!important
}

.quiz-container_rtl .answer-variants__variant_has-hint .b-checkbox {
    padding-right: 1rem
}
