.switch-container {
    position: relative;
    height: 20px;
}

.switch-bar {
    left: 1px;
    width: 34px;
    top: 3px;
    height: 14px;
    border-radius: 8px;
    position: absolute;
}

.switch-thumb-container {
    position: absolute;
    z-index: 1;
}

.switch-thumb {
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.switch-thumb-is-unchecked {
    background-color: rgb(255,255,255);
}

.switch-bar-is-unchecked {
    background-color: rgb(158,158,158);
}

.switch-thumb-is-checked-disabled {
    background-color: rgb(189,189,189);
}

.switch-thumb-is-unchecked-disabled {
    background-color: rgb(189,189,189);
}

.switch-bar-is-unchecked-disabled {
    background-color: rgba(0,0,0,0.12);
}

.switch-thumb-is-checked-default {
    -o-transform: translate(20px,0); /** Opera **/
    -moz-transform: translate(20px,0); 
    -webkit-transform: translate(20px,0); /** Chrome & Safari **/
    transform: translate(20px,0);

    background-color: rgb(255,82,82);
}

.switch-bar-is-checked-default {
    background-color: rgba(255,82,82,0.5);
}

.switch-thumb-is-checked-theme-1 {
    -o-transform: translate(20px,0); /** Opera **/
    -moz-transform: translate(20px,0); 
    -webkit-transform: translate(20px,0); /** Chrome & Safari **/
    transform: translate(20px,0);
    background-color: rgb(16,108,200);
}

.switch-bar-is-checked-theme-1 {
    background-color: rgba(16,108,200,0.5);
}

.switch-thumb-is-checked-theme-2 {
    -o-transform: translate(20px,0); /** Opera **/
    -moz-transform: translate(20px,0); 
    -webkit-transform: translate(20px,0); /** Chrome & Safari **/
    transform: translate(20px,0);
    background-color: rgb(133, 142, 155);
}

.switch-bar-is-checked-theme-2 {
    background-color: rgba(133, 142, 155,0.5);
}