/*======================================================================
Site Name: VSPL Source Code
Theme URI: Velocis 
Description: this site is developed by Velocis
Version: v5.3.3
Author: Web Team
------------------------------------------------------------------------
Base Color: #fff (White)
Site Color: #ffffff (Dark Black)
Text Color: #000000 (Black), #A7A7A7 (White)
Title Color: #000000 (Black)
Header Color: #ffffff (White)
Footer Color: #ffffff (White)
------------------------------------------------------------------------
Layout Width: 100%
Container Width: 1320px
Responsive Layout: Yes
=======================================================================*/
/* Table of Contents:
 * 1- Reset CSS 
 * 2- Structure 
 * 3- Logo 
 * 4- Inner Title 
 * 5- Form Fields 
 * 6- Button 
 * 7- Footer 
 * 8- Right Img 
 * 9- Modal Popup 
*/

/* 1- Reset CSS */
body{font-family:'Noto Sans';background-color:#fff}a{text-decoration:none}h1,h2,h3,h4,h5,h6,p,ul{margin:0;padding:0}li{list-style:none}
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:100;src:url('../css/fonts/noto-sans-v36-latin-100.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:100;src:url('../css/fonts/noto-sans-v36-latin-100italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:200;src:url('../css/fonts/noto-sans-v36-latin-200.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:200;src:url('../css/fonts/noto-sans-v36-latin-200italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:300;src:url('../css/fonts/noto-sans-v36-latin-300.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:300;src:url('../css/fonts/noto-sans-v36-latin-300italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:400;src:url('../css/fonts/noto-sans-v36-latin-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:400;src:url('../css/fonts/noto-sans-v36-latin-italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:500;src:url('../css/fonts/noto-sans-v36-latin-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:500;src:url('../css/fonts/noto-sans-v36-latin-500italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:600;src:url('../css/fonts/noto-sans-v36-latin-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:600;src:url('../css/fonts/noto-sans-v36-latin-600italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:700;src:url('../css/fonts/noto-sans-v36-latin-700.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:700;src:url('../css/fonts/noto-sans-v36-latin-700italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:800;src:url('../css/fonts/noto-sans-v36-latin-800.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:800;src:url('../css/fonts/noto-sans-v36-latin-800italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:900;src:url('../css/fonts/noto-sans-v36-latin-900.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:900;src:url('../css/fonts/noto-sans-v36-latin-900italic.woff2') format('woff2')}
/* 2- Structure */
.login-inner{display:flex}
.login-inner .left-sec{display:flex;flex-direction:column;flex-grow:1;width:45%;position:relative}
.register-area .left-sec{width:70%}
.left-sec:before{content:'';width:100%;height:100%;position:absolute;top:0;right:0;background:url(../images/bg-img.png) no-repeat;background-position:top right;background-size:60% 50%;z-index:-1}
.login-area .left-sec form{padding:20px 130px 20px 100px;flex-grow:1;margin-top:0!important}
.register-area .left-sec form{padding:15px 50px 15px 100px;flex-grow:1}
/* 3- Logo */
.logo-align{display:flex;align-items:center;gap:16px;color:#000;padding:7px 0 7px 100px}
.logo-align .brand-img img{width:60px}
.brand-text h4{font-size:14px;font-weight:600;line-height:22px}
.brand-text h5{font-size:12px;font-weight:600;line-height:22px}
.logo-sec{display:flex;align-items:center;justify-content:space-between}
.right_section{padding-right:130px}
.right_section img{width:60px}
.register-sec{padding-right:50px}
/* 4- Inner Title */
.inner-title{margin-bottom:10px}
.inner-title h4{font-size:18px;color:#000;line-height:normal;font-weight:600;margin-bottom:5px}
.inner-title span{font-size:14px;color:#9A9A9A;line-height:normal;font-weight:400}
.logo-title{font-size:16px;font-weight:600;line-height:normal;padding:5px 0;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;padding-left:100px}
/* 5- Form Fields */
.grid-sec{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end}
.form-group{margin-bottom:15px;position:relative}
.register-area .form-group{margin-bottom:6px;position:relative;}
label{font-size:13px;font-weight:500;color:#000000;margin-bottom:2px}
input, select, textarea{height:33px;font-size:12px!important;padding:5px 15px!important;color:#000!important;font-weight:400!important;border:1px solid #D9D9D9!important;border-radius:4px!important}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none}
.custom-select-wrapper::after{content:"";position:absolute;right:15px;top:64%;transform:translateY(0);pointer-events:none;background-image:url(../images/down.png);background-size:contain;background-repeat:no-repeat;width:12px;height:7px;z-index:99}
.form-group i{position:absolute;bottom:7px;right:15px;font-size:18px}
span.already-login-sms{font-size:13px;font-weight:400}
span.already-login-sms a{color:#1462FB}
input:focus, select:focus, textarea:focus{border:1px solid #2a2d8d!important;box-shadow:none!important}
.login-area span.error{position:absolute;top:100%;font-size:10px;line-height:10px}
.login-area span.text-danger{position:absolute;top:100%;font-size:10px;line-height:10px}
.login-area .invalid-feedback{right:0;width:fit-content}
/* 6- Button */
.gray-btn{background:#4D4D4D!important}
.quick-btn{height:33px;border:0px solid #F4F4F4;border-radius:8px;color:#fff;background:linear-gradient(35deg, #F7941D, #FE5D06 50%);font-size:13px;padding:5px 15px;transition:all 0.5s ease-in-out 0s;-webkit-transition:all 0.5s ease-in-out 0s;border-radius:4px;position:relative;overflow:hidden}
.quick-btn:before{left:-20px;-webkit-transform:translate(-1%, -50%);transform:translate(-1%, -50%)}
.quick-btn:after{right:-20px;-webkit-transform:translate(1%, -50%);transform:translate(1%, -50%)}
.quick-btn:before, .quick-btn:after{position:absolute;top:50%;content:"";width:20px;height:20px;background-color:#162f6a;border-radius:50%}
.quick-btn:after, .quick-btn:before{z-index:-1;transition:all 0.5s ease-in-out 0s;-webkit-transition:all 0.5s ease-in-out 0s}
.quick-btn:hover{color:#fff;z-index:1}
.quick-btn:hover:before{-webkit-animation:criss-cross-left 0.8s both;animation:criss-cross-left 0.8s both;-webkit-animation-direction:alternate;animation-direction:alternate}
.quick-btn:hover:after{-webkit-animation:criss-cross-right 0.8s both;animation:criss-cross-right 0.8s both;-webkit-animation-direction:alternate;animation-direction:alternate}
@keyframes criss-cross-left {0%{left:-20px}50% {left:50%;width:20px;height:20px}100%{left:50%;width:375px;height:375px}}
@keyframes criss-cross-right {0%{right:-20px}50%{right:50%;width:20px;height:20px}100%{right:50%;width:375px;height:375px}}
/* 7- Footer */
.footer-sec{font-size:14px;font-weight:400;border-top:1px solid #f0f0f0;padding:10px 0 10px 100px;color:#A7A7A7}
.mobile-sec{display:none}
/* 8- Right Img */
.login-area .right-sec{width:55%}
.register-area .right-sec{width:30%}
.right-sec img{width:100%;height:100vh}
/* 9- Modal Popup */
.register-modal{background:#00000099}
.register-modal .modal-body{padding:50px 60px;position:relative;text-align:center}
.register-modal .modal-body .btn-close{position:absolute;right:8px;top:8px;width:25px;height:25px;border-radius:100px;background-color:#8F8F8F;filter:invert(1);opacity:1;background-size:31%}
.register-modal .modal-body img{width:130px;height:auto;margin-bottom:30px}
.register-modal .modal-body p{font-size:16px;color:#000;line-height:28px}

/* yash css  */
.form-check input{height:.6rem;border-radius:50%!important;width:.6rem!important;padding:5px!important}.form-check{display:flex;align-items:baseline;gap:5px;padding-left:19px}.cust_d_cs_tab_s,.verify_otp{display:flex;align-items:end;gap:10px}.verify_otp button{height:33px;font-size:12px;padding:5px 15px;width:100%!important;min-width:fit-content;white-space:nowrap}.verify_otp .form-group{width:-webkit-fill-available}.cust_d_cs_tab_s .captcha_custom{display:flex;align-items:center;max-width:fit-content;gap:10px}.cust_d_cs_tab_s .form-group{width:100%}.captcha-img{height:33px!important;width:auto!important;border:1px solid #dee2e6;border-radius:4px;object-fit:contain!important}.captcha-img img{height:100%}
.validation_msg_custom {
    margin-left: 100px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    background: #f8d7da;
    border: 1px solid #f1aeb5;
    justify-content: space-between;
    padding-right: 30px;
    margin-right: 50px;
    border-radius: 5px;
}
.validation_msg_custom ul {
    margin: 0;
}
label.otp_etr_custom {
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.cust_login_cs{display:flex;align-items:end;gap:10px}
.cust_login_cs .captcha_custom{display:flex;align-items:center;max-width:fit-content;gap:10px}
@media screen and (max-width: 991px){
    .validation_msg_custom{
         margin-left: 15px;
         margin-right: 15px;
         align-items: start;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1349px) {
	.logo-align{padding:6px 0 6px 100px;gap:8px}
	.logo-align .brand-img img{width:45px}
  .right_section img{width:45px}
	.brand-text h4{font-size:12px}
	.brand-text h5{font-size:14px}
	.logo-title{font-size: 12px;}
	.register-area .left-sec form{padding:10px 50px 10px 100px}
	.inner-title h4{font-size: 14px;}
	label{font-size: 11px;margin-bottom:0px}
	input, select, textarea{height: 28px;font-size: 10px!important;}
	.custom-select-wrapper::after{top:68%;width:8px;height:8px}
	.login-area span.text-danger{font-size:9px;line-height:9px}
	.captcha-img{height:28px!important}
	.verify_otp button{height: 28px;font-size: 10px;}
	.quick-btn{height: 28px;font-size: 11px;}
	span.already-login-sms{font-size: 11px;}
	.footer-sec{font-size: 11px;padding:6px 0 6px 100px}
}





 .ring-loader {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100% !important;
  z-index: 9999;
  display: none;
}

/* Centered Ring */
.ring-loader .center-loader {
  width: 60px;
  height: 60px;
  border: 6px solid #fff;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  animation: ring-spin 1s linear infinite;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring-loader .loader-text {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  font-family: Arial, sans-serif;
  text-align: center;
}
 
@keyframes ring-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}