.sliders {margin-top: 15px;}
.slider {margin-bottom: 15px;}


.sliders .slider {width:100%;}
.sliders .slide-bar label {font-size: 1.25em;}



/* .......................................................................... */
.col-custom {
	flex: 1 1 385px;
	max-width: 100%;
}
.biMaster {
	width: 385px;
	min-width: 385px;
	max-width: 385px;
}

@media (max-width: 1200px) { /* Adjust based on actual column width */
	.col-custom {
		flex: 0 0 50%; /* Two columns */
		max-width: 50%;
	}
}
@media (max-width: 1000px) { /* When each column is below 380px width */
	.col-custom {
		flex: 0 0 100%; /* One column */
		max-width: 100%;
	}
}



.biMaster .btn-group .btn.active {
	background-color: darkblue !important;
	color: white !important;
}
/* .......................................................................... */



.biMaster .audio-visualizer {
	-webkit-box-shadow: 0 0 0 1px rgba(50, 50, 150, 0.25);
	   -moz-box-shadow: 0 0 0 1px rgba(50, 50, 150, 0.25);
			box-shadow: 0 0 0 1px rgba(50, 50, 150, 0.25);
			-ms-filter: 0 0 0 1px rgba(50, 50, 150, 0.25);
				filter: 0 0 0 1px rgba(50, 50, 150, 0.25);
}



/* .......................................................................... */
#progressContainer {
	height:20px;
	z-index:1;
	position:relative;
	cursor: default;
}
#progressTimer {
	width:0%;
	height:100%;
	position:absolute;
	pointer-events: none;
}
#progressSlider {
	position:absolute;
	top:0px;
	height:20px;
	cursor: default;
	background:transparent;
}
#progressSlider::-webkit-slider-thumb {
	appearance: none;
	width: 0px;
	height: 0px;
	background: transparent;
	border: none;
	box-shadow: none;
}
#progressSlider::-moz-range-thumb {
	width: 0px;
	height: 0px;
	background: transparent;
	border: none;
}
#progressContainer .progress-marker {cursor:default !important;}
#progressContainer .progress-marker:hover {
	background-color: yellow;
	cursor: pointer;
}



#progressContainer .fixed-label {
	position: absolute;
	top: 20px; /* below the 20px progress bar */
	font-size: 0.75rem;
	background: rgba(0, 0, 0, 0.85);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 1;
	/* Add space at top for arrow */
	margin-top: 6px;
}

#progressContainer .fixed-label::before {
	content: "";
	position: absolute;
	top: -6px; /* sits above the tooltip box */
	left: 50%;
	transform: translateX(-50%);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid rgba(0, 0, 0, 0.85); /* same as tooltip bg */
}

#progressContainer .hover-label {
	position: absolute;
	top: 20px;
	font-size: 0.75rem;
	background: rgba(0,0,0,0.85);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap;
	transform: translateX(-50%);
	z-index: 1;
	display: none;
}
#progressContainer .hover-marker {
	position: absolute;
	width: 1px;
	height: 20px;
	background-color: black;
	transform: translateX(-50%);
	top: 0px;
	z-index: 99998;
	display: none;
}
#progressContainer .hover-label,
#progressContainer .hover-marker,
#progressHoverLayer {
    pointer-events: none;
}
/* .......................................................................... */



body > .container {position:relative;}
.magicPlay {
	width:350px; height:35px; display:block; background-color: aliceblue;
	position:absolute; right:10px; margin-top:-55px;
}



.slider_identifier {font-weight:600; background-color:#EEEEEE; color:#777777;
	-webkit-border-radius: 10px;
	 -khtml-border-radius: 10px;
	   -moz-border-radius: 10px;
			border-radius: 10px;

	-webkit-box-shadow: inset 0 0 0 1px rgba(50, 50, 50, 0.15);
	   -moz-box-shadow: inset 0 0 0 1px rgba(50, 50, 50, 0.15);
			box-shadow: inset 0 0 0 1px rgba(50, 50, 50, 0.15);
			-ms-filter: inset 0 0 0 1px rgba(50, 50, 50, 0.15);
				filter: inset 0 0 0 1px rgba(50, 50, 50, 0.15);
}



/* .......................................................................... */
/* Scroll to Top / Bottom Buttons                                             */
/* .......................................................................... */
#scrollButtons {
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scrollBtn {
    padding: 0;
    width: 30px;
    height: 30px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* .......................................................................... */