.auth-page .card {
  overflow: hidden;
}

/* No default artwork or colored backdrop while identity is unresolved. */
body.kpl-login-page,
.kpl-login-page .page-wrapper,
.kpl-login-page .page-content { background-color: #fff; }
body.kpl-login-background-pending .page-content { background-color: #fff; }
[data-kpl-login-brand-empty] { visibility: hidden; }

.kpl-login-branded body,
.kpl-login-branded .page-wrapper,
.kpl-login-branded .page-content { background-color: var(--kpl-login-background); color: var(--kpl-login-text); }
.kpl-login-branded .auth-page .card,
.kpl-login-branded .auth-form-wrapper,
.kpl-login-branded .form-control { background-color: var(--kpl-login-surface); color: var(--kpl-login-text); border-color: var(--kpl-login-border); }
.kpl-login-branded .text-secondary,
.kpl-login-branded .form-control::placeholder { color: var(--kpl-login-muted) !important; }
.kpl-login-branded .btn-primary { background: var(--kpl-login-primary); border-color: var(--kpl-login-primary); color: var(--kpl-login-on-primary) !important; }
.kpl-login-branded .form-control:focus { border-color: var(--kpl-login-primary); }
.kpl-login-branded .form-check-input:checked { background-color: var(--kpl-login-primary); border-color: var(--kpl-login-primary); }
.kpl-login-branded .nobleui-logo,
.kpl-login-branded .nobleui-logo span { color: var(--kpl-login-primary); }
.kpl-login-logo { display: block; max-width: 100%; width: auto; max-height: 90px; object-fit: contain; }
body.kpl-login-background .page-content { background-image: var(--kpl-login-background-image); background-size: cover; background-position: center; }

.auth-page .auth-side-wrapper {
  position: relative;
  min-height: 28.25rem;
  overflow: hidden;
  background: #fff;
}

.auth-page .auth-side-wrapper__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  visibility: hidden;
}

.auth-page .kpl-login-side-ready .auth-side-wrapper__image { visibility: visible; }

.auth-page .auth-side-wrapper.kpl-login-side-ready::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 18, 51, .08), transparent 42%, rgba(7, 18, 51, .2));
  content: "";
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .auth-page .auth-side-wrapper {
    min-height: 13rem;
  }

  .auth-page .auth-side-wrapper__image {
    object-position: center 48%;
  }
}