#player-container {
    position: absolute;
    left: 1%;
    bottom: 2%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25vw;
    height: calc(25vw / 1.4);
    background: linear-gradient(to bottom, #36ba50, #e9e9e9);
    border-radius: 25px;
    border: 4px solid #151515;
    transition: all 0.5s ease-in-out;
    z-index: 1001;
}

.minimized {
    bottom: calc((25vw / -1.4)*0.91) !important;
}

.expanded {
    width: 90vw !important;
    height: 95vh !important;
    left: 5vw !important;
    bottom: 2.5vh !important;
}

.expanded.minimized {
    bottom: calc(95vh*-0.97) !important;
}

.expanded #player-static {
    top: 4vh !important;
    height: 88vh !important;
}


#controls {
    display: flex;
    align-items: center;
    width: 95%;
}

#controls .fas {
    transition: color 0.2s ease-in-out;
    font-size: 1.1vw;
    color: #171717;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    margin: 0;
}

.invisible {
    opacity: 0 !important;
    pointer-events: none !important;
}

.controls-pair {
    display: flex;
    justify-content: center;
    align-items: center;
}

.controls-pair .fas {
    position: absolute;
}

.controls-div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 15%;
}

#controls .fas:hover {
    transition: color 0.2s ease-in-out;
    color: #313131;
}

#player-country-title {
    overflow: hidden;
    color: #171717;
    font-size: 1.5vw;
    font-family: Calibri, sans-serif;
    margin: 0;
    width: 70%;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}

#player {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

}

#player-stations {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
}

#player-stations-title {
    color: #313131;
    font-size: 1vw;
    width: 80%;
    overflow: hidden;
    font-family: Calibri, sans-serif;
    text-align: center;
    margin: 0;
}

.player-arrow {
    transition: color 0.2s ease-in-out;
    margin: 0 auto;
    padding: 0 4%;
    font-size: 1vw;
    max-width: 10%;
    color: #1a1a1a;
    cursor: pointer;
}

.player-arrow:hover {
    transition: color 0.2s ease-in-out;
    color: #5a5a5a;
}

#player-static {
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 80%;
    z-index: 0;
    border-top: 3px solid #131313;
    border-bottom: 3px solid #131313;
}

#player-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 900;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}