/* Form page (pages.FormPage) fields, styled to the site theme in less/_variables.less
   and less/_buttons.less: Open Sans, theme blues, square corners. */

#wagtail-form .default-form-fields > .row {
  row-gap: 1.5rem;
}

#wagtail-form .group-title {
  margin-top: 1rem;
  padding-bottom: .5rem;
  width: 100%;
  border-bottom: 2px solid var(--theme-blue);
  font-family: var(--Open-Sans-Bold);
  color: var(--dark-blue);
}

#wagtail-form .form-label,
#wagtail-form legend.form-label {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--Open-Sans-Semibold);
  font-size: 1rem;
  color: var(--dark-blue);
}

#wagtail-form .required {
  color: #dc3545;
}

#wagtail-form .form-control,
#wagtail-form .form-select {
  border-radius: 0;
  border: 1px solid rgba(67, 66, 68, .3);
  padding: .75rem 1rem;
  font-family: var(--Open-Sans-Reg);
  font-size: 1rem;
  color: var(--color);
  background-color: #fff;
}

#wagtail-form textarea.form-control {
  min-height: 9rem;
}

#wagtail-form .form-select[multiple] {
  min-height: 9rem;
  padding: .5rem 1rem;
}

#wagtail-form .form-control:focus,
#wagtail-form .form-select:focus,
#wagtail-form .form-check-input:focus {
  border-color: var(--theme-blue);
  box-shadow: 0 0 0 .2rem var(--light-blue-bg);
}

#wagtail-form .form-control::placeholder {
  color: rgba(67, 66, 68, .5);
}

/* Browse button of file / image upload fields */
#wagtail-form input[type="file"].form-control {
  padding: 0;
}

#wagtail-form input[type="file"].form-control::file-selector-button {
  margin: 0 1rem 0 0;
  padding: .75rem 1.25rem;
  border: 0;
  border-right: 1px solid var(--theme-dark-blue);
  border-radius: 0;
  background: var(--theme-dark-blue);
  color: #fff;
  font-family: var(--Open-Sans-Bold);
}

#wagtail-form input[type="file"].form-control:hover:not(:disabled)::file-selector-button {
  background: var(--theme-blue);
}

/* Checkbox, checkboxes and radio buttons */
#wagtail-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

#wagtail-form .form-check {
  margin-bottom: .5rem;
  font-size: 1rem;
  color: var(--color);
}

#wagtail-form .form-check-input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .125rem;
  border: 1px solid rgba(67, 66, 68, .4);
}

#wagtail-form .form-check-input[type="checkbox"] {
  border-radius: 0;
}

#wagtail-form .form-check-input:checked {
  background-color: var(--theme-dark-blue);
  border-color: var(--theme-dark-blue);
}

#wagtail-form .form-check-label {
  padding-left: .375rem;
}

#wagtail-form .choice-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
}

#wagtail-form .form-text {
  margin-top: .375rem;
  font-size: .875rem;
  color: rgba(67, 66, 68, .75);
}

/* Validation */
#wagtail-form .has-error .form-control,
#wagtail-form .has-error .form-select {
  border-color: #dc3545;
}

#wagtail-form .invalid-feedback,
#wagtail-form .errorlist {
  font-size: .875rem;
  color: #dc3545;
}

#wagtail-form .errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

#wagtail-form .form-button {
  padding: 2rem 0 3rem;
}

#wagtail-form .form-button .btn {
  min-width: 10rem;
}