html {
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif, monospace; 
 color: black;
 text-align: left;
 display: block;
background-color: rgba(0, 0, 0, 0.15);
/*background-color: rgb(200, 200, 200);*/
  background-color: rgba(255, 255, 190, 1.00);
}

*
{
 padding:       2px;
 margin-left:   2px;
 margin-top:    2px;
 margin-right:  2px;
 margin-bottom: 2px;
 border-collapse: collapse;
}


body
{
  background-color: rgba(255, 255, 190, 1.00);
}


[title] {
/*	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius:2px;
*/
	position: relative;
}
body.touched [title] > * {
	user-select: none;
}
body.touched [title]:hover > * {
	user-select: auto
}
body.touched [title]:hover:after {
	position: absolute;
	top: 100%;
	/*right: -10%;
*/
left: 0px;
	content: attr(title);
	border: 1px solid rgba(0, 0, 0, 0.2);
	background-color: white;
	box-shadow: 1px 1px 3px;
	padding: 0.3em;
	z-index: 1;
width: 200px;

}

/* input[type="text"] { */
* {
border-radius: 5px;
/* text-shadow: 0px -1px 0px rgba(0,0,0,.5); */
}

/* ######################################## */
/* aus: */
/* https://www.cssmatic.com/box-shadow */
/* ######################################## */
input {
-webkit-box-shadow: 7px 3px 5px -3px rgba(250, 180, 20, 0.5);
-webkit-box-shadow: 3px 3px 7px -1px rgba(250, 180, 20, 0.3);

}


*:focus {
  background: rgba(169, 156, 253, 0.97);
}


.span_img_titel {
padding: 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}


/* .button { */
 /* width: 8vh; */
 /* height: 8vh; */
 /* font-size: 2.5vh; */
 /* overflow: hidden; */
 /* white-space: normal; */

/* width: 80px; */
/* height: 80px; */
/* font-size: 14px; */
/* color: black; */
/* margin: 0px; */
/* float: left; */
 /* } */

button,.button
{
  background-color: rgba(255, 255, 190, 1.00);
  width: 80px;
  height: 60px;
  max-width; 19%;
/*font-weight: bold;*/
}
button:hover
{
  background-color: green;
  color: white;
}


ul
{
list-style-type: none;
}


hr {
 border: 0px solid;
 border-bottom: 1px solid #8c8b8b;
}

div {
/* visibility: hidden;*/
 white-space: normal;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif, monospace; 
 color: black;
 border: 0px solid black;
/* display: none;*/
/*
 display: inline-block;
 display: none;
*/
} 


span {
 border: 1px solid black;
 background-color: grey;
background-color: initial;
border: 0px;
} 

p 
{ 
 margin: 0em;
}

table {
width: 100%;
}

td {
 border: 1px solid black;
 padding: 0px;
 padding: 1px;
}



img {
 height: auto;
}

.image_zeit {
 width: 7vh;
}

textarea {
 width: 90%;
 height: 10vh;
 white-space: pre;
 overflow: visible;
}

.class_textarea_artikel {
 width: 80px;
 height: 17px;
 white-space: pre;
 overflow: visible;
}


form {
display: inline-block;
width: 90%;
}


label {
float: left;
clear: left;
}

.nav
{
 font-size: 11px;
 color: rgb(200,50,0);
 font-style: italic;
}

#div_nav {
 max-width: 98%;
 margin: 0px;
 padding: 0px;
 border: 0px solid black;
 font-size: 0px;
 font-family: Verdana, Arial, Helvetica, sans-serif, monospace; 
 color: black;
 color: rgb(100, 100, 100);
 display: inline-flex;
}


#div_start_leer {
/* width: 98%;*/
 margin: 3px 0px 0px 0px;
 height: 0px;
 padding: 0px;
 border: 1px solid black;
}

#div_start {
/* width: 98%;*/
 margin: 3px 0px 0px 0px;
 text-align: center;
 padding: 0px;
}


#div_platz_unten {
 margin: 0px;
 height: 200px;
 border: 0px solid black;
}

#div_schluss {
/*position: fixed;*/
/*bottom: 0px;*/
/* width: 98%;*/
 margin: 3px 0px 3px 0px;
 text-align: left;
 padding: 0px;
 white-space: normal;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif, monospace; 
 color: black;
 color: rgb(100, 100, 100);
 border: 0px solid black;
}


#div_table_anzeigen {
/*position: fixed;*/
/*bottom: 0px;*/
/* width: 98%;*/
 margin: 3px 0px 3px 0px;
 text-align: left;
 padding: 0px;
 white-space: normal;
 font-size: 13px;
/* font-size: 3vmax;*/
 font-family: Verdana, Arial, Helvetica, sans-serif, monospace; 
 color: black;
 color: rgb(100, 100, 100);
 border: 0px solid black;
}


.div_artikel {
/*position: fixed;*/
/*bottom: 0px;*/
/* width: 98%;*/
 /* margin: 3px 0px 3px 0px; */
 text-align: left;
 padding: 0px;
 white-space: normal;
 font-size: 11px;
/* font-size: 3vmax;*/
 font-family: Verdana, Arial, Helvetica, sans-serif, monospace; 
 color: black;
 color: rgb(100, 100, 100);
 border: 0px solid black;
}







#table_datensatz_anzeigen {
/*position: fixed;*/
/*bottom: 0px;*/
/* width: 98%;*/
 margin: 3px 0px 3px 0px;
 text-align: left;
 padding: 0px;
 white-space: normal;
 font-size: 13px;
/* font-size: 3vmax;*/
 font-family: Verdana, Arial, Helvetica, sans-serif, monospace; 
 color: black;
 color: rgb(100, 100, 100);
 border: 0px solid black;
}


#div_abstand_oben {
height: 0px;
display: none;
}

#div_suchen {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
z-index: 9999;
width: 100%;
height: 100%;
/*display: none;*/
position: fixed;
left: 0px;
top: 0px;
background-color: rgba(0,150,200,0.5);
background-color: rgb(0,150,200);
}




@media screen and (max-width: 820px) {
    #div_table_anzeigen {
    font-size: 20px;
    line-height: 200%;
    }
#div_abstand_oben {
display: block;
display: none;
height: 60px;
}
} 

/*@media not (max-width: 639px) {*/
/* font-size: 130px;*/

/*} */


#form {
 margin: 3px 0px 0px 0px;
 padding: 0px;
 border: 0px solid black;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif, monospace; 
 color: black;
}








#table_gebuchte_artikel {
/* color: white;*/
/* background-color: blue;*/
 display:inline-block;
 border: 1px solid black;
 width: 100%;
}

.wg_strings {
 color: white;
 background-color: blue;
 display:inline-block;
}

#neuer_artikel_text {
 font-size: 7vh;
 color: white;
 background-color: blue;
 width: 85%;
}

.artikel_menge_preis_eingabe {
 font-size: 4vh;
 color: red;
 background-color: yellow;
 width: 100px;
}

/*
#artikel_detail_div {
 font-size: 4vh;
 color: red;
 background-color: yellow;
}
*/


#form_filter_div {
 font-size: 4vh;
 color: red;
/* background-color: yellow;*/
 border: 0px solid #000;
}


.zeit {
 font-size: 10vh;
 text-align: center;
 display: block;
 background-color: yellow;
/* line-height: 80%; */
} 

.zeit_span {
 border: 0px solid black;
 background-color: yellow;
} 

#div_beleg {
 font-size: 2vh;
/* text-align: center; */
 display: block;
 background-color: yellow;
/* line-height: 80%; */
} 



.button_kundensuche {
 overflow: hidden;
 white-space: normal;
 word-wrap: break-word;
width: 80px;
height: 60px;
font-size: 12px;
color: black;
margin: 0px;
float: left;
display: inline;
 }

.nav_button {
/* background-color: greenyellow; */
 }



/*#schluss {*/
/* font-size: 9px;*/
/* color: black;*/
/* text-align: center;*/
/* display: block;*/
/* background-color: white;*/
/* border: 0px solid black;*/
/*} */
/**/


.artikel_anzahl, span.artikel_anzahl {
width: 3%;
display: inline-block;
vertical-align: top;
} 

.artikel_name {
width: 30%;
display: inline-block;
vertical-align: top;
} 

.artikel_artnr {
width: 3%;
display: inline-block;
vertical-align: top;
} 

.artikel_name2 {
width: 20%;
display: inline-block;
vertical-align: top;
} 

.artikel_preis {
width: 5%;
display: inline-block;
vertical-align: top;
} 

.artikel_text {
width: 10%;
height: 50px;
display: inline-block;
white-space: pre-wrap;
vertical-align: top;
} 


.lieferanten_liste {
width: 10%;
display: inline-block;
vertical-align: top;
}