body.login div#login h1.wp-login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.login div#login h1:after {
  content: "Dealer Portal Login";
  font-family: var(--font-family-primary, Montserrat);
  font-size: var(--font-size-h5, 24px);
  font-weight: 900;
  line-height: 1.4;
}
body.login div#login h1 a {
  background-image: url("https://dealer.val-co.com/wp-content/uploads/2025/05/valco-logo.png");
  padding-bottom: 0px;
  background-size: contain;
  width: 100%;
  height: 88px;
}
body.login {
  background-color: #fff;
}
body.login::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100svh;
  background-image: url(https://staging.val-co.com/wp-content/uploads/2025/05/valco-login.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#login {
  background: #fff;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50vw;
  min-width: 500px;
  padding: 24px 10%;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
}
#login > * {
  width: 390px;
  max-width: 100%;
}
.login form {
  border-radius: 0px;
  padding: 0;
  border: unset;
  box-shadow: unset;
  overflow: unset;
}
body.login #nav a:focus, body.login h1 a:focus, body.login #nav a {
  color: var(--text-charcoal, var(--color-charcoal, #363031));
}
body.login #login #wp-submit {
  background: var(--color-evergreen, #008061) !important;
  border: none;
  width: 100%;
  padding: var(--space-l, 32px);
  line-height: 1;
  font-family: var(--font-family-primary, Montserrat);
  font-size: var(--font-size-button, 16px);
  font-weight: 800;
  line-height: var(--font-line-height-button, 16px);
  /* 100% */
  letter-spacing: var(--font-letter-spacing-button, 0.5px);
  text-transform: uppercase;
  border-radius: var(--radius-s, 8px);
  transition: 0.3s;
}
body.login #login #wp-submit:hover {
  background: var(--color-evergreen-accent, #006148) !important;
}
body.login #backtoblog a:hover, body.login #nav a:hover, body.login h1 a:hover {
  color: var(--color-evergreen, #008061);
}
.login-action-confirm_admin_email #login {
  width: 50vw;
  max-width: 100%;
  margin-top: 0;
}
.login form .forgetmenot {
  padding-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#login form p.submit {
  padding-top: var(--space-m, 24px);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Notice */
.login .message, .login .notice, .login .success {
  margin-top: 16px;
}
/* Username and Password inputs */
body.login #login #loginform p:first-child, body.login #login #loginform .user-pass-wrap, body.login #login #loginform p:not(.forgetmenot):has(label), form#lostpasswordform p:first-child, form#lostpasswordform .user-pass-wrap, form#lostpasswordform p:not(.forgetmenot):has(label), form#registerform p:first-child, form#registerform .user-pass-wrap, form#registerform p:not(.forgetmenot):has(label) {
  position: relative;
}
body.login #login #loginform p:first-child label, body.login #login #loginform .user-pass-wrap label, body.login #login #loginform p:not(.forgetmenot):has(label) label, form#lostpasswordform p:first-child label, form#lostpasswordform .user-pass-wrap label, form#lostpasswordform p:not(.forgetmenot):has(label) label, form#registerform p:first-child label, form#registerform .user-pass-wrap label, form#registerform p:not(.forgetmenot):has(label) label {
  position: absolute;
  top: var(--space-xs, 16px);
  left: var(--space-xs, 16px);
  color: var(--input-text-Label, var(--color-evergreen, #008061));
  font-family: var(--font-family-secondary, Hind);
  font-size: var(--font-size-text-sm, 16px);
  font-weight: 600;
  line-height: 162%;
  z-index: 1;
}
body.login #login #loginform p:first-child input, body.login #login #loginform .user-pass-wrap input, body.login #login #loginform p:not(.forgetmenot):has(label) input, form#lostpasswordform p:first-child input, form#lostpasswordform .user-pass-wrap input, form#lostpasswordform p:not(.forgetmenot):has(label) input, form#registerform p:first-child input, form#registerform .user-pass-wrap input, form#registerform p:not(.forgetmenot):has(label) input {
  padding: calc(var(--space-xs, 16px) + 30px) var(--space-xs, 16px) var(--space-xs, 16px) var(--space-xs, 16px);
  border-radius: var(--radius-s, 8px);
  border: 1px solid var(--color-grass, #E8E9E2);
  transition: 0.3s;
  font-size: var(--font-size-text-md, 18px);
}
/* ACF Inputs */
#registerform .acf-fields .acf-field {
  position: relative;
}
#registerform .acf-fields .acf-field label {
  position: absolute;
  top: var(--space-xs, 16px);
  left: var(--space-xs, 16px);
  color: var(--input-text-Label, var(--color-evergreen, #008061));
  font-family: var(--font-family-secondary, Hind);
  font-size: var(--font-size-text-sm, 16px);
  font-weight: 600;
  line-height: 162%;
  z-index: 1;
}
#registerform .acf-fields .acf-field input {
  padding: calc(var(--space-xs, 16px) + 30px) var(--space-xs, 16px) var(--space-xs, 16px) var(--space-xs, 16px);
  border-radius: var(--radius-s, 8px);
  border: 1px solid var(--color-grass, #E8E9E2);
  transition: 0.3s;
  font-size: var(--font-size-text-md, 18px);
}
/* Lost Password */
.login #nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.login #nav a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: var(--font-size-text-md, 18px);
}
/* Back to Blog -> Go to val-co.com */
body.login #backtoblog {
  display: flex;
  justify-content: center;
  margin-top: var(--space-m, 24px);
}
body.login #backtoblog a {
  color: var(--link-dark-text, var(--color-evergreen, #008061));
  font-family: var(--font-family-primary, Montserrat);
  font-size: var(--font-size-button, 16px);
  font-weight: 800;
  line-height: var(--font-line-height-button, 16px);
  letter-spacing: var(--font-letter-spacing-button, 0.5px);
  text-transform: uppercase;
}
/* Register */
.login-action-register h2 {
  font-size: var(--font-size-h5);
}
/* Mobile */
@media (max-width: 500px) {
  #login {
    width: 100%;
    min-width: 100%;
    padding: 0 6%;
  }
}
/* Fonts */
@font-face {
  font-family: "Hind";
  font-weight: 400;
  font-style: normal;
  src: url("//dealer.val-co.com/wp-content/uploads/fonts/Hind-400.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Hind";
  font-weight: 600;
  font-style: normal;
  src: url("//dealer.val-co.com/wp-content/uploads/fonts/Hind-600.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  font-style: normal;
  src: url("//dealer.val-co.com/wp-content/uploads/fonts/Montserrat-400.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Montserrat";
  font-weight: 800;
  font-style: normal;
  src: url("//dealer.val-co.com/wp-content/uploads/fonts/Montserrat-800.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Montserrat";
  font-weight: 900;
  font-style: normal;
  src: url("//dealer.val-co.com/wp-content/uploads/fonts/Montserrat-900.woff") format("woff");
  font-display: block;
}
.has-hind-font-family {
  font-family: "Hind";
}
.has-montserrat-font-family {
  font-family: "Montserrat";
}
