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: 100px;    
    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;
}

#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: 16px 24px 16px 24px;
  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%;
}

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

.offer-container .products-box.has-disclaimer button.btn-get-my-plan:last-child{
    margin-bottom: 0;
}