/* ------------------------------------------------------------------
   Aubergine panels: light text, and buttons with a visible edge.
   ------------------------------------------------------------------ */

/* .form-area is the aubergine panel behind the enquiry form on the training
   courses page. Everything the form prints there was plum on plum. */
.form-area .frm-fluent-form,
.form-area .frm-fluent-form label,
.form-area .frm-fluent-form legend,
.form-area .frm-fluent-form b,
.form-area .frm-fluent-form span,
.form-area .frm-fluent-form .ff-el-form-check-label,
.form-area .frm-fluent-form .ff-el-input--label label,
.form-area h1, .form-area h2, .form-area h3, .form-area h4, .form-area p {
  color: #F2EEF8;
}
.form-area .frm-fluent-form .ff-el-form-check-label a,
.form-area a { color: #F2EEF8; text-decoration: underline; }

/* A submit button filled with the same aubergine as the panel behind it is
   invisible as a button. White fill, plum text, white edge. */
.form-area .frm-fluent-form .ff-btn-submit {
  background: #FFFFFF !important;
  color: #312152 !important;
  border: 2px solid #FFFFFF !important;
}
.form-area .frm-fluent-form .ff-btn-submit:hover {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}

/* Every outlined button on the aubergine: a 2px white edge and white text,
   rather than a 1px edge and lilac text that reads as disabled. */
.header-btn1, .header-btn1 a,
.flinker-btn1, .flinker-btn1 a,
.learn-white-btn1, .learn-white-btn1 a {
  border-width: 2px !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Applied by zz-edc-ondark.js where it measures a failure. */
.edc-text-light { color: #F2EEF8 !important; }
.edc-text-dark  { color: #312152 !important; }
.edc-btn-edge-light {
  border: 2px solid #FFFFFF !important;
  color: #FFFFFF !important;
}
.edc-btn-edge-dark {
  border: 2px solid #312152 !important;
  color: #312152 !important;
}
/* Fluent Forms writes a per-form ff_btn_style rule of its own, which beats the
   two above on specificity even with !important. A submit button filled with
   the panel colour behind it gets the white treatment outright. */
.frm-fluent-form .ff-btn-submit.edc-btn-edge-light,
.frm-fluent-form button.edc-btn-edge-light {
  background: #FFFFFF !important;
  color: #312152 !important;
  border: 2px solid #FFFFFF !important;
}
.frm-fluent-form .ff-btn-submit.edc-btn-edge-light:hover,
.frm-fluent-form button.edc-btn-edge-light:hover {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
.frm-fluent-form .ff-btn-submit.edc-btn-edge-dark {
  background: #312152 !important;
  color: #FFFFFF !important;
  border: 2px solid #312152 !important;
}