.form {
  font-family: var(--sans-serif);
}

.form input:not([type="submit"]),
.form textarea,
.form option,
.form select {
  font-family: var(--monospace);
  line-height: 1.5;
  box-sizing: border-box;
}

.form input[type="text"],
.form input[type="date"],
.form input[type="number"],
.form input[type="password"],
.form input[type="email"],
.form select {
  height: 2em;
  vertical-align: middle;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 8px;
  width: 100%;
}

@media (min-width: 500px) {
  .form input[type="text"],
  .form input[type="date"],
  .form input[type="number"],
  .form input[type="password"],
  .form input[type="email"],
  .form select {
    width: auto;
  }
}

.form select {
  width: 100%;
  max-width: 250px;
}

.form .row {
  margin: 10px 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 600px;
  flex-direction: column;
}

@media (min-width: 500px) {
  .form .row {
    flex-direction: row;
    flex-wrap: nowrap;
  }
}

.form input[name="amount"] {
  text-align: right;
}

.form textarea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  max-width: 600px;
}

.form label {
  font-weight: bold;
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  margin: 5px 0;
}

@media (min-width: 500px) {
  .form label {
    margin: 0;
  }
}

.form label.vertical {
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 500px) {
  .form .vertical + .vertical {
    margin-left: 5px;
  }
}

.form button[name="DELETE"] {
  --accent-color: maroon;
}

.form .errorlist {
  list-style-type: none;
  padding: 0;
  margin: 0;
  color: maroon;
}

.form .checkbox-field:not(:last-child) {
  margin-right: 1rem;
}

/* File widgets are ugly */
.form .protected-document-widget {
  margin-bottom: 1rem;
}

.form .protected-document-widget label {
  font-weight: normal;
}

.form .field-text {
  margin-right: 0.5em;
}