@charset "UTF-8";
.switch-columns {
    display: flex;
    align-items: center;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    overflow: hidden;
    padding: 4px;
}
.switch-columns > li {
    list-style: none;
    flex: 1;
}
.switch-columns > li > button {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    line-height: normal;
    padding: 4px 2px;
    text-align: center;
    width: 100%;
    outline: none;
    border: none;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out
}
.switch-columns > li > button.active {
    background-color: #f5903f;
    color: #fff;
    
}
/*New End*/
.switch-toggle a {
    display: none
}
@media only screen {
    .switch-toggle {
        position: relative;
        display: block;
        padding: 0 !important
    }

        .switch-toggle::after {
            clear: both;
            content: "";
            display: table
        }

        .switch-toggle *,
        .switch-toggle:after,
        .switch-toggle:before {
            box-sizing: border-box
        }

        .switch-toggle label,
        .switch-toggle > span {
            line-height: 2em;
            vertical-align: middle
        }

        .switch-toggle input:focus + label,
        .switch-toggle input:focus ~ span a {
            outline: Highlight solid 2px
        }

        .switch-material.switch-light,
        .switch-toggle.switch-material {
            overflow: visible
        }

        .switch-toggle input {
            position: absolute;
            left: 0;
            opacity: 0
        }

            .switch-toggle input + label {
                position: relative;
                z-index: 2;
                display: block;
                float: left;
                padding: 0 .5em;
                margin: 0;
                text-align: center
            }

        .switch-toggle a {
            display: block;
            -webkit-transition: all .2s ease-out;
            -moz-transition: all .2s ease-out;
            transition: all .2s ease-out;
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            z-index: 1;
            width: 10px;
            height: 100%
        }

        .switch-toggle label:nth-child(2):nth-last-child(4),
        .switch-toggle label:nth-child(2):nth-last-child(4) ~ a,
        .switch-toggle label:nth-child(2):nth-last-child(4) ~ label {
            width: 50%
        }

            .switch-toggle label:nth-child(2):nth-last-child(4) ~ input:checked:nth-child(3) + label ~ a {
                left: 50%
            }

        .switch-toggle label:nth-child(2):nth-last-child(6),
        .switch-toggle label:nth-child(2):nth-last-child(6) ~ a,
        .switch-toggle label:nth-child(2):nth-last-child(6) ~ label {
            width: 33.33%
        }

            .switch-toggle label:nth-child(2):nth-last-child(6) ~ input:checked:nth-child(3) + label ~ a {
                left: 33.33%
            }

            .switch-toggle label:nth-child(2):nth-last-child(6) ~ input:checked:nth-child(5) + label ~ a {
                left: 66.66%
            }

        .switch-toggle label:nth-child(2):nth-last-child(8),
        .switch-toggle label:nth-child(2):nth-last-child(8) ~ a,
        .switch-toggle label:nth-child(2):nth-last-child(8) ~ label {
            width: 25%
        }

            .switch-toggle label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(3) + label ~ a {
                left: 25%
            }

            .switch-toggle label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(5) + label ~ a {
                left: 50%
            }

            .switch-toggle label:nth-child(2):nth-last-child(8) ~ input:checked:nth-child(7) + label ~ a {
                left: 75%
            }

        .switch-toggle label:nth-child(2):nth-last-child(10),
        .switch-toggle label:nth-child(2):nth-last-child(10) ~ a,
        .switch-toggle label:nth-child(2):nth-last-child(10) ~ label {
            width: 20%
        }

            .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(3) + label ~ a {
                left: 20%
            }

            .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(5) + label ~ a {
                left: 40%
            }

            .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(7) + label ~ a {
                left: 60%
            }

            .switch-toggle label:nth-child(2):nth-last-child(10) ~ input:checked:nth-child(9) + label ~ a {
                left: 80%
            }

        .switch-toggle label:nth-child(2):nth-last-child(12),
        .switch-toggle label:nth-child(2):nth-last-child(12) ~ a,
        .switch-toggle label:nth-child(2):nth-last-child(12) ~ label {
            width: 16.6%
        }

            .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(3) + label ~ a {
                left: 16.6%
            }

            .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(5) + label ~ a {
                left: 33.2%
            }

            .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(7) + label ~ a {
                left: 49.8%
            }

            .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(9) + label ~ a {
                left: 66.4%
            }

            .switch-toggle label:nth-child(2):nth-last-child(12) ~ input:checked:nth-child(11) + label ~ a {
                left: 83%
            }

        .switch-toggle.switch-candy {
            background-color: #2d3035;
            border-radius: 3px;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .2)
        }

            .switch-toggle.switch-candy label {
                color: #fff;
                font-weight: 700;
                text-align: center;
                text-shadow: 1px 1px 1px #191b1e
            }

        .switch-toggle.switch-material::after {
            clear: both;
            content: "";
            display: table
        }

    @-webkit-keyframes materialRipple {
        0% {
            -webkit-transform: scale(0)
        }

        20% {
            -webkit-transform: scale(1)
        }

        100% {
            opacity: 0;
            -webkit-transform: scale(1)
        }
    }

    @-moz-keyframes materialRipple {
        0% {
            -moz-transform: scale(0)
        }

        20% {
            -moz-transform: scale(1)
        }

        100% {
            opacity: 0;
            -moz-transform: scale(1)
        }
    }

    @keyframes materialRipple {
        0% {
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            -ms-transform: scale(0);
            -o-transform: scale(0);
            transform: scale(0)
        }

        20% {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1)
        }

        100% {
            opacity: 0;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1)
        }
    }
}
@media only screen and (-webkit-min-device-pixel-ratio:0) {
    .switch-toggle input:focus+label,
    .switch-toggle input:focus~span a {
        outline-color: -webkit-focus-ring-color;
        outline-style: auto
    }
}

@media only screen and (-webkit-max-device-pixel-ratio:2) and (max-device-width:80em) {
    .switch-toggle {
        -webkit-animation: webkitSiblingBugfix infinite 1s
    }
}

@-webkit-keyframes webkitSiblingBugfix {
    from, to {
        -webkit-transform: translate3d(0, 0, 0)
    }
}