.chxbox {
    display: inline-block;
    position: relative;
}

.chxbox > input {
    height: 0;
    opacity: 0;
    width: 0;
}

.chxbox > input:checked + .chxbox-slider:before {
    background-color: #2196F3;
}

.chxbox > .chxbox-slider {
    -webkit-transition: .2s;
    background-color: #ccc;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    border-radius: 0.25rem;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .2s;
}

.chxbox > .chxbox-slider:before {
    -webkit-transition: .2s;
    background-color: #ffffff;
    border-radius: 50%;
    content: "";
    position: absolute;
    transition: .2s;
}




.chxbox.chxbox-primary > input:checked + .chxbox-slider:before {
    background-color: #2196F3;
    box-shadow: 0 0 3px #2196F3;
}
.chxbox.chxbox-success > input:checked + .chxbox-slider:before {
    background-color: #5cb85c;
    box-shadow: 0 0 3px #5cb85c;
}
.chxbox.chxbox-info > input:checked + .chxbox-slider:before    {
    background-color: #5bc0de;
    box-shadow: 0 0 3px #5bc0de;
}
.chxbox.chxbox-warning > input:checked + .chxbox-slider:before {
    background-color: #f0ad4e;
    box-shadow: 0 0 3px #f0ad4e;
}
.chxbox.chxbox-danger > input:checked + .chxbox-slider:before  {
    background-color: #d9534f;
    box-shadow: 0 0 3px #d9534f;
}
.chxbox.chxbox-muted > input:checked + .chxbox-slider:before   {
    background-color: #555555;
    box-shadow: 0 0 3px #555555;
}




.chxbox.chxbox-off-primary > input + .chxbox-slider {
    background-color: #2196F3;
}
.chxbox.chxbox-off-success > input + .chxbox-slider {
    background-color: #5cb85c;
}
.chxbox.chxbox-off-info > input + .chxbox-slider    {
    background-color: #5bc0de;
}
.chxbox.chxbox-off-warning > input + .chxbox-slider {
    background-color: #f0ad4e;
}
.chxbox.chxbox-off-danger > input + .chxbox-slider  {
    background-color: #d9534f;
}
.chxbox.chxbox-off-muted > input + .chxbox-slider   {
    background-color: #555555;
}




.chxbox {
    font-size: 1rem;
    height: 2.4em;
    line-height: 1.5;
    margin: 0;
    padding: 0.375rem 0.75rem;
    width: 2.4em;
}
.chxbox > .chxbox-slider:before {
    bottom: 0.45em;
    height: 1.375em;
    left: 0.45em;
    width: 1.375em;
}


.chxbox-xs {
    font-size: .65rem;
    height: 2.4em;
    line-height: 1.5;
    margin: 0;
    padding: 0.25rem 0.5rem;
    width: 2.4em;
}
.chxbox-xs > .chxbox-slider:before {
    bottom: 0.4em;
    height: 1.4em;
    left: 0.4em;
    width: 1.4em;
}


.chxbox-sm {
    font-size: .875rem;
    height: 2.2em;
    line-height: 1.5;
    margin: 0;
    padding: 0.25rem 0.5rem;
    width: 2.2em;
}
.chxbox-sm > .chxbox-slider:before {
    bottom: 0.3em;
    height: 1.45em;
    left: 0.3em;
    width: 1.45em;
}


.chxbox-md {
    font-size: 1rem;
    height: 2.4em;
    line-height: 1.5;
    margin: 0;
    padding: 0.375rem 0.75rem;
    width: 2.4em;
}
.chxbox-md > .chxbox-slider:before {
    bottom: 0.45em;
    height: 1.375em;
    left: 0.45em;
    width: 1.375em;
}


.chxbox-lg {
    font-size: 1.25rem;
    height: 2.45em;
    line-height: 1.5;
    margin: 0;
    padding: 0.5rem 1rem;
    width: 2.45em;
}
.chxbox-lg > .chxbox-slider:before {
    bottom: 0.5em;
    height: 1.35em;
    left: 0.5em;
    width: 1.35em;
}


.chxbox-xl {
    font-size: 1.5rem;
    height: 2.2em;
    line-height: 1.5;
    margin: 0;
    padding: 0.5rem 1rem;
    width: 2.2em;
}
.chxbox-xl > .chxbox-slider:before {
    bottom: 0.35em;
    height: 1.45em;
    left: 0.35em;
    width: 1.45em;
}