/* Minification failed. Returning unminified contents.
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,33): run-time error CSS1039: Token not allowed after unary operator: '-a'
(26,44): run-time error CSS1039: Token not allowed after unary operator: '-min'
(26,56): run-time error CSS1039: Token not allowed after unary operator: '-dif'
(27,27): run-time error CSS1039: Token not allowed after unary operator: '-b'
(27,38): run-time error CSS1039: Token not allowed after unary operator: '-a'
(27,48): run-time error CSS1039: Token not allowed after unary operator: '-dif'
(31,33): run-time error CSS1039: Token not allowed after unary operator: '-b'
(31,44): run-time error CSS1039: Token not allowed after unary operator: '-min'
(31,56): run-time error CSS1039: Token not allowed after unary operator: '-dif'
(32,27): run-time error CSS1039: Token not allowed after unary operator: '-a'
(32,38): run-time error CSS1039: Token not allowed after unary operator: '-b'
(32,48): run-time error CSS1039: Token not allowed after unary operator: '-dif'
 */

.MultiRangeSlider {
}

.MultiRangeSlider-inner {
    display: grid;
    height: 1em;
    grid-template-rows: max-content 1em;
    position: relative;
    background-color: transparent;
    border: 1px solid darkgrey;
    border-radius: 5px;
    --dif: calc(var(--max) - var(--min));
}

    .MultiRangeSlider-inner::before, .MultiRangeSlider-inner::after {
        grid-column: 1;
        grid-row: 1;
        height: 1em;
        background: lightgrey;
        border-bottom: 1px solid darkgrey;
        content: '';
    }

    .MultiRangeSlider-inner::before {
        margin-left: calc((var(--a) - var(--min))/var(--dif)*100%);
        width: calc((var(--b) - var(--a))/var(--dif)*100%)
    }

    .MultiRangeSlider-inner::after {
        margin-left: calc((var(--b) - var(--min))/var(--dif)*100%);
        width: calc((var(--a) - var(--b))/var(--dif)*100%)
    }

.MultiRangeSlider-Label-SR {
    position: absolute;
    clip-path: inset(50%);
    height: 1px;
}

.MultiRangeSlider-Label {
    margin-bottom: 1em;
}

.MultiRangeSlider-Input {
    -webkit-appearance: none;
    grid-column: 1;
    grid-row: 1;
    background: none; /* get rid of white Chrome background */
    color: #000;
    font: inherit; /* fix too small font-size in both Chrome & Firefox */
    margin: 0;
    margin-left: -2px;
    margin-right: -2px;
    pointer-events: none; /* let clicks pass through */
}


    /* Special styling for WebKit/Blink */
    .MultiRangeSlider-Input::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 1px solid lightgrey;
        height: 1.5em;
        width: 1.5em;
        margin-top: -0.25em;
        border-radius: 20%;
        background-color: rgb(230,230,230);
        cursor: pointer;
        pointer-events: auto; /* let clicks pass through */
    }

.MultiRangeSlider-Input-Left::-webkit-slider-thumb {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10'%3E%3Cpath fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linejoin='round' d='M1 1l5 4.125L1 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 0.55rem;
}

.MultiRangeSlider-Input-Right::-webkit-slider-thumb {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10'%3E%3Cpath fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linejoin='round' d='M6 1L1 5.125 6 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 0.55rem;
}

    .MultiRangeSlider-Input:focus::-webkit-slider-thumb {
        
        border: 1px solid darkgrey;
        background-color: rgb(200,200,200);
    }

    .MultiRangeSlider-Input:hover::-webkit-slider-thumb {
        
        border: 1px solid darkgrey;
        background-color: rgb(200,200,200);
    }

    /* All the same stuff for Firefox */
    .MultiRangeSlider-Input::-moz-range-thumb {
        border: 1px solid lightgrey;
        height: 1.5em;
        width: 1.5em;
        margin-top: -0.5em;
        border-radius: 20%;
        background-color: rgb(230,230,230);
        cursor: pointer;
        pointer-events: auto; /* let clicks pass through */
    }

/* All the same stuff for Firefox */
.MultiRangeSlider-Input-Left::-moz-range-thumb {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10'%3E%3Cpath fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linejoin='round' d='M1 1l5 4.125L1 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 0.55rem;
}

/* All the same stuff for Firefox */
.MultiRangeSlider-Input-Right::-moz-range-thumb {    
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10'%3E%3Cpath fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linejoin='round' d='M6 1L1 5.125 6 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 0.55rem;
}

    .MultiRangeSlider-Input:focus::-moz-range-thumb {
        
        border: 1px solid darkgrey;
        background-color: rgb(200,200,200);
    }

    .MultiRangeSlider-Input:hover::-moz-range-thumb {
        
        border: 1px solid darkgrey;
        background-color: rgb(200,200,200);
    }

    .MultiRangeSlider-Input::-webkit-slider-runnable-track {
        width: 100%;
        height: 100%;
        background: none;
        border: none;
    }

    .MultiRangeSlider-Input:focus::-webkit-slider-runnable-track {
        background: none;
    }

    .MultiRangeSlider-Input::-moz-range-track {
        width: 100%;
        height: 100%;
        background: none;
    }

.floater {
    padding: 5px;
}