/* (PART A) WHOLE PAGE */
* {
  box-sizing: border-box;
} 

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


/* PLAYER LAYOUT ELEMENTS */

#title_box {
  	margin-top: 90px; margin-left: auto; margin-right: auto;
	padding: 2px; padding-top: 5px; padding-left: 5px;
	border: 2px solid #B19376; border-style: outset;			 /* FRAME SELECTED */
	  	
	font-family: topaz_font, sans-serif; font-size: 16px; font-weight: normal; text-align: left;  text-shadow: 0 0 0.5em #000;
	background: #B4967A; color: #EDCBAC;

	flex-wrap: wrap;
	min-width: 400px; max-width: 600px;
	
		 /*  background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
	  B19F7B
	  opacity: 0.8;
 -webkit-background-clip: text;*/

	
	
	}
#separator {
	margin-left: auto; margin-right: auto; margin-top: 4px;
	margin-left: auto; margin-right: auto; margin-top: 4px;
	padding: 2px; padding-top: 5px;
	border: 2px solid #B19376; border-style: outset;			/* FRAME SELECTED */

	font-family: topaz_font, sans-serif; font-size: 16px; font-weight: normal; text-align: center; text-shadow: 2px 2px #444;
	background: #B4967A; color: #DDD;

	flex-wrap: wrap;
	min-width: 400px; max-width: 600px;
	}
#player_footer {
	margin-bottom: 20px; margin-left: auto; margin-right: auto;
	padding: 12px; padding-top: 5px; padding-bottom: 5px;
	border: 2px solid #FA9; border-style: outset;			/* FRAME SELECTED */

	font-family: topaz8_font, sans-serif; font-size: 16px; font-weight: normal; text-align: right; text-shadow: 2px 2px #222;
	background: #8A7AFF; color: #FFF;
	
	flex-wrap: wrap;
	min-width: 400px; max-width: 600px;
	
	  background-image: linear-gradient(green, yellow, orange, red);
	  
	  opacity: 0.5;
  /*-webkit-background-clip: text;*/

	
	
	
	}
	.player_footer {

}
	
	
	

.left_timer_box {
    display: flex;
    flex-direction: column;
	margin-left: 5px;
	}
.main_panel_box {
	width: 80%;
    display: flex;
    flex-direction: column;
	margin-left: 5px;
	}




/* (PART B) WRAPPER & LAYOUT */

#player {

	background: #EDCBAC; color: #666;

	padding: 4px; margin-left: auto; margin-right: auto; /* GLOBAL PLAYER PADDING */							
	border: 2px solid #B19376; border-style: outset;	     
	font-family: topaz8_font, sans-serif; font-size: 16px; font-weight: normal; text-shadow: 2px 2px #222;
	color: #000;
	min-width: 400px; max-width: 600px;
	flex-wrap: wrap;
	}


/* (PART D) CURRENT SONG NAME & CONTROLS (D1) WRAPPER & SHARED 


*/

#playControls { width: calc(100% - 120px); padding-left: 10px; } /* FIT 2 FRAME */

#player input[type="range"] { /* SEEK BAR */


	padding: 0; margin: 0;
	margin-top: 4px;

	border: 2px solid #000; border-radius: 5px; border-style: inset;  /* FRAME */
	
	}
	
	
	
/* SONG IMAGE 	*/

#playImg {

	width: 100px; height: 38px;
 	aspect-ratio: 16/9; object-fit: cover; 
	border: 2px solid #000;   border-radius: 4px; border-style: inset; /* FRAME */
	margin-bottom: 2px;
	}



/* TIMER / COUNTER */

#playTimeN { /* TIME COUNTER (RED DISPLAY) */

	width: 100px; height: 38px; margin-bottom: 2px;
	aspect-ratio: 1/1; object-fit: cover; 
	border: 2px solid #666; border-radius: 4px; border-style: inset; /* FRAME */
	padding-top: 3px; 
	font-family: digi_font, sans-serif; font-size: 26px; font-weight: normal;
	color: #000;
	padding-top: 3px; 
	text-align: center; text-shadow: 0 0 0.5em #000;
	background: #B4967A; /* 7-SEG DISPLAY BG */  
	}


#playTimeT { /* TIME LENGTH (GREEN DISPLAY)*/

	width: 100px; height: 38px;  margin-bottom: 2px;
	aspect-ratio: 1/1; object-fit: cover; 
	border: 2px solid #666;   border-radius: 4px; border-style: inset; /* FRAME */

	font-family: digi_font, sans-serif;	font-size: 26px; font-weight: normal; 
	color: #000;
	padding-top: 3px; 
	text-align: center; text-shadow: 0 0 0.5em #000;
	background: #B4967A; /* 7-SEG DISPLAY BG */  
	}

/* --------------------------------- Song Name Box ---------------------------- */

#playName { 
	margin-bottom: 2px;
	padding-top: 4px; 
	width: 100%; height: 38px;

	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  	font-family: topaz_font, sans-serif; font-size: 16px; font-weight: normal;
	text-shadow: 0 0 12px #333; text-align: center;
	background: #B4967A; color: #000; /* (DARK / MWB - PINK) */
	border: 2px solid #666; border-radius: 3px; border-style: inset; 
	
	
}
		


/* --------------------------------- Controls Box ---------------------------- */
#controlBar { 
	white-space: nowrap; overflow: hidden; 
	margin-bottom: 2px;
	width: 100%; height: 38px;
	border: 2px solid #666; border-radius: 3px; border-style: inset;  /* FRAME */
	background: #B4967A; color: #8A7AFF;
	text-align: center;
	}
	
#playButtons {
	width: 180px;
	padding-left: 2px; padding-top: 4px;
	margin-top: 0px;
	/* border: 2px solid #F1A; border-radius: 3px; border-style: inset;  */
	}
	
	/* ----------------------------- Buttons / Icons ------------------------ */
	
[class*=" icon-"],[class^=icon-]{
	color: #84664A;
	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:"\ea1c";background: #EDCBAC; }
.icon-pause2:before{content:"\ea1d"}
.icon-previous2:before{content:"\ea23"}
.icon-next2:before{content:"\ea24"}
.icon-volume-high:before{content:"\ea26"}
.icon-volume-mute2:before{content:"\ea2a"}



#playLast, #playTog, #playNext, #volume-icon { 
	cursor: pointer; 
}

#playLast, #playTog, #playNext {
	margin-right: 5px; 
	padding:2px; 
	font-size: 16px; 
	flex-grow: 1; 

	border: 2px solid #111;   
	border-radius: 5px; 
	border-style: outset; /* FRAME */
	background: #EDCBAC;
	}

/* --------------------------------- Volume box ---------------------------- */
	

#volumeMute { /* VOLUME MUTE ICON */
	width: 52px;
	margin-right: 5px; 
	padding:2px; 
	font-size: 16px; 
	flex-grow: 1; 
	margin-top: -24px;
	margin-left: 220px;
	background: #EDCBAC;
	border: 2px solid #84664A; border-radius: 5px; border-style: outset; /* FRAME */
	}
	 
#volume-icon { /* VOLUME SPEAKER ICO */ 

	padding: 2px;
	margin-left: 2px;
	width: 32px; height: 32px;
	aspect-ratio: 1/1; object-fit: cover; 
	font-size: 22px; 
	color: #F11;
	margin-right: 5px;  
	background: #0F0;
	
}

/* -------------------- Volume Slider -------------------- */


#volSlider { /* VOLUME SLIDER POS */
	margin-top: -28px;
	margin-left: 90px;
	}
	
#volumeSlider {
	width: 186px; height: 27px;
	background: #8A7A6A; /* VOL SLIDER BG */
	}

.volumeSlider{
    -webkit-appearance: none;
	-webkit-border-radius: 2px;
	position: absolute;
 	cursor: url(../images/pointers/cursor.cur), auto;

 /* overflow: hidden;
   display: block;
	border-style: inset;
	background-color: #FFF;
	border-radius: 0px;
	text-align: right;*/

	}

.volumeSlider::-webkit-slider-thumb{ /* SLIDER BUTTON */
    -webkit-appearance: none;
	-webkit-border-radius: 0px;
	user-select: all; 
	height: 12px;
    width: 22px;
	border-radius: 3px;
	background: #74563A; color: #8A7AFF;
	}

.volumeSlider.active{ 
	color: #FFF; 
	}


/* --------------------------------- Seek Bar box ---------------------------- */

#seekBar { 
	white-space: nowrap; overflow: hidden; 
	width: 100%; height: 38px;
	border: 2px solid #666; border-radius: 3px; border-style: inset;  /* FRAME */
background: #B4967A; color: #8A7AFF;
	text-align: center;
	}
	
.seek_bar { /* TRACK SIZE */
    -webkit-appearance: none;
	-webkit-border-radius: 2px;

   	width: 462px; /* TRACK BAR */
    height: 27px;
	cursor: url(../images/pointers/cursor.cur), auto;

	background-color: #8A7A6A; /* SLIDER BAR BG */
	border-style: inset;
}

.seek_bar::-webkit-slider-thumb{ /* SLIDER SIZE */

    -webkit-appearance: none;
	margin-left: 2px;
    width: 36px;
	height: 12px;
	user-select: all; 
	background: #74563A; color: #8A7AFF;
	cursor: url(../images/pointers/cursor.cur), auto;
	border-radius: 3px;
	}



/* (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;

}


#songLen {

	text-shadow: 2px 2px #222;
	color: #777;
    margin-right: 12px;
}

/* ---------------- (PART E) PLAY LIST ---------------- */

#playList { 
	
	 /* 
	border: 2px solid #B19376;FRAME SELECTED 
    border-style: outset;	*/ 
	    border-right: 2px solid #B19376;
	font-family: topaz_font, sans-serif;
	font-size: 16px;
	font-weight: normal;
	text-shadow: 2px 2px #FFF;
	color: #AAA;
	
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 0px;

	flex-wrap: wrap;
	min-width: 400px; max-width: 600px;
	padding: 2px; border-radius: 0px; /*FILL*/
	background: #8A7A6A; 
}

#playList div {
	padding: 2px; 
	cursor: pointer;
	padding: 2px;
	
	font-family: topaz_font, sans-serif;
	font-size: 16px;
	font-weight: normal;
	text-shadow: 2px 2px #447; /* SHADOW PLAY LIST*/
	}
	
#playList div.current { 
	padding: 2px;
	color: #CCC; /* SELECTOR */
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;


  	font-family: topaz_font, sans-serif;
	font-size: 16px;
	font-weight: normal;
	text-shadow: 2px 2px #447; /* SHADOW PLAY CURRENT*/
	
	
		  animation: blinker 0.2s linear infinite;
	}
	

@keyframes blinker {
        0s% {
          opacity: .9;
        }
        50% {
          opacity: .7;
        }
        100% {
          opacity: .9;
        }
      
}
	
	

#playList div:nth-child(odd) { 
	padding: 2px;
	background: #B4967A; /* FIRST POSITION COLOUR */


	

 	font-family: topaz_font, sans-serif;
	font-size: 16px;
	font-weight: normal;	
	}




.playlist-box {
	overflow: auto;
	width: 600px;
	height: 208px;
	border: 2px solid #B19376; 
	border-style: outset;
	margin-left: auto; margin-right: auto;
	}

/* For browsers that support `scrollbar-*` properties */
@supports (scrollbar-color: auto) {
	.playlist-box {
		scrollbar-color: #74563A;
	}
}

/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
@supports selector(::-webkit-scrollbar) {
	.playlist-box::-webkit-scrollbar { /* TRACK G */
		background: #B4967A;
		border-style: inset;
	}
  
	.playlist-box::-webkit-scrollbar-thumb { /* BUTTON */
	border: 0px solid #B4967A;
	background-color:#74563A;
	border-style: outset;
	border-radius: 1px;
	}
  
	.playlist-box::-webkit-scrollbar-track { /* TRACK BG */
	background: #8A7A6A;
	}
}







/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:255px;} /* WYSOKOŚĆ */
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor: url(../images/pointers/cursor.cur), auto;}
#simp ul li:last-child{padding-bottom:13px;} /* KONIEC LISTY */
#simp ul li:nth-child(odd){background:#333;} /* BAR NIEPARZYSTY */
#simp ul li:hover{background:#666;} /* BAR POD KURSOREM MYSZY */
#simp ul li.simp-active{background:#FB1;color:#000;font-weight: bold;} /* BAR ODTWARZANY /// BAR TEKST ODTWARZANY */
#simp ul li .simp-desc{font-size:100%;opacity:.7;margin-left:15px;} /* JASNOŚĆ TEKSTU CZAS /// CZAS PRZY TYTULE */


.rainbow-text{
	position: relative;
	color: #000;
	background: #fff;
	mix-blend-mode: multiply;
  overflow: hidden;
  
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  padding: 2px 4px 6px;
  margin: -2px -4px -6px;
}
.rainbow-text::before{
	content: "";
	position: absolute;
	top:0;right:0;bottom:0;left:-100%;
	background: white repeating-linear-gradient(90deg, #14ffe9 0%, #ffc800 16.66666%, #ff00e0 33.33333%, #14ffe9 50.0%);
	mix-blend-mode: screen;
	pointer-events: none;
  animation: move 1s linear infinite;
}


/* -- RED 7 SEG STROBO -- 
.red_blink{animation: pulse 0.00001s infinite;}
@keyframes pulse { 0% 
{ color: #F11; } 50%{ opacity: 0.6; } 100% { color: #F11; } } */

/* -- ASSIGN FONTS -- */
@font-face { font-family: topaz_font;  font-style: normal; font-weight: 400; src: url("../fonts/amiga4ever pro2.ttf");}
@font-face { font-family: topaz8_font; font-style: normal; font-weight: 400; src: url("../fonts/topazplus_a1200.ttf");}
@font-face { font-family: menu_font;   font-style: normal; font-weight: 400; src: url("../fonts/sg_0.ttf");}
@font-face { font-family: digi_font;   font-style: normal; font-weight: 400; src: url("../fonts/digital-7 (mono).ttf");}

/*------------ MWB COLORS ---------------
| 000 - black		| A97 - light brown |
| FFF - white		| 999 - light gray	|
| 36A - blue		| AAA - medium gray |
| FA9 - pink pastel	| 777 - dark gray   |
---------------------------------------*/



/* VOLUME SLIDER LAYOUT
.volume-slider{
	
	margin-top: 24px;
    -webkit-appearance: none;
    width: 145px;
    height: 16px;
    position: absolute;

    overflow: hidden;
    opacity: 1;
display: block;
	

	cursor: url(../images/pointers/cursor.cur), auto;
}

 */