h2, h3, h4, h5 	{user-select:none; color:#fff}

.container		{display: flex; gap: 20px; align-items: flex-start; user-select:none;}
.controlbox		{margin-top:.5em}
.left			{flex: 1; margin-right:.5em}
.right			{flex: 1;}
.left img		{max-width: 100%; height: auto; display: block;-webkit-user-drag: none; user-drag: none;}

.music-player {background-color:#2b2b2b; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: flex;  flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
.progress	{width:99%;/* visibility:hidden; */cursor:pointer;margin-top: .5em;}

#sumtime, #currtime	{color:#ccc; font-size:10px; position:absolute;/* display:none;*/ margin-top:.3em}
#sumtime			{margin-left:37em}
#currtime			{float:right}

#progress-text		{font-size: 11px; text-align: center;}
  
.clsTape{background:url(../images/tape.png) no-repeat; height:14em;}

.boxall 				{display:flex; justify-content: center; gap:10px}
.clsTrackBox 			{width:99%; max-width:99%}

.clsTrackList			{margin:1.5em 0 0 0; line-height:200%; font-family: 'Inter', Arial, sans-serif; width:95%; max-width:95%}

.tracklist h4			{color:#eee}
.tracklist ul			{padding:0}
.tracklist ul li  		{list-style:none!important; padding: 0 0 0 4px; text-align:left; font-size:12px; color: #fff;border-radius: 4px; user-select:none; opacity:0.8 }
.tracklist li 			{cursor: pointer;}
.tracklist ul li:hover	{opacity:1}
.tracklist li.playing 	{background-color:#de5c3a;color: white;font-weight: bold;opacity:0.9}

.clsCover				{margin: 0 0 12px 0px; width: 99%; border-radius:8px; max-width:99%; height: auto; display: block;}
#titel					{font-size:13px; font-weight:bold; color:#fff; text-overflow:ellipsis; white-space: nowrap; max-width: 40ch; letter-spacing:1px}
audio {display:none}

.volBox	{margin: .8em 0 0 1.8em;}
.volBox	#speakerIcon {position:absolute;margin: 3px 0 0 0;}

#volume   			 {padding: 1em 0 0 0; margin:0 0 0 2em}

.clsTimeCode		 {margin-top:-.8em}


.clsBtnContrBox		 {margin-top:1em}
.controls			 {margin-top:1em}
.controls button   	 {margin: 6px 8px 0 8px; border: none; background-color: #de5c3a; color: white; height:30px; width:30px;border-radius: 50%; cursor: pointer;-webkit-appearance: none; appearance: none; opacity:0.8; line-height:100%}
.controls button:hover		{opacity:1}

.controls #play, #switchSrcBtn	{height:48px; width:48px;}
#prev, #next		{margin-top:1em}
#prev				{margin-left:8em}

/*# Karaoke-Btn switchSrcBtn*/
.clsOn							{background: #de5c3a!important; border:1px solid #de5c3a; cursor:pointer}
.clsOff							{background:transparent;border:none;cursor:default}
.clsReady						{background:transparent;border:1px solid #de5c3a; cursor:pointer}
.clsReady:hover					{background-color:#3a3a3a}

#switchSrcBtn					{margin: 6px 8px 0 8px; border-radius: 50%; cursor: opacity:0.8; line-height:100%;font-size:1.4em; margin:1em 0 0 auto;}


.clsBgrActive					{background-color: #de5c3a!important}

.controls-center { margin: 0 auto; display: flex; gap: 10px;}
.clsControlBtn				{margin-top:1em}


#points				 {opacity:0.8; float:right; cursor:pointer; user-select:none;font-size:1.5em; color:#fff;}
#points:hover		 {opacity:1}

.clsMenuebox			{width: 22em; background: #fff; border-radius: 6px; padding: 8px; font-size: .8em; color: #000; margin: 2.5em 0 0 9.5em; display:none;position: absolute; z-index: 100; opacity:.9; cursor:pointer}
.clsMenuebox:hover		{opacity:1}
#newAlb, #zipdown		{display:flex}
#newAlb					{border-top: 1px solid #ccc;}

.clsItemSymbol		    {width: 20px; height: 20px; background-color: #fff; border:1px solid #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size:20px; margin: .3em .3em 0 0;}
.clsItemVal				{margin: .5em 0 .5em .5em;}

#menubox			 {background:#2b2b2b; color:#fff;border:solid 1px #2b2b2b; border-radius:6px; padding:6px 3px 6px 16px; margin:0 0 1em 0; font-size:13px; opacity:0.8; user-select:none}
#menubox:hover		 {opacity:1; border:solid 1px #f60}	
	
.clsDownArrow, .clsDownArrowRotate	{float:right; font-size:24px; margin-right: 3px; cursor:pointer}
.clsDownArrowRotate	{rotate:180deg}


#menuboxFull		{display:none; background:#eee; border-radius:6px; padding:12px;position: absolute; width:45em; z-index:50; user-select:none; max-height:34em; overflow:auto}
#menuboxFull h4		{color:#fff; margin-bottom:1em; background-color:#bab8b8; border-radius:6px 6px 0 0; padding:6px; font-size:14px}	
.menuboxFullSub		{display:flex;gap: 20px; color:#000; font-size:14px; font-weight:normal; margin:0 0 .5em 0; cursor:pointer; border-radius:6px; padding: 12px 0 0 12px;line-height: 140%;}
.menuboxFullSub:hover {background-color:#e7e5e5}		

#menuboxFull img	{height:80px; width:80px; border-radius:6px; opacity:0.8; border:solid 2px #fff;}
#menuboxFull img:hover	{opacity:1}

.menuboxActive img  	{border:solid 2px #f60 !important;border-radius:6px; opacity:1 !important}
.menuboxFullSubActive	{background-color:#e7e5e5; color:#666; cursor:default}
.clsAlbTitle			{font-weight:bold}
.clsAlbSubTitle			{font-weight:normal; font-size:12px}

@media (max-width:600px){
  .container			{flex-direction: column;}
  .music-player			{flex-direction: column;}
  .menuboxFullSub		{font-weight:bold}
}

@media screen and ( max-width:480px ){
	.controls button {margin: 6px 10px 0 10px; opacity:1}	
	#menuboxFull img {opacity:1}
	.clsCover		 {width: 99%;}

	.clsMenuebox 		 {margin-top:.5em; font-size:2em}
	.clsMldDl		 {margin:4.5em 0 0 0em}

	#sumtime		 {margin-left: 22em;}
	
	.tracklist ul li {font-size:15px;width:300px; max-width: 40ch;}
	
	.clsTrackList	 {line-height:210%; max-width:95%}
	.tracklist h4	 {border-top:1px solid #fff; padding-top:12px}
	.clsTrackBox	 {margin-top:1em} 
	#menuboxFull	 {width:19.8em; max-height:21em}
	.menuboxFullSub	{font-weight:bold}
}

@media screen and ( max-width:580px ){
	.clsCover		 {width: 99%;}
	.clsTrackList	 {max-width:93%}
	#sumtime		{margin-left: 31em;}
}
/* Smartphones Landscape / kleine Tablets */
@media screen and ( max-width:760px ){
	.clsMenuebox   	{margin-left:0em; font-size:2em; opacity:1}
	.menuboxFullSub	{font-weight:bold}
	#menuboxFull	{max-height:15em}
	.left			{margin-right:0}
	.clsTrackList	{max-width:95%}
	.tracklist ul li {font-size:15px;; max-width: 40ch;}
}

@media screen and ( max-width:780px ){
	.clsItemVal 	{font-size:.45em}
	.clsMenuebox	{width:9em; opacity:1}
	#points			{margin:.3em 0 0 0}
		
	/*#sumtime		{margin-left: 27.5em;}*/
	.clsTrackList	 {max-width:95%}
	.tracklist ul li {font-size:14px; flex: 1; min-width: 0;overflow: hidden;text-overflow: ellipsis;  white-space: nowrap; max-width: 40ch;}
	.menuboxFullSub	{font-weight:bold}
	#menuboxFull	{max-height:21em}
	.left			{margin-right:0}
}
/* Smartphones allgemein */
@media (max-width: 760px) {

#titel{font-size:14px}
#prev				{margin-left:5em}
  /* Hochformat */
  @media (orientation: portrait) {
    #sumtime 		{margin-left: 29.5em;}
	#menuServiceBox		{margin:1.3em 0 0 0}
  }

  /* Querformat */
  @media (orientation: landscape) {
    #sumtime 		{margin-left: 30.5em;}
	#menuServiceBox		{margin:1.3em 0 0 1em}
	
  }
}

/* Tablets */
@media (min-width: 1024px) {}

.controls #play[data-state="pause"] {border-radius:12px};