.component-quiz {
    --formFieldsGap: max(1.25em, 30px);
    --formInputSize: calc(var(--formInputTextSize) * 3.5);
    text-align: center;
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.component-quiz.quiz-started .step {
    transition: all 0.15s cubic-bezier(0.42, 0, 0.79, 0.33);
}

.component-quiz.quiz-started .step.active {
    transition: all 0.4s cubic-bezier(0.21, 0.67, 0.58, 1) 0.15s;
}

.component-quiz.quiz-started .form-field-image-content,
.component-quiz.quiz-started .quiz-prev {
    transition: all 0.35s ease;
}

.component-quiz.quiz-started .form-field-image-check {
    transition: opacity 0.35s ease;
}

.component-quiz.quiz-started .form-field-image-check-icon {
    transition: all 0.35s ease;
}

.component-quiz.step-change-animation,
.component-quiz.step-change-animation .step {
    display: flex;
}

.component-quiz .quiz-steps {
    padding: var(--normalGap) 0;
    min-height: 0;
    margin: auto 0;
    flex-grow: 1;
}

.component-quiz .quiz-steps,
.component-quiz .steps-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: inherit;
    width: 100%;
}

.component-quiz .steps-wrapper {
    height: 100%;
    flex-shrink: 0;
    flex-flow: row nowrap;
}

.component-quiz .step {
    position: absolute;
    left: 0;
    z-index: 0;
    display: none;
    flex-flow: column;
    align-items: center;
    justify-content: inherit;
    flex-shrink: 1;
    width: 100%;
    opacity: 0;
    outline: none;
    visibility: hidden;
    pointer-events: none;
}

.component-quiz .step.higher {
    align-self: flex-start;
}

.component-quiz .step.active {
    display: flex;
    visibility: visible;
    position: relative;
    opacity: 1;
    pointer-events: all;
    will-change: transform;
    z-index: 1;
    overflow: visible;
}

.component-quiz .step.next,
.component-quiz .step.prev {
    will-change: transform;
}

.component-quiz .step.next {
    transform: translateX(7px);
}

.component-quiz .step.prev {
    transform: translateX(-15px);
}

.component-quiz .quiz-submit {
    padding-top: 0;
}

.component-quiz .step-title {
    --fontSize: 30px;
    --letterSpacing: 0.25px;
    --lineHeight: 1.2;
    --fontWeight: 600;
    --textAlign: inherit;
    display: block;
    width: 50%;
    max-width: 550px;
    margin-bottom: var(--normalGap, 50px);
}

.component-quiz .policy-data-warning {
    margin-top: var(--formFieldsGap);
    max-width: 550px;
}

.component-quiz .policy-data-warning + .policy-data-warning {
    margin-top: calc(var(--formFieldsGap) / 2);
}

.component-quiz .form-field-image-group {
    position: relative;
    display: flex;
    justify-content: inherit;
    flex-flow: row wrap;
    margin: -25px;
}

.component-quiz .form-field-image-group[data-divisible='5'] {
    margin: -12px;
}

.component-quiz .form-field-image-group[data-divisible='5'] .form-field-image-item {
    width: 20%;
    padding: 12px;
}

.component-quiz .form-field-image-group.center {
    justify-content: center;
}

.component-quiz .form-field-image-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.component-quiz .form-field-image-item {
    display: block;
    width: 25%;
    padding: 25px;
    flex-shrink: 0;
    cursor: pointer;
}

.component-quiz .form-field-image-item input {
    display: none;
}

.component-quiz .form-field-image-item input:checked ~ .form-field-image-content .form-field-image-check {
    opacity: 1;
}

.component-quiz .form-field-image-item input:checked ~ .form-field-image-content .form-field-image-check .form-field-image-check-icon {
    opacity: 1;
    transform: translateZ(0);
}

.is-pointer .component-quiz .form-field-image-item:hover .form-field-image-check {
    opacity: 1;
}

.component-quiz .form-field-image-item .form-field-image-check {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: 0;
    background-color: rgba(27, 27, 28, 0.5);
    transform: translateZ(0);
}

.component-quiz .form-field-image-item .form-field-image-check-icon {
    opacity: 0;
    transform: scale(0.85);
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.component-quiz .form-field-image-item .form-field-image-text {
    color: currentColor;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: var(--formLabelTextSize);
    line-height: 1.2;
    margin-top: 1.46em;
    width: 100%;
    display: block;
    text-align: inherit;
}

.component-quiz .form-field-image-item .form-field-image-wrap {
    --proportion: 100%;
    position: relative;
    width: 100%;
}

.component-quiz .form-field-image-item .form-field-image-wrap.orient-horizontal {
    --proportion: 62%;
}

.component-quiz .form-field-image-item .form-field-image-wrap.orient-vertical {
    --proportion: 136%;
}

.component-quiz .form-field-image-item .form-field-image-img {
    position: relative;
    width: 100%;
    padding-bottom: var(--proportion);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.component-quiz .form-field-image-item .form-field-image-img.empty {
    background-size: 50px;
}

.component-quiz .captcha-global-error {
    display: none;
    margin: 0 0 15px;
}

.component-quiz.submitting .quiz-next,
.component-quiz.submitting .quiz-prev,
.component-quiz.submitting .quiz-submit {
    pointer-events: none;
}

.component-quiz.submitting .quiz-next .btn-text {
    opacity: 0;
}

.component-quiz.submitting .submitting-icon {
    display: block;
    opacity: 1;
}

.component-quiz.success .quiz-next .btn-text {
    opacity: 0;
}

.component-quiz.success .success-icon {
    display: block;
    opacity: 1;
}

.component-quiz.justify--start {
    text-align: left;
}

.component-quiz.justify--start .quiz-actions,
.component-quiz.justify--start .quiz-progress,
.component-quiz.justify--start .quiz-steps {
    justify-content: start;
}

.component-quiz.justify--start .policy-data-warning,
.component-quiz.justify--start .step-title {
    align-self: flex-start;
}

.component-quiz.justify--center .quiz-actions,
.component-quiz.justify--center .quiz-progress,
.component-quiz.justify--center .quiz-steps {
    justify-content: center;
}

.component-quiz.justify--center .quiz-fields {
    align-items: center;
}

.component-quiz.justify--center .suggestion-next {
    width: 200px;
    margin-right: -150px;
}

.component-quiz.justify--center .captcha-global-error {
    justify-content: center;
}

[data-quiz-part='progress'] {
    display: flex;
    width: 100%;
    justify-content: inherit;
}

[data-quiz-part='progress'][data-progress-style='circle'] {
    position: relative;
    min-height: 92px;
    display: flex;
    justify-content: inherit;
    align-items: center;
}

[data-quiz-part='progress'][data-progress-style='circle'] .quiz-progress-inner {
    display: flex;
    position: relative;
    justify-content: center;
    width: 60px;
    height: 60px;
}

[data-quiz-part='progress'][data-progress-style='circle'] .progress-text {
    display: flex;
    align-items: center;
    font-size: var(--formCaptionTextSize);
    line-height: 1.42857143;
}

[data-quiz-part='progress'][data-progress-style='circle'] .progress-loader-circle {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

[data-quiz-part='progress'][data-progress-style='circle'] .progress-percent {
    font-size: var(--formCaptionTextSize);
    line-height: 1.42857143;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    padding-left: 4px;
    left: 0;
    width: 100%;
}

[data-quiz-part='progress'] .progress-percent,
[data-quiz-part='progress'] .progress-text {
    text-align: center;
    font-size: 1rem;
    line-height: 1.375;
    text-transform: uppercase;
    font-weight: 700;
}

[data-quiz-part='progress'] .progress-text .current,
[data-quiz-part='progress'] .progress-text .total {
    margin: 0 5px;
}

[data-quiz-part='progress'] .progress-loader-bar {
    position: relative;
    width: 240px;
    height: 3px;
    margin-top: 37px;
}

[data-quiz-part='progress'] .progress-loader-bar .progress-loader-bg {
    width: 100%;
    height: 3px;
    background-color: currentColor;
    border-radius: 2px;
    top: 0;
    left: 0;
    line-height: 24px;
    opacity: 0.3;
}

[data-quiz-part='progress'] .progress-loader-bar .current {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 3px;
    background: currentColor;
    height: 100%;
    width: 0;
    transition: width 0.35s ease;
}

[data-quiz-part='progress'] .progress-loader-bar .progress-runner[data-value] {
    position: absolute;
    overflow: hidden;
    right: -20px;
    bottom: 12px;
    min-width: 40px;
    text-align: center;
    transition: all 0.3s ease;
    padding-bottom: 4px;
}

[data-quiz-part='progress'] .progress-loader-bar .progress-runner[data-value]:before {
    content: attr(data-value);
    line-height: 2;
    display: block;
    white-space: nowrap;
    font-size: var(--formCaptionTextSize);
    font-weight: 500;
    background-color: currentColor;
    border-radius: 3px;
    padding: 0 3px;
}

[data-quiz-part='progress'] .progress-loader-bar .progress-runner[data-value]:after {
    content: '';
    transform: translate(-50%);
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    transition: left 0.3s ease;
}

[data-quiz-part='progress'] .progress-loader-circle {
    display: inline-block;
    stroke: currentColor;
    fill: none;
}

[data-quiz-part='progress'] .progress-loader-circle .progress-loader-bg {
    opacity: 0.3;
}

[data-quiz-part='progress'] .progress-loader-circle .current {
    transition: all 0.35s ease;
}

[data-quiz-part='progress'] .progress-percent ~ .progress-loader-bar,
[data-quiz-part='progress'] .progress-text ~ .progress-loader-bar {
    margin-top: 20px;
}

.component-quiz.color--dark {
    --currentColor: var(--darkText);
    --contrastColor: var(--darkText_contrast);
}

.component-quiz.color--light {
    --currentColor: var(--lightText);
    --contrastColor: var(--lightText_contrast);
}

.component-quiz.color--auto .quiz-progress,
.component-quiz.color--dark .quiz-progress,
.component-quiz.color--light .quiz-progress {
    color: var(--currentColor);
}

.component-quiz.color--auto .progress-loader-bar .progress-runner[data-value]:before,
.component-quiz.color--dark .progress-loader-bar .progress-runner[data-value]:before,
.component-quiz.color--light .progress-loader-bar .progress-runner[data-value]:before {
    color: var(--contrastColor);
    background-color: var(--currentColor);
}

.component-quiz.color--auto .form-field-image-check circle,
.component-quiz.color--dark .form-field-image-check circle,
.component-quiz.color--light .form-field-image-check circle {
    fill: var(--currentColor);
}

.component-quiz.color--auto .form-field-image-check path,
.component-quiz.color--dark .form-field-image-check path,
.component-quiz.color--light .form-field-image-check path {
    fill: var(--contrastColor);
}

.quiz-actions {
    display: flex;
    align-items: center;
    justify-content: inherit;
    max-width: 100%;
    width: 100%;
    pointer-events: all;
}

.quiz-actions .quiz-submit {
    display: none;
}

.quiz-actions .suggestion-next {
    font-size: var(--formCaptionTextSize);
    color: currentColor;
    padding-left: 20px;
    text-align: left;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    will-change: opacity;
    opacity: 0.5;
}

.quiz-actions .quiz-prev {
    padding-left: 0;
    padding-right: 0;
    margin-left: -66px;
    margin-right: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.quiz-actions.show-prev .quiz-prev {
    margin-left: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.quiz-actions .quiz-button {
    --gapX: 22px;
    --gapY: 12px;
    --fontSize: 15px;
    --fontWeight: 500;
    --lineHeight: 1.47;
    --letterSpacing: 0;
    --buttonColor: var(--currentColor);
    --buttonBackground: var(--currentColor);
    --buttonBorder: var(--currentColor);
    --buttonBackgroundHover: var(--currentColor);
    --buttonColorHover: var(--contrastColor);
    min-width: 46px;
    min-height: 46px;
    color: var(--buttonColor);
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    font-weight: var(--fontWeight);
    letter-spacing: var(--letterSpacing);
}

.quiz-actions .quiz-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--borderRadius, 0);
    will-change: opacity;
    transition: all var(--transitionDuration) ease;
}

.quiz-actions .quiz-button.squared {
    --borderRadius: 7px;
}

.quiz-actions .quiz-button.rounded {
    --borderRadius: 50px;
}

.quiz-actions .quiz-button.weight--light {
    --fontWeight: 300;
}

.quiz-actions .quiz-button.weight--normal {
    --fontWeight: 400;
}

.quiz-actions .quiz-button.weight--bold {
    --fontWeight: 700;
}

.quiz-actions .quiz-button.filled {
    --buttonColor: var(--contrastColor);
}

.quiz-actions .quiz-button.filled.quiz-next {
    --currentColorHover: var(--contrastColor);
}

.quiz-actions .quiz-button.filled:before {
    background: var(--buttonBackground);
}

.quiz-actions .quiz-button.bordered:before {
    border: var(--buttonBorderWidth, 0) solid var(--buttonBorder);
}

.quiz-actions .quiz-button.bordered.line_size--small:before {
    --buttonBorderWidth: 1px;
}

.quiz-actions .quiz-button.bordered.line_size--medium:before {
    --buttonBorderWidth: 2px;
}

.quiz-actions .quiz-button.bordered.line_size--large:before {
    --buttonBorderWidth: 3px;
}

.quiz-actions .quiz-button.text--light {
    --buttonColor: var(--lightColor) !important;
    --buttonColorHover: var(--lightColor) !important;
}

.quiz-actions .quiz-button.text--dark {
    --buttonColor: var(--darkColor) !important;
    --buttonColorHover: var(--darkColor) !important;
}

.quiz-actions .quiz-button.transparent {
    --buttonColor: var(--currentColor) !important;
}

.quiz-actions .quiz-button.transparent:before {
    opacity: 0.2;
}

.quiz-actions .quiz-button.hover.effect--opacity:before {
    opacity: 0.85;
}

.quiz-actions .quiz-button.hover.effect--opacity.transparent:before {
    opacity: 0.3;
}

.quiz-actions .quiz-button.hover.effect--fill {
    color: var(--buttonColorHover, var(--buttonColor));
}

.quiz-actions .quiz-button.hover.effect--fill:before {
    background: var(--buttonBackgroundHover, var(--buttonBackground));
}

.quiz-actions .quiz-button.hover.effect--zoom:before {
    transform: scale(1.03);
}

.quiz-fields {
    display: flex;
    flex-flow: column;
    width: 100%;
    position: relative;
    z-index: 1;
    justify-content: inherit;
}

.quiz-fields .error {
    font-size: 0.8em;
    line-height: 1.33333333;
    padding: 5px 0 0;
    height: auto;
    position: absolute;
    top: 100%;
}

.quiz-fields .field {
    position: relative;
    /* width: 50%; */
    max-width: 100%;
    justify-content: inherit;
}

.form-field-radio-list_machine{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 55px;
}

.quiz-fields .field:not([data-type='hidden']) ~ .field {
    margin-top: var(--formFieldsGap);
}

.quiz-fields .field[data-type='hidden'] {
    display: none !important;
}

.quiz-fields .field[data-type='image'] {
    width: 100%;
    max-width: unset;
}

.quiz-fields .field[data-type='captcha'],
.quiz-fields .field[data-type='checkbox'],
.quiz-fields .field[data-type='radio'] {
    width: auto;
    width: -moz-max-content;
    width: max-content;
}

body.adaptive-mobile .quiz-fields .field[data-type='captcha'],
body.adaptive-mobile .quiz-fields .field[data-type='checkbox'],
body.adaptive-mobile .quiz-fields .field[data-type='radio'] {
    max-width: 100%;
}

.quiz-fields--multiple .field[data-type='captcha'],
.quiz-fields--multiple .field[data-type='checkbox'],
.quiz-fields--multiple .field[data-type='radio'] {
    width: 50%;
}

.quiz-fields .form-field-desc {
    padding-bottom: 10px;
    opacity: 0.5;
}

.quiz-fields .form-field-desc + .form-field-title {
    padding-bottom: 5px !important;
}

.quiz-fields .form-field {
    text-align: inherit;
    justify-content: inherit;
}

.quiz-fields .form-field[data-type='checkbox'] + [data-type='checkbox'] {
    margin-top: -10px;
}

.quiz-fields .error {
    position: relative;
    width: 100%;
    font-size: var(--formErrorTextSize);
    font-weight: 500;
    line-height: 1.2;
    height: 0;
    color: #ff714d;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.21, 0.67, 0.58, 1);
}

.quiz-fields .border {
    display: none;
}

.quiz-fields .is_error.animate {
    animation: shake 0.5s ease 1 both 0.2s;
}

.quiz-fields .is_error .error {
    height: 1lh;
    margin-top: 0.3em;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.quiz-fields .is_error .file-input .icon:not(.icon-file) {
    opacity: 1;
    color: #ff714d;
}

.quiz-fields .is_error .form-field-checkbox__box {
    opacity: 1;
    border-color: #ff714d;
}

.quiz-fields .form-button {
    position: relative;
}

.quiz-fields .form-button .g-recaptcha {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    pointer-events: all;
}

.quiz-fields .form-field-radio-item {
    padding: 8px 0;
    margin-bottom: 0;
    align-items: center;
}

.quiz-fields .form-field-radio-item:last-child {
    padding-bottom: 0;
}

.quiz-fields .form-field-radio-item:first-child {
    padding-top: 0;
}

.quiz-fields .form-field-checkbox-item {
    align-items: center;
    padding: 0.5rem 0;
}

body.adaptive-mobile .component-quiz {
    --formInputSize: 2.875em;
    --formFieldsGap: 1.875em;
    overflow: visible;
}

body.adaptive-mobile .component-quiz .quiz-progress[data-progress-style='bar'] .quiz-progress-inner,
body.adaptive-mobile .component-quiz .quiz-progress[data-progress-style='bar'] .quiz-progress-inner .progress-loader-bar {
    width: 100%;
}

body.adaptive-mobile .component-quiz .quiz-actions {
    flex-flow: row wrap;
    width: 100%;
}

body.adaptive-mobile .component-quiz .quiz-actions .suggestion-next {
    display: none;
}

body.adaptive-mobile .component-quiz .quiz-actions .quiz-next {
    flex-grow: 1;
}

body.adaptive-mobile .component-quiz .step-title {
    width: 100%;
}

body.adaptive-mobile .component-quiz .quiz-fields {
    align-items: flex-start;
}

body.adaptive-mobile .component-quiz .quiz-fields .field {
    padding: 0;
    width: 100%;
    min-width: 0;
}

body.adaptive-mobile .component-quiz .quiz-fields .field + .field {
    margin-top: 20px;
}

body.adaptive-mobile .component-quiz .quiz-fields .form-field {
    padding: 0;
}

body.adaptive-mobile .component-quiz .quiz-fields .field[data-type='checkbox'],
body.adaptive-mobile .component-quiz .quiz-fields .field[data-type='radio'] {
    min-width: auto;
}

body.adaptive-mobile .component-quiz .field[data-type='image'] {
    justify-content: flex-start;
    flex-grow: 1;
    flex-shrink: 0;
    margin-left: calc(50% - var(--100vw) / 2);
    width: var(--100vw);
}

body.adaptive-mobile .component-quiz .form-field-image-group {
    overflow-x: auto;
    display: flex;
    flex-flow: row;
    scroll-snap-type: x proximity;
    margin: 0;
}

body.adaptive-mobile .component-quiz .form-field-image-group .form-field-image-item {
    width: auto;
    padding: 0 var(--smallGap);
    scroll-snap-align: start;
}

body.adaptive-mobile .component-quiz .form-field-image-group .form-field-image-item:first-child {
    padding-left: 20px;
}

body.adaptive-mobile .component-quiz .form-field-image-group .form-field-image-item:last-child {
    padding-right: 20px;
}

body.adaptive-mobile .component-quiz .form-field-image-group .form-field-image-content {
    width: calc(var(--100vw) * 0.75);
    max-width: 240px;
}

body.adaptive-mobile [data-quiz-part='progress'][data-progress-style='bar'][data-current-progress='0'] .current .progress-runner {
    right: -40px;
}

body.adaptive-mobile [data-quiz-part='progress'][data-progress-style='bar'][data-current-progress='0'] .current .progress-runner:after {
    opacity: 0;
}

body.adaptive-mobile [data-quiz-part='progress'][data-progress-style='bar'][data-current-progress='100'] .current .progress-runner {
    right: 0;
    transform: translate(0);
}

body.adaptive-mobile [data-quiz-part='progress'][data-progress-style='bar'][data-current-progress='100'] .current .progress-runner:after {
    left: 100%;
    opacity: 0;
}
