:root {
  --ecteg-blue: #5880ce;
  --ecteg-slate: #465965;
  --ecteg-ink: #0f122c;
  --ecteg-white: #fefefe;
  --keycloak-bg-logo-url: url("../img/ecteg-eu-forensics-bg.svg");
}

html.login-pf body#keycloak-bg {
  background-color: var(--ecteg-ink);
  background-image:
    url("../img/ecteg-eu-forensics-bg.svg"),
    radial-gradient(circle at 12% 18%, rgb(88 128 206 / 24%), transparent 34rem),
    linear-gradient(145deg, var(--ecteg-ink) 0%, #171d3c 56%, var(--ecteg-slate) 140%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--ecteg-ink);
}

.pf-v5-c-login,
.pf-c-login {
  background: transparent;
}

.pf-v5-c-login__container,
.pf-c-login__container {
  grid-template-columns: minmax(0, 34rem);
}

.pf-v5-c-login__main,
.pf-c-login__main {
  background: var(--ecteg-white);
  border: 1px solid rgb(254 254 254 / 24%);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
  overflow: hidden;
}

#kc-header-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  letter-spacing: normal;
  text-transform: none;
}

#kc-header-wrapper::before {
  background: url("../img/logo-ecteg.png") center / contain no-repeat;
  content: "";
  display: block;
  flex: 0 0 11rem;
  height: 11rem;
  margin: 0 auto 1.25rem;
  width: min(18rem, 80vw);
}

#kc-page-title {
  color: var(--ecteg-ink);
  font-weight: 700;
  line-height: 1.25;
}

.ecteg-login-title {
  color: var(--ecteg-white);
  display: block;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ecteg-login-notice {
  color: #e4e9f0;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.55;
  margin-block-start: 0.75rem;
  max-width: 40rem;
  text-transform: none;
}

.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary,
#kc-login {
  background-color: var(--ecteg-blue);
  border-color: var(--ecteg-blue);
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus,
#kc-login:hover,
#kc-login:focus {
  background-color: #456dbd;
  border-color: #456dbd;
}

a {
  color: #365fae;
}

a:hover,
a:focus {
  color: var(--ecteg-ink);
}

input:focus,
.pf-v5-c-form-control:focus,
.pf-c-form-control:focus {
  outline-color: var(--ecteg-blue);
}

@media (max-width: 576px) {
  .pf-v5-c-login__main,
  .pf-c-login__main {
    border-radius: 0.75rem;
    margin-inline: 1rem;
  }

  #kc-header-wrapper::before {
    flex-basis: 8rem;
    height: 8rem;
    width: min(13rem, 70vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.login-pf body#keycloak-bg {
    background-image:
      radial-gradient(circle at 12% 18%, rgb(88 128 206 / 24%), transparent 34rem),
      linear-gradient(145deg, var(--ecteg-ink) 0%, #171d3c 56%, #003399 140%);
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}