input.ios-switch {
  max-height: 0;
  max-width: 0;
  opacity: 0;
}

input.ios-switch ~ label {
  position: relative;
  box-shadow: inset 0 0 0px 1px #d5d5d5;
  text-indent: -5000px;
  height: 30px;
  width: 50px;
  border-radius: 15px;
  cursor:pointer;
  vertical-align: middle;
}

input.ios-switch ~  label:before {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  border-radius: 15px;
  background: rgba(19, 191, 17, 0);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

input.ios-switch ~  label:after {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0px;
  border-radius: 15px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

input.ios-switch:checked ~  label:before {
  width: 50px;
  /*background: rgba(19, 191, 17, 1);
  background: #8ce196;*/
  background: #033568;
}

input.ios-switch:checked ~  label:after {
  left: 20px;
  /*box-shadow: inset 0 0 0 1px rgba(19, 191, 17, 1), 0 2px 4px rgba(0, 0, 0, .2);*/
  box-shadow: inset 0 0 0 1px #033568, 0 2px 4px rgba(0, 0, 0, .2);
}