@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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%;}

:root {
    --base-color: transparent;
    --body-background:rgb(28,28,28);
    --text-color: #FFFFFF;
    --button-color: #FFFFFF;
    --disabled-button-color: #7D7D7D;
    --selected-text: #F8DF08;
    --track-background: rgba(0,255,243,0.6);
    --runnable-track-background:rgb(143,143,143);
    --track-pointer: white;
    --text-background: transparent;
}

/* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */
#simp button,#simp input,#simp img{border:0;}
#simp{max-width:800px;font-size:14px;font-family:"Segoe UI", Tahoma, sans-serif;text-align:initial;line-height:initial;margin:50px auto;border-radius:6px;overflow:hidden;}
#simp .simp-album{padding: 20px 25px 5px;}
#simp .simp-album .simp-cover{margin-right:20px;}
#simp .simp-album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
#simp .simp-album .simp-title{font-size:120%;font-weight:bold;}
#simp .simp-album .simp-artist{font-size:90%;color:#6c7883;}
#simp .simp-controls{padding:15px;}
#simp .simp-controls button{font-size:130%;width:32px;height:32px;background:none;color:var(--button-color);padding:7px;cursor:pointer;border:0;border-radius:3px;}
#simp .simp-controls button[disabled]{color:var(--disabled-button-color);cursor:initial;}
#simp .simp-controls button:not([disabled]):hover{background:var(--selected-text);color:#fff;}
#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;}
#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{background:var(--selected-text);color: #fff;}
#simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}

#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;margin:0;width:100%;display:block;position:relative;z-index:2;}

#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background:var(--runnable-track-background);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls input[type=range]::-moz-range-track{background:var(--runnable-track-background);height:5px;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:var(--track-pointer);height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:-300px 1px 1px 300px var(--track-background), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:var(--track-pointer);height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:-300px 1px 1px 300px var(--track-background), 0 0 0 1px rgba(47,52,61,.2);}

input.simp-progress{overflow: hidden};
#simp .simp-controls input.simp-v-slider{overflow: hidden};


#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
/*#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}*/
#simp ul{margin:5px 0 0;padding:0;list-style:none;}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size: 18px;margin:0;padding:15px 20px 15px 0px;cursor:pointer;}
#simp ul li:last-child{padding-bottom:13px;}
/*#simp ul li:nth-child(odd){background:#fff;}*********/
#simp ul li:hover{color:var(--selected-text);font-weight: bold;}
#simp ul li.simp-active span{color:var(--selected-text);font-weight: bold;}
#simp ul li .simp-desc{font-size:90%;opacity:.5;margin-left:5px;}
/* playlist scrollbar */
#simp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;}
#simp ul::-webkit-scrollbar-track{background-color:#f0f2f4;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#f0f2f4;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
.simp-playlist{padding: 0 20px;position: relative;}

/*lyric*/
.song-wrapper {
	display: flex;
	justify-content: space-between;
	align-content: center;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	background-color: var(--text-background);
}

.song-wrapper li {
	flex: 1;
}

.lyrics-bn:hover{
	color:var(--selected-text);/*#4082bc*/
	font-weight: bold;
}

.lyric-wrapper {
	position: fixed;
	background: var(--body-background);
	padding: 10px 20px;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	z-index: 100;
	transition: all 0.3s ease-in;
	-webkit-transition: all 0.3s ease-in;
  	-moz-transition: all 0.3s ease-in;
  	-o-transition: all 0.3s ease-in;
}

.lyric-container {
	width: 100%;
	height: 60vh;
    border: 1px solid rgb(133 133 133 / 50%);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 10px;
    padding: 10px 10px;
    overflow: hidden;
}

.lyric-container > a {
	color: rgba(255,255,255,0.5);
}

.lyrics-bn {
	display: inline-block;
	align-self: center;
	font-size: 18px;
	cursor: pointer;
}

.close-lyric-bn{
	display: flex;
	justify-content: flex-end;
	cursor: pointer;
}

.lyric-active {
	left: 0;
}

.lyric-active-up {
	transform: translate(0, 0);
}

.l-song {
	font-size: 25px;
	padding-bottom: 10px;
}

.l-name {
	font-size: 20px;
    line-height: 30px;
}

.l-text {
	font-size: 20px;
    line-height: 30px;
    padding-bottom: 10px;
}

.scroll-box {
	height: 90%;
    overflow: hidden;
    overflow-y: auto;
    margin-top: 20px;
    padding: 10px;
    color:white;
}

.lyric-text {
	padding-top: 40px;
}

.scroll-box::-webkit-scrollbar {
  width: 5px;
}

.scroll-box::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0.2);
}

.scroll-box::-webkit-scrollbar-thumb {
	border-radius: 30px;
  box-shadow: inset 0 0 20px var(--selected-text);
}

.button-pad {
	margin-right: 3px;
}

body {
	position: relative;
	overflow: hidden;
	color: var(--text-color);
}

body.music-background{
	background-color: var(--body-background) !important;
}

.simple-audio-player{
	min-height: 600px;
	background-color: var(--base-color);
	color: var(--text-color);
}

header.music-header{
	background-color: white !important;
}

/* progress animation */
@-webkit-keyframes audio-progress{to{background-position:25px 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;}
	.l-song {
	font-size: 20px;
	padding-bottom: 10px;
	}

	.l-name {
		font-size: 17px;
	    line-height: 25px;
	}

	.l-text {
		font-size: 15px;
	    line-height: 25px;
	    padding-bottom: 10px;
	}
	#simp ul li {
		font-size: 16px;
	}

	.lyrics-bn {
		font-size: 15px;
	}

	.lyric-text {
		padding-top: 20px;
	}
	.simp-info{
		width: 50%;
	}
}
@media screen and (max-width:370px) {
	#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
	.simp-info{
		width: 50%;
	}
}

@media (min-width: 992px) {
	.lyric-container{
		width: 60rem;
		height: 80vh;
	}
 }