@media all {

	:root {
			--background: #121314;
			--background-transparent: rgba(18, 19, 20, 0.6);
			--background-highlight: #272727;
			--background-error: #FFE4E1;
			--text: #A7A97F;
			--text-highlight: #E3E5BB;
			--error: #FF6666;
			--help: #dd0;
			--contrast-low: #000000;
			--contrast-high: #ffffff;
			--text-tiny: .7em;
			--text-small: .8em;
			--text-smaller: .9em;
			--text-normal: 1em;
			--text-larger: 1.2em;
			--text-quite-big: 1.5em;
			--text-big: 2em;
	}

	@keyframes blink1 {
		 0% { opacity: 0; }
		 33% { opacity: 1; }
		 66% { opacity: 0; }
		 100% { opacity: 0; }
	}

	@keyframes blink2 {
		 0% { opacity: 0; }
		 33% { opacity: 0; }
		 66% { opacity: 1; }
		 100% { opacity: 0; }
	}

	@keyframes blink3 {
		 0% { opacity: 0; }
		 33% { opacity: 0; }
		 66% { opacity: 0; }
		 100% { opacity: 1; }
	}

	#big-cover {
		max-width: 70vw;
		padding-top: 100%;
		position: relative;
	}

	#album-art, 
	.logo-player,
	#big-cover .default-poster {
		vertical-align: middle;
		display:block;
		transition: src .5s ease;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		max-width: unset;
		max-height: unset;
		margin-left: 0;
	}

	.logo-background {
		fill: var(--text);
	}

	.logo-highlight {
		fill: var(--text-highlight);
	}

	.ui-menu-item-wrapper:hover .menu-svg g,
	.menu-svg:hover g {
		fill: #121314;
	}

	.blink1 {
	 animation: blink1 1s linear infinite;
	}

	.blink2 {
	 animation: blink2 1s linear infinite;
	}

	.blink3 {
	 animation: blink3 1s linear infinite;
	}

	::-webkit-scrollbar {
		width: .3em;
		height: .3em;
	}

	/* I don't like the default space between icon and text in fancytree with fontawesome5 */
	span.fancytree-title {
		margin-left: 8px;
	}

	/* Override widget header border */
	.ui-widget-header {
		border-top: 0;
		border-left: 0;
		border-right: 0;
	}

	/* Fix for https://stackoverflow.com/questions/41777517/fancy-tree-icon-alignment-as-vertical-center in fancytree with fontawesome5 */
	span.fancytree-title,
	span.fancytree-icon,
	span.fancytree-expander{
		vertical-align: baseline;
	}

	.fancytree-treefocus span.fancytree-active span.fancytree-title, .fancytree-treefocus span.fancytree-selected span.fancytree-title {
		outline: 1px dotted var(--text-highlight);
		color: var(--text-highlight)!important;
		background-color: transparent;
	}

	hr {
		background-color: var(--text);
		height: 1px;
		border: 0;
	}

	legend {
		border-style: none;
		background-color: var(--text);
		font-weight: bold;
		Color: var(--text-highlight);
		width: 30%;
		padding-left: 10px;
	}

/*
	.fancytree-treefocus span.fancytree-active span.fancytree-title:after,
	 .fancytree-treefocus span.fancytree-selected span.fancytree-title:after {
		content: '\00a0\00a0\2039';
 }
*/

	#playlist-tools {
		position: sticky;
		margin: -1.3em;
		top: 0em;
		padding: .5em .5em .5em .5em;
		box-shadow: 0 -5px 15px -5px var(--background-highlight);
		background: var(--background-highlight);
		z-index: 1;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		/* https://stackoverflow.com/questions/36378512/backdrop-filter-extends-beyond-border-radius --> there's still a bug in chrome where backdrop filter extends beyond border-radius... don't try to fix that! */
	}

	@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
		#playlist-tools {
		background: none;
		box-shadow: 0 0;
		}

		.magic, 
		#playlist-tools {
			-webkit-backdrop-filter: blur(50px) opacity(40%);
			backdrop-filter: blur(50px) opacity(40%);
		}
	}

	.magic {
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	}

	.small {
		font-size: var(--text-tiny);
	}

	#big-player {
		height: 100vh;
	}

	#big-player-bottom {
		display: flex;
		flex-direction: column;
		height: 20vh;
		justify-content: center;
	}

	#playlist_select {
		margin-left: .5em;
	}

	#ham {
	display: none;
	}

	#includeOldAlbums {
		display: none;
	}

	.move-up,
	.move-down {
		margin-right: 0.5em;
	}

	.space-after {
		margin-right: 0.8em;
	}

	.settings {
		margin-bottom: 0.5em;
	}

	.settings-sub {
		font-size: var(--text-smaller);
		padding-left: 1.5em;
	}

	.theme_opts {
		padding-left: 2em;
	}

	.settings-option {
		font-size: var(--text-small);
	}

	.hidden {
		display: none!important;
	}

	.ui-slider-range {
		background: var(--text-highlight);
	}

	span.ui-slider-handle.ui-state-default {
		top: -.2em;
		opacity: 0;
		height: .5em;
		width: .5em;
		background: var(--text-highlight);
		border: 1px solid var(--text);
	}

	#big-cover:hover #big-volume-bar {
	opacity: 1;
	border: 1px solid var(--text-highlight);
	transition: border 2s ease;
	transition: opacity 2s ease, border 2s ease;
	
	}

	.ui-tabs .ui-tabs-nav {
		border-bottom: 1px solid var(--text);
	}
	
	.ui-menu {
		border: 1px solid var(--text)!important;
		background-color: var(--background-highlight)!important;
	}

	span.fancytree-active span.fancytree-title, span.fancytree-selected span.fancytree-title {
		background-color: transparent;
	}

	mark {
		text-decoration: underline;
    background-color: rgba(0, 0, 0, 0);
	}

	#loading {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    opacity: 0.7
	}
	
	#loading,
	#playlistSpinner {
    width: 100%;
    height: 100%;
    text-align: center;
	}

	#playlistSpinner {
    margin-top: 50%;
	}

	#resync {
		display: none;
	}

	/* tabs */
	.ui-widget-header { }

	.ui-menu {
		width: 160px;
	}

	#playlist > li > ul > li:hover,
	a:hover {
		color: var(--text-highlight);
	}

	.toggles,
	#big-jp-progress, 
	.go,
	a,
	#controls > span > i {
		cursor: pointer;
	}

	.is-admin- {
		display:none;
	}

	.remove, .move-up, .move-down, .album-action {
		opacity: 0.5;
	}

	.playlist-tools:hover,
	.remove:hover,
	.move-up:hover,
	.move-down:hover,
	.album-action:hover {
		opacity: 1;
	}

	.playlist-tools:hover,
	.toggles:hover,
	.settings:hover,
	.current,
	a.current,
	.current .fancytree-title,
	.fancytree-title:hover,
	.searchResult a,
	.new,
	input,
	#filter,
	#filterButton,
	#clear,
	#findIt,
	#updateCoverArt,
	.album,
	.remove:hover,
	.download:hover,
	.currentTrack,
	.currentTrack:before,
	#searchLink,
	#logout a,
	#loadingInfo,
	.selected,
	a.infoPanelLink:hover,
	span.current span.fancytree-title mark,
	.fancytree-ext-filter-hide span.fancytree-node.fancytree-match.current span.fancytree-title,
	.fancytree-ext-filter-hidetr.fancytree-match.current span.fancytree-title {
		color: var(--text-highlight);
	}
	
	a.infoPanelLink {
	text-decoration: underline;
	text-decoration-style: dotted;
	}
	
	body,
	#updateCoverArt,
	#aboutBox,
	#helpBox,
	#clear,
	.remove,
	#filterButton,
	#includeOldAlbums,
	#findIt,
	#big-player,
	a,
	#volume-value,
	#updateCoverArt,
	span.fancytree-title,
	mark,
	.fancytree-ext-filter-hide span.fancytree-node.fancytree-match span.fancytree-title,
	.fancytree-ext-filter-hidetr.fancytree-match span.fancytree-title {
		color: var(--text);
	}

	body,
	input,
	.fancytree-node {
		font-family: Montserrat, Verdana, sans-serif;
	}

	.fa-border,
	.fancytree-container {
		border: 0;
	}

	input, 
	select {
		color: var(--text);
		background-color: var(--background);
		border: 1px solid var(--text);
		border-radius: 5px;
	}

	input[type="color"] {
		width: 1.5em;
		height: 1.75em;
		padding:0;
		background: none;
	}

	body {
		margin: 0;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	a {
		text-decoration: none;
	}

	#searchLink:hover {
		text-decoration: none;
	}

	#aboutBox li {
		list-style: none;
		margin-left: 0;
		padding-left: 1em;
		text-indent: -1em;
	}

	#aboutBox li:before {
		content: '\266A';
		padding-right: .5em;
	}

	body,
	#leftPanel,
	#updateCoverArt,
	#aboutBox,
	#helpBox,
	#sharing-banner,
	#volume-value {
		-webkit-user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		background-color: var(--background);
	}

	/* Override leftPanel background so we can use dynamic theme */
	#leftPanel .ui-widget-header, 
	#leftPanel {
		background: none;
	}

	span.fancytree-node,
	ul.fancytree-container,
	#paypalIMG {
		background-color: transparent;
		border: 0;
	}

	#browserPanel,
	#infoPanel,
	#lyricsPanel,
	#settingsPanel,
	#searchPanel,
	#playlistPanel > ul {
		margin-bottom: 5em;
	}

	#panelContainer {
		height: 100%;
		overflow-y: auto;
	}

	#leftPanel {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		border: 0;
		}

	.modal {
		margin-bottom: 3em;
	}

	#playlistPanel > ul {
		padding: .5em;
		margin-top: 3em;
	}

	.ui-menu {
		z-index: 3;
	}

	.playlist-poster {
		max-width: 100px;
		max-height: 100px;
		margin-left: -0.5em;
	}

	#shared-album-cover,
	#shared-qr {
		width: 90%;
		vertical-align: text-bottom;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	#shared-album-cover img, 
	.logo-share {
		border-radius: 5px;
	}

	#shared-album-cover img {
		width: 100%;
		display: block;
	}

	.logo-share {
		vertical-align: middle;
	}

	#shared-album-link {
		width: 95%;
	}

	.fill {
		width: 90%;
	}

	#loadingInfo {
		display: none;
		padding-top: 1em;
		z-index: 3;
		max-width: 35%;
	}

	.big {
		font-size: var(--text-big);
	}

	.bigger {
		height: 2em;
	}

	.move,
	.share, 
	ul.fancytree-container {
		font-size: var(--text-normal);
	}

	.album,
	#nowPlaying_title {
		font-size: var(--text-larger);
	}

	.hits,
	#updateCoverArt {
		font-size: var(--text-smaller);
	}

	#nowPlaying_artist,
	#current_time,
	.artist,
	.year,
	.download,
	#nowPlaying_album,
	#nowPlaying_year,
	#duration {
		font-size: var(--text-small);
	}

	#lyricsPanel,
	#infoPanel {
		font-size: var(--text-smaller);
	}


	#nowPlaying_songtitle {
		height: var(--text-larger);
	}

	#nowPlaying_artist,
	.album-details {
		height: var(--text-normal);
	}

	#infoPanelTitle {
		font-size: var(--text-big);
		padding-top: 1em;
    padding-bottom: 2em;
	}

	.hits {
		margin: 0 .3em;
	}

	#big-player,
	#sharing-banner,
	#wikiHistory,
	#imageViewerPanel {
		text-align: center;
	}

	#imageViewerPanel img {
		max-width: 100%;
	}
	
	#shared-album-qr,
	#shared-album-show-cover {
		display: none;
	}

	.editsection,
	.coveractions {
		display: none;
	}

	#error {
		background-color: var(--background-error);
		color: var(--error);
		padding:7pt;
		position: relative;
		margin: 10pt auto;
		text-align: center;
	}

	.yellow {
		color: var(--help);
	}

	.bold {
		font-weight: bold;
	}

	#big-info {
		text-align: right;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	#filter {
		border: 0;
	}

	#playlist > li > ul > li {
		margin-left: -3em;
	}

	#playlist > li > ul > li:first-child {
		margin-top: 0.5em;
	}


	#playlist > li > ul > li:last-child {
		margin-bottom: 2em;
	}

	.left {
		float: left;
	}

	.align-right {
		text-align: right;
	}

	.right {
		float: right;
	}

	.boxed {
		border: 1px solid var(--background);
		border-radius: .5em;
		background-color: var(--text-highlight);
		padding: .2em;
		vertical-align: middle;
		margin: .5em;
	}

	#updateCoverArt,
	.dummy {
		position: absolute;
		top: 0;
		z-index: 1;
		opacity: 0.1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dummy {
		width: 100%;
		z-index: 0;
	}

	#updateCoverArt {
		z-index: 1;
	}

	#big-cover {
		margin: 0 auto;
		vertical-align: middle;
		border: 0;
		position: relative;
	}

	.album-action,
	.playlist-tools {
		padding-left: 1em;
	}

	.remove {
		float: right;
		font-weight: bold;
	}
	
	.currentTrack {
		margin-left: -0.5em;
	}

	.currentTrack:before {
		content: "\25B6";
		display: inline-block;
		height: 0;
		width: 0;
		left: -1.3em;
		position: relative;
	}

	#big-jp-progress {
		width: 100%;
		margin: 0;
		background: transparent;
		color: var(--text-highlight);
		height: .2em;
		border: 1px solid #bebec1;
		border: 0;
		border-radius: 0;
		position: relative;
		bottom: 0px;
		z-index: 1;
	}

	.hovered,
	#big-volume-bar:hover {
		opacity: 1!important;
	}

	.playlist-poster-container {
		width: 100px;
	}

	#big-volume-bar {
		opacity: 0;
		border-radius: .5em;
		border: 1px solid white;
		width: .2em;
		height: 75%;
		position: absolute;
		bottom: 10%;
		right: 3%;
		z-index: 1;
		background: transparent;
		box-shadow: 20px -20px 50px 50px #2222221f;
	}

	.spread {
		display: flex;
		justify-content: space-between;
		align-items: center
	}

	#big-timer,
	#big-info {
		margin: 0 .2em 0 .2em;
	}

	.nowrap {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#config {
		width: 90%;
		background: none;
	}
	
	#config fieldset {
		border: 1px solid var(--text);
		border-top-width: 2px;
	}
	
	fieldset {
		margin-bottom: 1em;
	}

	#config i {
		margin-left: 1em;
		float: right;
	}

	.indent {
		margin-left: 1em;
	}

	#config input,
	#config select,
	#config select option,
	#config textarea {
		font-family: Montserrat;
		background: var(--contrast-high);
		color: var(--constrast-low);
		margin-left: 1em;
		border: 1px solid var(--text-highlight);
		margin-bottom: .5em;
	}

	.tooltip {
		position: relative;
		display: inline-block;
	}

	.tooltip .tooltiptext {
		font-family: Montserrat;
		font-size: var(--text-small);
		visibility: hidden;
		width: 300px;
		background-color: var(--text);
		color: var(--text-highlight);
		padding: 5px;
		border: 1px solid var(--background);
		position: absolute;
		z-index: 1;
		right: 0;
		top: 2em;
	}

	a.tooltip .tooltiptext {
		width: 8.5em;
		align: center;
	}

	.theme-preview {
		display: inline-block;
		width: 4em;
		height: 2em;
		border: 1px solid black;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
	}

	.logo-about {
		max-width: 50%;
	}

	.landing {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: var(--contrast-high);
		box-sizing: border-box;
		box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
		padding-bottom: 40px;
		border-radius: 3px;
	}

	.logo-landing {
		height: 2em;
		vertical-align: middle;
		overflow: hidden;
	}

	.landing-header {
		height: 5em;
		width: 100%;
		font-size: var(--text-quite-big);
		background: var(--text);
		color: var(--text-highlight);
		line-height: 150%;
		border-radius: 3px 3px 0 0;
		box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
	}

	.landing-form {
		margin: 4em 2em;
		width: 200px;
		display: block;
		border: none;
		padding: 1em 0;
		border-bottom: solid 1px var(--text);
		transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, var(--text) 4%);
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, var(--text) 4%);
		background-position: -200px 0;
		background-size: 200px 100%;
		background-repeat: no-repeat;
		color: var(--text);
	}

	.landing-form:focus,
	.landing-form:valid {
		box-shadow: none;
		outline: none;
		background-position: 0 0;
	}

	.landing-form:focus::-webkit-input-placeholder,
	.landing-form:valid::-webkit-input-placeholder {
		color: var(--text);
		font-size: var(--text-normal);
		-webkit-transform: translateY(-1em);
						transform: translateY(-1em);
		visibility: visible !important;
	}

	.go {
		border: none;
		background: var(--text);
		border-radius: 3px;
		padding: 6px;
		width: 200px;
		color: var(--text-highlight);
		margin-left: 25px;
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
	}

	.go:hover {
		-webkit-transform: translateY(-3px);
				-ms-transform: translateY(-3px);
						transform: translateY(-3px);
		box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
	}

	#playlist,
	#playlist ul{
		list-style: none;
	}

	#playlist-controls {
		margin-left: auto;
		width: 80%;
		margin-right: auto;
	}
	
	#share-actions {
		margin-top: 1em;
    margin-bottom: 1em;
	}

	#share-actions,
	#playlist-controls,
	#big-controls {
		justify-content: space-evenly;
	}
	
	#controls {
		color: var(--text-highlight);
		padding-left: 5%;
		padding-right: 5%;
		justify-content: space-around;
	}

	.big-jp-previous-album,
	.big-jp-next-album {
			display: none;
	}

	/* The highlight colour stuff comes next */

	::-webkit-scrollbar-track {
		background-color:transparent;
	}

	::-webkit-scrollbar-thumb {
		background: var(--text);
	}

	#header {
		height: 2em;
		width: 100%;
		color: var(--text-highlight);
	}

	#mini-controls {
		display: none;
		margin-left: 2em;
	}

	#searchText::-webkit-input-placeholder {
		color: var(--text);
	}

	.ui-button {
		background: var(--background-highlight);
		border: 1px solid var(--text);
		color: var(--text-highlight);
		background-image: url(images/close.svg);
		background-size: .9em;
		background-repeat: round;
	}

	.ui-icon[class*=" fa-"] {
		background: none repeat scroll 0 0 transparent;
		text-indent: 0;
		margin-left: .5em;
		font-size: .75em;
	}

}

@media (max-aspect-ratio: 9/10), (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {
 
	#viewer:after {
		content: 'tall';
		display: none;
	}

	#big-cover {
		max-width: 100vw;
		padding-top: 100%;
		position: relative;
	}

	#ham {
		display: inline-block;
	}

	#big-player {
		height:;
	}

	@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
		ui-tabs .ui-widget-header {
			border: 1px solid var(--background-transparent);
			background: var(--background-transparent);
		}

		#leftPanel {
			-webkit-backdrop-filter: blur(30px) opacity(100%);
			backdrop-filter: blur(30px) opacity(100%);
			background-color: var(--background-transparent);
		}
	}

	@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
		#leftPanel {
		opacity: 0.9;
		background: var(--background);
		}
	}

	#playlistPanel > ul {
		margin-bottom: 7em;
	}

	#mini-controls {
		vertical-align: super;
	}

	#loadingInfo {
		max-width: 100%;
		padding-top: 0;
	}

	@media (min-aspect-ratio: 9/10) and (max-aspect-ratio: 11/10) {

		#viewer:after {
			content: 'square';
			display: none;
		}

		#header {
			height: 1em;
		}

		#mini-controls {
			display: inline !important;
			vertical-align: unset;
		}

		#mini-controls i {
			font-size: var(--text-small);
		}

		#ham i,
		#logout a {
			font-size: var(--text-small);
		}

		#big-player {
			position: relative;
			height: 100%;
		}

		#playlist-controls,
		#controls,
		#big-timer {
			display: none;
		}

		#big-player-bottom {
			height: unset;
		}

		#nowPlaying_songtitle,
		#nowPlaying_artist, 
		.album-details{
			font-size: var(--text-larger);
			height: var(--text-larger);
		}

		#big-info {
			position: absolute;
			background: rgba(0, 0, 0, 0.3);
			bottom: 0;
			left: -3px;
			width: 100%;
			text-align: left;
			opacity: 0;
			padding: .5em 0 .5em .5em;
			color: var(--text-highlight);
			text-shadow: -1px -1px 0 var(--background), 1px -1px 0 var(--background), -1px 1px 0 var(--background), 1px 1px 0 var(--background);
		}

		@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
			#big-info {
				background: rgba(0, 0, 0, 0.8);
			}
		}

		#big-info:hover {
			-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px);
			transition: opacity 1s ease-out;
			opacity: 1;
		}

		#nowPlaying_album,
		#nowPlaying_year,
		#nowPlaying_artist,
		#nowPlaying_title {
			padding-left: 1em;
		}
	}
}

@media (min-aspect-ratio: 11/10) {

	#viewer:after {
		content: 'medium';
		display: none;
	}

	#leftPanel {
		left: 0;
		opacity: 1;
		display: block !important;
		position: fixed;
		top: 0;
		width: 60%;
	}

	#big-player {
		position: fixed;
		top: 2em;
		left: 64%;
		margin-right: 5px;
		overflow: hidden;
		text-align: center;
		width: 35%;
		max-width: 70vh;
		z-index: 2;
	}

	@media (min-width: 1000px) {

		#viewer:after {
			content: 'widescreen';
			display: none;
		}

		#playlist-tools {
			top: -1em;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		}

		#playlistPanel {
			opacity: 1;
			border-right: 1px solid black;
			display: block !important;
			position: fixed;
			top: 0;
		}

		#playlist-tools {
			background: var(--background);
			border-radius: 3px 3px 0 0;
			border-bottom: 1px solid var(--text);
			/* opacity: .95; */
		}

		.playlist-tools {
			color: var(--text);
		}

		#leftPanel {
			left: 0;
			width: 25%;
		}

		#playlistPanel {
			left: 26%;
			width: 32%;
			height: 100%;
			overflow-x: hidden;
			overflow-y: auto;
			border-right: 0;
			margin-top: .4em;
		}

	}
}

@media (max-height: 480px) {
	#playlist-controls {
		display: none;
	}
	
	#header {
		height: 1em;
	}
}

@media (max-width: 480px) {
	#playlist-controls {
		padding-right: 0;
	}

	.big-volume-down, 
	.big-volume-up {
		display: none;
	}

	#big-volume-up:before,
	#big-volume-down:before,
	#big-mute:before {
		display: none;
	}
}