:root {
  /* Colors */
  --pt-keycloak-blue-00: #036;
  --pt-keycloak-blue-10: #069;
  --pt-keycloak-gray-00: #6b6c7e;
  --pt-keycloak-gray-10: #b0b7bf;
  --pt-keycloak-gray-20: #e6e6e6;
  --pt-keycloak-gray-30: #f1f2f5;

  --pt-keycloak-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --pt-keycloak-header-font-size: 1.75rem;

  /* Anchor */
  --pt-keycloak-a-color: var(--pt-keycloak-blue-10);
  --pt-keycloak-a-hover-color: var(--pt-keycloak-blue-00);

  /* Button */
  --pt-keycloak-button-background-color: var(--pt-keycloak-blue-10);
  --pt-keycloak-button-hover-background-color: var(--pt-keycloak-blue-00);

  /* Overrides */
  --pf-global--primary-color--100: var(--pt-keycloak-blue-10);
  --pf-global--link--Color: var(--pt-keycloak-blue-10);
  --pf-global--link--Color--hover: var(--pt-keycloak-blue-00);
}

/* Elements */

a {
  color: var(--pt-keycloak-a-color);
}

a:hover {
  color: var(--pt-keycloak-a-hover-color);
}

/* Classes */

.pf-c-button {
  --pf-c-button--m-primary--BackgroundColor: var(--pt-keycloak-button-background-color);
  --pf-c-button--m-primary--hover--BackgroundColor: var(--pt-keycloak-button-hover-background-color);
}

.pf-c-button.pf-m-control:hover {
  --pf-c-button--m-control--after--BorderBottomColor: var(--pt-keycloak-button-background-color);
}

.login-pf body {
  font: var(--pt-keycloak-font-family);
  background: var(--pt-keycloak-blue-00);
}

.login-pf a:hover {
  color: var(--pt-keycloak-a-hover-color);
}

.login-pf .card-pf {
  border-color: var(--pt-keycloak-blue-10);
  background: var(--pt-keycloak-gray-30);
}

.pt-keycloak-header .logo .fema {
  height: 6rem;
}

.pt-keycloak-header .realm {
  margin-top: 0.5rem;
}

.kc-social-section .piv {
  box-shadow: 0 0 0.5rem var(--pt-keycloak-gray-10);
  border-radius: 0.5rem;
  --pf-c-button--after--BorderColor: transparent;
  font-weight: bold;
}

.kc-social-section .piv:active,
.kc-social-section .piv:hover {
  box-shadow: 0 0 0.5rem var(--pt-keycloak-button-hover-background-color);
}

.kc-social-section .piv img {
  height: 8rem;
  margin-right: 1rem;
}

.pt-keycloak-sign-in-notice {
  margin-top: 2rem;
}

.pt-keycloak-sign-in-notice,
.pt-keycloak-password-rules {
  font-size: 0.8rem;
}

.pt-keycloak-sign-in-notice p,
.pt-keycloak-sign-in-notice ul,
.pt-keycloak-password-rules p,
.pt-keycloak-password-rules ul {
  color: var(--pt-keycloak-gray-00);
}

.pt-keycloak-sign-in-notice ul,
.pt-keycloak-password-rules ul {
  list-style: initial;
  padding-inline-start: 1rem;
}

/* IDs */

#kc-header {
  margin-bottom: 1rem;
}

#kc-header-wrapper {
  font-size: var(--pt-keycloak-header-font-size);
  color: var(--pt-keycloak-gray-10);
  text-transform: none;
}

#kc-info-wrapper {
  background: var(--pt-keycloak-gray-20);
  color: var(--pt-keycloak-gray-00);
}

/* Media */

@media (max-width: 767px) {
  .pt-keycloak-logo span {
    left: calc(50% - 2.5rem);
  }

  #kc-header-wrapper {
    font-size: var(--pt-keycloak-header-font-size);
  }
}