/*
=====================================================================
= Specific Elements By ID
=====================================================================
*/

:root {

	--track-control-icon-size: var(--small-icon-size);
}

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

#thetopbit {
	flex-grow: 0;
	flex-shrink:0;
	max-width: 100%;
	/*overflow-x: hidden;*/
}

#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%;*/
	max-width: inherit;
	padding-top:4px;
	margin:0px;
}

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

#progress {
	font-size:6px;
	width: 100%;
}

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

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

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

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

#playbackTime {
	font-size:12px;
	height:16px;
	line-height:16px;
}

#albumcover {
	margin:0px;
	z-index:500;
}

#upcoming {
	max-width:35%;
	min-width:20%;
	height:100%;
	overflow:hidden;
	font-size:90%;
}

.holderthing {
	display:-webkit-box;
	display: flex;
	flex-wrap:wrap;
}

#uptrackcount, #uptimecount {
	font-weight:bold;
}

#upcontents {
	line-height:110%;
}

#albumpicture {
	width: auto;
}

#nowplaying-info-wrapper {
	box-shadow: none !important;
}

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

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

#gronky {
	margin-left:8px;
	font-size:8pt;
}

#nowplaying_icons {
	padding-top:4px;
}

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

#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:42px;
	height:100%;
}

#headerbar i {
	display: block;
	margin-top: 12px;
	margin-left:8px;
	width: 28px;
	height: 32px;
}

#headerbar>#sourcescontrols>i.topimg:first-child {
	margin-top: 0px;
}

#headerbar i.invisible {
	display: none;
}

#infopanecontrols {
	text-align: center;
}

#bottompage {
	width:100%;
}

#sources {
	height:100%;
	overflow:auto;
}

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

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

#keybindtable {
	margin-bottom:1em;
}

#outputbox {
	max-width:20%;
}

#mobileplaylistcontrols
{
	display:none;
}

#flowcontrols {
	height: 36px;
}

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

#plmode {
	font-size:8pt;
	height:22px;
	line-height:22px;
}

.album-play-controls {
	margin-bottom: 1em;
	padding-top: 8px;
	padding-bottom: 8px;
	border-top: 1px solid var(--border-colour);
	border-bottom: 1px solid var(--border-colour);
}

/* These are the two time display boxes under the progress bar*/

.timebox {
	min-width: 4em;
	font-size:9pt;
	font-weight:bold;
	line-height:100%;
}

.tboxl {
	text-align:left;
}

.tboxr {
	text-align:right;
}

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

#collection>div.menu:nth-of-type(even),
#audiobooks>div.menu:nth-of-type(even),
#searchresultholder>div.menu:nth-of-type(even),
#filecollection>div.menu:nth-of-type(even),
.collectionpanel>div.directory:nth-of-type(even),
div.is-albumlist>div.playable:nth-of-type(even),
div.is-albumlist>div.directory:nth-of-type(even)
{
    background-color: var(--album2-colour);
    background-clip:border-box;
}

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

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

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

.infobarnoheight {
	margin-left:6px;
	margin-right:6px;
	margin-top:2px;
	margin-bottom:2px;
	padding-top:0px;
	padding-left:0px;
	padding-right:0px;
}

.tinycover
{
	margin-right:8px;
	width:28px;
	height:auto;
}

.controlbutton-left
{
	padding-right:4px;
	padding-left:6px;
}

.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;
	height: 24px;
	width:24px;
	margin-bottom:2px;
	cursor: pointer;
	vertical-align:middle;
}

.smallcover {
	/*transition: width 0.5s ease;*/
	max-width:300px;
}

#infopane .dropmenu {
	margin-bottom: 20px;
	padding-left: 0px;
}

.dropmenu {
	padding-left:8px;
}

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

.invisibleicon {
	display: block !important;
	opacity: 0;
}

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

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

/*.podcounts {
	margin-left: 4px;
	margin-bottom: 4px;
	margin-right: 4px;
}

.podcounts>.newpod {
	display: inline;
	float: left;
}

.podcounts>.unlistenedpod {
	float: right;
}
*/
.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 {
	cursor:pointer;
}

[class^="icon-"].menu, [class*=" icon-"].menu {
	width: var(--inline-clickable-icon-size);
	height: var(--inline-clickable-icon-size);
	box-sizing: border-box;
	border-width: var(--inline-clickable-icon-border-width);
	border-style: solid;
	border-color: transparent;
	vertical-align:middle;
}

.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;
}

.smallpluginicon {
	padding:0px;
	margin-right:4px;
	margin-bottom:2px;
	margin-top:1px;
	vertical-align:middle;
}

.collectionpanel {
	box-sizing: border-box;
	/*border-left: 4px solid transparent;*/
	justify-content: center;
}

.album-extra-controls {
	display: flex;
	flex-direction: row;
	flex-grow: 0;
	flex-shrink: 0;
	text-align: center;
	justify-content: center;
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 4px;
	margin-bottom: 2px;
}

.album-extra-controls>i {
	flex-grow: 1;
	flex-shrink: 1;
	width: var(--small-icon-size);
	height: var(--small-icon-size);
}

.newpod {
	margin-left: unset;
}

.artistnamething {
	font-size:140%;
}

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

.title-menu.containerbox.vertical-centre {
	margin-right: 0px;
	margin-left: 0px;
}

.title-menu.containerbox.vertical-centre>i.svg-square {
	margin-right:4px;
}

.minwidthed2.expand>.tagh.albumthing {
	padding: 0px;
}

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

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

@media screen and (max-height: 1099px) {
	.infobarlayout {
		height:160px;
	}
	#albumcover {
		height: 182px;
	}
	#albumpicture {
		height: 178px;
		padding: 2px;
	}
	#nowplaying {
		height: 130px;
	}

	.controlbutton-small
	{
		width:26px !important;
		height:26px !important;
		margin-top:6px !important;
		margin-left:4px !important;
	}

	.controlbutton
	{
		width:36px !important;
		height:36px !important;
		margin-top:6px !important;
	}

	.smallpluginicon
	{
		height: 20px !important;
		width: 18px !important;
	}
}

@media screen and (min-height: 1100px) {
	.infobarlayout {
		height:180px;
	}
	#albumcover {
		height: 202px;
	}
	#albumpicture {
		height: 198px;
		padding: 2px;
	}
	#nowplaying {
		height: 150px;
	}
	.controlbutton-small
	{
		width:30px !important;
		height:30px !important;
		margin-top:6px !important;
		margin-left:4px !important;
	}

	.controlbutton
	{
		width:38px !important;
		height:38px !important;
		margin-top:6px !important;
	}

	.smallpluginicon
	{
		height: 24px !important;
		width: 18px !important;
	}
}

/*
	Customisations that make this skin work
*/

div.playable.smartradio.collectionitem {
	background-color: var(--album2-colour);
	background-clip: padding-box;
	padding: 4px;
}

div.collectionpanel>div.configtitle>div.textcentre {
	font-size:125%;
}

div.collectionpanel>div.configtitle[id^="bartist"] {
	margin-top: 6px !important;
	margin-bottom: 2px !important;
}

div.configtitle.search-section>div.textcentre {
	font-size:140%;
}

div[id^=dirholder]>div.clicktrack.line {
	width: 100%;
}

.collectionitem:not(.collection_spacer) {
	box-sizing:border-box;
	border: 4px solid transparent;
	/*transition: width 0.5s ease;*/
}

#pluginplaylistslist .menuitem.fullwidth {
	border: 4px solid transparent;
}

.collectionitem:not(.masonry_opened) {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 20%;
	min-width: 200px;
	max-width: 320px;
}

#radiolist>.collectionitem.fixed {
	/*max-width: 200px;*/
}

#radiolist .radiosection .svg-square {
	height: var(--cover-size);
	width: var(--cover-size);
	margin-right: 1em;
}

/* Don't know why but the background colour is visible through the left and right
   borders but only when the panel is opened. So this is a kludge.
   The podcast panels behave differently, despite having EXACTLY THE SAME MARKUP
   so I don't fucking know what CSS thinks it's doing. */
.collectionitem.selecotron.masonry_opened.dropshadow {
	padding-left: 0px;
	flex-basis: calc(100% - 8px);
}

#fruitbat .collectionitem.selecotron.masonry_opened.dropshadow {
	margin-left: 4px;
}

/* End of kludge */

.collectionitem .playable.indent {
	margin-left: 0px !important;
}

.collectionitem.fixed.selecotron:not(.masonry_opened)>.containerbox.wrap {
	height: 100%;
}

.collectionitem.fixed.selecotron:not(.masonry_opened)>.containerbox.openmenu {
	height: 100%;
}

#podcastslist .masonry_opened>.minwidthed2:before
{
	content:"";
	width: 20em;
	display:block;
	overflow:hidden;
}

.minwidthed2.expand>.tagh.albumthing, .dropmenu.minwidthed2>.tagh.albumthing, .collectionitem.masonry_opened>.openmenu .tagh.albumthing {
	margin-bottom: 0.25em;
	font-size: 140%;
}

.collectionitem.fixed.selecotron.masonry_opened>.radiochannel+.minwidthed2:before
{
	content:"";
	width: 20em;
	display:block;
	overflow:hidden;
}

#pluginplaylistslist .collectionitem .helpfulalbum {
	padding-top:4px;
	padding-bottom:4px;
}

div.helpfulalbum>div.tagh.albumthing {
	max-width: 360px;
}

.collectionitem.masonry_opened.dropshadow .helpfulalbum {
	-webkit-box-flex:0;
	flex-grow: 0;
	flex-shrink:0;
	background-color: unset !important;
	background-image: unset !important;
}

.collectionitem.masonry_opened.dropshadow .openmenu:not(.podcast) .helpfulalbum {
	max-width: 35%;
}

.collectionitem.masonry_opened.dropshadow .openmenu.menu.podcast {
	max-width: 50%;
}

@media screen and (max-width: 800px) {
	.collectionitem.masonry_opened.dropshadow .openmenu.menu.podcast {
		max-width: 40%;
	}
}
.collectionitem.masonry_opened.dropshadow .containerbox.vertical:not(.podoptions):not(.open-album-title),
.collectionitem.masonry_opened.dropshadow .containerbox.openmenu.podcast,
.collectionitem.masonry_opened.dropshadow .containerbox.radiochannel  {
	padding-bottom: 4px;
	padding-top: 4px;
	float: left;
}

@media screen and (max-width:800px) {
	div.collectionitem.masonry_opened>div.containerbox>div.helpfulalbum>img.jalopy {
		max-width: 260px;
	}
}

#pluginplaylistslist .collectionitem .menuitem {
	padding-left:0px;
	height:100%;
}

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