.form-container {
  display: flex;
  height: 100%;
  align-items: center;
}

#form {
  border-radius: 20px;
  background-color: #0003;
  backdrop-filter: blur(5px);
  
  padding: 2em;
}

.field {
  display: table-row;
}

input[type=text], input[type=password], input[type=email] {
  min-width: 18em;

  background: #FFF2;
  color: white;
  font-family: monospace;

  outline: none;
  border-style: none;
  border-radius: 4px;

  padding: .4em;
  margin-bottom: 10px;
}

input[type=submit] {
  width: 100%;

  background-color: #FFF2;
  color: #DDD;

  border-style: none;
  border-radius: 4px;

  padding: .5em;
  margin-top: .4em;
  cursor: pointer;

  transition: .2s;
}

input[type=submit]:hover {
  background-color: #FFF4;

  transition: .2s;
}

input[type=submit]:disabled, input[type=submit]:disabled:hover {
  background-color: #FFFFFF14;
  color: #777;

  cursor: not-allowed;
  font-style: italic;
}

label, input[type=text], input[type=password], input[type=email] {
  display: table-cell;
  margin-bottom: .8em;
}

label {
  text-align: end;
  padding-right: 10px;
}

.form-tooltip {
  font-size: .6em;
}

#error-box {
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;

  font-size: .9em;
  white-space: pre;

  margin-block: .4em;
  padding: .4em;
}

.error {
  color: red;
  background: #F002;
  border-color: red;
}

.error > :link, .error > :visited {
  color: #F77;
}

.info {
  color: #0080ff;
  background: #0080ff22;
  border-color: #0080ff;
}

.info > :link, .info > :visited {
  color: #78bbff;
}

#turnstile-container {
  display: flex;
  justify-content: center;
}

.register-advise {
  font-size: .9em;
  margin-top: 1.2em;
  text-align: center;
}

.logout-form {
  display: flex;
  justify-content: flex-end;
}