html, body {
    font-family: Arial, Helvetica, Geneva, sans-serif;
    background-color: white;
	color: #A0006B;
	max-width: 600px;
	#margin: auto;
}
table {
	width: 100%;
	font-size: 20px;
	text-align: left;
}
td {
	padding-top: 5px;
	padding-bottom: 5px;
}
a, a:visited {
	text-decoration: none;
}


a:hover {

    text-decoration: none;
}
h1, h2, h3 {
	text-align: center;
}
footer {
	position: sticky;
	bottom: 0;
	height: 65px;
}

.close {
  position: absolute;
  right: 5px;
  top: 5px;
}
#print {
	display: none;
	background-color: wheat;
border: 1px solid;
width: 76vw;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25vh;
margin-left: -38vw;
height: 50vh;
text-align: center;
}
#print button {
background-color: white;
color: #A0006B;
border: 2px solid #A0006B;
width: 50%;
height: 50px;
font-size: 20px;
}



.foot {
background-color: lightgray;
width: calc(100%/3 - 2px);
height: 38px;
float: left;
border: 1px solid;
text-align: center;
}
.trans {
	height: 25px;
	background-image: linear-gradient(to bottom, transparent, white);
	width: 100%;
}
.button {
	
	padding: 15px 30px;
	border: 2px solid #ccc;
	border-radius: 3px;
	position: relative;
	/* Label */
	font-family: Lucida Sans, Helvetica, sans-serif;
	font-weight: 800;
	overflow: hidden;
	text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
	text-align: center;
    text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: white;
    box-shadow: inset 0 0 0 2px rgba(white, 0.2);
    
   
}

.aqua {
background-color: rgba(160, 0, 107, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(160, 0, 107, 0.8)), to(rgba(200, 0, 100, .9)));
border-top-color: #c711b3;
border-right-color: #e522a2;
border-bottom-color: #e21ab0;
border-left-color: #ff15db;
-webkit-box-shadow: rgba(106, 0, 107, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
}
.aqua a{
	color:white;
}
.button .glare {
position: absolute;
top: 0;
left: 0;
height: 25%;
width: 100%;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
}





.buttons {
	height: 100px;
 
background-color: bisque;
margin: 0px;
border: 1px solid violet;
line-height: 100px;
font-size: 30px;
box-shadow: 0px 0px 5px gray;
}
.backbutton {
    height: 25px;
    background-color: lightgray;
    margin: 10px;
    border: 1px solid violet;
    line-height: 25px;
    font-size: 25px;
    box-shadow: 0px 0px 5px gray;
    position: sticky;
    bottom: 5px;
    width: 580px;
	max-width: calc(100% - 20px);
}
	
#camselect {
	float:right;
}
#status {
	text-align: center;
	min-height: 40px;
	line-height: 40px;
}
#offline {
	display: none;
position: fixed;
top: 0;
height: 100%;
color: white;
font-size: 30px;
background-color: red;
width: 100%;
left: 0;
padding-top: 50px;
text-align: center;
    background-color: #00000090;
    font-weight: bold;
}
#newspopup {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 110%;
	width: calc(100% - 50px);
	padding: 25px;
	background-color: antiquewhite;
	font-size: 20px;
	overflow: scroll;
}
select {
	    font-size: 20px;
		margin: 5px;
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid  #A0006B;
  border-bottom: 16px solid  #A0006B;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
animation: spin 3s linear infinite;
position: relative;
left: calc(50% - 76px);
margin-top: 50px;}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.master {
	text-align: left;
	
	width: 100%;
	height: 100%;
	font-size: 20px;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type="number"] {
   -moz-appearance: textfield;
}
button.accordion {
background-color: antiquewhite;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
    border-top-color: currentcolor;
    border-top-style: none;
    border-top-width: medium;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
border-top: 1px solid darkviolet;
}

button.accordion.active,
button.accordion:hover {
	background-color: #A0006B;
	color: white;
}

button.accordion:after {
  content: "\002B";
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2212";
  color: white;
}
.zeile {
	border: 1px solid black;
    #height: 50px;
	line-height: 50px;
	padding: 0 5px;
	position: relative;
	overflow: hidden;
}
span {
	cursor:pointer;
}

.calc {
	width:25px;
	height:30px;
	background:#f2f2f2;
	border-radius:4px;
	#padding:8px 5px 8px 5px;
	border:1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

input.plu{
	height:25px;
    width: 100px;
    text-align: center;
    font-size: 20px;
	border:1px solid #ddd;
	border-radius:4px;
    display: inline-block;
    vertical-align: middle;
}
.artname {
	padding-right: 10px;
	float: left;
	max-width: 350px;
	height: 50px;
	white-space: nowrap;
	font-size: clamp(10px, 1rem, 25px);
	overflow: hidden;

}

.vpe {
	padding: 0 5px;
	float: left;
	background-color: wheat;
	width: 50px;
	text-align: center;
	margin-right: 5px;
	
	white-space: nowrap;
overflow: hidden;
}
.weekday {
	float: right;
	width: 30px;
	margin-left: 5px;
}
.number{
	float: right;
}
div.panel {
 
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel p>span:last-child {
	float:right;
}
.panel p>span:first-child {
	float:left;
	text-align: left;
}
p {
	margin:0;
	padding: 10px 0 10px 10px;
	overflow: auto;
}
p.panel {
	padding: 15px;
}

div.zeile:nth-child(even) {
	background: cornsilk;
}


button.submit {
width: 100%;
border: none;
background-color: white;
font-size: 20px;
}
.input_big {
	width: 90%;
	height: 25 px;
	font-size: 20px;
}