.waveform-container{position:relative;width:100%;max-width:800px;margin:0 auto}.top-controls{display:flex;align-items:center;display:inline-flex;margin:10px 0 10px -10px}.play-pause{display:block;padding:0 10px;background-color:#13151B;color:#F5F7FC;border:none;cursor:pointer;font-size:20px;line-height:1;text-align:center}.play-pause:hover{background-color:#13151B;box-shadow:none}.caption{margin-left:10px;color:#F5F7FC;font-size:14px}.waveform{cursor:pointer;position:relative;width:100%;height:128px;background-color:#000}#hover{position:absolute;left:0;top:0;z-index:10;pointer-events:none;height:100%;width:0;mix-blend-mode:overlay;background:rgba(255,255,255,.5);opacity:0;transition:opacity 0.2s ease}#waveform:hover #hover{opacity:1}.current-time,.remaining-time{position:absolute;z-index:11;top:93%;transform:translateY(-50%);font-size:11px;background:#304841;padding:2px;color:#8BECD1}.current-time{left:0}.remaining-time{right:0}