.elementor-6951 .elementor-element.elementor-element-86c38f8{--display:flex;--background-transition:0.3s;}.elementor-6951 .elementor-element.elementor-element-86c38f8, .elementor-6951 .elementor-element.elementor-element-86c38f8::before{--border-transition:0.3s;}.elementor-6951 .elementor-element.elementor-element-7fc4686{--display:flex;--background-transition:0.3s;--border-radius:30px 30px 30px 30px;--margin-block-start:60px;--margin-block-end:60px;--margin-inline-start:0px;--margin-inline-end:0px;--padding-block-start:60px;--padding-block-end:60px;--padding-inline-start:60px;--padding-inline-end:60px;}.elementor-6951 .elementor-element.elementor-element-7fc4686:not(.elementor-motion-effects-element-type-background), .elementor-6951 .elementor-element.elementor-element-7fc4686 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AAA7E9;}.elementor-6951 .elementor-element.elementor-element-7fc4686, .elementor-6951 .elementor-element.elementor-element-7fc4686::before{--border-transition:0.3s;}.elementor-6951 .elementor-element.elementor-element-f97fe80 .elementor-heading-title{color:#FFFFFF;font-family:"Helvetica", Sans-serif;font-size:60px;font-weight:400;line-height:60px;}.elementor-6951 .elementor-element.elementor-element-2611234{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--gap:26px 26px;--background-transition:0.3s;--border-radius:40px 40px 40px 40px;--margin-block-start:30px;--margin-block-end:30px;--margin-inline-start:0px;--margin-inline-end:0px;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-6951 .elementor-element.elementor-element-2611234, .elementor-6951 .elementor-element.elementor-element-2611234::before{--border-transition:0.3s;}.elementor-6951 .elementor-element.elementor-element-2611234.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-6951 .elementor-element.elementor-element-e1712c7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:flex-start;--background-transition:0.3s;--margin-block-start:0px;--margin-block-end:0px;--margin-inline-start:0px;--margin-inline-end:0px;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-6951 .elementor-element.elementor-element-e1712c7.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-6951 .elementor-element.elementor-element-9ec50cb > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-6951 .elementor-element.elementor-element-36075a9{--display:flex;--min-height:600px;--background-transition:0.3s;--border-radius:20px 20px 20px 20px;--margin-block-start:0px;--margin-block-end:0px;--margin-inline-start:30px;--margin-inline-end:0px;--padding-block-start:40px;--padding-block-end:40px;--padding-inline-start:40px;--padding-inline-end:40px;}.elementor-6951 .elementor-element.elementor-element-36075a9:not(.elementor-motion-effects-element-type-background), .elementor-6951 .elementor-element.elementor-element-36075a9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-6951 .elementor-element.elementor-element-36075a9, .elementor-6951 .elementor-element.elementor-element-36075a9::before{--border-transition:0.3s;}@media(max-width:767px){.elementor-6951 .elementor-element.elementor-element-7fc4686{--padding-block-start:40px;--padding-block-end:40px;--padding-inline-start:20px;--padding-inline-end:20px;}.elementor-6951 .elementor-element.elementor-element-f97fe80 .elementor-heading-title{font-size:32px;line-height:38px;}.elementor-6951 .elementor-element.elementor-element-2611234{--margin-block-start:20px;--margin-block-end:0px;--margin-inline-start:0px;--margin-inline-end:0px;--padding-block-start:0px;--padding-block-end:0px;--padding-inline-start:0px;--padding-inline-end:0px;}.elementor-6951 .elementor-element.elementor-element-36075a9{--min-height:0px;--margin-block-start:0px;--margin-block-end:0px;--margin-inline-start:0px;--margin-inline-end:0px;--padding-block-start:20px;--padding-block-end:20px;--padding-inline-start:20px;--padding-inline-end:20px;}}@media(min-width:768px){.elementor-6951 .elementor-element.elementor-element-86c38f8{--content-width:1200px;}.elementor-6951 .elementor-element.elementor-element-e1712c7{--width:43.929%;}}/* Start custom CSS for html, class: .elementor-element-61c69f9 */button#next-button {
    background: #D9FF66 !important;
    color: black !important;
}

button .button-text {
      white-space: normal;
}

button.answer.disabled.incorrect span.button-text,
button.answer.disabled.selected-correct.correct span.button-text {
    background: #D9FF66 !important;
    color: black !important;
}
#progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    height: 30px;
    margin-bottom: 20px; /* Отступ от вопросов */
}

#progress-bar {
    height: 100%;
    background-color: #D9FF66; /* Цвет прогресс-бара */
    width: 0%; /* Изначально 0% */
    transition: width 0.3s; /* Плавное изменение ширины */
}

#progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #000;
}

#progress-container {
    width: 100%;
    background-color: black;
    border: 0px;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    height: 24px;
    margin-bottom: 20px;
}
#progress-bar {
    height: 100%;
    background-color: #D9FF66 !important;
    width: 0%;
    transition: width 0.3s;
}
#progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: white;
    font-size: 14px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d0bc9b0 */.comment {
    white-space: pre-line;
}
.quiz-container {
    background-color: white;
    border-radius: 8px;
    width: 100%;
    text-align: center;
}

button {
    margin-top: 20px;
    padding: 10px;
    background-color: #007bff;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

button:hover {
    background-color: transparent;
    color: black;
}

.answer {
    background-color: #e9e9e9;
    border: none;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    text-align: left;
    margin: 5px 0;
    cursor: pointer;
}

.answer.correct {
    background-color: #4CAF50;
    color: white;
}

.answer.incorrect {
    background-color: #f44336;
    color: white;
}

.comment {
    display: none;
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}

.result {
    margin-top: 20px;
    font-size: 1.2em;
}
.quest {
    text-align: left;
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 20px;
}

/* Стили для ответов */
.answer {
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    background-color: white;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 5px;
    color: black;
}

/* Стили для состояния "не выбранный вариант" */
.answer::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid black; /* Черная рамка */
    border-radius: 50%; /* Круг */
    margin-right: 10px;
    min-width: 24px;
}

/* Стили для состояния "не используется" */
.answer.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Стили для других вариантов ответа, когда выбран верный */
.answer.correct::before {
    border-color: #5F7A6B; /* Зеленая рамка */
    background-color: #5F7A6B; /* Зеленая галочка */
    content: '✔'; /* Галочка */
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
}

/* Стили для неверного варианта ответа */
.answer.incorrect::before {
    border-color: #C23934; /* Красная рамка */
    background-color: #C23934; /* Красный крест */
    content: '✖'; /* Крест */
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
}

/* Стили для верного варианта */
.answer.selected-correct::before {
    border-color: #5F7A6B; /* Зеленая рамка */
    background-color: #5F7A6B; /* Зеленая галочка */
    content: '✔'; /* Галочка */
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
}
.answer.disabled {
    cursor: not-allowed;
    opacity: 1;
}
.answer.correct {
    background-color: transparent;
    color: black;
}
.answer.selected-correct::before {
    border-color: #4E8765;
    background-color: white;
    content: '✔';
    color: white !important;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
}
.answer.correct::before {
   border-color: #4E8765;
    background-color: white;
    content: '✔';
    color: white !important;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
}
.answer.incorrect {
    background-color: transparent;
    color: black;
}
.answer.incorrect::before {
    border-color: #FF0707;
    background-color: white;
    content: '✖';
    color: #FF0707 !important;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
}
.comment {
    text-align: left;
    font-size: 16px;
    padding-left: 46px;
    margin-top: -16px;
}
button.answer {
    margin-bottom: 35px;
}
.comment {
    text-align: left;
    font-size: 16px;
    padding-left: 43px;
    margin-top: -41px;
    position: absolute;
}

.comment {
    text-align: left;
    font-size: 16px;
    padding-left: 43px;
    margin-top: -41px;
    position: absolute;
    font-size: 15px;
    line-height: 21px;
    font-family: roboto;
}

button#next-button {
    background: #4E8765;
    color: white;
    font-size: 18px;
    padding: 15px;
}
.answer.correct::before {
    border-color: #4E8765;
    background-color: white;
    content: '';
    color: white !important;
    font-size: 12px;
    text-align: center;
    line-height: 20px;
    background-image: url(https://hr.dhabits.ru/wp-content/uploads/2024/08/primary.png);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}
.answer.incorrect::before {
    border-color: #FF0707;
    background-color: white;
    content: '';
    color: tra;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    background-image: url(https://hr.dhabits.ru/wp-content/uploads/2024/08/Vector-30.png);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}
button.answer.disabled.selected-correct.correct span.button-text {
    background: #4E8765;
    color: white;
    padding: 2px 5px;
    border-radius: 6px;
}
button.answer.disabled.incorrect span.button-text {
    background: #4E8765;
    color: white;
    padding: 2px 5px;
    border-radius: 6px;
}
span.button-text {
    padding: 2px 0px;
}
.result {
    margin-top: 20px;
    font-size: 1.2em;
    text-align: left;
    font-size: 22px;
    line-height: 33px;
}

button#share-button {
    background: black;
    color: white;
    font-size: 18px;
    padding: 15px;
}
@media screen and (max-width:640px) {
    button.answer {
    padding: 0px;
}
span.button-text {
    padding: 2px 0px;
    font-size: 15px;
}
.comment {
        text-align: left;
        font-size: 16px;
        padding-left: 34px;
        margin-top: -42px;
        position: absolute;
        font-size: 13px;
        line-height: 13px;
        font-family: roboto;
    }
    button.answer {
    margin-bottom: 45px;
}


}
button.answer.disabled:before {
    border-color: #FB0B0B !important;
}
button.answer.disabled.selected-correct.correct:before,button.answer.disabled.correct:before {
    border-color: #4E8765 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36075a9 */div#progress-text {
    background: black;
    padding: 0px 7px;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2611234 */.comment {
    position: relative;
    margin-top: 5px !important;
}
button.answer {
    margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-86c38f8 */button#share-button {
    display: none !important;
}/* End custom CSS */