/* Range Selection Slider */
.slider-container {
	position: relative;
	width:calc(100% - (var(--margin-m) * 2));
    height: 60px;
    margin:0px var(--margin-m) var(--margin-l) 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);
		}