/*
 * 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: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.pioneer-field {
  -webkit-box-flex: 11;
  -webkit-flex: 11 0;
  -ms-flex: 11 0;
  flex: 11 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

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

.pioneer-help-text {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 100%;
  -ms-flex: 1 0 100%;
  flex: 1 0 100%;
}

.pioneer-field-errors {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

.pioneer-fields-inline,
.pioneer-widget {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
  width: 100%;
}

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

.pioneer-fields-inline {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.pioneer-field-inline {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  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: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

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