.tui-slider {
	-webkit-appearance: none; /* Remove default styling */
	width: 100%;
	height: 20px;
	cursor: pointer; 
	background: url('images/bg-green-black.png') repeat center; /* Image background */
	/* background-size: cover;  Ensure the image covers the entire track */
}

/* Hide default track as we're using an image */
.tui-slider::-webkit-slider-runnable-track {
	height: 8px; /* Match height with the input */
	background: transparent; /* Make track transparent */
}

.tui-slider::-moz-range-track {
	height: 8px; /* Match height with the input */
	background: transparent; /* Make track transparent */
}

/* Style for the slider thumb */
.tui-slider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Remove default thumb styling */
	appearance: none;
	width: 16px;
	height: 16px;
	background: #007bff; /* Thumb color */
	border-radius: 50%; /* Circular thumb */
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Shadow for depth */
}

.tui-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: #007bff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.striped-list {
	list-style-type: none; /* Remove bullets */
	padding: 0; /* Remove default padding */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.yt-link {
	cursor: pointer;
	user-select: none;
	background-color: grey;
}

.yt-link:hover {
background-color: #00cc00 !important;
}

.genreMain:hover {
	cursor: pointer; 
	background-color: #00cc00 !important;
	color: #ffffff !important;
}

.striped-list li:nth-child(odd) {
	background-color: #f0f0f0; /* Light gray background for odd items */
}

.striped-list li:nth-child(even) {
	background-color: #ffffff; /* White background for even items */
	/* Optionally add more styles for even items */
}

.striped-list li:hover {
	background-color: #00cc00;
	cursor: pointer; 
}