/*#region Switches*/
input[type=checkbox].checkbox-slider {
    width: 55px;
    height: 25px;
    left: 0;

    &.slider-icon {
        &:checked {
            ~ .text {
                &:after {
                    font-family: FontAwesome;
                    font-size: 15px;
                    line-height: 21px;
                    content: "\f00c";
                    border-width: 1px;
                    padding-left: 3px;
                    background-color: @white;
                    color: @carbon;
                }
            }
        }

        ~ .text {
            &:after {
                font-family: FontAwesome;
                font-size: 14px;
                line-height: 20px;
                content: "\f00d";
                border-width: 1px;
                padding-left: 4px;
                border-color: @white;
            }
        }
    }

    &.toggle {
        &:checked {
            ~ .text {
                &:after {
                    background-color: @white;
                    color: @carbon;
                }
            }
        }

        ~ .text {
            &:after {
                border: 0;
                background-color: @carbon;
                width: 14px;
                height: 14px;
                top: 3px;
                left: 3px;
                .box-shadow(none);
            }
        }
    }

    &.yesno {
        ~ .text {
            &:before {
                font-family: @main-fonts;
                content: "YES\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0NO" /*rtl:"NO\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0YES"*/;
            }
        }
    }

    ~ .text {
        margin: 0 4px;
        min-height: 24px;

        &:before {
            font-family: @main-fonts;
            content: "ON\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0OFF"/*rtl:"OFF\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0ON"*/;
            background-color: @white;
            color: @darkgray;
            font-weight: 300;
            font-size: 10px;
            line-height: 18px;
            height: 20px;
            overflow: hidden;
            border-radius: 50rem;
            border: 1px solid @gray;
            text-align: left;
            float: left;
            padding: 0;
            width: 52px;
            text-indent: -21px;
            margin-right: 0;
            .transition(all .3s ease 0s);
        }

        &:after {
            font-family: @main-fonts;
            content: '';
            font-size: 10px;
            font-weight: 300;
            background-color: @white;
            border: 5px solid @carbon;
            border-radius: 100%;
            width: 22px;
            height: 22px;
            line-height: 20px;
            position: absolute;
            top: -2px;
            left: -3px;
            padding: 0;
            .box-shadow(0 1px 1px 1px rgba(0,0,0,.3));
            .transition(all 0.3s ease);
        }
    }

    &:checked {
        ~ .text {
            &:before {
                text-indent: 5px;
                background-color: @carbon;
                border-color: @carbon;
                color: @white;
            }

            &:after {
                left: 34px;
                background-color: @carbon;
                border: 5px solid @white;
            }
        }
    }

    &.colored-blue {
        ~ .text {
            &:after {
                border-color: @blue;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @blue;
                    border-color: @blue;
                }

                &:after {
                    background-color: @blue;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @blue;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @blue;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @blue;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @blue;
                }
            }
        }
    }

    &.colored-primary {
        ~ .text {
            &:after {
                border-color: @primary;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @primary;
                    border-color: @primary;
                }

                &:after {
                    background-color: @primary;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @primary;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @primary;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @primary;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @primary;
                }
            }
        }
    }

    &.colored-danger {
        ~ .text {
            &:after {
                border-color: @danger;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @danger;
                    border-color: @danger;
                }

                &:after {
                    background-color: @danger;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @danger;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @danger;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @danger;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @danger;
                }
            }
        }
    }

    &.colored-success {
        ~ .text {
            &:after {
                border-color: @success;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @success;
                    border-color: @success;
                }

                &:after {
                    background-color: @success;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @success;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @success;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @success;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @success;
                }
            }
        }
    }

    &.colored-warning {
        ~ .text {
            &:after {
                border-color: @warning;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @warning;
                    border-color: @warning;
                }

                &:after {
                    background-color: @warning;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @warning;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @warning;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @warning;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @warning;
                }
            }
        }
    }

    &.colored-silver {
        ~ .text {
            &:after {
                border-color: @warning;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @warning;
                    border-color: @warning;
                }

                &:after {
                    background-color: @warning;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @warning;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @warning;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @warning;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @warning;
                }
            }
        }
    }

    &.colored-blueberry {
        ~ .text {
            &:after {
                border-color: @blueberry;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @blueberry;
                    border-color: @blueberry;
                }

                &:after {
                    background-color: @blueberry;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @blueberry;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @blueberry;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @blueberry;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @blueberry;
                }
            }
        }
    }

    &.colored-palegreen {
        ~ .text {
            &:after {
                border-color: @palegreen;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @palegreen;
                    border-color: @palegreen;
                }

                &:after {
                    background-color: @palegreen;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @palegreen;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @palegreen;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @palegreen;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @palegreen;
                }
            }
        }
    }

    &.colored-orange {
        ~ .text {
            &:after {
                border-color: @orange;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @orange;
                    border-color: @orange;
                }

                &:after {
                    background-color: @orange;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @orange;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @orange;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @orange;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @orange;
                }
            }
        }
    }

    &.colored-darkorange {
        ~ .text {
            &:after {
                border-color: @darkorange;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @darkorange;
                    border-color: @darkorange;
                }

                &:after {
                    background-color: @darkorange;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @darkorange;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @darkorange;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @darkorange;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @darkorange;
                }
            }
        }
    }

    &.colored-magenta {
        ~ .text {
            &:after {
                border-color: @magenta;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @magenta;
                    border-color: @magenta;
                }

                &:after {
                    background-color: @magenta;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @magenta;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @magenta;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @magenta;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @magenta;
                }
            }
        }
    }

    &.colored-purple {
        ~ .text {
            &:after {
                border-color: @purple;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @purple;
                    border-color: @purple;
                }

                &:after {
                    background-color: @purple;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @purple;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @purple;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @purple;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @purple;
                }
            }
        }
    }

    &.colored-maroon {
        ~ .text {
            &:after {
                border-color: @maroon;
            }
        }

        &:checked {
            ~ .text {
                &:before {
                    background-color: @maroon;
                    border-color: @maroon;
                }

                &:after {
                    background-color: @maroon;
                    border-color: @white;
                }
            }
        }

        &.slider-icon {
            &:checked {
                ~ .text {
                    &:after {
                        background-color: @white;
                        color: @maroon;
                    }
                }
            }

            ~ .text {
                &:after {
                    border-color: @white;
                    color: @maroon;
                }
            }
        }

        &.toggle {
            &:checked {
                ~ .text {
                    &:after {
                        color: @maroon;
                        background-color: @white;
                    }
                }
            }

            ~ .text {
                &:after {
                    background-color: @maroon;
                }
            }
        }
    }
}
/*#endregion Switches*/