html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Roboto', 'Noto', sans-serif;
  line-height: 1.5;
  background-color: #eeeeee;
}

a:visited, a:link, a:active {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.main {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.login-card {
  flex: none;
  width: 90%;
  max-width: 22em;
}

.login-form {
  display: flex;
  flex-direction: column;
  padding: 1em;
}

.login-form .mdc-select > .mdc-select__anchor {
  width: 100%;
}

.header {
  padding: 20px;
  border-bottom: 1px solid silver;
  color: white;
  background-color: #494951;

  /* Set our border-radius to match the containing mdc-card otherwise we get square corners.
   * We can not set overflow:hidden on the mdc-card or other parent (which is the normal way of handling this condition)
   * because then the dropdown box of the besgroup field gets clipped at that boundary.
   */
  border-radius: 4px 4px 0 0;
}

.header-title {
  display: flex;
  align-items: center;
}

#version {
  font-size: 0.3em;
}

.licence-name {
  font-size: 0.7em;
  white-space: nowrap;
}

h1 {
  margin: 0;
}

.button-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 8px;
}

.button-row > button {
  height: 48px;
}

#info {
  color: red;
  padding-right:1em;
}

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  grid-gap: 8px;
}

.material-icons {
  color: var(--mdc-theme-text-icon-on-light);
}

.mdc-button--raised:not(:disabled) {
  background-color: #fafafa;
  color: black;
}

.mdc-text-field__input:-webkit-autofill + .mdc-floating-label {
  /* Reset the transform of the label for autofilled fields back to the normal transform otherwise the autofilled
   * text covers part of the label, so its unclear why it does this.
   * Original transform is:
   *
   * transform: translateY(-50%) scale(0.75);
   */
  transform: translateY(-106%) scale(0.75);
}

html[mfa=none] #mfa_container {
  display: none;
}

html[auth-pk=none] #pkAuth {
  display: none;
}

html[fp=none] #forgot_container {
    display: none;
}

#mfa_container {
  display: grid;
}

#mfa_register {
  font-size: 0.8rem;
  justify-self: end;
  margin: 5px;
}

#besgroup-selected-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdc-list {
  white-space: nowrap;
}

#forgot_container {
  justify-self: end;
  font-size: 14px;
}