:root {
	--background_color: #ddeeff;

	--background_base: #c8d8e0;
	--grid_base: #ffffffff;
	--grid_lite: #ffffff66;
	--prime_base: #000000dd;
	--prime_lite: #00000066;
	--secondary_base: #115522ff;
	--secondary_lite: #11552299;
	--decor_base: #226699ff;
	--decor_solid: #226699cc;
	--decor_lite: #22669999;
	--decor_onion: #22669966;
	--decor_weak: #22669933;
	--active_base: #660022ff;
	--active_lite: #66002222;
}
.average1 {
	fill: #22669922;
}
.average2 {
	fill: #22669944;
}
.average3 {
	fill: #22669966;
}
.average4 {
	fill: #22669988;
}
.average5 {
	fill: #226699aa;
}
.average6 {
	fill: #226699cc;
}

html {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: var(--background_base);
	font-family: 'Zen Kurenaido', serif, cursive;
	user-select: none;
}

.keysNote {
	fill: var(--decor_weak);
}

.keysMeasure {
	fill: var(--decor_weak);
}

.octaveNumNote {
	fill: var(--decor_onion);
	font-size: 6cm;
}
.octaveNumMeasure {
	fill: var(--decor_onion);
	font-size: 16cm;
}

.drumTitleNote {
	fill: var(--decor_solid);
	font-size: 1cm;
}
.drumTitleMeasure {
	fill: var(--decor_solid);
	font-size: 6cm;
}

#trackInfoPanel{
	z-index: 1;
	top:0;
	position: fixed;
	pointer-events: none;
}
.infoLabelPanel {
	position: fixed;
	z-index: -1;
	transform: rotate(90deg);
	transform-origin: 0% 0%;
	left: 100vw;
	width: 100vh;
	height: 10cm;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

#selectionInfo1 {
	font-size: 10vh;
	color: var(--decor_onion);
	text-overflow: ellipsis;
	transform: translate(0cm, 1.8cm);
}

#selectionInfo2 {
	font-size: 7vh;
	color: var(--decor_onion);
	text-overflow: ellipsis;
	transform: translate(1cm, 0.7cm);
}

#selectionInfo3 {
	font-size: 5vh;
	color: var(--decor_onion);
	text-overflow: ellipsis;
	transform: translate(1.5cm, 0cm);
}

#selectionInfo4 {
	font-size: 3vh;
	color: var(--decor_onion);
	text-overflow: ellipsis;
	transform: translate(2cm, -0.5cm);
}

.timelineBarLabelNote {
	fill: var(--decor_solid);
	font-size: 1cm;
}

.timelineBarLabelMeasure {
	fill: var(--decor_solid);
	font-size: 4cm;
}

.timelineBarLabelSong {
	fill: var(--decor_solid);
	font-size: 16cm;
}

.timelineBarLabelSongFar {
	fill: var(--decor_solid);
	font-size: 64cm;
}

.timelineBarSubNote {
	fill: var(--decor_solid);
	font-size: 0.5cm;
}

.timelineBarSubMeasure {
	fill: var(--decor_solid);
	font-size: 2cm;
}

.barInfoLabelNote {
	fill: var(--decor_solid);
	font-size: 1cm;
}

.barInfoLabelMeasure {
	fill: var(--decor_solid);
	font-size: 4cm;
}

.barInfoLabelSong {
	fill: var(--decor_solid);
	font-size: 16cm;
}

.barInfoLabelFar {
	fill: var(--decor_solid);
	font-size: 64cm;
}

.barInfoLabelBig {
	fill: var(--decor_solid);
	font-size: 256cm;
}

.barLine1 {
	stroke: var(--decor_onion);
	stroke-width: 0.25cm;
	stroke-linecap: round;
}

.barLine4 {
	stroke: var(--decor_onion);
	stroke-width: 0.5cm;
	stroke-linecap: round;
}

.barLine16 {
	stroke: var(--decor_onion);
	stroke-width: 1cm;
	stroke-linecap: round;
}
/*
.barLine64 {
	stroke: var(--decor_onion);
	stroke-width: 2cm;
	stroke-linecap: round;
}

.barLine256 {
	stroke: var(--decor_onion);
	stroke-width: 4cm;
	stroke-linecap: round;
}
*/
.octaveLine1 {
	stroke: var(--decor_onion);
	stroke-width: 0.25cm;
	stroke-linecap: round;
}

.octaveLine4 {
	stroke: var(--decor_onion);
	stroke-width: 0.5cm;
	stroke-linecap: round;
}

.octaveLine16 {
	stroke: var(--decor_onion);
	stroke-width: 1cm;
	stroke-linecap: round;
}

.pitchLine4 {
	stroke: var(--active_lite);
	stroke-width: 0.2cm;
	stroke-linecap: round;
}

.rhythmLine4 {
	stroke: var(--active_lite);
	stroke-width: 0.2cm;
	stroke-linecap: round;
}

.rhythmWideLine4 {
	stroke: var(--active_lite);
	stroke-width: 0.7cm;
	stroke-linecap: round;
}

.mainLine {
	stroke: var(--prime_base);
	stroke-width: 7cm;
	stroke-linecap: round;
}
.mainDot {
	fill: var(--prime_base);
}

.secondLine {
	stroke: var(--secondary_lite);
	stroke-width: 7cm;
	stroke-linecap: round;
}
.secondDot {
	fill: var(--secondary_lite);
}

.otherLine {
	stroke: var(--decor_lite);
	stroke-width: 7cm;
	stroke-opacity: 25%;
	stroke-linecap: round;
}
.otherDot {
	fill: var(--decor_lite);
}

.actionPoint {
	fill2: var(--decor_base);
	text-shadow2: 2111px 2111px 5px red;
	animation-name: actionBlink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in;
}
.actionPointNote {
	animation-name: actionBlink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in;
	stroke-width: 0.1cm;
	stroke-linecap: round;
	fill: none;
}
.actionPointMeasure {
	animation-name: actionBlink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in;
	stroke-width: 1cm;
	stroke-linecap: round;
	fill: none;
}
.actionPointSong {
	animation-name: actionBlink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in;
	stroke-width: 8cm;
	stroke-linecap: round;
	fill: none;
}
.actionPointFar {
	animation-name: actionBlink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in;
	stroke-width: 16cm;
	stroke-linecap: round;
	fill: none;
}
.actionPointBig {
	animation-name: actionBlink;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in;
	stroke-width: 32cm;
	stroke-linecap: round;
	fill: none;
}

@keyframes actionBlink {
	from {
		stroke: var(--active_base);
	}
	to {
		stroke: var(--secondary_base);
	}
}




.menuPane{
	height: 100%;
	width: 0cm;
	position: fixed;
	z-index: 2;
	top: 0;
	right: 0;
	background-color: var(--background_base);
	transition: 0.25s;
	margin: 0px;
	padding: 0px;
	font-size: 0.75cm;
	box-shadow: 0px 0px 0.93cm #000000;
	overflow-x: hidden;
	overflow-y: scroll;
}
.menuHead{
	color: var(--grid_base);
	font-size: 0.5cm;
	background-color:var(--decor_onion);
	position: fixed;
	height:1cm;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	padding-left: 0.5cm;
	padding-right: 0.1cm;
	padding-top: 0.0cm;
	padding-bottom: 0.0cm;
}
.menuActionRow{
	border-bottom: solid;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: var(--prime_base);
	font-size: 0.5cm;
	border-color: var(--decor_onion);
	border-width: 1px;
	padding-left: 0.5cm;
	padding-right: 0.1cm;
	padding-top: 0.0cm;
	padding-bottom: 0.0cm;
}
.menuActionRow[data-row-selection='yes']{
	border-bottom: none;
	color: var(--grid_base);
	background-color: var(--active_base);
}
.menuFolderRow{
	border-bottom: solid;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: var(--prime_base);
	font-size: 0.5cm;
	border-color: var(--decor_onion);
	border-width: 1px;
	padding-left: 0.5cm;
	padding-right: 0.1cm;
	padding-top: 0.0cm;
	padding-bottom: 0.0cm;
}
.menuFolderRow[data-row-selection='yes']{
	border-bottom: none;
	color: var(--grid_base);
	background-color: var(--active_base);
}

.menuContent {
	margin-top: 1.5cm;
}

#menuButtonImage {
	width: 1cm;
	height: 1cm;
}

.actionSpot {
	fill: var(--active_lite);
	stroke: var(--active_base);
}
.actionSpot1 {
	fill: var(--active_lite);
	stroke: var(--active_base);
	stroke-width: 0.1cm;
}
.actionSpot4 {
	fill: var(--active_lite);
	stroke: var(--active_base);
	stroke-width: 1cm;
}
.actionSpot16 {
	fill: var(--active_lite);
	stroke: var(--active_base);
	stroke-width: 2cm;
}
.actionSpot64 {
	fill: var(--active_lite);
	stroke: var(--active_base);
	stroke-width: 4cm;
}


.lyricsText16 {
	font-size: 10cm;
	fill: var(--decor_base);
}
.lyricsText4 {
	font-size: 8cm;
	fill: var(--decor_base);
}
.lyricsText1 {
	font-size: 4cm;
	fill: var(--decor_base);
}


.knobLabel1 {
	font-size: 1cm;
	fill: var(--prime_base);
}
.knobLabel4 {
	font-size: 10cm;
	fill: var(--prime_base);
}
.knobLabel16 {
	font-size: 20cm;
	fill: var(--prime_base);
}
.knobLabel64 {
	font-size: 30cm;
	fill: var(--prime_base);
}

.selectionBackGround {
	fill: var(--prime_lite);
}

.backGroundFill {
	fill22: radial-gradient(red 5%, green 15%, blue 60%);
	ff:radial-gradient(#e66465, #9198e5);
	fill:url(#bgFillRectangle) blue;
}

/*
https://coolors.co/ccddee-ffffff-000000-115522-226699-660022
*/