@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amaranth&display=swap');
@import "//fonts.googleapis.com/css?family=Open+Sans";
       
        .steps {
            position: relative;
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 0 auto;
            color: #929292;
            height: 4rem;
        }

        .steps>.step {
            position: absolute;
            display: table-cell;
            text-align: center;
            font-size: 0.875rem;
            color: #6D6875;
            transition: 0.5s ease-in;
        }

        #step-outer .steps .step:nth-child(1) {
            left: 0;
        }

        #step-outer .steps .step:nth-child(3) {
            right: 0;
        }

        #step-outer.thanks .steps .step:nth-child(1) {
            left: 43.5%;
        }

        #step-outer.thanks .steps .step:nth-child(3) {
            right: 43.5%;
        }


        .steps>.step:before {
            content: attr(data-step);
            display: block;
            margin: 0 auto;
            background: #ffffff;
            border: 2px solid #e6e6e6;
            color: #e6e6e6;
            width: 2.5rem;
            height: 2.5rem;
            text-align: center;
            line-height: 2.2rem;
            border-radius: 100%;
            position: relative;
            z-index: 1;
            font-weight: 700;
            font-size: 1rem;
        }


        .steps>.step:last-child:after {
            display: none;
        }

        .steps>.step.is-complete {
            color: #6D6875;
        }

        .steps>.step.is-complete:before {
            content: '\2713';
            color: rgb(255, 255, 255);
            background: rgb(132, 70, 255);
            border: 2px solid rgb(132, 70, 255);
        }

        #step-outer.thanks .steps .step.is-complete:nth-child(3):before {
            transform: scale(1.5);
            transition: transform 0.6s ease-in;
        }



        .steps>.step.is-active {
            font-size: 1.5rem;
        }

        .steps>.step.is-active:before {
            color: #ffffff;
            border: 3px solid rgb(132, 70, 255);
            background: rgb(132, 70, 255);
            transition: 1s ease-in;
        }


        
        *:after,
        *:before {
            box-sizing: border-box;
        }



      


        #step-outer progress {
            position: absolute;
            width: 80%;
            /* style rules */
            background-color: rgb(173, 149, 153);
            -webkit-appearance: none;
            appearance: none;
            accent-color: #5916cd;
            height: 10px;
            border-radius: 5px;
            opacity: 1;
        }

        #step-outer.thanks progress {
            opacity: 0;
            transition: 0.4s ease-out;
        }

        #step-outer progress::-webkit-progress-bar {
            border-radius: calc(1.4em / 3);
            background: #d9d7db;
        }


        #step-outer progress::-webkit-progress-value {
            background: rgb(132, 70, 255);
            border-radius: calc(1.4em/2);
            border-radius: 3px;
            transition: width 0.4s ease-in;
        }

        form#step-bar-main {
            position: relative;
        }

        #step-outer {
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--primary-color);
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: 0.3s ease-in;
        }

        form#step-bar-main .form-label-heading {
            position: relative;
            width: 100%;
            margin-bottom: 15%;
            text-align: left;
        }

        form#step-bar-main .form-label-heading h1:nth-child(1) {
            font-size: 25px;
            letter-spacing: 1px;
            margin: 50px 0 10px;
            font-family: ' One', serif;
            font-weight: 700;
            font-style: normal;
            opacity: 0.8;
        }

        .form-label-heading h1:nth-child(2) {
            font-size: 37px;
            word-spacing: 3px;
            letter-spacing: 1px;
            font-family: 'Patua One', serif;
            font-weight: 500;
            font-style: normal;
        }

/* 



#accounts form input[type="email"],#accounts form input[type="password"]{
	padding: 10px 15px;
	border: none;
	letter-spacing: 1px;
	border-radius: 7px;
	font-size:large;
	font-weight: 500;
	height: 50px;
}

#accounts form .email-group,
#accounts form .password-group{
	position: relative;
    margin: 20px 0;
}

#accounts form label{
	font-family: 'Amaranth', sans-serif;
	font-size: 20px;
	letter-spacing: 1px;
    display: block;
    margin: 5px 0;
}


#accounts form i.fa-eye{
	position: absolute;
	right: 12px;
	bottom: 13px;
	font-size: 22px;
	cursor: pointer;
}


#accounts form i.fa-eye-slash{
	position: absolute;
	right: 10px;
	bottom: 13px;
	font-size: 22px;
	cursor: pointer;
}




 */
    
 #accounts {
      width: 100%;
      height: 100dvh;
    }

    #accounts.password_login .password_form,
    #accounts.otp_login .otp_form {
      display: block;
    }

    #accounts.password_login .otp_form,
    #accounts.otp_login .password_form {
      display: none;
    }

    /* #accounts.otp_login .otp_form #otp_request_form {
      display: block;
    }

    #accounts.otp_login .otp_form #otp_verify_form {
      display: none;
    }

    #accounts.otp_login .otp_form.otp_sent #otp_request_form {
      display: none;
    }

    #accounts.otp_login .otp_form.otp_sent #otp_verify_form {
      display: block;
    } */



    #accounts h2 {
      margin: 10%;
    }

    #accounts form {
      margin: 0 9%;
    }

    #accounts form .email-group{
      position: relative;
      margin: 20% 0 10%;
      font-family: 'Amaranth', sans-serif;
    }

    #accounts form .password-group {
      position: relative;
      margin-bottom: 10%;
      font-family: 'Amaranth', sans-serif;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active{
        -webkit-box-shadow:0 0 0 30px var(--primary-color) inset !important;
        background-color: var(--primary-color) !important;
        -webkit-text-fill-color: var(--secondary-color) !important;
    }

    input:-moz-autofill{
      background-color: var(--primary-color) !important;
      -webkit-text-fill-color: var(--secondary-color) !important;
    }

    #accounts form .input {
      all: unset;
      color: var(--secondary-color);
      width: -webkit-fill-available;
      height: 35px;
      padding: 10px;
      border: 3px solid var(--secondary-color);
      border-radius: 10px;
      transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
      width: -moz-available;
    }

    #accounts form .label {
      position: absolute;
      top: 25%;
      left: 1rem;
      color: var(--secondary-color);
      pointer-events: none;
      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #accounts form .input:focus {
      border: 3px solid var(--secondary-color);
    }


    #accounts form .input:is(:focus, :valid)~label,
    #accounts form .input:disabled~label{
      transform: translateY(-103%) scale(0.9);
      background-color: var(--primary-color);
      padding-inline: 0.3rem;
      color: var(--secondary-color);
      border-left: 3px solid var(--secondary-color);
      border-right: 3px solid var(--secondary-color);
      border-radius: 3px;
      font-weight: 700;
    }


    #accounts form i.fa-eye {
      position: absolute;
      right: 15px;
      bottom: 20px;
      font-size: 22px;
      cursor: pointer;
    }


    #accounts form i.fa-eye-slash {
      position: absolute;
      right: 14px;
      bottom: 20px;
      font-size: 22px;
      cursor: pointer;
    }

    #accounts form i.fa-eye-slash {
      position: absolute;
      right: 14px;
      bottom: 20px;
      font-size: 22px;
      cursor: pointer;
    }

    #accounts form input[type="text"]#password1 ~ i.fa-eye,
    #accounts form input[type="text"]#password2 ~ i.fa-eye{
      display: none;
    }

    #accounts form input[type="password"]#password1 ~ i.fa-eye,
    #accounts form input[type="password"]#password2 ~ i.fa-eye{
      display: block;
    }


    #accounts form input[type="text"]#password1 ~ i.fa-eye-slash,
    #accounts form input[type="text"]#password2 ~ i.fa-eye-slash{
      display: block;
    }

    #accounts form input[type="password"]#password1 ~ i.fa-eye-slash,
    #accounts form input[type="password"]#password2 ~ i.fa-eye-slash{
      display: none;
    }

    #accounts form .signup-reset-links {
      display: flex;
      justify-content: space-between;
      font-family: 'Crimson Pro', serif;
      font-size: 17px;
      margin-top: 15%;
    }

    #accounts form .signup-reset-links a {
      text-decoration: none;
      color: rgb(119, 8, 255)
    }

    #accounts form button {
      font-family: 'Crimson Pro', serif;
      font-size: 20px;
      border-radius: 10px;
      width: 100%;
      height: 55px;
    }

    #accounts .otp-sent-message {
      font-family: 'Crimson Pro', serif;
      font-size: 17px;
      margin-bottom: 10%;
    }


    #accounts .otp-input-outer {
      display: flex;
      justify-content: space-between;
      margin: 15% 0;
    }


    #accounts .otp-input-outer .otp-input {
      color: var(--secondary-color);
      aspect-ratio: 1;
      width: 40px;
      text-align: center;
      border-radius: 3px;
      background: var(--primary-color);
      border: 2px solid var(--secondary-color);
    }

    .resend-btn{
      position: absolute;
      background: none;
      bottom: 45%;
      left: 45%;
      display: flex;
    }

    .resend-btn button{
      background: none;
      border: 0;
      padding: 0;
      width: auto;
      color: red;
      font-family: 'Crimson Pro', serif;
      font-size: 20px;
    }


    /* .error {
      position: fixed;
      bottom: 15%;
      left: 25%;
      background: red;
      border-radius: 10px;
      padding: 10px;
      color: white;
      opacity: 1;
      transition: opacity 2s ease-in;
    } */

    #otp-verify-messages .error {
      position: relative;
      background: red;
      left: 0;
      border-radius: 10px;
      padding: 10px;
      color: white;
      opacity: 1;
      transition: opacity 2s ease-in;
    }

    #accounts .success {
      position: fixed;
      bottom: 15%;
      left: 25%;
      background: rgb(1, 104, 1);
      border-radius: 10px;
      padding: 10px;
      color: white;
      opacity: 1;
      transition: opacity 2s ease-in;
    }

    :root {
      --switches-bg-color: rgb(217, 210, 210);
      --switches-label-color: rgb(24, 24, 24);
      --switch-bg-color: rgb(97, 6, 224);
      --switch-text-color: rgb(255, 255, 255);
    }

     #signin-header {
      width: 85%;
      height: 50px;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #signin-header .back-btn {
      border: 0;
      width: 35px;
      height: 35px;
      border-radius: 5px;
      background: var(--primary-color);
      color: var(--secondary-color);
      box-shadow: 1px 1px 4px var(--bottom-nav-ds-1), -1px -1px 4px var(--bottom-nav-ds-2);
    }


    #toggle-options{
      width: 55%;
      position: relative;
      overflow: hidden;
      background: var(--primary-color);
    }

    #toggle-options.otp_intersect .cancel-otp{
      display: block;
      width: 100%;
      background: var(--primary-color);
      box-shadow: 1px 1px 4px var(--bottom-nav-ds-1), -1px -1px 4px var(--bottom-nav-ds-2);
      line-height: 35px;
      border-radius: 8px;
      border: 0;
    }

    #toggle-options .cancel-otp{
      display: none;
    }

   
    #toggle-options.otp_intersect .signin_with_toggle{
      display: none;
    }

    .signin_with_toggle {
      width: 100%;
      position: relative;
      display: flex;
      padding: 0;
      position: relative;
      background: var(--primary-color);
      line-height: 35px;
      border-radius: 8px;
      border: 2px solid #7202fc;
    }

   

    body.dark .signin_with_toggle,
    body.dark #signin-header .back-btn{
      border: 2px solid #7202fc;
    }

    /* input (radio) for toggling. hidden - use labels for clicking on */
    .signin_with_toggle input {
      visibility: hidden;
      position: absolute;
      top: 0;
    }

    /* labels for the input (radio) boxes - something to click on */
    .signin_with_toggle label {
      width: 50%;
      padding: 0;
      margin: 0;
      text-align: center;
      cursor: pointer;
      font-size: 13px;
      font-family: ' One', serif;
      font-weight: 700;
      font-style: normal;
      color: var(--secondary-color);
    }

    /* switch highlighters wrapper (sliding left / right) 
    - need wrapper to enable the even margins around the highlight box
*/
    .toggle_highlight {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50%;
      padding: 0.15rem;
      z-index: 1;
      transition: transform .4s;
      /* transition: transform 1s; */
    }

    /* switch box highlighter */
    .switch {
      border-radius: 6px;
      background: var(--switch-bg-color);
      height: 100%;
    }

    /* switch box labels
    - default setup
    - toggle afterwards based on radio:checked status 
*/
    .switch div {
      width: 100%;
      text-align: center;
      opacity: 0;
      display: block;
      color: var(--switch-text-color);
      transition: opacity .3s .05s;
      will-change: opacity;
      position: absolute;
      top: 0;
      left: 0;
      font-size: 13px;
      font-family: ' One', serif;
      font-weight: 700;
      font-style: normal;
    }

    /* slide the switch box from right to left */
    .signin_with_toggle input:nth-of-type(1):checked~.toggle_highlight {
      transform: translateX(0%);
    }

    /* slide the switch box from left to right */
    .signin_with_toggle input:nth-of-type(2):checked~.toggle_highlight {
      transform: translateX(100%);
    }

    /* toggle the switch box labels - first checkbox:checked - show first switch div */
    .signin_with_toggle input:nth-of-type(1):checked~.toggle_highlight .switch div:nth-of-type(1) {
      opacity: 1;
    }

    /* toggle the switch box labels - second checkbox:checked - show second switch div */
    .signin_with_toggle input:nth-of-type(2):checked~.toggle_highlight .switch div:nth-of-type(2) {
      opacity: 1;
    }

    .form-label-heading {
      width: 100%;
      margin-bottom: 15%;
    }

    .form-label-heading h1:nth-child(1) {
      font-size: 25px;
      letter-spacing: 1px;
      margin: 50px 0 10px;
      font-family: ' One', serif;
      font-weight: 700;
      font-style: normal;
      opacity: 0.8;
    }

    .form-label-heading h1:nth-child(2) {
      font-size: 37px;
      word-spacing: 3px;
      letter-spacing: 1px;
      font-family: 'Patua One', serif;
      font-weight: 500;
      font-style: normal;
    }













         #signin-header .toggle-controls{
      width: 100%;
      position: relative;
      display: flex;
      justify-content: flex-end;
    }


    #accounts-error-message {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }


    #accounts-error-message .lever-container {
      cursor: pointer;
      position: relative;
      width: 40px;
      height: 40px;
    }

    #accounts-error-message .lever {
      position: relative;
      width: 100%;
      height: 100%;
    }

    #accounts-error-message .lever-base {
      position: absolute;
      right: 0;
      top: 10%;
      /* width: 20px; */
      height: 75%;
      background-color: #7202fc;
      border-radius: 25px 0px 0px 25px;
    }

    #accounts-error-message .lever-pivot {
      position: absolute;
      bottom: 30%;
      right: -35%;
      transform: translateX(-50%);
      width: 16px;
      height: 16px;
      background-color: #d0d0d0;
      border-radius: 50%;
      border: 2px solid #a0a0a0;
    }

    #accounts-error-message .lever-lever {
      position: absolute;
      bottom: 50%;
      right: 5%;
      transform-origin: bottom center;
      width: 3px;
      height: 20px;
      background-color: #d0d0d0;
      border-radius: 2px;
      transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      transform: translateX(-50%) rotate(230deg);
    }

    #accounts-error-message .lever-handle {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px;
      height: 12px;
      background-color: #e53e3e;
      border-radius: 2px;
      border: 2px solid #c53030;
    }

    #signin-header.on #accounts-error-message .lever .lever-lever {
      transform: translateX(-50%) rotate(300deg);
    }










    #signin-header.on #toggle-options #form-messages {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 5;
      animation: error-popup 0.3s ease-in-out;
    }

    #signin-header.off #toggle-options #form-messages {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 5;
      opacity: 0;
      transform: translateY(80px);
      animation: error-popout 0.5s ease-out;
    }

    #toggle-options #form-messages .message {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }

    #toggle-options #form-messages .message .error {
      width: 95%;
      height: 76%;
      background: linear-gradient(90deg, #3F2B96 0%, #6781c0 100%);
      box-shadow: 1px 1px 3px rgb(60, 4, 182) inset,-1px -1px 3px rgb(122, 6, 195) inset;
      border-radius: 4px;
      margin-bottom: 1px;
      font-size: 15px;
      font-family: 'Crimson Pro', serif;
      font-style: normal;
      display: flex;
      justify-content: center;
      align-items: center;
      word-spacing: 3px;

    }

   

    @keyframes error-popup {
      from {
        opacity: 0;
        transform: translateY(80px);
      }

      to {
        opacity: 1;
        transform: translateY(0px);
      }
    }

  
    @keyframes error-popout {
      from {
        opacity: 1;
        transform: translateY(0);
      }

      to {
        opacity: 0;
        transform: translateY(80px);
      }
    }








#accounts .resend-outer {
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10%;
    }

    #accounts .resend-outer .cancel-btn {
      height: 100%;
    }

    #accounts .resend-outer form.resend-form {
      position: relative;
      margin: 0;
      overflow: hidden;
      border-radius: 5px;
    }

    #accounts .resend-outer form.resend-form button {
      height: 100%;
    }

    #accounts .resend-outer form.resend-form div.resend-time {
      display: flex;
      position: absolute;
      width: 100%;
      height: 100%;
      background: red;
      transition: 0.5s ease-out;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: 700;
    }

    #accounts .resend-outer form.resend-form div.resend-time.close {
      transform: translateY(50px);
    }



    #select_account_type {
            width: 100%;
            height: 45dvh;
            position: relative;
        }

        #select_account_type input {
            display: none;
        }

        #select_account_type label {
            position: relative;
            margin: 5% auto;
            width: 100%;
            height: 50%;
            background: rgb(125, 61, 255);
            display: block;
            border-radius: 10px;
            transition: background 0.5s ease-in-out;
        }

        #select_account_type input:checked + label {
            background: #5916cd;
        }

       

        #select_account_type  div {
            position: absolute;
            width: 20px;
            height: 20px;
            background: rgb(255, 255, 255);
            border: 3px solid rgb(255, 255, 255);
            border-radius: 10px;
            transition: 1s all;
            right: 5%;
            animation: slide-away 2s ease-in-out;
        }

        

        #select_account_type input#demo:checked ~ div {
           top: 0%;
        }
        #select_account_type input#keep:checked ~ div {
           top: 54%;
        }