/* cyrillic 
@font-face {
    font-family: 'Poiret One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(poiretone/poiretonecyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
*/
/* latin-ext 
@font-face {
    font-family: 'Poiret One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(poiretone/poiretonelatinext.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*/
/* latin 
@font-face {
    font-family: 'Poiret One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(poiretone/poiretonelatin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/
/*
@font-face {
    font-family: 'Roboto';
    src: url(roboto/Roboto-Regular.ttf);
}
*/

/*
@font-face {
	font-family: 'MontserratAlternates-Regular';
	src: url(MontserratAlternates/MontserratAlternates-Regular.ttf);
}*/
/*
@font-face {
	font-family: 'Brahms';
	src: url('ofont.ru_Brahms Gotisch.ttf');
}*/
@font-face {
	font-family: 'MontserratAlternates';
	src: url('MontserratAlternates/MontserratAlternates-Regular.ttf');
}


::-webkit-scrollbar2 {
	display: none;
}

:root {
	--font-ratio2: 1;
	--font-ratio: 1.0;
}

:root {
	--tapSize: 1cm;
}

:root {
	--label-4cm: calc(4.0*var(--font-ratio)*var(--tapSize));
	--label-3cm: calc(3.0*var(--font-ratio)*var(--tapSize));
	--label-2cm: calc(2.0*var(--font-ratio)*var(--tapSize));
	--label-1cm: calc(1.0*var(--font-ratio)*var(--tapSize));
	--label-075cm: calc(0.75*var(--font-ratio)*var(--tapSize));
	--label-05cm: calc(0.5*var(--font-ratio)*var(--tapSize));
	--label-04cm: calc(0.4*var(--font-ratio)*var(--tapSize));
	--label-025cm: calc(0.25*var(--font-ratio)*var(--tapSize));
	--label-0125cm: calc(0.125*var(--font-ratio)*var(--tapSize));

	--icon-4cm: calc(4.0*var(--tapSize));
	--icon-2cm: calc(2.0*var(--tapSize));
	--icon-1cm: calc(1.0*var(--tapSize));
	--icon-075cm: calc(0.75*var(--tapSize));
	--icon-05cm: calc(0.5*var(--tapSize));
	--icon-04cm: calc(0.4*var(--tapSize));
	--icon-033cm: calc(0.33*var(--tapSize));
}

:root {


	--color-debug: #c00;
	/*
	--color-shadow: #00000066;
	--color-background: #000000ff;
	--color-panel: #114466ff;
	--color-focus: #009933ff;
	--color-interactive: #cc6633ff;
	--color-panel: #44ccffff;
	--color-subtext: #99ccccff;
	(((--main-color))): #ddeeffff;
*/
	--background-color: #030900;
	--main-color: #fff;
	--drag-color: #066;
	--line-color: #cff;
	--click-color: #360;

	--click-color50: color-mix(in lab, transparent 50%, var(--click-color));

	--line-color90: color-mix(in lab, transparent 90%, var(--line-color));
	--line-color75: color-mix(in lab, transparent 75%, var(--line-color));
	--line-color50: color-mix(in lab, transparent 50%, var(--line-color));
	--line-color30: color-mix(in lab, transparent 30%, var(--line-color));
	--line-color15: color-mix(in lab, transparent 15%, var(--line-color));
	--line-color6: color-mix(in lab, transparent 6%, var(--line-color));

	--background-color10: color-mix(in lab, transparent 10%, var(--background-color));

	--selectedtime-color22: color-mix(in lab, transparent 85%, var(--line-color));
	--selectedtime-color: color-mix(in lab, transparent 66%, var(--drag-color));
	--selectedbgground-color: color-mix(in lab, transparent 0%, var(--background-color));
	--unselectedbg-color: color-mix(in lab, transparent 0%, var(--background-color));

	--disable-drag-color: color-mix(in lab, transparent 75%, var(--drag-color));
	--disable-click-color: color-mix(in lab, transparent 75%, var(--click-color));

}

:root {
	--fog-color: color-mix(in lab, transparent 10%, var(--background-color));
	--back-color: color-mix(in lab, transparent 3%, var(--background-color));
	--shadow-color: color-mix(in lab, transparent 75%, var(--main-color));
	--plugintitle-color: color-mix(in lab, var(--background-color) 90%, var(--line-color) 10%);
}

#file_midi_input {
	display: none;
}

#file_gp35_input {
	display: none;
}

@keyframes focusFlashFill {
	0% {
		fill: var(--main-color)
	}

	40% {
		fill: var(--main-color)
	}

	60% {
		fill: var(--drag-color)
	}

	80% {
		fill: var(--click-color)
	}

	100% {
		fill: var(--main-color)
	}
}

html {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family2: 'Poiret One';
	font-family2: 'Fontquan-XinYiJiXiangSong-Regular';
	background-color2: #ff0000;
	user-select: none;
background-color2: var(--main-color);
}

body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	touch-action: manipulation;
	background-color2: #ff00ff;
	cursor: grab;
	background-color2: var(--main-color);
	overflow: hidden;
}

#pagediv {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	min-height: 100%;
	background-image2: url("bg/burevestnik.jpg");
	background-repeat2: no-repeat;
	background-size2: cover;
	background-position2: center;
	display: flex;
	flex-direction: column;
	background: var(--background-color);
}

#tileLevelSVG {
	width: 100%;
	user-select: none;
	touch-action: manipulation;
	background-size: cover;
	stroke-linecap: round;
	margin: 0px;
	padding: 0px;
	background2: var(--unselectedbg-color);
	flex-basis: 0;
	flex-shrink: 1;
	flex-grow: 1;

	background-image22: url("bg/blue.png");
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
	background: var(--background-color);
}




.debug {
	fill: var(--color-debug);
	fill-opacity: 30%;
	stroke: var(--color-debug);
	stroke-opacity: 90%;
	stroke-width: 0.3%;
}

.fillShadow {
	fill: var(--shadow-color);
}

.warningAnchor22 {
	cursor: default;
}

.warningBG {
	fill: var(--fog-color);
	cursor: default;
}

.warningIcon {
	font-size222: calc(4*var(--tapSize));
	font-size: var(--icon-4cm);
	fill: var(--line-color);
	text-anchor: middle;
	font-family: 'Material-Design-Iconic-Font';
	pointer-events: none;
}

.warningTitle {
	font-size222: calc(0.75*var(--tapSize));
	font-size: var(--label-075cm);
	fill: var(--main-color);
	text-anchor: middle;
	pointer-events: none;
}

.warningDescription {
	font-size222: calc(0.33*var(--tapSize));
	font-size: var(--label-04cm);
	fill: var(--line-color);
	text-anchor: middle;
	pointer-events: none;
	width2:50%;
}
.warningSmallText {
	font-size222: calc(0.33*var(--tapSize));
	font-size: var(--label-025cm);
	fill: var(--line-color);
	text-anchor: middle;
	pointer-events: none;
	width2:50%;
}

.warningInfoIcon {
	fill: #ff993300;
}


.mixTextFill {
	fill: var(--main-color);
	stroke: none;
}

.mixSubtextFill {
	fill: var(--drag-color);
	stroke: none;
}

.mixFocusFill {
	fill: var(--color-focus);
	stroke: none;
}

.leftPanelBG {
	fill: color-mix(in lab, transparent 15%, var(--color-panel))
}
.gridRollTracks {
	fill: #ffffff01
}