body#recharge-novum #recharge-te {
  z-index: 1 !important;
}

.rc-submitted-loading {
  text-align: center;
}

.recharge-login-passwordless .rc-login .rc-enter-code-header:before {
  font-size: 2.8rem;
}

.recharge-login-passwordless .rc-login .rc-enter-code-digits-item {
  font-family: var(--font-body-family);
    font-weight: 400;
}

.recharge-login-passwordless {
  [data-rc-step-1] {
    padding: 0 1.5rem;
  }

  .rc-error-digits {
    font-size: 1.8rem;
  }

  .rc-enter-code-digits-item:focus, .rc-enter-code-digits-item:focus-visible {
    filter: none;
  }

  .rc-login-form-container {
    margin-bottom: 2rem;
  }

  .rc-login {
    margin-top: 0;
    padding: 0;

    --rc-button-bg-color: rgb(23, 68, 61) !important;
    max-width: 100%;
    background: rgba(23, 68, 61, 0.5);

    .container {
      max-width: 120rem;

      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    .rc-login {
      min-height: 30rem;
      max-width: 57rem;

      padding: 0 1.5rem;
      margin: 5rem auto;
    }

    .rc-login--body {
      padding: 0;
      margin: 0;

      box-shadow: none;

      border-radius: 0;
    }

    .rc-login--header {
      display: none;
    }

    .rc-login--header-title,
    .rc-enter-code-header {
      justify-content: center;
      margin: 4rem 0 2.4rem;
      font-size: 0;
      text-align: center;
    }

    .rc-login--header-title:before {
      content: "My account";

      color: rgb(23, 68, 61);
      font-size: 2.8rem;
    }

    .rc-enter-code-header:before {
      content: "We sent you a code!";

      color: rgb(23, 68, 61);
    }

    .rc-enter-code-container:has(.rc-error) > .rc-enter-code-sms-info {
      display: none;
    }

    .rc_header-settings__description {
      text-align: center;
      display: block;
    }

    .rc_header-settings__description:after {
      content: "Provide your email below in order to complete your account setup. Once complete, you can manage your subscriptions directly within your account.";

      color: rgb(23, 68, 61);
      font-size: 1.6rem;
      font-family: var(--font-heading-family);
    }

    .rc-login-form-email {
      padding: 0 25px;
      height: 5rem;
      border: 1px solid rgb(129,135,141);
      border-radius: 2.5rem;
      font-size: 1.6rem;
      font-family: var(--font-body-family);
    }

    .rc-login-form-email::placeholder {
      color: rgb(0,0,0);
    }

    .account_wrapper {
      margin-top: 0;

      display: flex;
      flex-direction: column;
    }

    .rc-enter-code {
      padding: 40px 0;
      order: 1;

      p {
        color: rgb(33,36,39);
      }
    }

    .account_bg {
      order: 2;
      display: block;
    }

    .rc-login-form {
      margin: 0;
      padding-top: 3rem;

      text-align: center;
    }

    .rc-login-form-label {
      display: none;
    }

    .button.rc-login-form-button {
      background-color: rgb(226,43,50);
    }

    .btn-primary,
    button.rc-login-form-button,
    button.fadedBackground {


      padding-top: 0;
      padding-bottom: 0;
      margin-top: 1.5rem;

      font-size: 1.6rem;
      font-weight: 700;
      text-shadow: none;
    }

    button.fadedBackground {
      color: rgb(255,255,255);
    }

    button.rc-login-form-button {
      margin: 0 auto;
      padding: 0 .6rem;
      height: 5rem;
      text-transform: uppercase;
      font-size: 1.6rem;
      font-weight: 600;
      border-radius: 4rem;
      background-color: rgb(197, 250, 84);
      border: .1rem solid rgb(23, 68, 61);
      color: rgb(0,0,0);
      position: relative;
    }

    button.rc-login-form-button:hover {
      background-color: rgb(23, 68, 61);
      color: rgb(255,255,255);
    }

    .rc-email-error {


      width: 100%;
      height: auto;

      margin: 0;
      padding-top: 1.5rem;

      text-align: center;
      color: rgb(226,43,50);

      bottom: 0;
      position: relative;
    }

    .rc-login-form-button {
      width: 100%;
      max-width: 38rem;
    }

    .rc-login-form-button > div.animated[data-rc-login-form-submit-btn-animation] {
      font-size: 0;
      width: 100%;

      span:after {
        content: "SEND CODE";

        font-size: 1.6rem;

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)


      }
    }

    .rc-login-form-button > div {
      position: relative;


    }

    .rc_support_link__wrap {
      margin-top: 3rem;

      text-align: center;
    }

    .rc_support_link:hover {
      color: rgb(0,108,91);
    }

    .rc_support_link {
      min-height: 2.4rem;

      display: inline-block;
      vertical-align: top;

      padding: 0 0 0 3rem;

      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.5 7.59131C0.5 3.44917 3.85786 0.0913086 8 0.0913086C12.1421 0.0913086 15.5 3.44917 15.5 7.59131C15.5 11.7334 12.1421 15.0913 8 15.0913C3.85786 15.0913 0.5 11.7334 0.5 7.59131ZM6 6.09131C6 4.98674 6.89543 4.09131 8 4.09131H8.6C9.64934 4.09131 10.5 4.94197 10.5 5.99131V6.09131C10.5 7.19588 9.60457 8.09131 8.5 8.09131V9.09131H7.5V7.09131H8.5C9.05228 7.09131 9.5 6.64359 9.5 6.09131V5.99131C9.5 5.49425 9.09706 5.09131 8.6 5.09131H8C7.44772 5.09131 7 5.53902 7 6.09131H6ZM7.5 11.0913V10.0913H8.5V11.0913H7.5Z" fill="%2317443D"/></svg>');
      background-position: 0 0;
      background-repeat: no-repeat;

      color:  rgb(23, 68, 61);
      background-size: 2.4rem 2.4rem;
      font-family: var(--font-body-family);
    }

    .rc_support_link__email {
      padding-top: 1.5rem;
      font-size: 1.4rem;
      font-family: var( --font-heading-family);

      text-align: center;

      em {
        font-style: normal;
      }

      a {
        color: rgb(33,36,39);

        &:hover {
          color: rgb(23,68,61);
        }
      }
    }

    a[href*="login"] {
      display: none !important;
    }

    .rc_logo {
      display: none !important;
    }


    .rc-enter-code {
      margin: 0;
    }

    .rc-enter-code-text {
      padding-top: 25px;
      font-family: var(--font-heading-family);
      text-align: center;
      color: rgb(23, 68, 61) !important;
    }

    .rc-enter-code-sms-info {
      margin: 0;
      text-align: center;
      font-family: var(--font-body-family);
    }

    .rc-enter-code-sms-info {
      padding: 2.5rem 1.5rem 0;
    }

    .rc-enter-code-digits {
      max-width: 34rem;
      height: 5rem;

      justify-content: center;
      align-items: center;

      padding: 0 25px;
      margin: 30px auto 0;

      border: 1px solid rgb(129, 135, 141) !important;

      border-radius: 2.5rem;

      .rc-error {
        background-color: transparent !important;

        color: rgb(226,43,50);
      }

      &:has(.rc-error) > .rc-enter-code-digits-item {
        color: rgb(226,43,50);
      }
    }

    .rc-error-digits {
      width: 100%;

      justify-content: center;

      padding-top: 1.5rem;

      font-weight: 700;
      color: rgb(226,43,50);
      text-transform: uppercase;

      position: relative;
      bottom: 0;

      svg {
        display: none;
      }

      span {
        margin-left: 0;
        font-family: var(--font-body-family);
      }
    }

    .rc-success {
      filter: none;
    }

    .rc-enter-code-digits-item:not(:last-child) {
      border-right: 2px solid rgb(154,153,165) !important;
    }

    .rc-enter-code-digits-item {
      width: 7.2rem !important;
      height: 3.6rem !important;

      font-weight: 500;
      font-size: 3rem !important;
      line-height: 36px;
      color: rgb(154,153,165);

      border: 0 !important;

      border-radius: 0;
      box-shadow: none;
    }

    .rc-enter-code-digits-item::placeholder {
      font-weight: 400;
  }

    .rc-enter-code-redirect-text {


      padding-top: 1.5rem;
    }
  }

  .account_bg {
    margin-top: 6,2rem;

    width: 100%;
    min-height: 25rem;
    background-image: url("/cdn/shop/files/reskin_sign_in_main_img.png?v=1716980571");

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}





@media screen and (min-width: 768px) {
  .recharge-login-passwordless {
    [data-rc-step-1] {
      margin: 0 auto;
      max-width: 73rem;
    }

    .rc-login {
      max-width: 100%;

      padding: 0;

      .rc_header-settings__description:after {
        font-size: 2.4rem;
      }

      .rc-login--header-title:before,
      .rc-enter-code-header:before {
        font-size: 2.8rem;
        line-height: 2.8rem;
      }

      .rc_header-settings__description {
        padding-top: 3rem;
      }

      .rc-login-form,
      .rc-email-error,
      .rc-enter-code-text,
      .rc-enter-code-redirect-text {
        padding-top: 2rem;
      }

      button.rc-login-form-button {
        max-width: 100%;

        margin-top: 4rem;

        font-size: 2rem;
      }

      .rc-enter-code-digits {
        margin-top: 2rem;
      }
    }

    .account_bg {
      min-height: 44rem;
    }

    .account_wrapper {
      margin-top: 40px;
    }

    button.rc-login-form-button {
      border: none;
      text-transform: uppercase;

      font-size: 2.2rem;
      font-weight: 700;
    }
  }

  .rc-enter-code-sms-info {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 1200px) {
  .recharge-login-passwordless .rc-login .account_wrapper {
    display: flex;
    flex-direction: initial;
    align-items: center;
  }

  .recharge-login-passwordless .rc-login .rc_support_link__wrap,
  .recharge-login-passwordless .rc-login .rc_support_link__email {
    text-align: left;
  }

  .recharge-login-passwordless {

    [data-rc-step-1] {
      margin: 0;
      padding: 0 15px 0 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      order: 2;
      width: 50%;
      max-width: 713px;
    }

    .rc-login .rc-login--header-title:before {
      font-size: 6.4rem;
    }

    .rc-login .rc-login-form-email,
    .rc-login button.rc-login-form-button {
      height: 5.6rem;
    }

    .rc-login .rc-enter-code-text {
      font-size: 2.4rem;
    }

    .rc-login .rc-enter-code {
      padding: 0 1.5rem 0 10rem;
      order: 3;
    }

    .rc-login .rc-enter-code-header:before {
      font-size: 6.4rem;
      line-height: 6.4rem;
    }



    .rc-login .account_bg {
      margin-top: 0;
      min-height: 73.4rem;
      width: 50%;
      order: 1;
    }
  }
}