/* 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;
		/position: absolute;
		#top: 111px;
		top: 0px;
		left: 0px;
		border-right: 2px solid #000;
		background: #393939;
		z-index: 999;
	}
	#TopNav {
		position: fixed;
		/position: relative;
		#top: 111px;
		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: 160px;
		top: 49px;
		/position: relative;
		left: 72px;
		z-index: 999;
		border-bottom: 1px solid #000;
	}
	#RightHandContent {
		position: relative;
		#top: 209px;
		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;
	}

	#divisionButtonContainer {

	}
	#metronomeContainer {
	}
	#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;
		/background: #0071ad;
		color: #EEE;
		border: 0px solid #00B;
		text-align: center;
		border-radius: 20px;
		/width: 50px;
		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 {
		/color: #3b5166;
		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;
		/background: #68c2ff;
	}

	#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;
		vertical-align: middle;
		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;
	}
	.buttonText {
	}
	#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-left: 2px;
		/margin-top: 2px;
		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;
		vertical-align: top;
		width: 80px;
		font-size: 20px;
		display: table-cell;
	}
	.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 {
		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;
	}
	#tom4-label {
		display: block;
		white-space:nowrap;
		margin-top: 5px;
		margin-left: 8px;
		cursor: pointer;
		text-align: center;
		visibility: hidden;
	}
	.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;
		/top: 30px;
		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-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;
	}
	.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;
	}
	#tom1-container {
		height: 28px;
		white-space:nowrap;
		border: 1px solid transparent;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-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;
	}
	#tom4-container {
		height: 28px;
		white-space:nowrap;
		border: 1px solid transparent;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		visibility: hidden;
	}
	.kick-container {
		border: 1px solid transparent;
		height: 56px;
		white-space:nowrap;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-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;
	}
	.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;
	}
	.note_part {  /* all the following note segments also share class .note_part */
	}
	.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, .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, .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;
		//margin-bottom: -20px;
		background-color: #DDD;
	}
	#PermutationOptionsHeader {
		/margin-left: 22px;
		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;
		/border-top: 1px solid #999;
		/border-bottom: 1px solid #999;
	}
	.PermutationSubOption{
		display: table-cell;
		padding-right: 15px;
		/border-top: 1px solid #999;
		/border-bottom: 1px solid #999;
	}
	#permutationType {
		margin-top: 10px;
	}
	#noteInstructions {
		font-size: 120%;
		font-weight: bold;
		margin-top: 14px;
		margin-left: 25px;
	}
	#exportMidi {
	}
	#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%;
		/* height: auto; */
	}

	#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;
	}
	.sheetMusicInputField {

	}
	/* Context Menu */
	.noteContextMenu {

	}
	#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 {
		/visibility: hidden;
		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;
	}
	#shareButton {
	}
	.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;
	}
	#showHideSecondMeasureButton {
	}
	#stickingsButton {
	}
	#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;
	}
	#printButton {
	}
	#downloadButton {
	}
	#shareSaveButton {
	}
	.centeringSpace {
		/margin-right: 5%;
		/margin-left: 5%;
	}
	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;
		justify-content: space-around;
		-webkit-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;
		}
	}