@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(font/roboto/roboto-500.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
	margin: 0;
	border: 0;
	padding: 0;
	user-select: none;
	list-style-type: none;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 16px;
	box-sizing: border-box;
}

:root {
	--primary: #C44D58;
	--highlight: #FF6B6B;
	--secondary: #4ECDC4;
	--tertiary: #C7F464;
	--bright: #FFF;
	--grey: #666;
	--dark: #000;
	--dark-highlight: #353535;
}

html, body {
	height: 100%;
	color: var(--bright);
	background: var(--dark);
}

#alerts {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
}

#alerts .alert button {
	float: left;
	margin: -3px 10px 0 0;
	font-size: 20px;
	color: inherit;
	background: transparent;
	cursor: pointer;
}

#alerts .alert button:hover {
	color: #333;
}

#alerts .alert {
	display: block;
	position: relative;
	padding: 9px 25px;
	margin-bottom: 2px;
	border: 1px solid transparent;

	z-index: 99999;
}

#expand {
	display: none;
	position: absolute;
	left: 40px;
	width: 360px;
	padding: 10px 35px 10px 10px;
	z-index: 99;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--dark-highlight);
}

#expand.active {
	background: var(--highlight);
}

.shrunk #expand.visible {
	display: block;
}

main #songs,
main #nav,
main #control {
	cursor: default;
}

main {
	display: grid;
	grid-gap: 0;
	grid-template-columns: 400px auto;
	grid-template-rows: 39px auto 14vw;
	height: 100%;
}

body.hide-mouse main {
	cursor: none;
}

body.hide-preview main #songs {
	grid-row: 2 / span 2;
}

body.hide-preview main #control {
	grid-row: 1 / span 3;
}

body.hide-preview main #preview {
	display: none;
}

body.hide-preview .modal .container .content {
	max-height: 750px;
}

body.hide-preview .modal .container .song textarea {
	max-height: 450px;
}

body.hideTranslation p.translation {
	display: none;
}

.shrunk main {
	grid-template-columns: 60px auto;
}

main #file {
	display: none;
	pointer-events: auto;
}

main #preview {
	grid-row: 3 / 3;
	grid-column: 1 / span 2;
	border-top: 2vw solid;
	border-bottom: 1vw solid;
	z-index: 9999;
	background: var(--dark);
	border-color: var(--dark);
}

main #songs {
	position: relative;
	height: 100%;
	overflow: hidden;
	overflow-y: auto;
	counter-reset: songs;
	background-color: #161616;
}

main.over #songs {
	background-color: #101010;
	border: 4px dashed var(--tertiary);
}

main #songs label {
	position: absolute;
	right: 0 !important;
	bottom: 0;
	left: 0;
	padding: 35px 0;
	background: transparent center center/auto 100% no-repeat;
	cursor: pointer;
}

main #songs li,
.modal .songs li,
.modal .song li {
	display: flex;
}

main #songs li span,
.modal .songs li span,
.modal .song li span {
	position: relative;
	display: block;
	flex-grow: 1;
	padding: 10px 35px 10px 15px;
	cursor: pointer;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

main #songs li:hover {
	background: var(--dark-highlight);
}

main #songs li.active {
	background: var(--primary);
}

main #songs li.active:hover {
	background: var(--highlight);
}

main #songs li.dragged {
	background: var(--secondary);
}

.shrunk main #songs li span {
	padding-left: 50px;
	overflow: visible;
}

.shrunk main #songs li span,
.shrunk main #songs li button {
	visibility: hidden;
	color: var(--bright);
}

.shrunk main #songs li span::before {
	counter-increment: songs;
	content: counter(songs);

	position: absolute;
	display: block;
	top: 3px;
	left: 3px;
	width: 32px;
	padding: 5px 0;
	border: 1px solid;
	text-align: center;
	visibility: visible;
}

main #songs li button,
.modal .songs li button.close,
.modal .song li button.close {
	padding: 0 15px;
	font-size: 16px;
	color: var(--bright);
	background: transparent;
	cursor: pointer;
}

main #songs li button:hover {
	background-color: #555555;
}

main #control {
	position: relative;
	overflow: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	grid-row: 1 / span 2;
	grid-column: 2 / 2;
}

main #control ul.overlay {
	position: fixed;
	top: 25%;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 15px;
}

main #control ul.overlay li {
	position: relative;
	max-width: 0;
	margin-right: -20px;
	padding: 6px 10px;
	white-space: nowrap;
	transition: all .4s;
	font-size: 20px;
	box-sizing: border-box;
	background: var(--highlight);
}

main #control ul.overlay li::before {
	content: '⚠';
	position: absolute;
	width: 40px;
	top: 0;
	left: -40px;
	bottom: 0;
	font-size: 26px;
	text-align: center;
	background: var(--primary);
}

main #control ul.overlay li:hover {
	max-width: 500px;
	margin-right: 0;
}

main #control span {
	position: relative;
	display: block;
	padding: 10px 0;
	clear: both;
	overflow: hidden;
}

main #control span.hidden {
	opacity: .2;
}

main #control span h1 {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 0 10px;
	font-size: 18px;
	writing-mode: vertical-lr;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
}

main #control span h1 {
	writing-mode: sideways-lr;
}

main #control span h1:hover {
	background: var(--highlight);
}

main #control span.active h1 {
	background: var(--primary);
}

main #control span h1 em {
	display: none;
	margin-left: 5px;
	font-style: normal;
}

#content h1 {
	display: none;
}

main #control span.active {
	background-color: #222;
}

main #control span p {
	margin-left: 40px;
	padding: 2px 15px;
	cursor: pointer;
}

main #control span p:hover {
	background: var(--primary);
}

main #control span p.translation {
	color: var(--grey);
}

main #control span p.translation::before {
	content: '[' attr(language) '] ';
}

main #control span p.active {
	background: var(--secondary);
}

main #control span p.overflow::before {
	content: '⚠';
	margin-right: 5px;
	padding: 4px 10px 2px;
	background: var(--primary);
	color: var(--bright);
}

main[theme="boxed"] #control {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

main[theme="boxed"] #control .wrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	gap: 20px 10px;
	padding: 10px 15px;
}

main[theme="boxed"] #control span {
	flex-grow: 1;
	padding: 0 0 10px;
	border: 1px solid;
	border-color: var(--primary);
}

main[theme="boxed"] #control span.active {
	border-color: var(--secondary);
}

main[theme="boxed"] #control span.active h1 {
	background: var(--secondary);
}

main[theme="boxed"] #control span h1 {
	position: static;
	margin-bottom: 10px;
	padding: 8px 0;
	writing-mode: horizontal-tb;
	background: var(--primary);
}

main[theme="boxed"] #control span h1 em {
	display: inline;
}

main[theme="boxed"] #control span p {
	margin: 0;
}

main[theme="calibration"] #preview {
	border-color: var(--primary);
}

main #nav {
	position: relative;
	display: flex;
	flex-direction: row;
	z-index: 99;
	background-color: #161616;
}

main #nav > li {
	background-color: #161616;
}

main #nav > li:not(.fill),
main #control li {
	display: inline-block;
	padding: 10px 15px;
	cursor: pointer;
}

main #nav > li,
main #nav.search #search button.all {
	width: 39px;
	height: 39px;
	opacity: 1;
	background: transparent center center/20px 20px no-repeat;
}

main #nav.search #search button.all:hover {
	background-color: var(--dark-highlight);
}

.shrunk main #nav > :not(:first-child) {
	display: none;
}

main #nav li:not(.fill):hover {
	background-color: var(--dark-highlight);
}

main #nav li.sidebar {
	background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeD0iMHB4IiB5PSIwcHgiPjx0aXRsZT5sZWZ0IHNpZGViYXI8L3RpdGxlPjxnIGRhdGEtbmFtZT0ibGVmdCBzaWRlYmFyIj48cGF0aCBkPSJNNywyM0gyYTEsMSwwLDAsMS0xLTFWMkExLDEsMCwwLDEsMiwxSDdaTTIyLDFIOVYyM0gyMmExLDEsMCwwLDAsMS0xVjJBMSwxLDAsMCwwLDIyLDFaIj48L3BhdGg+PC9nPjwvc3ZnPg==');
}

main #nav li.search {
	z-index: 99;
	background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTUxMS45ODcsNDU0LjA4NkwzNzUuNjUsMzE3Ljc0OGMyMS40NTItMzIuNDA0LDMzLjkzNi03MS4xODYsMzMuOTM2LTExMi45MzQgIGMwLTExMy4xMjEtOTEuNjgzLTIwNC44MDUtMjA0Ljc4Ni0yMDQuODA1QzkxLjY5NSwwLjAwOSwwLjAxMyw5MS42OTMsMC4wMTMsMjA0LjgxNGMwLDExMy4wOSw5MS42ODMsMjA0LjgwNSwyMDQuNzg3LDIwNC44MDUgIGM0MS43MzEsMCw4MC41NTktMTIuNTI5LDExMi45MzItMzMuOTY3TDQ1NC4wNjgsNTExLjk5TDUxMS45ODcsNDU0LjA4NnogTTU4LjA0MiwyMDQuODQ1YzAtODEuMDYsNjUuNzE1LTE0Ni43NDUsMTQ2Ljc1OC0xNDYuNzQ1ICBjODEuMDU5LDAsMTQ2Ljc3Myw2NS42ODUsMTQ2Ljc3MywxNDYuNzQ1YzAsODEuMDYxLTY1LjcxNSwxNDYuNzc2LTE0Ni43NzMsMTQ2Ljc3NkMxMjMuNzU3LDM1MS42MjEsNTguMDQyLDI4NS45MDYsNTguMDQyLDIwNC44NDV6ICAiPjwvcGF0aD48L3N2Zz4=');
}

main #nav li.add {
	background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTgwLjE0OCw0MS40ODJINTguNTE4VjE5Ljg1MWMwLTQuNzA0LTMuODEzLTguNTE4LTguNTE4LTguNTE4cy04LjUxOCwzLjgxMy04LjUxOCw4LjUxOHYyMS42MzJIMTkuODUyICBjLTQuNzA0LDAtOC41MTgsMy44MTMtOC41MTgsOC41MThzMy44MTMsOC41MTgsOC41MTgsOC41MThoMjEuNjMxdjIxLjYzMmMwLDQuNzA0LDMuODEzLDguNTE4LDguNTE4LDguNTE4czguNTE4LTMuODEzLDguNTE4LTguNTE4ICBWNTguNTE4aDIxLjYzMWM0LjcwNCwwLDguNTE4LTMuODEzLDguNTE4LTguNTE4Uzg0Ljg1Myw0MS40ODIsODAuMTQ4LDQxLjQ4MnoiPjwvcGF0aD48L3N2Zz4=');
}

main #nav li.active {
	background: var(--primary);
}

main #nav li.active:hover {
	background: var(--highlight);
}

main #nav li.account {
	background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMiIgdmlld0JveD0iMCAwIDMyIDMyIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPmFjY291bnQsIHBlb3BsZSwgYXZhdGFyLCBwZXJzb24tPC90aXRsZT48cGF0aCBkPSJNMTYsMkExNC4wMDE0NCwxNC4wMDE0NCwwLDAsMCw2LDI1LjhjLjMzLjMzLjY3LjY0LDEuMDMuOTRBMTAuNDI3NDUsMTAuNDI3NDUsMCwwLDAsOC4xNiwyNy41OWExMy45NTcxNSwxMy45NTcxNSwwLDAsMCwxNS42ODAwNiwwQTEwLjQyNzQ1LDEwLjQyNzQ1LDAsMCwwLDI0Ljk3LDI2Ljc0Yy4zNjAwNS0uMy43LS42MSwxLjAzLS45NEExNC4wMDE0NCwxNC4wMDE0NCwwLDAsMCwxNiwyWm05LjYsMjEuMmExMC4wMjExNiwxMC4wMjExNiwwLDAsMC02LjE1LTYuNTgsNSw1LDAsMSwwLTYuOSwwQTEwLjAyMTE2LDEwLjAyMTE2LDAsMCwwLDYuNCwyMy4yYTEyLDEyLDAsMSwxLDE5LjIsMFoiPjwvcGF0aD48L3N2Zz4=');
}

main #nav li.shows,
main #nav.search #search button.all {
	background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTgsMTIuNWgzdi0zSDhWMTIuNXogTTgsMTguNWgzdi0zSDhWMTguNXogTTgsMjQuNWgzdi0zSDggIFYyNC41eiBNOCwzMC41aDN2LTNIOFYzMC41eiBNMTMsOS41djNoMTl2LTNIMTN6IE0xMywxOC41aDE5di0zSDEzVjE4LjV6IE0xMywyNC41aDE5di0zSDEzVjI0LjV6IE0xMywzMC41aDE5di0zSDEzVjMwLjV6Ij48L3BhdGg+PC9zdmc+');
}

main #nav li.shows ul li:first-child {
	background: var(--primary);
}

main #nav li.popup {
	border: 5px solid transparent;
	border-right: 0;
	border-left: 0;
	background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9IiIgeD0iMHB4IiB5PSIwcHgiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMS40MTQyMSI+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwtMTQ0LC0xOTIpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDE0NCwxOTIpIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHN0eWxlPSIiIGZpbGw9Im5vbmUiPjwvcmVjdD48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLC0xNDQsLTE5MikiPjxwYXRoIGQ9Ik0xNDUuMDAyLDIxNC4wNjNDMTQ1LjAwMiwyMTAuNzEgMTQ1LDE5Ny40MyAxNDUsMTk0QzE0NS4wMDMsMTkzLjg5NCAxNDUuMDE2LDE5My43OTIgMTQ1LjA0OSwxOTMuNjkxQzE0NS4xNCwxOTMuNDEgMTQ1LjM1NywxOTMuMTc5IDE0NS42MzIsMTkzLjA3QzE0NS43MzEsMTkzLjAzMSAxNDUuODMyLDE5My4wMTIgMTQ1LjkzNywxOTMuMDAyQzE0OS4zMTEsMTkzLjAwMiAxNTIuNjg5LDE5My4wMDIgMTU2LjA2MywxOTMuMDAyQzE1Ni4xNjgsMTkzLjAxMiAxNTYuMjY5LDE5My4wMzEgMTU2LjM2OCwxOTMuMDdDMTU2LjYyMywxOTMuMTcxIDE1Ni44MjksMTkzLjM3NyAxNTYuOTMsMTkzLjYzMkMxNTYuOTY5LDE5My43MzEgMTU2Ljk4OCwxOTMuODMyIDE1Ni45OTgsMTkzLjkzN0MxNTcsMTk2Ljk0NyAxNTcuMDAzLDIwMi45NzIgMTU3LjAwMywyMDIuOTcyQzE1Ny4wMDMsMjAyLjk3MiAxNjMuMDQ1LDIwMi45OTIgMTY2LjA2MywyMDMuMDAyQzE2Ni4xNjgsMjAzLjAxMiAxNjYuMjY5LDIwMy4wMzEgMTY2LjM2OCwyMDMuMDdDMTY2LjYyMywyMDMuMTcxIDE2Ni44MjksMjAzLjM3NyAxNjYuOTMsMjAzLjYzMkMxNjYuOTY5LDIwMy43MzEgMTY2Ljk4OCwyMDMuODMyIDE2Ni45OTgsMjAzLjkzN0MxNjYuOTk5LDIwNy4zMDcgMTY2Ljk5OSwyMTAuNTYyIDE2NywyMTRDMTY2Ljk5NywyMTQuMTA2IDE2Ni45ODQsMjE0LjIwOCAxNjYuOTUxLDIxNC4zMDlDMTY2Ljg2LDIxNC41OSAxNjYuNjQzLDIxNC44MjEgMTY2LjM2OCwyMTQuOTNDMTY2LjI2OSwyMTQuOTY5IDE2Ni4xNjgsMjE0Ljk4OCAxNjYuMDYzLDIxNC45OThDMTYyLjY4MSwyMTQuOTk4IDE0OS4zMzMsMjE1IDE0NiwyMTVDMTQ1Ljg5NCwyMTQuOTk3IDE0NS43OTIsMjE0Ljk4NCAxNDUuNjkxLDIxNC45NTFDMTQ1LjQxLDIxNC44NiAxNDUuMTc5LDIxNC42NDMgMTQ1LjA3LDIxNC4zNjhDMTQ1LjAzMSwyMTQuMjY5IDE0NS4wMTIsMjE0LjE2OCAxNDUuMDAyLDIxNC4wNjNaTTE0NywyMTNMMTU0Ljk3NSwyMTNMMTU0Ljk5NywyMDUuMDI1TDE0NywyMDUuMDAzTDE0NywyMTNaTTE2NSwyMDVMMTU3LjAyNSwyMDVDMTU3LjAyNSwyMDUuMDExIDE1Ny4wMTcsMjEwLjMzNiAxNTcuMDAzLDIxM0wxNjUsMjEzTDE2NSwyMDVaTTE1NSwxOTVMMTQ3LDE5NUwxNDcsMjAyLjk3MkwxNTUsMjAyLjk3MkwxNTUsMTk1Wk0xNjYuMDQ4LDIwMC45OTlMMTU5Ljk1MiwyMDAuOTk5QzE1OS44NDEsMjAwLjk5MSAxNTkuNzMzLDIwMC45NyAxNTkuNjI4LDIwMC45MjhDMTU5LjM2MSwyMDAuODIxIDE1OS4xNDksMjAwLjU5OSAxNTkuMDU1LDIwMC4zMjdDMTU5LjAyNCwyMDAuMjM2IDE1OS4wMDgsMjAwLjE0MyAxNTkuMDAxLDIwMC4wNDhDMTU5LjAwMSwxOTguMDUxIDE1OS4wMDEsMTk1Ljk5NSAxNTkuMDAxLDE5My45NTJDMTU5LjAwOSwxOTMuODQxIDE1OS4wMywxOTMuNzMzIDE1OS4wNzIsMTkzLjYyOEMxNTkuMTc5LDE5My4zNjEgMTU5LjQwMSwxOTMuMTQ5IDE1OS42NzMsMTkzLjA1NUMxNTkuNzY0LDE5My4wMjQgMTU5Ljg1NywxOTMuMDA4IDE1OS45NTIsMTkzLjAwMUMxNjEuOTg0LDE5My4wMDEgMTY0LjAxNiwxOTMuMDAxIDE2Ni4wNDgsMTkzLjAwMUMxNjYuMTQzLDE5My4wMDggMTY2LjIzNiwxOTMuMDI0IDE2Ni4zMjcsMTkzLjA1NUMxNjYuNTk5LDE5My4xNDkgMTY2LjgyMSwxOTMuMzYxIDE2Ni45MjgsMTkzLjYyOEMxNjYuOTcsMTkzLjczMyAxNjYuOTkxLDE5My44NDEgMTY2Ljk5OSwxOTMuOTUyQzE2Ni45OTksMTk1Ljk4NCAxNjYuOTk5LDE5OC4wMTYgMTY2Ljk5OSwyMDAuMDQ4QzE2Ni45OTIsMjAwLjE0MyAxNjYuOTc2LDIwMC4yMzYgMTY2Ljk0NSwyMDAuMzI3QzE2Ni44NTEsMjAwLjU5OSAxNjYuNjM5LDIwMC44MjEgMTY2LjM3MiwyMDAuOTI4QzE2Ni4yNjcsMjAwLjk3IDE2Ni4xNTksMjAwLjk5MSAxNjYuMDQ4LDIwMC45OTlaTTE2NSwxOTVMMTYxLDE5NUwxNjEsMTk5TDE2NSwxOTlMMTY1LDE5NVoiPjwvcGF0aD48L2c+PC9nPjwvZz48L3N2Zz4=');
}

main #nav li.popup.hide-background {
	border-bottom-color: var(--secondary);
}

main #nav li.popup.hide-text {
	border-top-color: var(--tertiary);
}

main #nav li.mouse {
	border: 5px solid transparent;
	border-right: 0;
	border-left: 0;
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNzUycHgiIGhlaWdodD0iNzUycHgiIHZpZXdCb3g9IjAgMCA3NTIgNzUyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA3NTIgNzUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zNjUuNjM4LDUwNS4zNTNsLTkyLjc2MywxMjguMjMyYy0xMC45MTIsMTkuMDk3LTM4LjE5OSwxMy42NC00MC45MjctOC4xODRMMTE0LjYzMyw4Mi40NjINCgljLTIuNzI4LTIxLjgyNCwxOS4wOTYtMzguMTk4LDM1LjQ3LTI3LjI4Nkw2MjQuODMsMzQxLjY0OGMxOS4wOTYsMTAuOTEyLDE2LjM2OCwzOC4xOTctNS40NTYsNDMuNjUzbC0xNTUuNTE3LDQ2LjM4MQ0KCWwxNDEuODY4LDE5MC45NzhjOC4xODUsMTAuOTEyLDUuNDU2LDI0LjU1OC0yLjcyOSwzMi43NDJsLTY4LjIwNSw0OS4xMDhjLTEwLjkxMiw4LjE4NC0yNC41Niw1LjQ1Ni0zMi43NDItNS40NTdsLTEzNi40MTctMTkzLjcxDQoJTDM2NS42MzgsNTA1LjM1M3oiLz4NCjwvc3ZnPg0K');
}

main #nav.search li.search {
	background-color: var(--highlight);
}

body.hide-mouse main #nav li.mouse {
	border-top-color: var(--tertiary);
}

main #nav li.config {
	background-image: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB2ZXJzaW9uPSIxLjEiIHN0eWxlPSJzaGFwZS1yZW5kZXJpbmc6Z2VvbWV0cmljUHJlY2lzaW9uO3RleHQtcmVuZGVyaW5nOmdlb21ldHJpY1ByZWNpc2lvbjtpbWFnZS1yZW5kZXJpbmc6b3B0aW1pemVRdWFsaXR5OyIgdmlld0JveD0iMCAwIDMzMyAzMzMiIHg9IjBweCIgeT0iMHB4IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgCiAgICAuZmlsMCB7ZmlsbDojZmZmZmZmfQogICAKICA8L3N0eWxlPjwvZGVmcz48Zz48cGF0aCBjbGFzcz0iZmlsMCIgZD0iTTE5NCAyODVsLTQgNDAgLTQ3IDAgLTQgLTQwYy0xMywtMyAtMjYsLTggLTM3LC0xNWwtMzAgMjUgLTM0IC0zMyAyNSAtMzFjLTcsLTExIC0xMiwtMjQgLTE1LC0zN2wtNDAgLTQgMCAtNDcgNDAgLTRjMywtMTMgOCwtMjYgMTUsLTM3bC0yNSAtMzAgMzQgLTM0IDMwIDI1YzExLC03IDI0LC0xMiAzNywtMTVsNCAtNDAgNDcgMCA0IDQwYzEzLDMgMjYsOCAzNywxNWwzMSAtMjUgMzMgMzQgLTI1IDMwYzcsMTEgMTIsMjQgMTUsMzdsNDAgNCAwIDQ3IC00MCA0Yy0zLDEzIC04LDI2IC0xNSwzN2wyNSAzMSAtMzMgMzMgLTMxIC0yNWMtMTEsNyAtMjQsMTIgLTM3LDE1em0tMjcgLTE4NWMzNywwIDY3LDMwIDY3LDY3IDAsMzcgLTMwLDY3IC02Nyw2NyAtMzcsMCAtNjcsLTMwIC02NywtNjcgMCwtMzcgMzAsLTY3IDY3LC02N3oiPjwvcGF0aD48L2c+PC9zdmc+');
}

main #nav li.fill {
	flex-grow: 1;
}

main #nav #search {;
	position: absolute;
	left: 40px;
	right: 0;
	z-index: 9;
}

main #nav #search input {
	position: absolute;
	width: 0;
	height: 39px;
	cursor: text;
	user-select: auto;
	transition: width .2s, padding .2s;
	color: var(--bright);
	background: var(--highlight);
}

main #nav #search ul {
	display: none;
	position: absolute;
	top: 39px;
	right: 0;
	left: -40px;
	cursor: pointer;
	user-select: auto;
	z-index: 9999;
	background: var(--highlight);
}

main #nav #search ul li {
	padding: 10px 15px;
}

main #nav #search ul li:first-child {
	border-top: 3px solid var(--primary);
}

main #nav #search ul li:hover {
	background: var(--primary);
}

main #nav #search input:focus + ul {
	display: block;
}

main #nav.search #search input {
	width: 100%;
	padding: 0 45px;
}

main #nav #search button.all {
	position: absolute;
	right: 0;
	cursor: pointer;
	opacity: 0;
	transition: opacity .6s;
}

main #preview,
#content {
	overflow: hidden;
	text-align: center;
	opacity: 1;
	transition: opacity .4s;
	scroll-behavior: smooth;
}

main #preview p,
#content p {
	font-size: 3.5vw;
	line-height: 5.5vw;
	scroll-snap-align: end;
}

main #preview.hide-text,
#content.hide-text,
.hide-text #content {
	opacity: 0;
}

main #preview p,
#content p {
	white-space: nowrap;
}

#content p.translation {
	margin: -2vh 0 2vh;
	font-size: .8em;
	font-style: italic;
	color: var(--secondary);
}

#content p.preview {
	margin-top: 2vh;
	color: #444;
}

#content p.preview.translation {
	margin-top: -2vh;
	color: #666;
}

#content p.translation + p.translation {
	margin-top: -4vh;
}

main #control p.fill,
main #preview p.fill,
#content p.fill {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

main #preview p.copyright {
	display: flex;
	flex-direction: column;
	height: 11vw;
	padding-bottom: 1vw;
	font-size: 1.4vw;
	line-height: 1.6vw;
	align-items: center;
	justify-content: end;
	white-space: pre-line;
}

main #preview p.copyright strong {
	margin-bottom: 1vw;
	font-size: 2vw;
}

main #preview p.copyright small {
	font-size: 0.9vw;
	line-height: 1vw;
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	z-index: 999;
	pointer-events: none;
}

.modal.show {
	display: block;
}

.modal .background {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .65);
}

.modal .container {
	position: relative;
	margin: auto;
	min-width: 200px;
	transition: margin-top ease-in .4s;
	pointer-events: auto;
}

.modal.show .container {
	margin-top: 39px;
}

.modal .container header,
.modal .container footer {
	min-height: 30px;
	padding: 5px 16px;
	background: var(--highlight);
}

.modal .container header button {
	position: absolute;
	right: 0;
	top: 0;
	padding: 8px 16px;
	background: inherit;
	color: inherit;
	font-size: 12px;
	cursor: pointer;
}

.modal .container header button:hover {
	background: var(--primary);
}

.modal .container footer button {
	margin-right: 8px;
	padding: 7px 10px;
	color: inherit;
	cursor: pointer;
	background: var(--primary);
}

.modal .container footer button:hover {
	background: var(--highlight);
}

.modal .container .content {
	min-height: 100px;
	max-height: 380px;
	padding: 5px 15px 0;
	overflow-y: auto;
	background-color: #222;
}

.modal .container .content.resizable {
	resize: vertical;
}

.modal input,
.modal textarea {
	user-select: auto;
}

.modal .song .close {
	display: none;
}

.modal .song.remove .close {
	display: block;
}

.modal .song ul.order {
	margin: 0 -5px;
	padding-top: 10px;
}

.modal .song ul.order li {
	display: inline-block;
	margin: 0 5px 10px;
	cursor: pointer;
}

.modal .song ul.order li button {
	color: var(--bright);
}

.modal .songs li {
	background: var(--dark-highlight);
}

.modal .songs li button.close,
.modal .song li button.close {
	color: inherit;
	background: none;
	font-size: 16px;
	cursor: pointer;
}

.modal .song {
	display: grid;
	grid-template-columns: 250px auto;
}

.modal .song .info {
	display: flex;
	gap: 5px;
}

.modal .song .info button {
	padding: 5px 10px;
	color: var(--bright);
	background: var(--primary);
	cursor: pointer;
}

.modal .song .info button:hover {
	background: var(--highlight);
}

.modal .song .info.title button.title,
.modal .song .info.authors button.authors,
.modal .song .info.copyright button.copyright {
	background: var(--dark-highlight);
}

.modal .song .info input {
	display: none;
	padding: 8px 10px;
	flex-grow: 1;
}

.modal .song .info.title input.title,
.modal .song .info.authors input.authors,
.modal .song .info.copyright input.copyright {
	display: block;
}

.modal .song ul.options {
	grid-row: 1 / span 3;
	margin-right: 15px;
}

.modal .song ul.options li {
	margin-bottom: 2px;
	background: var(--primary);
}

.modal .song ul.options li:hover {
	background: var(--highlight);
}

.modal .song ul.options li:last-child,
.modal .song ul.options li:hover:last-child {
	gap: 5px;
	background: transparent;
}

.modal .song ul.options li.active,
.modal .song ul.options li.active:hover,
.modal .song ul.options li:last-child button:hover {
	background: var(--dark-highlight);
}

.modal .song ul.options li:last-child button {
	flex-grow: 1;
	padding: 5px;
	text-align: center;
	cursor: pointer;
	color: var(--bright);
	background: var(--primary);
}

.modal .song ul.options li button:hover {
	color: var(--bright);
}

.modal .song ul.options li:last-child button.add:hover {
	background: var(--tertiary);
}

.modal .songs li span,
.modal .song ul.options li span {
	padding: 5px 35px 5px 15px;
}

.modal .song ul.order li {
	display: inline-flex;
	background: var(--primary);
}

.modal .song ul.order li:hover {
	background: var(--highlight);
}

.modal .song ul.order li.add,
.modal .song ul.order li:hover {
	background: var(--dark-highlight);
}

.modal .song ul.order li span {
	padding: 5px 10px;
}

.modal .song ul.order li .add:hover {
	background: var(--tertiary);
}

.modal .song textarea {
	display: flex;
	height: 130px;
	min-height: 90px;
	max-height: 300px;
	margin-top: 5px;
	padding: 8px 10px;
	resize: vertical;
	user-select: auto;
}

.modal .login input {
	width: 100%;
	margin: 5px 0;
	padding: 10px 15px;
}

.modal .shows li {
	position: relative;
	display: block;
	padding: 7px 15px;
	margin-bottom: 5px;
	cursor: pointer;
	background: var(--dark-highlight);
}

.modal .shows li:hover {
	background-color: #555555;
}

.modal .songs li {
	margin-bottom: 5px;
}

.modal .songs li:hover {
	background: var(--primary);
}

.modal .songs li button.close:hover,
.modal .song li button.close:hover {
	background-color: #555555;
}

.modal .shows li button {
	position: absolute;
	top: 4px;
	right: 5px;
	width: 26px;
	height: 26px;
	color: var(--bright);
	background: transparent center center/20px 20px no-repeat;
	cursor: pointer;
}

.modal .shows li button:hover {
	background-color: var(--primary);
}

main #songs label,
.modal .shows li button.upload {
	right: 35px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDY0IDY0IiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPmNsb3VkLXVwPC90aXRsZT48cGF0aCBkPSJNMjUuMzMzIDkuMzMzYy05LjU3MyAwLTE3LjMzMyA3LjczMy0xNy4zMzMgMTcuMzMzIDAgMC0wLjAwMS0wLjAwMSAwIDAuMjY2LTQuNzU3IDIuNC04IDcuMjAxLTggMTMuMDY4IDAgOCA2LjU2NiAxNC42NjcgMTQuNjY3IDE0LjY2N2gzNmM3LjM2MyAwIDEzLjMzMy02LjEzMyAxMy4zMzMtMTMuMzMzIDAtNS42LTMuNDU5LTEwLjM5OC04LjMzMy0xMi41MzEgMC4xODktMC41MzMgMC4zMzMtMS4zMzUgMC4zMzMtMi4xMzUgMC01LjMzMy00LjE3OS05LjMzMy05LjMzMy05LjMzMy0yLjEyOCAwLTQuMDk2IDAuNTMxLTUuNjY3IDEuODY1LTIuNzgxLTUuODY3LTguNzUyLTkuODY1LTE1LjY2Ny05Ljg2NXpNMzIgMjIuNjY3bDEwLjY2NyAxMy4zMzNoLTUuMzMzdjEzLjMzM2gtMTAuNjY3di0xMy4zMzNoLTUuMzMzeiI+PC9wYXRoPjwvc3ZnPg==");
}

.modal .shows li button.setList {
	right: 65px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayINCiAgICAgd2lkdGg9IjUwMHB4IiBoZWlnaHQ9IjUwMHB4IiB2aWV3Qm94PSIwIDAgOTMgOTMiPg0KDQogICAgPHBhdGggZmlsbD0iI0ZGRkZGRiINCiAgICAgICAgICBkPSJNMTMuNTcsMTMuNTdhNDYuMDYsNDYuMDYsMCwwLDAtMTIsMjAuNzcuNS41LDAsMCwwLC44My40OEwxOC42MiwxOC42MmEzOS4xNywzOS4xNywwLDAsMSw1NS0uMzYuNDkuNDksMCwwLDAsLjcsMGw0LjM1LTQuMzVhLjUxLjUxLDAsMCwwLDAtLjcyQTQ2LjMyLDQ2LjMyLDAsMCwwLDEzLjU3LDEzLjU3WiINCiAgICAvPg0KICAgIDxwYXRoIGZpbGw9IiNGRkZGRkYiDQogICAgICAgICAgZD0iTTUzLjc5LDUzLjc5YTEwLjU4LDEwLjU4LDAsMSwxLS4zMy0xNS4yOS41LjUsMCwwLDAsLjY5LDBsNC4zNC00LjM1YS41MS41MSwwLDAsMCwwLS43MiwxNy43MywxNy43MywwLDAsMC0yNC43LjM2aDBsLTMwLDMwYS41MS41MSwwLDAsMC0uMTEuNTUsNDYuMTYsNDYuMTYsMCwwLDAsMyw1Ljc5LjUxLjUxLDAsMCwwLC43OS4wOUwyOS4xNCw0OC41QzI5LDUyLjI3LDMxLDU2LDMzLjc4LDU4Ljg1YTE3LjY2LDE3LjY2LDAsMCwwLDI1LjA3LDBsMzAtMzBhLjQ5LjQ5LDAsMCwwLC4xLS41NCw0Ni4wOSw0Ni4wOSwwLDAsMC0zLTUuODEuNTEuNTEsMCwwLDAtLjc5LS4wOVoiDQogICAgLz4NCiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIg0KICAgICAgICAgIGQ9Ik0yOC43MiwyOC43NGgwYTI0Ljg4LDI0Ljg4LDAsMCwxLDM0LjgzLS4zNC40OS40OSwwLDAsMCwuNjksMEw2OC42LDI0YS41MS41MSwwLDAsMCwwLS43MiwzMiwzMiwwLDAsMC00NC45NC4zN0wuMTUsNDcuMTlhLjUxLjUxLDAsMCwwLS4xNS4zNyw0Ni41OCw0Ni41OCwwLDAsMCwuODksNy45MS41LjUsMCwwLDAsLjg1LjI1bDI3LTI3WiINCiAgICAvPg0KICAgIDxwYXRoIGZpbGw9IiNGRkZGRkYiDQogICAgICAgICAgZD0iTTI4LjczLDYzLjkxYTI0LjgsMjQuOCwwLDAsMS0xLjkzLTIuMTcuNDkuNDksMCwwLDAtLjc0LDBsLTQuMzcsNC4zN2EuNS41LDAsMCwwLDAsLjY4Yy42My43NywxLjMxLDEuNTEsMiwyLjIzYTMyLDMyLDAsMCwwLDQ1LjI3LDBMOTIuNDksNDUuNGEuNTEuNTEsMCwwLDAsLjE1LS4zOCw0Ni41NCw0Ni41NCwwLDAsMC0uOS03Ljg4LjUuNSwwLDAsMC0uODUtLjI1bC0yNywyN0EyNC44NiwyNC44NiwwLDAsMSwyOC43Myw2My45MVoiDQogICAgLz4NCiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIg0KICAgICAgICAgIGQ9Ik0xOC42Miw3NGMtLjctLjctMS4zNS0xLjQyLTItMi4xNWEuNS41LDAsMCwwLS43MywwbC00LjM2LDQuMzZhLjUuNSwwLDAsMCwwLC42OGMuNjUuNzUsMS4zMywxLjQ4LDIsMi4xOUE0Ni4zNSw0Ni4zNSwwLDAsMCw5MS4xLDU4LjIzYS41LjUsMCwwLDAtLjg0LS40OUw3NCw3NEEzOS4wOCwzOS4wOCwwLDAsMSwxOC42Miw3NFoiDQogICAgLz4NCjwvc3ZnPg0K);
}

.modal table.config {
	width: 100%;
	margin: 10px 0;
	border-spacing: 0;
	text-align: left;
}

.modal table.config tr:nth-child(2n + 1) {
	background: var(--dark-highlight);
}

.modal table.config tr:hover {
	background: var(--primary);
}

.modal table.config th,
.modal table.config td {
	padding: 10px 15px;
}

.modal table.config td[reset="true"] {
	opacity: .2;
}

.modal footer {
	width: 100%;
}

.modal.show footer button {
	flex-grow: 1;
}

.modal .hidden {
	position: absolute;
	left: -99999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.close::after {
	content: '×';
}

.add::after {
	content: '+';
}

.delete::after {
	content: '-';
}

#content {
	margin: 1vw 0 .5vw;
	padding: 20px 0;
	font-size: 4vw;
	line-height: 6vw;
}

#content.copyright {
	bottom: 0;
	transition: opacity .4s;
	transition-delay: 4s;
}

#content.copyright p {
	display: flex;
	flex-direction: column;
	padding-bottom: 1vw;
	align-items: center;
	justify-content: end;
	white-space: pre-line;
	font-size: 1.4vw;
	line-height: 1.8vw;
}

#content.copyright p strong {
	margin-bottom: 2vw;
	font-size: 3vw;
	line-height: 3.5vw;
}

#content.copyright p small {
	padding: .5vw 0;
	font-size: 1vw;
	line-height: 1.2vw;
}

#alerts .alert.success {
	color: #155724;
	background-color: #D4EDDA;
	border-color: #C3E6CB;
}

#alerts .alert.warning {
	color: #856404;
	background-color: #FFF3CD;
	border-color: #FFEEBA;
}

#alerts .alert.error {
	color: #721C24;
	background-color: #F8D7DA;
	border-color: #F5C6CB;
}

@supports not (-webkit-touch-callout: none) {
	main #songs label {
		display: none;
	}
}