/* Range Selection Slider */
/* Pairs with js_range_slider.js and in_range_slider.php */
.slider-container {
	position: relative;
	width:calc(100% - (var(--margin-m) * 2));
    height: 60px;
    margin:0px var(--margin-m);
}
    
    .slider-track {
	    position: absolute;
	    top: 50%;
	    left: 0;
	    width: 100%;
	    height: 8px;
	    background:var(--color-light);
	    box-shadow:inset 1px 1px 2px rgb(0,0,0,.2);
	    transform: translateY(-50%);
        border-radius:10px;
        z-index:1;
    }
        
	.slider-range {
		position: absolute;
		height: 8px;
		background:var(--color-purple);
		transform: translateY(-50%);
		top: 50%;
		z-index:2;
	}
	
	.slider-handle {
		position: absolute;
		width: 36px;
		height: 36px;
		background:var(--color-purple);
		border-radius:var(--radius-tight);
		top: 50%;
		transform: translate(-50%, -50%);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		color:white;
		font-size: 12px;
		font-weight: 700;
		z-index:3;
	}
		
	.slider-labels {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		top:3px;
		color:var(--color-dark);
	}