@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: #ff0000; 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, source: https://codepen.io/sekedus/pen/ExxjZEz */
#simp button, #simp img{border: 0;}
#simp{max-width: 300px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-align: initial; line-height: initial; background: none; color: #fee43a; margin: 0 auto; border-radius: 6px; overflow: hidden;}
#simp .simp-album .simp-title{font-size: 0px;}
#simp .simp-controls{padding: 0px;}
#simp .simp-controls button{font-size: 150%; width: 25px; height: 30px; background: none; color: #fee43a; padding: 5px; cursor: pointer; border: 0; border-radius:3px;}
#simp .simp-controls button[disabled]{color: transparent; cursor: initial;}
#simp .simp-controls button:not([disabled]):hover{background: none; color: #ff0000;}
#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-loading .simp-buffer {-webkit-animation: audio-progress 1s linear infinite; animation: audio-progress 1s linear infinite;}
#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-shide button{font-size: 100%; padding: 0; width: 25px; height: 15px; display: block;}
#simp .simp-controls input[type=range]{-webkit-appearance: none; background: transparent; height: 50px; margin: 0; width: 100%; display: block; position: relative; z-index:2;}
#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background: #fee43a; height: 3px; border-radius: 2.5px; transition: box-shadow .3s ease; position:relative;}
#simp .simp-controls input[type=range]::-moz-range-track{background: #fee43a; 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: #fee43a;}
#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:fee43a;}
#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track {background: #fee43a;}
#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background: #fee43a;}
#simp .simp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance: none; background: #fee43a; height: 15px; width: 15px; margin-top: -6px; cursor: pointer; border-radius: 50%;}
#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance: none; background: #fee43a; height: 15px; width: 15px; cursor: pointer; border-radius: 50%;}
#simp .simp-display{overflow: hidden; max-height: 150px; transition: max-height .5s ease-in-out;}
/* playlist */
#simp ul{margin: 0px 0 0; padding: 0; list-style: none; max-height: 146px;}
#simp ul li{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin: 0; padding: 3px 5px; cursor: pointer;}
#simp ul li:hover{color: #fee43a;}
#simp ul li.simp-active{background: none; color: #ff0000;}
#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: #fee43a transparent;}
#simp ul::-webkit-scrollbar-track{background-color: none}
#simp ul::-webkit-scrollbar{width: 5px; background-color: #ff0000;}
#simp ul::-webkit-scrollbar-thumb{background-color: #ff0000;}
/* mobile */
@media screen and (max-width:320px) {
#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:320px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}