/* Based on https://codepen.io/yesilfasulye/pen/LmIlw */


.cp-container{
  background: #fff;
  border-radius:5px; 	
  box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);	
  margin:50px auto;
  padding:30px 20px 20px;
  width:500px;
  /* border: 1px solid black; */
}

td{
  border-bottom:1px solid #f6f6f6;
  padding:5px 10px;
}

td:nth-child(1){
  text-align: center;
  width: 200px;
}

td:nth-child(2){
  text-align: center;
  width: 150px;
}

/* tr:last-child td{
  border:none;
  padding:30px 10px 10px;
  text-align: center;
  width: 90px;
} */

input[type=checkbox] {
    cursor: pointer;
    height: 30px;
    margin:4px 0 0;
    position: absolute;
    opacity: 0;
    width: 30px;
    z-index: 2;
  }
  
  input[type=checkbox] + span {
    background: #e74c3c;
    border-radius: 50%;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1);
    display: inline-block;
    height: 30px;
    margin:4px 0 0;
    position:relative;
    width: 30px;
    transition: all .2s ease;
  }
  
  input[type=checkbox] + span::before, input[type=checkbox] + span::after{
    background:#fff;
    content:'';
    display:block;
    position:absolute;
    width:4px;
    transition: all .2s ease;
  }
  
  input[type=checkbox] + span::before{
    height:16px;
    left:13px;
    top:7px;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
  }
  
  input[type=checkbox] + span::after{
    height:16px;
    right:13px;
    top:7px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  
  input[type=checkbox]:checked + span {
    background:#2ecc71;			    
  }
  
  input[type=checkbox]:checked + span::before{
    height: 9px;
    left: 9px;
    top: 13px;
    -webkit-transform:rotate(-47deg);
    transform:rotate(-47deg);
  }
  
  input[type=checkbox]:checked + span::after{
    height: 15px;
    right: 11px;
    top: 8px;
  }