/*********** NEVER USE filter: !!! GIVES RANDOM ARTIFACTS ALL OVER THE PLACE **************/

.toolbar, .ui menu {
/*	box-shadow: 0 0 10px 0 #000;*/
}

.toolbar {
	position: absolute;
	left: 0;
	width: 100%;
	font-size: 0; /* this used to use display: inline-block etc... we're now using display: flex, but only for the UPPERMOST level; the lowers still rely on inline-block and thus font-size 0 */
	display: flex;
	justify-content: space-between;
	z-index: 10;
	background: #1a1a1a;
	white-space: nowrap;
	opacity: 1;
	height: 2rem;
}

.toolbar:not(.top) { bottom: 0; border-top: solid 2px #000; }
body.audio .screen .toolbar:not(.top) { width: calc(100% + 6rem); }
.toolbar.top { top: 0; z-index: 30; border-bottom: solid 2px #000; }

.ui button, .ui div.label {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	box-sizing: border-box;
}
.ui button {
	height: 2rem;
	line-height: 2rem;
	font-size: 0.72rem;
}
body.toolbar-labels .ui button.label {
	position: relative;
	text-overflow: initial;
}

.ui button img { /* for AU icon */
	height: 1.1rem;
	width: auto;
	vertical-align: middle;
}

.ui div.label {
	padding: 0.78em 0;
	line-height: 1.25;
	color: #ddd;
	font-size: 0.65rem;
	text-transform: uppercase;
	color: #c0c0c0;
}
.ui menu div.label {
	font-size: 0.56rem;
}
.ui menu div.label:not(:first-child) {
	margin-top: 0.3em;
}
.ui div.label.inline,
.ui .button-grid > div.label.inline
{
	margin-left: 0.75rem;
	padding: 0;
	line-height: 2.15rem;
}
.ui /*menu*/ div.label:not(.inline) {
	display: block;
	width: 100%;
}
.ui .toolbar > div.label, .ui .toolbar > div > div.label, .ui .toolbar > div > div > div.label {
	line-height: 2rem;
	padding: 0 0.35rem;
}

body.toolbar-labels .ui button.label label {
	display: block;
	color: #888;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	font-size: 0.45rem;
	line-height: 1;
	position: absolute;
	bottom: 0.15rem;
	left: 0;
	width: 100%;
}
body.toolbar-labels .ui button.on.label label,
body.toolbar-labels .ui button.menu.on.label label
{
	color: #ddd;
}
body.toolbar-labels .ui button.toggle.on.label label,
body.toolbar-labels .ui button.menu.active.label label,
body.toolbar-labels .ui .toolbar:not(.top) button.menu.active label
{
	color: #000;
}
body:not(.toolbar-labels) .ui button.label label {
	display: none;
}

.ui #settings-content div.label {
}

.ui button {
	margin: 0;
	padding: 0 1rem;
	border: solid #181818 0.5px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ui button:not(.toggle) {
	background: linear-gradient(#242424, #2c2c2c);
	box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.3);
	color: #fff;
}
.ui button.cc,
.popups.ui > menu button.cc,
.popups.ui .popups-shade > menu > div > div > div > button.cc,
.popups.ui .popups-shade > menu > div > div > button.cc
{
	text-align: left;
	padding-left: 0.75em;
	padding-right: 2.2em;
	position: relative;
}
.ui button.cc.empty, .popups.ui > menu button.cc.empty {
	color: #aaa;
}
.ui button.cc > span, .popups.ui > menu button.cc > span {
	position: absolute;
	right: 0.75em;
	opacity: 0.7;
}

.ui .toolbar > button, .ui .toolbar > div > button, .ui .toolbar > div > div > button {
	border-top: none;
	border-bottom: none;
}

.ui button.narrow {
	padding: 0 0.6rem;
}

.ui .toolbar button.back {
	background: linear-gradient(#333, #444);
	width: 4em;
	padding: 0 0.6rem;
}

.ui div.radio button {
	line-height: 2rem;
}
.ui div.radio button:not(.ui-touch) {
	background: linear-gradient(#080808, #111 calc(100% - 0.1rem), #111 calc(100% - 0.1rem), #656565);
}
.ui div.radio.vertical button:not(.ui-touch) {
	background: linear-gradient(to left, #080808, #111 calc(100% - 0.1rem), #111 calc(100% - 0.1rem), #656565);
}
.ui div.radio.vertical button.right:not(.ui-touch) {
	background: linear-gradient(to right, #080808, #111 calc(100% - 0.1rem), #111 calc(100% - 0.1rem), #656565);
}
.ui div.radio button:not(.ui-touch) {
	color: #999;
}
.ui div.radio button.on {
	background: linear-gradient(#2e2e2e, #3f3f3f calc(100% - 0.1rem), #ccc calc(100% - 0.1rem), #fff);
	box-shadow: inset 0 -3px 5px 0 rgba(255, 255, 255, 0.17);
	text-shadow: 0 0 2px #000;
	color: #fff;
}
.ui div.radio.vertical button.on {
	background: linear-gradient(to left, #2e2e2e, #3f3f3f calc(100% - 0.1rem), #ccc calc(100% - 0.1rem), #fff);
	box-shadow: inset 3px 0 5px 0 rgba(255, 255, 255, 0.17);
}
.ui div.radio.vertical button.right.on {
	background: linear-gradient(to right, #2e2e2e, #3f3f3f calc(100% - 0.1rem), #ccc calc(100% - 0.1rem), #fff);
	box-shadow: inset -3px 0 5px 0 rgba(255, 255, 255, 0.17);
}

body.ui-mouse .ui button:hover
{
	filter: brightness(1.7);
}

.ui button.toggle {
	background: linear-gradient(#0c0c0c, #151515);
	box-shadow: inset 0 0 0.7rem 0 rgba(255, 255, 255, 0.1);
	color: #ddd;
}
.ui button.toggle.on {
	background: #fff;
	box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	color: #000;
}
.ui button.toggle.mixed {
	background: #656565;
	box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.5);
	color: #fff;
}

.ui button.input, .ui menu button.input, .popups.ui button.input {
	text-align: left;
	background: linear-gradient(#232323, #151515 30%, #121212 50%, #151515 70%, #232323);
	padding-left: 1rem;
	padding-right: 1rem;
}
.ui button.input.placeholder, .ui menu button.input.placeholder, .popups.ui button.input.placeholder {
	color: #999;
}
.ui button.input.number, .ui menu button.input.number, .popups.ui button.input.number {
	text-align: right;
}

.ui button.preset {
	text-align: left;
	padding-left: 1rem;
	padding-right: 1rem;
}
.ui button.preset .modified {
	float: right;
}

.ui div.radio {
	display: inline-block;
}
.ui div.radio button:not(:first-child) {
	border-left: none;
}
.ui div.radio button:not(:last-child) {
	border-right: none;
}
.ui div.radio.vertical button {
	display: block;
	border-left: none;
}
.ui div.radio.vertical button.right {
	border-right: none;
}
/* meant for showing long lists of stuff in menus, like DATA TYPE menu or drum maps... slightly shorter than the max-height of the menu itself, so that a label or the drum map load/save stuff still fits without the menu itself having to scroll */
.ui menu div.scrollable {
	width: 100%;
	max-height: calc(var(--app-height) - 2 * 2rem - 2rem - 3.3rem);
	overflow: auto;
	display: block;
}

.toolbar div.left,
.toolbar div.center,
.toolbar div.right
{
}

.ui button abbr {
	font-size: 1rem;
	position: relative;
	top: -0.09em;
}
body.toolbar-labels .ui button.label abbr {
	top: -0.3rem;
}
body.toolbar-labels .ui button.label > span {
	position: relative;
	top: -0.25em;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui button.hoyloyt {
	position: relative;

}
.ui button.hoyloyt::after {
	font-size: 75%;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.7em;
	font-weight: bold;
	text-align: center;
	display: block;
	border-radius: 100%;
	content: '1';
	position: absolute;
	top: calc(50% - 0.75em - 0.7em);
	right: calc(50% - 0.75em - 1em);
	background: red;
	color: #fff;
	box-shadow: 0 0 0.2rem 0 #000;
}

.ui .toolbar:not(.top) button.menu, .ui .audio-insert-toolbar button.menu, .ui button.menu.up:not(.ui-touch) {
	background: linear-gradient(45deg, transparent, transparent calc(100% - 0.4em), rgba(60, 60, 60, 1) calc(100% - 0.4em)), linear-gradient(#242424, #272727);
}
.ui .toolbar:not(.top) button.menu.on, .ui .audio-insert-toolbar button.menu.on, .ui button.menu.up.on {
	background: linear-gradient(45deg, transparent, transparent calc(100% - 0.4em), #fff calc(100% - 0.4em)), linear-gradient(#3e3e3e, #555);
}
.ui button.menu {
	background: linear-gradient(135deg, transparent, transparent calc(100% - 0.4em), rgba(80, 80, 80, 1) calc(100% - 0.4em)), linear-gradient(#242424, #272727);
}
.ui button.menu.on {
	background: linear-gradient(135deg, transparent, transparent calc(100% - 0.4em), #fff calc(100% - 0.4em)), linear-gradient(#3e3e3e, #555);
}
.ui button.menu.active {
	background: linear-gradient(135deg, transparent, transparent calc(100% - 0.4em), #fff calc(100% - 0.4em)), linear-gradient(#999, #aaa);
}
.ui button.menu.up.active {
	background: linear-gradient(45deg, transparent, transparent calc(100% - 0.4em), #fff calc(100% - 0.4em)), linear-gradient(#999, #aaa);
}

.disabled, .disabled-recording {
	opacity: 0.15;
	pointer-events: none;
}

.ui button.ui-touch, .ui .toolbar:not(.top) button.ui-touch, .ui .toolbar.top button.ui-touch, .ui button.on.ui-touch, .ui .toolbar:not(.top) button.on.ui-touch, .ui .toolbar button.on.ui-touch {
	background: #888;
	color: #000;
}

.toolbar div.separator {
	display: inline-block;
}
body.ui-iphone .toolbar div.separator {
	margin: 0 0.15rem;
}
body.ui-ipad .toolbar div.separator {
	margin: 0 0.3rem;
}

.ui menu {
	overflow: hidden;
	overflow-y: auto;
	background: #1a1a1a;
	max-height: calc(var(--app-height) - 2 * 2rem/*toolbars*/ - 2 * 0.4rem/*padding*/ - 2rem/*ruler*/);
	margin: 0;
	padding: 0.4rem;
	white-space: normal;
	text-align: center;
	font-size: 0;
	width: 10rem;
	display: none;
	opacity: 0;
	transform: translateY(-0.7rem);
	transition: transform 0.12s, opacity 0.12s;
	position: fixed;
	z-index: 100;
}
.ui .toolbar:not(.top) menu, .ui menu.up {
	transform: translateY(0.7rem);
}
.ui menu#mixer-channels-menu {
	max-height: calc(var(--app-height) - 2rem - 0.8rem);
}

.ui .toolbar menu {
	border: solid #000 1.5px;
}
.ui .toolbar.top menu { border-top: none; }
.ui .toolbar:not(.top) menu { border-bottom: none; }

#plugins.ui menu.fullscreen .plugin-titlebar {
	display: none;
}

.ui menu.show, .ui menu#arranger-tracks-menu.show, .ui .toolbar.top menu.show, .ui .toolbar:not(.top) menu.show, .ui menu.show.controller-input-mode-menu {
	opacity: 1;
	transform: none;
}

.ui menu.wide {
	width: auto;
}
.ui menu.full-width {
	width: calc(100vw - 0.8rem);
}

.ui menu button {
	height: 2.15rem;
	line-height: 2.15rem;
	width: 5rem;
	padding-left: 0;
	padding-right: 0;
}
.ui menu.wide button, .ui menu.full-width button {
	width: auto;
}

/* submenu */

.ui menu > menu, .ui .toolbar:not(.top) menu > menu, .ui .toolbar menu > menu {
	overflow: hidden;
	position: static;
	padding: 0;
	margin: 0;
	margin-bottom: 0.4rem;
	width: 100%;
	display: none;
	opacity: 1;
	transform: none;
	border: none;
}
.ui menu > menu, .ui menu.sub-menu-open {
	transition: height 0.15s;
}

/**/

#transport-switch-to-host {
	transition: width 0.2s, padding 0.2s;
	width: 3.2rem;
	padding-left: 0;
	padding-right: 0;
}
#transport-switch-to-host abbr {
	transition: opacity 0.2s;
}
#transport-switch-to-host:not(.show)
{
	width: 0;
}
#transport-switch-to-host:not(.show) abbr
{
	opacity: 0;
}

#transport-mixer abbr.local-midi { width: 0.83em; }
#transport-keys abbr.local-keys { height: 0.83em; }

#transport-loop {
	position: relative;
}

#transport-loop-pos {
	position: absolute;
	top: 0;
	left: 0.5px;
	height: 6.5%;
	border-bottom: solid 1px #000;
	width: calc(100% - 1px);
	background: #444;
}
#transport-loop-pos span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: #fff;
	width: 100%;
	transform: scale3d(0,1,1);
	transform-origin: top left;
}

.tab-content-scroller {
	font-size: 0;
	white-space: nowrap;
	position: relative;
	/* we used to use transform, but that interferes with position: fixed popups inside */
	left: 0;
	transition: left 0.2s;
}

.tab-content {
	width: 100%;
	max-height: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.75rem 0 0.75rem;
	display: inline-block;
	vertical-align: middle;
	white-space: normal;
	overflow: auto;
	visibility: hidden;
}

#transport-bpm-sync abbr {
	font-size: 0.5rem;
	margin-left: 0.1rem;
	line-height: 1.1;
	color: #707070;
}
#transport-bpm-sync.sync abbr {
	color: #eee;
}

@media screen and (max-width: 990px) {
	.ui #pianoroll-toolbar button,
	.ui #arranger-toolbar button,
	.ui #transport button:not(#transport-switch-to-host)
	{
		padding: 0 0.85rem;
	}
}