input[type="checkbox"] {
        width:40px;
        margin-right:10px;
        position:relative;
      }

      input[type="checkbox"]::before {
        content:'';
        border-radius:18px;
        width:40px;
        position:absolute;
        height:20px;
        background-color:#e0e0e0;
        box-shadow:inset 2px 2px 6px rgba(0,0,0,0.5);
        left:3px;
        top:-7px;
        border:1px solid #c0c0c0;
        cursor:pointer;
      }

      input[type="checkbox"]::after {
        content:'';
        border-radius:18px;
        width:16px;
        height:16px;
        background-color:gray;
        position: absolute;
        transition-duration:0.3s;
        top:-4px;
        left:7px;
      }

      input[type="checkbox"]:checked::after {
        content:'';
        border-radius:18px;
        background-color:red;
        position: absolute;
        left:26px;
      }