/* Convert px to rem
** Usage:
** font-size: rem(23);
*/
/* A small function allowing skipping base64 encoding
** and simply pasting the SVG markup right in the CSS.
** @author Jakob Eriksen
** @link http://codepen.io/jakob-e/pen/doMoML
** @param {String} $svg - SVG image to encode
** @return {String} - Encoded SVG data uri
*/
/* Replace `$search` with `$replace` in `$string`
** @author Hugo Giraudel
** @link http://sassmeister.com/gist/1b4f2da5527830088e4d
** @param {String} $string - Initial string
** @param {String} $search - Substring to replace
** @param {String} $replace ('') - New value
** @return {String} - Updated string
*/
/* Replace substring 'fillColor' to real color from variables */
/* Convert px to rem
** Usage:
** font-size: rem(23);
*/
/* A small function allowing skipping base64 encoding
** and simply pasting the SVG markup right in the CSS.
** @author Jakob Eriksen
** @link http://codepen.io/jakob-e/pen/doMoML
** @param {String} $svg - SVG image to encode
** @return {String} - Encoded SVG data uri
*/
/* Replace `$search` with `$replace` in `$string`
** @author Hugo Giraudel
** @link http://sassmeister.com/gist/1b4f2da5527830088e4d
** @param {String} $string - Initial string
** @param {String} $search - Substring to replace
** @param {String} $replace ('') - New value
** @return {String} - Updated string
*/
/* Replace substring 'fillColor' to real color from variables */
/* Mixin for button animation,
    use: @include button-animation(); for .btn-primary-dark--white-bg button
*/
/* Mixin for arrow link animation,
    use: @include arrow-link-animation(); for .btn-tertiary-dark--white-bg button
*/
/* Mixin for link animation,
    use: @include link-animation(); for .btn-link-dark--white-bg button
*/
/* Mixin for button background animation,
    use: @include hoverBgEffect($primary-slate, $scale: 1.4, $speed: 0.4s);
*/
/**
 * Mixin for adding gradient line to the bottom.
 * @param {$side-colors} color.
 */
/**
 * Mixin for adding text underline.
 */
/**
 * Mixin for cropping the text.
 * @param {$line-clamp} number of visible lines.
 */
.otp-registration {
  /* Auth */
  /* END - Auth */
  /* Verification */
  /* stylelint-disable selector-class-pattern */
  /* END - Verification */
  /* stylelint-enable selector-class-pattern */
  /* Confirmation */
  /* END - Confirmation */
  /* toggle styles based on the data-otp-stage attribute */
}
@media (min-width: 1024px) {
  .otp-registration {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    background-color: #f5f5f3;
  }
}
.otp-registration__container {
  padding: 5.75rem 1.25rem 1.25rem;
}
.otp-registration__container--secondary {
  padding: 1.5rem 1.25rem;
}
.otp-registration__container--logo {
  display: none;
}
.otp-registration__title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
}
.otp-registration__subtitle {
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
}
.otp-registration__form-container, .otp-registration__banner-wrapper .container {
  margin: 0 auto;
  max-width: 36.25rem;
  padding: 0 0.75rem;
}
@media (min-width: 576px) {
  .otp-registration__form-container, .otp-registration__banner-wrapper .container {
    padding: 0 4.6875rem;
  }
}
.otp-registration__banner-wrapper .container {
  padding-top: 1.5rem;
}
@media (max-width: 374.98px) {
  .otp-registration__banner-wrapper .container {
    padding-left: 0;
    padding-right: 0;
  }
}
.otp-registration__banner-wrapper .card {
  margin-bottom: 0;
}
.otp-registration__form .alert,
.otp-registration .verification-form .alert {
  margin-bottom: 1.5rem;
}
.otp-registration__form--phone .form-group, .otp-registration__form--email .form-group {
  margin-bottom: 0.25rem;
}
.otp-registration__submit-btn {
  margin-top: 1.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.125rem;
  width: 100%;
}
@media (min-width: 375px) {
  .otp-registration__submit-btn {
    min-width: 16.25rem;
    width: auto;
  }
}
@media (min-width: 1024px) {
  .otp-registration__submit-btn {
    margin-top: 2rem;
  }
}
.otp-registration__submit-btn:disabled {
  color: #fff;
}
.otp-registration__submit-wrapper {
  text-align: center;
}
.otp-registration__toggle-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 1.25rem;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 0.375rem;
  text-decoration-thickness: 0.0625rem;
}
.otp-registration__toggle-btn::after, .otp-registration__toggle-btn::before {
  visibility: hidden;
}
@media (min-width: 768px) {
  .otp-registration__toggle-btn {
    text-decoration: none;
  }
  .otp-registration__toggle-btn::after, .otp-registration__toggle-btn::before {
    visibility: visible;
  }
}
.otp-registration__secure-lock {
  padding: 1.5rem;
}
.otp-registration__back-btn {
  line-height: 1;
  margin-bottom: 2rem;
}
@media screen and (min-width: 390px) and (min-height: 740px) {
  .otp-registration__back-btn {
    /* stylelint-disable-line */
    margin-bottom: 5.625rem;
  }
}
.otp-registration__description {
  margin-top: 0.5rem;
  font-size: 1.125rem;
  text-align: center;
}
.otp-registration__description > span {
  display: inline-block;
  max-width: 36.25rem;
}
.otp-registration .verification-form {
  padding-top: 1.5rem;
}
.otp-registration .verification-form__btn {
  font-size: 0.875rem;
  color: #00d1d2;
}
.otp-registration .verification-form__btn::before {
  background-color: #00d1d2;
}
.otp-registration .verification-form__fieldset {
  margin: 1.5rem 0;
}
.otp-registration .verification-form__fieldset .custom-control-label, .otp-registration .verification-form__fieldset .custom-control-label a {
  font-size: 0.75rem;
}
.otp-registration .verification-form .form-group {
  margin-bottom: 1rem;
}
.otp-registration .verification-sent {
  min-width: 11.875rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.otp-registration .circlePercent,
.otp-registration .circlePercent:not(.fiftyPlus)::after {
  background: #00d1d2;
}
.otp-registration .circlePercent .figure {
  color: #34303d;
  font-size: 0.875rem;
}
.otp-registration__form--details {
  padding-top: 1.5rem;
}
.otp-registration__stage {
  display: none;
}
.otp-registration[data-otp-stage=auth] .otp-registration__stage--auth {
  display: block;
}
.otp-registration[data-otp-stage=verification] .otp-registration__stage--verification {
  display: block;
}
.otp-registration[data-otp-stage=confirmation] .otp-registration__stage--confirmation {
  display: block;
}

/* END - toggle styles based on the data-otp-stage attribute */
/* toggle styles based on the data-otp-mode attribute */
.otp-registration[data-otp-mode=phone] .email-text,
.otp-registration[data-otp-mode=phone] .otp-registration__form--email {
  display: none;
}

.otp-registration[data-otp-mode=email] .phone-text,
.otp-registration[data-otp-mode=email] .otp-registration__form--phone,
.otp-registration[data-otp-mode=email] .email-text--expired {
  display: none;
}
.otp-registration[data-otp-mode=email].expired-email-verification .email-text--login {
  display: none;
}
.otp-registration[data-otp-mode=email].expired-email-verification .email-text--expired {
  display: inline-block;
}

/* END - toggle styles based on the data-otp-mode attribute */
/* toggle styles based on the data-otp-auth-type attribute */
.otp-registration[data-otp-auth-type=registration] .phone-text--login {
  display: none;
}

.otp-registration[data-otp-auth-type=login] .phone-text--registration,
.otp-registration[data-otp-auth-type=login] .verification-form__fieldset--privacy {
  display: none;
}

/* END - toggle styles based on the data-otp-auth-type attribute */
/* show logo */
.otp-registration--decorated {
  position: relative;
}
.otp-registration--decorated .otp-registration__container {
  padding-top: 1.25rem;
}
.otp-registration--decorated .otp-registration__container--logo {
  display: block;
  padding-top: 2.75rem;
  padding-bottom: 0.5rem;
  text-align: center;
}
.otp-registration--decorated .otp-registration__container--logo svg {
  width: 4rem;
  height: auto;
  color: #00d1d2;
}
@media (min-width: 1024px) {
  .otp-registration--decorated .otp-registration__container--logo svg {
    width: 5.5625rem;
  }
}
.otp-registration--decorated .otp-registration__back-btn {
  position: absolute;
  top: 1.25rem;
  z-index: 1;
  margin-bottom: 0;
}

/* END - show logo */
.form--secondary .form-control {
  background-color: #fff;
}