/* (PART A) WHOLE PAGE */
* {
  /*font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;*/
}
body, html { 
/*background-color: transparent; */
}


#player, #playTimeD, #playButtons { display: flex; }

/* (PART B) WRAPPER & LAYOUT */
#player {
	font-family: Arial, Helvetica, sans-serif;
	flex-wrap: wrap;
	min-width: 360px;
	max-width: 600px;
	padding: 32px;
	border-radius: 12px;
	background-color: rgba(0, 0, 0, 0.5) !important  ;
	color: #797569;
	margin:0px 5px 0px 5px;
	letter-spacing: 0.055em;
}

/* (PART X1 CZ) Player schliessen */
#PlayerZu {
	width:100%;
	margin-top: -5px; margin-right: -3px;
	margin-bottom: 10px;
	position: relative;
}

#PlayerZu img {
opacity: 0.5;
cursor: pointer;
}

#PlayerZu img:hover {
opacity: 1;
}

/* (PART C) CURRENT SONG IMAGE */

@keyframes rotating {
	0% {	rotate: 0; 	}
	100% {	rotate: 1turn; 	}
}

#playImg {
  width: 120px; height: 100%; aspect-ratio: 1/1;
  object-fit: cover; border-radius: 60px;
  animation: rotating 10s linear infinite paused;
 /* box-shadow: 0 0 10px 4px #ea8a00;*/
}

/* (PART D) CURRENT SONG NAME & CONTROLS */
/* (D1) WRAPPER & SHARED */
#playControls { width: calc(100% - 120px); padding-left: 10px; }
#player input[type="range"] {
  padding: 0; margin: 0;
  border: none; outline: none; box-shadow: none;
  accent-color: #959288;
  opacity: 0.7;
}

/* (D2) SONG NAME */
#playName {
	font-family: "Tilt Neon", sans-serif;
	font-size: 20px; margin-bottom: 30px; color: white; font-weight: 300; 
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

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

/* (D4) ICOMOON - https://icomoon.io/ */
@font-face{font-family:icomoon;src:url(fonts/icomoon.eot?d3ybsy);src:url(fonts/icomoon.eot?d3ybsy#iefix) format('embedded-opentype'),url(fonts/icomoon.ttf?d3ybsy) format('truetype'),url(fonts/icomoon.woff?d3ybsy) format('woff'),url(fonts/icomoon.svg?d3ybsy#icomoon) format('svg');font-weight:400;font-style:normal;font-display:block}
[class*=" icon-"],[class^=icon-]{color: #b6ad9e;font-family:icomoon!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-play3:before{content:"\ea1d"}.icon-pause2:before{content:"\ea1c"}.icon-previous2:before{content:"\ea23"}.icon-next2:before{content:"\ea24"}.icon-volume-high:before{content:"\ea26"}.icon-volume-mute2:before{content:"\ea2a"}

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

/* (PART E) PLAY LIST */
#playList { width: 100%; margin-top: 20px; }
#playList div { padding: 6px; cursor: pointer; font-size: 14px;}
#playList div.current { font-weight: 700; color: #dad5cb; border-radius: 8px;  outline: 1px solid rgba(255,255,255, 0.2);}
#playList div:nth-child(odd) {  }
#playList div:nth-child(even) {  }
#playList div:hover { color: #9e5541; }