/* Switches */
 /* The switch - the box around the slider */
.switch {
    position: relative; display: inline-block; width: 70px; height: 30px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CCC;
    transition: .4s;
}

.slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 3px; background-color: white; transition: .4s; }

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

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

input:checked + .slider:before { left: calc(100% - 30px); }

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

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

.radioSliderYN { position: relative; display: inline-block; width: 30px; height: 17px; }
.radioSliderYN input { display: none; }
.radioSliderYN input:checked + label { display: block; }

.sliderOn,
.sliderOff { position: relative; display: inline-block; width: 30px; height: 17px; background-color: #CCC; }

.sliderOff       { background: #D50000; }
.sliderOn        { background: #00C853; }
.sliderOn:before { transform: translateX(13px); }

.sliderOn:before,
.sliderOff:before { position: absolute; content: ""; height: 10px; width: 10px; left: 4px; bottom: 20%; background-color: white; transition: .4s; }