body { font-family: arial; text-align: center; }
#logo { margin-bottom: 20px; position: absolute; left: 10px;}
.knoppen { display: block; font-size: 25px; padding: 5px; margin: 10px; background-color: #FF9933; text-decoration: none; font-weight: bold; color: white; border: 1px solid black; border-radius: 5px;}
.knop { -webkit-appearance: none; -moz-appearance: none; appearance: none;  width: 80%; font-size: 30px; text-align: center; padding: 5px; margin: 10px; background-color: #FF9933; text-decoration: none; font-weight: bold; color: white; border: 1px solid black; border-radius: 5px;}
.waarschuwing { width: 80%; font-size: 30px; text-align: center; padding: 5px; margin: 10px; background-color: #FF6666; text-decoration: none; font-weight: bold; color: black; border: 3px solid #CC0000; border-radius: 5px; display: block;}
#uren { width: 80%; font-size: 30px; text-align: center; padding: 5px; margin: 10px;}
#datum { width: 80%; font-size: 20px; text-align: center; padding: 5px; margin: 10px;}
#van { width: 80%; font-size: 30px; text-align: center; padding: 5px; margin: 10px;}
#tot { width: 80%; font-size: 30px; text-align: center; padding: 5px; margin: 10px;}
#vandatum { width: 80%; font-size: 30px; text-align: center; padding: 5px; margin: 10px;}
#totdatum { width: 80%; font-size: 30px; text-align: center; padding: 5px; margin: 10px;}
#reden { width: 80%; font-size: 30px; text-align: center; padding: 5px; margin: 10px;}
#urenknoppen { width: 80%; padding: 5px; margin: 10px;}
#discipline { width: 80%; font-size: 20px; text-align: center; padding: 5px; margin: 10px;}
#hoofd_discipline { width: 80%; font-size: 20px; text-align: center; padding: 5px; margin: 10px;}
#soort { width: 80%;  font-size: 20px; }
#montage { width: 49%; text-decoration: none; font-size: 25px; color: black; border: 1px solid black; border-top-left-radius: 5px; border-bottom-left-radius: 5px; float: left; }
#productie { width: 49%; text-decoration: none;  font-size: 25px; color: black; border: 1px solid black; border-top-right-radius: 5px; border-bottom-right-radius: 5px; float: left; }
.check { background-color: #FF9933; }
table.uren_totaal { width: 100%; border: 1px solid black; margin-bottom: 10px; border-collapse: collapse;}
table.uren_totaal th { margin: 0; padding: 3px; border: 1px solid black; }	
table.uren_totaal td { margin: 0; padding: 3px; border: 1px solid black; }
span.waarschuwing {
							 background-color: #ff7c7c;
							 background-image: url('/images/icons/waarschuwing.png'),url('/images/overgang_rood_20.png');
							 background-repeat:  no-repeat,repeat-x;
							 background-position: left,top;
							 border-style: solid solid solid solid; 
							 border-width: 1px; 
							 border-radius: 5px;
							 border-color: #bc0000;
							 display: block;
							 padding: 7px 5px 7px 50px;
							 margin-bottom: 10px;
							 font-weight: bold;
							 }
span.waarschuwing a { text-decoration: none; color: black; }
span.waarschuwing a:hover { text-decoration: underline; color: black; }
span.melding {
							 background-color: #bdedff;
							 background-image: url('/images/icons/info.png'),url('/images/overgang_blauw_20.png');
							 background-repeat:  no-repeat,repeat-x;
							 background-position: left,top;
							 border-style: solid solid solid solid; 
							 border-width: 1px; 
							 border-radius: 5px;
							 border-color: #00baff;
							 display: block;
							 padding: 7px 5px 7px 50px;
							 margin-bottom: 10px;
							 font-weight: bold;
							 }
span.melding a { text-decoration: none; color: black; display: block; }		
span.melding a:hover { text-decoration: underline; color: black; }
#mailbox { position: absolute; top: 25px; right: 30px; width: 80px; height: 70px; }
#mailbox img { width: 68px; height: 45px; border: none; }
@keyframes blink { 0% { background: none; } 33% { background-color: white;} 66% { background-color: #FF9933;}}
@-webkit-keyframes blink { 0% { background: none; } 33% { background-color: white;} 66% { background-color: #FF9933;}}
#mailbox img.ongelezen { animation: blink 1s step-start 0s infinite; -webkit-animation: blink 1s step-start 0s infinite; }
#ongelezen { position: absolute; top: 20px; right: 25px; width: 30px; height: 25px; border-radius: 10px; background-color: #FF9933; border: 1px solid #FF9933; color: white; font-size: 20px;}
/** tabellen en lijsten ------------------------------------------------------------------------------ **/
table.lijst { width: 100%; border-spacing: 0; border-collapse: collapse; }
table.lijst th { background: linear-gradient(#9c9c9c,#dedede); border-top: 1px solid black; font-weight: bold; font-size: 13px; padding: 3px; }
table.lijst td { font-size: 12px; padding: 3px; }
table.lijst tr.grijs { background: linear-gradient(#ffffff,#eeeeee); }
table.lijst tr.grijs:hover { background: linear-gradient(#eeeeee,#dddddd); }
table.lijst tr.grijs td { border-bottom: 1px solid #c8c8c8; }
table.lijst tr.oranje { background: linear-gradient(#ffbf00,#ff8000); }
table.lijst tr.oranje:hover { background: linear-gradient(#eeeeee,#ff8000); }
table.lijst tr.oranje td { border-bottom: 1px solid #c8c8c8; }
table.lijst a { display: block; text-decoration: none; color: black; }

/** popup voor automatisch uitloggen etc =================-============== **/
.popup_bg { opacity: 0.85; background-color: black; width: 100%; height: 100%; position: fixed; 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: black;}
	76%{opacity: 1;background-color: black;}
	77%{opacity: 0;background-color: black;}
	78%{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;}
}	
.popup 				 {			 
			 				 position: fixed;
							 top: 40%;
							 left: 50%;
							 min-left: 10px;
							 margin-top: -75px;
							 margin-left: -200px;
							 width: 400px;
							 max-width: calc(100% - 30px);
							 max-height: 400px;
							 border: 1px solid #a8a8a8;
							 background-color: white;
							 padding: 3px;
							 box-shadow: 0px 0px 10px 5px rgba(107,107,107,1);
							 }
@media (max-width: 500px) {
  .popup {
    left: 10px;
	margin-left: 5px;
  }
}							 
.popup .basis { width: 100%; }
.popup a.sluiten, .popup_groot a.sluiten, .extragroot a.sluiten		{ position: absolute; top: -15px; right: -15px; }
.popup img.sluiten, .popup_groot img.sluiten, .extragroot img.sluiten		{ width: 25px; height: 25px; border: none; }
.popup h3 			 {
			 				background: linear-gradient(#ffffff,#a8a8a8); 
								font-size: 13px;
								color: black;
								padding: 3px;
								margin: -3px;
							  }
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%}
    25%{background-position:40% 100%}
    50%{background-position:60% 100%}
    75%{background-position:100% 100%}
    100%{background-position:100% 100%}
}