img.logo{
    max-width: 45%;
    max-height: 110px;
}
div.bottom-line{
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
}

div.nowplaying-header{
    background-color: #F2F2F2;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 88px;
}
div.nowplaying-image{
    background-color: #F2F2F2;
}
div.play-button{
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
}
div.play-button svg{
    width: 100%;
    height: 100%;
    opacity: 0.75;
}

.recent-tracks .track {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Space between tracks */
    background-color: #f2f2f2;
}

.track-image {
    width: 100px; /* Adjust as needed */
    height: 100px; /* Adjust as needed */
    object-fit: cover; /* Keeps the aspect ratio of the image */
    margin-right: 10px; /* Space between image and text */
}

.track-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.artist, .title {
    margin: 0; /* Removes default margin */
}

.footer{
    background-color: #D9D9D9;
}

.stop-icon{
    display: none;
}

.playing .stop-icon {
    display: inline;
}

.playing .play-icon {
    display: none;
}

.buffer-icon{
    display: none;
}

.buffering .play-icon {
    display: none;
}

.buffering .buffer-icon {
    display: inline;
}

.playing .buffer-icon {
    display: none;
}

/* start spinner */

/* SVG styles. */
svg.buffer-icon {
    animation: 2s linear infinite svg-animation;
    max-width: 100px;
}

/* SVG animation. */
@keyframes svg-animation {
0% {
    transform: rotateZ(0deg);
}
100% {
    transform: rotateZ(360deg);
}
}

/* Circle styles. */
circle {
animation: 1.4s ease-in-out infinite both circle-animation;
display: block;
fill: transparent;
stroke: #2f3d4c;
stroke-linecap: round;
stroke-dasharray: 283;
stroke-dashoffset: 280;
stroke-width: 10px;
transform-origin: 50% 50%;
}

/* Circle animation. */
@keyframes circle-animation {
0%,
25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
}

50%,
75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
}

100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
}
}  

/* end spinner */

.tmm-font{
    color: #595959;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    text-align: center;
}
img{
    max-width: 100%;
}
.img-mob{
    max-width: 100px;
}

#tmm1_play{
    cursor: pointer;
}

#tmm2_play{
    cursor: pointer;
}

.footer a{
    text-decoration: none;
    color: #000;
}

.footer a:hover{
    text-decoration: underline;
}