body {
  background-image: url('../images/login-photo.png');
  background-size: cover;
  background-position: center center;
  display: grid;
}

header {
  display: block;
  text-align: center;
}

footer {
  align-self: end;
}

#loginPage {
  box-sizing: border-box;
  margin: auto;
  padding: .25em;
  width: clamp(var(--minWidth),50%,var(--maxWidth));
  background-color: var(--grayColor, #E6E6E6);
  border-radius: 1em;
}

#loginPage > h2 {
  background-color: var(--horizonBlue, hsl(0 0 45%));
  color: white;
  width: clamp(400px, 80%, 450px);
  margin-inline: auto;
  padding: 0.25em;
  text-align: center;
}

.loginSeparator {
  width: clamp(400px, 80%, 450px);
  margin-inline: auto;
}

.loginForm {
  text-align: center;
  margin: .5em auto;
  padding: 1em;
}

.loginRow {
  margin: 0 auto;
  margin-bottom: .5em;
  width: clamp(400px, 80%, 450px);
  text-align: center;
  box-sizing: border-box;
}

.loginRow label {
  text-align: left;
  display: block;
  font-size: .95rem;
  box-sizing: border-box;
  color: var(--horizonBlue, hsl(0 0 25%));
}

.loginRow input[type=text], .loginRow input[type=password] {
  box-sizing: border-box;
  width: 100%;
  font-size: 1rem;
}

.loginRow input[type=submit] {
  font-size: 1rem;
  font-weight: bold;
  padding: .25em .5em;
  box-shadow: 0 0 3px 3px white;
  width: 150px;
  cursor: pointer;
}

.loginRow .input-validation-error, .pwChange .input-validation-error {
  outline-color: var(--errorBorderColor, #C9C9C9);
  background-color: var(--errorBackgroundColor, #C9C9C9);
}

.loginRow .field-validation-valid, .loginRow .field-validation-error,
.pwChange .field-validation-valid, .pwChange .field-validation-error {
  /*    height: 1.2em;*/
  padding: 0.2em;
  grid-column: 1/ span 2;
  display: inherit;
  margin: .25em;
}


.loginLeft {
  background-image: linear-gradient(to bottom, var(--horizonBlue, transparent) 20px, transparent 20px, transparent 25px, var(--horizonRed) 25px);
  background-size: 65% 100%;
  background-repeat: no-repeat;
  height: 30px;
  margin-inline: 0;
  margin-block: 1em;
  animation: rollRight 3s ease-in-out 1 forwards;
}


@keyframes rollRight {
  from {
    background-position-x: -100%;
  }

  to {
    background-position-x: 0%;
  }
}

@property --position {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

.loginRight {
  --position: 0%;
  background-image: linear-gradient(to left, var(--horizonYellow, transparent) var(--position, 100%), transparent var(--position, 100%));
  background-repeat: no-repeat;
  height: 30px;
  margin-inline: 0;
  margin-block: 1em;
  animation: rollLeft 2s linear 1 forwards;
}

@keyframes rollLeft {
  to {
    --position: 25%
  }
}


.recoveryDialog {
  width: 400px;
}

.recoveryLinkContainer {
  width: clamp(400px, 80%, 450px);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0;
}

.recoveryLink {
  color: var(--horizonBlue, hsl(0 0 25%));
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.25em .5em;
}


.recoveryRow {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: .25em;
}

.recoveryRow {
  margin-inline: 1em;
  margin-block: .5em;
}

.dialogButtons {
  margin-inline: 1em;
  margin-block: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.recoveryRow label {
  text-align: right;
}