/*Round Range Slider*/
input[type="range"] {
    --outlineWidth: 1px;
    --borderWidth: 2px;
    --height: 4px;

    --thumbSize: 14px;
    --thumbBorderSize: 2px;
    --thumbColor: #43965e;
    --thumbBorderColor: #fff;

    --progressColor: #91d8b6;

    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--height);
    border-radius: calc(var(--height));
    background: #fff;
    outline: none;
    opacity: 1;

    border: solid #fff var(--borderWidth);

    /*Shadow as outline*/
    --outlineColor: #cbcbcb;
    --outlineWidthNega: calc(var(--outlineWidth) * -1);
    box-shadow:
        var(--outlineWidthNega) 0 var(--outlineColor),
        0 var(--outlineWidthNega) var(--outlineColor),
        var(--outlineWidth) 0 var(--outlineColor),
        0 var(--outlineWidth) var(--outlineColor);

    /* background progress visual */
    background-image: linear-gradient(var(--progressColor), var(--progressColor));
    background-size: 0% 100%;
    background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumbSize);
    height: var(--thumbSize);
    border-radius: 50%;
    background: var(--thumbColor);
    cursor: pointer;

    /*original-border seems not support this*/
    border: none;

    /*Shadow as border*/
    --thumbBorderSizeNega: calc(var(--thumbBorderSize) * -1);
    box-shadow:
        var(--thumbBorderSizeNega) 0 var(--thumbBorderColor),
        0 var(--thumbBorderSizeNega) var(--thumbBorderColor),
        var(--thumbBorderSize) 0 var(--thumbBorderColor),
        0 var(--thumbBorderSize) var(--thumbBorderColor);
}

input[type="range"]::-moz-range-thumb {
    width: var(--thumbSize);
    height: var(--thumbSize);
    border-radius: 50%;
    background: var(--thumbColor);
    cursor: pointer;

    /*original-border seems not support this*/
    border: none;
    
    /*Shadow as border*/
    --thumbBorderSizeNega: calc(var(--thumbBorderSize) * -1);
    --thumbBorderSizeHalf: calc(var(--thumbBorderSize) * 0.5);
    --thumbBorderSizeHalfNega: calc(var(--thumbBorderSize) * -0.5);
    box-shadow:
        var(--thumbBorderSizeNega) 0 var(--thumbBorderColor),
        0 var(--thumbBorderSizeNega) var(--thumbBorderColor),
        var(--thumbBorderSize) 0 var(--thumbBorderColor),
        0 var(--thumbBorderSize) var(--thumbBorderColor),
        var(--thumbBorderSizeHalf) var(--thumbBorderSizeHalfNega) var(--thumbBorderColor),
        var(--thumbBorderSizeHalfNega) var(--thumbBorderSizeHalfNega) var(--thumbBorderColor),
        var(--thumbBorderSizeHalfNega) var(--thumbBorderSizeHalf) var(--thumbBorderColor),
        var(--thumbBorderSizeHalf) var(--thumbBorderSizeHalf) var(--thumbBorderColor);
}

/* For jumbo modification */

input[type="range"].jumboSlider {
    --outlineWidth: 1px;
    --borderWidth: 1.5px;
    --height: 7px;

    --thumbSize: 16.5px;
    --thumbBorderSize: 2px;
}