.ios-toggles *:before, 
.ios-toggles *:after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-transition:.25s ease-in-out;
     -moz-transition:.25s ease-in-out;
       -o-transition:.25s ease-in-out;
          transition:.25s ease-in-out;
  outline:none;
}

.ios-toggles {
  width: 60px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.ios-toggle,
.ios-toggle:active {
  position: absolute !important;
  top: 0 !important;
  height: 0;
  width: 0;
  opacity: 0;
  border: none;
  outline: none;
}

.checkbox-label {
  display:block;
  position:relative;
  padding:10px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 16px;
  width:100%;
  height:36px;
  border-radius:18px;
  background:#f8f8f8;
  cursor:pointer;
}

.checkbox-label:before {
  content:'';
  display:block;
  position:absolute;
  z-index:1;
  line-height:34px;
  text-indent:40px;
  height:36px;
  width:36px;
  border-radius:100%;
  top:0px;
  left:0px;
  right:auto;
  background:white;
  box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
}

.checkbox-label:after {
  content:attr(data-off);
  display:block;
  position:absolute;
  z-index:0;
  top:0;
  left: -50px;
  padding:10px;
  height:100%;
  width: 50px;
  text-align:right;
  color: rgba(0,0,0,.5);
  white-space:nowrap;
}
.ios-toggle:checked + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
   -moz-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
        box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}
.ios-toggle:checked + .checkbox-label:before{
left:calc(100% - 36px);
/*box-shadow*/
-webkit-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
   -moz-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
        box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
}
.ios-toggle:checked + .checkbox-label:after{
  content:attr(data-on);
  left:60px;
  width:36px;
}


/* COLOR CHECKBOX */

.ios-toggle + .checkbox-label {
  box-shadow: inset 0 0 0 0px rgba(19,191,17,1), 0 0 0 2px #dddddd;
}

.ios-toggle:checked + .checkbox-label {
  box-shadow: inset 0 0 0 18px #3580B9, 0 0 0 2px #3580B9;
}

.ios-toggle:checked + .checkbox-label:after {
  color: #3580B9;
}