.hap-tiny1{
position: relative;
height:26px;
width: 60px;
display:inline-block;
}
.hap-tiny2{
position: relative;
height:26px;
width: 120px;
display:inline-block;
}
.hap-tiny3{
position: relative;
height:26px;
width: 210px;
display:inline-block;
}
.hap-tiny .hap-player-holder{
display: flex;
flex-direction:row;
position:relative;
height: 100%;
}
.hap-tiny.hap-tiny-dark .hap-player-holder {
background: rgb(76,76,76); background: -moz-linear-gradient(top,  rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); background: -webkit-linear-gradient(top,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); background: linear-gradient(to bottom,  rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); box-shadow: 1px 1px 15px #222;
}
.hap-tiny.hap-tiny-light .hap-player-holder {
background-image: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
background-image: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background-image: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
background-image: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
box-shadow: 1px 1px 1px #ddd;
}
.hap-tiny .hap-btn{
display: none;
height:100%;
}
.hap-tiny .hap-contr-btn{
box-sizing: border-box;  
position:relative;
width:30px;	
height:100%;
border-right: 1px solid #555;    
}
.hap-tiny.hap-tiny-dark .hap-contr-btn svg{
color:#ccc;
}
@media (hover: hover) {
.hap-tiny.hap-tiny-dark .hap-btn:hover svg,
.hap-tiny.hap-tiny-dark .hap-contr-btn:hover > svg,
.hap-tiny.hap-tiny-dark .hap-contr-btn-hover svg{
color:#fff!important;
} 
}
.hap-tiny.hap-tiny-light .hap-contr-btn svg{
color:#666;
}
@media (hover: hover) {
.hap-tiny.hap-tiny-light .hap-btn:hover svg,
.hap-tiny.hap-tiny-light .hap-contr-btn:hover > svg,
.hap-tiny.hap-tiny-light .hap-contr-btn-hover svg{
color:#fff!important;
} 
}
.hap-tiny .hap-contr-btn svg{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 13px;
fill:currentColor;
transition: color .1s ease-out;
}
.hap-tiny .hap-volume-wrapper{
position:relative;
width:30px;	
height:100%;
}
.hap-tiny .hap-volume-toggle{
border-right:none!important; 
}
.hap-tiny .hap-volume-wrapper:hover .hap-volume-seekbar{
visibility: visible;
}
.hap-tiny .hap-volume-seekbar{
position:absolute;
box-sizing: border-box;
top:-80px;
left:0;
width:30px;
height:80px;
visibility: hidden;
cursor: pointer;
touch-action: none;
}
.hap-tiny.hap-tiny-dark .hap-volume-seekbar{
background: rgb(125,126,125); background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); }
.hap-tiny.hap-tiny-light .hap-volume-seekbar{
background: rgb(255,255,255); background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); border: 1px solid #cbcbcb;
}
.hap-tiny .hap-volume-bg{
position:absolute;
width:3px;
height:60px;
left:13px;
bottom:10px;
}
.hap-tiny.hap-tiny-dark .hap-volume-bg{
background:#888;
}
.hap-tiny.hap-tiny-light .hap-volume-bg{
background:#888;
}
.hap-tiny .hap-volume-level{
position:absolute;
width:100%;
height:30px;
left:0;
bottom:0;
}
.hap-tiny.hap-tiny-dark .hap-volume-level{
background:#fff;
}
.hap-tiny.hap-tiny-light .hap-volume-level{
background:#fff;
}
.hap-tiny .hap-seekbar{
position:relative;
height:100%;
width: 150px;
touch-action: none;
cursor: pointer;
}
.hap-tiny .hap-progress-bg{
position:absolute;
height:3px;
top:12px;
left:10px;
right:10px;
}
.hap-tiny.hap-tiny-dark .hap-progress-bg{
background:#666;
}
.hap-tiny.hap-tiny-light .hap-progress-bg{
background:#666;
}
.hap-tiny .hap-load-level{
position:absolute;
height:100%;
top:0;
left:0;
right:0;
}
.hap-tiny.hap-tiny-dark .hap-load-level{
background:#888;
}
.hap-tiny.hap-tiny-light .hap-load-level{
background:#888;
}
.hap-tiny .hap-progress-level{
position:absolute;
height:100%;
top:0;
left:0;
right:0;
}
.hap-tiny.hap-tiny-dark .hap-progress-level{
background:#fff;
}
.hap-tiny.hap-tiny-light .hap-progress-level{
background:#fff;
}
.hap-tiny .hap-tooltip{
position:absolute;
text-align:center;
z-index:10000;
pointer-events:none;
display:none;
font-size:12px!important;
padding:2px 5px !important;
line-height:20px !important;
white-space:nowrap;
}
.hap-tiny.hap-tiny-dark .hap-tooltip{
background: #333;
border:1px solid #444;
box-shadow: 1px 1px 3px #111;
color:#fff!important;
}
.hap-tiny.hap-tiny-light .hap-tooltip{
background: rgb(255,255,255); background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); box-shadow: 1px 1px 1px #ddd;
color:#666!important;
border:1px solid #ccc;
}