@font-face {
	font-family: 'Jost';
	font-style:	normal;
	font-weight: 300;
	src: url('/css/fonts/Jost-Light.ttf'); 
		/*src: url('/css/fonts/Jost-Regular.ttf');*/
}
@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: 300;
	 src: url('/css/fonts/Jost-LightItalic.ttf'); 
		/*src: url('/css/fonts/Jost-Italic.ttf');*/
}
@font-face {
	font-family: 'Jost';
	font-style:	normal;
	font-weight: normal;
	src: url('/css/fonts/Jost-Regular.ttf'); 
		/*src: url('/css/fonts/Jost-Regular.ttf');*/
}
@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: normal;
	 src: url('/css/fonts/Jost-Italic.ttf'); 
		/*src: url('/css/fonts/Jost-Italic.ttf');*/
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: bold;
	src: url('/css/fonts/Jost-Bold.ttf');
}
@font-face {
	font-family: 'Jost';
	font-style: italic;
	font-weight: bold;
	src: url('/css/fonts/Jost-BoldItalic.ttf');
}
/* ---------------------------- 
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 200;
	src: url('/css/fonts/Poppins-Light.ttf'); 
		
}
@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 200;
	 src: url('/css/fonts/Poppins-LightItalic.ttf'); 
		
}
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	src: url('/css/fonts/Poppins-Bold.ttf');
}
@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 600;
	src: url('/css/fonts/Poppins-BoldItalic.ttf');
}
*/

body {
	font-weight: normal;
	font-style: normal;
	background-color: #FFFFFF;
	vertical-align: baseline;
	vertical-align: baseline;
	text-align: left;
	font-family: Jost, "Trebuchet MS",verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
	/* font: small "Trebuchet MS",sans-serif; */ 
	/*
		font-family: Arial, Helvetica, sans-serif;
	*/
}

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

html, body {
	margin:0.3em 2em;
	padding:0;
	
}

body, table, p, input {
	font-size: 1em;
}

body, table, p, input, h1, h2, h3, h4, h5, h6 {
	line-height: 1.45em;
}

h1 { margin: 1.8em 0   1em   0;	font-weight: lighter; }
	h1 b {font-weight: bold;}

/* ein span wird darüber gesetzt in klein und fett */	
/* Überschrift-Spans bei H1  kleiner */
h1 > span:first-child {
  font-size: 0.5em;
  font-weight: bold;
  display: flex;
  margin-bottom: -16px;
}


h2 { margin: 1.8em 0   1.2em 0;	font-weight: normal;					border-bottom : 2px solid #b7b7b7; }
h3 { margin: 2em   0   1.3em 0;	font-weight: normal;					border-bottom : 1px solid #b7b7b7; }
h4 { margin: 2em   0   1.3em 0;	font-weight: bold;						border-bottom : 1px solid #b7b7b7; }
h5 { margin: 2em   50% 1em   0;	font-weight: normal; font-style: italic; border-bottom : 1px solid #b7b7b7;}
h6 { margin: 2em   50% 1em   0;	font-weight: normal; font-style: normal; border-bottom : 1px solid #b7b7b7;}


.LagerOrt {
  color: #a44d00;
  font-size: 0.8em;
  border: 1px solid #710000;
  padding: 0 0.3em;
}

.LagerOrt.verliehen {
  color: #e64b00;
  border-color: #e64b00;
}

.LagerOrt.hier {
  color: green;
  border-color: green;
}

.LagerOrt.einkauf {
  color: #888;
  border-color: #888;
}

.LagerOrt.weg {
  background-color: black;
  color: red;
  font-weight: bolder;
}
.LagerOrt.unbekannt {
  background-color: red;
  color: white;
  font-weight: bolder;
}

.Aufdruck {
  font-variant: tabular-nums;
  color: #939393;
  font-size: 0.8em;
  border: 1px solid #e6e6e6;
  padding: 0 0.3em;
}

.Label {
  color: #008471;
  font-style: italic;
}

/* Zusatz-Texte unter Überschriften */
.SubHeader {
  font-size: 0.6em;
  line-height: 0.6em;
  top: -0.6em;
  position: relative;
}

/* Kasten mit Fehlermeldungen */
div.FehlerMeldung {
  border: 2px solid red;
  padding: 1em 2em;
  background-color: #ffefef;
}

.Item.FalscherLagerOrt {
  border-left: 12px solid red;
  padding-left: 0.6em;
}

#ZubuchungsListe {
	display: none;
	border: 1px solid grey;
	padding: 0em 0.8em;
	margin: 0.5em;
	background-color: white;
}
#ZubuchungsListe.sichtbar {
	display: block;
}
#ZubuchungsListeFehler {
	display: none;
	border: 1px solid red;
}
#ZubuchungsListeFehler.sichtbar {
	display: block;
}
#ZubuchungsListe p.Eintrag {
  border-left: 1em solid;
  padding-left: 0.2em;
}

/* der neu zugefügte Posten */
#ZubuchungsListe p.LetzterEintrag {
  border: 1px red solid;
  padding: 0.2em 0.2em;
  border-left-width: 2em;
  font-size: 1.2em;
  background-color: #f3f3f3;
  /*max-height:0;*/
}
#ZubuchungsListe p.Eintrag.Fehler {
	border-color: red;
}
#ZubuchungsListe p.Eintrag.Check {
	border-color: violet;
}
#ZubuchungsListe p.Eintrag.Hinweis {
	border-color: orange;
}
#ZubuchungsListe p.Eintrag.OK {
	border-color: green;
}

/*#ZubuchungsListe p.LetzterEintrag::before {
	content:'>>> ';
}*/

#HG {
	position: relative;
}

/* HG wenn gesucht wird */
#HG.Suchen {
	background-color:grey;
	animation: BlinkenAufWeiss 0.5s ease infinite; /* Vorgang soll in 0.5 komplett durchlaufen, 
												infinite: dann aber wiederholen
												ease beschreibt die Verlaufs-Kurve */
	animation-fill-mode: forwards; /* bleibt auf dem Ende-Zustand stehen, 
								kehrt nicht wieder auf den Startzustand zurück 
								-> bleibt am Ende weiß */
}
/* nach Ergebnis */
#HG.SuchenOK {
	background-color:green;
	animation: AusblendenAufWeiss 1s ease;
	animation-delay: 2s; /* bleibt etwas länger stehen, bevor das Abblenden beginnt */
	animation-fill-mode: forwards;
}
#HG.SuchenCheck {
	background-color:violet;
	animation: BlinkenAufWeiss 1s ease infinite;
	animation-fill-mode: forwards;
}
#HG.SuchenFehler {
	background-color:red;
	animation: BlinkenAufWeiss 1s ease infinite;
	animation-fill-mode: forwards;
}
#HG.SuchenHinweis {
	background-color:orange;
	animation: AusblendenAufWeiss 1s ease;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

.oben {
			position: sticky;
			top: 0;
			z-index: 100;
			/*! opacity: 0.9; */
			padding: 0.5em;
			background-color: #fff;
			border: 1px black solid;
			margin: 0 -0.6em;
}

p.Kasten {
	border: 1px grey solid;
	padding: 0.2em 0.4em;
	background-color: #e6e6e6;
}

textarea.Zeilen20 {
  width: 100%;
  height: 12em;
}

/* --------- */

#mainlogo {
	width: 16em;
}

/* Label */

div.Label {
	color: grey;
}
/* in der Label-Liste: */
div.Label.gestrichen {
	color: black;
	text-decoration: line-through;
	left: 2em;
	position: relative;
	text-decoration-color: red;
}		
/* in der Artikel-Liste: */
div.Item.gestrichen {
	/*! color: black; */
	text-decoration: line-through;
	left: 16em;
	position: relative;
	text-decoration-color: red;
}
.oben {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: white;
	opacity: 0.9;
	padding: 0.8em;
}

.Fehler::before {
	content: "FEHLER! ";
	color: red;
}
.Treffer::before {
	content: "Treffer: ";
	color: green;
}

/* Artikel */
div.AG {
	margin-top: 2em;
	margin-bottom: 1em;
	border-bottom: 1px solid grey;
	font-size: 1.2em;
	background-color: silver;
	padding: 0.1em 0 0.2em 0.1em;
}

div.A {
	position: relative;
	margin-top: 1em;
	margin-bottom: 0.5em;
	left: 1em;
	margin-right: 1em;
	/*font-weight: bold;*/
}
div.Item {
	position: relative;
	margin-bottom: 0.5em;
	left: 4em;
	margin-right: 4em;
}
div.Item i {
	color: grey;
}

.LabelID {
	background-color: yellow;
	color: black;
	padding: 0.1em;
	border: 1px orange solid;
	position: relative;
	top: -.1em;
	margin: 0 .3em;
  }  
  /* in Item-Liste ausgerückt:*/
div.Item .LabelID {
	position: absolute;
	left: -3em;
  }  
  /* Ende Artikel */



		
/*.Fehler::before {
	content: "Fehler: ";
	color: red;
}
.Hinweis::before {
	content: "Hinweis: ";
	color: orange;
}
.Treffer::before {
	content: "Treffer";
	color: green;
}*/
@media screen and (max-width:640px) {
	html, body {
		margin: 0.3em 0.5em;
	}
	
	#mainlogo {
		width: 40vw;
	}
	
	h1:first-child {
		margin-top: 0.8em;
		
	}


}

.blinkend {
  animation: BlinkenAufWeiss 1s linear infinite;
}

div.qr {
	float: left;
	position: relative;
}
div.qr img {
	width: 5.8em;
	margin-right: 1em;
	top: 0.4em;
	position: relative;
}

div.AnzahlItems {
  border-top: 1px solid grey;
  font-style: italic;
  margin-left: 1.4em;
  margin-top: 1em;
}

div.LagerOrtZeile {
  padding-top: 0.5em;
  font-size: 2em;
  border-top: 3px #b5b5b5 solid;
  margin-top: 2em;
}

/* Packlisten */
.PLVersion {
  font-weight: bold;
  color: white;
  background: #919191;
  padding: 0 0.32em;
}
.PLNr {
  font-size: 2em;
  vertical-align: middle;
  border: 1px solid gray;
  padding: 0 0.3em;
}

p.PLAusdruckAm {
  font-size: 0.8em;
}

div#PLCheck {
	display:none;
	max-height: 80vh;
	border: 1px #ff14ae solid;
	overflow-y: scroll;
	background: #f2f2f2;
	padding: 0 0.4em;
}
div#PLCheck.sichtbar {
	display:inline-block;
}

/* Überschrift im Kasten */
div#PLCheck h1:first-child {
	margin-top: 0;
}

div#PLHinweis {
	display:none;
	/*! max-height: 80vh; */
	border: 3px #ff14ae solid;
	overflow-y: scroll;
	background: #f2f2f2;
	padding: 0 0.4em;
	font-size: 1.2em;
	border-right: 47px green solid;
	line-height:initial;
}
div#PLHinweis.sichtbar {
	display:inline-block;
}

div#PLHinweis.NichtKomplett {
	border-right-color: red;		
}

/* aktualisierungen von PL-Stand und Version: */
.PLVersion.aktualisiert {
  background: orange;
}

.PLStandDatum.aktualisiert {
  background: #ffa5004a;
}

/* Pack-Listen-DIVs auf Transaktions- und LO-Listen*/
div.PL {

  border-left: 2px gray solid;
  padding-left: 1em;

  border-bottom: 2px solid grey;
  margin-bottom: 1em;

  border-top: 2px solid grey;
  margin-top: 1em;
  padding-top: 0em;
}

div.PL h1:first-child {
  margin-top: 0.2em;
  border-bottom: 1px solid;
}

p.PLFussZeile {
  padding: 0;
  margin: 0;
  background-color: silver;
  margin-top: 1em;
  margin-left: -1em;
  padding: 0.2em 0em 0 0.2em;
  color: grey;
}

/* Ende Packlisten*/

div#ZubuchungsListe p.Eintrag.PLNichtKomplett span.PLInfo {
	border-right-color: red;
}

div#ZubuchungsListe p.Eintrag span.PLInfo {
  border-style: solid;
  border-color: #ff14ae;
  border-width: 2px 10px 2px 4px;
  border-right-color: green;
  font-size: 0.9em;
  padding: 0 0.2em;
}



.printonly {
	display: none;
}




@keyframes BlinkenAufWeiss {
  50% { background-color:white;  } /* zwischendurch auf 
				weiß, danach wieder auf Original */
}

@keyframes AusblendenAufWeiss { /* auf weiß blenden */
 to  { background: white; }
}



@media print {
	body {
		font-size:0.8em;
		margin:0;
	}

	div.xy h1 {
	  margin-top: 0;
	}
	
	div.ListeDruckZweiSpaltig {
		columns: 2;
		/*break-before: avoid;*/
		/*break-inside: avoid;*/
	}

	div.ListeDruckZweiSpaltig div.AG {
		break-before: auto;
		break-inside: avoid-column;
		break-after: avoid-column;
	}
	div.ListeDruckZweiSpaltig div.A {
		break-before: avoid-column;
		break-inside: avoid-column;
		break-after: avoid-column;
	}
	
	/* im 2-Spalten-Kasten käme als erstes das Zubuchungs-Formular, aber das zweite Child ist ein AG, dort keinen Rand machen! */
	div.ListeDruckZweiSpaltig div.AG:nth-child(1) {
	  margin-top: 0;
	}
	html {
		margin:0;
	}
	.noprint {
		display: none;
	}
	.printonly {
		display: inherit;
	}
	
	.logorechts {
		float: right;
		width: auto;
	}
	#mainlogo {
		width: 9em;
	}
	
	/* PL-Kennzeichungen für Updates nicht im Ausdruck: */
	.PLVersion.aktualisiert {
		  background: #919191;
	  }

	.PLStandDatum.aktualisiert {
		background: none;
	}

}