.edu-exercises { margin-top: 2rem; }
.edu-exercises__title { margin: 1rem 0; }

.edu-exercise__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.edu-exercise__title { font-weight: 800; }
.edu-exercise__result { font-weight: 700; opacity: .85; }

.edu-question { margin: 0 0 1rem 0; }

.edu-choice__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}
.edu-choice__input { margin-top: .1rem; }
.edu-choice__letter { font-weight: 800; min-width: 2.25rem; text-align: center; }

.edu-choice.is-correct { outline: 2px solid rgba(46,160,67,.45); }
.edu-choice.is-incorrect { outline: 2px solid rgba(248,81,73,.45); }
.edu-choice.is-missed { outline: 2px solid rgba(187,128,9,.45); }

.edu-exercise__actions { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }

.edu-exercise__check:disabled,
.edu-exercise__check.is-inactive{
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


/* When solution is open, lock the button into the hover/active colour */
.edu-exercise__toggle-answer.edu-solution-open,
.edu-exercise__toggle-answer.edu-solution-open:hover,
.edu-exercise__toggle-answer.edu-solution-open:focus,
.edu-exercise__toggle-answer.edu-solution-open:focus-visible,
.edu-exercise__toggle-answer.edu-solution-open:active {
  background-color: rgb(8, 107, 124);
  border-color: rgb(8, 107, 124);
}


/* Latch the button colour when solution is open (beats theme rules) */
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open {
  background-color: rgb(8, 107, 124) !important;
  border-color: rgb(8, 107, 124) !important;
}

/* Keep it latched in all pseudo states too */
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open:hover,
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open:focus,
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open:focus-visible,
.edu-exercise .sd-btn.sd-btn-primary.edu-solution-open:active {
  background-color: rgb(8, 107, 124) !important;
  border-color: rgb(8, 107, 124) !important;
}