.switch {
   position: relative;
   /*display: inline-block;*/
   float: right;
   width: 50px;
   height: 30px;
}

.switch input {
   display: none;
}

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

.switch .slider:before {
   position: absolute;
   content: "";
   height: 22px;
   width: 22px;
   left: 4px;
   top: 4px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
}

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

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

.switch input:disabled+.slider {
   opacity: 0.5;
}

.switch input:checked+.slider:before {
   -webkit-transform: translateX(20px);
   -ms-transform: translateX(20px);
   transform: translateX(20px);
}

/* Rounded sliders */

.switch .slider.round {
   border-radius: 30px;
}

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