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