/*
Hallo,

Wat leuk dat je even in deze CSS broncode komt kijken, gezellig!
Deze website is gemaakt door RAC Media. Heb je vragen, neem dan contact met ons op!

Wil je de code kopieren, dan vinden we het niet zo fijn maar we houden je niet tegen.

*/
 

/* Algemeen ========================================================================================================================== */
body { background-color: #fafafa; background: linear-gradient(#fafafa,#ffffff); margin: 0; padding: 0; font-family: helvetica; font-size: 12px;}
* { box-sizing: border-box;}
#logo { z-index: -999; position: fixed; bottom: 0px; right: 0px; width: 20%; height: auto; animation: logo 10s infinite; animation-iteration-count: 1; filter: grayscale(90%); opacity: 0.25;}
@media screen and (min-width: 901px) {
#logo { width: 20%;}
}
@media screen and (max-width: 900px) {
#logo { width: 30%;}	
}
@keyframes logo { from { filter: grayscale(0%); opacity: 1;} to { filter: grayscale(100%); opacity: 0.25;} }
#wrapper { height: 100%; margin: 0; padding: 0; overflow: auto;}
#header { width: 100%; background-color: #FF9933; background: linear-gradient(#FF9933,#ff8c1a); position: fixed; top: 0; left: 0; border-bottom: 2px solid #000000;}
@media screen and (min-width: 901px) {
#header { height: 60px; }
.schaduw { box-shadow: 5px 5px 6px #888888; }
#header h1 { margin: 10px 0px 0px 10px; color: #ffffff; font-size: 2.7em; }
}
@media screen and (max-width: 900px) {
#header { height: 50px; }
#header h1 { margin: 10px 0px 0px 60px; color: #ffffff; font-size: 1.9em;}
.schaduw { box-shadow: 5px 5px 6px #888888; }
}
span.fouten_melding { display: block; border: 1px solid white; background-color: #ff4d4d; padding: 3px; color: black; margin-bottom: 5px; font-size: 1.6em;}
span.opgeslagen { display: block; border: 1px solid black; background: linear-gradient(#00ff00,#00cc00);  padding: 3px; color: black; margin-bottom: 5px; font-size: 1.6em;}
span.melding { display: block; border: 1px solid black; background: linear-gradient(#000000,#333333);  padding: 3px; color: white; margin-bottom: 5px; font-size: 1.6em;}

.pick_vak { display: block; border: 1px solid black; margin-bottom: 10px; text-align: center; text-decoration: none;}


@media screen and (max-width: 1000px) {
.pc { display: none; }
}

#footer { width: 100%; height: 8px; background-color: #007fc7; position: fixed; bottom: 0; left: 0; }

/* Menu =============================================================================================================================== */
#menu_mobiel { position: absolute; border: 2px solid #ffffff; border-radius: 3px; cursor: pointer; display: block; height: 30px; padding: 3px 4px 3px 5px;  background: #000000; top: 8px; left: 10px; }
#menu_mobiel #strepen {width: 30px; float: right; margin-left: 0px; }
#menu_mobiel #strepen div { background-color: #FF9933; border: 1px solid #ffffff; border-radius: 2px; height: 2px; margin-top: 4px; margin-bottom: 2px; width: 90%; }
#menu_sluit { height: 100%; width: calc(100% - 200px); position: fixed; top: 0; left: 200px; display: none; background-color: rgb(100,100,100); opacity: 0.8; z-index: 500;}
#menu { width: 200px; background-color: #FF9933; position: fixed; left: 0; z-index: 990; overflow-y: auto;}
#menu ul { width: 100%; padding: 0px; margin: 0px 0px 0px 0px; text-align: left; list-style: none; }
#menu ul li { border-bottom: 1px solid #000000; }
#menu ul li a { display: block; color: #ffffff; background: linear-gradient(#FF9933,#ff8c1a); text-decoration: none; padding: 7px; padding-bottom: 15px; font-size: 1.4em; position: relative; padding-left: 10px;}
#menu ul li a.actief { color: #FF9933; background: linear-gradient(#fafafa,#ffffff); }
@media screen and (max-width: 900px) {
#menu { display: none; top: 52px; height: calc(100% - 52px);}
#menu ul { margin: 0px; }
}
@media screen and (min-width: 901px) {
#menu_sluit { display: none; }
#menu { display: block; top: 62px; height: calc(100% - 62px); }
#menu ul { margin: 0px 0px 0px 0px; }
#menu ul li a:hover { color: #FF9933; background: linear-gradient(#fafafa,#ffffff); }
#menu_mobiel { display: none; }
}

/* Content =========================================================================================================================== */
#content { max-width: 1300px; } 

@media screen and (min-width: 901px) {
#content { width: calc(100% - 290px); padding: 20px; margin: 80px 0px 0px 250px;}
#content h1 { font-size: 2.5em; color: #000000; font-weight: bold; margin-top: 0px;}
#content h2 { font-size: 1.8em; color: #231f20; font-weight: bold; margin-top: 10px;}
#content p.inleiding { font-weight: bold; font-size: 1.2em; line-height: 1.7em; color: #231f20; }
#content p.tekst { font-size: 1em; line-height: 1.6em; color: #231f20; }
img.afbeelding { width: calc(100% - 2px); height: auto; border: 1px solid #007fc7;}
.slider { width: calc(100% - 2px); display: block; overflow: hidden;}
.slider img.slider_foto { width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #007fc7; float: left !important; display: inline-block;}
}
@media screen and (max-width: 900px) {
#content { width: 100% - 20px); margin: 65px 0px 0px 0px; padding: 10px;}
#content h1 { font-size: 2.0em; color: #000000; font-weight: bold; margin-top: 0px;}
#content h2 { font-size: 1.5em; color: #231f20; margin-top: 10px; font-weight: bold;}
#content p.inleiding { font-weight: bold; font-size: 1.2em; line-height: 1.7em; color: #231f20; }
#content p.tekst { font-size: 1em; line-height: 1.6em; color: #231f20; }
img.afbeelding { width: calc(100% + 18px); margin: 0px -10px 0px -10px; height: auto; border: 1px solid #007fc7;}
.slider { width: calc(100% + 20px); display: block; margin: 0px -10px 0px -10px;  overflow: hidden; }
.slider img.slider_foto { width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #007fc7; float: left !important; display: inline-block;}
}

table.overzicht { width: 100%; border-spacing: 0; border-collapse: collapse; }
table.overzicht th { text-align: left; background: linear-gradient(#9c9c9c,#dedede); border-top: 1px solid black; font-weight: bold; font-size: 13px; padding: 3px; }
table.overzicht td { font-size: 12px; padding: 3px; }
table.overzicht tr { background: linear-gradient(#ffffff,#eeeeee); }
table.overzicht tr:hover { background: linear-gradient(#eeeeee,#dddddd); }
table.overzicht a { display: block; text-decoration: none; color: black; }


div.tabbladen { width: calc(100%); height: 23px; border-bottom: 1px solid #c8c8c8;}
div.tabbladen ul { width: 100%;  height: 23px; display: flex;
  flex-direction: row;
  justify-content: flex-start; white-space: nowrap; list-style-type: none; margin: 0px auto 0px auto; padding: 0px;  }
div.tabbladen li { float: left; display: inline;}
div.tabbladen a { display: block; height: 20px; text-decoration: none; color: #000000; background-color: #c8c8c8; font-size: 13px; font-weight: bold; padding: 2px 6px 0px 6px; border: 1px solid #c8c8c8; border-bottom: 0px; border-top-left-radius: 8px; border-top-right-radius: 8px; margin: 0px 5px 0px 5px;}
div.tabbladen a.actief { background-color: #ffffff; height: 21px; }
div.tabbladen a:hover { text-decoration: none !important; }


@media screen and (min-width: 1001px) {
#content_links { float: left; width: calc(60% - 15px); margin-right: 15px;}
#content_rechts { float: left; width: calc(40% - 15px); margin-left: 15px;}
}
@media screen and (max-width: 1000px) {
#content_links { width: 100%; }
#content_rechts { width: 100%; }	
}
@media screen and (max-width: 380px) {
.knoppen { width: calc(100% - 32px); display: block; font-size: 16px; padding: 5px; text-align: center; margin: 10px; background-color: #FF9933; text-decoration: none; font-weight: bold; color: white; border: 1px solid black; border-radius: 5px;}
.knop { width: calc(100% - 12px); -webkit-appearance: none; -moz-appearance: none; appearance: none;  display: block; font-size: 16px; text-align: center; padding: 5px; margin: 10px 0px 10px 0px; background-color: #FF9933; text-decoration: none; font-weight: bold; color: white; border: 1px solid black; border-radius: 5px;}
input[type=tel] { width: calc(100% - 32px); display: block; font-size: 16px; padding: 5px; text-align: center; margin: 10px; text-decoration: none; font-weight: bold; color: black; border: 1px solid black; border-radius: 5px;}
br.zebra { clear: both; }
div.positie_scannen { float: left; width: 100%; }
div.legenda_container { float: left; width: 100%; }
div.legenda { margin: 5px 5px 5px 5px; width: calc(100% - 22px); border: 1px solid black; padding: 5px; background-color: #e2e2e2; }
div.legenda span { display: inline-block; width: 30%; font-size: 10px; color: white; padding: 3px; border: 1px solid black; margin-top: 3px; text-align: center; }
}
@media screen and (min-width: 381px) {
.knoppen { width: calc(100% - 32px); display: block; font-size: 25px; padding: 5px; text-align: center; margin: 10px; background-color: #FF9933; text-decoration: none; font-weight: bold; color: white; border: 1px solid black; border-radius: 5px;}
.knop { width: calc(100% - 12px); -webkit-appearance: none; -moz-appearance: none; appearance: none;  display: block; font-size: 30px; text-align: center; padding: 5px; margin: 10px 0px 10px 0px; background-color: #FF9933; text-decoration: none; font-weight: bold; color: white; border: 1px solid black; border-radius: 5px;}
input[type=tel] { width: calc(100% - 32px); display: block; font-size: 25px; padding: 5px; text-align: center; margin: 10px; text-decoration: none; font-weight: bold; color: black; border: 1px solid black; border-radius: 5px;}
br.zebra { display: none; }
div.positie_scannen { float: left; width: 68%; }
div.legenda_container { float: left; width: 32%; }
div.legenda { margin: 5px 5px 5px 5px; width: calc(100% - 22px); border: 1px solid black; padding: 5px; background-color: #e2e2e2; }
div.legenda span { display: block; background-color: #33cc33; color: white; padding: 3px; border: 1px solid black; margin-top: 3px; text-align: center;}
}

/* Formulieren ======================================================================================================================== */
.formulier input[type=text], input[type=password], input[type=time], textarea, select { background: transparent !important; border: 1px solid rgb(91,103,112);}
.formulier input[type=text]:focus, input[type=password]:focus, input[type=time]:focus, textarea:focus, select:focus {  border: 3px solid #007fc7; background: linear-gradient(#ffffff,#007fc7); box-shadow: 3px 3px 3px #888888;}
.formulier input[type=submit]:hover { box-shadow: 3px 3px 3px #888888; }
@media screen and (max-width: 860px) { 
.formulier label { color: rgb(91,103,112); display: block; margin: 3px 0px 3px 0px;}
.formulier input[type=text], input[type=password], input[type=time] { width: calc(100% - 8px); padding: 4px; font-size: 1em; }
.formulier select { width: 100%; padding: 4px; font-size: 1em;}
.formulier input[type=submit] { width: 100%; padding: 4px; color: rgb(91,103,112); background: linear-gradient(#ffffff,#007fc7); border: 1px solid #007fc7; border-radius: 5px; font-size: 1em; font-weight: bold; margin-top: 5px; color: white;}
.formulier textarea { font-size: 1em; font-family: "Arial", cursive, sans-serif; width: calc(100% - 4px); min-height: 120px;}
}
@media screen and (min-width: 860px) { 
.formulier label { color: rgb(91,103,112); float: left; width: 150px; height: 25px; margin-bottom: 3px; }
.formulier input[type=text], input[type=password], input[type=time] { width: 400px; float: left; padding: 3px; font-size: 1em; height: 25px; margin-bottom: 3px;}
.formulier select { width: 408px; float: left; padding: 3px; font-size: 1em; height: 25px; margin-bottom: 3px;}
.formulier input[type=submit] { width: 142px; padding: 3px; color: rgb(91,103,112); background: linear-gradient(#ffffff,#007fc7); border: 1px solid #007fc7; border-radius: 5px; font-size: 1em; font-weight: bold; margin-top: 5px; color: white;}
.formulier textarea { font-size: 1em; font-family: "Arial", cursive, sans-serif; width: calc(100% - 154px); float: left; min-height: 80px;}
.formulier textarea:focus { width: calc(100% - 158px); }
}

input[type=text].reden { font-size: 1.0em; width: 250px; height: auto; margin-top: 5px; }

@media screen and (max-width: 380px) {
table.picklijst { width: 100%; border: 1px solid black; margin-bottom: 10px; border-collapse: collapse; font-size: 1.0em;}
}
@media screen and (min-width: 381px) {
table.picklijst { width: 100%; border: 1px solid black; margin-bottom: 10px; border-collapse: collapse; font-size: 1.7em;}
}
table.picklijst th { text-align: left; margin: 0; padding: 3px; border: 1px solid black; }	
table.picklijst td { text-align: left; margin: 0; padding: 3px; border: 1px solid black; }	

.popup_bg { opacity: 0.80; background-color: black; width: 100%; height: 400%; position: absolute; top: 0; left: 0; z-index: 998; }
.popup { z-index: 999; }
@media screen and (max-width: 380px) {
.popup { position: fixed; border: 4px solid #FF9933; top: 10%; left: 20px; margin-top: auto; font-size: 12px; margin-left: auto; width: calc(100% - 50px); height: 375px; overflow-y: auto; background-color: white; padding: 5px;}
.popup h1 { font-size: 12px; }
.popup .knop { cursor: pointer; border: 2px solid black; padding: 3px 15px 8px 45px; border-radius: 10px; font-size: 14px; 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.2em; color: black; font-weight: bold; position: relative; border: 2px solid black; }

}
@media screen and (min-width: 381px) {
.popup { position: fixed; border: 4px solid #FF9933; top: 10%; left: 20px; margin-top: auto; margin-left: auto; width: calc(100% - 50px); height: 250px; overflow-y: auto; background-color: white; padding: 5px;}
.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; }

}
@media screen and (min-width: 900px) {
.popup { position: fixed; border: 4px solid #FF9933; top: 10%; left: calc(50% - 250px); margin-top: auto; margin-left: auto; width: 500px; height: 250px; overflow-y: auto; background-color: white; padding: 5px;}
.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; }

}

.popup table#zaaglijst { margin: 30px 0px 30px 0px; width: 100%; }

.ingelogdblijven_bg { z-index: 9998; 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 {  z-index: 9999; position: fixed; border: 4px solid #FF9933; top: 10%; left: 140px; margin-top: auto; margin-left: auto; width: calc(100% - 300px); 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;
  }
}	

#signature{
width: 90%; max-width: 350px; height: 150px; border: 1px solid grey; position: relative; }
#signature canvas { width: 100% !important; height: 100% !important; }
#leegmaken { position: absolute; top: 3px; right: 3px; font-size: 1.5em; }