.on-off-switch{
    position:relative;
    cursor:pointer;
    overflow:hidden;
    user-select:none;
    /*margin: 0px auto !important;*/
}

.on-off-switch-track{
    position:absolute;
    border : 2px solid #fff;
    z-index:1;
    background-color: #fff;
    overflow:hidden;
    margin: 0px auto;
}

/* semi transparent white overlay */
.on-off-switch-track-white{
    position: absolute;
    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;
    background-color: rgb(255, 255, 255) !important;
}

.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{
    display: none;
    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:100%;
    height:5px;
}


.on-off-switch-thumb-color{
    /*
    background: linear-gradient(45deg, #BBB, #FFF);
    background-color:#F0F0F0;
    position:absolute;
    */
    background: #0c0c0c;
    background-color: #333;
    position: absolute;
    border: 3px solid black;
}

.on-off-switch-thumb-off{
    /*
    border-color:#AAA;
    position:absolute;*/
    /*
    style used in video player
    background: #101010;
    background-color: #2a2a2a;
    */

    background: #ccc;
    background-color: #ccc;
    position: absolute;
    border: 0px solid #2a2a2a;
    border-radius:12px !important;
    width: 18px !important;
    height: 18px !important;
    left: 2px !important;
    top: 2px !important;

}
.on-off-switch-thumb-on{
    /* style used in video player
    background: #2a2a2a;
    background-color: #2a2a2a;
    */
    background: #08c;
    background-color: #08c;
    position: absolute;
    border: 3px solid transparent;
    z-index: 10;
    border-radius: 12px !important;
    width: 18px !important;
    height: 18px !important;
    left: 2px !important;
    top: 2px !important;
}
.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: linear-gradient(45deg, #CCC, #FFF);
    */

}