style.css

.playlist-duration {
    background-color: white;
    padding: 10px;
    border: 1px solid black;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family:monospace;
    border-radius: 12px;
    font-weight: bold;
    font-size: medium;
}
.playlist-duration .text-container{
    display: flex;
        justify-content: start;
        gap: 5px;
}

.playlist-duration .total-duration {
    background-color: #9cc6ff;
    color: #3966ee;
    padding: 3px;
    border: 1px #3966ee solid;
    border-radius: 5px;
}

.playlist-duration .watched-duration {
    background-color: #ffabab;
        color: #ce1321;
        padding: 3px;
        border: 1px #ce1321 solid;
        border-radius: 5px;
}

.playlist-duration .remaining-duration {
    background-color: rgb(254 240 138);
        color: #c48800;
        padding: 3px;
        border: 1px #c48800 solid;
        border-radius: 5px;
}

.playlist-duration .progress-container {
    background-color: rgb(175, 175, 175);
    height: 10px;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.playlist-duration .progress-bar {
    background-color: rgb(244, 65, 65);
    height: 100%;
    width: 0%;
    position: absolute;
}