.player {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 300px;
	height: 80px;
	z-index: 1000;
    border: 3px solid rgb(240, 156, 51);
    border-radius: 15px;
	
	.info {
		position: absolute;
		height: 60px;
		top: 0;
		opacity: 0;
		left: 10px;
		right: 10px;
		background-color: rgba(255, 255, 255, 0.5);
		padding: 5px 15px 5px 110px;
		border-radius: 15px;
		transition: all .5s ease;

		.artist,
		.name {
			display: block;
		}

		.artist {
			color: rgb(240, 156, 51);
			font-size: 16px;
			margin-bottom: 5px;
		}

		.name {
			color: rgb(240, 156, 51);
			font-size: 12px;
			margin-bottom: 8px;
		}

		.progress-bar {
			background-color: rgb(240, 156, 51);
			height: 2px;
			width: 100%;
			position: relative;

			.bar {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				background-color: red;
				width: 10%;
				transition: all .2s ease;
			}
		}
		&.active {
			top: -60px;
			opacity: 1;
			transition: all .5s ease;
		}
	}
	
	.control-panel {
		position: relative;
		background-color: #000000;
		border-radius: 15px;
		width: 300px;
		height: 80px;
		z-index: 5;
		box-shadow: 0px 20px 20px 5px rgba(132, 132, 132, 0.3);
		
		.album-art {
			position: absolute;
			left: 15px; /* Ajustez la position selon vos besoins */
			top: 10px;
			height: 60px; /* Taille du disque */
			width: 60px; /* Taille du disque */
			border-radius: 50%;
			background-color: #ffffff; /* Couleur de fond pour le disque */
			background-image: url('https://i.scdn.co/image/9dcbd30dbe0c621cbaeae427cf80eff9877b4fcd'); /* Remplacez par l'image que vous souhaitez afficher */
			background-size: cover;
			background-position: center;
			box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.2); /* Ombre pour le disque */
		}
		
		.controls {
			display: flex;
			justify-content: flex-end;
			height: 80px;
			padding: 0 15px;
			
			.prev, 
			.play, 
			.next {
				width: 55px;
				height: auto;
				border-radius: 10px;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 20px;
				margin: 5px 0;
				background-color: #000000;
				cursor: pointer;
				transition: background-color .3s ease;
			}
			
			.prev:hover, 
			.play:hover, 
			.next:hover {
				background-color: rgb(240, 156, 51);
				transition: background-color .3s ease;
			}
			
			.prev {
				background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC40ODggMjUwLjQ4OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjQ4OCAyNTAuNDg4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4Ij4KPGcgaWQ9IlByZXZpb3VzX3RyYWNrIj4KCTxwYXRoIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDsiIGQ9Ik0yMzcuNDg0LDIyLjU4N2MtMy4yNjYsMC03LjU5MS0wLjQwMS0xMS4wNzIsMi4wMDVsLTkyLjI2NCw3Ny45MVYzNy4yNTIgICBjMC0yLjUwNywwLjA1Ny0xNC42NjYtMTMuMDA0LTE0LjY2NmMtMy4yNjUsMC03LjU5LTAuNDAxLTExLjA3MiwyLjAwNUw4LjEwNywxMTAuNjkzYy05LjY2OSw2LjY3NC03Ljk5NywxNC41NTEtNy45OTcsMTQuNTUxICAgcy0xLjY3MSw3Ljg3OCw3Ljk5NywxNC41NTFsMTAxLjk2NSw4Ni4xMDJjMy40ODIsMi40MDUsNy44MDcsMi4wMDQsMTEuMDcyLDIuMDA0YzEzLjA2MiwwLDEzLjAwNC0xMS43LDEzLjAwNC0xNC42NjZ2LTY1LjI0OSAgIGw5Mi4yNjQsNzcuOTExYzMuNDgyLDIuNDA1LDcuODA3LDIuMDA0LDExLjA3MiwyLjAwNGMxMy4wNjIsMCwxMy4wMDQtMTEuNzEyLDEzLjAwNC0xNC42Njd6IiBzdHJva2U9InJnYmEiIHN0cm9rZS13aWR0aD0iMTYiIHN0cm9rZS1kYXRhLXJlbm93Ij4KPC9wYXRoPgo8L2c+Cjwvc3ZnPgo=);
			}
			
			.play {
				background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij4KPHBhdGggZD0iTTEyOCAwIEM1Mi44MTIgMCAxMCA1Mi44MTIgMCAxMi44MTIgMTI4IEMxNTQuNzQyIDAgMTI4IDE1NC43NDIgMTI4IDEyOCAiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1jb2xvcj0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0ibm9uZSIvPjwvc3ZnPgo=);
			}
			
			.next {
				background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4Ij4KPHBhdGggZD0iTTEyOCAwIEM1Mi44MTIgMCAxMCA1Mi44MTIgMCAxMi44MTIgMTI4IEMxNTQuNzQyIDAgMTI4IDE1NC43NDIgMTI4IDEyOCAiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1jb2xvcj0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0ibm9uZSIvPjwvc3ZnPgo=);
			}
		}
	}
}


.volume-control {
    display: flex;
    align-items: center;
    margin-left: 10px;
	position: relative;
	top: -14px;
	left: 100px;
}

.volume-slider {
    -webkit-appearance: none;
    width: 150px; /* Ajustez la largeur du slider ici */
    height: 8px;
    background: rgb(240, 156, 51); /* Couleur de la barre du slider */
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    margin-left: 10px;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #fff; /* Couleur du curseur */
    border-radius: 50%;
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #fff; /* Couleur du curseur */
    border-radius: 50%;
    cursor: pointer;
}