/* 
Pure CSS slider from StackOverflow.com
URL: stackoverflow.com/questions/39846282
/how-to-add-the-text-on-and-off-to-toggle-button

Sample usage in HTML:
    <label class="switch">
    <input type="checkbox" id="togBtn">
    <div class="slider round"></div>
    </label>
*/
.switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 56px;
    height: 17px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: dimgray;
    -webkit-transition: .2s;
    transition: .2s;
    border-radius: 17px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .2s;
    transition: .2s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2ab934;
}

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

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

.slider:after {
    content: 'OFF';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

input:checked + .slider:after {  
    content: 'ON';
}