/*------------------------audioplayer-------------------------------*/
:root
{

	--media-main-color:var(--root-main-color);
	--media-2shade-darker:var(--root-accent2-2shade-darker);
	--media-main-text-color:var(--root-main-text-color);
	--media-accent-color:var(--root-accent-2shade-lighter);
	
	--media-row-size:var(--root-row-size);
	--media-global-spacing:var(--root-global-spacing);
	--media-large-text:var(--root-large-text);
	--media-med-text:var(--root-med-text);
	--media-small-text:var(--root-small-text);
	--media-large-text-center:calc((var(--media-row-size) - var(--media-large-text))/2);
	--media-med-text-center:calc((var(--media-row-size) - var(--media-med-text))/2);
	--media-small-text-center:calc((var(--media-row-size) - var(--media-small-text))/2);
	--media-font-correction-factor:.95em;
	--media-large-text-font:var(--root-large-text-font);
	--media-med-text-font:var(--root-med-text-font);
}

#mediaplayer
{
 	width:100%;
 	margin:0 0;
	box-sizing: border-box;
	vertical-align:text-top;
	font-size:var(--media-row-size);
	display:flex;
	flex-wrap:wrap;
	color:var(--media-main-text-color);
	
	
}
#mediaplayer>*
{
	
}
#hiddenimagechecker
{
	display:none;
}

#audioplayer
{
	
	flex-grow:1;
	flex-shrink:0;
	flex-basis:300px;
	box-sizing: border-box;
	/*background-color:var(--media-main-color);*/
	color:var(--media-3shade-lighter);
	display:grid;
	grid-template-columns:70% 30%;
	grid-template-rows:calc(2*var(--media-row-size)) var(--media-row-size) var(--media-row-size) calc(2*var(--media-row-size));
	align-items:start;
	position:relative;
	overflow:hidden;
	/*padding:var(--media-global-spacing) var(--media-global-spacing);*/
	max-width:480px;
	
}

#audioplayer>*
{
/*background-color:var(--media-2shade-darker);*/
}

#playersongtitle
{
	font-size:var(--media-large-text);
	height:calc(1.5*var(--media-row-size));
   	grid-column-start:1;
	grid-column-end:2;
	grid-row-start:1;
	grid-row-end:2;
	box-sizing: border-box;
	/*padding-top:calc(var(--media-large-text-center) + var(--media-row-size)/4);*/
	/*padding-left:var(--media-global-spacing);*/
	padding-bottom:calc(var(--media-globalspacing)*2);
	/*background-color:var(--media-accent-color);*/
	line-height:var(--media-font-correction-factor);
}

#playerartist
{
	font-size:var(--media-med-text);

	height:calc(1.5*var(--media-row-size));
	text-align:right;
	grid-column-start:2;
	grid-column-end:3;
	grid-row-start:1;
	grid-row-end:2;
	box-sizing: border-box;
	padding-top:calc(var(--media-med-text-center) + var(--media-row-size)/4);
	/*padding-right:var(--media-global-spacing);*/
	/*background-color:var(--media-accent-color);*/
	line-height:var(--media-font-correction-factor);
}

#playerservice
{
	
	
	display:flex;
	justify-content: space-between;
    grid-column-start:1;
	grid-column-end:3;
	grid-row-start:2;
	grid-row-end:3;
	width:100%;
	box-sizing: border-box;
	height:var(--media-row-size);
	padding-top:var(--media-global-spacing);
	line-height:var(--media-font-correction-factor);
	padding-left: var(--media-global-spacing);
	padding-right: var(--media-global-spacing);
}
.mix, .songwriting, .recording
{
	/*background-color:var(--media-3shade-lighter);*/
	color:var(--media-3shade-darker);
	padding:calc((var(--media-row-size) - var(--media-small-text) - var(--media-global-spacing))/2) var(--media-global-spacing);
	display:inline-block;
	font-size:var(--media-small-text);
	line-height:var(--media-small-text);
	vertical-align:top;
	
	/*transition: color 0s ease-in-out;
	transition: background-color .1s ease-in-out;*/
}
.mix:hover, .songwriting:hover, .recording:hover
{
	background-color:var(--media-accent-color);
	color:var(--media-3shade-lighter);
	
}
#controls
{
 	text-align:left;
 	height:var(--media-row-size);
 	width:100%;
	grid-column-start:1;
	grid-column-end:2;
	grid-row-start:3;
	grid-row-end:4;
	box-sizing: border-box;
	/*padding-left:var(--media-global-spacing);*/
}

#controls:after
{
	content: url('MediaPlayerAssets/PlayButtonOver.png')
	         url('MediaPlayerAssets/PauseButtonOver.png')
			 url('MediaPlayerAssets/PauseButton.png')
			 url('MediaPlayerAssets/PrevButtonOver.png')
			 url('MediaPlayerAssets/NextButtonOver.png');
	visibility:hidden;
	position:absolute;		 
	clear:both;
}

.transportbutton
{
	text-align:center;
    float:left;
	position:relative;
  	align-self:center;
    background-color:transparent;
	box-sizing:border-box;
	width:var(--media-row-size);
	height:var(--media-row-size);
	padding:0px 0px;
	box-sizing: border-box;
	transition: opacity .1s ease-in-out;
	opacity:1;
}
.transportbutton img
{
	
	height:var(--media-row-size);
	width:var(--media-row-size);

}
.transtop
{
	position:relative;
	transition:filter .1s ease-in-out;
	z-index:2;
	filter: invert(0);
}

.transtop:hover
{
	cursor:pointer;
	filter:invert(100);
	
}

#seektime
{	
	font-size:var(--media-med-text);
	height:var(--media-row-size);
	text-align:right;
   	align-self:end;
  	grid-column-start:2;
	grid-column-end:3;
	grid-row-start:3;
	grid-row-end:4;
	box-sizing: border-box;
    padding-top:var(--media-med-text-center);
	padding-right:var(--media-global-spacing);
	line-height:var(--media-font-correction-factor);
}

#seekbar
{
	grid-column-start:1;
	grid-column-end:3;
	grid-row-start:4;
	grid-row-end:5;
	height:calc(var(--media-row-size)*2);
	overflow:hidden;
	position:relative;
	box-sizing: content-box;
	isolation:isolate;
}

#seekbar:hover
{
	cursor:pointer;
}

#seekcontainer
{
	height:calc((var(--media-row-size)*2) - var(--media-global-spacing));
	margin:0px 0px var(--media-global-spacing) 0px;
	position:relative;
}

#waveReadout
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:2;
	box-sizing: content-box;
	background-color:var(--media-2shade-darker);
}

#seekmessage
{
	position:absolute;
	color:var(--media-2shade-darker);
	top:12px;
	font-size:var(--media-med-text);
	line-height:var(--media-med-text);
	padding:var(--media-med-text-padding) 0px;
	width:100%;
	text-align:center;
	box-sizing: content-box;
	line-height:var(--media-font-correction-factor);
	mix-blend-mode: luminosity;
}

#played
{
	background-color:var(--media-accent-color);
	height:100%;
	position:absolute;
	top:0px;
	width:0%;
	z-index:5;
	mix-blend-mode: darken;
	box-sizing: border-box;
}

/*-------------------------playlist-------------*/

#playlist
{
	/*background-color:var(--media-main-color);*/
	box-sizing: border-box;
	display:block;
	/*padding:var(--media-global-spacing) var(--media-global-spacing);*/
	position:relative;
	overflow:hidden;
	flex-grow:1;
	flex-shrink:0;
	flex-basis:300px;

}
.songheader img
{
	display:none;
}

.songheader{
	height:var(--media-row-size);
	font-size:var(--media-med-text);

	display:flex;
	/*background-color:var(--media-3shade-lighter);*/
	color:var(--media-main-text-color);
	opacity:1;
	/*padding:var(--media-med-text-center) var(--media-global-spacing);*/
	padding:var(--media-med-text-center) 0px;
	box-sizing: border-box;
	position:relative;
	
	vertical-align:top;
	width:100%;
}
.songselected
{
	background-image:linear-gradient(90deg, var(--media-2shade-darker) 0%, var(--media-2shade-darker) 50%, transparent 100%);
	/*-webkit-animation: pulsate 20s linear infinite;
    	-moz-animation: pulsate 20s linear infinite;
    	animation: pulsate 1s linear infinite;*/
    	opacity:1;
}

@keyframes pulsate {
0% {background-color: var(--media-2shade-darker);color:var(--media-3shade-lighter);)}
50% {background-color: var(--media-main-color);color:var(--media-3shade-lighter);}
100% {background-color: var(--media-2shade-darker);color:var(--media-3shade-lighter);}
}

.songheader .songtitle, .songheader .artist
{
	width:50%;
	display:inline-block;
	vertical-align:top;
	padding:0px 0px;
	line-height:var(--media-font-correction-factor);
}

.songheader .artist
{

	text-align:right;
}

.songheader:hover
{
	cursor:pointer;
	opacity:.75;
}

.songheader .services
{
	display:none;

}