body { background-color: #FF9933; margin: 0; padding: 0; font-family: verdana; font-size: 14px;}
#inlogvak { font-size: 1.2em; animation: fadein 5s; background-color: white; position: fixed; top: 25%; left: 50%; margin-top: -75px; margin-left: -150px; width: 300px; height: auto; border: 1px solid #a8a8a8; padding: 3px;}
@keyframes fadein { from { opacity: 0;} to { opacity: 1; }}
#inlogvak label { display: block; float: left; margin: 2px 4px 6px 0px; text-align: left; width: 140px; }
#menu { width: 100%; position: relative; background-color: grey; height: 55px; border-bottom: 1px solid black; }
#menu .knoppen { position: absolute; right: 10px; top: 5px; }
#menu .knoppen a { float: left; text-decoration: none; background-color: white; border: 1px solid black; margin-top: 2px; padding: 10px; font-size: 18p; color: black; margin-Left: 10px; }
#menu .knoppen a.keuze { background-color: #ff9933; border: 3px solid black; margin-top: 0px; }
#menu ul { width: auto; height: 100%; padding: 0px; margin: auto; display: inline-block; list-style: none; text-align: center;}
#menu ul li { float: left; height: 100%; }
#menu ul li a { font-size: 1.6em; font-weight: bold; background-color: white; color: black; display: block; height: calc(100% - 25px); text-align: center; text-decoration: none; padding: 15px 25px 10px 25px; border-top: 1px solid black; border-right: 1px solid black; }
#menu ul li a:hover, #menu ul li a.actief { padding-bottom: 10px; border-bottom: 1px solid #FF9933; color: black; background-color: #FF9933; }
table#zaaglijst { margin: 50px 15px 0px 15px; width: calc(100% - 30px); border-spacing: 0; border-collapse: collapse; font-size: 1.5em; background-color: white;}
table#zaaglijst th { border: 1px solid black; border-top: 4px solid black; }
table#zaaglijst td { border: 1px solid black; text-align: center; vertical-align: middle; padding: 5px; }
table#zaaglijst td.nieuw { border-top: 4px solid black; }
table#zaaglijst tr.hover { background-color: lime; cursor: pointer; }
table#zaaglijst td a { display: block; color: black; text-decoration: none; }
.popup_bg { opacity: 0.90; background-color: black; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.ingelogdblijven_bg { opacity: 0.85; background-color: black; width: 100%; height: 100%; position: fixed; top: 0; left: 0; animation: ingelogdblijvenbg 32s ease infinite;}
@keyframes ingelogdblijvenbg {
    0%{opacity: 0;background-color: black;}
	10%{opacity: 0.25;background-color: black;}
	20%{opacity: 0.5;background-color: black;}
	30%{opacity: 0.75;background-color: black;}
	40%{opacity: 0.85;background-color: black;}
    50%{opacity: 0.90;background-color: black;}
    69%{opacity: 0.95;background-color: black;}	
	70%{opacity: 1;background-color: black;}
	71%{opacity: 0;background-color: black;}
	72%{opacity: 1;background-color: red;}
	73%{opacity: 1;background-color: black;}
	76%{opacity: 1;background-color: black;}
	77%{opacity: 0;background-color: black;}
	78%{opacity: 1;background-color: red;}
	79%{opacity: 1;background-color: black;}
	81%{opacity: 1;background-color: black;}
	82%{opacity: 0;background-color: black;}
	83%{opacity: 1; background-color: black;}
    100%{opacity: 1; background-color: red;}
}	
a.inlogdblijven { display: block; text-align: center; padding: 5px; background-color: #43ca1b; background: linear-gradient(90deg, #43ca1b,#ca1b1b);
background-size: 400% 100%; color: black; text-decoration: none; border: 2px solid black; border-radius: 8px; font-size: 20px; animation: ingelogdblijven 30s ease infinite; animation-delay: 5s; animation-iteration-count: 1;}
@keyframes ingelogdblijven {
    0%{background-position:0% 100%}
    24%{background-position:0% 100%}
    25%{background-position:40% 100%}
    49%{background-position:40% 100%}
    50%{background-position:60% 100%}
    74%{background-position:60% 100%}
    75%{background-position:100% 100%}
    100%{background-position:100% 100%}
}	
.popup_ingelogdblijven { position: fixed; border: 4px solid #FF9933; top: 10%; left: 340px; margin-top: auto; margin-left: auto; width: calc(100% - 700px); height: 250px; background-color: white; padding: 5px;}
.popup_ingelogdblijven h3 { margin: -5px -5px 10px -5px; background-color: #FF9933; padding: 5px; color: black; width: calc(100% + 0px); }
@media (max-width: 500px) {
  .popup_ingelogdblijven {
    width: calc(100% - 300px); 
	left: 10px;
	margin-left: 5px;
  }
}	
.popup { position: fixed; border: 4px solid #FF9933; top: 10%; left: 20px; margin-top: auto; margin-left: auto; width: calc(100% - 50px); height: 250px; background-color: white; padding: 5px;}
.popup table#zaaglijst { margin: 30px 0px 30px 0px; width: 100%; }
.popup .knop { cursor: pointer; border: 2px solid black; padding: 3px 15px 8px 45px; border-radius: 10px; font-size: 1.8em; color: black; font-weight: bold; text-decoration: none; position: relative;}
.popup a.knop img { width: 30px; height: 30px; position: absolute; top: 5px; left: 5px; }
.popup a.knop:hover { border: 4px solid black; }
.popup select { font-size: 1.8em; color: black; font-weight: bold; position: relative; border: 2px solid black; }
#afhaalbonknop { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: white; border: 2px solid black; padding: 3px 15px 8px 15px; border-radius: 10px; font-size: 1.8em; color: black; font-weight: bold; text-decoration: none; position: relative; margin: 10px;}
#barcode { position: relative; font-size: 2.2em; width: 300px; height: 50px; margin-top: 30px; text-align: center; margin-left: calc(50% - 150px);} 
.melding { display: block; border: 2px solid black; padding: 10px; font-size: 1.3em; background-color: white; text-align: center; margin: 30px 20px 0px 20px;}
.goed {
    -moz-animation: verberg 0s ease-in 2s forwards;
    /* Firefox */
    -webkit-animation: verberg 0s ease-in 2s forwards;
    /* Safari and Chrome */
    -o-animation: verberg 0s ease-in 2s forwards;
    /* Opera */
    animation: verberg 0s ease-in 2s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes verberg {
    to {
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes verberg {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}
h1 { width: calc(100% - 30px); padding: 0px 15px 0px 15px; font-weight: bold; font-size: 30px; }
h3 { width: calc(100% - 30px); padding: 0px 15px 0px 15px; font-weight: bold; font-size: 18px; }
.knoppen a { float: left; text-decoration: none; background-color: white; border: 1px solid black; margin-top: 2px; padding: 10px; font-size: 18p; color: black; margin-Left: 10px; }
.knoppen a.keuze { background-color: #ff9933; border: 3px solid black; margin-top: 0px; }