.switch {
    background         : #fff;
    border             : 1px solid #dfdfdf;
    position           : relative;
    display            : inline-block;
    box-sizing         : content-box;
    overflow           : visible;
    width              : 52px;
    height             : 30px;
    padding            : 0px;
    margin             : 0px;
    border-radius      : 20px;
    cursor             : pointer;
    box-shadow         : rgb(223, 223, 223) 0px 0px 0px 0px inset;
    transition         : 0.3s ease-out all;
    -webkit-transition : 0.3s ease-out all;
    top                : -1px;
}

/*adding a wide width for larger switch text*/
.switch.wide {
    width : 80px;
}

.switch.full {
    width     : 50%;
    min-width : 200px;
}

.switch.full .off {
    right : 10px;
}

.switch.full .on {
    left : 10px;
}

.switch small {
    background         : #fff;
    border-radius      : 100%;
    box-shadow         : 0 1px 3px rgba(0, 0, 0, 0.4);
    width              : 30px;
    height             : 30px;
    position           : absolute;
    top                : 0px;
    left               : 0px;
    transition         : 0.3s ease-out all;
    -webkit-transition : 0.3s ease-out all;
}

.switch.checked {
    background   : rgb(100, 189, 99);
    border-color : rgb(100, 189, 99);
}

.switch.checked small {
    left : 22px;
}

/*wider switch text moves small further to the right*/
.switch.wide.checked small {
    left : 52px;
}

/*wider switch text moves small further to the right*/
.switch.full.checked small {
    left        : 100%;
    margin-left : -30px;
}

/*styles for switch-text*/
.switch .switch-text {
    font-family : Arial, Helvetica, sans-serif;
    font-size   : 13px;
}

.switch .off {
    display  : block;
    position : absolute;
    right    : 10%;
    top      : 24%;
    z-index  : 0;
    color    : #A9A9A9;
}

.switch .on {
    display  : none;
    z-index  : 0;
    color    : #fff;
    position : absolute;
    top      : 24%;
    left     : 9%;
}

.switch.checked .off {
    display : none;
}

.switch.checked .on {
    display : block;

}

.switch.disabled {
    opacity : .50;
    cursor  : not-allowed;
}

.switch.inverse {
    font-size : 20px;
}

.switch {
    background : #e74c3c;
}

.switch .off {
    color : #ffffff;
}

.switch.inverse {
    background   : rgb(100, 189, 99);
    border-color : rgb(100, 189, 99);
}

.switch.inverse.checked {
    background-color : #ef8a80;
    border-color     : #e74c3c;
}