.wrap-check-10 * {
      -webkit-tap-highlight-color: 
transparent;
      outline: none;
    }
  
    .wrap-check-10 input[type="checkbox"] {
      display: none;
    }
  
    .wrap-check-10 label {
      --size: 50px;
      --shadow: calc(var(--size) * .07) calc(var(--size) * .1);
  
      position: relative;
      display: block;
      width: var(--size);
      height: var(--size);
      margin: 0 auto;
      background-color: 
#f72414;
      border-radius: 50%;
      box-shadow: 0 var(--shadow) 
#ffbeb8;
      cursor: pointer;
      transition: 0.2s ease transform, 0.2s ease background-color,
        0.2s ease box-shadow;
      overflow: hidden;
      z-index: 1;
    }
  
    .wrap-check-10 label:before {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      width: calc(var(--size) * .7);
      height: calc(var(--size) * .7);
      margin: 0 auto;
      background-color: 
#fff;
      transform: translateY(-50%);
      border-radius: 50%;
      box-shadow: inset 0 var(--shadow) 
#ffbeb8;
      transition: 0.2s ease width, 0.2s ease height;
    }
  
    .wrap-check-10 label:hover:before {
      width: calc(var(--size) * .55);
      height: calc(var(--size) * .55);
      box-shadow: inset 0 var(--shadow) 
#ff9d96;
    }
  
    .wrap-check-10 label:active {
      transform: scale(0.9);
    }
  
    .wrap-check-10 .tick_mark {
      position: absolute;
      top: -1px;
      right: 0;
      left: calc(var(--size) * -.05);
      width: calc(var(--size) * .6);
      height: calc(var(--size) * .6);
      margin: 0 auto;
      margin-left: calc(var(--size) * .14);
      transform: rotateZ(-40deg);
    }
  
    .wrap-check-10 .tick_mark:before,
    .wrap-check-10 .tick_mark:after {
      content: "";
      position: absolute;
      background-color: 
#fff;
      border-radius: 2px;
      opacity: 0;
      transition: 0.2s ease transform, 0.2s ease opacity;
    }
  
    .wrap-check-10 .tick_mark:before {
      left: 0;
      bottom: 0;
      width: calc(var(--size) * .1);
      height: calc(var(--size) * .3);
      box-shadow: -2px 0 5px 
rgba(0, 0, 0, 0.23);
      transform: translateY(calc(var(--size) * -.68));
    }
  
    .wrap-check-10 .tick_mark:after {
      left: 0;
      bottom: 0;
      width: 100%;
      height: calc(var(--size) * .1);
      box-shadow: 0 3px 5px 
rgba(0, 0, 0, 0.23);
      transform: translateX(calc(var(--size) * .78));
    }
  
    .wrap-check-10 input[type="checkbox"]:checked + label {
      background-color: 
#07d410;
      box-shadow: 0 var(--shadow) 
#92ff97;
    }
  
    .wrap-check-10 input[type="checkbox"]:checked + label:before {
      width: 0;
      height: 0;
    }
  
    .wrap-check-10 input[type="checkbox"]:checked + label .tick_mark:before,
    .wrap-check-10 input[type="checkbox"]:checked + label .tick_mark:after {
      transform: translate(0);
      opacity: 1;
    }