/*----------------------------
Add CSS file
----------------------------*/
@import "../plugins/bootstrap/css/bootstrap.min.css";
@import "../plugins/fontawesome/css/all.min.css";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*----------------------------
element      
----------------------------*/
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html { text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;}
*{margin:0; padding:0}
a{ text-decoration:none;}
a:hover{ text-decoration:none !important;}
header, nav, section, article, aside, footer { display:block;}
html {font-size: 100%;}
body {font-size: 12px;background:var(--body); font-family: "Inter", sans-serif;line-height: 26px;color:#455A64;-webkit-font-smoothing: antialiased;font-weight: normal;}
h1, h2, h3, h4, h5, h6 {padding: 5px 0 15px 0;color: #455A64;-webkit-font-smoothing: antialiased;}
:-ms-input-placeholder{color: #000;}
:root {
--red:#DC2626;
--darkgreen:#166534;
--green:#22C55E;
--black:#000000;
--gray:#818181;
--blue:#3275B9;
--purple:#6B21A8;
--yellow:#FDD511;
--white:#ffffff;
--brown:#9A3412;
--border:#E5E7EB;
--body:#CED4DA;
--lightgreen:#DCFCE7;
--lightblue:#DBEAFE;
--lightyellow:#FFEDD5;
--lightpurple:#F3E8FF;
--lightred:#FEE2E2;
--lightgray:#F9FAFB;
--lightgray1:#F4F4F4;
}
.wd10{width: 10%;}
.wd20{width: 20%;}
.wd30{width: 30%;}
.wd40{width: 40%;}
.wd50{width: 50%;}
.wd60{width: 60%;}
.wd70{width: 70%;}
.wd80{width: 80%;}
.wd90{width: 90%;}
.wd100{width:100%;}
/*----------------------------
auth      
----------------------------*/
.navbar-kiero {background:var(--white); box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); position: relative;  }
.kiero-logo{text-align: center; margin-bottom: 1rem;}
.kiero-logo img{height:50px}
.btn-nav-link{white-space: nowrap; padding: 8px 15px; display: inline-block; font-size: 13px; color: var(--gray); font-weight: bold; text-align: center; }
.btn-outline-nav-link{background: var(--white); white-space: nowrap; border: 1px solid var(--blue); padding: 8px 15px; display: inline-block; font-size: 13px; color: var(--blue); border-radius: 5px; font-weight: bold; text-align: center; }
.auth-section{ background: var(--lightgray);  position: relative; padding: 2rem 0;}
.auth-form {background: #fffffff5; box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); border-radius: 15px; position: relative; padding: 2rem; backdrop-filter: blur(5px); }
.logo-icon {width: 100px; height: 100px; background-color: var(--lightblue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--kiero-blue); margin: 0 auto 1.5rem; }
.logo-icon img{height: 70px;}
.auth-form  h2 {font-size:28px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: left;}
.auth-form  p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: left; }
.auth-form  h5 {font-size:20px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: left;}
.auth-form .form-group{margin-bottom: 1rem;}
.auth-form .form-group h4,
.auth-form .form-group label {color:var(--gray); font-size: 14px; font-weight: 600; margin:0; padding:0; }
.auth-form input.form-control {background: var(--white); border-radius: 5px; font-size: 13px; border: 1px solid var(--border); font-weight: 400; height: auto; padding:12px 15px;   box-shadow: 0 5px 13px rgb(240 240 241 / 46%); outline: 0; width: 100%; display: inline-block;color:var(--gray);}
.auth-form select.form-control {background: var(--white); appearance: auto; border-radius: 5px; font-size: 13px; border: 1px solid var(--border); font-weight: 400; height: auto; padding:13px 15px;   box-shadow: 0 5px 13px rgb(240 240 241 / 46%); outline: 0; width: 100%; display: inline-block;color:var(--gray);}
.auth-form input.form-control:focus {border: 1px solid var(--blue); }
button.auth-form-btn {outline: none;border:  1px solid var(--blue);background:var(--blue);padding: 12px 40px;display: inline-block;color:var(--white);font-size: 16px;font-weight: 600;border-radius: 5px;box-shadow: 0 8px 13px rgb(9 84 149 / 10%);}
a.btn-outline-gra {outline: none;border: 1px solid var(--gray);background:var(--white);padding: 12px 40px;text-align: center; display: inline-block;color: var(--gray);font-size: 16px;font-weight: 600;border-radius: 5px;box-shadow: 0 8px 13px rgb(9 84 149 / 10%);}
.auth-content-info  h2 {font-size: 24px;font-weight: 600;color:var(--gray);margin: 0;padding: 0;}
.auth-content-info  h2 span{color:var(--blue);}
.auth-content-info  p {font-size:14px; font-weight: 500; color:var(--gray); margin: 0 0 1rem 0; padding: 0; }
a.Forgottext{font-size:14px; font-weight: 500; color:var(--blue); margin: 0 0 0rem 0; padding: 0; }
.auth-kiero-content  h1 {font-size:28px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: left;}
.auth-kiero-content  p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: left; }
.feature-item {margin-bottom: 1.5rem; }
.feature-icon-wrapper {width: 40px; height: 40px; font-size: 20px; background-color: var(--blue);color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 1rem; }
.feature-item h6 {font-size:18px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: left;}
.feature-item p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: left; }
.stats-bar{background: #fffffff5; box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); border-radius: 15px; position: relative; padding: 2rem; backdrop-filter: blur(5px); }
.stat-value{font-size:18px;font-weight: 600;color:var(--blue);margin: 0;padding: 0; text-align: center;}
.stat-label{font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }
/*----------------------------
Checkbox    
----------------------------*/
.fwscheckbox label {padding-left: 31px; position: relative; display: inline-block; padding: 0 0 0 2em; margin-bottom: 10px;  line-height: 1.5; cursor: pointer; font-size: 14px;}
.fwscheckbox label::before,
.fwscheckbox label::after {position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; }
.fwscheckbox label::before {content: " ";border: 1px solid var(--border);-webkit-border-radius: 3px;-moz-border-radius: 3px;-ms-border-radius: 3px;-o-border-radius: 3px;border-radius: 3px;}
.fwscheckbox input[type="checkbox"]{position: absolute; opacity: 0; z-index: -1; margin: 0; }
.fwscheckbox input[type="checkbox"] + label::after {content: "\2714"; color: #FFF; line-height: 1.9; text-align: center; border: none; }
.fwscheckbox input[type="checkbox"]:checked + label::before {background: var(--blue);border-color: var(--blue);}
.fwscheckbox input[type="checkbox"] + label::after{-webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); }
.fwscheckbox input[type="checkbox"]:checked + label::after{-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.features-section {padding: 2rem 0; background-color: var(--white); }
.features-heading h2 {font-size:30px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}
.features-heading p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }
.feature-block {padding: 2rem; text-align: center; }
.feature-block-icon {width: 64px; height: 64px; background-color: var(--lightblue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--blue); margin: 0 auto 1.5rem; }
.feature-block h5 {font-size:18px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}
.feature-block p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }
.bl-feat .feature-block-icon{ background-color: var(--lightblue); color: var(--blue);}
.gr-feat .feature-block-icon{ background-color: var(--lightgreen); color: var(--green);}
.ye-feat .feature-block-icon{ background-color: var(--lightyellow); color: var(--yellow);}
.pu-feat .feature-block-icon{ background-color: var(--lightpurple); color: var(--purple);}
.testimonials-section {padding:2rem 0; background-color:var(--lightgray); }
.testimonials-heading{margin-bottom: 1rem;}
.testimonials-heading h2 {font-size:30px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}
.testimonials-heading p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }
.testimonial-card {background-color: var(--white); border: none; border-radius: 1rem; padding: 2rem; height: 100%; box-shadow: 0px 8px 13px rgb(0 0 0 / 8%); }
.testimonial-card img {width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 1rem; }
.testimonial-card .vendor-name {font-size:18px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}
.testimonial-card .vendor-title {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }
.testimonial-card .quote-text {font-size: 1rem; line-height: 1.6; margin-top: 1rem; }
.onboarding-section {padding: 2rem 0; background-color: var(--white); }
.onboarding-heading{margin-bottom: 1rem;}
.onboarding-heading h2 {font-size:30px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}
.onboarding-heading p {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }
.step-item {position: relative; padding: 0 1rem; }
.step-circle {width: 50px; height: 50px; line-height: 50px; border-radius: 50%; background-color: var(--blue); color: var(--white); font-weight: 700; font-size: 1.25rem; display: inline-block; margin-bottom: 1rem; }
.step-title{font-size:18px;font-weight: 600;color:var(--black);margin: 0;padding: 0; text-align: center;}
.step-description {font-size:14px; font-weight: normal; color:var(--gray); margin: 0; padding: 0;text-align: center; }
/* 29-01-2026 Vendor Register css */
.eye-icon {
position: absolute;
right: 15px;
top:36px;
cursor: pointer;
color: #6c757d;
}
.vendor-auth-info {
position: relative;
}
.login-bg {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.login-bg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.login-content {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.login-bg:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: hsl(10deg 97% 57% / 80%);
}
.login-box {
width: 550px;
margin: auto;
}
.btn-primary {
background-color: #fc4a26;
border-color: #fc4a26;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #fc4a26;
border-color: #fc4a26;
}
.btn-border-primary {
color: #fc4a26;
border-color: #fc4a26;
}
.login-logo img {
height: 100px;
}
.login-box-msg,
.register-box-msg {
padding: 8px !important;
background: #ffede9;
color: #ff5022;
font-size: 18px;
margin: 30px 0px !important;
}
.warehouse-address-check label {
position: relative;
display: inline-block;
padding: 0 0 0 2.5rem;
margin-bottom: 10px;
line-height: 1.5;
cursor: pointer;
font-size: 14px;
}
.warehouse-address-check label::before,
.warehouse-address-check label::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 24px;
height: 24px;
}
.warehouse-address-check label::before {
content: " ";
border: 1px solid #898a8c;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.warehouse-address-check input[type="checkbox"] {
position: absolute;
opacity: 0;
z-index: -1;
margin: 0;
}
.warehouse-address-check input[type="checkbox"]+label::after {
content: "\2714";
font-family: "Font Awesome 5 Free";
color: #FFF;
line-height: 1.9;
text-align: center;
border: none;
}
.warehouse-address-check input[type="checkbox"]:checked+label::before {
background: #fc4a26;
border-color: #fc4a26;
}
.warehouse-address-check input[type="checkbox"]+label::after {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.warehouse-address-check input[type="checkbox"]:checked+label::after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.phone-parent-div {
--bs-gutter-x: 0.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));
}
.phone-parent-div>* {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
.phone-code-div {
flex: 0 0 auto;
width: 25%;
}
.phone-number-div {
flex: 0 0 auto;
width: 75%;
}
input.readonly {
background-color: #e9ecef; /* Change to desired background color */
cursor: not-allowed;
}
.loader-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
flex-direction: column;
color: white;
}
.loader {
border: 6px solid #f3f3f3;
border-top: 6px solid #012549;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
.processing{
font-size: 18px;
line-height: 26px;
color: black;
font-weight: 900;
font-family: 'Lora', serif;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}