:root {
  --loader-animation-duration: 4.5s;

  --color-loader-primary: var(--color-accent);
  --color-loader-light: var(--color-accent-light);
  --color-loader-dark: var(--color-accent-dark);
}

table {
  width: 100%;
  border-spacing: 8px;
}

table tr > * {
  text-align: justify;
  vertical-align: top;
}

form {
  width: 100%;
}

form div.flex-reverse {
  display: flex;
  flex-direction: column-reverse;
}

form label {
  margin-top: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}

form input:not(.button) {
  border-radius: 8px;
  border-width: 0;
}

form input:not([type="checkbox"]):not([type="month"]):not([type="submit"]):not([readonly]) {
  width: calc(100% - 16px);
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 8px;
}

form input[type="checkbox"], form input[type="month"] {
  padding: 8px;
}

form input[type="month"]:not(:valid) {
  color: transparent;
}

form input[readonly] {
  all: unset;
}

form input[required]:not([type="checkbox"]) + label::after {
  content: ' *';
  color: var(--color-accent);
}

form input[required][type="checkbox"] + label::before {
  content: '* ';
  color: var(--color-accent);
}

form input, form textarea {
  font-family: 'Nunito Sans', sans-serif;
}

form input.button {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  border: none;
  font-size: 1.25rem;
  margin: 32px 0;
  cursor: pointer;
}

form textarea {
  width: 100%;
  height: 200px;
}

.alternate-bank-account-field-hidden {
  display: none;
}

@media (prefers-color-scheme: dark) {
  form input.button {
    border: 2px solid var(--color-accent);
  }
}