.switch {
  display: flex;
  width: 50px;
  height: 30px;
  align-items: center;
  background-color: white;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 150px;
  position: relative;
  border: 2px solid #6d6d6d;
  overflow: hidden;
}

.check {
  display: none;
}
.knob {
  width: 22px;
  height: 22px;
  background-color: #6d6d6d;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 0.15s ease-in-out;
}
.switch:hover > .knob {
  box-shadow: 0 0 0px 5px #33333327;
  background-color: #333;
}

.check:checked + .switch .knob {
  transform: translateX(90%);
  background-color: white;
}

/* Optional background change */
.check:checked + .switch {
  background-color: #8187ff;
  border: 2px solid #8187ff;
}