.checklist > li:not(:last-of-type) {
  margin-bottom: 1.2em;
}
.checklist__label {
  cursor: pointer;
}
.checklist__checkbox {
  margin-right: 0.5em;
  width: 1.5em;
  height: 1.5em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 2px solid #ccc;
  border-radius: 0.3em;
  cursor: pointer;
  vertical-align: middle;
  display: inline-block;
  position: relative;
}
.checklist__checkbox::after {
  width: 60%;
  height: 30%;
  content: "";
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  display: inline-block;
  position: absolute;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
}
.checklist__checkbox:checked {
  background: #20b6c4;
  border-color: #20b6c4;
}
.checklist__checkbox:checked::after {
  opacity: 1;
}