.pure-menu-heading {
  margin-block-end: .2em;
}

/* make the label wider */
.wide-label-form .pure-form-aligned .pure-control-group label {
  width: 12rem;
}

.wide-label-form .pure-form-aligned .pure-input-1 {
  width: calc(100% - 14rem);
}

@media only screen and (max-width: 30em) {
  .wide-label-form .pure-form-aligned .pure-input-1,
  .wide-label-form .pure-form-aligned .pure-control-group label {
    width: 100%;
  }
}

.condensed-class-fields .class-field {
  display: inline-block;
  list-style-type: none;
  padding-inline-start: 10px;
  margin-block-end: 0;
  margin-block-start: 0;
}

.condensed-class-fields .class-field input {
  position: relative;
  margin-left: 3px;
}

.condensed-class-fields .class-field input:checked::after {
  content: " ";
  display: block;
  position: absolute;
  left: -3px;
  top: -3px;
  width: 75%;
  height: 75%;
  border: 4px solid #0bdc0b;
  border-radius: 8px;
}

.condensed-class-fields .class-field input[value="0"]:checked::after {
  top: -3px;
  border: 4px solid red;
}

.condensed-class-fields .class-field li {
  display: inline-block;
}

.condensed-class-fields .pure-form-aligned .class-field li label[for^=id_class_] {
  width: auto;
  padding: 0;
}

.condensed-class-fields .pure-form-aligned .pure-control-group {
  margin-bottom: .1em;
  border-bottom: 1px solid #e8e8e8;
}

.condensed-class-fields .pure-form-aligned .pure-control-group label[for^=id_class_] {
  width: 50%;
  max-width: 20em;
  margin-right: .5em;
  overflow-x: hidden;
  white-space: nowrap;
}

@media only screen and (max-width: 480px) {
  .condensed-class-fields .pure-form-aligned .pure-control-group label[for^=id_class_] {
    width: 100%;
    white-space: normal;
  }
}