/*
 * pioneer/form.css
 *
 * Default styles for a pioneer form; This includes a flexbox grid, some
 * paddings and margins and red color usage for errors. This should be good
 * enough to get going. These CSS rules should designed so that an implementer
 * can (easily) change the layout. Avoid generated content in pseudo elements,
 * for example, because you cannot remove/undo this in other stylesheets.
 *
 * Note that flexbox does not support collapsing margins. Depending on your
 * layout, you need to adjust margins. As a guide, use either top or bottom
 * margins, not both.
 */
.pioneer-formfield {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pioneer-field {
  flex: 11 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.pioneer-label {
  flex: 3 0 0%;
}

.pioneer-help-text {
  order: 3;
  flex: 1 0 100%;
}

.pioneer-field-errors {
  order: 2;
}

.pioneer-fields-inline,
.pioneer-widget {
  order: 1;
  width: 100%;
}

span.pioneer-radioselect,
label.pioneer-radioselect-label {
  display: inline-block;
  white-space: nowrap; /* Prevent wrapping between radio and text */
}

.pioneer-radioselect-optgroup-label {
  font-weight: bold;
  margin: 0.5em 0;
}

.pioneer-fields-inline {
  display: flex;
  flex-wrap: wrap;
}

.pioneer-field-inline {
  flex-grow: 1;
  flex-shrink: 0;
}
.pioneer-field-inline > * {
  display: inline-block;
}

.pioneer-field-errors,
.pioneer-help-text {
  font-size: small;
}

.pioneer-checkboxinput input[type=checkbox] {
  margin-left: 0;
}

.pioneer-formset-form {
  display: flex;
  align-items: flex-end;
}

@media screen and (max-width: 499px) {
  .pioneer-field-inline,
  .pioneer-widget-inline {
    display: block;
  }
}