body {
    background-color: lightblue;
	margin: 0;
}
div#static {
    position: fixed;
    top: 0;
    z-index: 10000;
    background-color: yellow;
    padding: 10px;
    width: 100%;
    height: 30px;
}

div#dynamic {
    margin-top: 60px;
}

div.sorte{
	padding: 0 0 10px 20px;
	display: grid; 
}


.list.container {
    display: grid;
}

.list.container.Order, .list.container.Relocation{
    grid-template-columns: auto auto auto auto auto auto auto;
}

.list.container.Production{
    grid-template-columns: auto auto auto auto auto auto auto auto;
}

.list > .prop{
	padding: 15px
}


#dynamic>.sorte>.gebinde {
    display: inline-block;
    width: 30vw;
    vertical-align: top;
	display: flex;
	justify-content: flex-end; 
	flex-direction: column;
}

div.menu{
	width: 100%;
	text-align:center;
}

table.overview{
	width: 100%;
}

#dynamic>.sorte:nth-child(2n){
	background-color: white;
}

div.title{
	font-weight: bold;	
	display: block;
	font-size: 1.3em;
	grid-column-start:1;
	grid-column-end:4;
}

.ackAmount {
    grid-column-end: 4;
    grid-column-start: 1;
}

span.subtitle{
	display:block;
	font-weight: bold;	
	display: block;
	font-size: 1.1em;
}

span.bDatum{
	left: 100px;	
}

div.bestellung,
div.produktion,
div.umlagerung{
	padding-left:40px;
}

div.bestellung, div.summeBestellung{
	background-color: #FFCCCB;
}

div.produktion, div.summeProduktion{
	background-color: #DBF9DB;
}
div.umlagerung, div.summeUmlagerung{
	background-color: #90EE90;
}


div#overlay{
	z-index: 1000;
	position: fixed;;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: lightgrey;
	border: 3px solid darkblue;
	/* display:none; */
	overflow: scroll;
	max-height: 80%;
}

span#overlayContent{
	display:block;
	padding: 100px;
}


.form {
    display: grid;
	grid-template-columns: 300px 300px;
}
.form > input {
    grid-column-start: 2;
}

.form > button {
	grid-column-start:1;
	grid-column-end:  3;
	display:flex;
	justify-content: center;
}