/* Common Styles */
.albumMassDownload, .albumEditLink, .playlistMassDownload {
    height: 35px;
    padding-left: 10px;
    display: flex;
    align-items: center;
}

.albumMassDownload i, .albumEditLink i, .playlistMassDownload i {
    margin-right: 5px;
}

#songlist, #top40, .albumList, .uploadList, .requestList {
    text-align: left;
    width: 745px;
    border: 1px solid #444;
    border-collapse: collapse;
    margin-left: 10px;
}

#songlist .plSel {
    background: rgba(204, 204, 204, 0.8);
}

#songlist th, #top40 th, .albumList th, .uploadList th, .requestList th {
    border-bottom: 1px solid #444;
    border-top: 1px solid #444;
    padding: 3px;
    background-color: #eeae40;
}

#songlist tr td {
    padding: 3px;
}

#songlist tr:hover, #top40 tr:hover, .albumList tr:hover, .uploadList tr:hover, .requestList tr:hover {
    background-color: #AAA;
}

.arrow-play {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #8d8d8d;
}

.material-icons {
    user-select: none;
}

/* Audio Player Styles */
#audio1 {
    display: none;
}

.audioplayer {
    height: 3.5em;
    margin: 0 10px 15px;
    width: 743px;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    border: 1px solid #222;
    position: relative;
    z-index: 1;
    background: linear-gradient(to bottom, #dfe7ef, #c4ccd4);
    border-radius: 2px;
    display: flex;
    align-items: center;
}

.audioplayerPlayPause,
.audioplayerVolume,
.audioplayerButtons,
.audioplayerButtons2,
.audioplayerButtons3 {
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audioplayerPlayPause {
    width: 2.5em;
    text-align: center;
    border-right: 1px solid #999;
}

.audioplayerPlayPause:hover,
.audioplayerPlayPause:focus,
.audioplayerVolume:hover,
.audioplayerVolume:focus,
.audioplayerButtons:hover,
.audioplayerButtons:focus,
.audioplayerButtons2:hover,
.audioplayerButtons2:focus,
.audioplayerButtons3:hover,
.audioplayerButtons3:focus {
    background-color: #d7dee5;
}

.audioplayerTimeCurrent,
.audioplayerTimeDuration {
    width: 4.375em;
    line-height: 3.375em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audioplayerTimeDuration {
    border-right: 1px solid #999;
}

.audioplayerBarWrapper {
    flex-grow: 1;
    margin: 0 10px;
}

.audioplayerBar {
    height: 11px;
    background-color: #444;
    cursor: pointer;
    width: 100%; /* Make the bar fill its wrapper */
    border-radius: 11px;
    position: relative;
}

.audioplayerBar div {
    width: 100%;
    height: 11px;
    border-radius: 11px;
    position: absolute;
}

.audioplayerBarLoaded {
    width: 1%;
    background-color: #222;
}

.audioplayerBarPlayed {
    width: 1%;
    background: linear-gradient(to right, #80adca, #637e8f);
}

#audioplayerAction,
#audioplayerCurrentSong {
    display: none;
}

.audioplayerButtons {
    width: 62px;
}

.audioplayerButtons2,
.audioplayerButtons3 {
    width: 35px;
}

.audioplayerButtons a,
.audioplayerButtons2 a,
.audioplayerButtons3 a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.audioplayerButtons a i,
.audioplayerButtons2 a i,
.audioplayerButtons3 a i {
    color: #fff;
}

.audioplayerButtons a i:hover,
.audioplayerButtons2 a i:hover,
.audioplayerButtons3 a i:hover,
.audioplayerVolume span i:hover,
.audioplayerPlayPause span i:hover,
#btnShuffle.active i,
#btnLoop.active i {
    color: #4d707f;
}

.audioplayerVolume {
    width: 2.8em;
}

.audioplayerVolumeBar {
    visibility: hidden;
    width: 100px; /* Horizontal volume slider width */
    height: 20px;
    background: linear-gradient(to bottom, #dfe7ef, #c4ccd4);
    border-radius: 2px;
    border: 1px solid #222;
    padding: 7px 5px;
    position: absolute;
    right: -1px;
    top: 100%;
}

.audioplayerVolume:hover ~ .audioplayerVolumeBar,
.audioplayerVolumeBar:hover,
.audioplayerVolumeBar.active {
    visibility: visible;
}

.audioplayerVolumeBar div {
    width: 100%; /* Full width of the volume bar */
    height: 11px;
    border-radius: 11px;
    position: absolute;
    background-color: #444;
}

.audioplayerVolumeBarPopup {
    position: relative;
    width: 100%;
    height: 11px;
}

.audioplayerVolumeBarLevel {
    height: 100%; /* Full height of the volume bar */
    background: linear-gradient(to right, #80adca, #637e8f);
    position: absolute;
    left: 0;
    width: 0; /* Start with 0 width */
}

.loadingSpinner {
    padding-top: 7px;
    height: 30px;
    width: 30px;
}

#audiowrap {
    position: sticky;
    top: 3px;
    z-index: 100;
}

/* Music Content Container */
#music-content-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    text-align: center;
}

#music-content-container #songlist,
#music-content-container #audiowrap,
#music-content-container .audioplayer {
    margin: 0 auto;
    text-align: left;
}

#music-content-container .audioplayer {
    width: 743px;
    margin: 10px auto;
}

#music-content-container #songlist {
    width: 745px;
}

.music-list {
    color: white;
}