:root {
  --govdigital-primary-color: rgba(99, 195, 209);
}


/* Hintergrund auf weiß setzen */
.login-pf body {
  background: rgb(255, 255, 255) no-repeat center center fixed;
}

/* Sorgt für ein mittiges Layout */
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Open Sans", sans-serif;
}

/* Beschränkt die maximale Breite der Elemente und fügt Margin für eine vertikale Zentrierung hinzu */
body>div {
  width: 100%;
  max-width: 700px;
  margin-bottom: 10vh;
}

/* Blendet die Elemente aus, die im HTML-Display Attribut hinzu kommen */
.gd-logo {
  display: none
}

/* Fügt das govdigital Logo hinzu und stellt die passende Größe für Desktop und Mobile sicher */
#kc-header-wrapper {
  background-image: url(../img/govdigital-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  max-width: 449px;
  min-height: 128px;
  max-height: 200px;
  margin: 0 auto;
  position: relative;
  left: unset;
}


/* Ändert die Farben der Card des Login Form */
.card-pf {
  border-color: var(--govdigital-primary-color);
}

/* Ändert die Farbe des primären Buttons */
.pf-c-button.pf-m-primary {
  background-color: var(--govdigital-primary-color);
}

/* Ändert den Hover-Effekt des primären Buttons */
.pf-c-button.pf-m-primary:hover {
  background-color: rgba(99, 195, 209, 0.8);
}

/* Setzt den Hover-Effekt für Identity-Provider-Buttons */
.pf-c-button.pf-m-control:hover {
  --pf-c-button--m-control--Color: var(--govdigital-primary-color);
  --pf-c-button--m-control--BackgroundColor: var(--pf-c-button--m-control--hover--BackgroundColor);
  --pf-c-button--m-control--after--BorderBottomColor: var(--govdigital-primary-color);
  color: var(--govdigital-primary-color);
}

/* Setzt den Hover-Effekt für OTP-Wahlboxen */
.pf-c-tile:hover {
  --pf-c-tile--hover__title--Color: var(--govdigital-primary-color);
  --pf-c-tile--hover__icon--Color: var(--govdigital-primary-color);
  --pf-c-tile--hover--after--BackgroundColor: var(--govdigital-primary-color);
}

/* Setzt die Farbe des Hover Effekts für Form Inputs (z.B. Username etc.) */
.pf-c-form-control:hover {
  --pf-c-form-control--hover--BorderBottomColor: var(--govdigital-primary-color);
}

/* Setzt die Farbe der Überschriften, wenn zwischen Authentifizierungsmethoden gewählt werden soll */
.select-auth-box-headline {
  color: var(--govdigital-primary-color);
}

/* Setzt die Farbe von Links - in diesem Fall für "Passwort vergessen" und "Einen anderen Weg versuchen" */
a {
  color: var(--govdigital-primary-color);
}