/*		customSlider.css	version 1		5/25/26		*/
 
 
	:root {
		--vw1600: min(100vw, 1600px);
		}
 
 
/*	======================================================	CUSTOM SLIDER ROW	=======================================================	*/
 
	.custom-slider-row {
		display:		flex;
		flex-direction:	row;
		border: 0px solid rebeccapurple;							/*	Border: Col.				rebeccapurple	1px					*/
		border-radius: 15px;										/*	Border-Radius Corners						15px				*/
		align-items:	center;
		justify-content: center;
		gap:			calc(24 * var(--vw1600) / 1600);			/*	Gap:										24px / Max			*/
		width:			100%;
		padding:		0 calc(108 * var(--vw1600) / 1600)
						8px calc(108 * var(--vw1600) / 1600);		/*	Top & Bottom Padding:						0, 12px / Max		*/
/*		padding-block:	calc(8 * var(--vw1600) / 1600);					Top & Bottom Padding:						8px / Max			*/
		box-sizing:		border-box;
		}
 
 
/*	======================================================	TOGGLE LABEL	===========================================================	*/
 
	.custom-toggle-label {
		color:			#ffff00;									/*	Yellow — Matches Nav Button Text								*/
		font-size:		calc(42 * var(--vw1600) / 1600);			/*	Font Size:									28px / Max			*/
		font-weight:	bold;
		font-style:		italic;
		cursor:			pointer;
		white-space:	nowrap;
		user-select:	none;
		min-width:		calc(96 * var(--vw1600) / 1600);			/*	Min Width:									96px / Max			*/
		text-align:		center;
		}
 
	.custom-toggle-label:hover {
		color:			#FF5733;									/*	Matches Nav Button Hover		Burnt Orange					*/
		}
 
 
/*	======================================================	TRACK	================================================================	*/
 
	.custom-slider-track {
		position:		relative;
		height:			calc(20 * var(--vw1600) / 1600);			/*	Track Height:								24px / Max			*/
		width:			calc(320 * var(--vw1600) / 1600);			/*	Track Width:								320px / Max			*/
		border-radius:	calc(10 * var(--vw1600) / 1600);			/*	Track Radius:								12px / Max			*/
		border:			calc(3.0 * var(--vw1600) / 1600)
						solid #880000;								/*	Border:							Burgundy	1.5px / Max			*/
		background:		linear-gradient(							/*	Left Side:			 Gradient -	Aqua Blue						*/
							to right,
							rgba(45, 200, 255, 1.0),				/*	Far Left						100% Aqua	 					*/
							rgba(45, 200, 255, 0.5)					/*	Far Right						50% Aqua	 					*/
						);
		box-sizing:		border-box;
		overflow:		visible;
		}
 
 
/*	======================================================	TRACK RIGHT FILL (via pseudo)	=======================================	*/
 
	.custom-slider-track::after {
		content:		'';
		position:		absolute;
		top:			0;
		bottom:			0;
		right:			0;
		width:			var(--fill-right, 80%);						/*	Controlled By JS												*/
		background:		#D7FDD5;									/*	Right Side						Mint Green						*/
		border-radius:	0 calc(6 * var(--vw1600) / 1600)
						calc(6 * var(--vw1600) / 1600) 0;			/*	Right Corners Rounded Only										*/
		pointer-events:	none;
		}
 
 
/*	======================================================	THUMB	================================================================	*/
 
	.custom-slider-thumb {
		position:		absolute;
		top:			50%;
		transform:		translateY(-50%);							/*	Vertically Centered On Track									*/
		height:			calc(64 * var(--vw1600) / 1600);			/*	Thumb Height:								28px / Max			*/
		width:			calc(24 * var(--vw1600) / 1600);			/*	Thumb Width:								14px / Max			*/
		border-radius:	calc(12 * var(--vw1600) / 1600);			/*	Thumb Radius:								4px / Max			*/
		background-color: #660000;									/*	Lt Burgundy Fill												*/
		border:			calc(2 * var(--vw1600) / 1600)
						solid #880000;								/*	Border:							Burgundy	2px / Max			*/
		box-shadow:
			0 0 0		calc(1.5 * var(--vw1600) / 1600) slateblue,
			0 0			calc(10 * var(--vw1600) / 1600) rgba(106, 90, 205, 1.0),
			0 0			calc(16 * var(--vw1600) / 1600) rgba(106, 90, 205, 0.4);	/*	Neon Glow — Slateblue		*/
		cursor:			pointer;
		box-sizing:		border-box;
		z-index:		2;
		}
 
 
/*	======================================================	THUMB TOUCH TARGET (pseudo overlay)	===================================	*/
 
	.custom-slider-thumb::before {
		content:		'';
		position:		absolute;
		top:			calc(-20 * var(--vw1600) / 1600);			/*	Extend Touch Target Up:						20px / Max			*/
		bottom:			calc(-20 * var(--vw1600) / 1600);			/*	Extend Touch Target Down:					20px / Max			*/
		left:			calc(-12 * var(--vw1600) / 1600);			/*	Extend Touch Target Left:					12px / Max			*/
		right:			calc(-12 * var(--vw1600) / 1600);			/*	Extend Touch Target Right:					12px / Max			*/
		background:		transparent;
		z-index:		3;
		}
 
 
/*	======================================================	SPEED VALUE	============================================================	*/
 
	.custom-speed-value {
		color:			#2DC8FF;									/*	Color:							UC Aqua Blue				 	*/
		font-size:		calc(42 * var(--vw1600) / 1600);			/*	Font Size:									28px / Max			*/
		font-weight:	bold;
		white-space:	nowrap;
		min-width:		calc(72 * var(--vw1600) / 1600);			/*	Min Width:									72px / Max			*/
		text-align:		left;
		}