@import url("../fontawesome6/css/all.css");

*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
a,a:hover,a:visited{color:#ddd;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}

/* HTML5 Audio Player with Playlist */
#simp button,#simp input,#simp img{border:0;}
#simp{
	max-width:420px;
	font-size:12px;
	font-family:"Segoe UI", Tahoma, sans-serif;
	
	color:#999999;
		
}
#simp .simp-album{
	padding-top: 20px;
	padding-right: 15px;
}
#simp .simp-album .simp-cover{
	margin-top: 20px;
	margin-bottom: 32px;

}
#simp .simp-album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
#simp .simp-album .simp-title{
	font-size:100%;
	font-weight:bold;
	color: #FFFFFF;
	padding-bottom: 4px;
}

#simp .simp-controls{
	padding-top: 10px;
	padding-bottom: 10px;
}
#simp .simp-controls button{
	font-size:120%;
	width:24px;
	height:24px;
	background:none;
	color:#ddd;
	cursor:pointer;
	margin-right: 10px;

}
#simp .simp-controls button[disabled]{color:#636469;cursor:initial;}
#simp .simp-controls button:not([disabled]):hover{color:#0000FF;}
#simp .simp-controls .simp-prev,#simp .simp-controls .simp-next{font-size:100%;}
#simp .simp-controls .simp-tracker,#simp .simp-controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .simp-controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .simp-controls .simp-time,#simp .simp-controls .simp-others{
	margin-left:10px;
	color: #FFFFFF;
}
#simp .simp-controls .simp-volume{max-width:110px;}
#simp .simp-controls .simp-volume .simp-mute{margin-right:5px;}
#simp .simp-controls .simp-others .simp-active{
	color: #01afef;
	background-color: none;
	border-radius: 100px;
	
}

#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:2px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:2px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;}
#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;}
#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#simp .simp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:8px;width:8px;margin-top:-3.5px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:8px;width:8px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}

#simp .simp-display{transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{
	padding:0;
	margin-top: 20px;
	max-width:308px;
}
#simp ul li{
	white-space:nowrap;
	display:block;	
	cursor:pointer;
	padding-top: 7px;
	padding-bottom: 8px;
}
#simp ul li:last-child{padding-bottom:13px;}

#simp ul li:hover{
	color: #FFFFFF;
}
#simp ul li.simp-active{
	visibility: hidden;
}
#simp ul li .simp-desc{
	font-size:90%;
	opacity:.5;
	margin-left:5px;
	visibility: hidden;
}

/* progress animation */
@-webkit-keyframes audio-progress{to{background-position:5px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
/* mobile */
@media screen and (max-width:480px) {
#simp .simp-controls .simp-volume,#simp .simp-controls .simp-others{display:none;}
#simp .simp-controls .simp-time{margin-right:10px;}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}