.wrap-check-21 input[type="checkbox"] {
    visibility: hidden;
    display: none;
  }

  .wrap-check-21 *,
  .wrap-check-21 ::after,
  .wrap-check-21 ::before {
    box-sizing: border-box;
  }

  /* The switch - the box around the slider */
  .wrap-check-21 .switch {
    font-size: 1rem;
    position: relative;
    display: inline-block;
    width: 4em;
    height: 2em;
  }

  /* The slider */
  .wrap-check-21 .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: 
#eee;
    transition: 0.4s;
    border-radius: 0.5em;
    box-shadow: 0 0.2em 
#dfd9d9;
  }

  .wrap-check-21 .slider:before {
    position: absolute;
    content: "";
    height: 1.5em;
    width: 1.4em;
    border-radius: 0.3em;
    left: 0.3em;
    bottom: 0.7em;
    background-color: 
lightsalmon;
    transition: 0.4s;
    box-shadow: 0 0.4em 
#bcb4b4;
  }

  .wrap-check-21 .slider:hover::before {
    box-shadow: 0 0.2em 
#bcb4b4;
    bottom: 0.5em;
  }

  .wrap-check-21 input:checked + .slider::before {
    transform: translateX(2em);
    background: 
lightgreen;
  }