/* switch checkbox
-------------------------------------------------- */
.switchCheckbox
{
    /*margin: 0px;*/
}
.switchCheckbox[disabled]
{
    opacity: .5;
}
.switchCheckbox input[type=checkbox]
{
    display: none;
}
.switchCheckbox .switchBox
{
    display: inline-block;
    overflow: hidden;

    box-sizing: border-box;

    cursor: pointer;

    border: 1px solid #e3e3e3;
    border-radius: 15px;
}
.switchCheckbox .switchContainer
{
    box-sizing: border-box;
    width: 90px;
    margin-left: -30px;

    -webkit-transition: all .5s;
       -moz-transition: all .5s;
        -ms-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s;

    background-color: #f9f9f9;
}
.switchCheckbox input[type=checkbox]:checked + .switchBox .switchContainer
{
    height: 30px;
    margin-right: -30px;
    margin-left: 0;

    color: white;
    background-color: #007aff;
}
.switchCheckbox:disabled *
{
    opacity: .6;
}
.switchCheckbox .switchContainer div
{
    font-weight: bold;
    line-height: 30px;

    float: left;

    width: 30px;
    height: 30px;

    text-align: center;
    vertical-align: middle;

    background-color: transparent;
}
.switchCheckbox .switchContainer .on
{
    font-size: .6em;

    color: #eee;
}
.switchCheckbox .switchContainer .switch
{
    border-radius: 15px;
    background-color: #f3f3f3;
    box-shadow: 0 0 10px #000;
}
.switchCheckbox .switchContainer .off
{
    font-size: .6em;

    color: #888;
}