.customCheckbox {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
/* Hide the browser's default checkbox */
.customCheckbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 40px;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  border: 2px solid white;
  /* background-color: #eee; */
}

/* On mouse-over, add a grey background color */
.customCheckbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.customCheckbox input:checked ~ .checkmark {
  background-color: black
}

@media(max-width: 426px){
    .checkmark {
        left: 10px;
    }
}