/*
=====================================================================
=
= General Elements
=
=====================================================================
*/

/* Top bar on phone and Tablet skins, control bar below infopane on desktop and fruit */

:root {
	--config-panel-pad-left: 4px;
	--config-panel-pad-right: 4px;
	--menu-toggle-icon-size: 14px;
	--playlist-right-icon: inline-block;

	--small-icon-size: 20px;
	--medium-icon-size: 30px;
	--svg-square-icon-size: 32px;
	--track-control-icon-size: var(--inline-clickable-icon-size);
}

body.desktopbrowser {
	--inline-track-icon-size: 16px;
	--inline-clickable-icon-size: 16px;
	--inline-clickable-icon-border-width: none;
	--inline-clickable-icon-border-style: none;
	--menuitem-padding: 4px;
	--playlist-item-positioning: unset;
	--playlist-track-display: block;
	--playlist-track-min-height: unset;
}

/* use body.phone here as well as mobilebrowser in case Mobile_Detect thinks
it's a desktop browser. This ensure the phone skin always gets these settings */
body.mobilebrowser, body.phone {
	--inline-track-icon-size: 20px;
	--inline-clickable-icon-size: 28px;
	--inline-clickable-icon-border-width: 6px;
	--inline-clickable-icon-border-style: solid;
	--menuitem-padding: 6px;
	--playlist-item-positioning: relative;
	--playlist-track-display: flex;
	--playlist-track-min-height: 3em;
}

body.phone #headerbar
{
    background-color: var(--headerbar-bg-colour-mob);
    background-image: var(--headerbar-bg-image-mob);
}

body.desktop #headerbar
{
    background-color: var(--headerbar-bg-colour-desk);
    background-image: var(--headerbar-bg-image-desk);
}

/* Notifications dropdown/pullup */

#notifications
{
    background-color: var(--top_drop_menu-bg-colour);
    background-image: var(--top_drop_menu-bg-image);
    z-index: 50000;
}

div.notification {
	opacity: 1;
	transition: opacity 0.5s ease;
}

div.notification.new {
	opacity: 0 !important;
	transition: opacity 0.5s ease;
}

table#debuginfotable tr {
	border-top: 1px solid var(--border-colour);
}

table#debuginfotable tr td:nth-child(1) {
	vertical-align: top;
	font-weight: bold;
}

table#debuginfotable tr td:nth-child(2) {
	font-size: 8pt;
	white-space:  pre-wrap;
	font-family: monospace;
}

/* Image popup - when clicking an image to zoom */

#popup_image
{
	position:absolute;
	z-index:10001;
	transition: opacity 0.5s ease, width 0.5s ease, height 0.5s ease, left 0.5s ease, top 0.5s ease;
	/* Must have a border, which must have a width in pixels */
	border: 18px solid var(--border-colour);
}

#popup_image.notthere {
	opacity: 0;
	transition: none;
}

/* div created by trackDragger when dragging items from a sources panel */

#dragger
{
    background-color: var(--selected-bg-colour);
	position:absolute;
	width:300px;
	z-index: 20200;
	padding: 4px;
}

.innerdragger {
	z-index: 60200;
}

/* Used for styling all progress bars, volume controls, etc */

.progressbar
{
	width:95%;
	height:1em;
	margin-right:auto;
	margin-left:auto;
	background-repeat:no-repeat;
    border: 1px solid var(--border-colour);
}

.progressbar.animated
{
	transition: background-position 1s linear;
}

.progressbar_v
{
	height:100%;
	width:12px;
	margin-right:auto;
	margin-left:auto;
	background-repeat:no-repeat;
    border: 1px solid var(--border-colour);
}

#plmode {
	text-align: center;
}

/* General Div for use as a Title Banner - eg in the config panel. Vertically aligns its children */

.configtitle
{
    background-color: var(--configtitle-bg-colour);
    background-image: var(--configtitle-bg-image);
    border-bottom: var(--configtitle-border-bottom);
	padding-top:2px;
	padding-bottom:2px;
	padding-left:4px;
	padding-right:4px;
	margin-bottom:4px;
	font-size:110%;
	display:flex;
	align-items:center;
	min-height: var(--small-icon-size);
	width: 100%;
	background-clip: padding-box;
}

#configpanel .configtitle:not(:first-child),
#prefsm .configtitle:not(:first-child),
{
	margin-top: 0.75em;
}

.search_result_box {
	margin-bottom: 1em !important;
}

body.phone .configtitle
{
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

/* Play Controls in top bar on mobile skins */

.topbarplaycontrols
{
    border-left: 1px solid var(--border-colour);
    border-right: 1px solid var(--border-colour);
}

/* Mark the Up Next track in audiobooks */

.mostrecent {
    border-top: 1px solid var(--border-colour);
}

/* bar holds the message such as 'Updating Music Collection' */

.bar h3.label {
	padding-left:12px;
	padding-bottom:4px;
	animation: pulseit 4s ease infinite;
}

/*
= Things that I don't know what they're for but can't be arsed to search all the code
*/

tr.chart td {
	padding-right:1em;
}

.tracktime .standout ul li {
	display: inline-block;
	margin-left: 2em;
}

/*
	Combo boxes (generally for tags)
*/

i.phone-dropdown-button {
	background-size:contain;
	background-position: center;
	background-repeat:no-repeat;
	display:block;
	height:2em;
	width:2em;
	margin-left:4px;
}

.drop-box-holder
{
	position: relative;
}

.drop-box
{
	position:relative;
	z-index:999;
	display:none;
	max-height:15em;
	overflow:auto;
	line-height:1.3em;
	padding-left:4px;
	cursor:pointer;
    background-color: var(--highlight-bg-colour);
    background-image: var(--highlight-bg-image);
    color: var(--text-colour);
}

#sortable .inline-icon.icon-cancel-circled {
	 display: var(--playlist-right-icon);
}

/* General purpose label to be used inside a containerbox next to eg a select box*/

.divlabel
{
	width:41%;
	padding-right:6px;
	font-weight:bold;
}


/* General holder for items that need to be vertically center-aligned within in */

.vertical-centre
{
	-webkit-box-align:center;
	align-items: center;
}

/* Ensure a div fills its container width-wise */

.fullwidth
{
	width:100%;
	padding:0px;
	margin:0px;
}

/* General hovers and highlights */

.backhi:hover,
.playable:hover,
.infoclick:hover,
div.clickplaylist:hover,
tr.playable:hover>td
{
    color: var(--highlight-colour);
    cursor:pointer;
}

/*Prevent submenus from having all entries highlighted
due to :hover events propagating from the parent menu
*/
.backhi:hover>div.top_drop_menu>div.backhi
{
    color: var(--text-colour);
}

/*Make sure the submenu entry being hovered over still gets highlighted*/

.backhi:hover>div.top_drop_menu>div.backhi:hover
{
    color: var(--highlight-colour);
}

.clickicon {
	cursor:pointer;
}

.infoclick {
	cursor:pointer;
}

i.icon-menu {
	cursor: context-menu;
}

.selected
{
    background-color: var(--selected-bg-colour) !important;
}

/* These are for where we have a row of clickable entries, eg in the artist chooser
	where each entry is text */

.bleft {
	font-weight:bold;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:8px;
	padding-right:8px;
}

.bsel
{
	font-size:110%;
    color: var(--highlight-colour);
}

.bmid
{
    border-left: 1px solid var(--border-colour);
}

.bright
{
    border-right: 1px solid var(--border-colour);
}

/* General element control */

.tright {
	float:right;
}

.tleft {
	float:left;
}

.textcentre {
	text-align:center;
}

.noselection {
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	cursor:default;
}

.bold {
	font-weight:bold;
}

.alignmid {
	vertical-align:middle;
}

.moveable {
	cursor: move;
}

.notbold {
	font-weight:normal !important;
}

.clearfix:after {
   content: " ";
   display: block;
   height: 0;
   clear: both;
}

.nopointer {
	cursor: default !important;
}

.noborder {
	margin:0px;
	padding:0px;
}

.ucfirst {
	text-transform:capitalize;
}

.bumpad {
  padding-bottom:4px;
}

.bum {
	font-style:italic;
}

.invisibleicon {
	display:none !important;
}

.line {
	padding-bottom:2px;
}

.spacer {
	padding-bottom:4px;
	padding-top:4px;
}

.imgfill {
	width: 100%;
	height: 100%;
}

.thin
{
	opacity: 0.3 !important;
}

.brianblessed
{
	margin-right:1em;
}

.relpos
{
	position: relative;
}

.dropshadow
{
    box-shadow: var(--drop-shadow);
}

.topshadow
{
    box-shadow: var(--top-shadow);
}

.highlighted
{
    background-color: var(--highlight-bg-colour);
    background-image: var(--highlight-bg-image);
}

.bordered
{
    border-left: var(--bordered-left);
    border-bottom: var(--bordered-bottom);
    border-right: var(--bordered-right);
    border-top: var(--bordered-top);
}

/* These are used in the collection for holding albums, podcasts, you name it */

.dropmenu
{
	display:none;
	margin:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:4px;
}

.dropmenu.visible
{
	display:block;
}

.smallcover
{
	height:auto;
	vertical-align:middle;
	margin-right:8px;
}

div.smallcover
{
	width: var(--cover-size);
}

img.smallcover {
	width: 100%;
	object-fit: scale-down;
}

img.notexist,img.notfound {
	width: var(--cover-size);
	height: var(--cover-size);
}

.smallicon
{
	padding:0px;
	margin:4px;
	height: var(--small-icon-size);
	width:var(--small-icon-size);
	vertical-align:middle;
}

.medicon
{
	padding:0px;
	margin:2px;
	height: var(--medium-icon-size);
	width: var(--medium-icon-size);
	vertical-align:middle;
}

.track-control-icon {
	padding: 0px;
	margin: 4px;
	height: var(--track-control-icon-size);
	width: var(--track-control-icon-size);
	vertical-align: middle;
}

.svg-square {
	width: var(--svg-square-icon-size);
	height: var(--svg-square-icon-size);
	vertical-align:middle;
}

.inline-icon {
	padding: 0px;
	margin-left: 0px;
	margin-right: 4px;
	vertical-align: middle;
	height: var(--inline-track-icon-size);
	width: var(--inline-track-icon-size);
	box-sizing: border-box;
	border: none;
}

.inline-icon.clickicon,
.inline-icon.infoclick,
.timerspacer {
	margin-left: 6px;
	margin-right: 0px;
	height: var(--inline-clickable-icon-size);
	width: var(--inline-clickable-icon-size);
	border-width: var(--inline-clickable-icon-border-width);
	border-style: var(--inline-clickable-icon-border-style);
	border-color: transparent;
	box-sizing: border-box;
}

#podcastslist div:not(.configtitle)>i.clickicon:first-child {
	margin-left: 0px;
}

.submenuspacer {
	margin-left: var(--inline-track-icon-size);
}

.clicktrackmenu {
	transition: opacity 0.2s ease;
}

.clickalbumbrowse {
	font-style: italic;
	font-size: 80%;
	color: var(--link-colour);
	margin-left: 1.5em;
	margin-bottom: 0.5em;
}

.clickalbumbrowse:hover {
	font-weight: bold;
	cursor: pointer;
}

.tracknumber
{
	/*height:1.3em;*/
	width:2em;
	font-weight:bold;
}

.discnumber
{
	font-weight:bold;
	font-size:110%;
	padding-top:2px;
	padding-bottom:2px;
	display:block;
}

.clicktrack
{
	padding-bottom: 2px;
}

/* Flexbox layouts */

.containerbox
{
	display:-webkit-box;
	display: flex;
}

.vertical
{
	-webkit-box-orient:vertical;
	flex-direction: column;
}

.center
{
	-webkit-box-pack:center;
	justify-content: center;
}

.expand
{
	-webkit-box-flex:1;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
}

.expandslightly
{
	flex-grow: 1;
	flex-shrink: 2;
	flex-basis: auto;
}

.expandalot
{
	flex-grow: 5;
	flex-shrink: 1;
	flex-basis: auto;
}

.expandabit
{
	flex-grow: 2;
	flex-shrink: 2;
	flex-basis: auto;
}

.fixed
{
	flex-grow: 0;
	flex-shrink:0;
}

.wrap
{
	flex-wrap:wrap;
}

/*
=====================================================================
=
= Now Playing Area
=
=====================================================================
*/

#infobar.coloured, body.phone #infobar, #thetopbit
{
    background-color: var(--infobar-bg-colour);
    background-image: var(--infobar-bg-image);
}

/* Add Tags popup - when clicking + in nowplaying */

.mobmenu
{
    background-color: var(--top_drop_menu-bg-colour);
    background-image: var(--top_drop_menu-bg-image);
	z-index:1500;
	max-height:50vh;
	position:absolute;
}

/* Icons, tags, ratings etc in now playing */

#nowplaying_icons
{
	font-size:8pt;
}

/* Tags */

.tag {
	white-space:nowrap;
	margin-right:1em;
}

.playspan {
	font-weight: bold;
	white-space: nowrap;
}

/* Text area showing current track name, album & artist */

#nowplaying {
	min-width: 100%;
	width: min-content;
}

#nptext
{
	opacity: 0;
	width: min-content;
	min-width: 100%;
}

#nptext.ready
{
	opacity: 1;
}

#nptext>p
{
	font-weight:bold;
	margin-top: 0px;
	margin-bottom: 0px;
}

#nptext>p>i
{
	font-weight:normal;
}

#nptext>p.line0
{
	font-size:100%;
	line-height:125%;
}

#nptext>p.line1
{
	font-size:75%;
	line-height:125%;
}

#nptext>p.line2
{
	font-size:75%;
	line-height:125%;
}

#nptext.calculating
{
	opacity: 0;
}

#playbackTime
{
	font-weight:bold;
	padding-top:1px;
	text-align:center;
	width:100%;
}

#nowplaying_icons>div.invisible {
	display: none !important;
}

/*
=====================================================================
=
= Music Collection
=
=====================================================================
*/

#sources
{
    border-top: var(--sources-border-top);
    background-color: var(--sources-bg-colour);
    background-image: var(--sources-bg-image);
}

/* Alternating colours for root items */

.album1
{
    background-color: var(--album1-colour);
}

.album2
{
    background-color: var(--album2-colour);
}

/* Artist name banner used in Albums By Artist */

/*.artistbanner
{
	margin-left:4px;
	padding-left:8px;
	margin-top:8px;
}
*/
div.unplayable {
	opacity: 0.4;
}

.album-time {
	text-align: right;
	padding-top: 4px;
	border-top: 1px solid var(--border-colour);
	background-color: transparent !important;
}

.tracks_0 {
	display: none;
}

.tracks_1 {
	width: 1.3em;
}

.tracks_2 {
	width: 1.9em;
}

.tracks_3 {
	width: 2.9em;
}

.tracks_4 {
	width: 3.9em;
}

/*
=====================================================================
=
= Radio Stations
=
=====================================================================
*/

.clickicepager {
	border-left: 1px solid var(--border-colour);
}

.clickicepager:nth-child(1) {
	border-left: none;
}

.stream-disabled {
	opacity: 0.4;
}

/*
=====================================================================
=
= Podcasts
=
=====================================================================
*/

/* New and Unlisteted Counters */

.newpod
{
	font-weight:bold;
	font-size:90%;
	padding-left:6px;
	padding-right:6px;
	background-color: rgba(255, 0, 0, 0.9);
	border-radius: 1em;
	text-align: center;
	color: black;
	display: table;
	margin-left: auto;
	margin-right: auto;
}

.nopod_spacer {
	margin-right: auto;
}

.unlistenedpod
{
	font-weight:bold;
	font-size:90%;
	padding-left:6px;
	padding-right:6px;
	background-color: rgba(255, 160, 0, 0.9);
	border-radius: 1em;
	text-align: center;
	color: black;
}

.podtitle
{
	font-weight:bold;
	padding:2px;
	margin:2px;
}


/* For the duration field in podcast episodes */
div.podtitle>div.fixed {
	margin-left: 1em;
}

.podoptions
{
  margin-top:4px;
}

.podoptions td
{
	vertical-align:middle;
}

.podcastitem
{
	margin-bottom:0.5em !important;
	/*border-top: var(--playlist-item-top-border);*/
}

/* also SomaFM */
.whatdoicallthis
{
	padding-left:0px;
	padding-top:2px;
	padding-bottom:4px;
	font-size:96%;
	font-weight:normal;
}

.whatdoicallthis p
{
	-webkit-margin-before: 0.2em;
	-webkit-margin-after: 0.2em;
	-margin-before: 0.2em;
	-margin-after: 0.2em;
}

.whatdoicallthis img
{
	max-width:100%;
}

.podcastresume
{
	margin-top: 0.5em;
	margin-bottom: 0.75em;
}

.podcast-download-bar {
	width: 100%;
}

div.podcast-item-image-holder {
	float: left;
	margin-top: 4px;
	margin-right: 0.5em;
	display: flex;
}

.resumebar
{
	height: 0.15em;
	margin-right: unset;
	margin-left: unset;
	width: 100%;
	border: none !important;
}

.resumeinfo {
	font-size: 92%;
	padding-right: 0.5em;
}

.resume-bar-holder {
	padding-right: 0.5em;
}

.resume-bar-holder>.tracknumber {
	height: unset;
}

.menuitem {
	font-weight:bold;
	margin:0px;
	padding-left:0px;
	padding-right:0px;
	padding-top: var(--menuitem-padding) !important;
	padding-bottom: var(--menuitem-padding) !important;
	-webkit-box-align:center;
	align-items: center;
}

/*
=====================================================================
=
= Play Queue - changes for mouse or touch UI
=
=====================================================================
*/

#sortable {
	position: var(--playlist-item-positioning);
	top: 0;
	left: 0;
}

#sortable .trackgroup {
	position: var(--playlist-item-positioning);
	top: 0;
	left: 0;
}

#sortable .item {
	position: var(--playlist-item-positioning);
	top: 0;
	left: 0;
}

#sortable .trackgroup .track {
	position: var(--playlist-item-positioning);
	top: 0;
	left: 0;
	min-height: var(--playlist-track-min-height);
	display: var(--playlist-track-display);
}

#sortable .trackgroup .track>div {
	width: 100%;
}

#sortable .track>div>div.clickable {
	margin-right: 8px;
}



/*
=====================================================================
=
= Smart Radio
=
=====================================================================
*/

[id^="pluginplaylists"] .menuitem
{
	margin-bottom: 4px;
}

[id^="pluginplaylists"] .textunderline
{
	font-size:120%;
}

[id^="pluginplaylists"] button {
	margin-right: 0px;
}

[id^="pluginplaylists"] .svg-square {
	margin-right: 8px;
}

[id^="pluginplaylists"] .drop-box {
	margin-left: 40px;
	/* 40px is the width of svg-square, 32px is the size of the dropdown menu icon */
	width: calc(100% - 6em);
}
/*
=====================================================================
=
= Trackliat (current playlist)
=
=====================================================================
*/

/* Main div that contains the playlist */

#playlist, #playlistm
{
    background-color: var(--playlist-bg-colour);
    background-image: var(--playlist-bg-image);
}

#playlist
{
	height:100%;
}

#playlist-progress-holder {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2px;
	margin-bottom: 4px;
}

#playlist-progress {
	font-size: 5px;
}

#playlist-time-remaining {
	min-width: 5em;
	font-size: 85%;
	text-align: right;
}

/* Bar at top of playlist showing number of tracks and total time etc */

#playlist_top
{
	padding-top:4px;
	padding-bottom:0px;
	font-weight:bold;
	font-size:90%;
	cursor:default;
}

#playlist_top > table
{
	border-spacing:0px;
}

/* Holder for the playlist controls - repeat, crossfade, etc */

#playlistbuttons
{
	margin-bottom:4px;
}

#playlistbuttons > table
{
	border-collapse:collapse;
	border-spacing:2px;
	margin-top:2px;
	margin-bottom:2px;
}

/* Scrollable sub-container of the playlist that contains the tracks */

#pscroller
{
	overflow:auto;
}

/* Collection of album title + tracks. Conflicts with a Wikipedia span markup
	but it's too general a word to do a search and replace */

div.item
{
    margin-bottom: 2px;
	box-sizing: border-box;
    border-top: var(--playlist-item-top-border);
}

div.item div.containerbox.vertical.expand
{
	align-self: center;
}

.playlistitem
{
	padding-top:0px;
	font-size:90%;
    transition: var(--playlist-current-transition);
}

.playlisttitle
{
	padding-left:4px;
	margin-right:2px;
	margin-left:4px;
	padding-top:8px;
	padding-bottom:8px;
    background-color: var(--playlist-title-bg-colour);
    border-bottom: var(--playlist-title-border);
    transition: var(--playlist-current-transition);
}

.playlistcurrentitem
{
    color: var(--highlight-colour);
    background-color: var(--playlist-current-bg-colour);
    font-size: var(--playlist-current-track-font-size);
    font-weight: var(--playlist-current-track-font-weight);
    text-shadow: var(--playlist-current-shadow);
    transition: var(--playlist-current-transition);
    border-left: var(--playlist-current-track-left-border);
}

.playlistcurrenttitle
{
    color: var(--highlight-colour);
    background-color: var(--playlist-current-bg-colour);
    border-bottom: var(--playlist-title-border);
    font-size: var(--playlist-current-title-font-size);
    font-weight: var(--playlist-current-title-font-weight);
    transition: var(--playlist-current-transition);
    text-shadow: var(--playlist-current-shadow);
}

.playlistrow2
{
	font-size:88%;
	font-style:italic;
	font-weight:normal;
}

.tracktime
{
	margin-left:4px !important;
}

.track
{
	box-sizing: border-box;
}

/* Current Smart radio Mode */

.modeimg
{
	height:20px;
	width:20px;
	margin-right:8px;
	vertical-align:middle;
}

/* These are only used for the Replay Gain controls */

.togglecontainer {
	display:table;
	transition: opacity 1s ease;
}

.togglediv {
	display:table-cell;
	vertical-align:middle;
	font-size:8pt;
}

.togglebutton {
	padding:0px;
	height:20px;
	width:48px;
	font-size:18px;
	display:table-cell !important;
}

.tgtl {
	padding-right:4px;
	/*because firefox is dumb and ignores the align settings of the parent container.*/
	text-align:right;
}

/* Playlist Touch Controls for moving tracks up/down */

.playlistup {
	position: relative;
	left: 0;
	bottom: 100%;
	z-index: 5000;
}

.playlistdown {
	position: relative;
	left: 0;
	top: 100%;
	z-index: 5000;
}

/*
=====================================================================
=
= Info Panel
=
=====================================================================
*/

/* Panel at top of info panel used when there are multiple artists */

#artistchooser
{
    background-color: var(--highlight-bg-colour);
    background-image: var(--highlight-bg-image);
	font-weight:bold;
	text-align:center;
	width:98%;
	margin-right:auto;
	margin-left:auto;
	margin-top:4px;
	margin-bottom:2px;
	padding-bottom:4px;
	padding-top:4px;
}

#infopane
{
    border-top: var(--infopane-border-top);
    background-color: var(--infopane-bg-colour);
    background-image: var(--infopane-bg-image);
}


/* Currently selected info source */

.currentbun
{
    border-bottom:1px solid var(--highlight-colour);
    padding-bottom:2px;
}

/* Panels */

#artistinformation:empty
{
	margin: 0px !important;
	padding: 0px !important;
}

#albuminformation:empty
{
	margin: 0px !important;
	padding: 0px !important;
}

/* To prevent paragraphs flowing upwards into very narrow gaps
	around floated images */

.minwidthed:before
{
	content:"";
	width: 10em;
	max-width: 100%;
	display:block;
	overflow:hidden;
}

.minwidthed3:before
{
	content:"";
	width: 12em;
	max-width: 100%;
	display:block;
	overflow:hidden;
}

/* Expand box used by Musicbrainz and Discogs */

.clickexpandbox {
	margin-right: 1em !important;
	margin-bottom: 0.5em !important;
}

/* Layout Stuff */

.holdingcell {
	display:inline-block;
	width:100%
}

.holdingcell li input {
	width:90%;
}

.holdingcell li button {
	margin-right:6px;
}

.tiny {
	font-size:80%;
	margin-right:4px;
	margin-left:2px;
}

td.fil {
	font-weight:bold;
}

#artistbio ul {
	list-style-type:none;
}

.infotext {
	margin-left:4px;
	margin-right:4px;
	margin-bottom:4px;
	padding:4px;
}

.infotext a {
	cursor: pointer;
}

.infosection, .albumsection {
	padding-left:12px;
	padding-right:12px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-bottom:4px;
    background-color: var(--infopane-header-bg-colour);
    background-image: var(--infopane-header-bg-image);
    background-size:cover;
    background-repeat:no-repeat;
    align-items: center;
}

.infosection h2
{
    border-bottom:2px solid var(--border-colour);
}

.infosection div.fixed:last-child {
	margin-left: 8px;
}

.infowiki h2 {
	margin-top: 10px;
	margin-bottom:8px;
	border-bottom:1px solid var(--border-colour);
	padding-bottom:0.5em;
	overflow:hidden;
}

.infowiki h3 {
	margin-top: 6px;
	margin-bottom:4px;
	padding-top:0.5em;
}

.title-menu {
	vertical-align:middle;
	margin-left:8px;
	margin-right:8px;
	font-weight:bold;
}

.info-box-list ul {
	list-style-type: none;
	line-height:1.5em;
	padding-left:2px;
	list-style:none;
	margin:2px;
	padding:0px;
	margin-bottom: 0.5em;
}

.info-box-list ul li {
	line-height:1.5em;
}

body.desktop .info-border-right
{
    border-right: 1px solid var(--border-colour);
}

.stright {
	float:right;
	margin-left:12px;
	padding-right:0px;
}

.standout {
	margin-bottom:12px;
	margin-top:12px;
}

.info-box-expand .standout {
	margin-top: 0;
}

.standout ul {
	list-style:none;
	margin:2px;
	padding:0px;
}

.standout ul li {
	line-height:1.5em;
}

.statsbox {
	margin-left:0px;
	padding:4px;
}

table.padded {
	border-collapse: collapse;
}

table.padded tr {
	border-bottom:1px solid var(--border-colour);
}

table.padded tr td {
	line-height:1.6em;
	padding-left:8px;
	padding-right:8px;
}

table.padded tr th {
	line-height:1.8em;
	padding-left:8px;
	padding-right:8px;
	font-weight:bold;
}

.stumpy {
	padding-left: 1em;
}

.underline {
	border-bottom:1px solid var(--border-colour);
	margin-top:2em;
	margin-bottom:0.75em;
}

div.info-box-expand .underline:nth-child(1) {
	margin-top:0;
}

.textunderline {
	margin-top:8px;
	padding-bottom:2px;
	margin-bottom:4px;
	border-bottom:1px solid var(--border-colour);
	width:99%;
	margin-right:auto;
	margin-left:auto;
}

.mbbox {
	margin-left:0px;
	margin-right:6px;
	padding:4px;
}

.foldup .indent table tbody tr td img {
	max-width: 100%;
}

.foldup {
	transition: opacity 0.5s ease;
}

.notloved {
	opacity: 0.3 !important;
}

.infowiki div.tright {
	clear:right;
	float:right;
}

.infobox caption {
	font-size:120%;
	font-weight:bold;
}

.wrap-all {
	word-break: break-all;
}

.monospace {
	font-family: monospace;
	font-size: 90%;
}

/*
=====================================================================
=
= History Table
=
=====================================================================
*/

table.histable {
	border-collapse: collapse;
	cursor: pointer;
}

table.histable tr.top {
	border-bottom:1px solid var(--border-colour);
}

table.histable tr td {
	line-height:1.6em;
	padding-left:8px;
	padding-right:8px;
}

table.histable tr.current {
	font-weight:bold;
}

table.histable tr:hover td {
    color: var(--highlight-colour);
    cursor: pointer;
}

/*
=====================================================================
=
= Info Panel - Musicbrainz
=
=====================================================================
*/

.mbtag {
	margin-left:4px;
	margin-right:4px;
	white-space:nowrap;
}

/*
=====================================================================
=
= Info Panel - Discogs
=
=====================================================================
*/

a.infoclick.clickreleasepage
{
	margin:2px;
	line-height:2em;
	padding-left:2px;
	padding-right:2px;
}

/*
=====================================================================
=
= Info Panel - Soundcloud
=
=====================================================================
*/

.scprog {
	position:absolute;
	width:2px;
	top:0px;
	opacity:0.6;
	background-color:black;
	z-index:100;
	left:0px;
	transition-property: left;
	transition-duration: 1s;
	transition-timing-function: linear;
}

.gosblin {
	width:100%;
	height:auto;
}

/*
=====================================================================
=
= Info Panel - Spotify, and general uses in Masonry layouts
=
=====================================================================
*/

.spotchoices {
	border-bottom:1px solid var(--border-colour);
	padding-bottom: 8px;
	padding-top: 8px;
}

.spotpossimg {
	height:48px;
	font-size:48px;
	vertical-align:middle;
	margin-right:8px;
}

/* masonry_general is used in multiple plugins usually
	to masonify tables, eg charts */

.masonry_general
{
	margin-top: 12px;
}

.masonry_general table tr th {
    background-color: var(--highlight-bg-colour);
    border-bottom:1px solid var(--border-colour);
}

.helpfulalbum
{
	text-align:center;
	opacity: 1;
	transition: opacity 0.5s ease;
	padding-left:4px;
	padding-right:4px;
	padding-bottom:4px;
	padding-top:4px;
	box-sizing:border-box;
	max-width:100%;
}

.helpfulalbum:not(.podcastcounts)
{
    background-color: var(--highlight-bg-colour);
    background-image: var(--highlight-bg-image);
}

.helpfulalbum .tag
{
	white-space: normal;
}

.albumthing {
	padding:4px;
}

.tagh.albumthing {
	vertical-align: middle;
	line-height:1.5em;
}

.jalopy
{
	width:95%;
	height:auto;
	max-width:360px;
	transition: opacity 0.5s ease;
	/*opacity: 1;*/
	object-fit: scale-down;
}

#alarmdropper .helpfulalbum .jalopy {
	max-width:  100px;
}

.playdiv
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.2;
}

.playdiv:hover {
	opacity: 0.75;
}

.notthere
{
	opacity:0;
}

.albumthing .clicktrack:not(.textcentre)
{
	text-align:left;
}

.artistnamething {
	flex-grow: 1;
	flex-shrink: 1;
	line-height:1.1em;
	word-wrap:break-word;
}

.artistnamething>span.notbold {
	font-size: calc(0.9 * var(--font-size));
	vertical-align: middle;
}

.albumwidget .artistnamething {
	font-size:140%;
}

.rowspacer
{
	height: 0.8em;
}

/* Note this is also used in skypotato for opened albums, where it isn't masonry
	but having the same rukes is useful */

.masonry_opened
{
	margin-top:4px;
	padding: 8px;
	box-sizing:border-box;
	margin-bottom:1em;
    background-color: var(--highlight-bg-colour);
    background-image: var(--highlight-bg-image);
    border-left: var(--open-album-border-highlight);
    border-top: var(--open-album-border-highlight);
}

.masonry_opened .helpfulalbum
{
	margin-right:1em;
}

.masonry_opened .helpfulalbum.tleft
{
	padding-top:4px;
}

/* NOTE 8px is the value of masonry_gutter. It is essntial
	that these remain the same. Masonry does not work without a gutter
	ans looks bad with gutter = 0px. Secondly sizer and the masonry
	items must be the same size. Masonry uses sizer as the column width
	- we need it because artist masonry itoems can be enlarged so we
	can't use those as the sizer */

#infopane.width_5 .medium_masonry_holder>.sizer
{
	width: calc(20% - 8px);
	max-width: 320px;
}

#infopane.width_5 .medium_masonry_holder>.spotify_album_masonry
{
	width: calc(20% - 8px);
	max-width: 320px;
}

#infopane.width_4 .medium_masonry_holder>.sizer
{
	width: calc(25% - 8px);
}

#infopane.width_4 .medium_masonry_holder>.spotify_album_masonry
{
	width: calc(25% - 8px);
}

#infopane.width_3 .medium_masonry_holder>.sizer
{
	width: calc(33% - 8px);
}

#infopane.width_3 .medium_masonry_holder>.spotify_album_masonry
{
	width: calc(33% - 8px);
}

#infopane.width_2 .medium_masonry_holder>.sizer
{
	width: calc(50% - 8px);
}

#infopane.width_2 .medium_masonry_holder>.spotify_album_masonry
{
	width: calc(50% - 8px);
}

#infopane.width_1 .medium_masonry_holder>.sizer
{
	width: calc(100% - 8px);
	min-width: 140px;
}

#infopane.width_1 .medium_masonry_holder>.spotify_album_masonry
{
	width: calc(100% - 8px);
	min-width: 140px;
}

#infopane.width_5 .masonified>.masonry_general
{
	width: calc(33% - 8px);
}

#infopane.width_4 .masonified>.masonry_general
{
	width: calc(50% - 8px);
}

#infopane.width_3 .masonified>.masonry_general
{
	width: calc(50% - 8px);
}

#infopane.width_2 .masonified>.masonry_general
{
	width: calc(100% - 8px);
}

#infopane.width_1 .masonified>.masonry_general
{
	width: calc(100% - 8px);
}

.small_masonry_holder>.spotify_playable_masonry
{
	width: calc(20% - 8px);
	max-width: 180px;
	min-width: 120px;
}

.medium_masonry_holder .masonry_opened
{
	width: 98% !important;
}

.spotify_album_image
{
	margin-right:auto;
	margin-left:auto;
	display:block;
	max-width:95%;
	transition: opacity 0.5s ease;
	opacity: 1;
}

.spotify_album_masonry
{
	margin-top: 12px;
	width:20%;
}

.spotify_playable_masonry {
	margin-top: 12px;
	width:20%;
	text-align:center;
	transition: opacity 0.5s ease;
	opacity: 1;
}

.playable_masonry_image
{
	width:95%;
	height:auto;
}

.spotify_artist_album_masonry {
	margin-top: 12px;
}

/*
=====================================================================
=
= Info Panel - Lyrics
=
=====================================================================
*/

div.lyrics {
	width:95%;
	margin:auto;
}

div.lyrics p {
	text-align:center;
	font-size:110%;
}

/*
=====================================================================
=
= Info Panel - Videos
=
=====================================================================
*/

.video {
	margin-left:auto;
	margin-right:auto;
	margin-top:2em;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.youtubevid {
	border:none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
=====================================================================
=
= Prefs Panel
=
=====================================================================
*/

.pref
{
	/*margin-left:8px;*/
	margin-bottom:8px;
}

.prefinput
{
	width: 100%;
}

/* Snapcast */

div.pref div.selectholder:not(.snapcast_select)
{
	margin-left: 1em;
	width:58%;
}

div.selectholder.snapcast_select
{
	margin-right: 1em;
}

.snapcastgroup input[type="text"].expand,
.player-def input[type="text"].expand
 {
	font-size: 120%;
	font-weight: bold;
	background-color: transparent !important;
	color: var(--text-colour) !important;
}

.snapcastclient input[type="text"].fixed {
	margin-left: 1em;
	margin-right: 1em;
}

.ropeybit {
	border-left: 1px solid var(--border-colour);
	margin-left: 1em;
	padding-left: 1em;
}

/*select.snapclientgroup {
	margin-right: 1em;
}
*/
.snapcastgroup {
	margin-bottom: 0.5em;
}

.snapgrouptitle {
	margin-bottom: 0.25em;
	padding: 2px;
}

.snapcastclient {
	padding-bottom:1em;
	padding-left: 1em;
}

.snapcastclient .rangechooser {
	margin-right: 1em;
}

/* For vertical snapcast volume controls */

.snap_vert_holder {
	position: relative;
	margin-left: 20px;
	overflow-y: clip;
}

.snap_vert_text {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(90deg);
	transform-origin: 0 0;
	white-space: nowrap;
	font-size: 14px;
	margin-top: 8px;
}

#snapcast-secondary {
    padding-left: 8px;
    padding-right: 8px;
}

/*
=====================================================================
=
= Plugins : Alarm Clock & Sleep Timer
=
=====================================================================
*/

.alarmnumbers
{
	font-size:250%;
	font-weight:bold;
	padding-left: 2px;
	padding-right: 8px;
}

.altablebit {
	text-align: right;
	padding-right: 1em;
}

.alarmbutton {
	width: 120px;
	height: 120px;
}

.alarmdropempty {
	height: 140px;
}

.toomanyclasses {
	margin-top: 4px;
}

.newalarmholder {
	height: 3em;
}

.alarmdescription {
	line-height: 1.2em;
}

#alarmdropper {
	padding-left: 4px;
	margin-top: 8px;
}

td.dan, th.dan{
	width: 100%;
}

/*
=====================================================================
=
= Plugins : Discoverator
=
=====================================================================
*/

#helpful_spinner{
	margin-top:1em;
	margin-bottom:1em;
	text-align:center;
}

.plugin_hpl_radio
{
	margin-top:4px;
	align-items:center;
	padding:0.4em;
	box-sizing: border-box;
	background-color: var(--highlight-bg-colour);
	border: 4px solid transparent;
}

#infopane.width_5 .mixcontainer>.plugin_hpl_radio
{
	width: 25%;
}

#infopane.width_4 .mixcontainer>.plugin_hpl_radio
{
	width: 50%;
}

#infopane.width_3 .mixcontainer>.plugin_hpl_radio
{
	width: 100%;
}

#infopane.width_2 .mixcontainer>.plugin_hpl_radio
{
	width: 100%;
}

#infopane.width_1 .mixcontainer>.plugin_hpl_radio
{
	width: 100%;
}

.plugin_hpl_radio .fixed .topimg
{
	margin-top:4px;
}

.plugin_hpl_radio div b
{
	font-size:110%;
}

.plugin_hpl_radio>.smallcover
{
	width: auto;
	max-width: 64px !important;
}

.plugin_hpl_radio_info
{
	padding-left:12px;
}

/*
=====================================================================
=
= Plugins : Last.FM Importer
=
=====================================================================
*/

#lfmitable
{
	max-width:95%;
	margin:auto;
	border-collapse: collapse;
}

#lfmitable tr td, #lfmitable tr th
{
	padding-left: 0.5em;
	padding-right: 0.5em;
}

#lfmitable tr td:nth-child(7)
{
	text-align:center;
}

#lfmitable tr td:nth-child(8)
{
	text-align:center;
}

/*
=====================================================================
=
= Plugins : Recently Played
=
=====================================================================
*/

.plugin_rpl_datetag
{
	font-size: 120%;
	border-top:4px solid var(--border-colour);
	padding:4px;
}

tr.spacerboogie {
	border-bottom: 8px solid transparent;
}

/*
=====================================================================
=
= Plugins - Backup Manager
=
=====================================================================
*/

.plugin_mbb_table {
	border-collapse:collapse;
	width:95%;
	padding:4px;
}

.plugin_mbb_table th {
	text-align:center;
    background-color: var(--highlight-bg-colour);
    /*border-left: 1px solid var(--border-colour);*/
    padding-bottom: 8px;
}

.plugin_mbb_table tr {
    border-bottom: 1px solid var(--border-colour);
}

.plugin_mbb_table td {
	text-align:center;
}

/*
=====================================================================
=
= Plugins - Background Image Manager
=
=====================================================================
*/

div.plugin_backi_drop-images {
	background-color: var(--highlight-bg-colour);
	text-align: center;
	line-height: 3em;
	margin-bottom:4px;
	margin-top:4px;
}

/*
=====================================================================
=
= Plugins - Wishlist and Upnplayable Tracks
=
=====================================================================
*/

.robotlove {
	margin-top:8px;
	margin-bottom: 8px;
}

/*
=====================================================================
=
= Popup Window (Modal Dialog) - note NOT used for image popups. Don't know why
=
=====================================================================
*/

.modal-blackout {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	z-index: 20000;
}

.popupwindow {
	position:absolute;
	display:block;
	z-index:20001;
	overflow-y: hidden;
	overflow-x: hidden;
	transition: opacity 0.3s ease;
	opacity: 0;
	max-width:100%;
    background-color: var(--top_drop_menu-bg-colour);
    background-image: var(--top_drop_menu-bg-image);
    border-left: var(--bordered-left);
    border-bottom: var(--bordered-bottom);
    border-right: var(--bordered-right);
    border-top: var(--bordered-top);
}

.popupcontentholder {
	overflow-y: auto;
	overflow-x: auto;
}

.popupcontents {
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	padding-bottom: 8px;
}

.popupbuttons {
	padding-top: 8px;
	border-top: 1px solid var(--border-colour);
}

/*
=====================================================================
=
= Setup Screen
=
=====================================================================
*/

.setup_screen_options {
	margin-left:auto;
	margin-right:auto;
	margin-top: 1em;
	margin-bottom: 1em;
	text-align:center;
	width:90%;
	max-width: 60em;
	display:block;
}

.border-red {
    border: 1px solid red;
}

/*
=====================================================================
=
= Dropdown Menus
=
=====================================================================
*/

div.top_drop_menu, div.albumbitsmenu
{
    background-color: var(--top_drop_menu-bg-colour);
    background-image: var(--top_drop_menu-bg-image);
    border-left: var(--bordered-left);
    border-bottom: var(--bordered-bottom);
    border-right: var(--bordered-right);
}

div.topdrop
{
	margin:0;
	padding:0;
	float:left;
	position:relative;
}

div.top_drop_menu
{
	z-index:1000;
	overflow-y:auto;
	overflow-x:hidden;
	display:none;
	position: absolute;
	opacity:1 !important;
	padding:4px;
	font-size: var(--font-size);
	padding-left: var(--config-panel-pad-left);
	padding-right: var(--config-panel-pad-right);
}

div.top_drop_menu div:not(.canbefaded) {
	opacity: 1 !important;
}

div.top_drop_menu div.notenabled,
div.togglecontainer.notenabled,
div#flowcontrols i.notenabled,
div.top_drop_menu button.notenabled,
.lastfmlogin-required.notenabled
{
	opacity: 0.2 !important;
	cursor: not-allowed !important;
}

.notenabled input,
.notenabled label,
.notenabled select,
.notenabled input:hover
.notenabled label:hover
.notenabled select:hover
{
	cursor: not-allowed !important;
	pointer-events: none !important;
}

div.smartradio.lastfmlogin-required.notenabled {
	display: none;
}

.top_drop_menu .top_drop_menu {
	position: relative;
}

/*
=====================================================================
=
= Album Art and Background Images using flex-wrap layout
=
=====================================================================
*/

.closet {
	position:relative;
	text-align:center;
	overflow:visible;
	flex-shrink: 1;
	flex-grow: 0;
	max-width:220px;
	flex-basis: 20%;
}

.covercontainer
{
	position: relative;
	padding-left:4px;
	padding-right:4px;
	z-index:1;
}

.covercontainer div {
	z-index:1;
}

.albumimg {
	padding-top:8px;
}

.albumimg img {
	padding:8px;
}

.albumimg .covercontainer img {
	width: 180px;
	height:auto;
}

/*
=====================================================================
=
= Things that need to be here so they override other things
=
=====================================================================
*/

.invisible {
	display:none;
}

.single-player .divlabel {
	width: 30%;
}

/*
=====================================================================
= Standard HTML Elements
=====================================================================
*/

html
{
	height:100%;
}

body
{
	font-size: var(--font-size);
	margin:0px;
	overflow:hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

body,p,h1,h2,h3,h4,table,td,th,ul,ol,textarea,input
{
	font-family:verdana,helvetica,arial,sans-serif;
	-webkit-text-size-adjust: 100%;
	color: var(--text-colour);
}

h1
{
	font-size:250%;
	margin-top:20%;
	margin-left:20%;
	margin-right:20%;
	font-weight:normal;
}

h2
{
	font-size:170%;
	font-weight:bold;
	margin-top:0px;
	margin-bottom:0px;
}

h3
{
	padding-bottom:0px;
	margin-bottom:8px;
}

h1,h2,h3,h4,h5,h6
{
	background-color:transparent;
	white-space:normal;
}

a
{
	text-decoration:none;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;
	word-break: break-word;
	hyphens: auto;
}

a:link
{
    color: var(--link-colour);
}

a:visited
{
    color: var(--link-colour);
}

a:hover,a:active
{
    font-weight: bold;
    cursor:pointer;
}

hr
{
	-webkit-margin-before:0px;
	-webkit-margin-after:0px;
}

div
{
	box-sizing: border-box;
}

input, div.filebutton
{
	font-size:100%;
	width:100%;
	margin-bottom:4px;
	margin-top:4px;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:0px;
	padding-right:0px;
}

input.inputfile
{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.styledinputs input[type="radio"] + label {
	display: block !important;
}

label.oneline {
	margin-right: 1.5em;
	font-size: 95%;
}

div.styledinputs>label.oneline:last-child {
	margin-right: 0px;
}

div.filebutton
{
	word-break: break-all;
	line-height: 3em;
	padding: 0px !important;
}

button
{
	font-size:100%;
	margin-bottom:4px;
	margin-top:4px;
	margin-left:8px;
	margin-right:8px;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:6px;
	padding-right:6px;
	min-height:2em;
	cursor:pointer;
}

button.iconbutton
{
	padding:0px;
	margin-right:0px;
	margin-left:4px;
	margin-top:0px;
	margin-bottom:0px;
	background-size: contain;
	background-position:center;
	background-repeat:no-repeat;
	border: 4px solid transparent !important;
	opacity: 0.8;
	background-color:transparent !important;
	box-sizing: border-box;
}

button.iconbutton:hover
{
	opacity: 1;
}

button, input[type="button"], div.filebutton
{
    color: var(--button-colour);
    font-weight: var(--button-font-weight);
    background-color: var(--button-bg-colour);
    background-image: var(--button-bg-image);
    border: var(--button-border);
}

button:hover, input[type="button"]:hover, div.filebutton:hover
{
    color: var(--button-hover-colour);
    background-color: var(--button-bg-hover-colour);
    background-image: var(--button-bg-hover-image);
    border: var(--button-hover-border);
    text-shadow: var(--button-hover-shadow);
}

button.config-button {
	box-sizing: border-box;
	flex-basis: 0;
	max-width: fit-content;
}

input[type=checkbox], input[type=radio]
{
	width:auto;
}

input[type=text],input[type="number"]
{
	border: 0px none;
	border-radius: 0 0;
	box-sizing: border-box;
}

::placeholder {
	color: var(--placeholder-colour);
}

select
{
	width:100%;
	background-color:transparent;
	border:0px none;
	margin:0px;
	height:2em;
	font-size:100%;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	pointer-events:auto;
	z-index:99;
	color: var(--select-text-colour);
}

div.selectholder
{
    background-color: var(--select-bg-colour);
	overflow:hidden;
	margin-top:4px;
	margin-bottom:4px;
	pointer-events:none;
	z-index:98;
	width: 100%;
}

div.selectholder:hover
{
    background-color: var(--select-hover-bg-colour);
}

select:hover
{
	cursor:pointer;
}

select:required:invalid {
	color: grey;
}

option
{
    color: black;
}

input[type="text"],input[type="number"],input[type="time"]
{
    color: var(--text-entry-text-colour) !important;
    transition: all 0.5s ease;
    background-color:  var(--text-entry-bg-colour) !important;
    border-bottom: 1px solid  var(--text-entry-border-colour) !important;
}

input[type="text"]:hover,input[type="number"]:hover,input[type="time"]:hover
{
    transition: all 0.5s ease;
    background-color: var(--text-entry-hover-bg-colour) !important;
    border-bottom: 1px solid var(--text-entry-hover-border-colour) !important;
}

input[type="text"]:focus,input[type="number"]:focus,input[type="time"]:focus,input[type="text"]:focus-visible,input[type="number"]:focus-visible,input[type="time"]:focus-visible
{
    transition: all 0.5s ease;
    background-color: var(--text-entry-active-bg-colour) !important;
    border-bottom:1px solid var(--text-entry-active-border-colour) !important;
    outline: none;
}
/* Chrome really makes these look awful, but this helps */
input[type="time"]
{
	border-right:  none;
	border-left:  none;
	border-top:  none;
}


.icon-play-circled { background-image: var(--icon-play-circled); }
.icon-play-circled:hover { background-image: var(--icon-play-circled-hover); }
.icon-pause-circled { background-image: var(--icon-pause-circled); }
.icon-pause-circled:hover { background-image: var(--icon-pause-circled-hover); }
.icon-fast-backward { background-image: var(--icon-fast-backward); }
.icon-fast-backward:hover { background-image: var(--icon-fast-backward-hover); }
.icon-fast-forward { background-image: var(--icon-fast-forward); }
.icon-fast-forward:hover { background-image: var(--icon-fast-forward-hover); }
.icon-stop-1 { background-image: var(--icon-stop-1); }
.icon-stop-1:hover { background-image: var(--icon-stop-1-hover); }
.icon-to-end-1 { background-image: var(--icon-to-end-1); }
.icon-to-end-1:hover { background-image: var(--icon-to-end-1-hover); }

.icon-music { background-image: var(--icon-music); }
.icon-search { background-image: var(--icon-search); }
.icon-folder-open-empty { background-image: var(--icon-folder-open-empty); }
.icon-radio-tower { background-image: var(--icon-radio-tower); }
.icon-cd { background-image: var(--icon-cd); }
.icon-resize-horizontal { background-image: var(--icon-resize-horizontal); }
.icon-angle-double-left { background-image: var(--icon-angle-double-left); }
.icon-angle-double-right { background-image: var(--icon-angle-double-right); }
.icon-menu { background-image: var(--icon-menu); }
.icon-versions { background-image: var(--icon-versions); }
.icon-left-circled { background-image: var(--icon-left-circled); }
.icon-right-circled { background-image: var(--icon-right-circled); }
.icon-cog-alt { background-image: var(--icon-cog-alt); }
.icon-trash { background-image: var(--icon-trash); }
.icon-wifi { background-image: var(--icon-wifi); }
.icon-doc-text { background-image: var(--icon-doc-text); }
.icon-floppy { background-image: var(--icon-floppy); }
.icon-cancel-circled { background-image: var(--icon-cancel-circled); }
.icon-plus { background-image: var(--icon-plus); }
.icon-alarm { background-image: var(--icon-alarm); }
.icon-alarm-on { background-image: var(--icon-alarm-on); }
.icon-sleep { background-image: var(--icon-sleep); }
.icon-library { background-image: var(--icon-library); }
.icon-lastfm-1 { background-image: var(--icon-lastfm-1); }
.icon-wikipedia { background-image: var(--icon-wikipedia); }
.icon-musicbrainz { background-image: var(--icon-musicbrainz); }
.icon-discogs { background-image: var(--icon-discogs); }
.icon-doc-text-1 { background-image: var(--icon-doc-text-1); }
.icon-soundcloud-circled { background-image: var(--icon-soundcloud-circled); }
.icon-youtube-circled { background-image: var(--icon-youtube-circled); }
.icon-ytmusic-circled { background-image: var(--icon-ytmusic-circled); }
.icon-spotify-circled { background-image: var(--icon-spotify-circled); }
.icon-qobuz-circled { background-image: var(--icon-qobuz-circled); }
.icon-vkontakte-circled { background-image: var(--icon-vkontakte-circled); }
.icon-bandcamp-circled { background-image: var(--icon-bandcamp-circled); }
.icon-podcast-circled { background-image: var(--icon-podcast-circled); }
.icon-audiobook { background-image: var(--icon-audiobook); }
.icon-internetarchive-circled { background-image: var(--icon-internetarchive-circled); }
.icon-increase { background-image: var(--icon-increase); }
.icon-decrease { background-image: var(--icon-decrease); }
.icon-attention-1 { background-image: var(--icon-attention-1); }
.icon-info-circled { background-image: var(--icon-info-circled); }
.icon-download { background-image: var(--icon-download); }
.icon-sun { background-image: var(--icon-sun); }
.icon-headphones { background-image: var(--icon-headphones); }
.icon-unlistened { background-image: var(--icon-unlistened); }
.icon-block { background-image: var(--icon-block); }
.icon-heart { background-image: var(--icon-heart); }
.icon-heart-broken { background-image: var(--icon-heart-broken); }
.icon-refresh { background-image: var(--icon-refresh); }
.icon-tunein { background-image: var(--icon-tunein); }
.icon-no-response-playbutton { background-image: var(--icon-no-response-playbutton); }
.icon-tags { background-image: var(--icon-tags); }
.icon-volume-up { background-image: var(--icon-volume-up); }
.icon-toggle-open { background-image: var(--icon-toggle-open); }
.icon-toggle-closed { background-image: var(--icon-toggle-closed); }
.icon-spin6 { background-image: var(--icon-spin6) !important; }
.icon-output { background-image: var(--icon-output); }
.icon-output-mute { background-image: var(--icon-output-mute); }
.icon-sliders { background-image: var(--icon-sliders); }
.icon-0-stars { background-image: var(--icon-0-stars); }
.icon-1-stars { background-image: var(--icon-1-stars); }
.icon-2-stars { background-image: var(--icon-2-stars); }
.icon-3-stars { background-image: var(--icon-3-stars); }
.icon-4-stars { background-image: var(--icon-4-stars); }
.icon-5-stars { background-image: var(--icon-5-stars); }
.icon-single-star { background-image: var(--icon-single-star); }
.icon-ratandtag { background-image: var(--icon-ratandtag); }
.icon-ratortag { background-image: var(--icon-ratortag); }
.icon-toggle-on { background-image: var(--icon-toggle-on); }
.icon-toggle-off { background-image: var(--icon-toggle-off); }

.icon-random.flow-on { background-image: var(--icon-random-flow-on); }
.icon-random.flow-off { background-image: var(--icon-random-flow-off); }
.icon-crossfade.flow-on { background-image: var(--icon-crossfade-flow-on); }
.icon-crossfade.flow-off { background-image: var(--icon-crossfade-flow-off); }
.icon-repeat.flow-on { background-image: var(--icon-repeat-flow-on); }
.icon-repeat.flow-off { background-image: var(--icon-repeat-flow-off); }
.icon-consume.flow-on { background-image: var(--icon-consume-flow-on); }
.icon-consume.flow-off { background-image: var(--icon-consume-flow-off); }

.icon-allrandom { background-image: var(--icon-allrandom); }
.icon-neverplayed { background-image: var(--icon-neverplayed); }
.icon-recentlyplayed { background-image: var(--icon-recentlyplayed); }
.icon-artist { background-image: var(--icon-artist); }
.icon-mp3-audio { background-image: var(--icon-mp3-audio); }
.icon-aac-audio { background-image: var(--icon-aac-audio); }
.icon-flac-audio { background-image: var(--icon-flac-audio); }
.icon-wma-audio { background-image: var(--icon-wma-audio); }
.icon-ogg-audio { background-image: var(--icon-ogg-audio); }
.icon-explicit { background-image: var(--icon-explicit); }
.icon-expand-up { background-image: var(--icon-expand-up); }
.icon-rss { background-image: var(--icon-rss); }
.icon-tick { background-image: var(--icon-tick); }
.icon-video { background-image: var(--icon-video); }
.icon-bbc-logo { background-image: var(--icon-bbc-logo); }
.icon-imdb-logo { background-image: var(--icon-imdb-logo); }
.icon-facebook-logo { background-image: var(--icon-facebook-logo); }
.icon-twitter-logo { background-image: var(--icon-twitter-logo); }
.icon-www { background-image: var(--icon-www); }
.icon-allmusic { background-image: var(--icon-allmusic); }
.icon-updown { background-image: var(--icon-updown); }
.icon-bookmark { background-image: var(--icon-bookmark); }
.icon-padlock { background-image: var(--icon-padlock); }
.icon-padlock-open { background-image: var(--icon-padlock-open); }
.icon-instagram { background-image: var(--icon-instagram); }
.icon-rewind { background-image: var(--icon-rewind); }
.icon-ffwd { background-image: var(--icon-ffwd); }

.icon-snapcast {
    background-image: var(--icon-snapcast);
    height: 1.5em;
    margin: 4px;
}

.icon-lastfm-logo {
    background-image: url('newimages/lastfm-logo.png');
    height: 1.5em;
    margin: 4px;
}

[class^="icon-"], [class*=" icon-"] {
    background-size:contain;
    background-position: center;
    background-repeat:no-repeat;
    display:inline-block;
}

.button-disabled { opacity: 0.1 }

.clearbox {
    /* We need some !importants here to override Chrome's stupidity of unsetting things when it autocompletes  */
    background-image: var(--icon-cancel-circled) !important;
    /* dont change the 50%, it ties in with makeHoverWork, makeClearWork, and makeTagMenu */
    background-size: auto 50%;
    background-position: right 2px center;
    background-repeat: no-repeat;
}

.combobox-entry, div.selectholder {
    background-image: var(--dropdown-button);
    /* dont change the 50%, it ties in with makeHoverWork, makeClearWork, and makeTagMenu */
    background-size: auto 50%;
    background-position: right 2px center;
    background-repeat: no-repeat;
}

.combobox-entry:hover, div.selectholder:hover {
    background-image: var(--dropdown-button-hover);
    /* dont change the 50%, it ties in with makeHoverWork, makeClearWork, and makeTagMenu */
    background-size: auto 50%;
    background-position: right 2px center;
    background-repeat: no-repeat;
}

#ratingsearch {
    position: relative;
}

#ratingsearch:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: -1;
    background-image: var(--icon-0-stars);
    background-size: auto 50%;
    background-position: left 2px center;
    background-repeat: no-repeat;
}

i.phone-dropdown-button {
    background-image: var(--dropdown-button);
}

.styledinputs label
{
    display:inline-block;
    cursor:pointer;
    position:relative;
    padding-left:2.5em;
    line-height:1.5em;
}

.styledinputs input[type=radio]
{
    display:none;
}

.styledinputs input[type=checkbox]
{
    display:none;
}

.styledinputs label:before
{
    content:"";
    display:inline-block;
    width:2em;
    height:1.5em;
    position:absolute;
    left:0;
    /* bottom:0.2em; */
    background-image: var(--icon-toggle-off);
    background-size:auto 80%;
    background-position: center;
    background-repeat:no-repeat;
}

.styledinputs input:checked + label:before
{
    background-image: var(--icon-toggle-on) !important;
}

img.notexist,img.notfound
{
    background-image: var(--compact-disc);
    background-size:contain;
    display:inline-block;
    background-position:center;
    background-repeat: no-repeat;
}

img.stream.notfound, img.stream.notexist
{
    background-image: var(--icon-radio-tower);
}

img.plimage.notfound
{
    background-image: var(--icon-doc-text);
}

/* NOTE for this to work --highlight-bg-image must be set to something,
    even if it's 'none'. 'unset' will make the whole thing not work */
.backmenu
{
    background-image: var(--icon-angle-double-left), var(--highlight-bg-image);
    background-repeat: no-repeat;
    background-size: contain;
}

button.searchbutton {
    background-image: var(--icon-search);
}

button.rssbutton {
    background-image:var(--icon-rss);
}

button.savebutton {
    background-image: var(--icon-floppy);
}

.playdiv {
    background-image: var(--icon-play-circled);
}



/*
=====================================================================
= CSS Animations
=====================================================================
*/
@keyframes pulseit{
	 0%{
		  opacity:1;
	 }
	 50%{
		  opacity:0;
	 }
	 100%{
		  opacity:1;
	 }
}

@keyframes spin{
	 0% {
		  transform: rotate(0deg);
	 }
	 50% {
		  transform: rotate(180deg);
	 }
	 100% {
		  transform: rotate(359deg);
	 }
}

.spinner {
	 animation: spin 4s linear infinite;
}

.nospin {
	  transform: rotate(0deg);
}

.oneeighty {
	transform: rotate(180deg);
}

/* Note. Because CSS is SO fucking dumb, it works out width and height
before applying the rotation. Thus, using this breaks any layout where
width and height aren't fixed to a specific and identical number of pixels. */
.ninety {
	transform: rotate(90deg);
}

@keyframes switchback {
	0% {
		left: -20%;
		width: 10%;
	}
	25% {
		width: 50%;
		left: 50%;
	}
	50% {
		width: 10%;
		left: 110%;
	}
	75% {
		width: 50%;
		left: 50%;
	}
	100% {
		width: 10%;
		left: -20%;
	}
}

.wafflebanger-moving {
	animation: switchback 6s linear infinite;
}

.wafflything {
	position: relative;
	overflow:hidden;
	height: var(--waiting-swinger-height) !important;
	border: none !important;
	margin-bottom: 4px;
}

.wafflebanger {
	height: 100%;
	width: 10%;
	position: relative;
	background-image: var(--waiting-swinger-bg-image);
}

@keyframes clickflash {
	 0%{
		  background-color: rgba(255,255,255,0.7);
	 }
	 50%{
		 background-color: rgba(255,255,255,0.3);
	 }
	 100%{
		 background-color: rgba(255,255,255,0);
	 }
}

.clickflash {
	animation: clickflash 0.75s linear 1;
}


/*
=====================================================================
= Things that look like they might be for styling wikipedia data
=====================================================================
*/

table.navbox th
{
    background-color: var(--highlight-bg-colour);
}

table.navbox-inner th, table.navbox-inner td {
	background-color: transparent !important;
}

table.navbox-subgrouop {
    background-color: transparent !important;
}

.navbox {
	background-color: transparent !important;
}

td.infobox-image {
	text-align: center;
}

.navbox-abovebelow
{
    padding-bottom:4px;
}

.navbox-title a:link,
.navbox-abovebelow a:link,
.navbox-group a:link
{
    text-decoration:none;
}

.navbox-title a:visited,
.navbox-abovebelow a:visited,
.navbox-group a:visited
{
    text-decoration:none;
}

.navbox-title a:hover,a:active,
.navbox-abovebelow a:hover,a:active,
.navbox-group a:hover,a:active
{
    text-decoration:none;
}

.mw-parser-output .sidebar {
    background-color: transparent !important;
}

.mw-parser-output .navbox-subgroup {
    background-color: transparent !important;
}

.mw-parser-output .tracklist tr {
    background-color: transparent !important;
}

.mw-parser-output .tracklist th[scope="col"] {
    background-color: transparent !important;
}

.mw-parser-output .tracklist tr:nth-child(2n-1) {
    background-color: transparent !important;
}

.mw-parser-output .tracklist-total-length td {
    background-color: transparent !important;
}

.mw-parser-output .tracklist-total-length th>span {
    background-color: transparent !important;
}

.mw-parser-output .ambox {
    background-color: transparent !important;
}

.mw-parser-output .quotebox {
    background-color: transparent !important;
}

.mw-parser-output .side-box {
    background-color: transparent !important;
}

table.tracklist {
    line-height:1.5em;
}

.tracklist tbody tr th
{
    font-weight:bold;
}

.description
{
    margin-top:4px;
}

.navbox-group {
    border-color: var(--border-colour);
}

.navbox-list {
    border-color: var(--border-colour);
}

.underline
{
    border-bottom: 1px solid var(--border-colour);
}

.mw-headline {
    padding-top:8px;
    padding-bottom:8px;
    padding-left:12px;
    padding-right:12px;
    margin-bottom:8px;
}

.infobox {
    float:right;
    margin-right:0px;
    margin-bottom:12px;
    margin-left:12px;
    /*margin-top:12px;*/
    border: 1px solid var(--border-colour);
    font-size: 92%;
    line-height: 1.5em;
    clear: right;
}

.infobox_v3 {
    float:right;
    margin-right:0px;
    margin-bottom:12px;
    margin-left:12px;
    /*margin-top:12px;*/
    border: 1px solid var(--border-colour);
    font-size: 92%;
    line-height: 1.5em;
    clear: right;
    max-width: 325px;
    word-wrap: break-word;
}

/* Wikipedia */
@media screen and (max-width: 480px) {

    .infobox {
        float:none;
        clear:both;
        margin-left:auto !important;
        margin-right:auto !important;
        width:90% !important;
    }

    .infobox_v3 {
        float:none;
        clear:both;
        margin-left:auto !important;
        margin-right:auto !important;
        width:90% !important;
    }
}

.thumb {
    margin-right:12px;
    margin-bottom:12px;
    margin-left:12px;
    margin-top:12px;
    text-align:center;
}

div .thumb {
    clear: right;
}

table.navbox {
    width: 100%;
    margin: auto;
    clear: both;
}

.navbox-title {
    padding-bottom:4px;
}

.navbox-abovebelow div ul {
    padding-left:0.5em;
}

.navbox-abovebelow ul li {
    list-style:none;
    float:left;
    padding-left:1em;
}

.navbox-list {
    padding-bottom:4px;
}

.navbox-list div ul {
    display:inline-block;
    margin: 0.125em;
    padding-left:0.5em;
}

.navbox-list div ul li {
    list-style:none;
    float:left;
    padding-right:1.5em;
}


.mw-editsection {
    display:none;
}

th.mbox-text
{
    padding-top: 0.25em;
    padding-right: 0.9em;
}

#toc ul, .toc ul {
    list-style-type: none;
    list-style-image: none;
    text-align: left;
    line-height: 1.5em;
    margin-left: -20px;
}

#toc, .toc {
    display: inline-block;
    padding: 7px;
    border: 1px solid var(--border-colour);
    font-size:90%;
}

#toc #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {
    text-align: center;
}

.infobox td, .infobox th {
    vertical-align: top;
}

span.item {
    border:none;
}

table.wikitable {
    margin: 1em 0;
    border: 1px solid var(--border-colour);
    border-collapse: collapse;
}

table.wikitable tr td {
    border: 1px solid var(--border-colour);
    padding:0.2em;
}

table.wikitable tr th {
    border: 1px solid var(--border-colour);
    padding:0.2em;
}

.navbox-group {
    padding-right:1em;
    padding-left:1em;
}

th.navbox-group {
    white-space: nowrap;
    text-align: right;
}

.navbox-inner, .navbox-subgroup {
    width: 100%;
}
table.ambox-content {
    border-left: 10px solid var(--border-colour);
}

table.ambox {
    margin: 1em 10%;
}

/* This is for AllMusic Biographies */
span.inlineImage.odd {
    float: left;
    margin: 10px 20px 0 0;
}

span.inlineImage.even {
    float: right;
    margin: 10px 0 0 20px;
}

.control-button {
	height: 32px;
	width: 1cm;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.button-playlist {
	background-image: url(../newimages/right_function.png);
}

.button-playlist:hover {
	background-image: url(../newimages/right_function_high.png);
}

.audio-output {
	max-width: 100%;
	overflow: auto;
}

#shareLinkManager {
	background-image: url(../newimages/folder_share.png);
	height: 32px;
	width: 32px;
	cursor: pointer;
	float: right;
	vertical-align: top;
	background-color: rgba(255, 255, 255, 0);
	background-size: cover;
	border: none;
	font-weight: bold;
	margin-top: 0;
}

#shareLinkManager:focus {
	outline: 0;
}

#shareLinkManager:hover {
	background-image: url(../newimages/folder_share_over.png);
}

ul.topnav {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 6px;
	float: left;
}

ul.topnav-center {
	list-style: none;
	position: absolute;
	top: 0;
	padding: 0;
	margin: 0 -2cm;
	left: 0;
	display: inline-block;
	height: 32px;
}

ul.topnav li {
	float: left;
	position: relative;
	width: 36px;
	z-index: 1000;
}

ul.topnav li a {
	display: block;
	text-decoration: none;
}

ul.subnav {
	border-radius: 0px 0px 0px 0px;
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
}

ul.subnav li {
	width: 140px;
}

ul.topnav li ul.subnav {
	list-style: none;
	position: absolute;
	top: 35px;
	left: -124px;
	margin: 0;
	padding: 6px;
	display: none;
	float: left;
	font-size: 110%;
	font-weight: normal;
	width: auto;
}

ul.subnav li a {
	font-weight: normal;
	font-size: 100%;
}

ul.topnav li ul.subnav li {
	margin: 0;
	padding: 4px;
	clear: both;
}

ul.subnav li.wide {
	width: 260px;
}

#lpscr {
	width: 300px;
	font-weight: normal;
	font-size: 100%;
}

#configpanel {
	width: 300px;
}

#countryselector {
	width: 220px;
}

ul.topnav li ul.wide {
	left: -270px;
}

ul.topnav li ul.widel {
	left: -20px;
}

ul.subnav li.wider {
	width: 380px;
}

ul.topnav li ul.widel li {
	text-align: left;
}

ul.topnav li ul.subnav input.topform {
	font-size: 90%;
	width: 180px;
}

ul.topnav li ul.subnav input.topcheck {
	font-size: 90%;
}

ul.topnav li ul.subnav li ul {
	list-style: none;
}

/* ============= share link selector ==============*/

ul#sharelinkPanel li ul.share-link-selector {
	display: none;
	width: 300px;
	position: absolute;
	z-index: 99;
	left: 0;
	text-align: left;
	background-color: lightgray;
	padding: 10px;
	top: 37px;
}

.share-link-title {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	display: block;
}

.share-link-selector ul {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	display: block;
	padding-left: 1px;
	list-style-type: none;
	max-height: 300px;
	overflow-y: scroll;
}

.share-link-selector ul::-webkit-scrollbar {
	width: 6px;
	height: 100%;
	padding: 0 5px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.1);
}

.share-link-selector ul::-webkit-scrollbar-thumb {
	width: 6px;
	background: rgba(255, 255, 255, 0.75);
	border-radius: 2px;
}

.share-link-selector ul::-webkit-scrollbar-thumb:hover {
	background: #fff;
}

.shareLink {
	font-size: 14px;
	text-align: left;
}

.dropshadow {
	-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.6);
	-moz-box-shadow: 7px 7px 5px rgba(50, 55, 50, 0.6);
	box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.6);
}

.share-link-title {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	display: block;
}

.prefsection {
	padding-bottom: 8px;
	border-bottom: 1px solid #dddddd;
}
/*
=====================================================================
= Specific Elements By ID
=====================================================================
*/

body {
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
}

#infobar {
	flex-grow: 0;
	flex-shrink:0;
}

#headerbar {
	flex-grow: 0;
	flex-shrink:0;
}

#bottompage {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	max-height: inherit;
	overflow: hidden;
}

input[type=text],input[type="number"] {
	height: 2em;
}

#infobar {
	width:100%;
	padding-top:4px;
	padding-bottom:4px;
	margin:0px;
	overflow-y:hidden;
	overflow-x:hidden;
}

#progress {
	height: 10px;
}

.skip-button, .vol-button {
	height: 14px;
	width: 14px;
	cursor: pointer;
}

.vol-button {
	margin-right: 1em;
}

.skip-backwards {
	margin-right: 4px;
	margin-left: 4px;
}

.skip-forwards {
	margin-left: 4px;
	margin-right: 4px;
}

#playbackTime {
	font-size:11px;
	height:15px;
	line-height:15px;
}

#albumcover {
	padding-left:4px;
	padding-right:4px;
	padding-top:4px;
	padding-bottom:4px;
	margin:0px;
	height:82px;
	z-index:500;
}

#albumpicture {
	width: auto;
	height: 88px;
}

#nowplaying {
	font-size:8pt;
	padding-top:0px;
	padding-bottom:0px;
	height:66px;
	width:100%;
	overflow:hidden;
	box-sizing:border-box;
	border-right:4px solid transparent;
	/*border-left:4px solid transparent;*/
}

#nowplaying-info-wrapper {
	overflow:hidden;
	margin-right:12px;
}

#nowplaying-text-wrapper {
	overflow:hidden;
}

#nptext {
	width:auto;
	overflow:hidden;
}

#nowplaying_icons {
	padding-top:4px;
}

#sortable {
	width:100%;
}

#infopane {
	height:100%;
	overflow-y:auto;
	overflow-x:hidden;
	position:relative;
	display:block;
}

#dbtags {
	overflow:hidden;
	opacity:0.9;
	font-size:8pt;
	height:22px;
	line-height:22px;
}

#playcount {
	overflow:hidden;
	opacity:0.9;
	font-size:8pt;
	height:22px;
	line-height:22px;
	margin-right: 8px;
}

#headerbar {
	padding:0px;
	margin:0px;
	width:100%;
	height:40px;
}

#bottompage {
	width:100%;
}

#sources {
	height:100%;
	overflow:auto;
	padding-left: 2px;
}

#volumecontrol {
	width:14px;
	margin-left:0px;
	margin-right:0px;
	font-size:8px;
}

#notifications {
	position:absolute;
	width:50%;
	max-width:800px;
	padding:8px;
	top:0px;
	display:none;
	right: 0px;
}

#keybindtable {
	margin-bottom:1em;
}

#outputbox {
	max-width:20%;
}

#mobileplaylistcontrols
{
	display:none;
}

#flowcontrols {
	height: 36px;
}

#flowcontrols i {
	max-height: 24px;
	margin-top:4px;
}

/*
=====================================================================
= General Classes
=====================================================================
*/

button.iconbutton {
	height: 2em;
	width: 2em;
}

button.spinable.icon-spin6 {
	height: 2em;
	width: 2em;
	background-color: transparent !important;
}

.infobarlayout {
	margin-left:12px;
	margin-top:0px;
	margin-bottom:0px;
	padding-top:0px;
	padding-bottom:2px;
	padding-left:0px;
	padding-right:0px;
	height:96px;
}

.topstats {
	float:left;
	margin-right:4px;
	margin-top:1px;
}

.tagremover {
	margin-left:0.5em;
}

.clicktext {
	font-size:7pt;
	font-weight:bold;
}

.topimg {
	margin-right:4px;
	margin-left:4px;
	margin-bottom:2px;
	cursor: pointer;
	vertical-align:middle;
}

.npicon {
	padding:0px;
	margin-top:0px;
	margin-left:0px;
	margin-bottom:0px;
	margin-right:4px;
	height:20px;
	width:20px;
	vertical-align:middle;
}

.dropmenu {
	padding-left:8px;
}

.rating-icon-big {
	height: 20px;
	width: 100px;
	cursor: pointer;
	vertical-align:middle;
}

.rating-icon-small {
	height: 14px;
	width: 70px;
	cursor: pointer;
	vertical-align:middle;
}

.headercontainer {
	height:90%;
	box-sizing:border-box;
	padding-top:4px;
}

.background-left {
	background-position: left !important;
	max-height: 24px;
}

.background-right {
	background-position: right !important;
	max-height: 24px;
}

#sourcescontrols>i, #chooserbuttons>i, #playlistcontrols>i {
	max-width: 24px;
}

i.topdrop
{
	position: relative;
	font-style: normal;
}

.dragmenu {
	cursor:move;
}

.playlistitem.menuitem {
	align-items: inherit !important;
}

.playlistalbum {
	font-weight:bold;
	margin:0px;
	padding-left:0px;
	padding-right:0px;
	padding-top:4px;
	padding-bottom:2px;
	-webkit-box-align:stretch;
	align-items: stretch;
}

.mh {
	margin-right:6px;
	display:block;
	margin-top:2px;
	margin-bottom:2px;
}

.menu {
	width: var(--menu-toggle-icon-size);
	height: var(--menu-toggle-icon-size);
	vertical-align:middle;
	cursor:pointer;
}

.ninesix {
	font-size:96%;
	padding-top:2px;
}

.indent {
	margin-left:12px;
}

.buttonchange {
	text-align:center;
}

.outhack {
	width:16px;
	height:16px;
	margin-top:2px;
}

body.mobilebrowser .outhack {
	width:18px;
	height:18px;
	margin-top:2px;
}

body.mobilebrowser #volumecontrol {
	width: 18px;
}

body.mobilebrowser .progressbar_v {
	width: 16px;
}

#snapcast-secondary {
	padding-right: 0px;
	margin-right: 0px;
}

body.mobilebrowser .snap_vert_holder {
	margin-right: 4px;
}

body.mobilebrowser .snap_vert_holder:last-child {
	margin-right: 0px;
}

.cshrinker {
	width: 100%;
	max-width:400px;
}

.album-extra-controls {
	height: var(--cover-size);
	display: flex;
	flex-direction: column;
	flex-grow: 0;
	flex-shrink: 0;
	text-align: center;
	margin-left: 1em;
	justify-content: center;
}

.album-extra-controls>i {
	flex-grow: 1;
	flex-shrink: 1;
}

.album-extra-controls>span {
	margin-top: 2px;
	margin-bottom: 2px;
}

/*
=====================================================================
= Info Panel - General
=====================================================================
*/

.info-box-fixed {
	-webkit-box-flex:0;
	flex-grow: 0;
	flex-shrink:0;
}

.info-border-right {
	padding-right:1em;
	max-width:240px;
}

.info-box-expand {
	-webkit-box-flex:1.0;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
}

.info-detail-layout {
	margin-top:8px;
}

.info-box-list img {
	max-width: 220px;
}

/*
=====================================================================
= Dropdown Menus
=====================================================================
*/

div.normalmenu
{
	width:35vw;
	max-width:480px;
	min-width:360px;
}

div.normalmenu.albumbitsmenu {
	max-width: 360px;
}

div.widemenu
{
	width:50vw;
	max-width:640px;
	min-width:400px;
}

div.leftmenu
{
	top: 30px;
	left: 0px;
}

div.rightmenu
{
	top:30px;
	/*right:-12px;*/
	right: 0px;
}

/*
=====================================================================
= Responsive Layout
=====================================================================
*/

@media screen and (max-width: 480px) {
	#notifications {
		width: 90% !important;
	}
}

@media screen and (min-height: 800px) and (max-height: 939px) {
	.infobarlayout {
		height:115px;
	}
	#albumcover {
		height: 107px;
		padding-right:6px;
	}
	#albumpicture {
		height: 107px;
	}
	#nowplaying {
		height: 85px;
	}
}

@media screen and (min-height: 940px) and (max-height: 1099px) {
	.infobarlayout {
		height:140px;
	}
	#albumcover {
		height: 132px;
		padding-right:8px;
	}
	#albumpicture {
		height: 132px;
	}
	#nowplaying {
		height: 110px;
	}
}

@media screen and (min-height: 1100px) {
	.infobarlayout {
		height:160px;
	}
	#albumcover {
		height: 152px;
		padding-right:8px;
	}
	#albumpicture {
		height: 152px;
	}
	#nowplaying {
		height: 130px;
	}
}

/*
=====================================================================
=
= Things that need to be here so they override other things
=
=====================================================================
*/

.invisible {
	display:none;
}

ul.info-links-column>li:not(.info-list-title) {
	margin-top: 2px;
	/*position:  relative;*/
}

ul.info-links-column>li:not(.info-list-title)>i {
	position: absolute;
	left: -2px;
}

ul.info-links-column>li:not(.info-list-title)>a {
	position: relative;
	left: calc(var(--small-icon-size) + 2px);
	top: 2px;
	margin-right: 8px;
}

#sortable i[class*="clickremove"] {
	margin-right: 2px;
}

#sortable i[class*="clickadd"] {
	margin-right: 2px;
}

#buttons
{
    padding-left:12px;
    padding-right:12px;
    padding-top:2px;
    padding-bottom:4px;
}

.controlbutton
{
    margin:0px;
    padding:0px;
    vertical-align:middle;
    display:inline-block;
    width:56px;
    height:56px;
}

.controlbutton-small
{
    margin:0px;
    vertical-align:middle;
    display:inline-block;
    width:48px;
    height:48px;
}

.shiftleft
{
    left:-8px;
    position:relative;
    z-index:250;
}

.shiftleft2
{
    left:-16px;
    position:relative;
}

.shiftleft3
{
    position:relative;
    left:-24px;
    z-index:5;
}

.shiftleft4
{
    position:relative;
    left:-32px;
    z-index:1;
    margin-right:-30px;
}

@media screen and (min-height: 800px) and (max-height: 939px) {
    .controlbutton {
        width:64px;
        height:64px;
    }
    #buttons {
        padding-top:10px;
    }
    #playbackTime {
        margin-top:2px;
        font-size:12px;
        line-height:14px;
        height:14px;
    }
}

@media screen and (min-height: 940px) and (max-height: 1099px) {
    .controlbutton {
        width:84px;
        height:84px;
    }

    .controlbutton-small {
        width:64px;
        height:64px;
    }

    .shiftleft
    {
        left:-12px;
        position:relative;
        z-index:250;
    }

    .shiftleft2
    {
        left:-24px;
        position:relative;
    }

    .shiftleft3
    {
        position:relative;
        left:-36px;
        z-index:5;
    }

    .shiftleft4
    {
        position:relative;
        left:-48px;
        z-index:1;
        margin-right:-36px;
    }

    #buttons {
        padding-top:10px;
        padding-left:24px;
    }

    #playbackTime {
        margin-top:4px;
        font-size:14px;
        line-height:16px;
        height:16px;
    }
}

@media screen and (min-height: 1100px) {
    .controlbutton {
        width:90px;
        height:90px;
    }
    .controlbutton-small {
        width:70px;
        height:70px;
    }
    #buttons {
        padding-top:12px;
        padding-left:20px;
    }
    #progress, .skip-button {
        margin-top:8px;
    }
    #playbackTime {
        margin-top:4px;
        font-size:16px;
        line-height:18px;
        height:18px;
    }
    .shiftleft
    {
        left:-10px;
        position:relative;
        z-index:250;
    }

    .shiftleft2
    {
        left:-20px;
        position:relative;
    }

    .shiftleft3
    {
        position:relative;
        left:-30px;
        z-index:5;
    }

    .shiftleft4
    {
        position:relative;
        left:-40px;
        z-index:1;
        margin-right:-32px;
    }
}