@font-face {
	font-family: "Source Sans";
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	src: url("sourcesans-regular.woff") format("woff");
}

@font-face {
	font-family: "Source Sans";
	font-weight: normal;
	font-style: italic;
	font-variant: normal;
	src: url("sourcesans-italic.woff") format("woff");
}

@font-face {
	font-family: "Source Sans";
	font-weight: bold;
	font-style: normal;
	font-variant: normal;
	src: url("sourcesans-bold.woff") format("woff");
}

body {
	font-size: 16px;
}

div, article, header, footer, nav, section, figure, figcaption, aside, form, p, h1, h2, h3, h4, ol, ul, li, input, button, textarea, table, tr, td, th, fieldset, legend, blockquote, option, select {
	font-size: 1em;
}

body {
	display: grid;
	grid-template-rows: 50px 50px auto;
	height: 100%;
	padding: 0;
	margin: 0;
}

header {
	display: flex;
	justify-content: space-between;
	background: rgb(37, 75, 30);
}

header ul {
	display: flex;
	list-style-type: none;
	margin: 10px 8px 0 8px;
	padding: 0;
}

header ul li {
	margin: 0 2px 0 2px;
}

header a, header li {
	color: rgb(255, 255, 255);
	background: transparent;
	text-decoration: none;
}

header a {
	display: inline-block;
	padding: 5px;
}

nav {
	display: flex;
	justify-content: space-between;
	background: rgb(75, 155, 65);
}

nav form {
	margin: 10px;
}

nav div {
	margin-right: 10px;
}

nav p, nav input, nav select, nav a {
	color: rgb(255, 255, 255);
	background: rgb(75, 155, 65);
	text-decoration: none;
}

nav input, nav select {
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 4px;
}

nav input, nav button {
	margin-left: 8px;
}

nav button {
	background: rgba(255,255, 255, 0.125);
	color: rgb(255,255, 255);
	margin: 0 0 0 5px;
	padding: 6px;
}

header li strong a {
	font-weight: bold;
}

input, select, button, textarea {
	border: none;
	background: rgba(100, 80, 70, 0.25);
	padding: 6px;
}

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

textarea {
	width: 400px;
	height: 100px;
}

nav select option:first-child {
	font-style: italic;
}

option.leiharbeiter {
	font-style: italic;
}

button {
	margin: 10px 0 0 0;
}

select + label, select + div, select + div + div, div + button {
	margin-left: 5px;
}

form {
	margin: 0;
}

fieldset {
	border: 2px solid rgba(100, 80, 70, 0.25);
	margin: 10px 0 10px 0;
}

fieldset + fieldset, form + fieldset, fieldset + table {
	margin-top: 10px;
}

article {
	margin: 10px;
	padding: 0 0 10px 0;
}

article input {
	background: rgba(100, 80, 70, 0.25);
	margin: 3px;
}

article.anlieferungen, article.start, article.kamera {
	margin: 0;
	padding: 0;
}

article.start > div {
	padding: 10px;
	background: rgba(100, 80, 70, 0.25);
}

article.anlieferungen input, article.anlieferungen button {
	margin: 0;
	padding: 0;
}

article.anlieferungen input::placeholder {
	text-align: center;
	color: rgb(0, 0, 0);
	font-style: italic;
}

article.anlieferungen form {
	display: grid;
	grid-column-gap: 1px;
	grid-template-columns: 40% 30% 30%;
	width: calc(100% - 2px);
	height: 100%;
	margin: 0;
}

article.anlieferungen form > div {
	display: grid;
	grid-row-gap: 1px;
	grid-template-rows: auto;
}

article.anlieferungen form > div + div {
	display: grid;
	grid-template-rows: auto;
}

article.anlieferungen form > div label {
	display: grid;
	height: 100%;
}

article.anlieferungen form > div label input[type="radio"], article.anlieferungen form > div label input[type="checkbox"] {
	display: none;
}

article.anlieferungen form > div label input[type="text"] {
	display: block;
	width: 100%;
	height: 100%;
}

article.anlieferungen form > div button {
	background: rgb(37, 75, 30);
	color: rgb(255, 255, 255);
}

article.anlieferungen form > div label input + div {
	display: grid;
	width: 100%;
	height: 100%;
	background: rgba(100, 80, 70, 0.25);
	align-items: center;
	text-align: center;
}

article.anlieferungen form > div:first-child label input + div {
	align-items: flex-end;
}

article.anlieferungen form > div:nth-child(2) input[type="checkbox"] + div {
	background: rgba(255, 0, 0, 0.25);
}

article.anlieferungen form > div:nth-child(2) input[type="checkbox"]:checked + div {
	background: rgba(255, 0, 0, 0.5);
}

article.anlieferungen form > div label input + div span {
	display: block;
	margin-bottom: 20px;
}

article.anlieferungen form > div label input + div.fahrzeug1 {
	background-image: url("pkw.svg");
	background-size: 30%;
	background-repeat: no-repeat;
	background-position: center;
}

article.anlieferungen form > div label input + div.fahrzeug2 {
	background-image: url("pkw_anhaenger.svg");
	background-size: 40%;
	background-repeat: no-repeat;
	background-position: center;
}

article.anlieferungen form > div label input + div.fahrzeug3 {
	background-image: url("transporter.svg");
	background-size: 20%;
	background-repeat: no-repeat;
	background-position: center;
}

article.anlieferungen form > div label input + div.fahrzeug4 {
	background-image: url("fussgaenger.svg");
	background-size: 5%;
	background-repeat: no-repeat;
	background-position: center;
}

article.anlieferungen form > div div {
	display: grid;
}

article.anlieferungen form > div label input:checked ~ div {
	background-color: rgba(100, 80, 70, 1);
	color: rgb(255, 255, 255);
}

article.anlieferungen form > div label ~ div.plus_minus {
	display: none;
}

article.anlieferungen form > div label input:checked ~ div.plus_minus {
	display: flex;
}

article.anlieferungen form div.kasse {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
}

article.anlieferungen form div.kasse:target {
	display: block;
}

article.anlieferungen form div.kasse:target > div {
	position: relative;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -200px;
	width: 350px;
	height: 400px;
	box-sizing: border-box;
	padding: 50px;
	background: rgba(255, 255, 255, 1);
}

article.anlieferungen form div.kasse:target > div input, article.anlieferungen form div.kasse:target > div p {
	text-align: center;
	margin: 0;
}

article.anlieferungen form div.kasse:target > div input, article.anlieferungen form div.kasse:target > div button {
	padding: 10px;
}

article.anlieferungen form div.kasse:target > div button {
	width: 100%;
	margin-top: 20px;
}

article.anlieferungen form div.kasse:target > div div.plus, article.anlieferungen form div.kasse:target > div div.minus {
	padding-left: 10px;
	padding-right: 10px;
}

article.anlieferungen form div.kasse:target > div div.plus_minus + p {
	margin-top: 10px;
}

article.anlieferungen form div.kasse:target > div div.auswahl {
	display: flex;
	flex-direction: row;
}

article.anlieferungen form div.kasse:target > div div.auswahl label {
	width: 50%;
}

article.anlieferungen form div.kasse:target > div div.auswahl label input {
	display: none;
}

article.anlieferungen form div.kasse:target > div div.auswahl label input + span {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(100, 80, 70, 0.25);
	text-align: center;
	height: 50px;
}

article.anlieferungen form div.kasse:target > div div.auswahl label input:checked + span {
	background: rgba(100, 80, 70, 1);
	color: rgb(255, 255, 255);
	font-weight: bold;
}

article.anlieferungen form div.kasse:target > div a {
	display: block;
	width: 100%;
	margin-top: 40px;
	text-align: center;
}

article.anlieferungen form label.kasse_button a {
	display: grid;
	align-items: center;
	text-align: center;
	height: 100%;
	background: rgba(100, 80, 70, 0.75);
	color: rgb(255, 255, 255);
	text-decoration: none;
}

p, h1, h2, h3, input, label, legend, select, button, th, td, li, a, figcaption, text, input + span {
	font: normal normal 1em/120% "Source Sans";
	color: rgb(0, 0, 0);
}

h1 {
	font-size: 2em;
}

h3 {
	font-size: 1.5em;
}

table {
	border-collapse: collapse;
}

table td, table th {
	border: 1px solid green;
	padding: 3px;
}

table tr.offline td {
	xxfont-style: italic;
}

@media all and (pointer: coarse) {

	p, th, td, label, input, legend, a, select, option, button {
		font-size: 1.2rem;
	}

	input::placeholder {
		font-size: 1.2rem;
	}

	input {
		padding: 5px;
	}

}

article.anlieferungen form div.plus_minus {
	display: flex;
}

article.anlieferungen form div.plus_minus input {
	width: 100%;
	text-align: center;
}

article.anlieferungen form div.plus_minus div {
	width: 50px;
	display: grid;
	align-items: center;
	text-align: center;
	background: rgba(100, 80, 70, 0.5);
	color: rgb(255, 255, 255);
}

article.anlieferungen form div.plus_minus label input + span {
	padding: 10px 20px 10px 20px;
	color: rgb(255, 255, 255);
	display: grid;
	align-items: center;
	text-align: center;
}

article.anlieferungen form div.plus_minus label input:checked + span {
	background: rgb(100, 80, 70);
}

article.anlieferungen form div input[name="gruenabfall_postkarten"] {
	background-image: url("postkarte_icon.svg");
	background-repeat: no-repeat;
	background-position: 10px center;
}

article.anlieferungen form div input[name="gruenabfall_saecke"] {
	background-image: url("sack_icon.svg");
	background-repeat: no-repeat;
	background-position: 10px center;
}

article.anlieferungen div.kasse_storno {
	display: flex;
}

article.anlieferungen div.kasse_storno > label:first-child {
	width: 80%;
}

article.anlieferungen div.kasse_storno > label + label {
	width: 20%;
	align-items: center;
	text-align: center;
}

article.anlieferungen div.kasse_storno > label + label a {
	text-decoration: none;
}

p.meldung {
	margin: 5px 0 0 0;
	padding: 10px 10px 10px 10px;
	background: red;
	color: white;
}

article div.reiter {
	border: solid rgb(255, 255, 255);
	border-width: 0 0 1px 0;
}

article div.reiter > h2 {
	font-size: 2em;
	font-weight: bold;
	cursor: pointer;
}

article div.reiter > h2 span {
	display: inline-block;
	box-sizing: border-box;
	text-align: center;
	width: 48px;
	height: 48px;
	border-radius: 100%;
	margin: 0 10px 0 0;
	padding: 5px;
	background: rgb(255, 255, 255);
}

figure {
	display: block;
	border: 1px solid rgb(75, 155, 65);
	padding: 17px;
	margin: 0;
}

figure.diagramm + figure.diagramm {
	margin-top: 18px;
}

figure.diagramm p.legende {
	margin: 18px 0 0 -18px;
}

figure.diagramm p.legende > span {
	display: inline-block;
}

figure.diagramm p.legende span span {
	display: inline-block;
	background: rgb(75, 155, 65);
	width: 11px;
	height: 11px;
	margin: 3px 4px 0 18px;
}

figcaption {
	display: block;
	padding: 0 0 18px 0;
}

svg {
	background: rgba(75, 155, 65, 0.25);
}

text {
	text-anchor: middle;
}

#quittungen_kasse {
	margin-right: 45px;
}

#datensatzstatus {
	position: absolute;
	top: 62px;
	right: 5px;
	font: normal normal 1em/120% "Source Sans";
	background: rgb(255, 255, 255);
	padding: 4px;
	border-radius: 100%;
}

span.status_offen, span.status_erledigt {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background: rgb(255, 200, 0);
}

span.status_erledigt {
	background: rgb(75, 155, 65);
}

#storno {
	display: none;
	position: absolute;
	box-sizing: border-box;
	left: 0;
	bottom: 0;
	background: rgb(255, 255, 255);
	width: 100%;
	padding: 0 10px 10px 10px;
}

#storno div, #storno form {
	display: block;
}

#storno form button {
	margin: 0 20px 0 0;
	padding: 10px;
}

#storno:target {
	display: block;
}

div.kamera {
	position: relative;
	width: 800px;
	height: 100%;
}

div.kamera canvas, div.kamera video {
	position: absolute;
	width: 100%;
	height: 100%;
}

div.kamera button.ausloeser {
	position: absolute;
	display: block;
	width: 100px;
	height: 100px;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 100%;
	left: 50%;
	bottom: 20px;
	margin: 0 0 0 -50px;
}

div.kamera_versenden {
	position: absolute;
	display: block;
	left: 820px;
	top: 150px;
}

div.kamera_versenden button {
	display: block;
	margin: 20px 0 20px 0;
}

table.kamera_warteschlange {
	position: absolute;
	display: block;
	height: 50px;
	left: 820px;
	bottom: 20px;
}

#druck {
	display: none;
}

#druck + div {
	display: none !important;
}