:root{ 
	--range-gradient-color-1 : hsl(219, 73%, 65%);
	--range-gradient-color-2 : hsl(283, 100%, 69%);
	--range-gradient-color-mix : color-mix(in hsl, var(--range-gradient-color-1), var(--range-gradient-color-2));
	--range-spring-duration : 1.5s;
	--range-spring-easing : linear( 0, 0.576 4%, 0.79, 0.964, 1.102, 1.205, 1.275 13.6%, 1.298, 1.313, 1.32, 1.32, 1.313 19.3%, 1.299 20.7%, 1.256 23.4%, 1.111 30.5%, 1.047 34.2%, 1.018, 0.996, 0.979, 0.968 42.9%, 0.961 46.1%, 0.962 49.7%, 0.994 63.9%, 1.004 72%, 1.005 79.2%, 1 );
	--range-font-color : var(--range-gradient-color-1);
	--range-shadow-color :0deg 0% 0%;
	--range-shadow-handle : 0px 0.4px 0.4px hsl(var(--range-shadow-color) / 0.1), 0px 0.8px 0.8px -0.8px hsl(var(--range-shadow-color) / 0.09), 0px 1.6px 1.7px -1.5px hsl(var(--range-shadow-color) / 0.08), 0px 3.5px 3.6px -2.3px hsl(var(--range-shadow-color) / 0.08), 0px 6.9px 7.2px -3px hsl(var(--range-shadow-color) / 0.07);
}
/*
.range-item { padding:3rem 0 3rem 1rem;}
*/
.range-item {margin-top: 2.3rem;}
#PriceGradient { /*height: 14px;*/}
.rangeSlider { height:.75rem; background-color:#555; box-shadow:inset 3px 3px 3px 2px #00000069;}
.rangeSlider .rangeBar { height: 100%; background: linear-gradient(90deg in oklch, var(--range-gradient-color-1), var(--range-gradient-color-2)); }
.rangeSlider .rangeHandle[data-handle="1"] { --range-font-color: var(--range-gradient-color-2); }
.rangeSlider .rangeHandle { width:2.5rem; height:2.5rem; top:calc(50% - 1px); border-radius: 50%; background: white; border:2px solid var(--range-font-color); box-shadow: var(--range-shadow-handle); perspective: 500px;}
.rangeSlider .rangeNub { display: none; }
.rangeSlider .rangeHandle .rangeFloat { border-radius:.5rem; padding:.25rem .75rem .3rem; background:white; color:black; font-weight:bold; border:2px solid var(--range-font-color); translate:-50% 0% 0.01px !important; transform-origin:bottom center; opacity:0; transform:translate(0%, -20%) rotateX(100deg) scaleY(0.75); transition: all var(--range-spring-easing) var(--range-spring-duration); opacity: 1; transform: translate(0%, 85%) rotateX(0deg); cursor:pointer; }
.rangeSlider .rangeBar .rangeFloat { opacity:1; bottom:-4.5rem}
.rangeSlider.rsHoverable .rangeBar:hover .rangeFloat, .rangeSlider.rsFocus .rangeBar .rangeFloat { translate:-50% -50% 0.01px; }
.rangeSlider.rsFocus .rangeHandle .rangeFloat, 
.rangeSlider.rsHoverable .rangeHandle:hover .rangeFloat, 
.rangeSlider.rsHoverable:hover .rangeHandle .rangeFloat { opacity:1; transform:translate(0%, 85%) rotateX(0deg);}

.rangeSlider .rangeHandle.rsActive .rangeFloat, .rangeSlider.rsHoverable .rangeHandle:hover .rangeFloat{
--float-x: calc((var(--handle-pos) * -0.6% - 20%)); /* offset the float horizontally */
  --float-y: -20%; /* offset the float vertically */
  
  /* keep the float inside the container by shifting it 
     based on handle's position */
  translate: var(--float-x) var(--float-y) 0.01px;
  }

.rangeSlider .rangeHandle .rangeFloat:after { content: ''; position: absolute; bottom:-1px; left:50%; width:7px; height:7px; background:white; transform:translate(-50%, 50%) rotate(45deg); border-right: 2px solid var(--range-font-color); border-bottom: 2px solid var(--range-font-color); }
.rangeSlider.up .rangeHandle.rsActive .rangeFloat { rotate: 0 0 1 -15deg; transform: translate(-15%, 85%) rotateX(0deg);}
.rangeSlider.down .rangeHandle.rsActive .rangeFloat { rotate: 0 0 1 15deg; transform: translate(15%, 85%) rotateX(0deg);}
.rangeSlider .rsPip { height: 2px; width: 2px; border-radius: 2px; box-shadow:0 0 0px 1px transparent, 0 0 5px transparent, 0 0 2px transparent; transition: all 0.2s ease-in-out;}
.rangeSlider.rsFocus .rsPip.rsInRange { background: white; box-shadow:0 0 0px 1px var(--range-gradient-color-mix), 0 0 5px var(--range-gradient-color-mix), 0 0 2px var(--range-gradient-color-mix); }

.rangeSlider.rsRange { margin-bottom:1.25em; margin-top:1.75rem; }
.rangeSlider.rsPipLabels  {margin-bottom:3.8em; }
.rangeSlider .rangeHandle { width:2.5rem; height:2.5rem; cursor:pointer;}
.rangeSlider .rangeFloat { bottom:2.75rem;}
.rangePips .rsPip { top:.4em; height:.3rem; }
.rangePips .rsPip.rsSelected { height:.5rem; }
.rangePips .rsPip.rsSelected .rsPipVal {top:0.4em;}

.rangeSlider { pointer-events:none; }
.rangeHandle { pointer-events:auto; touch-action:none; }