body {font-family: 'Roboto', sans-serif !important;}
.heading {font-size: 24px; font-weight: 700; text-align: center; color: #1c355e; margin: 0px; font-family: 'Open Sans', sans-serif !important;}
#loginBody {margin: 0px;}
#vendors #login {position: fixed; width: 100%; top: 40%; left: 50%; -webkit-transform: translate(-50%,-40%); transform: translate(-50%,-40%); max-width: 800px;}
#login .post {width: 100%; display: flex; margin: 20px 0 5px 0;}
.post .post-left {width: 40%; float: left; background: url(../images/payment.jpg); padding: 10px; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important;}
.post .post-right {width: 60%; float: left; box-shadow: 0 2px 8px #00000026; padding: 35px; height: 80vh; overflow: hidden; max-height: 350px;}
.cust-sign {max-height: 400px !important;}

.post-right_body p {text-align: center; font-size: 15px; margin: 10px auto 20px auto;}
.post-right_body .form-group input {padding: 10px 12px; border: 1px solid #ccc; font-size: 14px; border-radius: 0px; font-weight: 500;}
#otp_for_user {margin: 20px auto;}
#phone_errors p {margin: 25px 0px 0px 0px !important; font-weight: normal; font-size: 12px; width: 100%;}
.post-right_body .form-group input:focus-visible {outline: none;}
.post-right_body .form-group input:focus {border-color: #333;}
.post-right_body .form-group input::placeholder {color: #333; font-weight: 500; font-size: 14px;}
.post-left .left-bdr {border: 2px solid #fff; width: 100%; height: 100%;}
.post-right_body .form-group label {font-size: 14px; font-weight: 500; display: inline-block; padding-bottom: 5px; }
.logo-img {max-width: 100%; margin: 35px auto; display: block; vertical-align: middle;}
.post-right_body .form-group {margin-bottom: 10px; width: 100%; display: inline-grid;}
.cstm-btn {background-color: #ed4856; border: 2px solid #ed4856; cursor: pointer; padding: 8px 20px; color: #fff; font-weight: 600; font-size: 15px; font-family: 'Roboto', sans-serif !important;}
.cstm-btn:hover {border-color: #1c355e; background-color: #1c355e; color: #fff; transition: 0.6s;}
.goback {text-align: center; display: block; color: #333; text-decoration: none; margin: 10px 0px; text-transform: capitalize;}
.goback:hover {color: #ed4856;}
.subm-btn {background-color: #ed4856; border: 2px solid #ed4856 !important; cursor: pointer; padding: 8px 20px !important; color: #fff; font-weight: 600 !important; font-size: 15px !important;}
.subm-btn:hover {background-color: #1c355e; border-color: #1c355e !important;}
.form-label {margin-bottom: 0px;}
.color-web{color: #ed4856;}

/*customer-signup page css*/
.displaynone {display: none;}
.alre-acc {font-size: 15px; font-weight: 600; color: #333; margin-top: 10px; display: block;}
.sb-btn {text-align: center;}
.post .customer-sign {background: url(../images/login-bg2.jpg);}
.did_not_receive {text-align: center; font-size: 14px;}
.otp_verify_cls p.confirm_heading {font-size: 20px; font-weight: 600;}
.did_not_receive .resend_otp_msg {display: block; color: #ed4856; opacity: .4; cursor: pointer; padding-top: 5px; text-decoration: underline;}
.alre-acc .dont-have {color: #ed4856;}
.alre-acc .dont-have:hover {color: #ed4856;}
.focused .cstm-btn {border: none !important;}
#signup_otp {margin-bottom: 10px;}

/*customer-login page css*/
.post .customer-login {background: url(../images/login-bg.jpg);}

@media(max-width:991px) {
	#vendors #login {max-width: 700px;}
}

@media(max-width:767px) {
	#vendors #login {max-width: 550px;}
	.post .post-right {padding: 15px;}
}

@media(max-width:575px) {
	.post .post-right {width: 100%;}
	.post .post-left {display: none;}
	#vendors #login {max-width: 300px;}
}