@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}



ul, ol, li{

    margin: 0;

}



a{

    text-decoration: none;

}







body, html {

    margin: 0;

    padding: 0;

    height: 100%;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  }



.wrapper {

    display: flex;

    width: 100%;

    height: 100vh; /* Full height */

}



.left-container {

  width: 400px; 

  background-color: #517DDB;

  color: white;

  height: 100vh; 

  position: fixed; 

  top: 0;

  left: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-start; /* Adjusted to top-align the content */

  height: auto; /* Dynamic height based on content */

  min-height: 100vh; /* Ensure full viewport height as a minimum */

}





.leftSidebar_signup{

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  height: 100%;

  width: 100%;

}



.footer {

  width: 100%;

  padding: 10px;

  /* background-color: transparent !important; */

  text-align: center;

  position: relative;

  bottom: 40px;

  left: 0;

  margin-left: 200px;

  z-index: -1;

}







.right-side {

  margin-left: 387px; /* Same as the left side width */

  flex-grow: 1;

  display: flex;

  justify-content: center;

  align-items: center;

}



.rightSide-container {

  max-width: 800px; /* Set max width for the right content */

  width: 100%;

}







/* ===================================================

SignUp page

===================================================== */ */





  

.signup-page{

    width: 100%;

    overflow-x: hidden;

}



.signup-page .logo_sec{

    display: flex;

    justify-content: center;

}



.logo_sec img{

    text-align: center;

    margin-bottom: 30px;

}



.signup-page .singup-side-content{

    background: #517DDB;

    /* max-width: 480px; */

    /* height: 930px; */

    width: 100%;

    position: relative;

    padding-left: 39px;

    /* padding-bottom: 168px; */

}



/* .signup-page .singup-side-content::before{

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    background: url(https://einvoice.urdemo.website/assets/images/announcement_icon.svg);

    width: 218px;

    height: 213px;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: top;

} */



.signup-page .singup-side-content .sideContent_txt{

    display: flex;

    gap: 17px;

    align-items: flex-start;

    border-radius: 1px;

    box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.15);

    padding-bottom: 25px;

    margin-top: 25px;

}



.signup-page .singup-side-content .sideContent_txt:last-child{

    box-shadow: none;

}



.signup-page .singup-side-content .sideContent_txt:first-child{

    margin-top: 0 !important;

}



.announcement_logo{

    display: none;

    margin-left: -80px;

}



.signup-page .singup-side-content h4{

    color: #FFF;

    font-family: Roboto;

    font-size: 17px;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    letter-spacing: 0.17px;

    padding: 20px 0;

}



.signup-page .singup-side-content .sideContent_txt h6{

    color: #FFF;

    font-family: Roboto;

    font-size: 16px;

    font-style: normal;

    font-weight: 600;

    line-height: normal;

    margin-bottom: 8px;

}



.signup-page .singup-side-content .sideContent_txt p{

    color: #EBF8FF;

    font-family: Roboto;

    font-size: 13px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    max-width: 320px;

    margin-bottom: 0;

}



.signup-page .security-assurance{

    background: #F0F7FF;

    width: 100%;

    padding: 28px 44px;

}





.signup-page .security-assurance h4{

    color: #333;

    font-family: Roboto;

    font-size: 16px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    letter-spacing: 0.16px;

    margin-bottom: 20px;

}



.signup-page .security-assurance .security-assurance-imgs{

    display: flex;

    gap: 30px;

}



/* .leftSidebar_signup{

    position: relative;

    width: 100%;

} */



.signup-page .singup_mail_box{

    background: #FFF5F8;

    padding: 12px 0px 12px 48px;

    display: flex;

    gap: 11px;

    align-items: center;

    /* position: absolute;

    width: 100%; */

}



.signup-page .singup_mail_box p{

    color: #333;

    font-family: Roboto;

    font-size: 13px;

    font-style: normal;

    font-weight: 400;

    line-height: 16px; 

    margin-bottom: 0;

}



.signup-page .singup_mail_box p a{

    color: #EC1C24;

    font-weight: 500;

    text-decoration-line: underline;

}



.signup-page .singup_mail_box img{

    width: 100%;

    height: 100%;

    object-fit: cover;

    padding: 5px;

}



.signup-page .singup_mail_box span{

   background-color: #FCFCFC;

    border: 1px solid #999;

    border-radius: 50px;

    padding: 5px;

    max-width: 45px;

    height: 45px;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}



.signup_form_container{

    max-width: 550px;

    width: 100%;

    margin: auto;

    border-radius: 40px;

    border: 2px solid #666;

    background: #FFF;

    padding: 30px;

    /* margin-bottom: 39px; */

}



.signup_waterm_bg{

    position: relative;

}



.signup_waterm_bg::before{

    content: '';

    position: absolute;

    bottom: 0;

    right: -40px;

    background: url(../images/signup-img/signup_bg.png);

    width: 946px;

    height: 740px;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: top;

    z-index: -1;

}



.signup_form_container .register-panel h3{

    color: #333;

    font-family: Roboto;

    font-size: 24px;

    font-style: normal;

    font-weight: 600;

    line-height: normal;

    letter-spacing: 0.24px;

    margin-bottom: 6px;

}



.signup_form_container .register-panel p{

    color: #666;

    font-family: Roboto;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    margin-bottom: 20px;

}



.signup_form_container .register-panel p a{

    color: #333;

    font-weight: 500;

}



.signup_form_container .sign_up_form label{

    color: #666;

    font-family: Roboto;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

}



.signup_form_container .sign_up_form .form-control{

    height: 54px;

    width: 100%;

    border-radius: 10px;

    border: 2px solid #666;

    background: #FFF;

    padding-right: 50px;

}



.signup_form_container .sign_up_form span i{

    font-size: 20px;

    color: #666666;

}





.signup_form_container .sign_up_form input::placeholder{

    color: #CCC;

    font-family: "DM Sans";

    font-size: 15px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

}



.form-control:focus{

    outline: unset;

    border: unset;

    box-shadow: unset;

    color: unset;

}

.form-check-input:checked, .form-check-input:focus{

    border-color: 1px solid #999999;

}



.form-check-input:focus{

    border-color: #999999 !important;

    box-shadow: unset;

}



.signup_form_container .sign_up_form_btn{

    margin-top: 35px;

}



.sign_up_form_btn.row.password_reset {

    margin-top: 20px;

}



.signup_form_container .sign_up_form_btn.row .form-check.pLeft{

    padding-left: 2.5em;

    margin-bottom: 20px;

}



.signup_form_container .sign_up_form_btn.row a.forgotPass{

    color: #3480D2;

    text-align: right;

    font-family: Roboto;

    font-size: 13px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    letter-spacing: 0.13px;

    text-decoration-line: underline;

}



.signup_form_container .sign_up_form_btn label{

    color: #666;

    font-family: Roboto;

    font-size: 12px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    max-width: 412px;

}



.createLogin .signup_form_container .sign_up_form_btn .form-check{

    margin-bottom: 35px;

}



.signup_form_container .sign_up_form_btn .btn{

    height: 44px;

    border-radius: 80px;

    background: #999;

    width: 100%;

    margin: 10px 0 20px;

    border: unset;

    transition: all 0.5s ease;

    color: #FFF;

    text-align: center;

    font-family: Roboto;

    font-size: 16px;

    font-style: normal;

    font-weight: 700;

    line-height: normal;

    opacity: 1;

}



.signup_form_container .sign_up_form_btn .btn:hover{

    background: #EC1C24;

}



.signup_form_container p.sgninAcontent{

    color: #666;

    text-align: center;

    font-family: Roboto;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    margin-bottom: 0;

}



.signup_form_container p.sgninAcontent a{

    color: #3480D2;

    font-size: 15px;

    font-weight: 700;

}



.signup-page .footer{

    background: #FFF;

    padding: 15px;

    width: 100%;

}



.signup-page .footer p{

    color: #999;

    text-align: center;

    font-family: Roboto;

    font-size: 13px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

}



.signup-page .footer p a{

    color: #999;

    text-decoration-line: underline;

}



.signup_waterm_bg .india-data-center{

    color: #666;

    text-align: center;

    font-family: Roboto;

    font-size: 13px;

    font-style: italic;

    font-weight: 400;

    line-height: normal;

    letter-spacing: 0.13px;

}



.mobile-footer{

    display: none;

}



.loginAccount, .createLogin, .verification-code, .verification-code-mob, .forgotPassword, .createnewAccount{

    margin: auto;

    width: 100%;

    margin-bottom: 0;

}



.verification-code .otp-box, .verification-code-mob .otp-box  {

    width: 64px;

    height: 54px;

    text-align: center;

    font-size: 24px;

    border: 1px solid #666666;

    border-radius: 10px;

}



.verification-code #email-otp-inputs, .verification-code-mob #number-otp-inputs {

    width: 100%;

    gap: 10px;

}







.signup-page .backTobtn{

    display: block;

    margin: auto;

    max-width: 550px;

    text-align: center;

    margin-top: 40px;

    color: #333;

    font-family: "DM Sans";

    font-size: 13px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

} 



.signup-page .backTobtn span{

    padding-right: 5px;

}







/* Remove the spinner arrows from number input */

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



input[type="number"] {

    --moz-appearance: textfield; 

}



.signup-page .backtoLogin{

    display: block;

    margin: auto;

    max-width: 621px;

    color: #3480D2;

    text-align: center;

    font-family: Roboto;

    font-size: 13px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    }



.error{

    color: #e71414;

    text-align: left;

    font-family: Roboto;

    font-size: 13px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    position: absolute;

    padding-top: 5px;

}





/*Change autocomplete styles in WebKit */

input:-webkit-autofill,

input:-webkit-autofill:hover, 

input:-webkit-autofill:focus,

textarea:-webkit-autofill,

textarea:-webkit-autofill:hover,

textarea:-webkit-autofill:focus,

select:-webkit-autofill,

select:-webkit-autofill:hover,

select:-webkit-autofill:focus {

  -webkit-text-fill-color: #666;

  -webkit-box-shadow: 0 0 0px 1000px #FFF9FB inset;

  transition: background-color 5000s ease-in-out 0s;

}; 



.form-control, .otp-box.has-text {

    transition: background-color 0.3s;

}

.form-control.has-text, .otp-box.has-text {

    background-color: #FFF9FB !important; 

}



.form-check-input:checked{

    background-color: #3480D2;

    border-color: #3480D2;

}



.createLogin .form-check-input{

    width: 22px !important;

    height: 22px !important;

}

.createLogin .signup_form_container .sign_up_form_btn label{

    padding-left: 10px;

    padding-top: 10px;

}





/*loader CSS Starts*/

.overlay1 {

    display: none;

}

.overlay1 {

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    position: absolute;

    background: #22222273;

}

.overlay__inner {

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    position: absolute;

}

.overlay__content {

    left: 50%;

    position: absolute;

    top: 50%;

    transform: translate(-50%, -50%);

}

.spinner {

    animation-name: spinner;

    -webkit-animation-name: spinner;

    animation-duration: 2s;

    -webkit-animation-duration: 2s;

    animation-timing-function: linear;

    -webkit-animation-timing-function: linear;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    visibility: visible !important;

}

.spinner {

    width: 75px;

    height: 75px;

    display: inline-block;

    border-width: 2px;

    border-color: rgba(255, 255, 255, 0.05);

    border-top-color: #fff;

    animation: spin 1s infinite linear;

    border-radius: 100%;

    border-style: solid;

}

@keyframes spin {

  100% {

    transform: rotate(360deg);

  }

}

/*loader CSS Ends*/

/*resend CSS Starts*/

.bottom_info {

    padding-top: 20px;

    text-align: center;

}

#resendOTP, #resendOTPmobile,#resendOTP_timer {

    cursor: pointer;

    color: #3480D2 !important;

    font-weight: 500 !important;

    text-align: center;

    font-family: Roboto;

    font-size: 16px;

    font-style: normal;

    line-height: normal;

    margin-bottom: 0;

}

/*resend CSS Ends*/





/* show and hide password start  */



span.fa.fa-fw.field-icon.toggle-password.fa-eye-slash {

    float: right;

    margin-right: 16px;

    margin-top: -33px;

    position: relative;

    color: #343434;

    font-size: 18px;

    z-index: 2;

    opacity: 0.8;

    font-weight: 200;

}

span.fa.fa-fw.field-icon.toggle-password.fa-eye {

    float: right;

    margin-right: 16px;

    margin-top: -33px;

    position: relative;

    z-index: 2;

    opacity: 0.8;

    color: #343434;

    font-size: 18px;

    font-weight: 200;

}



/* show and hide password end  */







/* ========================================

19.09.24

====================================== */



.register-panel .email_id{

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 32px;

}



.register-panel .email_id span{

    color: #3480D2;

    font-family: "DM Sans";

    font-size: 16px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

}



.register-panel.register-user-panel{

    text-align: center;

}



.register-user-panel .sign_up_form.register-user-msg{

    border-radius: 30px;

    background: #EBFFEE;

    height: 183px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 10px;

}



.register_user, .verify_user, .forgotPassword {

    margin: auto;

    width: 100%;

    margin-bottom: 0;

}



.register-panel.register-user-panel p{

    margin-bottom: 37px;

}



.register-user-panel .sign_up_form.register-user-msg h6{

    color: #000;

    text-align: center;

    font-family: Roboto;

    font-size: 24px;

    font-style: normal;

    font-weight: 500;

    line-height: normal;

    margin: 0;

}



.register-user-panel .sign_up_form.register-user-msg p{

    color: #333;

    font-family: Roboto;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 24px;

    margin: 0;

}



/* .g-recaptcha iframe .rc-anchor-normal-footer {

    display: inline-block;

    height: 74px;

    vertical-align: top;

    width: 70px;

    position: absolute !important;

    right: 20px !important;;

}



.g-recaptcha iframe {

    max-width: 250px !important;;

    border: 1px solid #000 !important;;

    border-radius: 10px !important;;

} */





.left-container{

    height: 100%;

}