range-slider {
    --element-height: 24px;
    --track-height: 6px;
    --thumb-size: 20px;
    position: relative;
    display: flex;
    align-items: center;
    height: var(--element-height);
    width: 100%;
    min-width: 130px;
    margin: 2px;
    overflow: visible;
    cursor: pointer;
    touch-action: none
}

range-slider:focus {
    outline: 0
}

range-slider[disabled] {
    filter: grayscale(1);
    opacity: .8
}

range-slider:before {
    content: "";
    display: block;
    width: 100%;
    height: var(--track-height);
    border-radius: calc(var(--track-height)/2);
    background: linear-gradient(#F07C41, #F07C41) 0/var(--value-percent, 0) 100% no-repeat rgba(255, 255, 255,50%)
}

range-slider.touch-active .thumb-wrapper .thumb {
    box-shadow: none;
    transform: scale(1.1)
}

.thumb {
    background: url("/assets/images/payment/slider-thumb.svg") center no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: calc(var(--element-height)/2 - var(--thumb-size)/2);
    left: var(--value-percent, 0);
    margin-left: calc(var(--thumb-size)/4*-2);
    /* margin-left: calc(var(--thumb-size)/2*-2); */
    transition: transform .2s ease;
    will-change: transform;
    pointer-events: none;
}

.thumb-wrapper {
    position: absolute;
    left: calc(var(--thumb-size)/2);
    right: calc(var(--thumb-size)/2);
    bottom: 0;
    height: 0;
    overflow: visible
}

/*# sourceMappingURL=/styles.css.map */