.auth-container {
  display: grid;
  align-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  justify-content: center;
  padding: 2lh 0;
  /* i.e. center horizontally */
  margin-inline: auto;;
  /* parent container has relative positionning */
  grid-template-columns: 100%;
  grid-template-rows: minmax(20vh, 300px) min-content 1fr;
  position: relative;
}

body.mobile-mode:has(.auth-container) {
  .auth-container {
    grid-template-columns: 90vw;
    min-height: 100%;
  }
}

.auth-logo {
  &, &>a:not(img), > img {
    display: flex;
    flex: 1;
    justify-content: center;
  }
}

.auth-container {
  flex: 1;
  max-width: max(30vw, 600px);
  gap: 1lh;
  margin-bottom: 1lh;
  max-height: 80vh;
  position: relative;
}


.auth-layout .auth-dialog {
  background: #fff;
  font-size: 1.1em;
  border-radius: 0.4vw;
  border: 1px solid #dbdbdb;
  border-bottom-color: #c2c2c2;
  box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.3);
  padding: 0 2ch 0.5lh 2ch;
  white-space: wrap;
  /* try to override properties of non-flex forms
  without referring too much to classes and ids, as forms
  are dynamic */
  &, div:not(#legalNoticeDiv, .lds-roller, .password-input-container, :empty), form {
    display: flex;
    flex-direction: column;
    gap: 1lh;
    >:not(.at-input) {
      gap: 0.4lh;
    }
    .at-input {
      gap: 0;
    }
  }

  *:not(div) {
    width: 100%;
    margin: 0;
  }
}

.auth-layout .auth-dialog .at-form .at-link {
  color: #17683a;
}

.password-input-container {
  display: grid;
  align-self: stretch;
  grid-template-columns: 1fr 6ch;
}

body.mobile-mode {
  .auth-layout {
    max-height: unset;
  }
  .password-input-container {
    grid-auto-flow: row;
  }
}
.auth-layout .auth-dialog .at-form button {
  background: #216694;
  color: #fff;
  min-height: 2lh;
}
.auth-layout .auth-dialog .at-form .at-title {
  border-bottom: 1px solid #dcdcdc;
  color: #4d4d4d;
  font-weight: bold;
  text-align: center;
}
.auth-layout .auth-dialog .at-form .at-signup-link,
.auth-layout .auth-dialog .at-form .at-signin-link,
.auth-layout .auth-dialog .at-form .at-forgotPwd {
  font-size: 0.9em;
  color: #4d4d4d;
}
.auth-layout .auth-dialog .at-form .at-signup-link .at-signUp,
.auth-layout .auth-dialog .at-form .at-signin-link .at-signUp,
.auth-layout .auth-dialog .at-form .at-forgotPwd .at-signUp,
.auth-layout .auth-dialog .at-form .at-signup-link .at-signIn,
.auth-layout .auth-dialog .at-form .at-signin-link .at-signIn,
.auth-layout .auth-dialog .at-form .at-forgotPwd .at-signIn {
  font-weight: bold;
}