/* 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;
	}
	/* Режим просмотра — полностью чёрный фон вокруг нот и метронома */
	body.view-mode-active,
	body.view-mode-active #GrooveWriter,
	body.view-mode-active #LeftHandNav,
	body.view-mode-active #RightHandContent,
	body.view-mode-active #bottomButtonRow {
		background-color: #000 !important;
		background: #000 !important;
	}
	#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: 1000;
		width: calc(100% - 72px);
		margin-left: 72px;
		height: 48px;  /* total 48 */
		border-bottom: 1px solid #000;
		background: #b99df1;
		background: linear-gradient(to right, #b99df1, #a085e8);
		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;
	}
	#drumViz {
		background: #2f2f2f;
		width: 100%;
		height: 160px;
		position: relative;
		top: 0px;
		left: 0px;
		z-index: 998;
		border-bottom: 1px solid #000;
	}
	#drumVizSVG {
		width: 100%;
		height: 100%;
	}
	.viz-piece ellipse, .viz-piece rect, .viz-piece circle, .viz-piece line { stroke: #bbb; fill: #666; }
	#viz-kick circle:last-child { stroke: #bbb; }
	#viz-ride-bell { fill: #888; stroke: none; }
	.viz-piece.playing ellipse, .viz-piece.playing rect, .viz-piece.playing circle { fill: #E79700; stroke: #ffd696; }
	.viz-piece.playing line { stroke: #ffd696; }
	/* Hide specific pieces per user request */
	#viz-cowbell, #viz-china { display: none; }
	#RightHandContent {
		position: relative;
		#top: 209px;
		top: 98px; /* below top nav + midi */
		left: 72px;
		height: calc(100% - 98px);
		width: calc(100% - 72px);
		overflow-y: auto;
	}
	/* Collapsed state controlled by body attribute */
	body[data-drumviz="collapsed"] #drumViz { display: none; }

	#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;
	}
	#visualMetronome {
		display: none;
		margin-left: 12px;
		padding: 4px 12px;
		min-width: 48px;
		text-align: center;
		font-weight: 800;
		letter-spacing: 0.5px;
		color: #fff;
		background: #b99df1;
		border-radius: 14px;
		box-shadow: 0 4px 10px rgba(0,0,0,0.25);
		line-height: 1.2;
	}
	#visualMetronome.vm-visible {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	#visualMetronome.vm-ping {
		animation: none;
	}
	#visualMetronomeLarge {
		display: none;
		margin: 12px auto 0;
		text-align: center;
		font-weight: 900;
		font-family: 'Bebas Neue', Arial, Helvetica, sans-serif;
		/* Оптимально для ПК и телефона: минимум читаемость, максимум чтобы влезало */
		font-size: clamp(117px, 24.5vw, 392px);
		line-height: 1.05;
		color: #fff;
		background: transparent;
		text-shadow: none;
		box-shadow: none;
	}
	#visualMetronomeLarge.vm-visible {
		display: block;
		min-height: 360px;
	}
	#visualMetronomeLarge.vm-ping {
		animation: none;
	}
	@keyframes visualMetronomePulse {
		0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(185,157,241,0.6); }
		70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(185,157,241,0); }
		100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(185,157,241,0); }
	}
	.metronomeButton, .rightButtons {
		padding: 2px;
		cursor: pointer;
		display: inline-block;
		background: #b99df1;
		color: #FFF;
		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;
	}

	/* Скрываем маленький счёт метронома в верхнем меню, большой (#visualMetronomeLarge) остаётся */
	#visualMetronome,
	#visualMetronome.vm-visible {
		display: none !important;
		width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	/* Burger menu */
	#burgerMenuToggle {
		font-size: 16px;
		padding: 2px 8px;
		cursor: pointer;
	}
	#upperRight {
		position: relative;
	}
	#burgerDropdown {
		display: none;
		position: fixed;
		top: 48px;
		right: 10px;
		background: linear-gradient(160deg, #b99df1, #a085e8);
		border-radius: 10px;
		box-shadow: 0 6px 20px rgba(0,0,0,0.4);
		z-index: 1050;
		padding: 6px 0;
		min-width: 180px;
		flex-direction: column;
	}
	#burgerDropdown.open {
		display: flex;
	}
	/* Переопределяем все элементы внутри бургера — ID-стили не должны мешать */
	#burgerDropdown .burger-item,
	#burgerDropdown #tapTempoButton,
	#burgerDropdown #drumVizToggleTop,
	#burgerDropdown #authUserName,
	#burgerDropdown #logoutButton {
		display: block !important;
		padding: 9px 18px !important;
		margin: 0 !important;
		color: #fff !important;
		font-size: 13px !important;
		font-weight: 500 !important;
		cursor: pointer !important;
		white-space: nowrap !important;
		transition: background .15s !important;
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		animation: none !important;
		float: none !important;
		height: auto !important;
		width: 100% !important;
		text-align: left !important;
		box-sizing: border-box !important;
	}
	#burgerDropdown .burger-item:hover,
	#burgerDropdown #tapTempoButton:hover,
	#burgerDropdown #drumVizToggleTop:hover,
	#burgerDropdown #logoutButton:hover {
		background: rgba(255,255,255,0.15) !important;
	}
	#burgerDropdown #authUserName {
		color: #ffd696 !important;
		cursor: default !important;
		font-size: 12px !important;
		padding: 6px 18px !important;
	}
	#burgerDropdown #authUserName:hover {
		background: transparent !important;
	}
	#burgerDropdown #logoutButton {
		color: #ffd696 !important;
	}
	.burger-divider {
		height: 1px;
		background: rgba(255,255,255,0.2);
		margin: 4px 12px;
	}

	/* TAP tempo styles */
	#tapTempoButton {
		background: #b99df1;
		padding: 2px 10px;
		border-radius: 14px;
		animation: tapPulse 2s infinite ease-in-out;
	}
	#tapTempoButton.tapped {
		animation: tapClick .2s ease-in-out;
	}
    #metronomeOptionsAnchor {
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        color: #FFF !important;
        font-weight: inherit !important;
        min-width: 0 !important;
        text-align: center !important;
        transition: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    #metronomeOptionsAnchor:hover {
        background: transparent !important;
        transform: none !important;
        font-weight: inherit !important;
    }
	
	/* Стили меню настроек метронома в стиле меню упражнений */
	#metronomeOptionsContextMenu {
		position: fixed !important;
		z-index: 999 !important;
		top: 0px !important;
		right: 0px !important;
		width: 300px !important;
		height: 300px !important;
		overflow: auto !important;
		background: #eeeeee !important;
		border: 1px solid #393939 !important;
	}
	#metronomeOptionsContextMenu ul.list {
		margin: 0 !important;
		padding: 0px !important;
		list-style: none !important;
		background: #eeeeee !important;
		color: #000 !important;
	}
	#metronomeOptionsContextMenu ul.list li {
		padding: 12px 15px !important;
		border-bottom: 1px solid #ccc !important;
		cursor: pointer !important;
		font-size: 14px !important;
		transition: background-color 0.2s ease !important;
	}
	#metronomeOptionsContextMenu ul.list li:hover {
		background: #ddd !important;
	}
	#metronomeOptionsContextMenu ul.list li:last-child {
		border: none !important;
	}

	#drumVizToggleTop {
		background: #b99df1;
		padding: 2px 10px;
		border-radius: 14px;
	}
	@keyframes tapPulse {
		0% { box-shadow: 0 0 0 0 rgba(185,157,241, 0.6); }
		70% { box-shadow: 0 0 0 8px rgba(185,157,241, 0); }
		100% { box-shadow: 0 0 0 0 rgba(185,157,241, 0); }
	}
	@keyframes tapClick {
		0% { transform: scale(1.0); }
		50% { transform: scale(0.92); }
		100% { transform: scale(1.0); }
	}
	.metronomeButton:hover, .rightButtons:hover, .metronomeButton.selected:hover, .rightButtons.selected:hover, .rightButtons.buttonSelected:hover {
		background: #a085e8;
		/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 */
		background: #a085e8;
		color: #444444;
		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: #E69D02;
		font-size: 20px;
		margin-bottom: -5px;
	}
	#timeSubLabel {
		color: #E69D02;
		font-size: 10px;
	}
	.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: #2484C0;
		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;
	}
	#tom2-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: #000;
	}
	.hh-label:hover, .snare-label:hover, .kick-label:hover {
		color: #2484C0;
	}
	.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;
	}
	#tom2-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, .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: 1px; left: 3px;
		width:90%;
		line-height: 20px;
		height:20px;
		width: 20px;
		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: 1px; left: 3px;
		height: 20px;
		width: 20px;
		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;
	}

	/* Стили для пользовательских ритмов */
	.saveGrooveBtn {
		color: #28597a;
		cursor: pointer;
		font-size: 14px;
		margin-left: 8px;
		transition: color 0.2s;
	}

	.saveGrooveBtn:hover {
		color: #E79700;
	}

	.deleteGrooveBtn {
		color: #999;
		cursor: pointer;
		font-size: 12px;
		float: right;
		padding: 0 4px;
		transition: color 0.2s;
	}

	.deleteGrooveBtn:hover {
		color: #ff4444;
	}
	.grooveListHeaderLI {
		padding:15px;
		background: #FAB51A;
		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: 450px;
		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: #E79700;
		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: #E79700;
		font-size: 14px;
		font-weight: 700;
		text-align: center;
	}
	#fullURLPopupSubSubTitle {
		font-size: 12px;
		text-align: center;
	}
	#fullURLPopupCheckboxes {
		display: -webkit-flex;
		display: flex;
		width: 380px;
		margin: 10px auto;
		justify-content: space-around;
		-webkit-justify-content: space-around;
		flex-wrap: wrap;
	}
	.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;
	}
	#shareButtonContainer {
		text-align: center;
	}
	#shareButton {
	}
	.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: #E79700;
		color: #FFF;
		border: 0px;
		border-radius: 5px;
		padding: 5px 10px;
	}
	#showHideSecondMeasureButton {
	}
	#showHideStickingsButton {
	}
	#showHideStickingsButton:before  {
		font-family: FontAwesome;
		font-size: 2em;
		letter-spacing: -3px;
		content: "\f065";
		line-height: 32px;
	}
	#showHideStickingsButton.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;
		background-color: rgba(221, 221, 221, 0.3);
	}
	.totalTimeNum {
		color: #CC6500;
	}
	.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: center;
		-webkit-justify-content: center;
		position: relative;
	}
	.pageBottomButton {
		display: inline-block;
		margin: 0px 20px;
		min-width: 64px;
	}
	#shareSaveButton {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		margin: 0 0 0 8px;
	}
	.pageBottomButton:hover {
		cursor: pointer;
		color: #FFF;
	}
	.bottomButtonIcon {
		display:block;
	}
	.bottomButtonLabel {
		margin-top: 2px;
		display: block;
		font-size: 11px;
		letter-spacing: 0.2px;
	}
	.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;
		}
	}

	/* Стили для кнопки СОХРАНИТЬ в основной версии */
	#groovesAnchor {
		background: #FF6A00 !important;
		color: white !important;
		border-radius: 14px !important;
		padding: 2px 10px !important;
		transition: background-color 0.2s !important;
	}

	#groovesAnchor:hover {
		background: #E79700 !important;
	}

	/* Стили для пользовательских упражнений */
	.saveGrooveBtn {
		color: #28597a;
		cursor: pointer;
		font-size: 14px;
		margin-left: 8px;
		transition: color 0.2s;
	}

	.saveGrooveBtn:hover {
		color: #E79700;
	}

	.deleteGrooveBtn {
		color: #999;
		cursor: pointer;
		font-size: 12px;
		float: right;
		padding: 0 4px;
		transition: color 0.2s;
	}

	.deleteGrooveBtn:hover {
		color: #ff4444;
	}

	.closeMenuBtn {
		color: #999;
		cursor: pointer;
		font-size: 14px;
		margin-left: 8px;
		transition: color 0.2s;
	}

	.closeMenuBtn:hover {
		color: #ff4444;
	}

	/* Скрыть кнопку SHARE */
	#shareButton {
		display: none !important;
	}

	/* Увеличить кнопку COPY */
	#fullURLPopupCopyButton {
		font-size: 16px !important;
		padding: 12px 20px !important;
		border-radius: 8px !important;
		font-weight: 600 !important;
		min-width: 120px !important;
	}