:root {
	--low-color: #601000;
	--high-color: #d83800;
	--low-color: #60200080;
	--high-color: #932f09;
}

@font-face { font-family: 'MaterialIcons'; src: url('MaterialIcons-Regular.woff2') format('woff2'); }
@font-face { font-family: 'RobotoSlab'; src: url('RobotoSlab-Regular.woff') format('woff'); }
@font-face { font-family: 'RobotoSlab'; src: url('RobotoSlab-Bold.woff') format('woff'); font-weight: bold; }

/* Mobile Scrollbar always visible */
::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 2ex;
}
::-webkit-scrollbar:horizontal {
    height: 2ex;
}
::-webkit-scrollbar-thumb {
    background-color: var(--high-color);
    border-radius: 0px;
    border: none;
}
::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: var(--low-color);
}

*, *::before, *::after {
	box-sizing: border-box;
}

#main {
	position: absolute;
	transform-origin: top left;
	min-width: 36em;
	display: grid;
	padding: 1ex;
}

#Hd {
	grid-area: hd;
	display: grid;
	grid-column-gap: 0.5em;
	margin-bottom: 1em;
	border-bottom: 1px solid gray;
}

#Start {
	grid-area: Combinations;
	min-height: 79vh;
}

#MainSubBtns {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "MainSubBtnsLeft" "MainSubBtnsRight";
	align-items: end;
}

#Back {
	grid-area: Back;
	justify-self: start;
}


#Title { grid-area: Title; overflow: hidden; }


#Hd button svg, #SongControlMessage1 button svg, #CombinationMessage button svg {
	height: 1.4ex;
}


#HdMessage { grid-area: HdMessage; }


#SongControl {
	grid-area: SongControl;
	justify-self: center;
	display: grid;
	align-items: center;
	justify-items: center;
	column-gap: 0.5em;
}


#SongControlPrev { grid-area: scPrev; }
#SongControlNext { grid-area: scNext; }
#SongControlIndex { grid-area: scIndex; }
#SongControlMessage1 { grid-area: scMessage1; text-align: center; }
#SongControlMessage2 { grid-area: scMessage2; text-align: center; }


#SaveSatz {
	margin-bottom: 0.5em;
}


#Songs { grid-area: Songs; }


#EditSongs {
	grid-area: Songs;
	width: 100%;
}

#EditSongs div, #EditCombinations div {
	cursor: move;
	cursor: grab;
}

#EditSongs div.active, #EditCombinations div.active {
	background-color: var(--low-color);
}

#NextSong svg, #GotoSongMenu svg {
	height: 1.4ex;
}

#DestDir {
	grid-area: Songs;
}

#DestDir span, #EditSongs span {
	color: gray;
}

#DestDirMessage {
	grid-area: DestDirMessage;
	text-align: center;
	padding: 0.5ex;
	margin-bottom: 1em;
	border: 5px solid var(--high-color);
  	background-color: var(--low-color);
}

#CombinationMessage {
	grid-area: CombinationMessage;
	text-align: center;
}

#Combinations {
	grid-area: Combinations;
	display: flex;
	flex-flow: row wrap;
}


#EditCombinations {
	grid-area: Combinations;
}


#ClassicControl {
	justify-self: center; 
	display: grid;
	justify-items: center;
	gap: 1ex;
}


#ClassicCounter {
	grid-area: ClassicCounter;
	display: grid;
	grid-template-areas: "up10000 up1000 up100 up10 up1" "cln10000 cln1000 cln100 cln10 cln1" "down10000 down1000 down100 down10 down1";
	justify-items: center;
	align-content: center; 
	gap: 0.3ex;
}

#up\=10000 { grid-area: up10000; }
#up\=1000 { grid-area: up1000; }
#up\=100 { grid-area: up100; }
#up\=10 { grid-area: up10; }
#up\=1 { grid-area: up1; }
#cln10000 { grid-area: cln10000; }
#cln1000 { grid-area: cln1000; }
#cln100 { grid-area: cln100; }
#cln10 { grid-area: cln10; }
#cln1 { grid-area: cln1; }
#down\=10000 { grid-area: down10000; }
#down\=1000 { grid-area: down1000; }
#down\=100 { grid-area: down100; }
#down\=10 { grid-area: down10; }
#down\=1 { grid-area: down1; }


#ClassicInputDigits {
	grid-area: ClassicInputDigits;
	display: grid;
	grid-template-areas: "digits1 digits2 digits3";
	justify-content: center;
	gap: 0.3ex;
	align-content: center;
}


#NumPad {
	grid-area: NumPad;
	display: grid;
	justify-items: center;
	gap: 0.3ex;
	align-content: center; 
}


#ClassicSetzing {
	grid-area: ClassicSetzing;
	font-size: 300%;
}
#num\=M { grid-area: numM; }
#num\=C { grid-area: numC; }
#num\=1 { grid-area: num1; }
#num\=2 { grid-area: num2; }
#num\=3 { grid-area: num3; }
#num\=4 { grid-area: num4; }
#num\=5 { grid-area: num5; }
#num\=6 { grid-area: num6; }
#num\=7 { grid-area: num7; }
#num\=8 { grid-area: num8; }
#num\=9 { grid-area: num9; }
#num\=0 { grid-area: num0; }


#e {
	grid-template-areas: "r0 r1 r2 r3 r4";
	grid-area: e;
	display: grid;
}


#r0 { grid-area: r0; }
#r1 { grid-area: r1; }
#r2 { grid-area: r2; }
#r3 { grid-area: r3; }
#r4 { grid-area: r4; }


#nr {
	font-size: 200%;
	width: 1.5em;
}

#Message {
	width: 100vw;
}

#msgButtons {
	text-align: center;
}

#Public {
	position: absolute;
	transform-origin: top left;
	width: 40em;
	height: 100vh;
	display: grid;
	grid-template-areas: "PublicHeader PublicHeader" "PublicInfo PublicLogin" "Keyboard Keyboard" "PublicX PublicX" "PublicAbout PublicAbout";
	grid-template-columns: auto 1fr ;
	grid-template-rows: auto auto auto 1fr auto; 
}

#PublicHeader {
	grid-area: PublicHeader;
}

#PublicLogin {
	grid-area: PublicLogin;
	margin: 0 2em;
}

#PublicInfo {
	grid-area: PublicInfo;
	margin: 0 2em;
}

#PublicAbout {
	grid-area: PublicAbout;
	margin: 2em 0 0 0;
	padding: 0.5em;
	background-color: var(--low-color);
}

#Keyboard {
	grid-area: Keyboard;
}

#Goto\=SETTINGS, #Goto\=ABOUT, #Logout {
	margin: 0.5ex 0;
}

body {
	background-color: #222;
	color: #fff;
	font-family: RobotoSlab;
	font-size: 2.5vw;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
}

h1 {
	font-size: 150%;
	color: white;
	background-color: var(--low-color);
	margin: 0ex 0ex 0ex 0ex;
	text-align: center;
}

h2 {
	color: white;
	margin-top: 3ex;
}

p {
	line-height: 140%;
}

input, select, button, a {
	font: inherit;
	color: #fff;
	fill: #fff;
	background-color: var(--high-color);
	background-image: none;
	border: none;
	border-radius: 0.4em;
	vertical-align: baseline;
	line-height: 140%;
	margin: 0.2ex;
}

input[type="number"] {
	text-align: center;
	padding: 0.05em 0.05em;
	appearance: textfield;
	-moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type="range"] {
	width: 10em;
	vertical-align: text-bottom;
}

textarea {
	width: 100%;
	height: 100%;
	font-size: 80%;
	white-space: pre;
}

a {
	display: inline-block;
	color: white;
	text-decoration: none;
}

form {
	display: contents;
}

input, select, button, a {
	text-align: start;
	padding: 0.05em 0.3em;
}

input[type="checkbox"] {
	width: 1em;
	height: 1em;
	margin-right: 0.5em;
}

button:hover:not([disabled]), a:hover {
	filter: brightness(130%);
}

button:disabled, a:disabled, input:disabled {
	background-color: var(--low-color);
	fill: #888;
}

#Songs [data-value="0"], #EditSongs [data-value="0"], #DestDir [data-value="0"] {
	margin-top: 1em;
} 

li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.centerBtn {
	display: inline-flex;
	align-items: center;
}

.miniBtn {
	border: none;
	vertical-align: inherit;
	text-align: center;
	height: 1.4ex;
}

.bigBtn {
	width: 5em;
	padding: 0.5em;
}

.lowBtn {
/* 	text-align: left; */
	color: #ccc;
	background-color: var(--low-color);
/* 	margin: 0.2ex 0.4ex; */
}

.mainBtns {
	text-align: center;
}

.mainBtn {
	font-size: 130%;
	text-align: center;
	margin: 1ex 1ex;
	vertical-align: middle;
}


.i, #Hd.i, #ClassicControl.i, #SongControl.i, #Combinations.i, #HdMessage.i, #e.i, .classicDigit.i  {
	display: none;
}

.c {
	text-align: left;
	white-space: nowrap;
	color: #ccc;
	background-color: var(--low-color);
	padding: 0.5ex 1ex;
	margin: 0.2ex 0.4ex;
}

.r {
	width: 9em;
	text-align: left;
	white-space: nowrap;
	color: #ccc;
	background-color: var(--low-color);
	margin: 0.4ex 0.4ex;
}

.s, .onoff.s{
	font-weight: bold;
	color: #fff;
	background-color: var(--high-color);
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.hint {
	padding: 0 1ex;
}

.vspace {
	margin-top: 1.5ex;
}

.classicDigit {
	display: flex;
	width: 3ex;
	padding: 0 0.3em;
	border: 0.2ex solid var(--high-color);
	margin: 0;
	justify-content: center;
	align-items: center;
	font-size: 150%;
}

.classicKey {
	display: flex;
	width: 3ex;
	padding: 0.2ex 0.3em;
	margin: 0;
	justify-content: center;
	align-items: center;
	font-size: 150%;
}

.classicKey:disabled {
	color: #ccc;
}

.classicInputDigits {
	display: flex;
	width: 3.5ex;
	height: 2ex;
	padding: 0 0.3em;
	border-radius:0;
	margin: 0;
	justify-content: center;
	align-items: center;
	font-size: 150%;
}

.onoff {
	color: #ccc;
	background-color: var(--low-color);	
}

.updown {
	width: 4.5ex;
	text-align: center;
	border-radius: 0;
	margin: 0;
}

.batteryLow {
	fill: red;
	height: 1.6em;
	vertical-align: bottom;
	padding-bottom: 0.1em;
}

.btnMargins {
	padding: 0.05em 0;
	margin: 0.2ex 0;
}

.oneLine {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 26em;	
}

.list {
	display: flex;
	flex-flow: row wrap;
  	writing-mode: vertical-lr; /* buggy container-width: flex-flow: column wrap; */
  	row-gap: 1em;
	overflow-x: scroll;
	max-height: 85vh;
}

.list.i {
	display: none;
}

.list div, .list button, .list span {
	writing-mode: initial;
}

.list button {
	width: fit-content;
}

.loginbutton {
	width: 10em;
}

.stacktrace {
	font-size: 80%;
}

.pulse {
	animation: btn 1s infinite;
}

.nowrap {
	text-wrap: nowrap;
}

.materialIcon {
	font-family: "MaterialIcons";
}

.popupstopper {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000000B0;
}

.popup {
	z-index: 2;
	position: absolute;
}

.popup h2 {
	color: var(--high-color);
	margin-top: 1ex;
}

.popup li {
	overflow: initial;
	white-space: break-spaces;
	hyphens: auto;
	margin-bottom: 1ex;
}

.popup.right0 {
	right: 0;
}

.opaque {
	top: 0;
	left: 0;
	height: 96vh;
	width: 96vw;
	padding: 2vh 2vw;
	border: 2px solid var(--high-color);
	margin: 2vh 2vw;
 	overflow-y: scroll;
	background-color: #000;
}

@keyframes btn {   
	0%   { background-color:var(--low-color); }   
	50%  { background-color:var(--high-color); }
	100%   { background-color:var(--low-color); }
}

@media (orientation: portrait) {
	#main {
		grid-template-areas: "hd" "e" "CombinationMessage" "DestDirMessage" "SongControl" "Songs" "Combinations" "ClassicControl" "Keyboard";
	}
	#Start {
	  font-size: 160%;
	}
	#Hd {
		grid-template-columns: 1fr auto;
		grid-template-areas: "Back HdMessage" "Title Title";
		font-size: 125%;
		padding-bottom: 1ex;
	}
	.mainBtns {
		padding-bottom: 3em;
	}
	.mainBtn {
		width: 12em;
		height: 19vh;
	}
	#SongControl {
		grid-template-areas: "scMessage1 scMessage1 scMessage1" "scPrev scIndex scNext" "scMessage2 scMessage2 scMessage2";
		font-size: 220%;
		margin: 1ex 0;
	}
	#SongControlMessage1, #SongControlMessage2 {
		font-size: 65%;
	}
	#CombinationMessage {
		font-size: 180%;
		margin-top: 1ex;
	}
	#Combinations.combinations {
		margin-top: 3ex; 
		border-top: 1px solid gray;
		padding-top: 3ex; 
	}
	#ClassicControl {
		grid-area: ClassicControl;
		grid-template-areas: "ClassicControlPrev ClassicCounter ClassicControlNext" "NumPad NumPad NumPad" "ClassicInputDigits ClassicInputDigits ClassicInputDigits";
	}
	#ClassicSetzing {
		margin: 0 0.2em;
	}
	#NumPad {
		grid-template-areas: "num1 num2 num3 num4 num5 ClassicSetzing numC" "num6 num7 num8 num9 num0 ClassicSetzing numM";
	}
	.werke3 #e, .werke3 #Combinations {
		font-size: 125%;
	}
	#ClassicControl {
		font-size: 145%;
		padding-top: 3ex;
	}
	.werke4 #ClassicControl {
		font-size: 160%;
	}
}

@media (orientation: landscape) {
	#main {
		grid-template-rows: auto auto auto auto 1fr auto;
		grid-template-columns: auto auto 1fr;  
		grid-template-areas: "hd hd hd" "DestDirMessage DestDirMessage DestDirMessage" "Songs Songs Songs" "SongControl e CombinationMessage" "SongControl e Combinations" "Keyboard Keyboard Keyboard";  
		row-gap: 0em;
		align-items: start;
	}
	#Hd {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "Back Title HdMessage";
	}
	#SongControl {
		grid-template-rows: auto auto auto auto auto 1fr;
		grid-template-areas: "scPrev" "scIndex" "scMessage1" "scNext" "scMessage2" "scBottom";
		grid-row-gap: 0.4em;
		margin-right: 1ex;
		border-right: 1px solid gray;
		padding-right: 1ex;
		font-size: 102%; /* an MaxRegister anpassen (mit beiden SongMessages) */
		height: 100%
	}
	#SongControlMessage1, #SongControlMessage2 {
		font-size: 70%;
		width: 8em;
	}
	#SongControlMessage1 button, #SongControlMessage2 button {
		text-align: center;
		width: 7.1em; /* 5em/70% */
	}
	#CombinationMessage {
		margin-left: 1ex;
		border-left: 1px solid gray;
		padding-left: 1ex;
		min-height: 4ex;
	}
	#Combinations.pageCombinations {
		writing-mode: vertical-lr; /* buggy container-width: flex-flow: column wrap; */
		height: 30ex; /* an MaxRegister anpassen: 3.8ex pro Registerzeile */
		margin-left: 1ex;
		border-left: 1px solid gray;
		padding-left: 1ex;
	}
	.c {
		writing-mode: initial;
	}
	#ClassicControl {
		grid-area: SongControl;
		grid-template-areas: "ClassicCounter ClassicCounter" "ClassicControlPrev ClassicControlNext" "NumPad NumPad" "ClassicInputDigits ClassicInputDigits";
		grid-column-gap: 0.1em;
		font-size: 65%; /* an MaxRegister anpassen */
		margin-right: 2em;
	}
	#ClassicControl .bigBtn {
		width: 4em;
	}
	#NumPad {
		grid-template-areas:"ClassicSetzing ClassicSetzing numC" "ClassicSetzing ClassicSetzing numM" "num1 num2 num3"  "num4 num5 num6" "num7 num8 num9" "num0 num0 num0";
		justify-content: center; 
	}
	.mainBtns {
		margin: 2em 0;
	}
	.mainBtn {
		height: 10ex;
		width: 7em;
		hyphens: auto;
	}
	.classicDigits {
		width: auto;
	}
}