.signUpModel, input.valid~.forValid {
    display: none
}

body {
    overflow-x: hidden;
    padding-bottom: 20px !important
}

.signUpModel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99
}
.iti--allow-dropdown{
    display: block;
}
.signUpModel.show {
    display: block
}

.custom-alert-danger::before, .custom-alert-success::before {
    width: 17px;
    height: 17px;
    display: inline-block;
    margin-right: 6px;
    content: ''
}

.signUpoverlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    display: block;
    transition: .3s
}
.forgotForm,
.loginForm, .signUpForm {
    height: auto;
    transform: translateX(-50%);
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
    border-radius: 8px;
    position: absolute;
    background: #fff;
    width: 100%;
    display: none;
}

.signUpForm {
    max-width: 480px;
    top: 10%;
    left: 150%;
   
}
.forgotForm,
.loginForm {
    min-height: 620.88px;
    max-width: 480px;
    top: 110%;
    left: 50%
}
.forgotForm.show,
.loginForm.show {
    top: 10%;
    display: block;
}

.signUpForm.show {
    left: 50%;
    overflow-x: hidden;
    display: block;
}

.signUpForm.show.hidden {
    top: 110%
}

.signuphead {
    font-weight: 500;
    font-size: 26px;
    line-height: 33px;
    color: #333638;
    margin-bottom: 20px
}

.signin .inputGroup, .signup .inputGroup {
    margin-bottom: 14px
}

.signin .inputGroup label, .signup .inputGroup label {
    position: absolute;
    font-weight: 450;
    font-size: 14px;
    line-height: 19px;
    color: #a1acb9;
    z-index: 1;
    top: 15px;
    left: 15px;
    margin-bottom: 0;
    transition: .3s
}

.inputGroup input, .inputGroup select, .signin .inputGroup input, .signup .inputGroup input {
    padding: 15px;
    max-height: 48px;
    border: 1.5px solid #edf3fb
}

.inputGroup input:focus, .inputGroup select:focus, .signin .inputGroup input:focus, .signup .inputGroup input:focus {
    border: 1.5px solid #2d96ee
}

.inputGroup input:hover, .signin .inputGroup input:hover, .signup .inputGroup input:hover {
    border: 1.5px solid #88bdea
}

.inputGroup input.invalid, .inputGroup select.invalid {
    border: 1.5px solid #d41114
}

.inputGroup input, .inputGroup select, .inputGroup textarea {
    font-family: CircularStd;
    font-size: 14px;
    font-weight: 450;
    line-height: 17.71px;
    text-align: left;
    color: #393939
}

.signin .inputGroup label.focused, .signup .inputGroup label.focused {
    left: 15px;
    top: -9px;
    padding: 0 5px;
    background: #fff;
    color: #2d96ee
}

.inputGroup.signupGroup input {
    max-height: 48px;
    height: 100%
}

.signin p.showPassTxt, .signup p.showPassTxt {
    margin-left: 8px;
    font-family: CircularStd;
    font-size: 13px;
    font-weight: 450;
    line-height: 16.44px;
    text-align: center;
    color: #646464
}

.showPassCheck {
    margin: -10px 0 0;
    display: flex;
    align-items: center;
    position: relative
}

.flexInput {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    column-gap: 15px
}

.flexInput.passwordsFlex {
    align-items: start
}

.flexInput div {
    flex-basis: 200px
}

button.getStarted {
    display: block;
    padding: 13px 0;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    color: #fff;
    background: #2d96ee;
    width: 100%;
    border-radius: 5px;
    border: none;
    margin: 35px 0 14px;
    cursor: pointer;height: 44px;
}

button.getStarted:hover {
    background: #127ad1
}

p.loginRedirect {
    font-family: CircularStd;
    font-size: 14px;
    font-weight: 450;
    line-height: 16.44px;
    text-align: center;
    color: #0f0f0f
}
span.loginModelButton,
a.loginModelButton {
    text-decoration: underline;
    color: #2d96ee;
    font-size: 14px;
    font-size: 14px;
    font-weight: 450;
    cursor: pointer;
    font-family: CircularStd;
}
span.loginModelButton:hover{
    text-decoration: none;
}
.signin .inputGroup input.invalid~label.focused, .signup .inputGroup input.invalid~label.focused {
    color: #df4d4d
}

.signin img.forValid, .signup img.forValid {
    top: 15px
}

.pageHead, h2.pageHead {
    font-family: CircularStd;
    font-size: 23px;
    font-weight: 700;
    line-height: 29.09px;
    text-align: left;
    letter-spacing: .5px;
    color: #0f0f0f;
    padding-bottom: 8px
}

.custom-alert-danger, .custom-alert-success {
    font-family: CircularStd;
    font-size: 14px;
    line-height: 17.71px;
    padding: 12px 15px;
    border-radius: 3px;
    color: #fff
}

.allForms {
    position: relative;
    top: 0;
    left: -82px
}

.custom-alert-success {
    font-weight: 500;
    background-color: #0db069;
    border-color: #0db069;
    margin-bottom: 25px;
    text-align: center
}

.custom-alert-danger, .signUpModel .signuphead {
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center
}

.custom-alert-success::before {
    background: url('../images/successIcon.svg');
    position: relative;
    top: 2px
}

.custom-alert-danger {
    background-color: #d41222 !important;
    border-color: #d41222
}

.termBody p, .termsHead {
    font-family: CircularStd;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    color: #818181;
    font-weight: 450
}

.custom-alert-danger::before {
    background: url('../images/dangerIcon.svg');
    position: relative;
    top: 2px
}

div#errorSigninAlert {
    margin: -12px 0 20px
}

input:-webkit-autofill, input:-webkit-autofill:active, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important
}

.iti-mobile .iti--container {
    z-index: 9999999999
}

.termSec {
    margin-top: 25px;
    border-top: 1px solid #ecf4ff;
    padding-top: 22px
}

.termsHead {
    margin-bottom: 12px
}

.termBody {
    display: flex;
    column-gap: 8px
}

.inputCheck {
    width: 14px;
    height: 14px;
    outline: 0;
    border: 1px solid #818181;
    position: relative;
    top: 2px
}

input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #646464;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    position: relative
}

.showPassCheck:hover input, input[type=checkbox]:hover {
    border-color: #117bd4
}

input[type=checkbox]:checked {
    background-color: #2d96ee;
    border-color: #2d96ee
}

.inputCheck.invalidCheck {
    border-color: #df4d4d
}

input[type=checkbox]:checked::after {
    content: '✓';
    color: #fff;
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.termBody p a, p.loginRedirect a {
    color: #2d96ee;
    text-decoration: none;
    font-family: 'CircularStd';
}

.termBody p a:hover, p.loginRedirect a:hover {
    text-decoration: underline;
    text-underline-offset: 4px
}

.termBody+.termBody {
    margin-top: 8px
}

.iti__flag-container {
    border: unset;
    width: 64px;
    height: 47px
}

.iti__selected-flag {
    justify-content: center;
    background: #f9fcff
}

input#r_phone {
    max-width: 100%;
    margin-left: auto;
    padding: 17px 40px 16px 78px
}

.signup .inputGroup label[for=r_phone] {
    left: 78px
}

.errorMsg {
    font-size: 13px;
    font-weight: 450;
    line-height: 16.44px;
    letter-spacing: .005em;
    color: #e20707;
    position: relative;
    margin-top: 6px;
    padding-left: 21px;
    display: none;
}

.errorMsg.invalidPhone {
    display: block !important
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: #f8fcff
}

.errorMsg::before {
    position: absolute;
    content: '';
    width: 14px;
    height: 14px;
    left: 0;
    top: 0;
    background: url(../images/error-sign-new.svg) no-repeat
}

.signUpModel .signuphead {
    font-size: 23px;
    line-height: 33px;
    color: #161616
}
form#register_form{
    position: unset;
    transform: unset;
    margin: 0 auto;
}
input.invalid~.errorMsg, select.invalid~.errorMsg {
    display: block;
}
 
@media (max-width:1300px) {
    form.active {
        /* left: 50px */
    }
}

@media (max-width:1200px) {
    .divLeft img {
        max-width: 390px !important
    }
}

@media (max-width:991px) {
    .pageWrapper .divLeft {
        display: none
    }

    .divRight {
        flex-basis: 60%;
        background: 0 0
    }

    .allForms {
        left: -12px
    }
}

@media (max-width:767px) {
    .divRight {
        flex-basis: 90%
    }

    form, form.signup {
        max-width: 100%
    }

    form.active {
        left: 10px
    }
}

@media (max-width:575px) {
    .forgotForm, .loginForm, .signUpForm{
        padding: 30px 15px;
        transform: translate(-50%, -50%);

    }
    .forgotForm, .loginForm, .signUpForm{
        width: calc(100% - 30px);
    }
    .forgotForm.show, .loginForm.show {
        top: 50%!important;
        
    }
    #forgetPassForm .loginRedirect {
        max-width: 230px;
        width: 100%;
        margin: 0 auto
    }
    .formBodyWrap.signUpBody form.active#register_form{
        transform: unset;
    }
    .formBodyWrap.signUpBody .allForms form{
        right:0;
    }
    .custom-alert-danger {
        font-family: CircularStd;
        font-size: 13px;
        font-weight: 450
    }

    .login a.loginModelButton, p.loginRedirect {
        font-size: 13px
    }

    .allForms {
        top: 0px
    }
    .signUpModel .signuphead {
        font-size: 20px;
 
       
    }
    form.active {
        left: 0
    }

    .signUpForm {
        top: 50%
    }

    .loginForm.show {
        top: 50%
    }

    .divRight {
        height: 90%
    }

    .signin p.loginRedirect {
        bottom: 0
    }
}

@media (max-width:460px) {
    #account_password {
        margin-right: 5px
    }

    .flexInput .inputGroup:first-child input[type=password] {
        width: 97%
    }
}

@media (max-width:392px) {
    .signup .inputGroup label {
        font-size: 13px;
        left: 19px
    }
}

@media (max-height:750px) AND (max-width:575px) {
    .divRight {
        height: 110%
    }
}

body.overflowHide {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0
}