@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");


    /* Center verification code inputs */
    .verification-code-inputs {
        display: flex;
        justify-content: center;
        gap: 5px;
    }

    /* Style verification code inputs */
    .verification-code-input {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 20px;
    }

    #emailVerificationModal {
        display: none;
    }

    .custom-fields-class {
        display: none;
    }


    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body,
    input {
        font-family: 'Times New Roman', Times, serif;
        width: 100% !important;
        line-height: 20px;
    }

    .user_form_signin_up {
        position: relative;
        width: 100%;
        background-color: #fff;
        min-height: 100vh;
        overflow: hidden;
    }

    .forms-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .signin-signup {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 75%;
        width: 50%;
        transition: 1s 0.7s ease-in-out;
        display: grid;
        grid-template-columns: 1fr;
        z-index: 5;
    }

    form {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0rem 1.5rem;
        transition: all 0.2s 0.7s;
        overflow: hidden;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    form.sign-up-form {
        opacity: 0;
        z-index: 1;
    }

    form.sign-in-form {
        z-index: 2;
    }

    .title {
        font-size: 2.2rem;
        color: #444;
        margin-bottom: 10px;
    }

    .input-field {
        max-width: 450px;
        width: 100%;
        background-color: #f0f0f0;
        margin: 10px 0;
        border-radius: 55px;
        display: grid;
        grid-template-columns: 15% 85%;
        padding: 0 0.4rem;
        position: relative;
    }

    .input-field i {
        text-align: center;
        line-height: 55px;
        color: #000;
        transition: 0.5s;
        font-size: 1.1rem;
    }

    .input-field input {
        background: none;
        outline: none;
        border: none;
        line-height: 1;
        font-weight: 600;
        font-size: 1.3rem;
        color: #000;
    }

    .input-field input::placeholder {
        color: black;
        font-weight: 500;
    }


    .btns {
        width: 150px !important;
        background-color: #5995fd;
        border: none;
        outline: none;
        height: 49px;
        border-radius: 49px;
        color: #fff;
        text-transform: uppercase;
        font-weight: 600;
        margin: 10px 0;
        cursor: pointer;
        transition: 0.5s;
    }

    .btns:hover {
        background-color: #4d84e2;
    }

    .panels-container {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .user_form_signin_up:before {
        content: "";
        position: absolute;
        height: 2000px;
        width: 2000px;
        top: -10%;
        right: 48%;
        transform: translateY(-50%);
        background-image: linear-gradient(-45deg, #000000 0%, #04befe 100%);
        transition: 1.8s ease-in-out;
        border-radius: 50%;
        z-index: 6;
    }

    .image {
        width: 100%;
        transition: transform 1.1s ease-in-out;
        transition-delay: 0.4s;
    }

    .panel {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-around;
        text-align: center;
        z-index: 6;
    }

    .left-panel {
        pointer-events: all;
        padding: 3rem 17% 2rem 12%;
    }

    .right-panel {
        pointer-events: none;
        padding: 3rem 12% 2rem 17%;
    }

    .panel .content {
        color: #fff;
        transition: transform 0.9s ease-in-out;
        transition-delay: 0.6s;
    }

    .panel h3 {
        font-weight: 600;
        line-height: 1;
        font-size: 1.5rem;
    }

    .pass .content {
        display: flex;
        /* justify-content: center; */
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
    }

    .panel p {
        font-size: 0.95rem;
        padding: 0.7rem 0;
    }

    .btns.transparent {
        margin: 0;
        background: none;
        border: 2px solid #fff;
        width: 130px;
        height: 41px;
        font-weight: 600;
        font-size: 0.8rem;
    }

    .right-panel .image,
    .right-panel .content {
        transform: translateX(800px);
    }

    /* ANIMATION */

    .user_form_signin_up.sign-up-mode:before {
        transform: translate(100%, -50%);
        right: 52%;
        overflow: auto;
    }

    .user_form_signin_up.sign-up-mode .left-panel .image,
    .user_form_signin_up.sign-up-mode .left-panel .content {
        transform: translateX(-800px);
    }

    .user_form_signin_up.sign-up-mode .signin-signup {
        left: 25%;
    }

    .user_form_signin_up.sign-up-mode form.sign-up-form {
        opacity: 1;
        z-index: 2;
    }

    .user_form_signin_up.sign-up-mode form.sign-in-form {
        opacity: 0;
        z-index: 1;
    }

    .user_form_signin_up.sign-up-mode .right-panel .image,
    .user_form_signin_up.sign-up-mode .right-panel .content {
        transform: translateX(0%);
    }

    .user_form_signin_up.sign-up-mode .left-panel {
        pointer-events: none;
    }

    .user_form_signin_up.sign-up-mode .right-panel {
        pointer-events: all;
    }

    @media (max-width: 870px) {
        .user_form_signin_up {
            min-height: 800px;
            height: 100vh;
        }

        .signin-signup {
            width: 100%;
            top: 95%;
            transform: translate(-50%, -100%);
            transition: 1s 0.8s ease-in-out;
        }

        .signin-signup,
        .user_form_signin_up.sign-up-mode .signin-signup {
            left: 50%;
        }

        .panels-container {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 2fr 1fr;
        }

        .panel {
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 2.5rem 8%;
            grid-column: 1 / 2;
        }

        .right-panel {
            grid-row: 3 / 4;
        }

        .left-panel {
            grid-row: 1 / 2;
            position: relative;
            top: 20px;
        }

        .image {
            width: 200px;
            transition: transform 0.9s ease-in-out;
            transition-delay: 0.6s;
        }

        .panel .content {
            padding-right: 15%;
            transition: transform 0.9s ease-in-out;
            transition-delay: 0.8s;
        }

        .panel h3 {
            font-size: 1.2rem;
        }

        .panel p {
            font-size: 0.7rem;
            padding: 0.5rem 0;
        }

        .btns.transparent {
            width: 110px;
            height: 35px;
            font-size: 0.7rem;
        }

        .user_form_signin_up:before {
            width: 1500px;
            height: 1500px;
            transform: translateX(-50%);
            left: 30%;
            bottom: 68%;
            right: initial;
            top: initial;
            transition: 2s ease-in-out;
        }

        .user_form_signin_up.sign-up-mode:before {
            transform: translate(-50%, 100%);
            bottom: 32%;
            right: initial;
        }

        .user_form_signin_up.sign-up-mode .left-panel .image,
        .user_form_signin_up.sign-up-mode .left-panel .content {
            transform: translateY(-300px);
        }

        .user_form_signin_up.sign-up-mode .right-panel .image,
        .user_form_signin_up.sign-up-mode .right-panel .content {
            transform: translateY(0px);
        }

        .right-panel .image,
        .right-panel .content {
            transform: translateY(300px);
        }

        .user_form_signin_up.sign-up-mode .signin-signup {
            top: 5%;
            transform: translate(-50%, 0);
        }
    }

    @media (max-width: 570px) {
        form {
            padding: 0 1.5rem;
        }

        .image {
            display: none;
        }

        .panel .content {
            padding: 0.5rem 1rem;
        }

        .user_form_signin_up {
            padding: 1.5rem;
        }

        .user_form_signin_up:before {
            bottom: 72%;
            left: 50%;
        }

        .user_form_signin_up.sign-up-mode:before {
            bottom: 28%;
            left: 50%;
        }

        .sign-up-form {
            position: relative;
            top: 50px;
        }


    }

    #password-strength {
        margin-top: 10px;
    }

    .strength-bar-container {
        width: 300px;
        height: 10px;
        margin-top: 5px;
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .strength-bar {
        height: 100%;
        background: linear-gradient(to right, red 0%, red 100%);
        width: 0;
        transition: width 0.3s, background 0.3s;
    }

    /* Import Google font - Poppins */
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Times New Roman', Times, serif;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: #11131e;
    }

    /* .wrapper {
      display: flex;
      width: 100%;
      overflow: hidden;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
      justify-content: center;
    } */

    .input-fields {
        width: 450px;
        max-width: 450px;
        position: relative;
    }

    .input-fields input {
        width: 100%;
        height: 100%;
        outline: none;
        font-size: 1.3rem;
        border-radius: 5px;
        border: 1px solid #090101;
    }

    .input-fields .eye {
        right: 20px;
        top: 50%;
        font-size: 1.3rem;
        color: #000;
        cursor: pointer;
        position: absolute;
        transform: translateY(-50%);
    }

    .input-fieldss .eye {
        right: 20px;
        top: 50%;
        font-size: 1.2rem;
        color: #000;
        cursor: pointer;
        position: absolute;
        transform: translateY(-50%);
    }

    .input-fieldsss .eye {
        right: 20px;
        top: 50%;
        font-size: 1.2rem;
        color: #000;
        cursor: pointer;
        position: absolute;
        transform: translateY(-50%);
    }


    .pass .content p {
        color: #000;
        font-size: 1rem;
    }

    .content .requirement-list {
        margin-top: 20px;
    }

    .requirement-list li {
        font-size: 1.15rem;
        list-style: none;
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .requirement-list li i {
        width: 20px;
        color: #ff0000;
        font-size: 0.7rem;
    }

    .requirement-list li.valid i {
        font-size: 1.2rem;
        color: #0400f2;
    }

    .requirement-list li span {
        margin-left: 6px;
        color: #000;
    }

    .requirement-list li.valid span {
        color: #000;
    }

    .pass {
        width: 100%;
    }

    @media screen and (max-width: 500px) {

        body,
        /* .wrapper {
        padding: 15px;
      } */

        .input-fields {
            height: 55px;
        }

        .input-fields input,
        .content p {
            font-size: 1.15rem;
        }

        .input-fields i,
        .requirement-list li {
            font-size: 1.1rem;
        }

        .requirement-list li span {
            margin-left: 7px;
        }
    }

    .input-fields {
        max-width: 450px;
        width: 100%;
        background-color: #f0f0f0;
        margin: 10px 0;
        height: 55px;
        border-radius: 55px;
        display: grid;
        grid-template-columns: 15% 85%;
        padding: 0 0.4rem;
        position: relative;
    }

    .input-fields input {
        background: none;
        outline: none;
        border: none;
        line-height: 1;
        font-weight: 600;
        font-size: 1.3rem;
        color: #000;
    }

    .input-fields input::placeholder {
        color: black;
        font-weight: 500;
    }

    .input-fieldss {
        max-width: 450px;
        width: 100%;
        background-color: #f0f0f0;
        margin: 10px 0;
        height: 55px;
        border-radius: 55px;
        display: grid;
        grid-template-columns: 15% 85%;
        padding: 0 0.4rem;
        position: relative;
    }

    .input-fieldss input {
        background: none;
        outline: none;
        border: none;
        line-height: 1;
        font-weight: 600;
        font-size: 1.3rem;
        color: #000;
    }

    .input-fieldss input::placeholder {
        color: black;
        font-weight: 500;
    }

    .input-fieldsss {
        max-width: 450px;
        width: 100%;
        background-color: #f0f0f0;
        margin: 10px 0;
        height: 55px;
        border-radius: 55px;
        display: grid;
        grid-template-columns: 15% 85%;
        padding: 0 0.4rem;
        position: relative;
    }

    .input-fieldsss input {
        background: none;
        outline: none;
        border: none;
        line-height: 1;
        font-weight: 600;
        font-size: 1.3rem;
        color: #000;
    }

    .input-fieldsss input::placeholder {
        color: black;
        font-weight: 500;
    }

    .pass .content {
        display: flex;
        /* justify-content: center; */
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
    }

    .pass .content {
        width: 99%;
        padding-top: 0px;
        margin-top: 0px;
    }

    .pass .content {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }

    .pass {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .input-fields:hover .content .requirement-list {
        display: block;
    }

    .content {
        position: relative;
    }

    .pass .content {
        display: flex;

    }

    .content .requirement-list {
        position: absolute;
        background: #fff;
        border: 0.1px solid #b3b3b3;
        border-radius: 20px;
        width: 100%;
        max-width: 380px;
        box-shadow: -1px 0px 20px 20px rgb(134 131 131 / 17%);
        display: none;
        z-index: 1;
        padding: 15px 15px 5px 15px;
        font-weight: 600;
        color: black;
        margin-top: 0px;

    }

    .form-container {
        overflow: auto;
    }

    .sign-up-form::-webkit-scrollbar {
        width: 8px;
        /* Adjust the width as needed */
    }

    .sign-up-form::-webkit-scrollbar-thumb {
        background-color: #ffffff;
        /* Adjust the color as needed */
    }

    /* Add this CSS code to style the progress bar */

    .strength-bar-container {
        width: 100%;
        height: 10px;
        margin-top: 10px;
        overflow: hidden;
        border-radius: 5px;
    }

    .strength-bar {
        height: 100%;
        width: 0;
        transition: width 0.3s, background 0.3s;
        border-radius: 5px;
    }

    .modal-content {
        background-color: #fefefe;
        margin: 11% auto;
        padding: 20px;
        border: 1px solid #888;
        width: auto;
    }

    .modal-header {
        display: flex;
        flex-direction: row;
        align-content: center;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }


    /* Center verification code inputs */
    .verification-code-inputs {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    /* Style verification code inputs */
    .verification-code-input {
        width: 50px !important;
        height: 50px;
        text-align: center;
        font-size: 20px;
        border: 3px solid #000080;
    }

    @keyframes waviy {

        0%,
        40%,
        100% {
            transform: translateY(0);
        }

        20% {
            transform: translateY(-20px);
        }
    }

    .wave {
        position: relative;
        max-width: 400px;
        width: -webkit-calc(100%-220px);
        background-color: #242423;
        -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(255, 251, 251, 0.363));
        padding: 20px;
    }

    @media (width < 500px) {
        .wave {
            left: 150px;
            max-width: calc(100%-80px)
        }

        .wave span {
            font-size: 20px !important;
        }
    }

    .wave span {
        color: white;
        position: relative;
        display: inline-block;
        font-size: 28px;
        animation: waviy 1s infinite;
        text-transform: uppercase;
        animation-delay: calc(.1s * var(--i))
    }

    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        /* Adjust the alpha value for the desired darkness */
        backdrop-filter: blur(8px);
        /* Adjust the blur value as needed */
        z-index: 1000;
        /* Make sure it's above other elements */
        display: none;
        /* Initially hide the overlay */
    }

    #loading-spinner {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
        z-index: 1000;
    }

    @media (width < 500px) {
        .wave {
            padding: 10px;
            left: 50%;
        }

        #loading-spinner {
            left: 51%;
        }
    }

        #loading-spinner.show {
            display: block;
        }

.modal-buttons {
    margin-top: 20px;
    text-align: center;
}

.form-container {
    width: 450px;
    height: 450px;
    margin: 0 auto;
    text-align: center;
    padding: 10px;
}

body {
    user-select: none;
}

.form-step {
    display: none;
}

@media (width < 765px) {
    .form-container {
        width: 100%;
    }
}

.form-step.active {
    display: block;
}

.btns {
    bottom: 0;
}

.input-field {
    max-width: 450px;
    width: 100%;
    background-color: #f0f0f0;
    margin: 14px 0;
    border: none;
    border-radius: 55px;
    display: grid;
    grid-template-columns: 15% 85%;
    padding: 0 0.4rem;
    position: relative;
    text-rendering: unset;
    color: black;
    letter-spacing: unset;
    word-spacing: unset;
    line-height: unset;
    text-indent: unset;
    cursor: auto;
    appearance: unset;
    white-space: unset;
    -webkit-rtl-ordering: unset;
}

select {
    color: black;
    font-style: normal; 
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-variant-alternates: normal;
    font-variant-position: normal;
    font-weight: normal;
    font-stretch: narrower;
    font-size: 16px;
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.3rem;
    line-height: 1.5;
    border: none !important;
}

select:hover {
    border: none !important;
}

.input-field select:hover {
    border: transparent;
    /* or border: transparent; */
}

.input-field:hover {
    border: none;
}