/* this is for debugging layout issues - puts a red border around everything */
/* body * { border: 1px solid red; }		 */
DEBUG {
	border: 1px solid red;
}

body {
	/* Use GrooveWriter instead of body for easy embedding */
	margin: 0px;
	height: 100vh;
	background-color: #393939;
}

#GrooveWriter {
	/* tag surrounds entire app */
	/* Use the following CSS to move the app down so a nav bar can be inserted above */
	/* width and height can also be set here to fit within a page */
	/* carefully set the height since a vertical scroll bar will be added to the right hand
	 * content when the height of the content is more than the height specified here.
	 * Usually set the height to 100vh - (the height of the top nav)
	 */

	position: relative;
	background-color: #393939;
	/* background-color: #DDD; */
	width: 100%;
	min-width: 800px;
	/* to embed, add your header height here.  Replace 0px with your header height */
	/* height: 100%; */
	font: 100%/normal 'Lato', Calibri, sans-serif;

}

.fullWidthEle {
	max-width: 1478px; /* 1550 - 72 */
}

.warnings {
	font-family: monospace;
	display: none;
}

.Printable {
	display: block;
}

.nonPrintable {
	display: block;
}

#LeftHandNav {
	width: 70px;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	border-right: 2px solid #000;
	background: #393939;
	z-index: 999;
}

#TopNav {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 998;
	width: calc(100% - 72px);
	margin-left: 72px;
	height: 48px;  /* total 48 */
	border-bottom: 1px solid #000;
	background: var(--header-bg-color);
	background: linear-gradient(to right, var(--header-bg-start-color), var(--header-bg-end-color));
	display: block;
}

#midiPlayer {  /* more #midiPlayer css in groove_display.css */
	background: #000;
	width: calc(100% - 72px);
	height: 48px;
	position: fixed;
	top: 49px;
	left: 72px;
	z-index: 999;
	border-bottom: 1px solid #000;
}

#RightHandContent {
	position: relative;
	top: 98px;
	left: 72px;
	height: calc(100% - 98px);
	width: calc(100% - 72px);
	overflow-y: auto;
}

#logoTextUpperLeft {
	padding: 9px 10px 6px 5px;
	display: inline-block;
}

#logoTextUpperLeft img {
	height: 30px;
}

#upperLeft  {
	margin-top: 12px;
	display: inline-block;
	white-space: nowrap;
	vertical-align: top;
}

#upperRight {
	margin-top: 12px;
	display: inline-block;
	float: right;
	margin-right: 10px;
	white-space: nowrap;
	vertical-align: top;
}

#metronomeLabel {
	display: inline-block;
	height: 20px;
	font-weight: 500;
	margin: 0px 5px 0px 10px;
	text-align: center;
	color: #EEF;
}

.metronomeButton,
.rightButtons {
	padding: 2px;
	cursor: pointer;
	display: inline-block;
	color: #EEE;
	border: 0px solid #00B;
	text-align: center;
	border-radius: 20px;
	margin: 0px 1px;
	height: 20px;
	transition: all .1s ease-in-out;
}

.rightButtons {
	margin: 0px 6px;
}

.metronomeButton:hover,
.rightButtons:hover,
.metronomeButton.selected:hover,
.rightButtons.selected:hover,
.rightButtons.buttonSelected:hover {
	font-weight: 700;
	transform: scale(1.05);
}

.metronomeButton.options {
	width: 75px;
}

.metronomeButton.buttonSelected,
.metronomeButton.selected,
.rightButtons.buttonSelected {  /* is a button and is selected */
	color: #FFF;
	font-weight: 700;
}

#logoInSubdivision {
	background-color: #000;
}

#logoInSubdivision img {
	height: 40px;
}

.left-button {
	display: block;
	color: #999999;
	cursor: pointer;
}

.left-button-content {
	display: block;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	height: 48px;
	border-bottom: 1px solid #000;
	text-align: center;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	transition: all .1s ease-in-out;
}

#timeLabel {
	height: 48px;  /* Override from above */
}

#timeSigLabel {
	color: #62C04C;
	font-size: 20px;
	margin-bottom: -5px;
}

#timeSubLabel {
	color: #62C04C;
	font-size: 12px;
}

.left-button.disabled,
.left-button.disabled:hover {
	color: #000;
	background-color: #393939;
}

.left-button.buttonSelected,
.left-button.buttonSelected:hover {  /* is subdivision and is selected */
	background: #2484C0;
	color: #FFF;
	cursor: auto;
	transform: scale(1.1);
}

.myButton:hover,
.left-button:hover {
	border-top-color: #28597a;
	background: #555555;
	color: #ccc;
	transform: scale(1.05);
}

.myButton:active, .left-button:active  {
	border-top-color: #1b435e;
	background: #1b435e;
}

.buttonFraction {  /* The number above "triplet" in the .subdivision 1/4, 1/8, etc */
	display: block;
	font-size: 18px;
}

#advancedEditAnchor.buttonSelected {
	background: #009ffa;
	color: #FFF;
	font-size: 14px;
}

#undoButton {
	font-size: 14px;
}

#NotationLine {
	height: 35px;
	text-align: center;
	padding-top: 13px;
	border-bottom:1px solid #AAA;
	background-color: #DDD;
}

#NotationLabel {
	display: inline-block;
	margin:auto;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	padding-left: 62px;
}

#KeyButton {
	float: right;
	padding-right: 5px;
	font-size: 18px;
	text-align: right;
}

#hiddenDescription {
	display: none;
}

#musicalInput {
	width: 100%;
	background: #FFF;
	overflow-x: auto;
	overflow-y: hidden;
	border-bottom: 1px solid #AAA;
	text-align: center;
	white-space: nowrap;
}

@media only screen and (orientation: portrait) {
	#musicalInput {
		white-space: normal;
		/* wrap down on portait mode displays,
			*	don't wrap in landscape mode
			*/
	}
}

#musicalInput.expanded {
	max-width: 5000px !important;
}

#measureContainer {
	margin-left: auto;
	margin-right: auto;
}

.staff-container {
	margin-right: -3px;
	margin-bottom: 0px;
	display: inline-block;
	background: #FFFFFF;
	text-align: left;
	white-space: nowrap;
}

.notes-row-container {
	display: inline-block;
}

.heading1 {
	font-size: 30px;
	font-weight: bold;
}

.line-labels {
	/* display: inline-block; */
	display: table-cell;
	font-size: 20px;
	padding-right: 8px;
	text-align: right;
	vertical-align: top;
	width: 80px;
}

.stickings-label {
	display: none;
	height: 25px;
	background: #f7f1cf;
	color: #000;
	padding-top: 9px;
	padding-left: 1px;
	font-size: 12px;
	cursor: pointer;
	text-align: center;
}

.hh-label {
	display: block;
	white-space: nowrap;
	margin-top: 16px;
	margin-left: 8px;
	cursor: pointer;
	/* text-align: center; */
}

#tom1-label,
#tom2-label,
#tom4-label {
	display: block;
	white-space: nowrap;
	margin-top: 5px;
	margin-left: 8px;
	cursor: pointer;
	/* text-align: center; */
	visibility: hidden;
}

.snare-label {
	margin-top: 5px;
	margin-left: 8px;
	cursor: pointer;
	/* text-align: center; */
}

.kick-label {
	margin-top: 5px;
	margin-left: 8px;
	cursor: pointer;
	/* text-align: center; */
}

.stickings-label:hover {
	color: var(--highlight-color);
}

.hh-label:hover, .snare-label:hover, .kick-label:hover {
	color: var(--highlight-color);
}

.music-line-container {
	display: inline-block;
	z-index: 3;
	display: table-cell;
}

.notes-container {
	font-family:  Times New Roman;  /* parens around snare ghost note, R for Ride */
	position: relative;
	z-index: 4;
}

.stickings-row-container {
	margin-left: 16px !important;
}

.stickings-container {
	display: none;
	height: 32px;
	background: #f7f1cf;
	border: 1px solid transparent;
	margin-top: 0px;
	white-space: nowrap;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.background-highlight-container {
	position: absolute;
	height: 190px;
	white-space:nowrap;
	border: 1px solid transparent;
}

.hi-hat-container {
	height: 42px;
	white-space: nowrap;
	border: 1px solid transparent;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#tom1-container,
#tom2-container,
#tom4-container {
	height: 28px;
	white-space: nowrap;
	border: 1px solid transparent;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	visibility: hidden;
}

.snare-container {
	border: 1px solid transparent;
	height: 28px;
	white-space: nowrap;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.kick-container {
	border: 1px solid transparent;
	height: 56px;
	white-space: nowrap;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.staff-line-1 {
	position: absolute; top: 42px;
	width: 100%;
	height: 0px;
	border-top: 3px solid #cacaca;
}

.staff-line-2 {
	position: absolute; top: 72px;
	width: 100%;
	height: 0px;
	border-top: 3px solid #cacaca;
}

.staff-line-3 {
	position: absolute; top: 103px;
	width:100%;
	height:0px;
	border-top:3px solid #cacaca;
}

.staff-line-4 {
	position: absolute; top: 132px;
	width: 100%;
	height: 0px;
	border-top: 3px solid #cacaca;
}

.staff-line-5 {
	position: absolute; top: 163px;
	width: 100%;
	height: 0px;
	border-top: 3px solid #cacaca;
}

.staff-line-6{
	position: absolute; top: 194px;
	width: 100%;
	height: 0px;
	border-top: 3px solid #cacaca;
}

.sticking {
	display: inline-block;
	position: relative;
	border: 1px solid;
	border-color: transparent;
	width: 29px;
	height: 100%;
	margin-right: 2px;
	margin-left: 2px;
	margin-bottom: 0;
}

.bg-highlight {
	display: inline-block;
	width: 35px;
	height: 192px;
}

.hi-hat {
	display: inline-block;
	position: relative;
	border: 1px solid;
	border-color: transparent;
	width: 29px;
	height: 100%;
	margin-right: 2px;
	margin-left: 2px;
}

.tom {
	display: inline-block;
	position: relative;
	border: 1px solid;
	border-color: transparent;
	width: 29px;
	height: 100%;
	margin-right: 2px;
	margin-left: 2px;
}

.snare {
	display: inline-block;
	position: relative;
	border: 1px solid;
	border-color: transparent;
	width: 29px;
	height: 100%;
	margin-right: 2px;
	margin-left: 2px;
}

.kick {
	display: inline-block;
	position: relative;
	border: 1px solid;
	border-color: transparent;
	width: 29px;
	height: 100%;
	margin-right: 2px;
	margin-left: 2px;
}

.sticking_right {
	position: absolute; top: 0px; left: 6px;
	font-size: 24px;
	color: #CCCCCC;
	cursor: pointer;
}

.sticking_left {
	position: absolute; top: 0px; left: 6px;
	font-size: 24px;
	color: #CCCCCC;
	cursor: pointer;
}

.sticking_both {
	position: absolute; top: 5px; left: 0px;
	font-size: 18px;
	color: transparent;
	cursor: pointer;
}

.sticking_count {
	position: absolute; top: 0px; left: 6px;
	font-size: 24px;
	color: transparent;
	cursor: pointer;
}

.hh_crash {
	position: absolute; top: 19px; left: 5px;
	font-size: 20px;
	color: transparent;
	cursor: pointer;
}

.hh_ride {
	position: absolute; top: 18px; left: 6px;
	font-size: 20px;
	color: transparent;
	cursor: pointer;
}

.hh_ride_bell {
	position: absolute; top: 18px; left: 6px;
	font-size: 20px;
	color: transparent;
	cursor: pointer;
}

.hh_cow_bell {
	position: absolute; top: 18px; left: 6px;
	font-size: 20px;
	color: transparent;
	cursor: pointer;
}

.hh_stacker {
	position: absolute; top: 17px; left: 5px;
	font-size: 20px;
	color: transparent;
	cursor: pointer;
}

.hh_metronome_normal {
	position: absolute; top: 17px; left: 5px;
	font-size: 20px;
	color: transparent;
	cursor: pointer;
}

.hh_metronome_accent {
	position: absolute; top: 17px; left: 5px;
	font-size: 20px;
	color: transparent;
	cursor: pointer;
}

.hh_cross {
	position: absolute; top: 15px; left: 5px;
	font-size: 24px;
	color: #CCCCCC;
	cursor: pointer;
}

.hh_open {
	position: absolute; top: 3px; left: 9px;
	font-size: 13px;
	color: transparent;
}

.hh_close {
	position: absolute; top: 3px; left: 9px;
	font-size: 13px;
	color: transparent;
	float:left;
}

.hh_accent {
	position: absolute; top: 0px; left: 11px;
	font-size: 20px;
	color: transparent;
	float:left;
}

.unmuteHHButton,
.unmuteSnareButton,
.unmuteKickButton,
.unmuteTom1Button,
.unmuteTom2Button,
.unmuteTom4Button {
	/* display: inline-block; */
	display: none;
	position: relative;
	border: 1px solid;
	border-color: transparent;
	vertical-align: top;
	width: 29px;
	height: 100%;
	margin-right: 2px;
	margin-left: 2px;
	cursor: pointer;
}

.unmuteHHButton:hover,
.unmuteSnareButton:hover,
.unmuteKickButton:hover,
.unmuteTom1Button:hover,
.unmuteTom2Button:hover,
.unmuteTom4Button:hover {
	opacity: .6;
}

.unmuteHHStack {
	margin-top: 9px;
}

.unmuteStack {
	margin-top: -3px;
}

.tom_circle {
	position: absolute; top: 1px; left: 3px;
	width:90%;
	height:20px;
	width: 20px;
	background: #FFF;
	border: 2px solid;
	border-color: #999;
	border-radius: 30px;
	cursor: pointer;
}

.dot_in_snare_ghost_note {
	font-size: 14px;
	position: relative; top: -1px; left: 0px;
}

.snare_ghost {
	position: absolute; top: -4px; left: 1px;
	font-size: 26px;
	line-height: 30px;
	color: transparent;
	cursor: pointer;
}

.snare_circle {
	position: absolute;
	top: 0px;
	left: 2px;
	width: 90%;
	line-height: 20px;
	height: 22px;
	width: 22px;
	background: #FFF;
	border: 2px solid;
	border-color: #999;
	border-radius: 30px;
	cursor: pointer;
}

.snare_accent {
	position: absolute;
	top: 5px;
	left: 11px;
	line-height: 15px;
	font-size: 15px;
	color: transparent;
	cursor: pointer;
}

.snare_xstick {
	position: absolute;
	top: -5px;
	left: 3px;
	font-size: 30px;
	color: transparent;
	cursor: pointer;
}

.snare_buzz {
	position: absolute;
	top: 0px;
	left: 3px;
	font-size: 22px;
	color: transparent;
	cursor: pointer;
}

.snare_flam {
	position: absolute;
	top: -2px;
	left: -2px;
	font-size: 25px;
	color: transparent;
	cursor: pointer;
}

.snare_drag {
	position: absolute;
	top: -2px;
	left: -2px;
	font-size: 25px;
	color: transparent;
	cursor: pointer;
}

.kick_circle {
	position: absolute;
	top: 0px;
	left: 2px;
	height: 22px;
	width: 22px;
	background: #FFF;
	border: 2px solid #999;
	border-radius: 40px 40px 40px 40px;
	cursor: pointer;
}

.kick_splash {
	position: absolute;
	top: 24px;
	left: 3px;
	font-size: 30px;
	color: transparent;
	cursor: pointer;
}

.opening_note_space {
	display: inline-block;
	width: 1px;
	height: 1px;
	background: transparent;
}

.end_note_space {
	display: inline-block;
	width: 1px;
	height: 1px;
	background: transparent;
}

.space_between_note_groups {
	display: inline-block;
	width: 20px;
	height: 1px;
	background: transparent;
}

#addMeasureButton {
	vertical-align: top;
	display: inline-block;
	color: var(--highlight-color-on-white);
	cursor: pointer;
	font-size: 40px;
	padding-top: 2px;
	margin-top: 73px;
}

.closeMeasureButton {
	vertical-align: top;
	display: inline-block;
	margin-top: 3px;
	cursor: pointer;
	color: var(--highlight-color-on-white);
}

.closeMeasureButton:hover,
#addMeasureButton:hover {
	color: #000;
}

#permutationAnchor {
	color: #555;
}

#permutationAnchor.enabled {
	color: #EEE;
}

#PermutationOptions.displayed {
	padding: 3px 0px 0px 10px;
	background-color: #DDD;
}

#PermutationOptionsHeader {
	font-size: 18px;
	font-weight:bold;
}

.PermutationOptionWrapper {
	display: table;
	border-collapse: collapse;
}

.PermutationOptionGroup{
	display: table-row;
	border-bottom: 1px solid #999;
}

.PermutationOptionGroup:last-child{
	border-bottom: 0px solid #999;
}

.PermutationOption{
	height: 20px;
	display: table-cell;
	padding-right: 15px;
}

.PermutationSubOption{
	display: table-cell;
	padding-right: 15px;
}

#permutationType {
	margin-top: 10px;
}

#noteInstructions {
	font-size: 120%;
	font-weight: bold;
	margin-top: 14px;
	margin-left: 25px;
}

#showHideABC {
	display: none;
}

#ABC_Results {
	display: none;
}

#sheetMusicDiv {
	background: #FFF;
}

.svgTarget {
	background: #FFF;
}

/* override the normal 100% width that is in groove_display for editing */
#RightHandContent .svgTarget svg {
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
}

#sheetMusicTextFields {
	border-top: 1px solid #999;
	padding: 8px 0px;
	text-align: center;
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
	-webkit-justify-content: space-around;
	background-color: #DDD;
}

.sheetMusicTextField {
	margin: 0px 10px;
}

/* Context Menu */

#permutationContextMenu,
#helpContextMenu,
#metronomeOptionsContextMenu,
#metronomeOptionsOffsetClickContextMenu {
	position: fixed;
	top: 0px;
	right: 0px;
}

.metronomeOptionsContextMenuItem:before, .metronomeOptionsOffsetClickContextMenuItem:before {
	font-family: FontAwesome;
	content: "\00a0";  /* blank space */
	letter-spacing: 17px;
} /* unchecked icon */

.menuChecked:before {
	font-family: FontAwesome;
	content: "\f00c";
	letter-spacing: 5px;
} /* checked icon */

.noteContextMenu>ul.list  {
	display: none;
	position:fixed;
	left:30px;
	top:-30px;
	z-index:999;
	width:150px;
	margin:0; padding:0px;
	list-style:none;
	background: #eeeeee;
	color: #000;
	border: 1px solid #393939;
	list-style:none;
}

.noteContextMenu>ul.list li {
	padding:10px;
	border-bottom: solid 1px #393939;
	text-decoration: none;
}

.noteContextMenu > ul.list li:hover,
ul.list a:hover {
	background: #cccccc;
}

.noteContextMenu  >ul.list li:last-child {
	border:none;
}

#grooveListWrapper {
	display: none;
	position: fixed;
	z-index: 999;
	top: 0px;
	right: 0px;
	width: 300px;
	height: 300px;
	overflow: auto;
	background: #eeeeee;
	border: 1px solid #393939;
}

.grooveListUL {
	margin: 0;
	padding: 0px;
	list-style: none;
	background: #eeeeee;
	color: #000;
}

.grooveListHeaderLI {
	padding:15px;
	background: var(--highlight-color);
	font-size: 18px;
	font-weight: bold;
}

.grooveListLI {
	padding: 10px;
	padding-left: 15px;
	border-bottom: solid 1px #393939;
}

.grooveListLI:hover {
	background: #cccccc;
}

hr {
	width: 795px;
	margin-left: 0px;
}

#ABCSource {
	font-family: monospace;
	font-size: 14px;
}

#fullURLPopup,
#metronomeAutoSpeedupConfiguration,
#timeSigPopup {
	display: none;
	position:absolute; left:300px; top:250px; z-index:999;
	background-color: #FFF;
	width: 400px;
	padding: 10px;
	border: solid 2px #999;
	border-radius: 5px;
}

#timeSigPopup {
	font-size: 24px;
}

#timeSigPopupBeta {
	text-align: center;
	margin-top: 8px;
	margin-bottom: 30px;
	color: #CC0000;
}

#timeSigPopupTitle {
	text-align: center;
	margin-top: 8px;
	margin-bottom: 30px;
}
#timeSigPopupOptions {
	text-align: center;
}

#timeSigPopupTimeSigTop,
#timeSigPopupTimeSigBottom {
	font-size: 24px;
	font-weight: 500;
	color: #666;
	background-color: #EEE;
	vertical-align: top;
	padding-left: 20px;
	width: 80px;
}

#timeSigPopupSlash {
	font-size: 24px;
	margin: 0px 10px;
}

#timeSigPopupCancel {
	font-size: 16px;
	font-weight: 500;
	background: #FFF;
	color: #CCC;
	border: 0px;
	border-radius: 5px;
	padding: 5px 10px;
}

#timeSigPopupOK {
	font-size: 16px;
	font-weight: 500;
	background: var(--highlight-color);
	color: #FFF;
	border: 0px;
	border-radius: 5px;
	padding: 5px 10px;
}

#timeSigPopupButtons {
	margin-top: 30px;
	text-align: center;
}

#fullURLPopupCloseButton {
	font-size: 100%;
	float: right;
	cursor: pointer;
}

#fullURLPopupCloseButton:hover {
	color: #444;
}

#fullURLPopupTitle {
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

#fullURLPopupSubTitle {
	color: var(--highlight-color);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
}

#fullURLPopupSubSubTitle {
	font-size: 12px;
	text-align: center;
}

#fullURLPopupCheckboxes {
	display: -webkit-flex;
	display: flex;
	width: 300px;
	margin: 10px auto;
	justify-content: space-around;
	-webkit-justify-content: space-around;
}
.fullURLPopupCheckboxLabel {
	font-size: 12px;
}
.fullURLPopupCheckboxLabel input[type="checkbox"] {
	vertical-align: middle;
}

#fullURLPopupTextFieldContainer {
	margin: 0px auto;
	width: 366px;
}

#fullURLPopupTextField {
	width: 350px;
	padding: 8px;
	background: #ffe9b7;
	border: 0px;
	border-radius: 5px;
	text-align: center;
}

#fullURLPopupCopyButton {
	font-size: 16px;
	font-family: Lato,sans-serif;
	font-weight: 700;
	color: #000;
	border: 0px;
	border-radius: 5px;
	padding: 5px 10px;
}

#shareButtonContainer {
	text-align: center;
}

.sharer-0::before {
	top: 7px;
}

.sharer-0 label {
	background: var(--highlight-color) !important;
	color: #FFF !important;
}

.metronomeAutoSpeedupInputRow {
	vertical-align: text-bottom;
}

#metronomeAutoSpeedupConfigurationSliders {
	width: 370px;
	margin: 0px auto;
}

#metronomeAutoSpeedupTempoIncreaseAmount,
#metronomeAutoSpeedupTempoIncreaseInterval {
	background: var(--highlight-color);
	width: 365px;
}

#metronomeAutoSpeedupOutputText {
	font-size: 25px;
	text-align: center;
}

#metronomeAutoSpeedupTempoIncreaseAmountOutput,
#metronomeAutoSpeedupTempoIncreaseIntervalOutput {
	color: var(--highlight-color);
	font-weight: 700;
}

#metronomeAutoSpeedupConfigurationAmountLable,
#metronomeAutoSpeedupConfigurationIntervalLable {
	font-size: 12px;
}

#metronomeAutoSpeedupConfigurationKeepIncreasing {
	font-size: 12px;
	color: var(--highlight-color);
	text-align: center;
	vertical-align: middle;
	margin-bottom: 10px;
}

#metronomeAutoSpeedupCloseButtonDiv {
	text-align: center;
	margin-top: 15px;
}

#metronomeAutoSpeedupConfigurationCloseButton {
	font-size: 16px;
	font-weight: 500;
	background: var(--highlight-color);
	color: #FFF;
	border: 0px;
	border-radius: 5px;
	padding: 5px 10px;
}

#stickingsButton:before  {
	font-family: FontAwesome;
	font-size: 2em;
	letter-spacing: -3px;
	content: "\f065";
	line-height: 32px;
}

#stickingsButton.ClickToHide:before {
	font-family: FontAwesome;
	font-size: 2em;
	letter-spacing: -3px;
	content: "\f066";
	line-height: 32px;
}

button {
	cursor: pointer;
}

input[type=checkbox]:checked  + label {
	color: #000;
	cursor: pointer;
}
input[type=checkbox]:not(:checked) + label {
	color: #888;
	cursor: pointer;
}
#totalPlayTime {
	z-index: 999;
	position: fixed;
	bottom: 3px;
	right: 3px;
	margin-right: 20px;
	color: var(--highlight-color);
}
.totalTimeNum {
	color: #EEE;
}

.myCheckbox {
	display:none;
} /* to hide the checkbox itself */

.myCheckbox + label:before {
	font-family: FontAwesome;
	display: inline-block;
	/* content: "\f096";  /* uncheck box */
	content: "\00a0";  /* blank space */
	letter-spacing: 17px;
} /* unchecked icon */

.myCheckbox:checked + label:before {
	content: "\f00c";
	letter-spacing: 5px;
} /* checked icon */

.hiddenCheckbox {
	/* checkbox for the key (legend) */
	visibility: hidden;
}

#LegendLabel {
	border: 1px solid #CCC;
	padding: 3px 7px 5px 7px;
	border-radius: 7px;
	background: #CCC;
	margin-right: 8px;
}

#GrooveDB_source {
	width: calc(100% - 6px);
	height: 280px;
}

#bottomButtonRow {
	padding: 20px 0px;
	background: #393939;
	text-align: center;
	color: #888888;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}

.pageBottomButton {
	display: inline-block;
	margin: 0px 20px;
}

.pageBottomButton:hover {
	cursor: pointer;
	color: #FFF;
}

.bottomButtonIcon {
	display:block;
}

.bottomButtonLabel {
	margin-top: 2px;
	display: block;
}

.edit-block {
	display: none;
}

/*  3 circles make up the tom icon.  Position them */
#icon-tom1 {
	font-size: 16px;
	margin-top: 16px;
}

#icon-tom2 {
	font-size: 14px;
	margin-left: -5px;
	vertical-align: top;
}

#icon-tom3 {
	font-size: 20px;
	margin-top: 11px;
}

@media print {
	/* keep at bottom so it overrides the styles above */
	/* there is another definition in groove_display.css that adds more rules */
	#GrooveWriter {
		min-width: 10px;
	}

	#RightHandContent {
		margin-left: 0px;
		padding-top: 0px;
		top: 0px;
		left: 0px;
		overflow-y: visible;
		width: 100% !important;
	}

	.svgTarget svg {
		margin: 0px 0px !important;
		width: 100% !important;
	}
}


/* Link to Github repo */
.credits {
	padding: .5rem 1rem;
}
.credits a {
	color: #e8e8e8;
	text-decoration: none;
}

.credits a:hover {
	text-decoration: underline;
}