
/*
=====================================================================
=
= 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;
}

.poopybigsmell {
	transform: rotate(-45deg);
}

/*
=====================================================================
=
= 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%;
}
