:root {
	--red: #200;
	--orange: #310;
	--green: #020;
	--lite-red: #600;
	--lite-orange: #630;
	--lite-green: #050;
	--sre-red: #D93235;
	--sre-orange: #FEC818;
/*	--border: #CA0;*/
	--border: #750;
}

* {
	font-family: "Nimbus Sans L", "Liberation sans", "Arial Unicode MS", Arial, Helvetica, Garuda, Utkal, FreeSans, sans-serif;
}

::placeholder {
	color: #CCC;
	font-style: italic;
}

body, input, textarea, select, option {
	background-color: #000;
	color:#fff;
}

optgroup {
	background-color: #333;
	color:#fff;
}

a { color: #FD0; }

h1 {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABaFBMVEUAAADLJyjBJyjFJymSLivJJynIJihjKyaDIBxuSEjNAADdbGzvixDx8vLlhBHWJii4BzG+BzDPJijV2drb2drB2tu8KCna19jBJyiyiRiYdxK0mBi0KCnS2tyrpaeKa2ublJeGBADVJij////ZJijUJSjgJSj9yQDVKCjNAAHNBTDWKivUIinOBQfLADHODC7QDhD/6wD+xwDPEC3SGSvUIyXTGRrPCgz/3gD+zwDSGyrXLijUISPtiRH/8wD/5wD/2gD/0wD+ywD76enxtbbfW1zbREXRFSzTHyrTHiDiWxvnbxbRExXxmQz2rAf/7QD/4gD88PDvpKTnjY3iZ2jgYGHdVFTaPj/YNTbSHirdGCrlJSjZNSTmaRfqfRPzoAr4tgX//wD319f20dH1y8zvra3qlJTlenrkc3Tjb3DeWFnaKSrhICnlMiXeTx/eTR/YGx7vkg70pQr2sgj6vQT/vgPQAQL/+QBt85zfAAAAInRSTlMAzJTaIdqhGRkT9fPw7+vj2dnXxry5rpyVkYiAf3lSRiwgAFGnXQAAAbNJREFUOMt90mV3qzAYwPHeuzu77j5LSCHBoS1129qutnbu7u7b1x8EurOSdf935PmdHM4DAbbhXwP9gc4Nfoc/fEf9bx4bGfoG4YfevtZzHwW/OUQTI3ga2r17e4zcuFcU9AQ5t7spZz4aueC8gl8peM0BJxEfQqcpLAAv7wYPlCOTFOxj8DywCpA2K3cA+MAFcxZAkvAMkGdccGShBFoUWFCbd0HBklYqccSCZG2LgqIG1PqqKjAAyWPuGsqAXOZNqROYxgIgqc1zlQFhbdu5oBYBofGb+xRhgLYA7RZkUVCqenSiJPmAiPcgnCxie76SzWU30Hg7EHERwjGARaQkYk0juyG1g6Q2C3cKspYIKWe5psFn1k30FISTc7szFg4nzFIqEzV4vlEloA2I85qcFIVS6Dods+fRPIq3ARAuO7uV1PU0b5dLVwizSSe1oufteSy9RhzPAKTWdWfeWCPM16RJoYkoz+cbKSUugI7A0K+IO2cBMusZPhtDpjdnX5JUdUNfVfx/dc9y0GvpNNe8PVkKtlr+RMH/7q5Wn99vfvzS9Vj3z4C/3syfwMv9/ec7eACkUn1a1UOEsAAAAABJRU5ErkJggg==') no-repeat 0 center;
	margin:0 0 0.25em;
	padding-left: 40px;
}
h1 span { float:right; }
h1 a { text-decoration: none; }

table { border-collapse: collapse; width: 100%;  }
table, th, td { margin-top:0.25em; border: 1px solid var(--border); min-width: 3em; }
tfoot tr:first-child td { border-top-width: 4px; }
th { background-color: #222; padding: 0.5em 1em; }
td { padding:0.5em; position: relative; text-align:center; }
table:not(.no-hover) tbody tr:hover { background-color: #047 !important; }
table:not(.no-hover) tbody tr:hover td { border: 1px solid #99F; box-shadow: 0 0 1px #047 inset; }
#bezorger-app td { padding: 1em; }
/*tbody tr[class=""]:nth-child(odd) {background: #111;}*/

tr.late {border-left: 5px solid #F00; background-color: var(--red);}
tr.almost-late {border-left: 5px solid #FA0; background-color: var(--orange);}
tr.on-time {border-left: 5px solid #0F0; background-color: var(--green);}

button {
	background-color: #333;
	border: 1px solid #666;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	min-height:3em;
	min-width: 3em;
	padding: 0 0.25em;
}
button + button {margin-left:1em;}
button.backorder { background-color: var(--lite-orange); border: 1px outset var(--orange); }
button.cancel { background-color: var(--lite-red);  border: 1px outset var(--red); }
button.delivered,
button.submit { background-color: var(--lite-green);  border: 1px outset var(--green); }

input:not([type="checkbox"]), select, textarea {
	border-radius: 4px;
	border: 1px solid #999;
	box-sizing: border-box;
	font-size: 14px;
	height: 2em;
	line-height: 2em;
	padding: 0 0.25em;
}
input:focus, select:focus, textarea:focus {
	border-color: #fff;
}
textarea {
	height: 6em;
}

/*
 * MAIN MENU
 */

#menu {
	background-color: #000;
	cursor:default;
/*
	position:relative;
	top:0;
*/
	right:0;
	position: absolute;
	top: 7px;
}
#menu input {
	color:#000;
	text-shadow: none;
}

#menu > ul {
	background-color:rgba(0,0,0,0.8);
	border:1px solid var(--border);
	margin:0;
	list-style: none;
	position:fixed;
	left: 8px;
	right: 8px;
	bottom: 8px;
	padding: 0;
	top: 54px;
	z-index: 999999999;
}

#menu li {
	border-bottom:1px solid var(--border);
	line-height: 250%;
	margin:0;
	padding:0 10px;
	position:relative;
	vertical-align: top;
	white-space: nowrap;
}
#menu li:hover {
	background-color: #000;
}
#menu li label {
	display: block;
	margin-left: 4em;
}

#menu > input[type="checkbox"],
#menu > input[type="checkbox"]:not(:checked) ~ ul {
	display: none;
}
#menu input[type="radio"] {
	display: none;
}
#menu input[type="radio"] ~ span {
	border: 2px solid transparent;
	border-radius: 2px;
	padding: 5px;
}
#menu input[type="radio"]:checked ~ span {
	border-color: #0F0;
}

#menu a { display:block; text-decoration: none; }
#menu a:hover { color:#fff; }

#menu > label {
	background: #222;
	border-radius: 5px;
	content: "☰";
	cursor: pointer;
	display: block;
	height: 40px;
	position: absolute;
	right: 10px;
	top: 0;
	width: 40px;
	z-index: 1000000000;
}
#menu > label::after{
	background: #FFF;
	border-radius: 2px;
	box-shadow: 0px 10px 0px #FFF, 0px 20px 0px #FFF;
	content:'';
	display: block;
	height: 5px;
	margin: 7px 5px;
	width: 30px;
}

@media only screen and (min-width: 1024px) {
	html:not(#bezorger-app) #menu {
		position: inherit;
    }
	html:not(#bezorger-app) #menu > ul {
		border: 0;
		display: block !important;
		position: inherit;
	}
	html:not(#bezorger-app) #menu li {
		display: inline-block;
	}
	html:not(#bezorger-app) #menu > label {
		display: none;
	}
}

#login {
	text-align: center;
}

#login * {
	font-size: 24px;
}
#login h1 {
	padding: 0;
}
#login input:not([type="email"]) {
	padding: 0.5em;
	text-align: center;
	width: 5em;
	-webkit-text-security: disc;
	-moz-webkit-text-security: disc;
	-moz-text-security: disc;
}

#backorder {
	background: rgba(0,0,0,0.5);
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
#backorder form {
	background: #000;
	border: 2px solid #000;
	margin: 2em auto;
	padding: 2em;
	width: 60vw;
}
#backorder textarea {
	height: 6em;
	width: 40em;
}

#caterers span,
#bezorgers span {
	border-radius: 2px;
	display:inline-block;
	margin:0.25em 0.25em 0.25em 0;
	padding:0.25em;
	cursor: pointer;
}

#caterers .inactive,
#bezorgers .inactive { background-color: #660; opacity: 0.7; }
#bezorgers .onderweg { background-color: var(--lite-red); }
#bezorgers .retour { background-color: var(--lite-orange); }
#caterers .available,
#bezorgers .available { background-color: var(--lite-green); }

#admin td { text-align:center }

.home {
	color: #0F0 !important;
	border-color: #0F0 !important;
}
.nohome {
	background-color: #300 !important;
	border-color: #F00 !important;
	color: #F00 !important;
}

.called::before {
	content: '📱';
	font-size: 2em;
	position: absolute;
	right: 2px;
	top: 0;
}
#bezorger-app .called::before {
	top: 10%;
}
.called::after {
	content: '✓';
	font-size: 1.5em;
	position: absolute;
	color: #0F0;
	right: 4px;
}

input[type="date"] { width: 9.5em; }
input[type="week"] { width: 9.5em; }
input[type="time"] { width: 7.5em; }
input[type="month"] { width: 11.5em; }
input::-webkit-calendar-picker-indicator{
	filter: invert(100%);
}

#orders-page h1 code.start {
	animation: mymove 30s infinite;
}
@keyframes mymove {
  0% {color: #FFF;}
  80% {color: #FFF;}
  100% {color: #F00;}
}