:root {

    /* GAPS DESKTOP */

    --g1: 0.25rem;
    --g2: 0.5rem;
    --g3: 0.75rem;
    --g4: 1rem;
    --g5: 1.25rem;
    --g6: 1.5rem;
    --g7: 1.75rem;
    --g8: 2rem;
    --g9: 2.5rem;
    --g10: 3rem;
    --g11: 3.5rem;
    --g12: 4rem;
    --g13: 5rem;
    --g14: 6rem;
    --g15: 7.5rem;
    --g16: 9rem;
    --g17: 10rem;
    --g18: 11rem;
    --g19: 14.5rem;

    /* GAPS MOBILE */

    --g1-mobile: 0.25rem;
    --g2-mobile: 0.5rem;
    --g3-mobile: 0.75rem;
    --g4-mobile: 1rem;
    --g5-mobile: 1rem;
    --g6-mobile: 1.25rem;
    --g7-mobile: 1.5rem;
    --g8-mobile: 1.5rem;
    --g9-mobile: 2rem;
    --g10-mobile: 2rem;
    --g11-mobile: 2.5rem;
    --g12-mobile: 2.5rem;
    --g13-mobile: 3rem;
    --g14-mobile: 3.5rem;
    --g15-mobile: 4rem;
    --g16-mobile: 5rem;
    --g17-mobile: 6rem;
    --g18-mobile: 7rem;
    --g19-mobile: 9rem;

    /* H1 - H5  Desktop */

    --h1-font-size: 2.75rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.25rem;

    /* H1 - H5  Mobile */

    --h1-font-size-mobile: 2rem;
    --h2-font-size-mobile: 1.75rem;
    --h3-font-size-mobile: 1.5rem;
    --h4-font-size-mobile: 1.25rem;
    --h5-font-size-mobile: 1.125rem;

    /* Text Size Desktop */

    --text-font-size-20: 1.25rem;
    --text-font-size-18: 1.125rem;
    --text-font-size-16: 1rem;
    --text-font-size-15: 0.9375rem;
    --text-font-size-14: 0.875rem;
    --text-font-size-13: 0.8125rem;
    --text-font-size-12: 0.75rem;

    /* Text Size Mobile */

    --text-font-size-20-mobile: 1.125rem;
    --text-font-size-18-mobile: 1rem;
    --text-font-size-16-mobile: 0.9375rem;
    --text-font-size-15-mobile: 0.875rem;
    --text-font-size-14-mobile: 0.875rem;
    --text-font-size-13-mobile: 0.8125rem;
    --text-font-size-12-mobile: 0.75rem;

    /* COLORS */

    --brand-blue: #3761E9;
    --brand-blue-hover: #1C4ADE;
    --brand-red: #ff7188;
    --grey-btn-on-white: rgba(55, 97, 233, 0.1);
    --grey-btn-on-white-hover: #3761E933;
    --white: #FFFFFF; 
    --title-color: #333338;
    --text-color: #555558;
    --secondary-color: #969AA5;
    --border-color: #E6E9F2;
    --main-bg-color: #F5F7FC;
    --header-shadow: rgba(38, 38, 62, 0.04);
    --special-grey: #F3F4F9;
    --special-grey-darken: #F0F2F8;
    --placeholder-color: #91A2B6;
    --slider-bullet-color: #D6DBE5;

    /* OFFSET-STUFF */

    --offset-1: var(--g1); /* 4px */
    --offset-2: var(--g2); /* 8px */
    --offset-3: var(--g3); /* 12px */
    --offset-4: var(--g4); /* 16px */
    --offset-5: clamp(var(--g5-mobile), 2vw , var(--g5));  
    --offset-6: clamp(var(--g6-mobile), 2vw, var(--g6));
    --offset-7: clamp(var(--g7-mobile), 3vw, var(--g7));
    --offset-8: clamp(var(--g8-mobile), 3vw, var(--g8));
    --offset-9: clamp(var(--g9-mobile), 3vw, var(--g9));
    --offset-10: clamp(var(--g10-mobile), 4vw, var(--g10));
    --offset-11: clamp(var(--g11-mobile), 5vw, var(--g11));
    --offset-12: clamp(var(--g12-mobile), 6vw , var(--g12));
    --offset-13: clamp(var(--g13-mobile), 7vw, var(--g13));
    --offset-14: clamp(var(--g14-mobile), 8vw , var(--g14));
    --offset-15: clamp(var(--g15-mobile), 9vw, var(--g15));
    --offset-16: clamp(var(--g16-mobile), 9vw, var(--g16));
    --offset-17: clamp(var(--g17-mobile), 14vw, var(--g17));
    --offset-18: clamp(var(--g18-mobile), 15vw, var(--g18));
    --offset-19: clamp(var(--g19-mobile), 15vw, var(--g19));


    /* UTILS */

    --header-height: 72px;
}

html,
body {
  font-family: "Inter", Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
}

body {
  font-weight: 400;
}

/* BLOCKS */

.block.light-grey{
  background: var(--main-bg-color);
}

.block.block--centered .block__body{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.block.block--centered .container{
  padding: 0;
}

/* BUTTONS */

.btn {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--brand-blue);
  font-size: var(--text-regular);
  line-height: 1.57;
  padding: 0.5rem 1rem;
  /* TODO */
  border-radius: 8px;
  border: 1px solid var(--brand-blue);
  transition: all 0.3s ease-in-out;
  background-color: transparent;
  transform: translate3d(0, 0, 0);
  text-wrap: nowrap;
}

.btn--header{
  padding: 0.3125rem 0.75rem;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: var(--white);
  background-color: var(--brand-blue);
  transition: all 0.5s ease-out;
}

.btn.btn--blue:not(.btn--white) {
  color: var(--white);
  background-color: var(--brand-blue);
}

.btn.link{
  border-color: transparent;
  padding: 0 0 0 var(--offset-4);
}


@media (any-hover: hover) {
  .btn.btn--blue:hover {
    background-color: var(--brand-blue-hover);
  }

  .btn--header:hover{
    background-color: var(--brand-blue-hover);
  }

  .btn.link:hover{
    color: var(--brand-blue-hover);
  }
}

@media (max-width: 524px) {
    .btn--header{
        color: var(--brand-blue);
        border: 1px solid transparent;
        background-color: var(--grey-btn-on-white);
    }

    @media (any-hover: hover) {
        .btn--header:hover{
            color: var(--brand-blue);
            border: 1px solid transparent;
            background-color: var(--grey-btn-on-white-hover);
        }
    }
}

/* BUTTON SIZES */

.btn--large{
  padding: 0.875rem 1.75rem;
}

.btn--medium{
  padding: 0.6875rem 1.25rem;
}

.btn--small{
  padding: 0.5rem 1rem;
}

.btn--xs{
  padding: 0.375rem 0.75rem;
}

/* mt-* */

.mt-1{
  margin-top: var(--offset-1);
}
.mt-2{
  margin-top: var(--offset-2);
}
.mt-3{
  margin-top: var(--offset-3);
}

.mt-4{
  margin-top: var(--offset-4);
}

.mt-5{
  margin-top: var(--offset-5);
}

.mt-6{
  margin-top: var(--offset-6);
}

.mt-7{
  margin-top: var(--offset-7);
}

.mt-8{
  margin-top: var(--offset-8);
}

.mt-9{
  margin-top: var(--offset-9);
}

.mt-10{
  margin-top: var(--offset-10);
}

.mt-11{
  margin-top: var(--offset-11);
}

.mt-12{
  margin-top: var(--offset-12);
}

.mt-13{
  margin-top: var(--offset-13);
}

.mt-14{
  margin-top: var(--offset-14);
}

.mt-15{
  margin-top: var(--offset-15);
}

.mt-16{
  margin-top: var(--offset-16);
}

.mt-17{
  margin-top: var(--offset-17);
}

.mt-18{
  margin-top: var(--offset-18);
}

.mt-19{
  margin-top: var(--offset-19);
}
/* mb */
.mb-1{
  margin-bottom: var(--offset-1);
}
.mb-2{
  margin-bottom: var(--offset-2);
}
.mb-3{
  margin-bottom: var(--offset-3);
}

.mb-4{
  margin-bottom: var(--offset-4);
}

.mb-5{
  margin-bottom: var(--offset-5);
}

.mb-6{
  margin-bottom: var(--offset-6);
}

.mb-7{
  margin-bottom: var(--offset-7);
}

.mb-8{
  margin-bottom: var(--offset-8);
}

.mb-9{
  margin-bottom: var(--offset-9);
}

.mb-10{
  margin-bottom: var(--offset-10);
}

.mb-11{
  margin-bottom: var(--offset-11);
}

.mb-12{
  margin-bottom: var(--offset-12);
}

.mb-13{
  margin-bottom: var(--offset-13);
}

.mb-14{
  margin-bottom: var(--offset-14);
}

.mb-15{
  margin-bottom: var(--offset-15);
}

.mb-16{
  margin-bottom: var(--offset-16);
}

.mb-17{
  margin-bottom: var(--offset-17);
}

.mb-18{
  margin-bottom: var(--offset-18);
}

.mb-19{
  margin-bottom: var(--offset-19);
}
/* pt-* */
.pt-1{
  padding-top: var(--offset-1);
}
.pt-2{
  padding-top: var(--offset-2);
}
.pt-3{
  padding-top: var(--offset-3);
}

.pt-4{
  padding-top: var(--offset-4);
}

.pt-5{
  padding-top: var(--offset-5);
}

.pt-6{
  padding-top: var(--offset-6);
}

.pt-7{
  padding-top: var(--offset-7);
}

.pt-8{
  padding-top: var(--offset-8);
}

.pt-9{
  padding-top: var(--offset-9);
}

.pt-10{
  padding-top: var(--offset-10);
}

.pt-11{
  padding-top: var(--offset-11);
}

.pt-12{
  padding-top: var(--offset-12);
}

.pt-13{
  padding-top: var(--offset-13);
}

.pt-14{
  padding-top: var(--offset-14);
}

.pt-15{
  padding-top: var(--offset-15);
}

.pt-16{
  padding-top: var(--offset-16);
}

.pt-17{
  padding-top: var(--offset-17);
}

.pt-18{
  padding-top: var(--offset-18);
}

.pt-19{
  padding-top: var(--offset-19);
}
/* pb-* */
.pb-1{
  padding-bottom: var(--offset-1);
}
.pb-2{
  padding-bottom: var(--offset-2);
}
.pb-3{
  padding-bottom: var(--offset-3);
}

.pb-4{
  padding-bottom: var(--offset-4);
}

.pb-5{
  padding-bottom: var(--offset-5);
}

.pb-6{
  padding-bottom: var(--offset-6);
}

.pb-7{
  padding-bottom: var(--offset-7);
}

.pb-8{
  padding-bottom: var(--offset-8);
}

.pb-9{
  padding-bottom: var(--offset-9);
}

.pb-10{
  padding-bottom: var(--offset-10);
}

.pb-11{
  padding-bottom: var(--offset-11);
}

.pb-12{
  padding-bottom: var(--offset-12);
}

.pb-13{
  padding-bottom: var(--offset-13);
}

.pb-14{
  padding-bottom: var(--offset-14);
}

.pb-15{
  padding-bottom: var(--offset-15);
}

.pb-16{
  padding-bottom: var(--offset-16);
}

.pb-17{
  padding-bottom: var(--offset-17);
}

.pb-18{
  padding-bottom: var(--offset-18);
}

.pb-19{
  padding-bottom: var(--offset-19);
}

/* BORDERS */

.border-bottom{
 border-bottom: 1px solid var(--border-color);
}

/* text */

.big-text {
  font-weight: 400;
  font-size: clamp(15px,2vw,16px);
  line-height: clamp(1.5rem,2vw,1.625rem);
  color: var(--text-color);
}

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


a.colored,
.colored {
  color: #3761e9;
}
a {
  color: #3761e9;
}

.mainscreen__body > .block__body{width:100%;}

/* FORMS */

@media (max-width: 530px) {
  .popup_result-desc{
    max-width: 100%;
    width: 100%;
    div.text-regular{
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
    }
  } 
  .form{
    display: flex !important;
    flex-direction: column !important;
  }
  .inner-mobile-menu--open .popup__content.smaller.fade-in{
    padding: 0;
  }
  .form-sub{
    flex-direction: column;
  }

  .popup__content.smaller .h4{
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
  }

  .popup__content.smaller .block__text{
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
  }

  .popup__content.smaller .form__button{
    margin-top: 0.75px;
  }

   .inner-mobile-menu--open .popup__content.smaller.fade-in .form__button{
      margin-top: 1.5rem;
   }

  .form-button{
    width: 100%;
  }

  .agreement-text span{
    white-space: normal !important;
  }

}

@media (max-width: 381px) {
  .agreement-input{
    align-items: start !important;
    justify-content: start;
  }
  .agreement-text{
    /* width: calc(100vw - (2rem + 20px)); */
    white-space: normal;
    text-align: left;
    margin-top: -4px;
  }
  .popup_result-desc{
    max-width: 327px;
    width: 100%;
  }
  
}