.ap{height:64px;padding-top:6px;font-size:14px;right:0;position:fixed;bottom:0;background:hsla(220,6%,71%,.69);left:0;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:inherit;z-index:99999}.ap__inner{background:#0c131f;display:flex}.ap__item{flex:1;justify-content:center;align-items:center;display:flex}.ap__item--playback>.ap__controls,.ap__item--settings>.ap__controls{flex:0 25%}@-webkit-keyframes fs{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fs{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.ap__item--track{flex:1 40%;padding:0 20px}.track{padding:5px 0 0;position:relative;align-self:flex-start;width:100%}.track__title{overflow:hidden;text-overflow:ellipsis;padding-right:80px;text-align:left;width:100%;white-space:nowrap}.track__time,.track__title{color:#fff;position:absolute;top:10px}.track__time{right:0}.progress-container{overflow:hidden;padding:7px 0;position:relative;cursor:pointer;margin-top:25px}.progress-container:hover .progress__bar:after{opacity:1}.progress{height:5px;border-radius:5px;background:#4570bb}.progress__bar,.progress__preload{height:5px;position:absolute;border-radius:5px 0 0 5px;width:0}.progress__bar{background:#1c355f;z-index:1}.progress__bar:after{height:10px;right:-10px;transition:opacity .3s ease;content:"";position:absolute;opacity:0;top:0;border-radius:6px;background:#4570bb;width:10px;margin-top:-3px}.progress__bar--active:after{transform:scale(1.4)}.progress__preload{background:#375a96;z-index:0}.ap button,.ap__controls{height:58px;padding:0;border:0;transition:background .3s ease;position:relative;outline:0;text-align:center;margin:0;background:transparent;cursor:pointer;display:block}.ap button svg,.ap__controls svg{fill:#fff}.ap button:active,.ap__controls:active{background:rgba(0,0,0,.1)}.ap button:hover,.ap__controls:hover{opacity:1}.icon-play>path{transition:all .3s ease}.is-playing .icon-play{fill:#1a1d23;margin-left:-1px}.ap button.ap__controls--toggle{height:30px;max-width:30px;max-height:30px;background-color:#4570bb;border-radius:50%;width:30px}.ap button.ap__controls--toggle svg{width:32px;margin-top:-2px}.volume-btn{text-align:center;width:100%;display:block}.volume{height:120px;transform:translateY(10px);border:1px solid #ccc;transition:all .3s cubic-bezier(.17,.72,.26,1.23);position:absolute;opacity:0;bottom:53px;visibility:hidden;border-radius:1px;background:#0c131f;margin-left:-20px;left:50%;width:40px;z-index:88888}.volume:after,.volume:before{border:7px solid transparent;content:"";position:absolute;border-top-color:#0c131f;bottom:-12px;margin-left:-7px;left:50%}.volume:after{border-top:7px solid #ccc;bottom:-14px;z-index:-1}.volume-container:hover .volume{transform:translateY(0);opacity:1;visibility:visible}.volume__track{height:100px;overflow:hidden;position:relative;margin:10px auto;border-radius:5px;background:#4570bb;width:5px;display:block}.volume__bar{height:50%;right:0;position:absolute;bottom:0;background:#1c355f;left:0}.has-muted .icon-volume-on,.icon-volume-off{display:none}.has-muted .icon-volume-off{opacity:.7;display:inline}.ap__controls.is-active>svg{filter:drop-shadow(0 0 3px rgba(69,112,187,.4));fill:#4570bb}@media(max-width:1024px){.ap__item>.ap__controls{flex:1}}@media(max-width:580px){.ap{min-width:250px}.ap,.ap__inner{height:auto}.ap__inner{flex-wrap:wrap}.ap__item--track{flex:1 1 100%;padding:0 20px;margin-bottom:10px;order:1}.ap__item--playback,.ap__item--settings{flex:1 1 50%;order:2}}.pl-container{overflow:auto;font-size:14px;right:0;position:fixed;bottom:58px;top:0;background:#fff;left:0;font-family:inherit;display:none;z-index:77777}.pl-ul{padding:30px 10px 100px;max-width:550px;margin:0 auto;width:100%}.pl-list{height:40px;align-items:center;line-height:40px;display:flex}.pl-list svg{fill:#4570bb}.pl-list+.pl-list{border-top:1px solid #eee}.pl-list:not(.pl-list--current):hover{background:#f6f6f6}.pl-list__remove,.pl-list__track{flex:0 50px;text-align:center}.pl-list__icon{height:0;border-left:8px solid #555;border-top:5px solid transparent;border-bottom:5px solid transparent;width:0;display:inline-block}.pl-list__title{flex:1;overflow:hidden;text-overflow:ellipsis;padding-right:10px;text-align:left;cursor:pointer;white-space:nowrap}.pl-list__remove{height:100%;border:0;transition:opacity .2s ease;outline:0;opacity:0;background:transparent;cursor:pointer}.pl-list__remove>svg{height:16px;width:16px}.pl-list__eq{display:none}.pl-list--current{color:#fff;background:#4570bb}.pl-list--current svg{fill:#fff}.pl-list--current .pl-list__eq{display:block}.pl-list--current .pl-list__icon{display:none}.pl-list--current .pl-list__remove,.pl-list:hover .pl-list__remove{opacity:1}.pl-list--current .pl-list__remove:hover{background:#3e65a9}.pl-list--empty{transform:translate(-50%,-50%);font-size:2rem;color:#ccc;position:absolute;letter-spacing:2px;top:50%;left:50%}@-webkit-keyframes eq{0%{height:3px}50%{height:20px}to{height:3px}}@keyframes eq{0%{height:3px}50%{height:20px}to{height:3px}}.eq{height:20px;justify-content:space-between;margin:0 auto;align-items:flex-end;width:20px;display:flex}.eq__bar{filter:drop-shadow(0 0 5px #fff);background:#fff;width:4px}.eq__bar:first-child{-webkit-animation:eq .8s ease-in-out 0s infinite;animation:eq .8s ease-in-out 0s infinite}.eq__bar:nth-child(2){-webkit-animation:eq .8s ease-in-out .2s infinite;animation:eq .8s ease-in-out .2s infinite}.eq__bar:nth-child(3){-webkit-animation:eq .8s ease-in-out .4s infinite;animation:eq .8s ease-in-out .4s infinite}.h-hide{display:none}.h-show{display:block}