*:focus
{
    outline: none;
}

.dash-switch-knobs, .dash-switch-layer
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.dash-switch-button
{
    position: relative;
    top: 50%;
    width: 74px;
    height: 36px;
    margin: -20px auto 0 auto;
    box-sizing: border-box;
		overflow: hidden;
}

.dash-switch-checkbox
{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.dash-switch-knobs
{
    z-index: 2;
}

.dash-switch-layer
{
    width: 100%;
    background-color: #252729;
    transition: 0.3s ease all;
    z-index: 1;
		box-shadow: 0 0 2px 0 rgba(255,255,255,0.5);
}

/* Button 1 */
.dash-switch-button-1 .dash-switch-knobs:before
{
    content: 'ON';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 9px 4px;
    background-color: #03A9F4;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    border-radius: 100px;
}

.dash-switch-button-1 .dash-switch-checkbox:checked + .dash-switch-knobs:before
{
    content: 'OFF';
    left: 42px;
    background-color: #f44336;
}

.dash-switch-button-1 .dash-switch-layer
{
    border-radius: 100px;
}

.dash-switch-button-1 .dash-switch-checkbox:checked ~ .dash-switch-layer
{
    background-color: #fcebeb;
}

.dash-switch-button-1 .dash-switch-knobs, .dash-switch-button-1 .dash-switch-knobs:before, .dash-switch-button-1 .dash-switch-layer
{
    transition: 0.3s ease all;
}

/* Button 2 */
.dash-switch-button-2 {
	border-radius: 100px;
	overflow: hidden;
}

.dash-switch-button-2 .dash-switch-knobs:before, .dash-switch-button-2 .dash-switch-knobs:after
{
    content: 'ON';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 9px 4px;
    background-color: #03A9F4;
    border-radius: 50%;
    transition: 0.3s ease all;
    border-radius: 100px;
}

.dash-switch-button-2 .dash-switch-layer
{
    border-radius: 100px;
}

.dash-switch-button-2 .dash-switch-knobs:before
{
    content: 'ON';
}

.dash-switch-button-2 .dash-switch-knobs:after
{
    content: 'OFF';
}

.dash-switch-button-2 .dash-switch-knobs:after
{
    right: -28px;
    left: auto;
    background-color: #F44336;
}

.dash-switch-button-2 .dash-switch-checkbox:checked + .dash-switch-knobs:before
{
    left: -28px;
}

.dash-switch-button-2 .dash-switch-checkbox:checked + .dash-switch-knobs:after
{
    right: 4px;
}

.dash-switch-button-2 .dash-switch-checkbox:checked ~ .dash-switch-layer
{
    background-color: #fcebeb;
}

/* Button 3 */
.dash-switch-button-3 .dash-switch-knobs:before
{
    content: 'ON';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 9px 4px;
    background-color: #03A9F4;
    border-radius: 50%;
    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
    border-radius: 100px;
}

.dash-switch-button-3 .dash-switch-layer
{
    border-radius: 100px;
}

.dash-switch-button-3 .dash-switch-checkbox:active + .dash-switch-knobs:before
{
    width: 46px;
    border-radius: 100px;
}

.dash-switch-button-3 .dash-switch-checkbox:checked:active + .dash-switch-knobs:before
{
    margin-left: -26px;
}

.dash-switch-button-3 .dash-switch-checkbox:checked + .dash-switch-knobs:before
{
    content: 'OFF';
    left: 42px;
    background-color: #F44336;
}

.dash-switch-button-3 .dash-switch-checkbox:checked ~ .dash-switch-layer
{
    background-color: #fcebeb;
}

/* Button 4 */
.dash-switch-button-4 {
	border-radius: 100px;
	overflow: hidden;
}

.dash-switch-button-4 .dash-switch-knobs:before, .dash-switch-button-4 .dash-switch-knobs:after
{
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 9px 4px;
    background-color: #03A9F4;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    border-radius: 100px;
}

.dash-switch-button-4 .dash-switch-layer
{
    border-radius: 100px;
}

.dash-switch-button-4 .dash-switch-knobs:before
{
    content: 'ON';
}

.dash-switch-button-4 .dash-switch-knobs:after
{
    content: 'OFF';
}

.dash-switch-button-4 .dash-switch-knobs:after
{
    top: -28px;
    right: 4px;
    left: auto;
    background-color: #F44336;
}

.dash-switch-button-4 .dash-switch-checkbox:checked + .dash-switch-knobs:before
{
    top: -28px;
}

.dash-switch-button-4 .dash-switch-checkbox:checked + .dash-switch-knobs:after
{
    top: 4px;
}

.dash-switch-button-4 .dash-switch-checkbox:checked ~ .dash-switch-layer
{
    background-color: #fcebeb;
}

/* Button 5 */
.dash-switch-button-5
{
    perspective: 60px;
    overflow: visible;
}

.dash-switch-button-5 .dash-switch-knobs:before, .dash-switch-button-5 .dash-switch-knobs span
{
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 9px 4px;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    border-radius: 100px;
}

.dash-switch-button-5 .dash-switch-layer
{
    border-radius: 100px;
}

.dash-switch-button-5 .dash-switch-knobs:before
{
    background-color: #03A9F4;
}

.dash-switch-button-5 .dash-switch-knobs span:before
{
    content: 'ON';
}

.dash-switch-button-5 .dash-switch-knobs:before, .dash-switch-button-5 .dash-switch-layer
{
    transform: rotateY(0);
    transform-origin: center;
}

.dash-switch-button-5 .dash-switch-checkbox:checked + .dash-switch-knobs:before, .dash-switch-button-5 .dash-switch-checkbox:checked + .dash-switch-knobs span
{
    left: 42px;
}

.dash-switch-button-5 .dash-switch-checkbox:checked + .dash-switch-knobs:before
{
    transform: rotateY(180deg);
    background-color: #f44336;
}

.dash-switch-button-5 .dash-switch-checkbox:checked + .dash-switch-knobs span:before
{
    content: 'OFF';
    left: 42px;
}

.dash-switch-button-5 .dash-switch-checkbox:checked ~ .dash-switch-layer
{
    background-color: #fcebeb;
    transform: rotateY(-180deg);
}

.dash-switch-button-5 .dash-switch-knobs, .dash-switch-button-5 .dash-switch-knobs:before, .dash-switch-button-5 .dash-switch-layer
{
    transition: 0.3s ease all;
}

/* Button 6 */
.dash-switch-button-6
{
    overflow: visible;
    border-radius: 100px;
}

.dash-switch-button-6 .dash-switch-knobs:before
{
    content: 'ON';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 9px 4px;
    background-color: #03A9F4;
    border-radius: 50%;
}

.dash-switch-button-6 .dash-switch-layer
{
    border-radius: 100px;
}

.dash-switch-button-6 .dash-switch-layer, .dash-switch-button-6 .dash-switch-knobs, .dash-switch-button-6 .dash-switch-knobs:before
{
    transform: rotateZ(0);
    transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

.dash-switch-button-6 .dash-switch-checkbox:checked + .dash-switch-knobs
{
    transform: rotateZ(-180deg);
}

.dash-switch-button-6 .dash-switch-checkbox:checked + .dash-switch-knobs:before
{
    content: 'OFF';
    background-color: #f44336;
    transform: rotateZ(180deg);
}

.dash-switch-button-6 .dash-switch-checkbox:checked ~ .dash-switch-layer
{
    background-color: #fcebeb;
    transform: rotateZ(180deg);
}

/* Button 7 */
.dash-switch-button-7 {
	border-radius: 2px;
	color: #000;
}
.dash-switch-button-7 .dash-switch-knobs:before, .dash-switch-button-7 .dash-switch-knobs:after, .dash-switch-button-7 .dash-switch-knobs span
{
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 9px 4px;
    border-radius: 2px;
    transition: 0.3s ease all;
}

.dash-switch-button-7 .dash-switch-knobs:before
{
    content: '';
    left: 4px;
    background-color: #03A9F4;
}

.dash-switch-button-7 .dash-switch-knobs:after
{
    content: 'OFF';
    right: 4px;
    color: #4e4e4e;
}

.dash-switch-button-7 .dash-switch-knobs span
{
    display: inline-block;
    left: 4px;
    color: #fff;
    z-index: 1;
}

.dash-switch-button-7 .dash-switch-checkbox:checked + .dash-switch-knobs span
{
    color: #4e4e4e;
}

.dash-switch-button-7 .dash-switch-checkbox:checked + .dash-switch-knobs:before
{
    left: 42px;
    background-color: #F44336;
}

.dash-switch-button-7 .dash-switch-checkbox:checked + .dash-switch-knobs:after
{
    color: #fff;
}

.dash-switch-button-7 .dash-switch-checkbox:checked ~ .dash-switch-layer
{
    background-color: #fcebeb;
}

/* Button 8 */
.dash-switch-button-8
{
    overflow: visible;
    border-radius: 2px;
		color: #fff;
}

.dash-switch-button-8 .dash-switch-knobs
{
    perspective: 70px;
		border-radius: 2px;
}

.dash-switch-button-8 .dash-switch-knobs:before, .dash-switch-button-8 .dash-switch-knobs:after, .dash-switch-button-8 .dash-switch-knobs span
{
    position: absolute;
    top: 4px;
    border-radius: 2px;
}

.dash-switch-button-8 .dash-switch-knobs:before, .dash-switch-button-8 .dash-switch-knobs:after
{
    width: 20px;
    height: 10px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 9px 4px;
		border-radius: 2px;
}

.dash-switch-button-8 .dash-switch-knobs:before
{
    content: 'ON';
    left: 4px;
}

.dash-switch-button-8 .dash-switch-knobs:after
{
    content: 'OFF';
    right: 4px;
}

.dash-switch-button-8 .dash-switch-knobs span
{
    right: 4px;
    width: 33px;
    height: 28px;
    background-color: #03a9f4;
    transform: rotateY(0);
    transform-origin: 0% 50%;
    transition: 0.6s ease all;
    z-index: 1;
		border-radius: 2px;
}

.dash-switch-button-8 .dash-switch-checkbox:checked + .dash-switch-knobs span
{
    transform: rotateY(-180deg);
    background-color: #f44336;
		border-radius: 2px;
}

.dash-switch-button-8 .dash-switch-checkbox:checked ~ .dash-switch-layer
{
    background-color: #252729;
		border-radius: 2px;
}

.dash-switch-button-8 .dash-switch-checkbox + .dash-switch-knobs span
{
		border-radius: 2px;
}

.dash-switch-button-8 .dash-switch-checkbox ~ .dash-switch-layer
{
		border-radius: 2px;
}

/* Button 9 */
.dash-switch-button-9 {
	border-radius: 2px;
	color: #000;
}

.dash-switch-button-9 .dash-switch-knobs
{
    color: #4e4e4e;
}

.dash-switch-button-9 .dash-switch-knobs:before, .dash-switch-button-9 .dash-switch-knobs:after, .dash-switch-button-9 .dash-switch-knobs span, .dash-switch-button-9 .dash-switch-knobs span:before, .dash-switch-button-9 .dash-switch-knobs span:after
{
    position: absolute;
    top: 4px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    border-radius: 2px;
    transition: 0.3s ease all;
}

.dash-switch-button-9 .dash-switch-knobs:before
{
    content: 'ON';
    left: 4px;
}

.dash-switch-button-9 .dash-switch-knobs:after
{
    content: 'OFF';
    right: 4px;
}

.dash-switch-button-9 .dash-switch-knobs:before, .dash-switch-button-9 .dash-switch-knobs:after
{
    width: 27px;
    height: 10px;
    padding: 9px 3px;
    z-index: 1;
}

.dash-switch-button-9 .dash-switch-knobs span
{
    display: inline-block;
    z-index: 2;
}

.dash-switch-button-9 .dash-switch-knobs span, .dash-switch-button-9 .dash-switch-knobs span:before, .dash-switch-button-9 .dash-switch-knobs span:after
{
    width: 20px;
    height: 10px;
    padding: 9px 4px;
}

.dash-switch-button-9 .dash-switch-knobs span:before, .dash-switch-button-9 .dash-switch-knobs span:after
{
    content: '';
    top: 0;
}

.dash-switch-button-9 .dash-switch-knobs span:before
{
    left: -28px;
    background-color: #F44336;
}

.dash-switch-button-9 .dash-switch-knobs span:after
{
    right: -42px;
    background-color: #03A9F4;
}

.dash-switch-button-9 .dash-switch-checkbox:checked + .dash-switch-knobs span:before
{
    left:4px;
}

.dash-switch-button-9 .dash-switch-checkbox:checked + .dash-switch-knobs span:after
{
    right: -74px;
}

.dash-switch-button-9 .dash-switch-checkbox:checked ~ .dash-switch-layer
{
    background-color: #fcebeb;
}