.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
  /* background-color: black; */
}

.checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 2.3em;
  width: 2.3em;
  background-color: #ccc;
  border-radius: 50%;
  transition: 0.4s ease-out;
  box-shadow:
    inset 0.07em 0.07em 0.12em #b3b3b3,
    inset -0.07em -0.07em 0.12em #ffffff;
}

.container input:checked ~ .checkmark {
  box-shadow:
    inset -0.07em -0.07em 0.12em #008300,
    inset 0.07em 0.07em 0.12em #9ef99e,
    0.1em 0.1em 0.2em -0.05em #7a7a7a;
  background-color: rgb(79, 202, 79);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  transition: transform 0.4s ease-in-out;
  transform-origin: center;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 0.98em;
  top: 0.6em;
  width: 0.3em;
  height: 0.7em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}