@namespace url(http://www.w3.org/1999/xhtml);

input.invalid {
  background: rgb(255, 200, 200);
}

textarea {
  width: 40em;
  height: 8em;
  /* baseline works nicely in Mozilla, but not Chrome */
  vertical-align: top;
}

select[multiple] {
  vertical-align: top;
}

input[type="checkbox"], input[type="radio"] {
  vertical-align: text-top;
}

input.date {
  width: 6em;
}

input.year {
  width: 3em;
}

input.financialYear {
  width: 3.5em;
}

input.time, input.duration {
  width: 5em;
}

input.timestamp {
  width: 10em;
}

input.money {
  width: 5em;
}

input.quantity {
  width: 6em;
}

input.days {
  width: 2em;
}

textarea.address {
  height: 4em;
  width: 15em;
}

input.postcode {
  width: 6em;
}

.field.longSuffix textarea, .field.longSuffix select[multiple] {
  float: left;
  margin-right: 0.6ex;
}

.field {
  /* confine floating .longSuffix textareas/multisels */
  display: table;
  padding: 2px;
}

.field.labelled {
  display: table-row;
  padding-left: 0;
  padding-right: 0;
}

.field.labelled .fieldLabel,
.field.labelled .fieldContent {
  display: table-cell;
  padding: 2px;
}

.field.labelled .fieldLabel {
  white-space: nowrap;
}

.field.labelled.longLabel .fieldLabel {
  max-width: 0;
  white-space: normal;
}

.field.labelled.longLabel .fieldContent {
  vertical-align: middle;
}

.field.labelled.veryLongLabel {
  /* confine floating .longSuffix textareas/multisels */
  display: table;
}

.field.labelled.veryLongLabel .fieldLabel,
.field.labelled.veryLongLabel .fieldContent {
  display: inline;
}

.hint, .warn {
  color: rgb(67, 105, 131);
  font-weight: normal;
  cursor: help;
}

.stdTable thead th .hint, .stdTable thead th .warn,
.stdTable tfoot th .hint, .stdTable tfoot th .warn,
.stdTable caption .hint, .stdTable caption .warn {
  color: rgb(164, 208, 238);
}

.hint::before {
  content: "❓️";
}

.warn::before {
  content: "⚠️";
}

@media (max-width: 8in) {
  .field.labelled,
  .field.labelled .fieldLabel,
  .field.labelled .fieldContent {
    /* confine floating .longSuffix textareas/multisels */
    display: table !important;
    white-space: normal !important;
  }

  .field.labelled .fieldLabel {
    max-width: none !important;
  }

  .field input[type=text],
  .field textarea,
  .field select {
    max-width: 100%;
  }
}