.checkbox {
  display: block;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin-block: .375rem;
  padding-inline: 0 !important; }
  .checkbox input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer; }
    .checkbox input ~ i {
      display: block;
      opacity: .75; }
    .checkbox input ~ i + i {
      display: none; }
    .checkbox input:checked ~ i {
      display: none; }
    .checkbox input:checked ~ i + i {
      display: block;
      opacity: 1; }
  .checkbox i {
    position: absolute;
    font-size: 1.5rem;
    pointer-events: none;
    margin: 0 0 0 .075rem;
    color: #5b5; }
  .checkbox:hover i {
    filter: brightness(1.4); }