/* 1. Für Chrome, Edge, Safari und Opera */
#volumeSliderQ::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #A85333;
	cursor: pointer;
	transition: transform 0.1s ease;
}

#volumeSliderQ::-webkit-slider-thumb:active {
	transform: scale(1.2);
}

/* 2. Für Mozilla Firefox */
#volumeSliderQ::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background: #A85333;
	cursor: pointer;
	transition: transform 0.1s ease;
}

#volumeSliderQ::-moz-range-thumb:active {
	transform: scale(1.2);
}
	
/* 1. Für Chrome, Edge, Safari und Opera */
#volumeSliderS::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #336B34;
	cursor: pointer;
	transition: transform 0.1s ease;
}

#volumeSliderS::-webkit-slider-thumb:active {
	transform: scale(1.2);
}

/* 2. Für Mozilla Firefox */
#volumeSliderS::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border: none;
	border-radius: 50%;
	background: #336B34;
	cursor: pointer;
	transition: transform 0.1s ease;
}

#volumeSliderS::-moz-range-thumb:active {
	transform: scale(1.2);
}	
	
.mute {
	background: none; 
	border: none; 
	font-size: 20px; 
	cursor: pointer; 
	padding: 0; 
	user-select: none;
}
	
.muteQ {
	background: none; 
	border: none; 
	font-size: 16px; 
	cursor: pointer; 
	padding: 0; 
	user-select: none;
}


.volume {
	cursor: pointer; 
	accent-color: #A85333; 
	vertical-align: middle; 
	-webkit-appearance: none; 
	background: #ddd; 
	height: 4px; 
	border-radius: 2px;
}

.control {
	display: flex; 
	align-items: center; 
    text-align: center;
	gap: 5px; 
	font-family: sans-serif; 
	margin-bottom: 5px;
}