:root {
  color-scheme: light dark;
  --g-bg: #ffffff;
  --g-fg: #111111;
  --g-muted: #6b7280;
  --g-border: #d9dee5;
  --g-input: #ffffff;
  --g-button: #111111;
  --g-button-fg: #ffffff;
  --g-focus: rgba(17, 17, 17, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --g-bg: #050505;
    --g-fg: #f7f7f7;
    --g-muted: #9ca3af;
    --g-border: #2a2a2a;
    --g-input: #0f0f0f;
    --g-button: #f7f7f7;
    --g-button-fg: #050505;
    --g-focus: rgba(247, 247, 247, 0.18);
  }
}

html,
body,
.login-pf {
  min-height: 100%;
}

body.login-pf,
.login-pf body {
  min-height: 100vh;
  margin: 0;
  color: var(--g-fg);
  background: var(--g-bg);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login-pf-page {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-pf-page .card-pf {
  width: min(100%, 400px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.login-pf-page .card-pf::before {
  display: block;
  width: min(100%, 360px);
  height: 96px;
  margin: 0 auto 34px;
  content: "";
  background: url("../img/logo-light.png") center / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
  .login-pf-page .card-pf::before {
    background-image: url("../img/logo-dark.png");
  }
}

#kc-header,
#kc-page-title,
#kc-info,
#kc-registration,
#kc-social-providers,
#kc-form-options {
  display: none;
}

#kc-content,
#kc-content-wrapper,
#kc-form,
#kc-form-wrapper {
  width: 100%;
}

.form-group,
.pf-c-form__group {
  margin-bottom: 14px;
}

#kc-form label,
.pf-c-form__label,
.control-label {
  display: block;
  margin-bottom: 8px;
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 600;
}

#kc-form input[type="text"],
#kc-form input[type="password"],
#kc-form input[type="email"],
.pf-c-form-control {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--g-border);
  border-radius: 10px;
  color: var(--g-fg);
  background: var(--g-input);
  box-shadow: none;
  font-size: 15px;
  outline: none;
}

#kc-form input:focus,
.pf-c-form-control:focus {
  border-color: var(--g-fg);
  box-shadow: 0 0 0 4px var(--g-focus);
}

#kc-form-buttons,
.pf-c-form__group.pf-m-action {
  margin-top: 18px;
}

#kc-login,
.pf-c-button.pf-m-primary,
input[type="submit"] {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 10px;
  color: var(--g-button-fg);
  background: var(--g-button);
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
}

#kc-login:hover,
.pf-c-button.pf-m-primary:hover,
input[type="submit"]:hover {
  opacity: 0.9;
}

.alert,
.pf-c-alert {
  margin-bottom: 16px;
  border-radius: 10px;
}

@media (max-width: 480px) {
  .login-pf-page {
    padding: 20px;
  }

  .login-pf-page .card-pf {
    width: 100%;
  }

  .login-pf-page .card-pf::before {
    width: min(100%, 320px);
    height: 86px;
  }
}