/*
AUTHOR: Osvaldas Valutis
https://osvaldas.info/audio-player-responsive-and-touch-friendly
https://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/
Modified by TES
*/

/*:root{
 	--audio-sklaer:#ffc0c0;
	--audio-etre:#ff0088;
	--audio-tenval:#800080;
}*/
:root{
 	--audio-sklaer:rgb(220,220,255);
	--audio-etre:rgb(128,128,255);
	--audio-tenval:rgb(0,0,192);
}

.audioplayer{font-family:monospace;font-size:80%;height:2.5em;position:relative;z-index:1;}
	.audioplayer-mini{width:2.5em;margin:0 auto;}
	.audioplayer > div{position:absolute;}
	.audioplayer-playpause{background-color:var(--audio-etre);border-radius:1.25em;cursor:pointer;height:100%;left:0;text-align:left;text-indent:-9999px;top:0;width:2.5em;z-index:2;}
		.audioplayer-mini .audioplayer-playpause{width:100%;}
		.audioplayer-playpause:hover,.audioplayer-playpause:focus{background-color:var(--audio-tenval);}
		.audioplayer-playpause a{display:block;}
		.audioplayer:not(.audioplayer-playing) .audioplayer-playpause a{border:0.5em solid transparent;border-left-color:white;border-right:none;content:'';height:0;left:50%;margin:-0.5em 0 0 -0.25em;position:absolute;top:50%;width:0;}
		.audioplayer-playing .audioplayer-playpause a{height:0.75em;left:50%;margin:-0.375em 0 0 -0.375em;position:absolute;top:50%;width:0.75em;}
			.audioplayer-playing .audioplayer-playpause a:before,.audioplayer-playing .audioplayer-playpause a:after{background-color:#fff;content:'';height:100%;position:absolute;top:0;width:40%;}
			.audioplayer-playing .audioplayer-playpause a:before{left:0;}
			.audioplayer-playing .audioplayer-playpause a:after{right:0;}
	.audioplayer-time{height:100%;line-height:2.375em;text-align:center;top:0;width:4.375em;z-index:2;}
		.audioplayer-time-current{left:2.5em;}
		.audioplayer-time-duration{right:2.5em;}
			.audioplayer-novolume .audioplayer-time-duration{border-right:0;right:0;}
	.audioplayer-bar{background-color:var(--audio-sklaer);cursor:pointer;height:0.875em;left:6.875em;margin-top:-0.438em;top:50%;right:6.875em;z-index:1;}
		.audioplayer-novolume .audioplayer-bar{right:4.375em;}
		.audioplayer-bar div{height:100%;left:0;position:absolute;top:0;width:0;}
		.audioplayer-bar-loaded{background-color:var(--audio-etre);z-index:1;}
		.audioplayer-bar-played{background:var(--audio-tenval);z-index:2;}
	.audioplayer-volume{background-color:var(--audio-etre);border-radius:1.25em;cursor:pointer;height:100%;right:0;text-align:left;text-indent:-9999px;top:0;width:2.5em;z-index:2;}
		.audioplayer-volume:hover,.audioplayer-volume:focus{background-color:var(--audio-tenval);border-radius:0 0 1.25em 1.25em;}
		.audioplayer-volume-button{height:100%;width:100%;}
			.audioplayer-volume-button a{background-color:white;display:block;height:0.375em;left:35%;position:relative;top:40%;width:0.313em;z-index:1;}
				.audioplayer-volume-button a:before,.audioplayer-volume-button a:after{content: '';position: absolute;}
				.audioplayer-volume-button a:before{border:0.5em solid transparent;border-left:none;border-right-color:white;height:0;margin-top:-0.5em;right:-0.25em;top:50%;width:0;z-index:2;}
				/* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
				.audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after{border:0.25em double white;border-radius:0 0.938em 0 0;border-width:0.25em 0.25em 0 0;height:0.313em;left:0.563em;top:-0.063em;transform:rotate(45deg);width:0.313em;}
		.audioplayer-volume-adjust{background:var(--audio-tenval);cursor:default;height:6.25em;left:0;position:absolute;right:-1px;top:-9999px;}
			.audioplayer-volume:not(:hover) .audioplayer-volume-adjust{opacity:0;}
			.audioplayer-volume:hover .audioplayer-volume-adjust{bottom:100%;top:auto;}
			.audioplayer-volume-adjust > div{background-color:white;cursor:pointer;height:80%;margin:30% auto 0;position:relative;width:40%;z-index:1;}
				.audioplayer-volume-adjust div div{background:var(--audio-etre);bottom:0;left:0;height:100%;position:absolute;width:100%;}
		.audioplayer-novolume .audioplayer-volume{display: none;}
	.audioplayer *,.audioplayer *:before,.audioplayer *:after{transition:color .25s ease,background-color .25s ease,border-radius .25s ease,opacity .5s ease;}