@charset "utf-8";

:root {
  --clr-neutral-100: #fff;
  --clr-neutral-200: #0C5FB3;
  --clr-neutral-200: #F2F6FA;
  --clr-neutral-900: #000;
  --clr-primary: #FCB93A;
  --clr-border: #C6C6C6;
  --font-primary: "Roboto";
  --easeVertical: cubic-bezier(0.57, 0.04, 0.18, 1.06);
}

body {
  line-height: 1.5;
  color: var(--clr-neutral-900);
  font-family: var(--font-primary);
  /* background-color: var(--clr-neutral-100); */
  letter-spacing: normal;
  font-size: 18px;
}
.font-primary {
  font-family: 'Roboto';
}
.color-primary {
  color: var(--clr-primary);
}
.ttl-color {
  color: #A2640A;
}
.password-color{
  color: #B30C0C;
}
.remember{
  color: #8D8D8D;
}
.fw-semi-bold {
  font-weight: 600;
}

.fw-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.text-start {
  text-align: left;
}

.text-end {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
}

a {
  display: inline-block;
  color: var(--clr-neutral-900);
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

.l-inner {
  max-width: 1080px;
  margin: 0 auto;
}

footer .l-inner {
  width: 100%;
  max-width: 100% !important;
}

.grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
/* -------------------------- */
.login h1 img {
  width: 64px;
  height: 64px;
}

body {
  background: url('../dealer/img/main_bg.svg') no-repeat center center fixed;
  background-size: cover;
}
.login .l-inner {
  width: 560px;
  margin-top: 40px;
  background: var(--clr-neutral-100);
  border-radius: 10px;
  border: 1px solid #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login h1 {
  padding: 20px 0 0 44px;
}
.login .l-inner form {
  padding: 50px 72px;
}
.login .l-inner form h2 {
  margin-bottom: 30px;
}
#name,#username, #pwd, #new-pwd, #cfm-pwd, #otp{
  width: 100%;
  padding: 15px 15px;
  border: 1px solid #F2F6FA;
  border-radius: 5px;
  background-color: #F2F6FA;
  outline: none;
  font-size: 14px;
  margin-bottom: 10px;
}
#login {
  background: #FCB93A;
}
.resend-otp {
  padding: 43px 0 36px 0;
  border-top: 1px solid var(--clr-border);
}
.resend-otp a {
  text-decoration: underline;
}
footer {
  width: 100%;
  padding: 40px 40px !important;
}
@media (min-width: 768px) and (max-width: 1240px) {
  body {
    font-size: 4.103vw;
  }
  .login h1{
    padding: 1.613vw;
  }
  .login .l-inner {
    width: max-content;
    padding: 1.613vw;
  }
  #name,#username, #pwd, #new-pwd, #cfm-pwd, #otp{
    width: 100%;
    padding: 0.806vw 1.613vw;
    border: 0.081vw solid #F2F6FA;
    border-radius: 0.403vw;
    background-color: #F2F6FA;
  }
}

@media (max-width: 767.9px) {
  h1 {
    padding: 5.128vw;
  }
  .login .l-inner form h2 {
    width: max-content;
  }
  .login .l-inner form{
    padding: 20px;
  }
  .login .l-inner {
    width: 89.744vw;
  }
  footer {
    padding: 20px;
  }

  footer .l-inner {
    padding-inline: 0;
  }
  .back-btn {
    margin-right: 2.564vw;
  }
}