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

.on-off-switch-track{
    position:absolute;
    border :solid 1px #ccc;
    z-index:1;
    background-color: #4da0ff;
    overflow:hidden;
	box-sizing:border-box;
	top:1px;
}

/* semi transparent white overlay */
.on-off-switch-track-white{
    position:absolute;
    opacity:1;
    z-index:30;
}
/* Track for "on" state */
.on-off-switch-track-on{
    background-color:#4da0ff;
    position:absolute;
    z-index:10;
    overflow:hidden;
}
/* Track for "off" state */
.on-off-switch-track-off{
    position:absolute;
    background:#fff !important;
    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-off-gradient{

    background:#fff;
    position:absolute;
    width:100%;
    height:5px;
}
.track-on-gradient{
    background:#4da0ff;
    position:absolute;
    width:100%;
    height:5px;
}

.on-off-switch-thumb-color{
    background: #fff;
	border:solid 1px #D0D7DD;
    position:absolute;
}

.on-off-switch-thumb-off{
    border-color:#ccc;
    position:absolute;
	box-sizing:border-box;
}
.on-off-switch-thumb-on{
    border-color:#ccc;
    z-index:10;
	box-sizing:border-box;
}
.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 */

}