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

  .wrap-check-46 .container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
  }

  .wrap-check-46 .checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 1.3em;
    width: 1.3em;
    background-color: 
#ccc;
    border-radius: 100%;
    background: 
#e8e8e8;
    box-shadow: 3px 3px 5px 
#c5c5c5,
                -3px -3px 5px 
#ffffff;
  }

  .wrap-check-46 .container input:checked ~ .checkmark {
    box-shadow: inset 3px 3px 5px 
#c5c5c5,
                inset -3px -3px 5px 
#ffffff;
  }

  .wrap-check-46 .checkmark:after {
    content: "";
    position: absolute;
    opacity: 0;
  }

  .wrap-check-46 .container input:checked ~ .checkmark:after {
    opacity: 1;
  }

  .wrap-check-46 .container .checkmark:after {
    left: 0.45em;
    top: 0.25em;
    width: 0.25em;
    height: 0.5em;
    border: solid 
darkgray;
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
    transition: all 250ms;
  }