/* this is for debugging layout issues - puts a red border around everything */
	/* body * { border: 1px solid red; }		 */
	body {
		/* Use GrooveWriter instead of body for easy embedding */
		margin: 0px;
		height: 100vh;
		background-color: var(--side-bg-color, #1E2429);
	}
	#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: var(--side-bg-color, #1E2429);
		width: 100%;
		min-width: 800px;
		/* to embed, add your header height here.  Replace 0px with your header height */
		font: 100%/normal 'Lato', Calibri, sans-serif;

	}
	.fullWidthEle {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}
	.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 var(--chrome-border, #0F1316);
		background: var(--side-bg-color, #1E2429);
		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 var(--chrome-border, #0F1316);
		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: var(--player-bg-color, #151A1E);
		width: calc(100% - 72px);
		height: auto;
		min-height: 48px;
		position: fixed;
		top: 49px;
		left: 72px;
		z-index: 999;
		border-bottom: 1px solid var(--chrome-border, #0F1316);
		overflow: visible;
	}
	#RightHandContent {
		position: relative;
		top: 98px;
		left: 72px;
		height: calc(100% - 98px);
		width: calc(100% - 72px);
		overflow-y: auto;
		background: var(--workspace-bg, #F4F6F7);
	}
	#logoTextUpperLeft {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		padding: 0 10px 0 8px;
		box-sizing: border-box;
		vertical-align: top;
	}
	#logoTextUpperLeft img {
		display: block;
		height: 32px;
		width: auto;
		max-width: 140px;
		max-height: 36px;
		object-fit: contain;
	}
	.topNavToggleButton {
		display: none;
	}
	.bottomNavToggleButton {
		display: block;
		width: min(360px, calc(100% - 40px));
		min-height: 28px;
		margin: 12px auto 0;
		padding: 5px 10px;
		border: 1px solid rgba(255, 255, 255, 0.26);
		border-radius: 999px;
		background: rgba(0, 0, 0, 0.18);
		color: #fff;
		font: 700 12px/16px 'Lato', Calibri, sans-serif;
		text-align: center;
		cursor: pointer;
		box-sizing: border-box;
	}
	#bottomNav {
		background: var(--bottom-bg-color, #1E2429);
		text-align: center;
		color: var(--text-on-dark-muted, #9AA7B0);
		padding: 0 0 8px;
		box-sizing: border-box;
	}
	#GrooveWriter.bottomNavCollapsed #bottomButtonRow {
		display: none;
	}
	#GrooveWriter.bottomNavCollapsed #bottomNav {
		padding: 10px;
	}
	#GrooveWriter.bottomNavCollapsed .bottomNavToggleButton {
		margin: 0 auto;
	}
	#upperLeft  {
		margin-top: 12px;
		display: inline-block;
		white-space: nowrap;
		vertical-align: top;
	}
	#aiGroovePanel {
		box-sizing: border-box;
		padding: 18px 20px 16px;
		background: linear-gradient(135deg, #E8F5F2, #D2EBE5);
		border-bottom: 1px solid #9BC9C1;
	}
	#aiGroovePanelHeader {
		display: inline-block;
		width: 100%;
		margin-bottom: 10px;
	}
	#aiGrooveSelectionBar {
		margin-bottom: 12px;
		padding: 10px 12px;
		border: 1px solid rgba(61, 155, 143, 0.22);
		border-radius: 12px;
		background: rgba(244, 251, 249, 0.9);
	}
	.aiGrooveSectionLabel {
		margin-bottom: 8px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	#aiGrooveSelectionChips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.aiGrooveSelectionChip {
		display: inline-flex;
		align-items: center;
		padding: 5px 10px;
		border-radius: 999px;
		background: rgba(210, 235, 229, 0.95);
		border: 1px solid rgba(61, 155, 143, 0.24);
		color: #1E5F57;
		font-size: 12px;
		font-weight: 700;
	}
	#aiGrooveOptions {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 12px;
		margin-bottom: 10px;
	}
	.aiGrooveOption {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-width: 0;
		padding: 10px 12px;
		border: 1px solid rgba(61, 155, 143, 0.18);
		border-radius: 12px;
		background: rgba(236, 247, 244, 0.85);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	.aiGrooveOptionHidden {
		display: none;
	}
	.aiGrooveOptionHint {
		font-size: 11px;
		font-weight: 600;
		line-height: 1.35;
		letter-spacing: normal;
		text-transform: none;
		color: #3D7A72;
	}
	.aiGrooveOption select {
		height: 40px;
		padding: 0 12px;
		font-size: 14px;
		font-weight: 600;
		border: 1px solid #9BC9C1;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.95);
		color: #1E5F57;
	}
	.aiGrooveOption select:focus {
		outline: none;
		border-color: #3D9B8F;
		box-shadow: 0 0 0 2px rgba(61, 155, 143, 0.18);
	}
	#aiGroovePanelTitle {
		font-size: 20px;
		font-weight: 700;
		color: #1E5F57;
	}
	#aiGroovePanelHint {
		margin-top: 4px;
		font-size: 13px;
		color: #2F7F76;
	}
	#aiGrooveControls {
		display: flex;
		gap: 10px;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	#aiGroovePrompt {
		flex: 1 1 480px;
		min-width: 260px;
		height: 42px;
		padding: 0 14px;
		font-size: 14px;
		border: 1px solid #9BC9C1;
		border-radius: 10px;
		box-sizing: border-box;
		background: rgba(255, 255, 255, 0.95);
	}
	#aiGroovePromptActions {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		flex: 1 1 100%;
	}
	.aiGrooveActionChip {
		height: 32px;
		padding: 0 12px;
		border: 1px solid rgba(117, 142, 0, 0.28);
		border-radius: 999px;
		background: rgba(220, 239, 234, 0.92);
		color: #2F7F76;
		font-size: 12px;
		font-weight: 800;
		cursor: pointer;
		transition: transform .12s ease-in-out, background-color .12s ease-in-out;
	}
	.aiGrooveActionChip:hover {
		transform: translateY(-1px);
		background: #DCEFEA;
	}
	.aiGrooveActionChip:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	#aiGrooveQuickPresets {
		display: grid;
		gap: 10px;
		flex: 1 1 100%;
	}
	.aiGroovePresetGroup {
		padding: 10px 12px;
		border: 1px solid rgba(61, 155, 143, 0.18);
		border-radius: 12px;
		background: rgba(236, 247, 244, 0.85);
	}
	.aiGroovePresetGroupTitle {
		margin-bottom: 8px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	.aiGroovePresetGroupRow {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	.aiGroovePresetButton {
		height: 34px;
		padding: 0 12px;
		border: 1px solid #9BC9C1;
		border-radius: 999px;
		background: rgba(232, 245, 242, 0.95);
		color: #2F7F76;
		font-size: 12px;
		font-weight: 700;
		cursor: pointer;
		transition: transform .12s ease-in-out, background-color .12s ease-in-out;
	}
	.aiGroovePresetButton:hover {
		transform: translateY(-1px);
		background: #D7EBE5;
	}
	.aiGroovePresetButton:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	#aiGroovePrompt:focus {
		outline: none;
		border-color: #3D9B8F;
		box-shadow: 0 0 0 2px rgba(61, 155, 143, 0.18);
	}
	#aiGrooveGenerateButton {
		height: 42px;
		padding: 0 18px;
		border: 0;
		border-radius: 10px;
		background: linear-gradient(135deg, #2F7F76, #3D9B8F);
		color: #fff;
		font-weight: 700;
		font-size: 14px;
		cursor: pointer;
		transition: transform .12s ease-in-out, opacity .12s ease-in-out;
	}
	#aiGrooveResetButton {
		height: 42px;
		padding: 0 18px;
		border: 1px solid #9BC9C1;
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.95);
		color: #2F7F76;
		font-weight: 700;
		font-size: 14px;
		cursor: pointer;
		transition: transform .12s ease-in-out, opacity .12s ease-in-out;
	}
	#aiGrooveGenerateButton:hover {
		transform: translateY(-1px);
	}
	#aiGrooveResetButton:hover {
		transform: translateY(-1px);
	}
	#aiGrooveGenerateButton:disabled {
		opacity: 0.65;
		cursor: wait;
		transform: none;
	}
	#aiGrooveResetButton:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	#aiGrooveHistoryBar {
		display: block;
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px solid rgba(61, 155, 143, 0.22);
	}
	#aiGrooveHistoryMeta {
		font-size: 12px;
		font-weight: 700;
		color: #2F7F76;
		margin-bottom: 10px;
		padding: 10px 12px;
		border: 1px solid rgba(61, 155, 143, 0.18);
		border-radius: 12px;
		background: rgba(244, 246, 247, 0.92);
	}
	#aiGrooveHistoryList {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 8px;
		margin-bottom: 10px;
	}
	.aiGrooveHistoryItem {
		padding: 10px 12px;
		border: 1px solid rgba(61, 155, 143, 0.28);
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.92);
		color: #243038;
		cursor: pointer;
		transition: transform .12s ease-in-out, border-color .12s ease-in-out, box-shadow .12s ease-in-out;
	}
	.aiGrooveHistoryItem:hover {
		transform: translateY(-1px);
		border-color: #3D9B8F;
	}
	.aiGrooveHistoryItem.active {
		border-color: #2F7F76;
		box-shadow: 0 0 0 2px rgba(61, 155, 143, 0.18);
		background: rgba(61, 155, 143, 0.08);
	}
	.aiGrooveHistoryItem.active .aiGrooveHistoryTitle {
		color: #2F7F76;
	}
	.aiGrooveHistoryItem.accepted {
		border-color: #6c8a00;
	}
	.aiGrooveHistoryTitle {
		font-size: 12px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		margin-bottom: 6px;
	}
	.aiGrooveHistorySummary,
	.aiGrooveHistoryTemplate {
		font-size: 12px;
		line-height: 1.4;
	}
	.aiGrooveHistoryTemplate {
		margin-top: 4px;
		color: #5a6a73;
	}
	.aiGrooveHistoryTomHints {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 8px;
	}
	.aiGrooveTomHintBadge {
		display: inline-flex;
		align-items: center;
		padding: 3px 8px;
		border-radius: 999px;
		background: rgba(122, 147, 0, 0.14);
		border: 1px solid rgba(122, 147, 0, 0.28);
		color: #4c6500;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}
	#aiGrooveHistoryControls {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	#aiGrooveAcceptButton,
	#aiGrooveRegenerateButton {
		height: 34px;
		padding: 0 14px;
		border-radius: 10px;
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
		transition: transform .12s ease-in-out, opacity .12s ease-in-out;
	}
	#aiGrooveAcceptButton {
		border: 0;
		background: linear-gradient(135deg, #7a9300, #96b300);
		color: #fff;
	}
	#aiGrooveRegenerateButton {
		border: 1px solid #c98f35;
		background: rgba(255, 251, 243, 0.96);
		color: #2F7F76;
	}
	#aiGrooveAcceptButton:hover {
		transform: translateY(-1px);
	}
	#aiGrooveRegenerateButton:hover {
		transform: translateY(-1px);
	}
	#aiGrooveAcceptButton:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	#aiGrooveRegenerateButton:disabled {
		opacity: 0.55;
		cursor: not-allowed;
		transform: none;
	}
	#aiGrooveStatusCard {
		margin-top: 10px;
		padding: 10px 12px;
		border-radius: 12px;
		background: rgba(255, 251, 243, 0.9);
		border: 1px solid rgba(61, 155, 143, 0.18);
	}
	#aiGrooveStatusLabel {
		margin-bottom: 6px;
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #2F7F76;
	}
	#aiGrooveStatus {
		min-height: 18px;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.5;
		color: #1E5F57;
	}
	#aiGrooveStatusCard.error #aiGrooveStatus {
		color: #9e1d00;
	}
	#aiGrooveStatusCard.success #aiGrooveStatus {
		color: #216b10;
	}
	#aiGrooveDebugPanel {
		display: none;
		margin-top: 10px;
		padding: 10px 12px;
		border: 1px solid rgba(120, 78, 18, 0.25);
		border-radius: 10px;
		background: rgba(255, 251, 243, 0.82);
		color: #1E5F57;
	}
	#aiGrooveDebugPanel.aiGrooveDebugVisible {
		display: block;
	}
	#aiGrooveDebugPanel summary {
		cursor: pointer;
		font-size: 12px;
		font-weight: 700;
		color: #2F7F76;
	}
	#aiGrooveDebugContent {
		margin: 8px 0 0;
		max-height: 240px;
		overflow: auto;
		white-space: pre-wrap;
		word-break: break-word;
		font-size: 12px;
		line-height: 1.45;
		color: #5d3a0b;
	}
	@media only screen and (max-width: 900px) {
		#aiGroovePanel {
			padding: 14px;
		}
		#aiGrooveControls {
			display: block;
		}
		#aiGrooveSelectionBar {
			padding: 10px;
		}
		#aiGrooveOptions {
			display: block;
		}
		.aiGrooveOption {
			width: 100%;
			margin-bottom: 10px;
		}
		.aiGrooveOption select {
			width: 100%;
		}
		#aiGroovePrompt {
			width: 100%;
			margin-bottom: 10px;
		}
		#aiGrooveQuickPresets {
			margin-bottom: 10px;
		}
		.aiGroovePresetGroup {
			padding: 10px;
		}
		#aiGrooveHistoryBar {
			display: block;
		}
		#aiGrooveHistoryMeta {
			margin-bottom: 10px;
		}
		#aiGrooveHistoryList {
			grid-template-columns: 1fr;
		}
		#aiGrooveHistoryControls {
			display: grid;
			grid-template-columns: 1fr;
		}
		#aiGrooveGenerateButton {
			width: 100%;
		}
		#aiGrooveResetButton {
			width: 100%;
			margin-top: 10px;
		}
		#aiGrooveAcceptButton {
			width: 100%;
		}
		#aiGrooveRegenerateButton {
			width: 100%;
			margin-top: 10px;
		}
		#aiGrooveDebugContent {
			max-height: 180px;
		}
	}
	#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: var(--text-on-dark, #E8EEF1);
	}
	.metronomeButton, .rightButtons {
		padding: 2px;
		cursor: pointer;
		display: inline-block;
		color: var(--text-on-dark, #E8EEF1);
		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: var(--chrome-bg-deep, #151A1E);
		width: 100%;
		height: 48px;
		padding: 4px;
		box-sizing: border-box;
		overflow: hidden;
	}
	#logoInSubdivision img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		object-position: center;
	}
	.left-button {
		display: block;
		color: var(--text-on-dark-muted, #9AA7B0);
		cursor: pointer;
	}
	.left-button-content {
		display: block;
		cursor: pointer;
		font-size: 12px;
		font-weight: bold;
		height: 48px;
		border-bottom: 1px solid var(--chrome-border, #0F1316);
		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: var(--success-color, #3FAE78);
		font-size: 20px;
		margin-bottom: -5px;
	}
	#timeSubLabel {
		color: var(--success-color, #3FAE78);
		font-size: 12px;
	}
	.left-button.disabled, .left-button.disabled:hover {
		color: var(--chrome-border, #0F1316);
		background-color: var(--side-bg-color, #1E2429);
	}
	.left-button.buttonSelected, .left-button.buttonSelected:hover {  /* is subdivision and is selected */
		background: var(--highlight-color, #3D9B8F);
		color: #FFF;
		cursor: auto;
		transform: scale(1.1);
	}
	.myButton:hover, .left-button:hover {
	   border-top-color: var(--highlight-color-on-white, #2F7F76);
	   background: #2A333A;
	   color: var(--text-on-dark, #E8EEF1);
	   transform: scale(1.05);
	 }
	.myButton:active, .left-button:active  {
	   border-top-color: var(--highlight-color-on-white, #2F7F76);
	   background: #172026;
    }
	.buttonFraction {  /* The number above "triplet" in the .subdivision 1/4, 1/8, etc */
		display: block;
		font-size: 18px;
	}
	#advancedEditAnchor.buttonSelected {
		background: var(--highlight-color-hover, #4FB3A5);
		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;
	}
	.seoIntro {
		box-sizing: border-box;
		clear: both;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 22px 20px 28px;
		border-top: 1px solid var(--chrome-border, #0F1316);
		background: var(--bottom-bg-color, #1E2429);
		color: var(--text-on-dark-muted, #9AA7B0);
		font-family: Lato, "Segoe UI", sans-serif;
		font-size: 0.82rem;
		line-height: 1.55;
		text-align: center;
	}
	.seoIntro h1 {
		margin: 0 0 8px;
		font-size: 0.78rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--text-on-dark, #E8EEF1);
		line-height: 1.35;
	}
	.seoIntro > p {
		margin: 0 auto 10px;
		max-width: 42em;
		color: var(--text-on-dark-muted, #9AA7B0);
	}
	.seoIntroLinks {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 14px;
		margin: 14px 0 0;
	}
	.seoIntroLinks a,
	.seoIntro a {
		color: var(--highlight-color-hover, #4FB3A5);
		text-decoration: none;
		border-bottom: 1px solid transparent;
		transition: color 0.15s ease, border-color 0.15s ease;
	}
	.seoIntroLinks a:hover,
	.seoIntro a:hover {
		color: var(--text-on-dark, #E8EEF1);
		border-bottom-color: rgba(79, 179, 165, 0.55);
	}
	.seoIntroMore {
		margin: 14px auto 0;
		max-width: 42em;
		text-align: left;
	}
	.seoIntroMore summary {
		cursor: pointer;
		list-style: none;
		display: inline-block;
		color: var(--text-on-dark-muted, #9AA7B0);
		font-size: 0.78rem;
		user-select: none;
	}
	.seoIntroMore summary::-webkit-details-marker {
		display: none;
	}
	.seoIntroMore summary::after {
		content: " ▾";
		opacity: 0.6;
	}
	.seoIntroMore[open] summary::after {
		content: " ▴";
	}
	.seoIntroMore summary:hover {
		color: var(--text-on-dark, #E8EEF1);
	}
	.seoIntroMore p {
		margin: 10px 0 0;
		color: var(--text-on-dark-muted, #9AA7B0);
		font-size: 0.8rem;
	}
	#musicalInput {
		width: 100%;
		background: var(--surface-white, #FFFFFF);
		overflow-x: hidden;
		overflow-y: visible;
		border-bottom: 1px solid #C5CCD1;
		text-align: center;
		white-space: normal;
		box-sizing: border-box;
	}
	#musicalInput.expanded {
		max-width: 100% !important;
	}
	#measureContainer {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 14px 0;
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 4px 0 12px;
		white-space: normal;
		box-sizing: border-box;
	}
	#measureContainer.multi-row-layout {
		row-gap: 16px;
	}
	.staff-container {
		--line-label-width: 80px;
		margin-right: 0;
		margin-bottom: 2px;
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 0 1 auto;
		max-width: 100%;
		background: #FFFFFF;
		text-align: left;
		white-space: nowrap;
	}
	.staff-fit-wrap {
		display: inline-block;
		vertical-align: top;
		flex: 0 0 auto;
		max-width: 100%;
		box-sizing: border-box;
	}
	#measureContainer.multi-row-layout .staff-container {
		margin-bottom: 6px;
	}
	#measureContainer.wide-single-measure {
		justify-content: flex-start;
	}
	#measureContainer.wide-single-measure .staff-container {
		transform: scale(0.9);
		transform-origin: top center;
		margin-bottom: -22px;
	}
	.notes-row-container {
		display: inline-block;
		max-width: 100%;
	}
	.heading1 {
		font-size: 30px;
		font-weight: bold;
	}
	.line-labels {
		display: inline-block;
		vertical-align: top;
		width: var(--line-label-width);
		font-size: 20px;
		display: table-cell;
	}
	.stickings-row-container {
		display: block;
		margin-left: var(--line-label-width);
	}
	.stickings-row-container .line-labels {
		display: none;
	}
	.stickings-row-container .music-line-container {
		display: block;
	}
	.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;
	}
	.tom-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-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;
	}
	.toms-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;
	}
	.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 var(--staff-line-color, #C5CCD1);
	}
	.staff-line-2{
		position: absolute; top: 72px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.staff-line-3{
		position: absolute; top: 103px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.staff-line-4{
		position: absolute; top: 132px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.staff-line-5{
		position: absolute; top: 163px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.staff-line-6{
		position: absolute; top: 192px;
		width:100%;
		height:0px;
		border-top:3px solid var(--staff-line-color, #C5CCD1);
	}
	.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;
		/* Must match .hi-hat/.snare outer box (width + margins + transparent border)
		 * or the playhead drifts left and the last cell never lines up on mobile. */
		width: 29px;
		height: 192px;
		margin-left: 2px;
		margin-right: 2px;
		border: 1px solid transparent;
		box-sizing: content-box;
	}
	.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, .unmuteTom2Button, .unmuteTom3Button, .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, .unmuteTom3Button: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: var(--text-on-dark-muted, #9AA7B0);
	}
	#permutationAnchor.enabled {
		color: var(--text-on-dark, #E8EEF1);
	}
	#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;
	}
	#exportMidi {
	}
	#showHideABC {
		display: none;
	}
	#ABC_Results {
		display: none;
	}
	#sheetMusicDiv {
		background: var(--surface-white, #FFFFFF);
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}
	.svgTarget {
		background: var(--surface-white, #FFFFFF);
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
		box-sizing: border-box;
	}

	/* override the normal 100% width that is in groove_display for editing */
	#RightHandContent .svgTarget svg {
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		width: 100%;
		height: auto;
		/* 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, .metronomeVisualCountContextMenuItem: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: var(--menu-bg, #EEF2F4);
		color: #000;
		border: 1px solid var(--menu-border, #1E2429);
		list-style:none;
	}
	.noteContextMenu>ul.list li {
		padding:10px;
		border-bottom: solid 1px var(--menu-border, #1E2429);
		text-decoration: none;
	}
	.noteContextMenu>ul.list li:hover, ul.list a:hover {
		background: var(--menu-hover, #D9E2E6);
	}
	.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: var(--menu-bg, #EEF2F4);
		border: 1px solid var(--menu-border, #1E2429);
	}
	.grooveListUL {
		margin:0; padding:0px; list-style:none;
		background: var(--menu-bg, #EEF2F4);
		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 var(--menu-border, #1E2429);
	}
	.grooveListLI:hover {
		background: var(--menu-hover, #D9E2E6);
	}
	#grooveLibraryPopup {
		display: none;
		position: fixed;
		right: 18px;
		top: 64px;
		z-index: 1002;
		width: 420px;
		max-width: calc(100% - 36px);
		max-height: calc(100vh - 96px);
		overflow: auto;
		padding: 16px;
		box-sizing: border-box;
		background: #f7f7f7;
		color: #222;
		border: 2px solid #222;
		border-radius: 14px;
		box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
	}
	#grooveLibraryCloseButton {
		float: right;
		cursor: pointer;
		color: #555;
	}
	#grooveLibraryCloseButton:hover {
		color: #000;
	}
	#grooveLibraryTitle {
		font-size: 22px;
		font-weight: 800;
		line-height: 1.1;
	}
	#grooveLibrarySubTitle {
		margin-top: 4px;
		color: #666;
		font-size: 12px;
		font-weight: 700;
	}
	#grooveLibraryActions {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 8px;
		margin-top: 14px;
	}
	#grooveLibraryNameInput {
		min-width: 0;
		height: 38px;
		padding: 0 10px;
		border: 1px solid #bdbdbd;
		border-radius: 9px;
		font: 14px Lato, Calibri, sans-serif;
		box-sizing: border-box;
	}
	#grooveLibrarySaveButton {
		height: 38px;
		padding: 0 12px;
		border: 0;
		border-radius: 9px;
		background: var(--highlight-color);
		color: #fff;
		font-weight: 800;
		font-family: Lato, Calibri, sans-serif;
	}
	#grooveLibraryStatus {
		min-height: 18px;
		margin-top: 10px;
		font-size: 12px;
		font-weight: 700;
		color: #666;
	}
	#grooveLibraryStatus.success {
		color: #287a1f;
	}
	#grooveLibraryStatus.error {
		color: #a52213;
	}
	#grooveLibraryList {
		display: grid;
		gap: 10px;
		margin-top: 10px;
	}
	.grooveLibraryEmpty {
		padding: 18px 14px;
		border: 1px dashed #bbb;
		border-radius: 12px;
		color: #666;
		font-size: 13px;
		line-height: 1.4;
		background: #fff;
	}
	.grooveLibraryItem {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 10px;
		align-items: center;
		padding: 12px;
		border: 1px solid #ddd;
		border-radius: 12px;
		background: #fff;
	}
	.grooveLibraryItemTitle {
		font-size: 15px;
		font-weight: 800;
		line-height: 1.25;
		word-break: break-word;
	}
	.grooveLibraryItemMeta {
		margin-top: 4px;
		color: var(--highlight-color-on-white);
		font-size: 12px;
		font-weight: 800;
	}
	.grooveLibraryItemDate {
		margin-top: 4px;
		color: #777;
		font-size: 11px;
	}
	.grooveLibraryItemActions {
		display: grid;
		gap: 6px;
	}
	.grooveLibraryLoadButton,
	.grooveLibraryDeleteButton {
		height: 32px;
		padding: 0 10px;
		border-radius: 8px;
		font-size: 12px;
		font-weight: 800;
		font-family: Lato, Calibri, sans-serif;
	}
	.grooveLibraryLoadButton {
		border: 0;
		background: var(--highlight-color);
		color: #fff;
	}
	.grooveLibraryDeleteButton {
		border: 1px solid #ccc;
		background: #fff;
		color: #8b1d1d;
	}
	hr {
		width: 795px;
		margin-left: 0px;
	}

	#ABCSource {
		font-family: monospace;
		font-size: 14px;
	}
	#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;
	}
	.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 .bottomButtonIcon {
		letter-spacing: -2px;
		line-height: 32px;
	}
	#stickingsButton .bottomButtonIcon .fa {
		font-size: 1.55em;
	}
	#printButton {
	}
	#downloadButton {
	}
	.centeringSpace {
	}
	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: transparent;
		text-align: center;
		color: inherit;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		-webkit-justify-content: space-around;
	}
	.pageBottomButton {
		position: relative;
		display: inline-block;
		margin: 0px 20px;
	}
	.pageBottomButton:hover {
		cursor: pointer;
		color: #FFF;
	}
	.pageBottomButton.buttonSelected {
		color: #FFF;
		font-weight: 700;
	}
	.pageBottomButton[data-tooltip]::before,
	.pageBottomButton[data-tooltip]::after {
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.15s ease, visibility 0.15s ease;
		z-index: 40;
	}
	.pageBottomButton[data-tooltip]::after {
		content: attr(data-tooltip);
		position: absolute;
		left: 50%;
		bottom: calc(100% + 12px);
		transform: translateX(-50%);
		width: max-content;
		max-width: 240px;
		padding: 10px 12px;
		border-radius: 6px;
		background: #1a1a1a;
		color: #f2f2f2;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.45;
		text-align: left;
		white-space: pre-line;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	}
	.pageBottomButton[data-tooltip]::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: calc(100% + 4px);
		transform: translateX(-50%);
		border: 6px solid transparent;
		border-top-color: #1a1a1a;
	}
	.pageBottomButton[data-tooltip]:hover::before,
	.pageBottomButton[data-tooltip]:hover::after,
	.pageBottomButton[data-tooltip]:focus-within::before,
	.pageBottomButton[data-tooltip]:focus-within::after {
		opacity: 1;
		visibility: visible;
	}
	#bottomButtonRow > .pageBottomButton:first-child[data-tooltip]::after {
		left: 0;
		transform: none;
	}
	#bottomButtonRow > .pageBottomButton:first-child[data-tooltip]::before {
		left: 24px;
	}
	#bottomButtonRow > .pageBottomButton:last-child[data-tooltip]::after {
		left: auto;
		right: 0;
		transform: none;
	}
	#bottomButtonRow > .pageBottomButton:last-child[data-tooltip]::before {
		left: auto;
		right: 24px;
		transform: none;
	}
	.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 only screen and (max-width: 900px) {
		body {
			height: auto;
			min-height: 100vh;
			overflow-x: hidden;
		}

		#GrooveWriter {
			min-width: 0;
			width: 100%;
			min-height: 100vh;
			overflow-x: hidden;
		}

		#LeftHandNav {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 58px;
			border-right: 0;
			border-bottom: 1px solid #000;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			white-space: nowrap;
			z-index: 1001;
		}

		#divisionButtonContainer {
			display: inline-flex;
			display: -webkit-inline-flex;
			min-width: max-content;
			height: 58px;
		}

		#logoInSubdivision {
			min-width: 58px;
			width: 58px;
			height: 57px;
			padding: 6px;
		}

		#logoInSubdivision img {
			width: 100%;
			height: 100%;
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
		}

		.left-button {
			display: inline-block;
			min-width: 64px;
			vertical-align: top;
		}

		.left-button-content {
			height: 57px;
			padding: 0 6px;
			border-right: 1px solid #000;
			border-bottom: 0;
			font-size: 10px;
			line-height: 1.1;
			box-sizing: border-box;
		}

		.left-button.buttonSelected,
		.left-button.buttonSelected:hover,
		.myButton:hover,
		.left-button:hover {
			transform: none;
		}

		.buttonFraction {
			font-size: 15px;
		}

		#timeLabel {
			height: 57px;
		}

		#timeSigLabel {
			font-size: 17px;
		}

		#timeSubLabel {
			font-size: 10px;
		}

		#undoButton {
			font-size: 12px;
		}

		#TopNav {
			position: fixed;
			top: 58px;
			left: 0;
			width: 100%;
			height: auto;
			min-height: 96px;
			margin-left: 0;
			padding: 8px 10px;
			box-sizing: border-box;
			z-index: 1000;
		}

		.topNavToggleButton {
			display: block;
			width: 100%;
			min-height: 28px;
			margin: 0 0 7px 0;
			padding: 5px 10px;
			border: 1px solid rgba(255, 255, 255, 0.26);
			border-radius: 999px;
			background: rgba(0, 0, 0, 0.18);
			color: #fff;
			font: 700 12px/16px 'Lato', Calibri, sans-serif;
			text-align: center;
			cursor: pointer;
		}

		.bottomNavToggleButton {
			display: block;
			width: calc(100% - 20px);
			max-width: 100%;
			min-height: 28px;
			margin: 0 auto 10px;
			padding: 5px 10px;
			border: 1px solid rgba(255, 255, 255, 0.26);
			border-radius: 999px;
			background: rgba(0, 0, 0, 0.18);
			color: #fff;
			font: 700 12px/16px 'Lato', Calibri, sans-serif;
			text-align: center;
			cursor: pointer;
			box-sizing: border-box;
		}

		#bottomNav {
			padding: 10px 0 0;
		}

		#GrooveWriter.bottomNavCollapsed #bottomNav {
			padding: 10px;
		}

		#GrooveWriter.bottomNavCollapsed #bottomButtonRow {
			display: none;
		}

		#GrooveWriter.bottomNavCollapsed .bottomNavToggleButton {
			margin-bottom: 0;
		}

		#GrooveWriter.topNavCollapsed #TopNav {
			min-height: 36px;
			padding-top: 4px;
			padding-bottom: 4px;
		}

		#GrooveWriter.topNavCollapsed .topNavToggleButton {
			margin-bottom: 0;
		}

		#GrooveWriter.topNavCollapsed #logoTextUpperLeft,
		#GrooveWriter.topNavCollapsed #upperLeft,
		#GrooveWriter.topNavCollapsed #upperRight {
			display: none;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer {
			display: block;
			min-height: 44px;
			height: auto;
			overflow: hidden;
			border-bottom: 1px solid #000;
		}

		/* Compact playback strip: keep PLAY / time / visual count when nav is collapsed */
		#GrooveWriter.topNavCollapsed #midiPlayer .tempoAndProgress,
		#GrooveWriter.topNavCollapsed #midiPlayer .drumSampleKitRow,
		#GrooveWriter.topNavCollapsed #midiPlayer .micPracticeRow,
		#GrooveWriter.topNavCollapsed #midiPlayer .midiMetronomeMenu,
		#GrooveWriter.topNavCollapsed #midiPlayer .MIDIProgressRow {
			display: none !important;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer .playerControl,
		#GrooveWriter.topNavCollapsed #midiPlayer .playerControl.micPracticeEnabled {
			white-space: nowrap;
			min-height: 44px;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer .playerControlsRow,
		#GrooveWriter.topNavCollapsed #midiPlayer .playerControl.micPracticeEnabled .playerControlsRow {
			display: flex;
			display: -webkit-flex;
			align-items: center;
			flex-wrap: nowrap;
			-webkit-flex-wrap: nowrap;
			height: 44px;
			min-height: 44px;
			padding-top: 0;
			padding-bottom: 0;
			row-gap: 0;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer .midiPlayImage {
			flex: none;
		}

		#GrooveWriter.topNavCollapsed #midiPlayer .MIDIPlayTime,
		#GrooveWriter.topNavCollapsed #midiPlayer .midiVisualCountGroup {
			display: inline-flex;
			align-items: center;
			flex: none;
		}

		#GrooveWriter.topNavCollapsed #sheetMusicTextFields {
			display: none !important;
		}

		#logoTextUpperLeft {
			display: none;
		}

		#upperLeft,
		#upperRight {
			display: block;
			float: none;
			margin: 0;
			white-space: normal;
		}

		#upperRight {
			margin-top: 8px;
		}

		#metronomeContainer {
			display: flex;
			display: -webkit-flex;
			align-items: center;
			gap: 6px;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			padding-bottom: 2px;
		}

		#metronomeLabel {
			flex: none;
			height: auto;
			margin: 0 4px 0 0;
			font-size: 11px;
			line-height: 28px;
		}

		.metronomeButton,
		.rightButtons {
			min-height: 28px;
			height: auto;
			padding: 5px 9px;
			margin: 0;
			border-radius: 999px;
			font-size: 12px;
			line-height: 18px;
			box-sizing: border-box;
		}

		.metronomeButton:hover,
		.rightButtons:hover,
		.metronomeButton.selected:hover,
		.rightButtons.selected:hover,
		.metronomeButton.buttonSelected:hover,
		.rightButtons.buttonSelected:hover {
			transform: none;
		}

		#upperRight {
			display: flex;
			display: -webkit-flex;
			gap: 8px;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			padding-bottom: 2px;
		}

		.rightButtons {
			flex: 0 0 auto;
			margin: 0;
			text-decoration: none;
			background: rgba(255, 255, 255, 0.08);
		}

		#midiPlayer {
			position: fixed;
			top: 154px;
			left: 0;
			width: 100%;
			min-height: 54px;
			z-index: 999;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}

		#RightHandContent {
			top: 208px;
			left: 0;
			width: 100%;
			height: auto;
			min-height: calc(100vh - 208px);
			overflow-y: visible;
		}

		#sheetMusicDiv,
		.svgTarget {
			overflow-x: hidden;
			-webkit-overflow-scrolling: touch;
		}

		#RightHandContent .svgTarget svg {
			min-width: 0;
			width: 100%;
			max-width: 100%;
		}

		#musicalInput {
			overflow-x: visible;
			overflow-y: visible;
			-webkit-overflow-scrolling: touch;
			text-align: left;
		}

		#measureContainer {
			justify-content: flex-start;
			align-items: flex-start;
			width: 100%;
			min-width: 0;
			max-width: 100%;
			padding: 8px 10px 16px;
			gap: 12px;
			overflow-x: visible;
			-webkit-overflow-scrolling: touch;
		}

		.staff-container {
			--line-label-width: 52px;
			flex: 0 0 auto;
			max-width: none;
			transform-origin: top left;
		}

		#measureContainer.wide-single-measure .staff-container {
			transform: none;
			margin-bottom: 2px;
		}

		.staff-container.staff-fit-scaled {
			/* JS applies transform/margins; keep origin stable for touch targets */
			transform-origin: top left;
		}

		.line-labels {
			width: var(--line-label-width);
			font-size: 14px;
		}

		.hh-label,
		.tom-label,
		.snare-label,
		.kick-label {
			display: flex;
			display: -webkit-flex;
			align-items: center;
			-webkit-align-items: center;
			justify-content: center;
			-webkit-justify-content: center;
			margin-top: 0;
			margin-left: 2px;
			padding-top: 0;
			box-sizing: border-box;
			line-height: 1.1;
		}

		.hh-label {
			height: 42px;
		}

		.tom-label,
		.snare-label {
			height: 28px;
		}

		.kick-label {
			height: 56px;
		}

		.sticking,
		.hi-hat,
		.tom,
		.snare,
		.kick,
		.unmuteHHButton,
		.unmuteSnareButton,
		.unmuteKickButton,
		.unmuteTom1Button,
		.unmuteTom2Button,
		.unmuteTom3Button,
		.unmuteTom4Button {
			width: 22px;
			margin-left: 1px;
			margin-right: 1px;
		}

		.bg-highlight {
			width: 22px;
			margin-left: 1px;
			margin-right: 1px;
			border: 1px solid transparent;
			box-sizing: content-box;
		}

		.space_between_note_groups {
			width: 6px;
		}

		.sticking_right,
		.sticking_left,
		.sticking_count {
			left: 2px;
			font-size: 16px;
		}

		.hh_cross,
		.hh_open,
		.hh_close,
		.hh_accent,
		.hh_crash,
		.hh_ride,
		.hh_ride_bell,
		.hh_cow_bell,
		.hh_stacker {
			left: 2px;
			font-size: 15px;
		}

		.tom_circle {
			left: 0;
			width: 16px;
			height: 16px;
		}

		.snare_circle,
		.kick_circle {
			left: 0;
			width: 16px;
			height: 16px;
		}

		#sheetMusicTextFields {
			display: block;
			padding: 10px;
			text-align: left;
		}

		.sheetMusicTextField {
			display: block;
			margin: 0 0 8px;
		}

		.sheetMusicInputField {
			width: 100%;
			min-height: 34px;
			box-sizing: border-box;
		}

		#KeyButton {
			float: none;
			display: inline-block;
			padding-right: 0;
		}

		#bottomButtonRow {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 10px;
			padding: 14px 10px 18px;
			text-align: center;
		}

		.pageBottomButton {
			margin: 0;
			padding: 10px 8px;
			border: 1px solid rgba(255, 255, 255, 0.08);
			border-radius: 12px;
			background: rgba(255, 255, 255, 0.04);
			box-sizing: border-box;
		}

		.bottomButtonIcon .fa-2x {
			font-size: 1.5em;
		}

		.bottomButtonLabel {
			font-size: 11px;
			line-height: 1.2;
		}

		#grooveListWrapper {
			top: 66px;
			left: 50%;
			right: auto;
			width: min(340px, calc(100vw - 24px));
			max-width: calc(100vw - 24px);
			max-height: calc(100vh - 80px);
			height: auto;
			transform: translateX(-50%);
			box-sizing: border-box;
		}

		#grooveLibraryPopup {
			top: 66px;
			right: 8px;
			left: 8px;
			width: auto;
			max-width: none;
			max-height: calc(100vh - 82px);
			padding: 14px;
		}

		#grooveLibraryActions {
			grid-template-columns: 1fr;
		}

		#grooveLibrarySaveButton {
			width: 100%;
		}

		.grooveLibraryItem {
			grid-template-columns: 1fr;
		}

		.grooveLibraryItemActions {
			grid-template-columns: 1fr 1fr;
		}

		.noteContextMenu>ul.list {
			left: 8px;
			right: 8px;
			top: auto;
			bottom: 8px;
			width: auto;
			max-height: 70vh;
			overflow-y: auto;
			font-size: 16px;
			box-sizing: border-box;
		}

		.noteContextMenu>ul.list li {
			padding: 14px 16px;
		}

		#permutationContextMenu,
		#helpContextMenu,
		#metronomeOptionsContextMenu,
		#metronomeOptionsOffsetClickContextMenu,
		#metronomeOptionsOffsetClickForTripletsContextMenu,
		#metronomeVisualCountContextMenu {
			left: 50%;
			right: auto;
			top: 70px;
			bottom: auto;
			width: min(340px, calc(100vw - 24px));
			max-width: calc(100vw - 24px);
			transform: translateX(-50%);
			box-sizing: border-box;
		}

		#metronomeAutoSpeedupConfiguration,
		#timeSigPopup {
			position: fixed;
			left: 12px;
			right: 12px;
			top: 50%;
			width: auto;
			max-width: 420px;
			margin: 0 auto;
			transform: translateY(-50%);
			box-sizing: border-box;
		}

		#metronomeAutoSpeedupConfigurationSliders {
			width: 100%;
		}

		#metronomeAutoSpeedupTempoIncreaseAmount,
		#metronomeAutoSpeedupTempoIncreaseInterval {
			width: 100%;
			box-sizing: border-box;
		}

		#metronomeAutoSpeedupOutputText {
			font-size: 20px;
		}

		#totalPlayTime {
			display: none;
		}
	}

	@media only screen and (max-width: 520px) {
		#TopNav {
			min-height: 104px;
			padding: 7px 8px;
		}

		#GrooveWriter.topNavCollapsed #TopNav {
			min-height: 36px;
			padding: 4px 8px;
		}

		#midiPlayer {
			top: 162px;
		}

		#RightHandContent {
			top: 216px;
			min-height: calc(100vh - 216px);
		}

		/* Fallback before JS measures: LeftHand 58 + TopNav 36 + gap ≈ 95; + player 44 ≈ 140 */
		#GrooveWriter.topNavCollapsed #midiPlayer {
			top: 95px;
		}

		#GrooveWriter.topNavCollapsed #RightHandContent {
			top: 140px;
			min-height: calc(100vh - 140px);
		}

		.left-button {
			min-width: 58px;
		}

		.left-button-content {
			font-size: 9px;
			padding: 0 4px;
		}

		#RightHandContent .svgTarget svg {
			min-width: 0;
			width: 100%;
			max-width: 100%;
		}

		#measureContainer {
			padding-left: 8px;
			padding-right: 8px;
		}

		.staff-container {
			--line-label-width: 46px;
		}

		.line-labels {
			width: var(--line-label-width);
			font-size: 12px;
		}

		.hh-label,
		.tom-label,
		.snare-label,
		.kick-label {
			margin-left: 1px;
		}

		.sticking,
		.hi-hat,
		.tom,
		.snare,
		.kick,
		.unmuteHHButton,
		.unmuteSnareButton,
		.unmuteKickButton,
		.unmuteTom1Button,
		.unmuteTom2Button,
		.unmuteTom3Button,
		.unmuteTom4Button {
			width: 18px;
			margin-left: 0;
			margin-right: 0;
		}

		.bg-highlight {
			width: 18px;
			margin-left: 0;
			margin-right: 0;
			border: 1px solid transparent;
			box-sizing: content-box;
		}

		.space_between_note_groups {
			width: 4px;
		}

		.tom_circle {
			width: 14px;
			height: 14px;
		}

		.snare_circle,
		.kick_circle {
			width: 14px;
			height: 14px;
		}

		#bottomNav {
			padding: 6px 0 0;
		}

		#GrooveWriter.bottomNavCollapsed #bottomNav {
			padding: 6px 8px;
		}

		.bottomNavToggleButton {
			width: calc(100% - 16px);
			min-height: 26px;
			margin: 0 auto 6px;
			padding: 4px 8px;
			font-size: 11px;
			line-height: 16px;
		}

		#bottomButtonRow {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 6px;
			padding: 8px 8px 12px;
		}

		.pageBottomButton {
			margin: 0;
			padding: 6px 4px;
			border-radius: 10px;
		}

		.bottomButtonIcon .fa-2x {
			font-size: 1.25em;
		}

		.bottomButtonLabel {
			margin-top: 1px;
			font-size: 9px;
			line-height: 1.15;
		}

		#icon-tom1 {
			font-size: 13px;
			margin-top: 10px;
		}

		#icon-tom2 {
			font-size: 12px;
		}

		#icon-tom3 {
			font-size: 16px;
			margin-top: 7px;
		}

		.seoIntro {
			padding: 12px 12px 16px;
			font-size: 0.72rem;
			line-height: 1.4;
		}

		.seoIntro h1 {
			margin: 0 0 4px;
			font-size: 0.68rem;
		}

		.seoIntro > p {
			margin: 0 auto 6px;
		}

		.seoIntroLinks {
			margin: 8px 0 0;
			gap: 4px 10px;
		}

		.seoIntroMore {
			margin-top: 6px;
		}
	}

	@media print {
		/* keep at bottom so it overrides the styles above */
		/* there is another definition in groove_display.css that adds more rules */
		body {
			margin: 0;
			padding: 0;
			background: #fff !important;
			color: #000 !important;
		}

		#GrooveWriter {
			min-width: 10px;
		}

		.nonPrintable {
			display: none !important;
		}

		.Printable {
			display: block !important;
		}

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

		#sheetMusicDiv,
		.svgTarget {
			overflow: visible !important;
			background: #fff !important;
		}

		.svgTarget svg {
			margin: 0 !important;
			width: 100% !important;
			max-width: 100% !important;
			min-width: 0 !important;
			height: auto !important;
			color: #000 !important;
		}

		/* Editor grid: print only tracks used in the current groove */
		#musicalInput {
			display: block !important;
			width: 100% !important;
			max-width: 100% !important;
			margin-top: 18px !important;
			padding-top: 12px !important;
			border-top: 1px solid #bbb !important;
			border-bottom: none !important;
			background: #fff !important;
			overflow: visible !important;
			page-break-inside: avoid;
			-webkit-print-color-adjust: exact !important;
			print-color-adjust: exact !important;
			color-adjust: exact !important;
		}

		#musicalInput * {
			-webkit-print-color-adjust: exact !important;
			print-color-adjust: exact !important;
			color-adjust: exact !important;
		}

		/* Active snare/kick/tom notes are background fills on screen.
		   Use a thick black border so the fill still prints when the browser
		   strips backgrounds (default print behavior). */
		#musicalInput .snare_circle.print-note-filled,
		#musicalInput .kick_circle.print-note-filled,
		#musicalInput .tom_circle.print-note-filled {
			background: #000 !important;
			border-color: #000 !important;
			border-style: solid !important;
			border-width: 11px !important;
			box-sizing: border-box !important;
		}

		#measureContainer {
			display: flex !important;
			flex-wrap: wrap !important;
			justify-content: flex-start !important;
			gap: 12px 16px !important;
			padding: 0 !important;
			width: 100% !important;
			max-width: 100% !important;
		}

		#measureContainer.wide-single-measure .staff-container {
			transform: none !important;
			margin-bottom: 0 !important;
			margin-right: 0 !important;
		}

		.staff-container {
			background: #fff !important;
			max-width: 100% !important;
			page-break-inside: avoid;
			transform: none !important;
			margin-right: 0 !important;
			margin-bottom: 0 !important;
		}

		.staff-line-1,
		.staff-line-2,
		.staff-line-3,
		.staff-line-4,
		.staff-line-5,
		.staff-line-6,
		.background-highlight-container,
		.bg-highlight,
		.unmuteHHButton,
		.unmuteSnareButton,
		.unmuteKickButton,
		.unmuteTom1Button,
		.unmuteTom2Button,
		.unmuteTom3Button,
		.unmuteTom4Button,
		.closeMeasureButton,
		#addMeasureButton {
			display: none !important;
		}

		.stickings-row-container,
		.stickings-container,
		.stickings-label,
		.hi-hat-container,
		.hh-label,
		.toms-container,
		.tom-label,
		.snare-container,
		.snare-label,
		.kick-container,
		.kick-label {
			display: none !important;
			visibility: hidden !important;
		}

		#musicalInput.print-track-stickings .stickings-row-container {
			display: block !important;
			visibility: visible !important;
			margin-left: 0 !important;
		}
		#musicalInput.print-track-stickings .stickings-row-container .line-labels {
			display: table-cell !important;
		}
		#musicalInput.print-track-stickings .stickings-container,
		#musicalInput.print-track-stickings .stickings-label {
			display: block !important;
			visibility: visible !important;
			background: #fff !important;
			color: #000 !important;
		}

		#musicalInput.print-track-hh .hi-hat-container,
		#musicalInput.print-track-hh .hh-label,
		#musicalInput.print-track-tom1 #tom1-container,
		#musicalInput.print-track-tom1 #tom1-label,
		#musicalInput.print-track-tom2 #tom2-container,
		#musicalInput.print-track-tom2 #tom2-label,
		#musicalInput.print-track-tom3 #tom3-container,
		#musicalInput.print-track-tom3 #tom3-label,
		#musicalInput.print-track-tom4 #tom4-container,
		#musicalInput.print-track-tom4 #tom4-label,
		#musicalInput.print-track-snare .snare-container,
		#musicalInput.print-track-snare .snare-label,
		#musicalInput.print-track-kick .kick-container,
		#musicalInput.print-track-kick .kick-label {
			display: block !important;
			visibility: visible !important;
		}

		.hi-hat-container,
		.toms-container,
		.snare-container,
		.kick-container,
		.stickings-container {
			border-bottom: 1px solid #999 !important;
		}

		.hh-label,
		.tom-label,
		.snare-label,
		.kick-label,
		.stickings-label {
			color: #000 !important;
			cursor: default !important;
		}

		.line-labels {
			color: #000 !important;
		}
	}