.switch input {
    display:none;
}

.switch {
    display:inline-block;
    width:53px;
    height:24px;
    margin:0 8px 8px 1px;
    padding: 0 15px;
    /* transform:translateY(50%); */
    position:relative;
}

.switch {
    text-align:left;
    width: 40px;
    height: 20px;
    float: left;
    margin-bottom: 0;
    margin-left: 5px;
}

.slider {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:30px;
    box-shadow: 0 0 0 1px #ccc, 0 0 2px #ddd;
    cursor:pointer;
    overflow:hidden;
    transition:.4s;
    border: none;
}

.slider:before {
    position:absolute;
    content:"";
    background:#777;
    border-radius:30px;
    width: auto;
    height: 14px;
    left: 3px;
    right: 23px;
    top: 3px;
    transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transition: right .2s linear .1s,left .2s;
    -o-transition: right .2s linear .1s,left .2s;
    -moz-transition: right .2s linear .1s,left .2s;
    -webkit-transition: right .2s linear .1s,left .2s;
}

input:checked + .slider:before {
    background:limeGreen;
    left: 23px;
    right: 3px;
    transition: left .2s linear .1s,right .2s;
    -o-transition: left .2s linear .1s,right .2s;
    -moz-transition: left .2s linear .1s,right .2s;
    -webkit-transition: left .2s linear .1s,right .2s;
}

input:checked + .slider {
    box-shadow:0 0 0 1px #28a745, 0 0 2px #9cce9c;
}

input:disabled + .slider {
    cursor: not-allowed;
}