.music-player {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.music-player .button {
    position: relative;
    width: calc(var(--percentage-width) * 10);
    height: calc(var(--percentage-height) * 4);
    font-size: calc(var(--percentage-width) * 1);
    justify-content: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    padding: 0;
    background-color: white;
    color: var(--illi-black);
    border: calc(var(--percentage-width) * 0.1) solid var(--illi-black);
}

.music-player .button i {
    margin-right: calc(var(--percentage-width) * 0.25);
}

.music-player .button:focus {
    outline: none;
    /* border-color: rgba(0, 0, 0, 0); */
}

.music-player .button:focus::before {
    border: calc(var(--percentage-width) * 0.2) solid var(--illi-red);
    content: "";
    position: absolute;
    width: calc(calc(var(--percentage-width) * 10) + calc(var(--percentage-width) * 0.7));
    height: calc(calc(var(--percentage-height) * 4) + calc(var(--percentage-width) * 0.7));
    background: var(--illi-light-red);
    border-radius: calc(var(--percentage-width) * 1);
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* MUSIC DETAILS STYLE */
.music-details {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    width: calc(var(--percentage-width) * 30);
    background-color: var(--illi-light-blue);
}

.music-details-top{
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
    margin-top: calc(var(--percentage-height) * 5);
    margin-left: calc(var(--percentage-width) * 3.5);
}

#audio-leave {
    width: calc(var(--percentage-width) * 7);
    height: calc(var(--percentage-height) * 6);
    margin-right: calc(var(--percentage-width) * 1);
}

#audio-leave:focus::before {
    width: calc(calc(var(--percentage-width) * 7) + calc(var(--percentage-width) * 0.7));
    height: calc(calc(var(--percentage-height) * 6) + calc(var(--percentage-width) * 0.7));
}

.music-search-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-size: calc(var(--percentage-width) * 1.5);
}

.music-search-container .search {
    width: calc(var(--percentage-height)* 6);
    height: calc(var(--percentage-height) * 6);
    font-size: calc(var(--percentage-width) * 1.5);
    border: solid calc(var(--percentage-width) * 0.1);
    border-radius: calc(var(--percentage-width) * 1);
    padding-left: calc(var(--percentage-width) * 2);
    background-color: var(--illi-black);
    transition: width 1s;
}

.music-search-container .search::placeholder {
    color: var(--illi-black);
}

.music-search-container i {
    position: absolute;
    right: calc(var(--percentage-width) * 1);
    color: white;
}
.music-search-container::before{
    content: "";
    position: absolute;
    width: calc(calc(var(--percentage-height)* 6) + calc(var(--percentage-width) * 0.5));
    height: calc(calc(var(--percentage-height)* 6) + calc(var(--percentage-width) * 0.5));
    border-radius: calc(var(--percentage-width) * 1.3);
    border: solid calc(var(--percentage-width) * 0.2) var(--illi-black);
    background: rgba(62, 62, 62, 0.100);
    display: none;
}

.music-search-container:focus-within::before {
    display: block;
}

.music-search-container.active:focus-within::before{
    display: none;
}

.music-search-container .search.active {
    background-color: var(--illi-lighter-gray);
    width: calc(var(--percentage-width)* 13);
}

.music-search-container .search.active ~ i{
    color: #727272;
}

.music-search-container .search.active::placeholder {
    color: #727272;
}

.category-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: calc(var(--percentage-width) * 3);
}

.category-name i {
    font-size: calc(var(--percentage-width) * 2);
    margin-right: calc(var(--percentage-width) * 1);
}

.category-details {
    margin-top: calc(var(--percentage-height) * 3);
    margin-left: calc(var(--percentage-width) * 4);
    margin-bottom: calc(var(--percentage-height) * 1.5);
}

.playlists-list {
    padding-left: calc(var(--percentage-width) * 4);
    font-size: calc(var(--percentage-width) * 1.5);
    height: calc(var(--percentage-height) * 67);
    overflow-x: visible;
    overflow-y: scroll;
}

.playlist-item {
    margin-bottom: calc(var(--percentage-height) * 0.5);
}

.playlist-item.active {
    font-weight: 600;
    display: flex;
    align-items: center;
    position: relative;
}

.playlist-item.active::before {
    content: "\f8c9"; 
    font-family: "Font Awesome 6 Pro"; 
    position: absolute;
    color: var(--illi-black); 
    left: calc(var(--percentage-width) * -2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--percentage-width) * 1.35);
    margin-top: calc(var(--percentage-height) * 0.5);
}

.playlist-item:focus {
    outline: none;
    color: var(--illi-red);
    font-weight: 600;
    text-decoration: underline;
}

/* PLAYLIST HEADER */
.tracklist-header {
    height: calc(var(--percentage-height) * 25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.playlist-name {
    color: black;
    font-size: calc(var(--percentage-width) * 3);
    font-weight: bold;
    margin-top: calc(var(--percentage-height) * 3);
    margin-bottom: calc(var(--percentage-height)* 0.5);
    margin-left: calc(var(--percentage-width) * 8);
    height: calc(var(--percentage-height) * 6.5);
}

.music-buttons {
    display: flex;
    display: -webkit-flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: row;
    width: 100%;
    margin-left: calc(var(--percentage-width) * 7);
}

.music-buttons .button {
    margin-top: 0;
    margin-bottom: 0;
    /* font-size: calc(var(--percentage-width) * 1); */
    /* height: calc(var(--percentage-height) * 4); */
}

.music-buttons .button:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0);
}

.music-buttons .button:focus::before {
    width: calc(calc(var(--percentage-width) * 10) + calc(var(--percentage-width) * 0.1));
    height: calc(calc(var(--percentage-height) * 4) + calc(var(--percentage-width) * 0.1));
    border-radius: calc(var(--percentage-width) * 0.8);
    /* border-width: calc(var(--percentage-width) * 0.2); */
}

.tracklist-labels {
    display: flex;
    display: -webkit-flex;
    /* justify-content: center; */
    align-items: center;
    height: calc(var(--percentage-height) * 4);
    font-weight: 700;
    margin-top: calc(var(--percentage-height) * 4);
    margin-left: calc(var(--percentage-width) * 7);
}

.tracklist-labels::after {
    content: "";
    width: calc(var(--percentage-width) * 47);
    height: calc(var(--percentage-height) * 0.2);
    position: absolute;
    background-color: var(--illi-black);
    top: calc(var(--percentage-height) * 23);
    /* same as tracklist header heigth! */
}

.number-row {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    width: calc(var(--percentage-width) * 4);
}

.title-row {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    width: calc(var(--percentage-width) * 40);
    margin: calc(var(--percentage-height) * 2);
}

.time-row {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    width: calc(var(--percentage-width) * 6);
    display: none;
}

/*  TRACKLIST STYLE */
.tracklist {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    width: calc(var(--percentage-width) * 70);
    height: 100%;
    font-size: calc(var(--percentage-width) * 1.5);
}

.tracklist-loading-indicator {
    position: absolute;
    width: calc(var(--percentage-width)* 70);
    height: calc(var(--percentage-height)* 65);
    top: calc(var(--percentage-height)* 25);
    background-color: white;
    color: #8098ba;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--percentage-width) * 3);
}

.tracklist-list {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    margin: 0;
    height: calc(var(--percentage-height) * 65);
    overflow-y: scroll;
}

.track {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    width: calc(var(--percentage-width) * 47);
    margin-top: calc(var(--percentage-height) * 0.5);
    margin-bottom: calc(var(--percentage-height) * 0.5);
    min-height: calc(var(--percentage-height) * 6);
    margin-left: calc(var(--percentage-width) * 7);
}

.title-row:focus {
    outline: none;
    color: var(--illi-red);
    font-weight: 600;
    text-decoration: underline;
}

.tracklist .speaker-icon {
    display: none;
    color: var(--illi-red);
}

.tracklist .track.active .speaker-icon,
.tracklist .track.paused .speaker-icon,
.tracklist .track.loading .speaker-icon {
    display: flex;
    display: -webkit-flex;
}

.tracklist .track.active .track-number,
.tracklist .track.paused .track-number,
.tracklist .track.loading .track-number {
    display: none;
}

.tracklist .track.active,
.tracklist .track.paused,
.tracklist .track.loading {
    background-color: var(--illi-lighter-gray);
}

.tracklist .arrow {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    height: calc(var(--percentage-height) * 8);
    position: absolute;
    width: calc(var(--percentage-width) * 70);
}

.arrow.up {
    top: calc(var(--percentage-height) * 23.5);
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.79) 40%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%);
}

.arrow.down {
    bottom: calc(var(--percentage-height) * 10);
    background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.79) 40%, rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0) 100%);
}

.arrow i {
    text-shadow: 0 0 calc(var(--percentage-width) * .5) rgba(0, 0, 0, 0.13);
    color: var(--illi-black);
}

/* AUDIO CONTROL BAR STYLE */
.audio-controls {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #393939 0%, #2d2d2d 50%, #1b1b1b 99%, #000000 100%);
    height: calc(var(--percentage-height) * 10);
    width: calc(var(--percentage-width) * 70);
    color: white;
    z-index: 50;
}

#audio-progress-bar {
    width: calc(var(--percentage-width) * 33);
    margin-top: calc(var(--percentage-height) * 3);
    height: calc(var(--percentage-height) * 0.7);
}

#audio-progress-bar:focus {
    outline: none;
}

#audio-progress-bar:focus-within input[type="range"]::-webkit-slider-thumb,
#audio-progress-bar:focus-within input[type="range"]::-moz-range-thumb {
    outline: calc(var(--percentage-width) * 0.27) solid rgba(182, 182, 182, 0.36);
    width: calc(var(--percentage-width) * 0.45);
    height: calc(var(--percentage-height) * 2.1);
}

.audio-progress {
    position: relative;
    z-index: 1;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    align-items: center;
    height: calc(var(--percentage-height) * 0.7);
    width: 0;
    background-color: #fff;
    will-change: width;
    transition: width 1s;
}

.audio-controls .time {
    margin-top: calc(var(--percentage-height) * 0.5);
}

.audio-controls .time-container {
    width: calc(var(--percentage-width) * 33);
}

.audio-control-buttons {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: calc(var(--percentage-width) * 40);
    height: calc(var(--percentage-height) * 6);
    margin-top: calc(var(--percentage-height) * -3);
}

.audio-control-buttons .audio-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    width: calc(var(--percentage-height) * 5);
    height: calc(var(--percentage-height) * 5);
    font-size: calc(var(--percentage-width) * 1.5);
    margin-right: calc(var(--percentage-width) * 0.5);
    margin-left: calc(var(--percentage-width) * 0.5);
}

.audio-control-buttons .audio-button:focus {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: calc(var(--percentage-width) * 1);
    outline: none;
}

#audio-play {
    font-size: calc(var(--percentage-width) * 1.75);
}

#audio-play .fa-play {
    font-size: calc(var(--percentage-width) * 1.50) !important;
    margin-left: calc(var(--percentage-width) * 0.10);
}

/* SCREENSAVER STYLES */
.screensaver-container {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    overflow: hidden;
    background-color: black;
}

.screensaver-container.screensaver-active {
    display: flex;
    display: -webkit-flex;
}

.screensaver-container video {
    object-fit: cover;
    z-index: 25;
}

#screensaver-image {
    display: none;
    width: 100%;
    height: 100%;
    z-index: 25;
    object-fit: cover;
}

#screensaver-image.animate {
    animation: screensaver 60s ease-in-out;
}

@keyframes screensaver {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.75);
    }
}

.screensaver-next-up {
    position: absolute;
    z-index: 49;
    top: calc(var(--percentage-height) * 5);
    right: calc(var(--percentage-width) * -45);
    max-width: calc(var(--percentage-width) * 45);
    background-color: #17171769;
    color: white;
    transition: right 2s;
    border-radius: calc(var(--percentage-width) * 2);
}

.screensaver-next-up.active{
    right: calc(var(--percentage-height) * 5);
}

.next-up-title {
    margin-left: calc(var(--percentage-width) * 4);
    margin-right: calc(var(--percentage-width) * 4);
    margin-top: calc(var(--percentage-height) * 4);
    margin-bottom: calc(var(--percentage-height) * 2);
    font-size: calc(var(--percentage-width) * 1.75);

}

.next-up-list {
    margin-left: calc(var(--percentage-width) * 4);
    margin-right: calc(var(--percentage-width) * 4);
    margin-bottom: calc(var(--percentage-height) * 5);
}

.next-up-track {
    margin-bottom: calc(var(--percentage-height) * 2);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.next-up-track i{
    font-size: calc(var(--percentage-width) * 1.75);
    margin-right: calc(var(--percentage-width) * 1.5);
}

.next-up-track-title{
    font-size: calc(var(--percentage-width) * 1.5);
}

.next-up-track-artist {
    color: rgb(201 201 201);
    font-size: calc(var(--percentage-width) * 1.1);
}

.music-details.screensaver-active {
    display: none;
}

.audio-controls.screensaver-active {
    /* width: 100%; */
    width: calc(var(--percentage-width) * 100);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(45, 45, 45, 0.66) 40%, rgb(27, 27, 27) 99%, rgb(0, 0, 0) 100%);
    justify-content: flex-end;
    height: calc(var(--percentage-height) * 20);
    padding-bottom: calc(var(--percentage-height) * 0.5);
}

.song-title {
    z-index: 55;
    position: absolute;
    bottom: calc(var(--percentage-height) * 13);
    width: 100%;
    color: white;
    text-align: center;
    font-size: calc(var(--percentage-width) * 2.5);
    opacity: 0.9;
}

.screensaver-button {
    position: absolute;
    color: white;
    bottom: calc(var(--percentage-height) * 3);
    left: calc(var(--percentage-width) * 12);
    width: calc(var(--percentage-width) * 6);
    text-align: center;
    font-size: calc(var(--percentage-width) * 1.5);
    padding: calc(var(--percentage-height) * 1);
    border: solid calc(var(--percentage-height) * .3);
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(122, 122, 122, 0.57);
    border-radius: calc(var(--percentage-width) * .5);
    height: calc(var(--percentage-height) * 3.5);
    z-index: 55;
}

.screensaver-button:focus {
    background-color: rgba(255, 255, 255, 0.25);
    outline: none;
}