:root{
	--background: #001818; /*hsl(180, 100%, 4.71%)*/
	--highlight: #095757; /*hsl(180, 81.25%, 18.82%)*/
	--foreground: #073636; /*hsl(180, 77.05%, 11.96%)*/
}

body{
	background:hsl(var(--hue), 100%, 4.71%);
	color:white;
	font-family: arial;
	overflow-y: hidden;
	margin: 0;
	padding: 0;
}
#header{
	width:100%;
	font-size: 20px;
	border-bottom: 2px solid hsl(var(--hue), 81.25%, 18.82%);
	background: hsl(var(--hue), 77.05%, 11.96%);
	margin-bottom: 10px;
	height: 32px;
	line-height: 32px;
	position: fixed;
	top: 0;
	text-align: center;
}
#title{
	font-size:36px;
/* 	text-shadow: 0 0 10px #7cb3af; */
}
#cover{
	width:400px;
	border: 2px solid hsl(var(--hue), 81.25%, 18.82%);
	border-radius: 10px;
	margin-top: 10px;
	background: hsl(var(--hue), 82.98%, 9.22%);
}
#avitar{
	height:46px;
	width:46px;
	border: 2px solid hsl(var(--hue), 81.25%, 18.82%);
	border-radius: 10px;
	background: hsl(var(--hue), 82.98%, 9.22%);
	margin-right: 5px;
}
#sidebar{
	width: 388px;
	top: 32px;
	position: fixed;
}
#sidebar p{
	padding-top:10px;
	padding-left:5px;
	margin:0px;
}
#list{
	top: 42px;
	width: calc(100vw - 400px);
	height: calc(100vh - 40px);
	overflow: auto;
	position: fixed;
	right: 0px;
	scrollbar-color: hsl(var(--hue), 77.05%, 11.96%) transparent;
}
.list_element, #mediaplayer{
	transition: margin 0.5s, bottom 0.5s, visibility 0.5s;
}
.list_element{
	background: hsl(var(--hue), 77.05%, 11.96%);
	padding: 10px;
	margin: 0 10px 10px 10px;
	transition: background 0.1s;
	border: 2px solid hsl(var(--hue), 81.25%, 18.82%);
	border-radius: 10px;
/* 	text-shadow: 0 0 5px #7cb3af; */
	cursor: context-menu;
}
#list.playing .list_element:last-child{
	margin-bottom: 110px;
}
.list_element:hover, .list_element.selected{
	background-color: hsl(var(--hue), 79.44%, 20.98%);
}
.missing{
	background-color: #2f2f2f;
	border: 2px solid #515151;
	text-shadow: none;
	color: #515151;
	cursor:no-drop;
/* 	background-image: url("merchant.png"); */
 	background-repeat: no-repeat;
	background-position: 100% -33px;
     background-size: 156px;
	&:hover{
		background-color: #3a3434;
		background-image: url("merchant.png");
		background-repeat: no-repeat;
		background-position: 100% -33px;
    	background-size: 156px;
	}
}
#mediaplayer {
	position: fixed;
	bottom: -100px;
	left: 0px;
	width: 100%;
	height: 100px;
	border-top: 2px solid hsl(var(--hue), 81.25%, 18.82%);
	background: hsl(var(--hue), 100%, 3.73%);
	visibility: hidden;
}
#mediaplayer.playing{
	bottom: 0px;
	visibility: inherit;
}
#info{
	font-size: 20px;
	padding: 10px;
/* 	text-shadow: 0 0 10px #7cb3af; */
}
a{
	color:white;
}
#close {
	top: 10px;
	right: 10px;
	position: absolute;
	cursor: pointer;
	&:hover {
		color: #3fa1f7;
	}
}
@supports (-moz-appearance:none) {
	#close {
		cursor: default;
	}
}
#close:hover::before {
	content: 'Close ';
}
.back {
	position: absolute;
	top: 0;
	left: 10px;
}
.back a {
	text-decoration: none;
	color: hsl(var(--hue), 81.25%, 18.82%);
	transition: color 0.1s;
	&:hover{
		color: white;
	}
}
#player{
	position: absolute;
	bottom: 0px;
	left: 65px;
	width: calc(100vw - 60px);
	height: 40px;
	filter: invert(1);
	&::-webkit-media-controls-enclosure {
		border-radius: 0;
	}
	&::-webkit-media-controls-panel {
		background-color: hsl(calc(var(--hue) + 180deg), 100%, 96.27%);
	}
	&::-webkit-media-controls-play-button {
		scale: 2;
		margin-right: 5px;
	}
}
@supports (-moz-appearance:none) {
	#player {
		filter: inherit;
		height: 30px;
	}
}
#rewind{
	left: 5px;
}
#fastforward{
	left: 35px;
	transform: scale(-1, 1);
}
#rewind, #fastforward{
	position: absolute;
	bottom: 0px;
	width: 30px;
	height: 40px;
	background-image: url('rewind.svg');
	background-size: 16px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}
@supports (-moz-appearance:none) {
	#rewind, #fastforward {
		height: 30px;
		&:hover{
			cursor: default;
			filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(195deg) brightness(118%) contrast(119%);
		}
	}
}
/*.list_element.missing:hover::after {
  content: "SHUT IT DOWN";
  display: block;
  text-align: right;
  margin-bottom: -18px;
  color: red;
}
*/
.tag {
  border: 2px solid hsl(var(--hue), 81.25%, 18.82%);
  border-radius: 5px;
  padding: 3px;
  display: inline-block;
  margin-bottom: 6px;
  margin-right: 3px;
}
td{
	padding:0;
	margin:0;
}
table{
	margin-top:10px;
	margin-left: 5px;
}
#syncbox {
    margin-left: 5px;
}
#syncframe{
	border: none;
	background-image: url('loading.gif');
	background-size: 40px;
	background-repeat: no-repeat;
	background-position: center;
}