html{
    font-size: 16px;
    
}

.createAccountForm_container {
    margin-top: 4rem;
    padding: 2rem;
}

#createAccountForm h1{
    color: var(--Neutral-1000, #141513);
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#createAccountForm span{
    color: var(--subtext1, #475569);
    font-family: Krub;
    font-size:1.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 151.523%; 
    margin-top: 4rem;
}

.input_container input{
    margin-top: 2rem;
    padding: 1rem 2rem;
    color: #999;
    font-family: Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; 
}
.input_container select{
    margin-top: 2rem;
    padding: 1rem 2rem;
    color: #999;
    font-family: Helvetica;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; 
}

.createAccountForm_buttton_container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
}

.createAccountForm_back_button{
    border-radius: 5px;
    border: 1px solid #084B80;
    padding: 0.5rem 1rem;
    background-color: white;
}

.createAccountForm_continue_button{
    border-radius: 5px;
    border: 1px solid #084B80;
    color: white;
    padding: 0.5rem 1.5rem;
    background-color:#084B80;
}

.modal-content{
    padding: 3rem;
    border: 1px solid white;
}


.close-icon {
    position: absolute;
    top: 1rem;
    right: 2rem;
    cursor: pointer;
    font-size: 24px; 
    color: #999;
}

.otpPopup-modal-content{
    border: 1px solid white !important;
    padding:2rem 3rem !important;
    width: 80rem !important;
}
#otpPopup h1{
    color: var(--Neutral-1000, #141513);
    text-align: center;
    font-family: Helvetica;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

#otpPopup span{
    color: var(--subtext1, #475569);
    text-align: center;
    font-family: Krub;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 151.523%; 
    margin-bottom: 1rem;
}
.otpPopup_input_container{
    justify-content: center;
    align-items: center;
   
}
.otpPopup_input_container input{
    padding: 0.5rem 1rem;
    border-radius: 5px;
    border: 1px solid #666;
    margin-bottom: 2rem;
    width: 90%;
}
.otpPopup_button_container{
    justify-content: center;
    align-items: center;
}
.otpPopup_button{
    border-radius: 5px;
    border: 1px solid #084B80;
    color: white;
    width: 50%;
    padding: 0.5rem 1.5rem;
    background-color:#084B80;
}

#accountSetupForm h1{
    color: var(--Neutral-1000, #141513);
    text-align: center;
    font-family: Helvetica;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#accountSetupForm span{
    color: var(--subtext1, #475569);
    text-align: center;
    font-family: Krub;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 151.523%;
    margin-top: 3rem;
}
.accountSetupForm_input_container input{
    padding: 0.5rem 1rem;
    border-radius: 5px;
    border: 1px solid #c4c0c0;
    margin-top: 2rem;
    width: 100%;

}
.form-check-container{
    margin-top: 1rem;
    display: flex;
    align-items: center;
}

.form-check-container input{
    padding: 0.8rem;
}
.form-check-container label{
    margin-left: 0.8rem;
    font-family: Helvetica;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.form-check-container label a{
    text-decoration: none !important;
}

.done_button_container{
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.done_button{
    border-radius: 5px;
    border: 1px solid #084B80;
    color: white;
    width: 100%;
    padding: 0.5rem 1.5rem;
    background-color:#084B80;
}
.Secure_Account_container{
    margin-bottom: 15rem;
}


/* ********************************************************************************************** */
/* **********************************1200-1400 **********************************************************/
/* ********************************************************************************************** */

@media screen and (max-width: 1600px) and (min-width: 1400px) {

    .createAccountForm_container {
        margin-top: 3rem;
        padding: 1.5rem;
    }
    
    #createAccountForm h1{
        font-size: 1.9rem;
    }
    
    #createAccountForm span{
        font-size:1.1rem;
    }
    
    .input_container input{
        margin-top: 1rem;
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;

    }
    .input_container select{
        margin-top: 1rem;
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .createAccountForm_buttton_container{
        gap: 0.7rem;
        margin-top: 2rem;
    }
    
    .createAccountForm_back_button{
        border-radius: 5px;
        padding: 0.55rem 0.6rem;
        font-size: 0.7rem;
    }
    
    .createAccountForm_continue_button{
        border-radius: 5px;
        padding: 0.4rem 1.2rem;
        font-size: 1rem;

    }
    
    .modal-content{
        padding: 2rem;
        border: 1px solid white;
    }
    
    
    .close-icon {
        top: 1rem;
        right: 2rem;
        font-size: 0.8rem;
    }
    
    .otpPopup-modal-content{
        padding:1.4rem 2.5rem;
        width: 60rem;
    }
    #otpPopup h1{
        font-size:1.7rem;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    
    #otpPopup span{
        font-size: 0.9rem;
        line-height: 131.523%; 
        margin-bottom: 0.7rem;
    }

    .otpPopup_input_container input{
        padding: 0.4rem 0.5rem;
        border-radius: 5px;
        margin-bottom: 1.4rem;
        width: 80%;
    }
    .otpPopup_input_container ::placeholder{
        font-size: 0.9rem;
    }
    .otpPopup_button{
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    #accountSetupForm{
        margin-top: 2rem;
    }
    #accountSetupForm h1{
        font-size: 1.9rem;
    }
    
    #accountSetupForm span{
        font-size: 1rem;
        line-height: 131.523%;
        margin-top: 2.5rem;
    }
    .accountSetupForm_input_container input{
        padding: 0.5rem 0.5rem;
        margin-top: 1.5rem;
        width: 100%;
    
    }

    .accountSetupForm_input_container ::placeholder{
        font-size: 0.9rem;
    }
    .form-check-container input{
        padding: 0.6rem;
    }
    .form-check-container label{
        margin-left: 0.6rem;
        font-size: 0.9rem;
    }
    
    .form-check-container label a{
        text-decoration: none !important;
    }
    
    
    .done_button{
        padding: 0.35rem 0.5rem;
        font-size: 0.7rem;
    }
    .Secure_Account_container{
        margin-bottom: 10rem;
    }
    
    
    
}






/* ********************************************************************************************** */
/* **********************************1200-1400 **********************************************************/
/* ********************************************************************************************** */

@media screen and (max-width: 1400px) and (min-width: 1200px) {

    .createAccountForm_container {
        margin-top: 2.5rem;
        padding: 1.5rem;
    }
    
    #createAccountForm h1{
        font-size: 1.7rem;
    }
    
    #createAccountForm span{
        font-size:0.9rem;
    }
    
    .input_container input{
        margin-top: 1rem;
        padding: 0.6rem 1.5rem;
        font-size: 0.7rem;

    }
    .input_container select{
        margin-top: 1rem;
        padding: 0.6rem 1.5rem;
        font-size: 0.7rem; 
    }
    
    .createAccountForm_buttton_container{
        gap: 0.7rem;
        margin-top: 2rem;
    }
    .createAccountForm_back_button svg{
        width: 0.7rem;
    }
    .createAccountForm_back_button{
        border-radius: 5px;
        padding: 0.3rem 0.4rem;
        font-size: 0.7rem;
    }
    
    .createAccountForm_continue_button{
        border-radius: 5px;
        padding: 0.34rem 1.2rem;
        font-size: 0.7rem;

    }
    
    .modal-content{
        padding: 2rem;
        border: 1px solid white;
    }
    
    
    .close-icon {
        top: 1rem;
        right: 2rem;
        font-size: 0.8rem;
    }
    
    .otpPopup-modal-content{
        padding:1.4rem 2.5rem;
        width: 60rem;
    }
    #otpPopup h1{
        font-size:1.5rem;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    
    #otpPopup span{
        font-size: 0.75rem;
        line-height: 131.523%; 
        margin-bottom: 0.7rem;
    }

    .otpPopup_input_container input{
        padding: 0.32rem 0.5rem;
        border-radius: 5px;
        margin-bottom: 1.4rem;
        width: 80%;
    }
    .otpPopup_input_container ::placeholder{
        font-size: 0.7rem;
    }
    .otpPopup_button{
        padding: 0.3rem 1rem;
        font-size: 0.7rem;
    }
    
    #accountSetupForm h1{
        font-size: 1.5rem;
    }
    
    #accountSetupForm span{
        font-size: 0.8rem;
        line-height: 131.523%;
        margin-top: 2.5rem;
    }
    .accountSetupForm_input_container input{
        padding: 0.3rem 0.5rem;
        margin-top: 1.5rem;
        width: 100%;
    
    }

    .accountSetupForm_input_container ::placeholder{
        font-size: 0.7rem;
    }
    .form-check-container input{
        padding: 0.5rem;
    }
    .form-check-container label{
        margin-left: 0.6rem;
        font-size: 0.7rem;
    }
    
    .form-check-container label a{
        text-decoration: none !important;
    }
    
    
    .done_button{
        padding: 0.35rem 0.5rem;
        font-size: 0.7rem;
    }
    .Secure_Account_container{
        margin-bottom: 10rem;
    }
    
    
    
}


/* ********************************************************************************************** */
/* **********************************992-1200 **********************************************************/
/* ********************************************************************************************** */

@media screen and (max-width: 1200px) and (min-width: 992px) {

    .createAccountForm_container {
        margin-top: 2.5rem;
        padding: 1.5rem;
    }
    
    #createAccountForm h1{
        font-size: 1.5rem;
    }
    
    #createAccountForm span{
        font-size:0.8rem;
    }
    
    .input_container input{
        margin-top: 1rem;
        padding: 0.55rem 1.2rem;
        font-size: 0.65rem;

    }
    .input_container select{
        margin-top: 1rem;
        padding: 0.55rem 1.2rem;
        font-size: 0.65rem; 
    }
    
    .createAccountForm_buttton_container{
        gap: 0.7rem;
        margin-top: 2rem;
    }
    
    .createAccountForm_back_button{
        border-radius: 5px;
        padding: 0.3rem 0.4rem;
        font-size: 0.7rem;
    }
    
    .createAccountForm_continue_button{
        border-radius: 5px;
        padding: 0.3rem 1.2rem;
        font-size: 0.7rem;

    }
    
    .modal-content{
        padding: 2.5rem;
        border: 1px solid white;
    }
    
    
    .close-icon {
        top: 1rem;
        right: 2rem;
        font-size: 0.8rem;
    }
    
    .otpPopup-modal-content{
        padding:1.5rem 2.3rem;
        width: 60rem;
    }
    #otpPopup h1{
        font-size:1.3rem;
        margin-top: 1.2rem;
        margin-bottom: 1rem;
    }
    
    #otpPopup span{
        font-size: 0.7rem;
        line-height: 131.523%; 
        margin-bottom: 0.7rem;
    }

    .otpPopup_input_container input{
        padding: 0.25rem 0.4rem;
        border-radius: 5px;
        margin-bottom: 1.1rem;
        width: 80%;
    }
    .otpPopup_input_container ::placeholder{
        font-size: 0.65rem;
    }
    .otpPopup_button{
        padding: 0.3rem 1rem;
        font-size: 0.7rem;
    }
    
    #accountSetupForm h1{
        font-size: 1.3rem;
    }
    
    #accountSetupForm span{
        font-size: 0.75rem;
        line-height: 121.523%;
        margin-top: 2.5rem;
    }
    .accountSetupForm_input_container input{
        padding: 0.3rem 0.5rem;
        margin-top: 1.4rem;
        width: 100%;
    
    }

    .accountSetupForm_input_container ::placeholder{
        font-size: 0.65rem;
    }
    .form-check-container input{
        padding: 0.5rem;
    }
    .form-check-container label{
        margin-left: 0.6rem;
        font-size: 0.65rem;
    }
    
    .done_button{
        padding: 0.35rem 0.5rem;
        font-size: 0.7rem;
    }

    
}


/* ********************************************************************************************** */
/* **********************************992-1200 **********************************************************/
/* ********************************************************************************************** */

@media screen and (max-width: 992px) and (min-width: 768px) {

    .createAccountForm_container {
        margin-top: 2rem;
        padding: 1.5rem;
    }
    
    #createAccountForm h1{
        font-size: 1.3rem;
    }
    
    #createAccountForm span{
        font-size:0.8rem;
        line-height: 100%;
    }
    
    .input_container input{
        margin-top: 0.8rem;
        padding: 0.5rem 1.2rem;
        font-size: 0.65rem;

    }
    .input_container select{
        margin-top: 0.8rem;
        padding: 0.5rem 1.2rem;
        font-size: 0.65rem; 
    }
    
    .createAccountForm_buttton_container{
        gap: 0.7rem;
        margin-top: 2rem;
    }
    .createAccountForm_back_button svg{
        width: 0.7rem;
    }
    .createAccountForm_back_button{
        border-radius: 5px;
        padding: 0.3rem 0.4rem;
        font-size: 0.6rem;
    }
    
    .createAccountForm_continue_button{
        border-radius: 5px;
        padding: 0.3rem 1.2rem;
        font-size: 0.7rem;

    }
    
    .modal-content{
        padding: 2.5rem;
        border: 1px solid white;
    }
    
    
    .close-icon {
        top: 1rem;
        right: 2rem;
        font-size: 0.8rem;
    }
    
    .otpPopup-modal-content{
        padding:1.5rem 2.3rem;
        width: 60rem;
    }
    #otpPopup h1{
        font-size:1.3rem;
        margin-top: 1.2rem;
        margin-bottom: 1rem;
    }
    
    #otpPopup span{
        font-size: 0.7rem;
        line-height: 131.523%; 
        margin-bottom: 0.7rem;
    }

    .otpPopup_input_container input{
        padding: 0.25rem 0.4rem;
        border-radius: 5px;
        margin-bottom: 1.1rem;
        width: 80%;
    }
    .otpPopup_input_container ::placeholder{
        font-size: 0.65rem;
    }
    .otpPopup_button{
        padding: 0.3rem 1rem;
        font-size: 0.7rem;
    }
    
    #accountSetupForm h1{
        font-size: 1.3rem;
    }
    
    #accountSetupForm span{
        font-size: 0.75rem;
        line-height: 121.523%;
        margin-top: 2.5rem;
    }
    .accountSetupForm_input_container input{
        padding: 0.3rem 0.5rem;
        margin-top: 1.4rem;
        width: 100%;
    
    }

    .accountSetupForm_input_container ::placeholder{
        font-size: 0.65rem;
    }
    .form-check-container input{
        padding: 0.5rem;
    }
    .form-check-container label{
        margin-left: 0.6rem;
        font-size: 0.65rem;
    }
    
    .done_button{
        padding: 0.35rem 0.5rem;
        font-size: 0.7rem;
    }

    
}

/* ********************************************************************************************** */
/* **********************************576**********************************************************/
/* ********************************************************************************************** */

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

    .createAccountForm_container {
        margin-top: 2rem;
        padding: 0.7rem;
    }
    
    #createAccountForm h1{
        font-size: 1.3rem;
    }
    
    #createAccountForm span{
        font-size:0.9rem;
        line-height: 121.523%;
    }
    .input_container{
        padding:1rem 1.5rem;
    }
    .input_container input{
        margin-top: 0.8rem;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;

    }
    .input_container select{
        margin-top: 0.7rem;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .createAccountForm_buttton_container{
        gap: 0.7rem;
        margin-top: 1.5rem;
    }
    .createAccountForm_buttton_container svg{
        width: 0.8rem;
    }
    .createAccountForm_back_button{
        border-radius: 5px;
        padding: 0.4rem 0.4rem;
        font-size: 0.65rem;
    }
    
    .createAccountForm_continue_button{
        border-radius: 5px;
        padding: 0.4rem 1.5rem;
        font-size: 0.75rem;

    }
    
    .modal-content{
        padding: 2.5rem;
        border: 1px solid white;

    }
    
    .close-icon {
        top: 1rem;
        right: 2rem;
        font-size: 0.8rem;
    }
    
    .otpPopup-modal-content{
        padding:1rem 1.5rem;
        margin-top: 10rem;
        width: 90% !important;
        margin-top: 10rem !important;
    }
    #otpPopup h1{
        font-size:1.2rem;
        margin-top: 1rem;
        margin-bottom: 0.7rem;
    }
    
    #otpPopup span{
        font-size: 0.8rem;
        line-height: 131.523%; 
        margin-bottom: 0.5rem;
    }

    .otpPopup_input_container input{
        padding: 0.3rem 0.45rem;
        border-radius: 5px;
        margin-bottom: 0.5rem;
        width: 80%;
    }
    .otpPopup_input_container ::placeholder{
        font-size: 0.75rem;
        margin-left: 1.5rem;
    }
    .otpPopup_button{
        padding: 0.25rem 0.4rem;
        font-size: 0.8rem;
        width: 60%;
    }
    
    #accountSetupForm h1{
        font-size: 1.3rem;
    }
    
    #accountSetupForm span{
        font-size: 0.9rem;
        line-height: 101.523%;
        margin-top: 1rem;
    }
    .accountSetupForm_input_container{
        justify-content: center !important;
        align-items: center !important; 
    }
    .accountSetupForm_input_container input{
        padding: 0.35rem 0.4rem;
        margin-top: 1rem;
        width: 100%;

    
    }

    .accountSetupForm_input_container ::placeholder{
        font-size: 0.8rem;
    }
    .form-check-container input{
        padding: 0.45rem;
    }
    .form-check-container label{
        margin-left: 0.5rem;
        font-size: 0.8rem;
    }
    
    .done_button{
        padding: 0.5rem 0.5rem;
        font-size: 0.9rem;
    }

    
}


