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

#keys {
	background: #181818;
	z-index: 28;
}
.keys-keys, .keys-velocity, #keys-drums {
	position: absolute;
	/* WARNING: Using 100% doesn't work since iOS 11.2 (height transition doesn't fire), so use vh instead */
	height: calc(var(--app-height) - 4rem);
	width: 100%;
}
#keys.dual .keys-keys, #keys.dual .keys-velocity {
	/* WARNING: Using 100% doesn't work since iOS 11.2 (height transition doesn't fire), so use vh instead */
	height: calc(calc(var(--app-height) / 2) - 2rem - 1px);
}

.keys-keys, .keys-velocity {
	left: 0;
	transition: transform 0.2s, height 0.2s;
}

.ui button.keys-octave {
	position: absolute;
	width: 2.2rem;
	height: 2.3rem;
	background: rgba(255, 255, 255, 0.3);
	transition: transform 0.2s;
	border: none;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
	color: rgba(0, 0, 0, 0.35);
}
.ui button.keys-octave abbr {
	font-size: 0.6rem;
}
.ui button.keys-octave.ui-touch {
	background: rgba(255, 255, 255, 0.7);
}
.ui button#keys-octave-top-down, button#keys-octave-top-up { top: 0; z-index: 10; }
.ui button#keys-octave-bottom-down, button#keys-octave-bottom-up { top: calc(calc(var(--app-height) / 2) - 2rem); z-index: 6; }
.ui button#keys-octave-top-down, button#keys-octave-bottom-down { margin-left: 1px; border-bottom-right-radius: 50%; padding: 0 0.3rem 0 0; }
.ui button#keys-octave-top-up, button#keys-octave-bottom-up { right: 0; border-bottom-left-radius: 50%; padding: 0 0 0 0.3rem; }

#keys-settings-width {
	width: 4.5rem;
	display: inline-block;
}
#keys-settings-drums-size {
	display: inline;
}
#keys-settings-controllers {
	width: 3.25rem; /* so that it's flush with sliders */
}

#keys.drums button.keys-octave,
#keys.drums #keys-settings-locked,
#keys.drums #keys-settings-width,
#keys.drums #keys-settings-hold,
#keys.drums #keys-settings-hold-plus,
#keys.drums .keys-keys
{
	display: none;
}

#keys:not(.drums) #keys-settings-drums-size,
#keys:not(.drums) #keys-settings-drums-edit-toggle,
#keys:not(.drums) #keys-settings-drums-edit-separator,
#keys:not(.drums) #keys-settings-drums-zoom-separator,
#keys:not(.drums) #keys-settings-drums-edit,
#keys:not(.drums) #keys-settings-drums-zoom-toggle
{
	display: none;
}

#keys:not(.audio) #keys-settings-modules,
#keys:not(.audio) #keys-settings-preset-left,
#keys:not(.audio) #keys-settings-preset-right,
#keys:not(.audio) #keys-settings-presets-menu-button
{
	display: none;
}

.keys-keys {
	overflow: hidden;
	background: #000;
	border-bottom: solid #000 1px;
}

#keys-keys-top, #keys-velocity-top {
	top: 0;
	z-index: 7;
}

#keys-velocity-top { z-index: 8; }
#keys-velocity-bottom { z-index: 6; }

#keys-keys-bottom, #keys-velocity-bottom {
	top: calc(50% - 1rem);
}

#keys:not(.dual):not(.anim) #keys-keys-bottom,
#keys:not(.dual):not(.anim) #keys-velocity-bottom,
#keys:not(.dual):not(.anim) #keys-octave-bottom-down,
#keys:not(.dual):not(.anim) #keys-octave-bottom-up
{
	display: none;
}

#keys #keys-scales {
	text-align: left;
}
#keys:not(.drums) #keys-scales {
	padding: 0;
}

#keys:not(.drums) #keys-scales > div {
	display: flex;
}
#keys:not(.drums) #keys-scales > div > div {
	margin: 0.25rem;
}
#keys #keys-scales > div > div:not(:first-of-type) > div.radio {
	display: block;
}
#keys:not(.drums) #keys-scales > div > div:first-of-type {
	width: 5rem;
}
#keys:not(.drums) #keys-scales > div > div:first-of-type > div.radio.vertical {
	width: 50%;
	vertical-align: middle;
}
#keys.drums #keys-scales > div > div:first-of-type > div.radio.vertical {
	width: 100%;
}
#keys #keys-scales > div > div:first-of-type > div.radio.vertical > button {
	width: 100%;
	height: 1.85rem;
	line-height: 1.5rem;
}
#keys #keys-scales > div > div:not(:first-of-type) {
	width: calc(50% - 2.5rem);
}
							
#keys:not(.drums) #keys-scales { width: 31rem; }

.keys-velocity {
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
	opacity: 0;
	display: none;
	transition: opacity 0.2s, transform 0.2s;
	pointer-events: none;
}

.keys-keys > div {
	position: absolute;
	top: 0;
	height: 100%;
	border-left: solid #000 1px;
	box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, 0.3);
	font-size: 0.47rem;
	color: #000;
}
.keys-keys > div.black {
	height: 50%;
	z-index: 5;
	color: #c0c0c0;
}

.keys-keys > div > span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	line-height: 3em;
	height: 3em;
	background-color: rgba(0, 0, 0, 0.05);
	pointer-events: none;
/*	border-radius: 0 0 7px 7px;	*/
}
#keys.fade .keys-keys > div.down > span {
	background-color: rgba(255, 255, 255, 0.4);
}
#keys.fade .keys-keys > div:not(.down) > span {
	/* too slow right now for audio */
	/*transition: background-color 5s cubic-bezier(0.000, 0.945, 1.000, 0.070);*/
	transition: background-color 0s 5s;
}

#keys-drums {
	top: 0;
	right: 0;
	display: none;
	font-size: 0;
	text-align: center;
	transition: width 0.2s;
	background: #000;
}
#keys.drums #keys-drums {
	display: block;
}

#keys-drums > div {
	border: solid #181818 0.5px;
	box-sizing: border-box;
	box-shadow: inset 0 0 18px 0 rgba(0, 0, 0, 0.35);
	position: absolute;
	background: #282828;
}
#keys-drums > div.zoom {
	transition: left 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000), bottom 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000), width 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000), height 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	z-index: 5;
}
#keys.fade:not(.edit) #keys-drums > div:not(.down) {
/*	transition: background-color 0.5s cubic-bezier(0.105, 0.725, 0.295, 0.820);*/
}
#keys.edit #keys-drums > div {
	transition: transform 0.2s, opacity 0.2s;
}
#keys.edit #keys-drums > div.drag {
	transform: scale3d(1.2, 1.2, 1);
	z-index: 100;
	opacity: 0.7;
	filter: brightness(1.35);
	border: none;
}

/* velocity */
#keys-drums > div > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
	pointer-events: none;
}
#keys-drums.velocity-mode-maxAtCenter > div > div { background: radial-gradient(transparent, rgba(0, 0, 0, 0.47)); }
#keys-drums.velocity-mode-maxAtCenterV > div > div { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.47), transparent, rgba(0, 0, 0, 0.47)); }
#keys-drums.velocity-mode-maxAtTop > div > div { background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.47)); }
#keys-drums.velocity-mode-maxAtBottom > div > div { background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.47)); }

#keys-drums.velocity > div > div {
	opacity: 1;
	visibility: visible;
}

#keys-drums > div.drop-target {
	outline: solid 1px #fff;
	z-index: 100;
}

#keys-drums .drum-title, #keys-drums .drum-note {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
	pointer-events: none;
}

#keys-drums .drum-title {
	top: 50%;
	color: #000;
	transform: translateY(-50%);
	font-size: 0.7rem;
}

#keys-drums .drum-note {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1.6em 1.8em 0 0;
	line-height: 1;
	color: rgba(255, 255, 255, 0.35);
	display: block;
	font-size: 0.47rem;
	width: 4em;
	height: 3em;
	text-align: center;
	box-sizing: border-box;
	background: linear-gradient(38deg, rgba(0, 0, 0, 0.1) 48%, transparent 49%);
	pointer-events: none;
}

#keys-controllers {
	position: absolute;
	left: 0;
	top: 0;
	height: calc(100% - 2rem);
}

#keys-controllers-sliders {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	height: calc(100% - 2rem - 2px);
}

#keys-controllers-sliders > div {
	position: relative;
}

#keys-controllers-sliders:not(.vertical) {
	flex-direction: row;
}
#keys-controllers-sliders.vertical {
	flex-direction: column-reverse;
}

#keys-controllers-sliders:not(.vertical) > div {
	height: 100%;
}
#keys-controllers-sliders.vertical > div {
	height: 33.333%;
}

#keys-controllers-sliders > div > slider {
	height: calc(100% - 2rem);
	position: absolute;
	top: 2rem;
	left: 0;
}

#keys-controllers-sliders > div:not(:first-child) > slider {
	border-left: none;
}

#keys-controllers-sliders > div > button {
	width: 3.25rem;
	padding-left: 0;
	padding-right: 0;
	height: 2rem;
}

#keys-controllers-menu-button {
	position: absolute;
	bottom: 2px;
	left: 0;
	width: 100%;
}

.ui menu.controller-input-mode-menu {
	width: 3.25rem;
	padding: 0;
}

.ui menu.controller-input-mode-menu {
	transform: translateY(-0.7rem);
}

.ui menu.controller-input-mode-menu button {
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}