.audio-player {
    width: 65px;
    height: 65px;

    margin-top: 20px;
    margin-bottom: 20px;

    position: relative;
}

.audio-player:hover {
    cursor: pointer;
}

.audio-player-controls {
    position: absolute;

    width: 50px;
    height: 50px;

    left: 8px; 
    top: 18px; 

    text-align: center;
}

.audio-player-button {
    height: 30px;
}

.audio-player-back-ring {
    width: 55px; 
    height: 55px;

    top: 5px; 
    left: 5px;

    position: absolute;

    background-color:darkgreen;
    border-radius: 50%;
}

.audio-player-back-ring-center {
    width: 51px; 
    height: 51px;

    top: 7px; 
    left: 7px;

    position: absolute;

    background-color: white;
    border-radius: 43px;
}

.audio-player-progress-ring {
    width: 30px; 
    height: 30px;

    top: 0px; 
    left: 0px;

    position: absolute;

    border-radius: 50%;

    overflow: hidden;
}

.audio-player-progress-ring-center {
    width: 30px; 
    height: 30px;

    top: 10px; 
    left: 10px;

    position: absolute;

    background-color: white;
    border-radius: 50%;
}

.audio-player-progress-segment {
    position: absolute;
    background-color: salmon;
    width: 30px;
    height: 30px;
}

.audio-player-progress-segment-1 {
    top: 0;
    left: 25px;
    transform-origin: bottom left;

    background: salmon; 
}

.audio-player-progress-segment-2 {
    top: 25px;
    left: 25px;
    transform-origin: top left;

    background: salmon;
}

.audio-player-progress-segment-3 {
    top: 25px;
    left: 0px;
    transform-origin: top right;

    background: salmon;
}

.audio-player-progress-segment-4 {
    top: 0;
    left: 0px;
    transform-origin: bottom left;

    background: salmon;
}

.audio-player-text {
    font-size: 14pt;
    font-weight: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-decoration: none;

    color: salmon;

    margin-left: 25px;
}

.audio-player-text:hover {
    cursor: pointer;
}