html,
body {
	width: 100vw;
	margin: 0;
	padding: 0;
	background: #FEFEFE;
	font-family: system-ui;
}

.abcjs-stem, path[class=''] {
    stroke: blue;
    fill: blue;
    stroke-width: 2;
    opacity: 1;
    transform: translateX(3px);
}

.abcjs-notehead {
    stroke: blue;
    fill: blue;
    stroke-width: 9;
    opacity: 1;
}



.abcjs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.abcjs-highlight {
	fill: #0a9ecc;
}

.abcjs-cursor {
	stroke: red;
}

path {
	color: #5a8d2f;
}

path {
	color: black;
}

[data-name='lyric']{
	color: #4343c9;
}


[data-name='staff-extra clef']{
    display: none;
}

#helper {
	width: 50%;
	margin-left: 25%;
}

input:valid {
	color: green;
}

input:invalid {
	color: red;
}

#info-box {
	position: absolute;
	transform: rotate(-35deg);
	top: 20px;
}

.display-none {
	display: none;
}

svg {
	cursor: pointer;
}