:root {
    --width: 35px;
    --height: 17px;
    --innerCircle: calc(var(--height) - 2px);
}
.multi-switch {
    display: inline-block;
    top: 5px;
    position: relative;
    width: var(--width);
    vertical-align: top;
    user-select: none;
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.multi-switch-item {
    display: grid;
    grid-template-columns: max-content 1fr;
    margin-bottom: 6px;
}

.multi-switch *{-webkit-transition:all ease 0.3s;-moz-transition:all ease 0.3s;-ms-transition:all ease 0.3s;-o-transition:all ease 0.3s;transition:all ease 0.3s}

    .multi-switch .switch-content {
        background: none;
        background-color: #D97C6F;
        height: var(--height);
        position: relative;
        cursor: pointer;
        border-radius: var(--height);
        -moz-border-radius: var(--height);
        -webkit-border-radius: var(--height);
        -ms-border-radius: var(--height);
    }

        .multi-switch .switch-content .switch-circle {
            background: #FFF;
            width: var(--innerCircle);
            height: var(--innerCircle);
            position: absolute;
            top: 1px;
            left: 0%;
            z-index: 1;
            margin-left: 1px;
            border-radius: var(--innerCircle);
            -moz-border-radius: var(--innerCircle);
            -webkit-border-radius: var(--innerCircle);
            -ms-border-radius: var(--innerCircle);
            box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
            -moz-box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
            -webkit-box-shadow: 3px 3px 0px rgba(0,0,0,0.1)
        }.multi-switch .switch-content .info-slide{position:absolute;z-index:2;width:50%;height:100%;display:block}
            .multi-switch .switch-content .info-slide.active {
                right: 0;
                border-radius: 0 var(--height) var(--height) 0;
                -moz-border-radius: 0 var(--height) var(--height) 0;
                -webkit-border-radius: 0 var(--height) var(--height) 0;
                -ms-border-radius: 0 var(--height) var(--height) 0
            }
            .multi-switch .switch-content .info-slide.disable {
                left: 0;
                border-radius: var(--height) 0 0 var(--height);
                -moz-border-radius: var(--height) 0 0 var(--height);
                -webkit-border-radius: var(--height) 0 0 var(--height);
                -ms-border-radius: var(--height) 0 0 var(--height)
            }.multi-switch .switch-content.active{background-color:#5DC177}
                .multi-switch .switch-content.active .switch-circle {
                    left: 100%;
                    margin-left: calc(var(--height) * -1)
                }.multi-switch .switch-content.disabled{background-color:#CCC;cursor:default}.multi-switch .switch-content.initial{background-color:#dddddd}
                    .multi-switch .switch-content.initial .switch-circle {
                        left: 50%;
                        margin-left: calc(var(--height) / -2)
                    }.multi-switch input{display:none}
/*# sourceMappingURL=multi-switch.min.css.map */