.yAudio{display:flex;width:100%;color:#333;font-family:Arial,Helvetica,sans-serif;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal;position:relative;--theme-color:#d72630}.yAudio .yAudio-artword{width:160px;height:160px;margin-right:15px}.yAudio .yAudio-artword .yAudio-figure{display:block;width:100%;height:100%;margin:0;padding:0;background-color:#f8f8f8}.yAudio .yAudio-artword .yAudio-pic{display:block;width:100%;height:100%;object-fit:cover}.yAudio .yAudio-content{flex:1}.yAudio .yAudio-content .yAudio-header{display:flex;align-items:center;padding:5px 0 7px}.yAudio .yAudio-content .yAudio-play{width:38px;height:38px;border-radius:50%;color:#fff;background-color:var(--theme-color);margin-right:5px;cursor:not-allowed;position:relative}.yAudio.load .yAudio-content .yAudio-play{cursor:pointer}.yAudio .yAudio-content .yAudio-play svg{position:absolute;top:8px;left:10px;width:22px;height:22px}.yAudio .yAudio-content .yAudio-play svg path{fill:#fff}.yAudio .yAudio-content .yAudio-play__pause,.yAudio.play .yAudio-content .yAudio-play__playing{visibility:visible}.yAudio .yAudio-content .yAudio-play__playing,.yAudio.play .yAudio-content .yAudio-play__pause{visibility:hidden}.yAudio .yAudio-content .yAudio-play__playing{left:8px}.yAudio .yAudio-content .yAudio-container{flex:1}.yAudio .yAudio-content .yAudio-author{font-size:12px;color:#999;font-weight:300;margin:0}.yAudio .yAudio-content .yAudio-title{font-size:15px;margin:0}.yAudio .yAudio-content .yAudio-time{color:#ccc;font-size:12px;font-weight:100;line-height:1}.yAudio .yAudio-content .yAudio-main{width:100%;position:relative}.yAudio .yAudio-content .yAudio-waveform{width:100%;height:60px;cursor:pointer;opacity:.8;transform:scaleY(0);transform-origin:left 75%;transition:all .3s ease-out;position:relative}.yAudio .yAudio-content .yAudio-waveform::before{content:'';position:absolute;top:0;left:var(--bar-left);width:1px;height:100%;opacity:0;background-color:var(--theme-color);transition:opacity .3s ease-out}.yAudio .yAudio-content .yAudio-waveform:hover,.yAudio.start .yAudio-content .yAudio-waveform,.yAudio .yAudio-content .yAudio-waveform:hover::before{opacity:1}.yAudio.load .yAudio-content .yAudio-waveform{transform:scaleY(1)}.yAudio .yAudio-content .yAudio-waveform .yAudio-pro{position:absolute;top:0;left:0;width:0;height:60px;overflow:hidden;background-color:transparent}.yAudio .yAudio-content .yAudio-current,.yAudio .yAudio-content .yAudio-total{position:absolute;top:28px;color:#fff;padding:3px 2px;font-size:12px;line-height:1;transform:scale(0.9);opacity:0;background-color:rgba(50,50,50,0.91)}.yAudio .yAudio-content .yAudio-current{left:0;z-index:9;color:var(--theme-color);transition:opacity .3s linear}.yAudio.start .yAudio-content .yAudio-current{opacity:1}.yAudio .yAudio-content .yAudio-total{color:#999;right:0}.yAudio.load .yAudio-content .yAudio-total{opacity:1;animation:opacity .6s linear}.yAudio .yAudio-content .yAudio-comments{width:100%;position:relative}.yAudio .yAudio-content .yAudio-wrapper{position:absolute;top:-15px;left:0;width:100%;height:12px;cursor:pointer}.yAudio .yAudio-content .yAudio-wrapper__item{position:absolute;top:0;left:10px;width:12px;height:12px;background-color:#222;background-repeat:no-repeat;background-size:cover}.yAudio .yAudio-content .yAudio-wrapper__item.current{border-radius:50%;box-shadow:1px 2px 6px #6c6c6c;z-index:9}.yAudio .yAudio-content .yAudio-popover{display:flex;width:100%;height:30px;line-height:30px;font-size:12px;box-sizing:border-box;transition:all .3s ease-out}.yAudio .yAudio-content .yAudio-popover-wrapper{position:absolute;top:4px;left:0;line-height:1;opacity:0;transition:top .25s,opacity .25s}.yAudio .yAudio-content .yAudio-wrapper.active ~ .yAudio-popover .yAudio-popover-wrapper{top:7px;opacity:1}.yAudio .yAudio-content .yAudio-popover-wrapper__user{display:block;float:left;color:var(--theme-color);padding:0 8px;text-decoration:none;position:relative}.yAudio .yAudio-content .yAudio-popover-wrapper__user::before{content:'';display:block;position:absolute;top:-12px;left:0;width:1px;height:200%;background-image:linear-gradient(rgba(255,85,0,0.95),rgba(255,85,0,0.1))}.yAudio .yAudio-content .yAudio-popover-wrapper.right .yAudio-popover-wrapper__user{float:right}.yAudio .yAudio-content .yAudio-popover-wrapper.right,.yAudio .yAudio-content .yAudio-popover-wrapper.right .yAudio-popover-wrapper__user::before{right:0;left:auto}.yAudio .yAudio-content .yAudio-popover-wrapper__comment{color:#666;float:left;margin:0}.yAudio .yAudio-content .yAudio-comments-from{width:100%;height:0;opacity:0;padding:5px 5px 5px 25px;background-color:#f2f2f2;border:1px solid #e5e5e5;box-sizing:border-box;overflow:hidden;position:relative;transition:all .3s ease-out}.yAudio.start .yAudio-content .yAudio-comments-from,.yAudio.comment .yAudio-content .yAudio-comments-from{opacity:1;height:32px}.yAudio .yAudio-content .yAudio-comments-from::before{content:'';position:absolute;top:6px;left:6px;width:19px;height:19px;background-image:linear-gradient(135deg,#846170,#70929c)}.yAudio .yAudio-content .yAudio-comments-from__input{width:100%;height:20px;border-radius:0 4px 4px 0;padding:0 9px;font-size:12px;outline:0;cursor:pointer;border:1px solid #e5e5e5;border-left:none;box-sizing:border-box}.yAudio .yAudio-content .yAudio-footer{position:relative;box-sizing:border-box;margin-top:10px}.yAudio .yAudio-content .yAudio-list{border-radius:0 0 4px 4px;border:1px solid #f2f2f2;font-size:12px;overflow:hidden}.yAudio .yAudio-content .yAudio-list-container{max-height:150px;overflow-y:hidden;transition:max-height .3s}.yAudio .yAudio-content .yAudio-list-container.active{overflow-y:scroll;max-height:300px}.yAudio .yAudio-content .yAudio-list-wrapper{margin:0;padding:0;transition:all .6s}.yAudio .yAudio-content .yAudio-list-wrapper__item{width:100%;height:30px;display:flex;align-items:center;padding:0 5px;box-sizing:border-box;color:#ccc;cursor:not-allowed;border-bottom:1px solid #f2f2f2;transition:all .3s}.yAudio .yAudio-content .yAudio-list-wrapper__item:last-child{border-bottom:0}.yAudio .yAudio-content .yAudio-list-wrapper__item.active,.yAudio .yAudio-content .yAudio-list-wrapper__item:hover,.yAudio .yAudio-content .yAudio-more:hover{background-color:#f2f2f2}.yAudio .yAudio-content .yAudio-list-wrapper__item-img{display:block;width:20px;height:20px;margin-right:5px;opacity:.5;transition:all .3s}.yAudio .yAudio-content .yAudio-list-wrapper__item-number{margin-right:5px;font-size:12px;line-height:1;color:#ccc;transition:all .3s}.yAudio .yAudio-content .yAudio-list-wrapper__item-content{flex:1;font-size:0}.yAudio .yAudio-content .yAudio-list-wrapper__item-user,.yAudio .yAudio-content .yAudio-list-wrapper__item-title{display:inline-block;font-size:12px;line-height:1;margin-right:5px}.yAudio .yAudio-content .yAudio-list-wrapper__item-title{color:#ccc;transition:all .3s}.yAudio .yAudio-content .yAudio-list-bar{position:absolute;top:4px;right:4px;width:6px;height:30px;background-color:#ccc;border-radius:6px;opacity:0;transition:opacity .6s}.yAudio .yAudio-content .yAudio-list-bar.active,.yAudio .yAudio-content .yAudio-list-container.active:hover .yAudio-list-bar{opacity:1}.yAudio .yAudio-content .yAudio-more{text-align:center;padding:5px 10px;color:#999;border:0;font-size:12px;cursor:pointer}.yAudio.load .yAudio-content .yAudio-list-wrapper__item{color:#999;cursor:pointer}.yAudio.load .yAudio-content .yAudio-list-wrapper__item-img{opacity:1}.yAudio.load .yAudio-content .yAudio-list-wrapper__item-number,.yAudio.load .yAudio-content .yAudio-list-wrapper__item-title{color:#333}.yAudio .yAudio-content .yAudio-list-wrapper__item.isload .yAudio-list-wrapper__item-number,.yAudio .yAudio-content .yAudio-list-wrapper__item.isload .yAudio-list-wrapper__item-title,.yAudio .yAudio-content .yAudio-list-wrapper__item.isload .yAudio-list-wrapper__item-user{color:#b5b5b5}.yAudio .yAudio-content .yAudio-list-wrapper__item.isload .yAudio-list-wrapper__item-img{opacity:.5}.yAudio .yAudio-content .yAudio-list-wrapper__item.active .yAudio-list-wrapper__item-number .yAudio .yAudio-content .yAudio-list-wrapper__item.active .yAudio-list-wrapper__item-user,.yAudio .yAudio-content .yAudio-list-wrapper__item.active .yAudio-list-wrapper__item-title{color:var(--theme-color)}.yAudio .yAudio-content .yAudio-list-wrapper__item.active .yAudio-list-wrapper__item-img{opacity:1}.yAudio .yAudio-content .yAudio-list-container.active::-webkit-scrollbar{width:0;height:0}@keyframes opacity{0%{opacity:0}100%{opacity:1}}