.switch {

  position: relative;

  display: inline-block;

  width: 32px;

  height: 16px;

}



.switch input { 

  opacity: 0;

  width: 0;

  height: 0;

}



.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #a0a5aa;

  -webkit-transition: .4s;

  transition: .4s;

}



.slider:before {

  position: absolute;

  content: "";

  height: 16px;

    width: 16px;

    left: 0px;

    bottom: 0px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}



input:checked + .slider {

  background-color: #72aee6; 

}



input:focus + .slider {

  box-shadow: 0 0 1px #2196F3;

}



input:checked + .slider:before {

  -webkit-transform: translateX(16px);

  -ms-transform: translateX(16px);

  transform: translateX(16px);

}



/* Rounded sliders */

.slider.ad {

  border-radius: 34px;

}



.slider.ad:before {

  border-radius: 50%;

}