h1, .Heading__H1__default {
    font-size: var(--Heading-H1-fontSize);
    font-family: var(--Heading-H1-fontFamily);
    font-weight: var(--Heading-H1-fontWeight);
    line-height: var(--Heading-H1-lineHeight);
    letter-spacing: var(--Heading-H1-letterSpacing);
}

.Heading__H1__emphasis {
    font-size: var(--Heading-H1-fontSize);
    font-family: var(--Heading-H1-fontFamily);
    font-weight: var(--Heading-H1-emphasis-fontWeight);
    line-height: var(--Heading-H1-lineHeight);
    letter-spacing: var(--Heading-H1-letterSpacing);
}

h2, .Heading__H2__default {
    font-size: var(--Heading-H2-fontSize);
    font-family: var(--Heading-H2-fontFamily);
    font-weight: var(--Heading-H2-fontWeight);
    line-height: var(--Heading-H2-lineHeight);
    letter-spacing: var(--Heading-H2-letterSpacing);
}

.Heading__H2__emphasis {
    font-size: var(--Heading-H2-fontSize);
    font-family: var(--Heading-H2-fontFamily);
    font-weight: var(--Heading-H2-emphasis-fontWeight);
    line-height: var(--Heading-H2-lineHeight);
    letter-spacing: var(--Heading-H2-letterSpacing);
}

h3, .Heading__H3__default {
    font-size: var(--Heading-H3-fontSize);
    font-family: var(--Heading-H3-fontFamily);
    font-weight: var(--Heading-H3-fontWeight);
    line-height: var(--Heading-H3-lineHeight);
    letter-spacing: var(--Heading-H3-letterSpacing);
}

.Heading__H3__emphasis {
    font-size: var(--Heading-H3-fontSize);
    font-family: var(--Heading-H3-fontFamily);
    font-weight: var(--Heading-H3-emphasis-fontWeight);
    line-height: var(--Heading-H3-lineHeight);
    letter-spacing: var(--Heading-H3-letterSpacing);
}

h4, .Heading__H4__default {
    font-size: var(--Heading-H4-fontSize);
    font-family: var(--Heading-H4-fontFamily);
    font-weight: var(--Heading-H4-fontWeight);
    line-height: var(--Heading-H4-lineHeight);
    letter-spacing: var(--Heading-H4-letterSpacing);
}

.Heading__H4__emphasis {
    font-size: var(--Heading-H4-fontSize);
    font-family: var(--Heading-H4-fontFamily);
    font-weight: var(--Heading-H4-emphasis-fontWeight);
    line-height: var(--Heading-H4-lineHeight);
    letter-spacing: var(--Heading-H4-letterSpacing);
}

.Body__medium__default {
    font-size: var(--Body-medium-regular-fontSize);
    font-family: var(--Body-medium-regular-fontFamily);
    font-weight: var(--Body-medium-regular-fontWeight);
    line-height: var(--Body-medium-regular-lineHeight);
    letter-spacing: var(--Body-medium-regular-letterSpacing);
}

.Body__medium__emphasis {
    font-size: var(--Body-medium-regular-fontSize);
    font-family: var(--Body-medium-regular-fontFamily);
    font-weight: var(--Body-medium-emphasis-fontWeight);
    line-height: var(--Body-medium-regular-lineHeight);
    letter-spacing: var(--Body-medium-regular-letterSpacing);
}

.Body__small__default {
    font-size: var(--Body-small-regular-fontSize);
    font-family: var(--Body-small-regular-fontFamily);
    font-weight: var(--Body-small-regular-fontWeight);
    line-height: var(--Body-small-regular-lineHeight);
    letter-spacing: var(--Body-small-regular-letterSpacing);
}

.Body__small__emphasis {
    font-size: var(--Body-small-regular-fontSize);
    font-family: var(--Body-small-regular-fontFamily);
    font-weight: var(--Body-small-emphasis-fontWeight);
    line-height: var(--Body-small-regular-lineHeight);
    letter-spacing: var(--Body-small-regular-letterSpacing);
}

.Label__large__default {
    font-size: var(--Label-large-fontSize);
    font-family: var(--Label-large-fontFamily);
    font-weight: var(--Label-large-fontWeight);
    line-height: var(--Label-large-lineHeight);
    letter-spacing: var(--Label-large-letterSpacing);
}

.Label__large__emphasis {
    font-size: var(--Label-large-fontSize);
    font-family: var(--Label-large-fontFamily);
    font-weight: var(--Label-large-emphasis-fontWeight);
    line-height: var(--Label-large-lineHeight);
    letter-spacing: var(--Label-large-letterSpacing);
}

.Label__medium__default {
    font-size: var(--Label-medium-fontSize);
    font-family: var(--Label-medium-fontFamily);
    font-weight: var(--Label-medium-fontWeight);
    line-height: var(--Label-medium-lineHeight);
    letter-spacing: var(--Label-medium-letterSpacing);
}

.Label__medium__emphasis {
    font-size: var(--Label-medium-fontSize);
    font-family: var(--Label-medium-fontFamily);
    font-weight: var(--Label-medium-emphasis-fontWeight);
    line-height: var(--Label-medium-lineHeight);
    letter-spacing: var(--Label-medium-letterSpacing);
}

.Label__small__default {
    font-size: var(--Label-small-fontSize);
    font-family: var(--Label-small-fontFamily);
    font-weight: var(--Label-small-fontWeight);
    line-height: var(--Label-small-lineHeight);
    letter-spacing: var(--Label-small-letterSpacing);
}

.Label__small__emphasis {
    font-size: var(--Label-small-fontSize);
    font-family: var(--Label-small-fontFamily);
    font-weight: var(--Label-small-emphasis-fontWeight);
    line-height: var(--Label-small-lineHeight);
    letter-spacing: var(--Label-small-letterSpacing);
}

.Label__extrasmall__default {
    font-size: var(--Label-extrasmall-fontSize);
    font-family: var(--Label-extrasmall-fontFamily);
    font-weight: var(--Label-extrasmall-fontWeight);
    line-height: var(--Label-extrasmall-lineHeight);
    letter-spacing: var(--Label-extrasmall-letterSpacing);
}

.Label__extrasmall__emphasis {
    font-size: var(--Label-extrasmall-fontSize);
    font-family: var(--Label-extrasmall-fontFamily);
    font-weight: var(--Label-extrasmall-emphasis-fontWeight);
    line-height: var(--Label-extrasmall-lineHeight);
    letter-spacing: var(--Label-extrasmall-letterSpacing);
}

.Captions__large__default {
    font-size: var(--Caption-large-fontSize);
    font-family: var(--Caption-large-fontFamily);
    font-weight: var(--Caption-large-fontWeight);
    line-height: var(--Caption-large-lineHeight);
    letter-spacing: var(--Caption-large-letterSpacing);
}

.Captions__large__emphasis {
    font-size: var(--Caption-large-fontSize);
    font-family: var(--Caption-large-fontFamily);
    font-weight: var(--Caption-large-emphasis-fontWeight);
    line-height: var(--Caption-large-lineHeight);
    letter-spacing: var(--Caption-large-letterSpacing);
}

.Captions__small__default {
    font-size: var(--Caption-small-fontSize);
    font-family: var(--Caption-small-fontFamily);
    font-weight: var(--Caption-small-fontWeight);
    line-height: var(--Caption-small-lineHeight);
    letter-spacing: var(--Caption-small-letterSpacing);
}

.Captions__small__emphasis {
    font-size: var(--Caption-small-fontSize);
    font-family: var(--Caption-small-fontFamily);
    font-weight: var(--Caption-small-emphasis-fontWeight);
    line-height: var(--Caption-small-lineHeight);
    letter-spacing: var(--Caption-small-letterSpacing);
}

/* text styles */
.color-text-default {
    color: var(--text-text-default);
}

.color-text-secondary {
    color: var(--text-text-secondary);
}

.color-text-tertiary {
    color: var(--text-text-tertiary);
}

.color-text-brand {
    color: var(--text-text-brand);
}

.color-text-brand-accent {
    color: var(--text-text-brand-accent);
}

.color-text-onbrand {
    color: var(--text-text-onbrand);
}

.color-text-onbrand-secondary {
    color: var(--text-text-onbrand-secondary);
}

.color-text-onbrand-tertiary {
    color: var(--text-text-onbrand-tertiary);
}

.color-text-danger {
    color: var(--text-text-danger);
}

.color-text-warning {
    color: var(--text-text-warning);
}

.color-text-success {
    color: var(--text-text-success);
}

.color-text-success-secondary {
    color: var(--text-text-success-secondary);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100%;

    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    line-height: var(--default-line-height);
    letter-spacing: var(--default-letter-spacing);
    background-color: var(--bg-bg-default);
    color: var(--text-text-default);
}

a {
    color: var(--text-text-default);
    text-decoration: none;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

/* grid */
.grid-columns {
    display: grid;
    gap: 32px;
    align-items: flex-start;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    width: 100%;
}

.grid-columns.compact {
    gap: 20px;
}

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

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

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

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

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

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

.grid-columns > .grid-entire-row {
    grid-column: 1 / -1;
}

.grid-columns.stretch {
    align-items: stretch;
}

button,
.button.primary {
    border-radius: var(--radius-full, 9999px);
    background: var(--Gradient-linear);    
    white-space: nowrap;
    padding: 16px 24px;
    border: none;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    color: var(--text-text-onbrand);
    font-family: var(--Label-large-fontFamily);
    font-size: var(--Label-large-fontSize);
    font-weight: var(--Label-large-emphasis-fontWeight);
    line-height: var(--Label-large-lineHeight);
    letter-spacing: var(--Label-large-letterSpacing, 0);
}

button:active,
.button.primary:active {
    opacity: 0.9;
    transform: scale(0.95);
    transform-origin: center;
}

button:disabled,
.button.primary:disabled {
    opacity: 0.5;
    cursor: default;
}

button:focus,
.button.primary:focus {
    border: none;
    outline: none;
}

.button.secondary {
    border: 2px solid transparent;
    border-radius: 100px;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(306deg, var(--bg-bg-accent) 39.24%, var(--bg-bg-brand) 89.18%) border-box;
}

.button.secondary span {
    background-image: linear-gradient(306deg, var(--bg-bg-accent) 39.24%, var(--bg-bg-brand) 89.18%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}


.button.tertiary {
    border-radius: 100px;
    background: var(--Gradient-linear);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.button.tertiary-grey {
    color: var(--text-text-tertiary);
    background: transparent;
}


input, textarea {
    border-radius: 16px;
    background-color: transparent;
    padding: 19px 24px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid #FFFFFFE0;
    outline: none;
    color: #FFFFFFE0;
}

input:invalid {
    border-color: #ff0000;
}

input::placeholder {
    color: #FFFFFFA3;
}

input:focus, textarea:focus {
    border-color: #F45C43;
}

input:invalid, textarea:invalid {
    border-color: #EB3349;
}

.animated-button.active {
    transition: all var(--button-animation-speed, 0.2s) ease-out;
    transform: scale(0.95);
}

.page-wrapper {
    width: 100%;
    max-width: var(--Page-wrapper-width);
    margin: 0 auto;
}

#quiz-container .page-wrapper {
    padding: 0;
}

/* animations */

@keyframes animation-ripple {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        width: 200%;
        padding-bottom: 200%;
        opacity: 0;
    }
}

.ripple {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    z-index: 2;
}

.animated-button .ripple {
    display: none;
}

.ripple-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.ripple.active .ripple-circle {
    -webkit-animation: animation-ripple 0.4s ease-in;
    animation: animation-ripple 0.4s ease-in;
}

body #quiz-container #slide-body {
    padding-bottom: 110px;
}

#quiz-container.quiz-container-no-footer #slide-body {
    padding-bottom: 0;
}

/* quiz */
#quiz-container {
    margin: 0 0 110px 0;
    padding: 0 var(--Spacers-s16);
    min-height: 100%;
    background-color: inherit;
}


/* body */
#quiz-body {
    min-height: 300px;
    font-size: var(--default-font-size);
    font-style: normal;
    font-weight: var(--default-font-weight);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    text-align: center;
}

#quiz-body .slide-description {
    font-size: var(--Body-small-regular-fontSize);
    font-family: var(--Body-small-regular-fontFamily);
    font-weight: var(--Body-small-regular-fontWeight);
    line-height: var(--Body-small-regular-lineHeight);
    letter-spacing: var(--Body-small-regular-letterSpacing);
}

#quiz-body .slide-description .highlight {
    color: var(--text-text-brand);
    font-weight: var(--Body-small-emphasis-fontWeight);
}

/* footer */
#quiz-submit-block.hidden-quiz-submit-block {
    display: none;
}

#quiz-submit-block {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--Spacers-s16,16px);
    z-index: 11;
    background: linear-gradient(180deg, var(--Alias-bg-overlay-0) 0%, var(--Alias-bg-overlay-80) 50%, var(--Alias-bg-overlay-100) 100%);
}

#quiz-submit-button-new {
    width: 100%;
    max-width: 430px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

#quiz-submit-button-new.button-text-uppercase {
    text-transform: uppercase;
}

#preloader-frame {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: -1;
    background-color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease-in-out 0.2s;
}

#preloader-frame.active {
    z-index: 10;
    opacity: 1;
}

.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.dots span {
    width: 4px;
    height: 4px;
    background: var(--icon-icon-accent, #6EB0F2);
    border-radius: 100%;
}

/* region compliance */

/* timer */
.timer-wrapper {
    padding: 0;
    width: 100%;
    top: 16px;
    display: block;
    max-width: 398px;
    box-shadow: 0 8px 16px 0 rgba(0, 128, 255, 0.20);
}

.timer-wrapper .timer-container {
    max-width: 430px;
    padding: 16px 24px;
    gap: 8px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.offer-container .products-box .products-descr p.secondary-text {
    color: #818181;
}

body.compliance-disclaimer .offer-container .products-box {
    margin-bottom: 16px;
}

body.compliance-disclaimer #payment-modal .modal-window-body {
    padding-top: 0;
}

body.compliance-disclaimer #payment-modal .modal-window-head {
    padding-bottom: 8px;
}

body.compliance-disclaimer .payment-methods-container {
    padding-top: 8px;
}

body.compliance-disclaimer .payment-methods-container .payment-methods-info {
    margin-bottom: 8px;
}

body.compliance-disclaimer .payment-methods-info > .discount-title {
    margin-bottom: 8px;
}

body.compliance-disclaimer .payment-methods-container .invoice-table {
    margin-top: 8px;
    padding-top: 4px;
}

body.compliance-disclaimer .payment-methods-container .payment-methods-info .row.strong {
    padding: 2px;
}

body.compliance-disclaimer .invoice-small-disclaimer {
    color: #1E1E1E;
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
    padding: 2px;
}

body.compliance-disclaimer .invoice-disclaimer {
    font-weight: 500;
}

body.compliance-disclaimer .payment-methods-container .payment-methods-info .row.row-discount {
    margin-top: 0;
}

/* endregion */