.switch {
   position: relative;
   display: inline-block;
   font-size: .60em;
   width: 4em;
   height: 2.27em;
}

.switch input {
   opacity: 0;
   width: 0;
   height: 0;
}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   -webkit-transition: .4s;
   transition: .4s;
}

.slider:before {
   position: absolute;
   content: "";
   height: 2em;
   width: 2em;
   left: .13em;
   bottom: .11em;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
}

input:checked+.slider {
   background-color: #2196F3;
}

input:focus+.slider {
   box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
   -webkit-transform: translateX(1.68em);
   -ms-transform: translateX(1.68em);
   transform: translateX(1.68em);
}

.slider.round {
   border-radius: 1.7em;
}

.slider.round:before {
   border-radius: 50%;
}