.playerWaveform {
        cursor: pointer;
        position: relative;
        margin-top: 10px;
}
.playerHover {
        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, 0.5);
        opacity: 0;
        transition: opacity 0.2s ease;
}
.playerWaveform:hover .playerHover {
        opacity: 1;
}
.playerTime,
.playerDuration {
        position: absolute;
        z-index: 11;
        top: 50%;
        margin-top: -1px;
        transform: translateY(-50%);
        font-size: 11px;
        background: rgba(0, 0, 0, 0.5);
        padding: 2px;
        border-radius: 5px;
        color: #ddd;
}
.playerTime {
        left: 0;
}
.playerDuration {
        right: 0;
}

.canvases {
        background-color: #ddd!important;
}

.playerProgress {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0;
        background: rgba(238, 119, 47, 0.22);
        border-right: 2px solid rgba(238, 119, 47, 0.55);
        pointer-events: none;
        z-index: 3;
        transition: none;
}