* {
    box-sizing: border-box;
}

body {
    display: center;
    margin: 0;
    height: 100vh;
    font-family: 'Lato', sans-serif;
    background: rgb(20,20,20);
    background-image: linear-gradient(0deg, rgba(10,10,10,1) 0%, rgba(50,50,50,1) 100%);
    flex-direction: column;
    align-items: center;
}

body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#container {
    height: 100vh;
    
}

input:focus {
    outline-style: none;
    box-shadow: none;
}

[contenteditable="true"]:focus {
    outline:none;
    outline-style: none;
    box-shadow: none;
}

.hideScroll::-webkit-scrollbar {
    display: none;
}

#Panel4{
    margin: 0px, 0px, 0px, 0px;
}


.panelRows {
    margin: 5px, 0px, 0px, 0px;
}


#QueRandom {
    margin: 0px 0px 0px 0px;
}

#QueplayButton {
    margin: 0px 0px 0px 0px;
}


#DownButton {
    margin: 5px 0px 5px 5px;
}


#labelTime {
    color: rgba(255,255,255,1);
}


#pageQue {
    justify-content: left;
    padding: 0px 0px 0px 0px;
    height: 100vh;
}



#pageArtist {
    justify-content: left;
    padding: 0px 0px 0px 0px;
    height: 100vh;
}




#Panel2 {
    margin: 20px 0px 20px 0px;
}

#progress {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
}

#progress::-webkit-slider-thumb {
        -webkit-appearance: none;
        background: rgb(75,75,75);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 5px solid rgb(200, 200, 200);
        box-shadow: 0 5px 5px rgba(200, 200, 200, 0.30);
        cursor: pointer;
}

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

#randomButton {
    margin: 0px 15px 0px 0px;
}

#repeatButton {
    margin: 0px 0px 0px 15px;
}

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


.controls div {
    width: 45px;
    height: 45px;
    display: inline;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.50);
}

#ctrlIcon {
    width: 45px;
    height: 45px;
    display: inline;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.50);
}



#timeTrack {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 0px 0px 10px 0px;
}

#currTime {
    color: rgb(210, 210, 210);
    background-color: rgba( 0,0,0,0.0);  
    font-size: 15px;
}

#duration {
    color: rgb(210, 210, 210);
    background-color: rgba( 0,0,0,0.0);
    font-size: 15px;
}


.quebuttons {
    text-align:left; 
    font-size:16px; 
    font-weight:500;
    border-style: none;
}

.quelabels {
    text-align: left;
    font-size: 12px;
    border-style: none;
}


#divArtistPlaylist {
    overflow-x: scroll;
}

#divArtistPlaylist::-webkit-scrollbar {
    display: none;
}
#divArtistPlaylist {
    -ms-overflow-style: none;
}