.on-off-switch{
    position:relative;
    cursor:pointer;
    overflow:hidden;
    user-select:none;
}

.on-off-switch-track{
    position:absolute;
    border : solid #888;
    z-index:1;
    background-color: #fff;
    overflow:hidden;
}

/* semi transparent white overlay */
.on-off-switch-track-white{
    background-color:#FFF;
    position:absolute;
    opacity:0.2;
    z-index:30;
}
/* Track for "on" state */
.on-off-switch-track-on{
    background-color:#009966;
    border-color:#008844;
    position:absolute;
    z-index:10;
    overflow:hidden;
}
/* Track for "off" state */
.on-off-switch-track-off{
    position:absolute;
    border-color:#CCC;
    z-index:1;
}

.on-off-switch-thumb{
    position:absolute;
    z-index:2;
    overflow:hidden;
}

.on-off-switch-thumb-shadow{
    opacity:0.5;
    border:1px solid #000;
    position:absolute;
}

.track-on-gradient, .track-off-gradient{
    background: -webkit-linear-gradient(180deg,rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0)); /* Standard syntax */
    position:absolute;
    width:10%;
    height:5px;
}


.on-off-switch-thumb-color{
    background: -webkit-linear-gradient(45deg, #BBB, #FFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, #BBB, #FFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, #BBB, #FFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, #BBB, #FFF); /* Standard syntax */
    background-color:#F0F0F0;
    position:absolute;
}

.on-off-switch-thumb-off{
    border-color:#AAA;
    position:absolute;
}
.on-off-switch-thumb-on{
    border-color:#008855;
    z-index:10;
}
.on-off-switch-text{
    width:100%;
    position:absolute;
    font-family:arial;
    user-select:none;
    font-size:10px;
}

.on-off-switch-text-on{
    color:#FFF;
    text-align:left;
}
.on-off-switch-text-off{
    color:#000;
    text-align:right;
} 
/* Mouse over thumb effect */
.on-off-switch-thumb-over{
    background-color:#F5F5F5;
    background: -webkit-linear-gradient(45deg, #CCC, #FFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, #CCC, #FFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, #CCC, #FFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, #CCC, #FFF); /* Standard syntax */

}

/* ################################################## */

.oosw-toggle-wrapper {
    /* display: flex; */
    align-items: center;
    margin-top:-5px;
}

.oosw-status-text {
    font-size: 12px;
    font-weight: normal;
    color: #333;
    margin-top:-2px;
    margin-right: 14px;
}

/* Toggle styles */
.oosw-toggle {
    box-sizing: border-box;
    display: inline-block;
    width: 24px;
    height: 10px;
    position: relative;
    cursor: pointer;
    margin-top: -14px;
}

.oosw-toggle-input {
    display: none;
    margin: 0;
}

.oosw-toggle-controller.oosw-default-success {
    position: relative;
    height: 100%;
    width: 100%;
    border: 2px solid #ccc;
    border-radius: 22px;
    background: #eee;
    transition: all 0.25s ease;
}

.oosw-toggle-input:checked + .oosw-toggle-controller.oosw-default-success {
    border-color: #009966;
    background: #66cc66;
}

.oosw-toggle-controller.oosw-default-success:after {
    position: absolute;
    top: 50%;
    left: 2px;
    content: '';
    display: block;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 2px rgba(46, 45, 44, 0.2);
    transform: translateY(-50%);
    transition: all 0.25s ease;
}

.oosw-toggle-input:checked + .oosw-toggle-controller.oosw-default-success:after {
    left: 14px;
}

.oosw-toggle-input:disabled + .oosw-toggle-controller.oosw-default-success {
    background: #ddd;
    border-color: #aaa;
    cursor: not-allowed;
}