:root {
	/* Old Color Scheme
	--bgColor: rgba(205, 205, 205, 1);
	--innerMenuBgColor: rgba(225, 225, 225, 1);
	--sliderBgColor: rgba(245, 245, 245, 1);
	--fontColor: rgba(25, 25, 25, 1);
	--buttonFontColor: #424242;
	--buttonBgColor: #9e9e9e;
	--buttonActiveBgColor: #d3d3d3;
	--buttonHoverBgColor: #c9c9c9;
	--borderColor: rgba(0, 0, 0, 0.5); */

	--dark0: rgb(24, 24, 24);
	--dark05: #131313;
	--dark1: #252525;
	--dark2: #313131;
	--dark3: #424242;
	--dark4: #505050;

	--highlight0: #4593c1;
	--highlight1: #307c12;

	/* --bgColor: #6e6e6e; */

	/* --innerMenuBgColor: #5f5f5f; */
	/* --darkInnerMenuBgColor: #2d2d2d; */
	/* --darkerInnerMenuBgColor: #1f1f1f;
	--lightInnerMenuHoverBgColor: #686868; */

	--inputBgColor: rgb(10, 10, 10);
	--inputBorderColor: rgb(0, 0, 0);
	--inputFontColor: #bbbbbb;
	/* #eeeeee; */

	--fontColor: #cdcfd1;
	/* rgb(219, 219, 219); */
	--fontColorDark: #2c2c2c;
	--fontWeightedColor: #d3d3d3;
	--fontWeakenedColor: #afafaf;

	--lightBg: #d4d4d4;

	--buttonFontColor: #cdcfd1;
	/* rgb(240, 240, 240); */
	--buttonBgColor: #444444;
	--buttonActiveBgColor: #2f2f2f;
	--buttonHoverBgColor: #383838;
	--buttonHoverFontColor: #cdcfd1;
	/* #dfdfdf; */

	--borderColor: #616161;

	--progressBarGreen: #009c00;
	/* #3e953e; */
	--red: #f10000;

	--pitchPracticeNoteWidth: 130px;
	--progressBarHeight: 16;
	--whiteKeyHeight: 16;

	--btnBoxShadow: inset 0px -1px 2px 0px black;

	--btnBoxShadowInset: none;
}

@font-face {
	font-family: "Quicksand";
	src: url("../resources/fonts/quicksand/Quicksand-VariableFont_wght.ttf")
		format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

html,
body {
	font-family: "Source Sans Pro", sans-serif !important;

	font-family: "Quicksand", sans-serif !important;
	color: var(--fontColor);
	width: 100%;
	height: 100%;
	min-width: 320px;
	min-height: 100%;
	background-color: #424242;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	-webkit-text-size-adjust: none;
	font-size: 20px;
}

@media only screen and (max-width: 1200px) {
	html,
	body {
		font-size: 16px;
	}
}
@media only screen and (max-width: 975px) {
	html,
	body {
		font-size: 16px;
	}
}

body {
	overflow-y: hidden;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}

.dottedBg {
	/* background-image: url(../resources/images/bgPattern.png); */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAXklEQVQoU5XQwQpAQBAG4I9cpKQc5P2fzkFJyUXShkLK2su009dM8yf2l6PCiuXoZUgxYE4uaMR0oLMUKAMOsMUbuuEAG3SPSc9vE2CN/gPWv2D06uhjzgw/44kKfAM0qxaj3S9VAgAAAABJRU5ErkJggg==);
	background-repeat: repeat;
	background-size: 6px 6px;
}
.inlineFlex {
	display: inline-flex;
}
.spaceAround {
	display: flex;
	justify-content: space-around;
}

@-webkit-keyframes pulse {
	0% {
		-webkit-box-shadow: 0 0 0 0 rgba(10, 141, 228, 0.4);
	}
	50% {
		-webkit-box-shadow: 0 0 0 10px rgba(10, 141, 228, 0.4);
	}
	100% {
		-webkit-box-shadow: 0 0 0 0 rgba(10, 141, 228, 0.4);
	}
}
@keyframes pulse {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(10, 141, 228, 0.4);
		box-shadow: 0 0 0 0 rgba(10, 141, 228, 0.4);
	}
	50% {
		-moz-box-shadow: 0 0 0 10px rgba(10, 141, 228, 0.4);
		box-shadow: 0 0 0 10px rgba(10, 141, 228, 0.4);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(10, 141, 228, 0.4);
		box-shadow: 0 0 0 0 rgba(10, 141, 228, 0.4);
	}
}

.btn-group {
	align-self: auto;
}
.btn-group:not(.btn-group-vertical) {
	align-items: center;
}
.btn-group-vertical {
	display: flex;
	flex-direction: column;
}
button {
	font-family: "Quicksand", sans-serif !important;
}
.btn {
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
	touch-action: manipulation;
	white-space: nowrap;

	padding: 0.5em;
	margin: 0;

	text-align: center;
	font-size: 1rem;
	font-weight: normal !important;

	outline: none;
	border-radius: 7px;
	border: none;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;

	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;

	transition:
		all 0.15s ease-out,
		box-shadow 0.7s ease;

	background-color: var(--dark0);
	color: var(--buttonFontColor);
	/* box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.5); */
	box-shadow: inset 0px 0px 0px 1px var(--dark05);
	/* 0px 0px 3px 2px rgba(0, 0, 0, 0.25); */
	box-shadow:
		inset -3px -3px 9px 0px rgba(0, 0, 0, 0.25),
		inset -1px -1px 3px 0px rgba(0, 0, 0, 0.5),
		inset 3px 3px 9px 0px rgba(255, 255, 255, 0.1),
		0px 0px 15px 0px rgba(0, 0, 0, 0.3);
	box-shadow:
		inset -1px -1px 10px 3px rgb(0 0 0 / 38%),
		inset -1px -1px 3px 0px rgba(0, 0, 0, 0.75),
		inset 1px 1px 3px 0px rgba(255, 255, 255, 0.3),
		inset 1px 1px 6px 0px rgba(255, 255, 255, 0.1),
		0px 0px 3px 0px rgba(0, 0, 0, 0.73),
		0px 0px 6px 4px rgba(0, 0, 0, 0.2);

	font-family: "Quicksand", sans-serif !important;
}
.btn:disabled {
	cursor: default;
	background-color: var(--dark2);
	color: var(--fontColorDark);
	box-shadow: none;
}
.btn:hover:active {
	background-color: var(--dark2);
}
.btn:hover:not(:disabled) {
	background-color: var(--dark05);
	color: var(--buttonHoverFontColor);
}

.btn:focus-visible {
	box-shadow:
		0px 0px 0px 1px var(--buttonFontColor),
		inset 0px 0px 0px 1px var(--buttonFontColor);
}
.btn-select-line {
	pointer-events: none;
	transition:
		left 0.3s ease-in-out,
		width 0.3s ease-in-out,
		opacity 0.3s ease-in-out;
	position: absolute;
	left: 50%;
	width: 0%;
	height: 2px;
	bottom: 2px;
	opacity: 0.5;
	background-color: var(--highlight0);
	z-index: 1000;
	border-radius: 2px;
	margin-bottom: -2px;
}
.btn.selected {
	/* border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px; */
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
	box-shadow:
		inset 0px 0px 5px 3px rgb(0 0 0 / 45%),
		inset 0px 0px 3px 0px rgba(0, 0, 0, 0.5),
		inset 0px 0px 9px 0px rgba(255, 255, 255, 0.1),
		inset 0px 0px 3px 0px rgba(255, 255, 255, 0.1),
		1px 1px 4px 0px rgba(255, 255, 255, 0.05),
		0px 0px 6px 4px rgba(0, 0, 0, 0.5);
	z-index: 2;
	background-color: var(--dark05);
	color: white;
}
nav.btn.selected {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.5);
	background-color: var(--dark05);
	color: var(--highlight0);
}
.btn .caption {
	font-size: 0.6rem;
	margin-left: 15px;
}

.btn.textGlyphButton,
.btn.textButton {
	padding: 0.5em 1em;
}
.midiBtn {
	white-space: break-spaces;
}
.selected .btn-select-line {
	left: 2%;
	width: 96%;
	opacity: 1;
}

.textGlyphButton .buttonText {
	flex: 1;
}

.vertical-align {
	display: flex;
	align-items: center;
}
.hidden {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.25s ease-out,
		visibility 0.25s ease-out;
}
.unhidden {
	visibility: visible;
	opacity: 1 !important;
}
.hideLeft {
	visibility: hidden;
	transition:
		opacity 0.25s ease-out,
		visibility 0.25s ease-out,
		margin-left 0.25s ease-out;
	transform: translate(100%, 0);
}
.hideTop {
	transition:
		opacity 0.25s ease-out,
		visibility 0.25s ease-out,
		margin-bottom 0.25s ease-out;
	margin-bottom: -100vh;
	opacity: 1;
}
.fullscreen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.floatLeft {
	float: left;
}
.btn.sandwichButton {
	border-radius: 0;
	width: 100%;
	appearance: auto;
	font-size: 1.2rem;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 32px;
	background-color: var(--dark1);
	box-shadow:
		inset 0px -3px 0px 0px rgba(0, 0, 0, 0.5),
		inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1);
}