.hap-epic-mini{
background: #ffffff; background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); }
.hap-epic-mini .hap-player-outer{
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
.hap-epic-mini .hap-player-wrap{
}
.hap-epic-mini .hap-player-holder{
position:relative;
width: 100%;
height: 150px;
display: flex;
flex-direction:row;
flex-wrap:nowrap;
}
.hap-epic-mini .hap-btn{
display: none;
height:100%;
}
.hap-epic-mini .hap-player-controls-right{
display: flex;
flex-direction: row;
margin-right: 20px;
}
.hap-epic-mini .hap-contr-btn{
position: relative;
width:40px;
height:50px;
}
.hap-epic-mini .hap-contr-btn svg{
color:#777;
}
@media (hover: hover) {
.hap-epic-mini .hap-btn:hover svg,
.hap-epic-mini .hap-contr-btn:hover > svg,
.hap-epic-mini .hap-contr-btn-hover svg{
color:#00bcd4;
} 
}
.hap-epic-mini .hap-contr-btn svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 20px;
fill:currentColor;
transition: color .1s ease-out;
}
.hap-epic-mini .hap-player-left{
width: 150px;
height: 100%;
}
.hap-epic-mini .hap-player-thumb-wrapper{
position:relative;
overflow:hidden;
width: 100%;
height: 100%;
}
.hap-epic-mini .hap-player-thumb{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-size: cover;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
.hap-epic-mini .hap-player-right{
height: 100%;
display: flex;
flex-direction: column;
flex:1;
justify-content: center;
}
.hap-epic-mini .hap-info{
margin: 10px;
text-align: center;
color: #00bcd4;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.hap-epic-mini .hap-seekbar {
position: relative;
height: 50px;
margin: 0 40px;
cursor: pointer;
touch-action: none;
}
.hap-epic-mini .hap-seekbar-wave,
.hap-epic-mini .hap-seekbar-wave-progress{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.hap-epic-mini .hap-seekbar-wave-progress{
width: 0;
}
.hap-epic-mini .hap-media-time-current{
position:absolute;
left:0;
bottom: 0;
text-align: center;
margin:0!important;
padding: 2px 4px;
font-size:11px!important;
pointer-events:none;
width:auto;
color: #fff !important;
background: #00bcd4;
}
.hap-epic-mini .hap-media-time-total{
position: absolute;
right: 0;
bottom: 0;
text-align: center;
margin: 0!important;
padding: 2px 4px;
font-size: 11px!important;
pointer-events: none;
width: auto;
color: #fff !important;
background: #777;
}
.hap-epic-mini .hap-player-controls{
display: flex;
height: 50px;
width: 165px;
justify-content: space-between;
margin: 0 auto;
}
.hap-epic-mini .hap-player-controls-left{
display: flex;
flex-direction: row;
}
.hap-epic-mini .hap-controls{
position: relative;
width:150px;
height:50px;
}
.hap-epic-mini .hap-prev-toggle{
width: 50px;
}
.hap-epic-mini .hap-playback-toggle{
width: 50px;
}
.hap-epic-mini .hap-playback-toggle svg{
width:50px;
height:50px;
height: 26px;
}
.hap-epic-mini .hap-next-toggle{
width: 50px;
}
.hap-epic-mini .hap-volume-wrap{
position: relative;
margin-left:30px;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
}
.hap-epic-mini .hap-volume-toggle{
position:relative;
width:40px;
height:50px;
}
.hap-epic-mini .hap-volume-toggle svg{
height: 30px;
}
.hap-epic-mini .hap-volume-seekbar{
position: relative;
margin-left: 10px;
width:200px;
height:25px;
cursor: pointer;
touch-action: none;
}
.hap-epic-mini .hap-volume-bg{
position:absolute;
top:11px;
left:10px;
width:180px;
height:4px;
}
.hap-epic-mini .hap-volume-bg{
background:#ddd;
}
.hap-epic-mini .hap-volume-level{
position:absolute;
top:0;
left:0;
height:100%;
}
.hap-epic-mini .hap-volume-level{
background:#00bcd4;
}
.hap-epic-mini .hap-random-toggle svg{
height: 23px;
}
.hap-epic-mini .hap-share-toggle svg{
height: 28px;
}
.hap-epic-mini .hap-share-close svg{
height: 16px;
}
#hap-playlist-list{
display:none;
}