.switch {
     position: relative;
     display: inline-block;
     width: 45px;
     height: 20px;
}

.switch input {display:none;}

.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: 12px;
     width: 12px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
}

input:checked + .slider {
     background-color: #00a65a;
}

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

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

/* Rounded sliders */
.slider.round {
     border-radius: 34px;
}

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