:root {
  --keycloak-logo-width: 450px;
  --keycloak-logo-height: 95px;
}

.login-pf body {
  min-height: 100%;
  background: var(--keycloak-bg-logo-url) no-repeat right bottom fixed;
  background-color: var(--pk-color-canvas);
  background-size: 75% auto;
  color: var(--pk-color-text);
}

.pf-v5-c-login__main {
  overflow: hidden;
  color: var(--pk-color-text);
  background-color: var(--pk-color-surface);
  border: 1px solid var(--pk-color-outline);
  border-radius: 8px;
  box-shadow: 3px 4px 14px rgba(0, 0, 0, 0.25);
}

.pf-v5-c-login__main-header {
  border-top: 4px solid var(--pk-color-login-strip);
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer,
.pf-v5-c-login__main-footer-band {
  color: var(--pk-color-text);
  background-color: var(--pk-color-surface);
}

div.kc-logo-text {
  width: min(var(--keycloak-logo-width), calc(100vw - 2rem));
  height: var(--keycloak-logo-height);
  margin: 0 auto;
  background-image: var(--keycloak-logo-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

div.kc-logo-text span {
  display: none;
}

.pf-v5-c-title,
.pf-v5-c-form__label-text,
.pf-v5-c-check__label {
  color: var(--pk-color-text);
}

#kc-header-wrapper {
  color: var(--pk-color-text) !important;
}

.pf-v5-c-form-control {
  --pf-v5-c-form-control--after--BorderBottomColor: var(--pk-color-accent);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(
    --pk-color-accent
  );
  color: var(--pk-color-text);
  accent-color: var(--pk-color-accent);
  background-color: var(--pk-color-surface);
  border-radius: var(--pk-field-radius);
  box-shadow: inset 0 0 0 1px var(--pk-color-outline);
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border-radius: inherit;
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--pk-color-accent),
    0 0 0 1px var(--pk-color-accent);
}

.pf-v5-c-form-control input:focus {
  outline-color: var(--pk-color-accent);
}

.pf-v5-c-form-control::placeholder {
  color: var(--pk-color-text-muted);
}

.pf-v5-c-input-group {
  border-radius: var(--pk-field-radius);
}

.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border-radius: 0;
}

.pf-v5-c-input-group > .pf-v5-c-form-control:first-child,
.pf-v5-c-input-group > :first-child .pf-v5-c-form-control {
  border-start-start-radius: var(--pk-field-radius);
  border-end-start-radius: var(--pk-field-radius);
}

.pf-v5-c-input-group > .pf-v5-c-button:last-child,
.pf-v5-c-input-group > :last-child .pf-v5-c-button {
  border-start-end-radius: var(--pk-field-radius);
  border-end-end-radius: var(--pk-field-radius);
}

.pf-v5-c-button:not(.pf-m-control):not(.pf-m-plain) {
  --pf-v5-c-button--BorderRadius: var(--pk-button-radius);
  --pf-v5-c-button--after--BorderRadius: var(--pk-button-radius);
  border-radius: var(--pk-button-radius);
}

.pf-v5-c-button:not(.pf-m-control):not(.pf-m-plain)::after {
  border-radius: var(--pk-button-radius);
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--after--BorderColor: var(--pk-color-outline);
  color: var(--pk-color-text);
  background-color: var(--pk-color-surface);
}

.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-control:hover {
  --pf-v5-c-button--after--BorderColor: var(--pk-color-accent);
  color: var(--pk-color-text);
}

#kc-social-providers svg:not(.google),
#kc-social-providers svg:not(.google) path {
  color: var(--pk-color-text);
  fill: currentColor !important;
  filter: none;
}

.pf-v5-theme-dark #kc-social-providers svg:not(.google),
.pf-v5-theme-dark #kc-social-providers svg:not(.google) path {
  color: var(--pk-color-accent);
}

#kc-social-providers svg {
  height: var(--pf-v5-global--FontSize--xl);
}

@media (min-width: 768px) {
  :root {
    --keycloak-logo-width: 540px;
    --keycloak-logo-height: 114px;
  }

  .pf-v5-c-login {
    --pf-v5-c-login__main-header--PaddingTop: 3.25rem;
    --pf-v5-c-login__main-header--PaddingBottom: 1.25rem;
    --pf-v5-c-login__main-body--PaddingBottom: 2.25rem;
  }

  .pf-v5-c-title.pf-m-3xl {
    font-size: 1.875rem;
    line-height: 1.3;
  }

  .pf-v5-c-form__label-text {
    font-size: 0.9375rem;
  }

  .pf-v5-c-form-control {
    --pf-v5-c-form-control--PaddingTop: 0.5rem;
    --pf-v5-c-form-control--PaddingBottom: 0.5rem;
    --pf-v5-c-form-control--FontSize: 1.0625rem;
  }

  .pf-v5-c-button {
    --pf-v5-c-button--PaddingTop: 0.5rem;
    --pf-v5-c-button--PaddingBottom: 0.5rem;
    --pf-v5-c-button--FontSize: 1.0625rem;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pf-v5-c-login__container {
    max-width: 37.5rem;
  }
}

@media (min-width: 1200px) and (max-width: 1279px) {
  :root {
    --keycloak-logo-width: 512px;
    --keycloak-logo-height: 108px;
  }

  .pf-v5-c-login {
    --pf-v5-c-login__container--xl--GridTemplateColumns: 37.5rem 32rem;
  }
}

@media (min-width: 1280px) {
  .pf-v5-c-login {
    --pf-v5-c-login__container--xl--GridTemplateColumns: 37.5rem 33.75rem;
  }
}