/* === Allgemeine Designregeln === */

:root {
  --color_front:        #222;
  --color_back:         #EEE;
  --color_accent:       #15A;
  --color_accent-light: #27D;
}

body {
	font: 1.1em "Source Sans 3";
	background: var(--color_back); color: var(--color_front);
	padding: 0em 0em 0em 15em;
	margin: 0em;
	box-sizing: border-box;
}

form {
	margin: 0em;
}

abbr {
	cursor: help;
}

*[class^="filled-"]:before, *[class*=" filled-"]:before,
*[class^="regular-"]:before, *[class*=" regular-"]:before {
	font-size: 1.4em; vertical-align: -0.25em; margin-right: 0.1em;
}


/* = Überschriften = */

main {
	padding: 0em; margin: 0em;
}
main > div {
	padding: 0em 1em 1em 1.5em;
}

header {
	/*position: sticky; top: 0em;*/
	margin: 0em; padding: 1em 1em 1em 1.5em;
	background: var(--color_back);
}
h1 {
	font-size: 2em; font-weight: 600;
	margin: 0em 0em 0.5em; padding: 0em;
	color: inherit;
}
h2 {
	font-size: 1.2em; font-style: italic; font-weight: 600;
	padding: 1em 0.0em 0.5em; margin: 0em;
	color: #15C;
}



/* == Navigation == */

nav {
	position: fixed; top: 0em; left: 0em;
	width: 15em; height: 100%; padding-right: 0.0em;
	background: var(--color_accent);
}
nav > .logo {
	display: flex; justify-content: center;
	align-items: center; column-gap: 0.5em;
}
nav > .logo > span:first-child {
	text-align: right; font-size: 3.0em; font-weight: 200;
}
nav > .logo > span:last-child {
	text-align: left; font-size: 0.8em; font-weight: 300; line-height: 1em;
}
nav > .title {
	font-size: 1em; font-weight: 600;
	text-align: center; margin-bottom: 1em;
}

nav i[class^="filled-"]:before, nav i[class*=" filled-"]:before,
nav i[class^="regular-"]:before, nav i[class*=" regular-"]:before {
	margin-right: 0.3em;
}

nav a, nav div {
	display: block;	width: 100%;
	color: #FFF;
	text-decoration: none;
	font-weight: 400;
	padding: 0.2em 0.5em;
	box-sizing: border-box;
}
nav a:hover {
	text-decoration: none;
	color: #FFF;
	background: #27D;
}
nav a.active {
	text-decoration: none;
	font-weight: 800;
}
nav .subpanel {
	background: #049;
	padding: 0em; margin: 0em;
}
nav .subpanel > a {
	padding-left: 2.2em;
}
nav div.footer {
	font-size: 0.7em;
	text-align: center;
	position: fixed; bottom: 0;
	width: 20em;
	padding: 0.6em;
}

/* == Menü == */

menu {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 1em;
	margin: 1em 0em 0em; padding: 0em;
}

menu a, menu button, menu form > label {
	font: inherit; font-weight: 600; white-space: nowrap;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	color: var(--color_back); background: var(--color_accent);
	border: solid 1pt var(--color-accent); border-radius: 1em;
	padding: 0.3em 0.6em;
}
menu a:hover, menu button:hover, menu form > label:hover {
	background: var(--color_accent-light);
}
menu input, menu select {
	font: inherit; font-weight: 600; 
	display: inline-block;
	color: inherit; background: #FFF;
	border: solid 1pt #888; border-radius: 1em;
	padding: 0.2em 0.6em;
}

menu form {
	display: flex; margin: 0;
}
menu form > button:last-child {
	border-radius: 0em 1em 1em 0em; padding-left: 0.3em;
}
menu form > input:first-child {
	border-radius: 1em 0em 0em 1em; border-right: none;
}



/* === Tabellen === */



/* = Standard-Tabelle = */

table.list {
	font-size: inherit;
	border-collapse: collapse;
	overflow: auto;
}

/* Tabellenkopf */

@media screen {
	.list > thead {
		position: sticky; top: 0em; z-index: 1; background: #EEE;
	}
}
.list th a.sort:hover {
	color: inherit; cursor: pointer;
}
.list th a.sort > i[class^="regular-"] {
	display: none;
}
.list th a.sort:hover > i {
	color: inherit; display: inline;
}
.list th a.sort i.sorthidden {
	visibility: hidden;
}
.list th a.sort:hover > i[class^="filled-"] {
	display: none;
}


.list > thead > tr:last-child > th {
	height: 2px; background: #888; box-sizing: border-box; padding: 0em;
}

.list th {
	height: 2em;
	padding: 0.1em 0.4em;
	box-sizing: border-box;
	text-align: left;
}
.list td {
	border-bottom: solid 1pt #CCC;
	height: 2em;
	padding: 0.1em 0.4em;
	box-sizing: border-box;
	text-align: left;
	white-space: nowrap;
}
.list tr:nth-child(2n) {
  background-color: #E8E8E8;
}
.list.row_group_2 tr:nth-child(2n) td {
  border-bottom: solid 1pt #888;
}
.list.row_group_3 tr:nth-child(3n) {
  background-color: #E8E8E8;
}
.list.row_group_3 tr:nth-child(3n) {
  background-color: #E2E2E2;
}
.list.row_group_3 tr:nth-child(3n) td {
  border-bottom: solid 1pt #888;
}

.list i[class^="filled-"]:before, .list i[class*=" filled-"]:before,
.list i[class^="regular-"]:before, .list i[class*=" regular-"]:before {
	font-size: 1.2em; margin: 0;
}

.list a, .list button {
	cursor: pointer;
	color: inherit;
	font-size: inherit;
	text-decoration: none;
	border: none; padding: 0em;
}
.list a:hover, .list button:hover {
	color: var(--color_accent);
}

.list td.border_right, .list th.border_right {
	border-right: solid 1pt #888;
}
.list td.border_left, .list th.border_left {
	border-left: solid 1pt #888;
}

/* Input-Felder */

.list td:has(input,select,textarea) {
	padding: 0.0em 0.1em;
}
.list td > input, .list td > select {
	font: inherit;
	border: solid 1pt #CCC;
	width: 100%;
	background: #FFF;
	padding: 0.1em 0.3em;
	box-sizing: border-box;
}



table.relation {
	font-size: inherit;
	border-collapse: separate;
	border-spacing: 0em 0.3em;
	overflow: auto;
}

.relation th {
	border: solid 1pt #888; border-radius: 1em 0em 0em 1em;
	text-align: right;
	background: #DDD;
	padding: 0.1em 0.4em;
}
.relation td {
	border: solid 1pt #888;
	border-left: none; border-right: none; 
	text-align: left;
	background: #FFF;
	padding: 0.1em 0.4em;
}
.relation td:last-child {
	border: solid 1pt #888; border-radius: 0em 1em 1em 0em;
	border-left: none;
}
.relation td:has(input,label) {
	padding: 0em;
}


.relation td > input {
	font: inherit;
	border: none; border-radius: 0em 1em 1em 0em; padding-left: 0.3em;
	width: 100%;
	background: #FFF;
	padding: 0.1em 0.3em;
	box-sizing: border-box;
}
.relation td > label {
	font: inherit; font-weight: 600; white-space: nowrap;
	display: block;
	box-sizing: border-box;
	text-decoration: none;
	cursor: pointer;
	color: var(--color_back); background: var(--color_accent);
	border-radius: 0em 0.9em 0.9em 0em; border: none;
	width: 100%; height: 100%;
	padding: 1em 0em;
	text-align: center;
}
.relation td > label > i {
	vertical-align: middle;
}






h1 span.box {
	font-size: 0.8em;
}

span.box {
	display: inline-block; text-align: center;
	width: 1.4em; margin-right: 0.3em; margin-left: 0.3em;
	color: #FFF; font-weight: bold;
	border-radius: 0.3em; line-height: 1.25em;
}
span.box.gender_m {
	background: #09D;
}
span.box.gender_f {
	background: #D0B;
}
span.box.age_50, span.box.age_0 {
	background: #8B0;
}
span.box.age_60 {
	background: #EA0;
}
span.box.age_70 {
	background: #E60;
}



div.page_header {
	display: none;
}
div.page_title {
	display: none;
}
div.page_footer {
	display: none;
}

.printer-only {
	display: none;
}




/*
.list tfoot {
	font-weight: bold;
	position: sticky; bottom: -0.1em; z-index: 1; background: #EEE;
}
.list tfoot td {
	border: none;
}
.list > tfoot > tr:first-child > td {
	height: 2px; background: #888; box-sizing: border-box; padding: 0em;
}

.list a:not(:has(i)) {
	text-decoration: 1pt underline dashed #888;
	text-underline-offset: 0.2em;
}
.list a:not(:has(i)):hover {
	font-weight: 600; letter-spacing: -0.013em;
	text-decoration: underline solid #37E;
	text-underline-offset: 0.2em;
}
.list a i[class^="filled-"]:before, .list a i[class*=" filled-"]:before,
.list a i[class^="regular-"]:before, .list a i[class*=" regular-"]:before {
	font-size: 1.2em; margin: 0;
}
.list a i[class^="filled-toggle"]:before, .list a i[class*=" filled-toggle"]:before,
.list a i[class^="regular-toggle"]:before, .list a i[class*=" regular-toggle"]:before {
	font-size: 1.7em;
}




.list a > svg{
	width: 1.2em; height: 1.2em; vertical-align: -0.3em;
}
.list a > svg > path {
	fill: #222; stroke: none;
}
.list a:hover > svg > path {
	fill: #37E; stroke: none;
}

.list td.check svg {
	width: 1.4em; height: 1.4em;
	cursor: pointer;
}
.list td.check svg[data-checked="1"] path {
	fill: #15C; stroke: none;
}
.list td.check svg[data-checked="0"] path {
	fill: #222; stroke: none;
}
.list td.check svg:hover path {
	fill: #37E; stroke: none;
}
.list td > input[readonly] {
	background: #EEE;
}
.list td > input, .list td > select {
	font: inherit;
	border: solid 1pt #CCC;
	width: 100%;
	background: #FFF;
	padding: 0.1em 0.3em;
	box-sizing: border-box;
}
.list td > select {
	padding: 0.0em 0.3em;
}
.list td > input[type="date"] {
	padding: 0.0em 0.2em;
}
.list td > input[type="number"] {
	padding-left: 1em;
}
.list td:has(input,select,textarea,button) {
	padding: 0.0em 0.1em;
}
.list td > button {
	padding: 0.0em; text-align: center;
	height: 100%; width: 100%;
}

.list td > div.buttonfield {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
.list td > div.buttonfield > button {
	font: inherit;
	padding: 0.2em;
	border: none; border-radius: 0em 0.5em 0.5em 0em;
	width: 15%;
	background: #15C;
}
.list td > div.buttonfield > button:hover {
	background: #37E;
}
.list td > div.buttonfield > button > svg {
	vertical-align: -0.35em; width: 1.2em; height: 1.2em;
}
.list td > div.buttonfield > button > svg > path {
	fill: #EEE; stroke: none;
}
.list tr.canceled {
	text-decoration: line-through; color: #AAA;
}

.list td.db_info {
	color: #888; line-height: 90%; font-size: 0.8em;
}
.list tr.subtotal td {
	font-weight: 600; border-top: solid 2pt #CCC; border-bottom: solid 2pt #888;
}













.login {
	display: flex;
	width: 80%; margin: auto;
	flex-flow: column;
	justify-content: center;
	gap: 0.5em;
}

.login input {
	font: inherit;
	border: solid 1pt #15C; border-radius: 1em; border-right: none;
	background: #FFF;
	padding: 0.2em 0.6em;
	width: 100%;
	box-sizing: border-box;
}
.login input::placeholder {
	color: #555;
}
.login button {
	background: #039;
	width: 100%;
}



*/



/* === Aufgabenleiste === */

/*
div.taskbar {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 1em;
	margin-bottom: 1em;
}


div.taskbar a:not(.textbutton) {
	cursor: pointer;
	font: inherit; font-weight: bold;
	text-decoration: none;
	color: inherit; background: none;
	border: none;
}
div.taskbar a:not(.textbutton):hover {
	text-decoration: none;
	color: #37E;
}
div.taskbar a:not(.textbutton) {
	padding: 0.2em 0.6em;
}

div.taskbar select {
	cursor: pointer;
	font: inherit; font-weight: bold;
	text-decoration: none;
	color: inherit; background: #FFF;
	border: solid 1pt #CCC; 
	border-radius: 1em;
	padding: 0.2em 0.6em;
}

div.taskbar input {
	font: inherit;
	text-decoration: none;
	color: inherit; background: #FFF;
	border: solid 1pt #CCC; 
	border-radius: 1em;
	padding: 0.2em 0.6em;
}

*/

/* Design einer Suchleiste */

/*
.searchfield {
	display: flex; width: 20em;
	margin: 0;
}
.searchfield > input {
	font: inherit;
	border: solid 1pt #CCC; border-radius: 1em 0em 0em 1em; border-right: none;
	background: #FFF;
	padding: 0.2em 0.6em;
	width: 100%;
}
.searchfield > button {
	font: inherit;
	padding: 0.2em;
	border: solid 1pt #15C; border-radius: 0em 1em 1em 0em;
	background: #15C;
}
.searchfield > button:hover {
	background: #37E;
}
*/




/* === Buttons === */
/*
button, a.textbutton {
	cursor: pointer;
	font: inherit; font-weight: bold;
	text-decoration: none;
	color: #EEE; background: #15C;
	border: solid 1pt #15C; 
}
button:hover, a.textbutton:hover {
	text-decoration: none;
	color: #FFF; background: #37E;
}
button.textbutton, a.textbutton {
	border-radius: 1em;
	padding: 0.2em 0.6em;
}

a.textbutton.disabled {
	cursor: not-allowed;
	color: #AAA; background: #DDD;
	border: solid 1pt #CCC;
}



.inputbutton {
	display: flex;
	margin: 0;
}
.inputbutton > input, .inputbutton > select {
	font: inherit;
	border: solid 1pt #CCC;
	background: #FFF;
	padding: 0.2em 0.6em;
}
.inputbutton > input:first-child, .inputbutton > select:first-child {
	padding-right: 0.4em; border-radius: 1em 0em 0em 1em; border-right: none;
}
.inputbutton > input:last-child, .inputbutton > select:last-child {
	padding-left: 0.4em; border-radius: 0em 1em 1em 0em; border-left: none;
}
.inputbutton > button {
	padding: 0.2em 0.6em;
	border: solid 1pt #15C; border-radius: 0em 1em 1em 0em;
	background: #15C;
}
.inputbutton > button:hover {
	text-decoration: none;
	color: #FFF; background: #37E;
}
.inputbutton > button:last-child {
	padding-left: 0.4em; border-radius: 0em 1em 1em 0em;
}
.inputbutton > button:first-child {
	padding-right: 0.4em; border-radius: 1em 0em 0em 1em;
}
.inputbutton > button.no-text {
	padding: 0.2em 0.2em;
}
*/

/* === Tabellen und Listen === */

/*
div.scrollarea {
	overflow: auto; max-height: 70vh; width: fit-content;
}


i.regular-toggle {
	cursor: pointer;
}
i.regular-toggle[data-value="0"]:before {
	content: "\f261"; font-size: 1.7em;
}
i.regular-toggle[data-value="1"]:before {
	content: "\f264"; font-size: 1.7em;
}
i.regular-toggle:hover {
	color: #37E;
}


i.regular-checkbox {
	cursor: pointer;
}
i.regular-checkbox[data-value="0"]:before {
	content: "\e3ee";
}
i.regular-checkbox[data-value="1"]:before {
	content: "\e3e5";
}
i.regular-checkbox:hover {
	color: #37E;
}





img.checkbox {
	width: 1.4em; height: 1.4em;
	cursor: pointer;
}
img.checkbox[data-value="0"] {
	content: url('images/colored/checkbox.svg')
}
img.checkbox[data-value="0"]:hover {
	content: url('images/colored/checkbox_hovered.svg')
}
img.checkbox[data-value="1"] {
	content: url('images/colored/checkbox_checked.svg')
}
img.checkbox[data-value="1"]:hover {
	content: url('images/colored/checkbox_checked_hovered.svg')
}

a.edit > img {
	width: 1.2em; height: 1.2em;
	content: url('images/colored/edit.svg')
}
a.edit:hover > img {
	content: url('images/colored/edit_hovered.svg')
}
a.delete > img {
	width: 1.2em; height: 1.2em;
	content: url('images/colored/delete.svg')
}
a.delete:hover > img {
	content: url('images/colored/delete_hovered.svg')
}
a.restore > img {
	width: 1.2em; height: 1.2em;
	content: url('images/colored/restore.svg')
}
a.restore:hover > img {
	content: url('images/colored/restore_hovered.svg')
}

*/


/* = Zuweisungstabelle = */



/*
div.hflex {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	gap: 0em 2em;
}
div.hflex > div {
	
}

*/