<style>
	body {
		font-family: Arial, Helvetica, sans-serif;
	}
	html, body {
		font-size: xx-small;
		line-height: 1.5em; 
	} 
	/* Iphone 6 */
	@media only screen and (min-width: 660px) {
	  html, body {
		font-size: x-small !important;
		line-height: 1.5em;
	} 
	}
	/*Tablet 10' */
	@media only screen and (min-width: 1098px) {
	  html, body {
		font-size: 80% !important;
		line-height: 1.5em;
	} 
	}
	/* ACER */
	@media only screen and (min-width: 1536px) {
	  html, body {
		font-size: 90% !important;
		line-height: 1.5em;
	} 
	}
	/* Samsung BS */
	@media only screen and (min-width: 1900px) {
	  html, body {
		font-size: medium !important;
		line-height: 1.5em;
	} 
	}
	body {
		margin:0;
	}
	input {
		border:none;
		font:inherit;
	}
	select {
		border:none;
		font:inherit;
		height: 1.75em;
		font-size:inherit;
	}
	option {
	    font-weight: normal;
	    display: block;
	    white-space: pre;
	    min-height: 1em;
	    padding: 0px;
	    font-size:inherit;
	}
	h2 {
	    display: block;
	    font-size: 1.5em;
	    margin-block-start: 0.5em;
	    margin-block-end: 0.5em;
	    margin-inline-start: 0px;
	    margin-inline-end: 0px;
	    font-weight: bold;
	}
	h4 {
	    display: block;
	    margin-block-start: 0.5em;
	    margin-block-end: 0.5em;
	    margin-inline-start: 0px;
	    margin-inline-end: 0px;
	    font-weight: bold;
	}
	h5 {
	    display: block;
	    margin-block-start: 0.5em;
	    margin-block-end: 0.5em;
	    margin-inline-start: 0px;
	    margin-inline-end: 0px;
	    font-weight: bold;
	    font-size: 1em;
	}
	
/*General Menu Styling*/
	.nav-button {
		margin: 0 auto; 
		background-color: #0052cc; 
		margin-top: 1vh
	}
	li {
		list-style: none;
		background-color:#0052cc;
	}
	li a {
		text-decoration: none;
	}
	.ui-menu li{
		background-color: #ffff !important;
	}
	.dropdown {
		position: absolute; 
		width: 150px; 
		opacity: 0;
		visibility: hidden;
		transition: ease-out .35s;
		-moz-transition: ease-out .35s;
		-webkit-transition: ease-out .35s;
	}
	.nav-button li {
		float: left;
	}
	.nav-button li:first-child {
		border: none;
	}
	.nav-button li a, .nav-button a {
		display: block;
		color: #fff;
		font-family:arial;
		margin-left:0.5vw;
	}
	.nav-button a:hover {
		color: #66ff66;
	}
	.nav-button li:hover {
		color: #66ff66;
		transition: ease-in .35s;
		-moz-transition: ease-in .35s;
		-webkit-transition: ease-in .35s;
	}
	.nav-button li:hover a {
		color: #66ff66;
		transition: ease-in .35s;
		-moz-transition: ease-in .35s;
		-webkit-transition: ease-in .35s;
	}
/*First Level*/
	.subs {
		left: -1.7vw;
		position: relative;
		top: -5px;
		width: 10vw;
		border-left: none !important;
		border-bottom: 1px dotted #fff !important;
	}
	.subs:last-child {
		border: none !important;
	}
	.hassubs:hover .dropdown,.hassubs .hassubs:hover .dropdown {
		opacity: 1;
		visibility: visible; 
		transition: ease-in .35s;
		-moz-transition: ease-in .35s;
		-webkit-transition: ease-in .35s;
	}
	.nav-button li:hover ul a,.nav-button li:hover ul li ul li a {
		color: white;
	}
	.nav-button li ul li:hover,.nav-button li ul li ul li:hover {
		transition: ease-in-out .35s;
		-moz-transition: ease-in-out .35s;
		-webkit-transition: ease-in-out .35s;
	}
	.nav-button li ul li:hover a,.nav-button li ul li ul li:hover a {
		color: #66ff66;
		transition: ease-in-out .35s;
		-moz-transition: ease-in-out .35s;
		-webkit-transition: ease-in-out .35s;
	}
/*Second Level*/
	.hassubs .hassubs .dropdown .subs {
		left: 1.5vw;
		position: relative;
		width: 10vw;
		top: 0px;
	}
	.hassubs .hassubs .dropdown {
		position: absolute;
		width: 10vw;
		left: 6.4vw;
		top: 0px;
		opacity: 0;
		visibility: hidden;
		transition: ease-out .35s;
		-moz-transition: ease-out .35s;
		-webkit-transition: ease-out .35s;
	}
	.nav-container {
	  display: grid;
	  grid-template-columns: 16fr 6fr 6fr 6fr 6fr 6fr 6fr 28fr 10fr 5fr 5fr;
	  background-color: #0052cc; 
	  color:white;
	  height: 3.1em;
	}
	.nav-container > div {
	  text-align: left;
	  padding-left: 1vw;
	  border: none;
	  padding-top: 0.2em;
	}
	.nav-container > div:first-child {
	  padding-top: 0.3em;
	}
/*General Menu Styling*/	
	
/*Modal Styling*/
	.x3-modal { 
		z-index:3;
		display:none;
		padding-top:100px;
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		overflow:auto;
		background-color:rgb(0,0,0);
		background-color:rgba(0,0,0,0.4)
	}
	.x3-modal-content {
		margin:auto;
		background-color:#fff;
		position:relative;
		padding:0;
		outline:0;
		width:600px
	}
	.x3-modal-footer {
		color:#fff!important;
		background-color:#0052cc!important
	} 

	.x3-top,.x3-bottom {
		position:fixed;
		width:100%;
		z-index:1;
		margin:0;
	}
	.x3-top {
		top:0
		}
	.x3-bottom {
		bottom:0
		}
 	.x3-input {
 		padding:8px;
 		display:block;
 		border:none;
 		border-bottom:1px solid #ccc;
 		width:100%
	}
	.x3-border {
		border:1px solid #ccc!important
	}
	.x3-border-0 {
		border:0!important
	}
	.x3-bordered tr {
		border-bottom:1px solid #ddd
	}
	.x3-padding {
		padding:8px 16px!important
	}
	.x3-container:after,.x3-container:before{
		content:"";display:table;clear:both
	}
	.x3-container{
		padding:0.1vh 16px
	}
	.x3-display-container{
		position:relative;
	}
	.x3-center{
		text-align:center!important
	}
	.x3-btn{
		border:none;
		display:inline-block;
		vertical-align:middle;
		overflow:hidden;
		text-decoration:none;
		color:inherit;
		background-color:inherit;
		text-align:center;
		cursor:pointer;
		white-space:nowrap;
		height: 28px;
		margin-left: 0.5em;
	}
	.x3-btn:disabled{
		cursor:not-allowed;opacity:0.3
	}
	.x3-text-red{
		color:#f44336!important
	}
	.x3-light-green{
		color:#000!important;background-color:#8bc34a!important
	}
	.x3-responsive{
		display:block;overflow-x:auto
	}
	.x3-footer {
		padding:8px 16px!important;
	  	text-align:center!important;
	  	background-color: #0052cc;
	  	color:white!important;
	  	z-index: -1;
	}
	.x3-bar-item {
		padding:8px 16px;
		float:left;
		width:auto;
		border:none;
		display:block;
		outline:0;
		background-color:#8bc34a;
		}
	.x3-button {
		white-space:normal;
		padding: 4px;
	}	
	.btnclasstd	{
		padding-top: 0px; 
		padding-bottom: 0px;
		padding-left: 0.2vw;
		padding-right: 0.2vw;
		float:left;
		width:auto;
		border:none;
		display:block;
		outline:0;
		background-color:#8bc34a;
	}
	.btnclasstd1 {
		padding-top: 0.2vw; 
		padding-bottom: 0.2vw;
		padding-left: 0.2vw;
		padding-right: 0.2vw;
		float:left;
		width:auto;
		border:none;
		display:block;
		outline:0; 
		word-break: normal;
		background-color:#ffff;
	}
	.x3-hover-dark-gray:hover {
		color:#fff!important;
		background-color:#616161!important
	}
	.x3-dropdown-hover {
		position:relative;
		display:inline-block;
		cursor:pointer;
	}
	.x3-dropdown-hover:hover .x3-dropdown-content {
		display:grid;
	}
	.x3-dropdown-hover:first-child {
		background-color:#ccc;color:#000;
	}
	.x3-dropdown-hover:hover > .x3-button:first-child {
		background-color:#ccc;
		color:#000
	}
	.x3-dropdown-content {
		cursor:auto;
		color:#000;
		background-color:#fff;
		display:none;
		position:absolute;
		width:auto;
		text-align:left;
		margin:0;
		padding:0;
		z-index:1;
	}
	.x3-orange,.x3-hover-orange:hover {
		color:#000!important;
		background-color:#ff9800!important
	}
	.x3-green,.x3-hover-green:hover {
		color:#fff!important;
		background-color:#4CAF50!important
	}
	.x3-red,.x3-hover-red:hover {
		color:#fff!important;
		background-color:#f44336!important; 
	}
	.x3-sand,.x3-hover-sand:hover {
		color:#000!important;
		background-color:#fdf5e6!important
	}
	.x3-grey,.x3-hover-grey:hover{
		color:#000!important;
		background-color:#9e9e9e!important;
	}
	.x3-khaki,.w3-hover-khaki:hover {
		color:#000!important;
		background-color:#f0e68c!important
	}
	.x3-table {
		border-collapse:collapse;
		border-spacing:0;
		width:100%;
		display:table
	}
	.input {
	  border-style: solid;
	  border-width: thin;
	  background-color: #ffffff;
	}
	.inputstat {
	  border-style: solid;
	  border-width: thin;
	  background-color: #ffffff;
	  width: 10vw;
	}
	.error {
		color:red;
	}
	
	.title {
	    color:#ffff;
	    font-size: 2vw;
	    font-weight:bold;	
	}
	.main-grid{
	  display: grid;
	  grid-template-columns: 26fr 1.5fr 1.5fr 1fr;
	  grid-template-areas: 	"st btn1 btn2"
							"ss btn1 btn2";
	  margin-left: 0.2vw;
	  margin-right: 0.2vw;
	}
	.main-grid > div {
	  font-size: inherit;
	  text-align: center;
	}
	.seltit{
	  grid-area: st;			
	}
	.selsel {
	  grid-area: ss;
	}
	.btn1 {
		grid-area: btn1;
		margin-top: 2vh
	}
	.btn2 {
		grid-area: btn2;
		margin-top: 2vh
	}
	.ovtitle{
		font-weight: bold;
		background-color:#c0c0c0;
		margin-bottom: 0.5vh;
	}
	.ovtotal{
		font-weight: bold;
		background-color:#ff9800;
		margin-bottom: 0.5vh;
		border:1px solid #ccc!important;
		margin-right: 0.1vw;
	}
	.ovdetail{
		color:#000!important;
		background-color:#fdf5e6!important;
		border:1px solid #ccc!important;
		margin-right: 0.1vw;
	}
	.ovdetail1{
		color:#000!important;
		background-color:#fdf5e6!important;
		margin-right: 0.1vw;
	}
	.select-grid-tit > div, .detail-main > div {
	  text-align: left;
	  font-size: inherit;
	}			
	.select-grid > div, .detail-grid > div {
	  text-align: left;
	  font-size: inherit;
	  border: 1px solid;
	  border-collapse: collapse;
	}
	.detail-main{
	  display: grid;
	  grid-template-columns: 24fr 0.75fr;
	  margin-left: 0.2vw;
	  margin-right: 0.2vw;
	}
	.empty-row{
		grid-column: 1 / span 3;
		padding: 0.25vh;
	}
	.label {
	  font-weight: bold;	
	}
	
div.wrapper {
    margin-left: 0.2vw;
    margin-right: 0.2vw;
	display: block;
	overflow: auto;   /* setzt den ganzen Container auf scrollable (horizontal(x) + vertikal(y)) */ 
}
table.scroll {
	width: 100%;
	background-color: #ffff;
	font-size: inherit;
}
table.scroll thead {		/* bestimmt die Hintergrund-Farbe des Tabellenkopfes */
	background-color: #c0c0c0;;
}
table.scroll thead tr {
	border-left: 0.01em solid black;
	border-top: 0.01em solid black;
	border-right: 0.01em solid black;
	border-bottom: none;
}
table.scroll thead tr:second-child{ 	/* bestimmt die Farbe der zweiten Zeile (total) im Tabellenkopf */
	background-color: #ff9800;
}
table.scroll thead tr:after {
	content: '';
	overflow-y: scroll;        /* macht den tbody scrollable */
	visibility: hidden;
}
table.scroll thead th {
	flex: 1 auto;
	display: block;
	color: black;
	font-weight: bold;
	word-wrap: break-word;
}
table.scroll tbody {
	display: block;
	overflow-y: auto;
	height: auto;
/*	max-height: 400px;   bestimmt Höhe der scrollable Zeilen-bereichs */
}
table.scroll thead tr,
table.scroll tbody tr {
	display: flex;
}
table.scroll tbody tr td {
	flex: 1 auto;
	word-wrap: break-word;
}
table.scroll thead tr th {
	
	padding: 0.2em;
	border: none;
	display: inline-grid;
    word-break: break-word;
}
table.scroll tbody tr td {
	
	padding: 0.2em;
	text-align-left;
	display: inline-grid;
    word-break: break-word;
    color: #000 !important;
    background-color: #fdf5e6;
}
table.scroll tbody td {
	border-left: 0.01em solid black;
	border-top: 0.01em solid black;
}
table.scroll tbody td:last-child{
	display: flex;
	border-right: 0.01em solid black;
}
table.scroll tbody tr:last-child td {
	display: flex;
	border-bottom: 0.01em solid black;	
}
</style>