.player
{
    background: var(--bg);
    box-shadow: 0 0 3px var(--buttonShadowColor);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    font-family: 'KawkabMono';
    font-size: 0.8em;

    height: 6em;
    width: 95%;
    margin: 0 auto;
    padding: 0;
    overflow: visible;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    /* border: 1px solid red; */

    gap: 1em;
}

#timeDisplay,
#durationDisplay
{
    font-family: 'KawkabMono';
    font-size: 0.8em;
}

#controlsContainer
{
    width: 99%;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; /* Vertically center items if needed */
    
    flex: 1;

    /* border: 1px solid green; */
}

#centerControls
{
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    /* flex: 1; */

    gap: 1.5em;

    /* border: 1px solid red; */
}

/*###############################
        BEGIN    SOUND
############################*/

#soundControls
{
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 0.5rem;
    position: relative;
    
    /* border: 1px solid red; */
}

#toggleVolumeContainer
{
    display: flex;
    border-radius: 15px;
    
    padding-left: 3px;
    padding-right: 3px;
    margin: 3px;

    background: var(--raisedBg);
    box-shadow: 0 0 3px var(--raisedControlShadowColor);
}

/*###############################
           END SOUND
############################*/

#timerSlider
{
    gap: 0.5em;
    display: flex;
    align-items: center;
    flex: 1;
    flex-grow: 1;

    width: 99%;
    margin: 0 auto;

    /* border: 1px solid red; */
}

#slider-container
{
    width: 95%;
    margin: 0 auto;
    height: 30%;
}

#slider
{
    width: 100%;
    height: 100%;
    background-color: var(--sliderGrooveColor);

    border-radius: 999999px;
    overflow: hidden;
}

.progress
{
    height: 100%;
    width: 0%;
    background: #00a775;
}

#thumb
{
    position: relative;
    width: 1.5em;
    height: 1.3em;
    right: 0%;
    cursor: pointer;
    padding: 0;

    transform: translate(55%, -10%);
    /* border: 1px solid red; */
}

/*######################### ANIMATION #######################*/

.loading-spinner 
{
    animation: rotate 1s linear infinite;
}

.loading-spinner circle 
{
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate 
{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dash 
{
    0% { stroke-dasharray: 1,200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90,150; stroke-dashoffset: -40; }
    100% { stroke-dasharray: 90,150; stroke-dashoffset: -120; }
}