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}

.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; cursor:pointer}
#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%; user-select:none}
.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}
.clsControlBtn button		{user-select:none}

#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;}
.clsMenuebox:hover			{opacity:1}
#newAlb, #zipdown			{display:flex; cursor:pointer}
#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}

/*Downloadstatus*/
#progress-bar			{background:#f60; height:0; width:0; max-width:99%; border-radius:8px}
#progress-text			{font-size: 11px; text-align: center; color: #555}

.ticker					{width:99%}
#titel					{display:block}




@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}
	.ticker				{max-width:95%}
	 #titel				{overflow:hidden;text-overflow: ellipsis; white-space: nowrap; max-width: 40ch;}
  }

  /* Querformat */
  @media (orientation: landscape) {
    #sumtime 		{margin-left: 30.5em;}
	#menuServiceBox		{margin:1.3em 0 0 1em}
	#titel				{overflow:hidden;text-overflow: ellipsis; white-space: nowrap; max-width: 40ch;}
	
  }
}

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

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