
#playTimeD, #playButtons { display: flex; }

/* (PART B) WRAPPER & LAYOUT */
#player {
	background-color: rgba(0,0,0,0.5);
	position:absolute;
	top: 2%;
	left:50%;
	z-index:6;
    flex-wrap: wrap;
    padding: 3px; border-radius: 10px;
}

.playerhidden {
   display:none;
}

.playershown {
   display:block;
}

/* (PART C) CURRENT SONG IMAGE */
#playImg {
  display:none;
  width: 100px; height: 100px; aspect-ratio: 1/1;
  object-fit: cover; border-radius: 10px;
  float: left;
}

/* (PART D) CURRENT SONG NAME & CONTROLS */
/* (D1) WRAPPER & SHARED */
#playControls { text-align: center; margin-left: 0px; width: 320px; padding-left: 0px; }
#player input[type="range"] {
  padding: 0; margin: 0;
  border: none; outline: none; box-shadow: none;
  accent-color: #ff4b4b;
}

/* (D2) SONG NAME */
#playName {
  display:none;
  font-size: 20px; margin-bottom: 0px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* (D3) SONG TIME */
#playTimeN, #playTimeT { display: none; width: 50%; font-size: 14px; }
#playTimeR { display: none; width: 100%; }
#playTimeT { display: none; text-align: right; }

/* (D5) CONTROL BUTTONS */
#playButtons { margin-top: 0px; align-items: center; }
#playLast, #playTog, #playNext, #playVolI, #playVidz{ cursor: pointer; }
#playLast, #playTog, #playNext, #playVolI, #playVidz { width:20px; font-size: 16px; flex-grow: 1; }
#playVolI { width:20px; font-size: 16px; margin-right: 5px; }
#playVolR { flex-shrink: 1; max-width: 40px; }

/* (PART E) PLAY LIST */
#playList { display:none; width: 100%; margin-top: 20px; }
#playList div { padding: 10px; cursor: pointer; }
#playList div.current { font-weight: 700; color: #ff4b4b; }
#playList div:nth-child(odd) { background: #000000; }