body { background-color: #ffffff; height: 100%; font-family: verdana; font-size: 11px; padding: 0; margin: 0;}
* { box-sizing: border-box;}
a { text-decoration: none; }
a img { border-style: none; }
div.container { width: 100%; min-height: calc(100vh - 70px); text-align: left; }

#header { width: 100%; border-bottom: 1px solid #c0c0c0; display: block;}
.header_groot { position: relative; height: 72px; padding: 5px; background-color: #efefef; z-index: 100;}
.header_klein { position: fixed; top: 0; height: 56px; padding: 3px 5px 5px 5px; box-shadow: 3px 3px 4px #a8a8a8; background-color: #efefef; z-index: 100;}
.header_groot #logo { display: block; width: 217px; height: 100px; float: right;}
.header_groot #logo_tekst { display: none; }
.header_klein #logo { display: none; }
.header_klein #logo_tekst { width: 162px; height: 55px; float: right;}

@media screen and (max-width: 1800px) { 
#menu { width: calc(100% - 240px); float: left;} 
}
@media screen and (min-width: 1800px) { 
#menu { width: calc(100% - 240px - 0px); margin-left: 0px; float: left;} 
}
#menu ul.hoofdmenu { list-style-type: none; margin: 0 !important; padding: 0; width: 100%; display: block;}
#menu ul.submenu { list-style-type: none; margin: 5px 0 0 0 !important; padding: 0; width: 100%; display: block;}
#menu li { float: left; }


.header_groot #menu ul.hoofdmenu li a { display: block; padding: 5px; margin: 0px 5px 0 5px; font-weight: bold; font-size: 15px; border: 1px solid #b3b3b3; color: #4d4d4d; }
.header_klein #menu ul.hoofdmenu li a { display: block; padding: 3px; margin: 0px 5px 0 5px; font-weight: bold; font-size: 13px; border: 1px solid #b3b3b3; color: #4d4d4d; }
#menu ul.hoofdmenu  li a:hover { color: #000000; background: linear-gradient(#ffffff,#c8c8c8); border: 1px solid #a8a8a8; }
#menu ul.hoofdmenu  li a.actief { color: #000000; background: linear-gradient(#ffffff,#e0e0e0); border: 1px solid #a8a8a8; box-shadow: 1px 1px 3px #a8a8a8;}
.header_groot #menu ul.submenu li a { display: block; padding: 5px; margin: 0px 5px 0 5px; font-weight: bold; font-size: 12px; color: #4d4d4d; border: 1px solid #b3b3b3;}
.header_klein #menu ul.submenu li a { display: block; padding: 3px; margin: 0px 5px 0 5px; font-weight: bold; font-size: 11px; color: #4d4d4d; }
#menu ul.submenu li a:hover { color: #000000; background: linear-gradient(#ffffff,#c8c8c8);  border: 1px solid #f5f5f5;}
#menu ul.submenu li a.actief { color: #000000; background: linear-gradient(#ffffff,#e0e0e0);  border: 1px solid #f5f5f5;}
@media screen and (max-width: 960px) {
#menu ul.hoofdmenu li a span { display: none; }	
#menu ul.submenu li a span { display: none; }	
}

@media screen and (max-width: 1800px) { 
#sidebar { display: none; width: 360px; position: fixed; top: 0; right: 0; height: 100vh; background-color: #efefef; padding-top: 100px; padding-left: 10px; z-index: 99;}
}
@media screen and (min-width: 1800px) { 
#sidebar { width: 360px; position: fixed; top: 0; right: 0; height: 100vh; background-color: #efefef; padding-top: 100px; padding-left: 20px; z-index: 99;}
}


#sidebarsm { display: none; width: 360px; position: fixed; top: 0; right: 0; height: 100vh; background-color: #efefef; padding-top: 100px; padding-left: 10px; z-index: 99;}


#contentvak { width: 1500px; max-width: 100%; }
#sidebar #favo_vak { width: 360px; max-width: 100%; } 
#sidebarsm #favo_vak { width: 360px; max-width: 100%; }
#sidebarknop { position: fixed; top: 100px; right: 0; font-size: 30px; background-color: white; padding: 4px 6px 4px 12px; border: 1px solid #a8a8a8; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-right-style: none; color: #a8a8a8; z-index: 995;}
#sidebarknop i.fa-times { color: #c00; }
#sidebarknop:hover i.fa-times { scaleY(1.3);}
#sidebarknop:hover i.fa-bars { scaleY(1.3);}

.headerknop { display: block; padding: 5px; margin: 0px 5px 0 5px; font-weight: bold; font-size: 15px; background-color: rgba(250,250,250,0.8) !important; color: #4d4d4d !important; border: 1px solid #4d4d4d !important; }
#favo_knop { cursor: pointer; }
#favo_knop .far.fa-heart { color: #4d4d4d !important; }
#favo_knop:hover .far.fa-heart { color: #fc0000 !important; }
#favo_knop .fas.fa-heart { color: #cc0000 !important; text-shadow: 0px 0px 3px #c0c0c0;}
#favo_knop:hover .fas.fa-heart { color: #cc0000 !important; text-shadow: 0px 0px 3px #fff;}
#sidebar #favo_vak .snelknoppeling_knop { width: 150px; height: 90px; border: 1px solid #a8a8a8; float: left; margin: 10px 10px 10px 0; padding-top: 8px; text-decoration: none; color: #a8a8a8; background-color: #fefefe; text-align: center; overflow: hidden;}
#sidebarsm #favo_vak .snelknoppeling_knop { width: 150px; height: 80px; border: 1px solid #a8a8a8; float: left; margin: 10px 5px 0px 0; padding-top: 8px; text-decoration: none; color: #a8a8a8; background-color: #fefefe; text-align: center; overflow: hidden;}
.snelknoppeling_knop:hover { color: #000000; box-shadow: 0 0 4px #a8a8a8; background-color: #ffffff; border-top-left-radius: 20px; border-bottom-right-radius: 20px;}
#sidebar #favo_vak .snelknoppeling_knop i { font-size: 30px; margin-bottom: 8px;}
#sidebarsm #favo_vak .snelknoppeling_knop i { font-size: 25px; margin-bottom: 8px;}
#sidebar #favo_vak .snelknoppeling_knop span { display: block; font-size: 13px; }
#sidebarsm #favo_vak .snelknoppeling_knop span { display: block; font-size: 10px; }


div.footer { position: fixed; bottom: 0; width: 100%; background: linear-gradient(#ffffff,#a8a8a8); border-top: 1px solid #a8a8a8; padding-top: 5px; padding-bottom: 5px; z-index: 100;}

#inlogvak { z-index: 997; position: relative; width: 600px; height: 300px; display: block; margin: -35px auto 0; border: 1px solid #c0c0c0; border-top-left-radius: 20px; border-bottom-right-radius: 20px; background-color: rgba(246,242,241,0.4); box-shadow: 3px 3px 4px #a8a8a8;}
#inlogvak label { width: 100%; padding: 4px;}
#inlogvak input { width: 100%; padding: 4px; background-color: white !important; border-radius: 0px !important;}

/** tabellen en lijsten ------------------------------------------------------------------------------ **/
table.lijst { width: 100%; border-spacing: 0; border-collapse: collapse; }
table.lijst th { text-align: left; 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(#dddddd,#cccccc); }
table.lijst tr.grijs td { border-bottom: 1px solid #c8c8c8; }
table.lijst tr.subtiel 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.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; }
table.lijst a.knop, span.knop { display: inline-block; background: linear-gradient(#ffffff,#eeeeee); text-decoration: none; color: black; margin-top: 10px; margin-left: 20px; border: 1px solid black; border-radius: 4px; padding: 2px 4px 2px 4px; }
span.armatuur { display: inline-block; margin-top: 10px; margin-left: 20px; border: 1px solid black; border-radius: 4px; padding: 2px 4px 2px 4px; background: linear-gradient(#ffffff,#eeeeee);  }


#content	{ width: 100%; min-height: calc(100% - 130px); padding: 10px 10px 25px 10px; background-color: #ffffff; }
div.left1			 {
							 width: 680px;
							 padding-right: 10px;
							 float: left;
							 }
div.leftitem	 {
							 color: #000000;
							 font-family: verdana;
							 padding: 10px 10px 10px 0px;
							 float: left;
							 }
div.right1		 {
							 width: 290px;
							 float: left;
							 }
div.rightitem  {
							 width: 280px;
							 border-radius: 5px;
							 border-color: #4d4d4d;
							 border-style: solid;
							 border-width: 1px;
				 			  padding-top: 2px; 
								padding-left: 5px; 
								padding-right: 5px; 
								padding-bottom: 2px;
								margin-top: 3px; 
							 background: linear-gradient(#ffffff,#c8c8c8);
							 }
.popup_bg, #algemene_popup_bg { opacity: 0.85;  z-index: 998; background-color: black; width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
.ingelogdblijven_bg { opacity: 0.85; z-index: 998; 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;}
}	
.popup 				 {			 
			 				 position: fixed;
							 top: 40%;
							 left: 50%;
							 margin-top: -75px;
							 margin-left: -200px;
							 width: 400px;
							 height: 400px;
							 border: 1px solid #a8a8a8;
							 background-color: white;
							 background: rgba(255,255,255,1);
							 padding: 3px;
							 box-shadow: 0px 0px 10px 5px rgba(107,107,107,1);
							 z-index: 999;
							 opacity: 1;
							 }
.popup_groot 				 {			 
			 				 position: fixed;
							 top: 40%;
							 left: 50%;
							 margin-top: -200px;
							 margin-left: -370px;
							 width: 750px;
							 height: 475px;
							 border: 1px solid #a8a8a8;
							 background-color: white;
							 padding: 0px;
							 box-shadow: 0px 0px 10px 5px rgba(107,107,107,1);
							 z-index: 999;
							 }
.extragroot 				 {			 
			 				 position: fixed;
							 top: 40%;
							 left: 50%;
							 margin-top: -200px;
							 margin-left: -450px;
							 width: 900px;
							 height: 475px;
							 border: 1px solid #a8a8a8;
							 background-color: white;
							 padding: 0px;
							 box-shadow: 0px 0px 10px 5px rgba(107,107,107,1);
							 z-index: 999;
							 }
.popup .basis { width: 100%; }
.extragroot .basis { width: calc(30% - 5px); margin-left: 5px; float: left; }
.popup .extra { display: none; }
.extragroot .extra { display: inline-block; width: calc(70% - 36px); border-left: 1px solid #a8a8a8; margin-left: 20px; padding-left: 10px; padding-right: 5px; float: left; background-color: #e6e6e6; }
.popup_groot_sidebar { height: calc(100% - 26px); overflow-y: auto; width: 259px; border-right: 1px solid #a8a8a8; float: left; background-color: #e6e6e6;box-sizing: border-box; }
.popup_groot_content { height: calc(100% - 26px); overflow-y: auto; width: calc(100% - 259px); padding: 15px; float: left; background-color: white; box-sizing: border-box; position: relative;}							 
.popup_groot_content h1 { font-size: 15px; font-weight: bold; }	
.popup_groot a { color: inherit; text-decoration: none;}
.popup_groot ul { list-style-type: none; }
.popup_groot li { position: relative; }
.popup_groot li img { position: absolute; top: 5px; left: -25px; width: 18px; height: 18px; }
.popup_groot label { width: 200px; display: block; }						 
.popup a.sluiten, .popup_groot a.sluiten, .extragroot a.sluiten		{ position: absolute; top: -15px; right: -15px; cursor: pointer; }
.popup img.sluiten, .popup_groot img.sluiten, .extragroot img.sluiten		{ width: 25px; height: 25px; border: none; }
a.po_knoppen { color: grey; padding: 5px; float: left; height: 100%; border-right: 1px solid grey; text-decoration: none;}
a.po_knoppen:hover { color: black; background-color: #e6e6e6; }
.popup h3 			 {
			 				background: linear-gradient(#ffffff,#a8a8a8); 
								font-size: 13px;
								color: black;
								padding: 3px;
								margin: -3px;
							  }
.popup_groot h3 {
			 				background: linear-gradient(#ffffff,#a8a8a8); 
								font-size: 13px;
								color: black;
								padding: 3px;
								margin: 0px;
								height: 20px;
							  }	
.extragroot h3 {
			 				background: linear-gradient(#ffffff,#a8a8a8); 
								font-size: 13px;
								color: black;
								padding: 3px;
								margin: 0px;
								height: 20px;
}
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%}
}							  
ul.knoppen		 { list-style-type: none; margin: 0; padding: 0;}
ul.knoppen li  {  } /** float: left; **/
ul.knoppen a	 { 
					 		  width: 220px;
								display: block; 
				 			  padding-top: 2px; 
								padding-left: 5px; 
								padding-right: 5px; 
								padding-bottom: 2px;
								margin-top: 3px; 
								height: 18px; 
								text-decoration: none; 
								font-weight: bold; 
								font-size: 12px; 
								border-style: solid solid solid solid; 
								border-width: 1px; 
								border-radius: 5px;
								border-color: #a8a8a8; 
								color: #4d4d4d;
								background: linear-gradient(#d8d8d8,#eeeeee); }
ul.knoppen a:hover { background: linear-gradient(#eeeeee,#ffffff); }
ul.knoppen a.actief{ color: #000000; background: linear-gradient(#eeeeee,#ffffff); }
ul.knoppen img	{ border: 0px; width: 16px; height: 16px; vertical-align:text-top;}
div.clear			 {
							 clear: both;
							 }

fieldset	    {
							  border-radius: 5px;
								border-color: #a8a8a8;
								margin: 5px 0px 5px 0px;
								padding: 7px;
								background: linear-gradient(#ffffff,#c8c8c8);
							}
legend					{
							  font-weight: bold;
								color: #000000;
							}
input[type=submit] , a.knop, button.knop {
				 			  padding-top: 0px; 
								padding-left: 5px; 
								padding-right: 5px; 
								padding-bottom: 4px;
								height: 22px !important;  
								font-weight: bold; 
								font-size: 12px; 
								border-style: solid solid solid solid; 
								border-width: 1px; 
								border-radius: 5px;
								border-color: #a8a8a8; 
								color: #4d4d4d;
								background: linear-gradient(#ffffff,#c8c8c8); 
								cursor: pointer;
								text-decoration: none; 
								display: inline-block; 
								box-sizing: border-box;}
input[type=submit]:hover , a.knop:hover, button.knop:hover {
								background: linear-gradient(#ffffff,#a8a8a8);
						}
a.knop img { width: 15px; height: 15px; }
input[type=text], input[type=password], input[type=file], textarea, select	{
							background: linear-gradient(#ffffff,#e0e0e0);
							border: 1px solid #a8a8a8;
							color: #4d4d4d;
							font-family: verdana;
							font-size: 11px;
							line-height: 16px;
							border-radius: 3px;
							box-sizing: border-box;
							}
input[type="text"][disabled] {  color: #727272; background: linear-gradient(#eeeeee,#e0e0e0); cursor: not-allowed;}
input:disabled { color: #d0d0d0; }
input[type=text]:focus, input[type=password]:focus, input[type=file], textarea:focus, select:focus {
							background: linear-gradient(#ffffff,#efefef);
							}
input.s		 		{
							 width: 60px;
							}
input.n				{
							 width: 160px;
							}
input.b, select.b				{
							 width: 230px;
							}
input.zoek[type=text]	{
							height: 24px;
							width: 1135px;
							background: linear-gradient(#ffffff,#e0e0e0); 
							border: 1px solid #a8a8a8;
							color: #4d4d4d;
							font-family: verdana;
							font-size: 13px;
							border-top-left-radius: 5px;
							border-bottom-left-radius: 5px;
							border-top-right-radius: 0px;
							border-bottom-right-radius: 0px;
							font-weight: bold;
							padding-left: 10px;
							padding-right: 10px;
							margin: 0px;
							}
input.zoek[type=text]:focus {
							background: url('/sys/images/icons/zoeken.png') no-repeat left, linear-gradient(#ffffff,#c8c8c8);
							} 
input.zoek[type=submit]	 {
							box-sizing: border-box;
							height: 33px;
							width: 65px;
							background: linear-gradient(#ffffff,#e0e0e0);  
							border: 1px solid #a8a8a8;
							border-left: 0px;
							color: #4d4d4d;
							font-family: verdana;
							font-size: 14px;
							border-top-left-radius: 0px;
							border-bottom-left-radius: 0px;
							border-top-right-radius: 5px;
							border-bottom-right-radius: 5px;
							font-weight: bold;
							padding-top: 2px;
							padding-bottom: 6px;
							margin: 0px;
							}
button.zoek	 {
							box-sizing: border-box;
							height: 24px;
							width: 65px;
							background: linear-gradient(#ffffff,#e0e0e0);  
							border: 1px solid #a8a8a8;
							border-left: 0px;
							color: #4d4d4d;
							font-family: verdana;
							font-size: 14px;
							border-top-left-radius: 0px;
							border-bottom-left-radius: 0px;
							border-top-right-radius: 5px;
							border-bottom-right-radius: 5px;
							font-weight: bold;
							padding-top: 2px;
							padding-bottom: 6px;
							margin: 0px;
							}

button.zoek:hover  {
							background: linear-gradient(#ffffff,#a8a8a8);
							color: #4d4d4d;
							cursor: pointer;
							}
button.leeg	 {
							box-sizing: border-box;
							height: 24px;
							width: 40px;
							background: linear-gradient(#ffffff,#e0e0e0);  
							border: 1px solid #a8a8a8;
							color: #4d4d4d;
							font-family: verdana;
							font-size: 14px;
							border-top-left-radius: 5px;
							border-bottom-left-radius: 5px;
							border-top-right-radius: 5px;
							border-bottom-right-radius: 5px;
							font-weight: bold;
							padding-top: 2px;
							padding-bottom: 6px;
							margin: 0px 0px 0px 15px;
							}

button.leeg:hover  {
							background: linear-gradient(#ffffff,#a8a8a8);
							color: #4d4d4d;
							cursor: pointer;
							}
input.zoek[type=submit]:hover  {
							background: linear-gradient(#ffffff,#a8a8a8);
							color: #4d4d4d;
							}
input.bewerk[type=submit]	{
							width: 280px;
							text-align: left; 
				 			padding-top: 2px; 
							padding-left: 25px; 
							padding-right: 5px; 
							padding-bottom: 2px;
							margin-top: 3px; 
							margin-left: 10px; 
							margin-right: 10px; 
							height: 25px; 
							text-decoration: none; 
							font-weight: bold; 
							font-size: 14px; 
							border-style: solid solid solid solid; 
							border-width: 1px; 
							border-radius: 5px;
							border-color: #a8a8a8; 
							color: #4d4d4d;
							background: url('/sys/images/icons/klein/aanpassen.png') no-repeat 6px 3px, linear-gradient(#ffffff,#c8c8c8);							
							}
input.bewerk[type=submit]:hover {
							background: url('/sys/images/icons/klein/aanpassen.png') no-repeat 6px 3px,linear-gradient(#ffffff,#a8a8a8);
							color: #4d4d4d;
							}
select.groot	{
								width: 280px; 
								padding-top: 2px; 
								padding-left: 5px; 
								padding-right: 5px; 
								padding-bottom: 2px;
								margin-top: 3px; 
								margin-left: 10px; 
								margin-right: 10px; 
								height: 25px; 
								text-decoration: none; 
								font-weight: bold; 
								font-size: 14px; 
								border-style: solid solid solid solid; 
								border-width: 1px; 
								border-radius: 5px;
								border-color: #a8a8a8; 
								color: #4d4d4d;
								background: linear-gradient(#ffffff,#c8c8c8);; 
								cursor: pointer;}
select.groot:hover { background: linear-gradient(#ffffff,#a8a8a8); }
select.groot option{background: #efefef;}
input[type=radio] {
								margin: 3px;
								}
label 		 		{
    					 display: block;
    					 float: left;
    					 margin: 2px 4px 6px 0px;
    					 text-align: left;
							}
br 						{ 
							 clear: left; 
							}
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.goed {
							 background-color: #6cff6c;
							 background-image: url('/images/icons/akkoord.png'),url('/images/overgang_groen_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: #008000;
							 display: block;
							 padding: 7px 5px 7px 50px;
							 margin-bottom: 10px;
							 font-weight: bold;
							 }
span.goed a { text-decoration: none; color: black; }
span.goed 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; }					 
span.algemeen {
							 background-color: #c8c8c8; 
							 background-image: url('/images/icons/zoeken.png'),url('/images/menubg.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: #a8a8a8; 
							 display: block;
							 padding: 4px 5px 4px 50px;
							 margin-bottom: 10px;
							 font-weight: bold;
							 }	
span.algemeen a { text-decoration: none; color: black; }		
span.algemeen a:hover { text-decoration: underline; color: black; }	 
span.standaard {
							 background-color: #c8c8c8; 
							 background-image: url('/images/menubg.png');
							 background-repeat:  repeat-x;
							 background-position: top;
							 border-style: solid solid solid solid; 
							 border-width: 1px; 
							 border-radius: 5px;
							 border-color: #a8a8a8; 
							 display: block;
							 padding: 4px 5px 4px 5px;
							 margin-bottom: 10px;
							 font-weight: bold;
							 }	
span.standaard a { text-decoration: none; color: black; }		
span.standaard a:hover { text-decoration: underline; color: black; }	 
img.vlag			 {
							 width: 18px;
							 height: 18px;
							 border-style: none;
							 }
img.vlagactief {
							 width: 17px;
							 height: 17px;
							 border: 1px solid black;
							 }
h1						 {
							 margin: 0px;
							 padding: 0px;
							 margin-bottom: 10px;
							 color: #000000;
							 font-size: 18px;
							 font-weight: bold;
							 /* border-bottom: 1px solid #4d4d4d; */
							 }
h2						 {
							 margin: 0px;
							 padding: 0px;
							 padding-bottom: 10px;
							 font-size: 15px;
							 font-weight: bold;
							 color: #a8a8a8;
							 }
h3						 {
							 margin: 0px;
							 padding: 0px;
							 padding-bottom: 10px;
							 font-size: 13px;
							 font-weight: bold;
							 color: #000000;
							 }		 
hr						 {
							 color: #4d4d4d;
							 background-color: #4d4d4d;
							 height: 1px;
							 border: none;
							 }
div.infotip { position:relative; display: inline; padding-top: 3px; }
div.infotip img { width: 15px; height: 15px; }
div.infotip span { display: none; }
div.infotip:hover { cursor: help; }
div.infotip:hover span { display: block;
		 position:absolute;
		 top:20px; 
		 left:20px; 
		 width:250px;
		 padding: 3px;
		 border:1px solid #a8a8a8;
		 background: linear-gradient(#ffffff,#efefef);
		 text-align: left;
		 z-index:2400;
		 border-radius: 5px;
}
div.infotip2 { position:relative; display: inline; }
div.infotip2 span { display: none; }
div.infotip2:hover { cursor: help; }
div.infotip2:hover span { display: block;
		 position:absolute;
		 top:15px; 
		 left:55px; 
		 width:200px;
		 padding: 3px;
		 border:1px solid #a8a8a8;
		 background: linear-gradient(#ffffff,#efefef);
		 text-align: left;
		 z-index:2400;
		 border-radius: 5px;
}
div.kleurblokje {
							 width: 12px; 
							 height: 12px; 
							 float: left;
							 margin-right: 2px;
							 }
td div.kleurblokje { margin-top: 3px; }
div.grafiek { background-color: #efefef;
						  border: 1px solid #a8a8a8;
						}
/* calendar */
table.calendar		{ border-left:1px solid #999; }
tr.calendar-row	{  }
td.calendar-day	{ min-height:100px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover	{ background:#eceff5; }
td.calendar-day-np	{ background:#eee; min-height:100px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:130px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number		{ background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }	

div.paginamenu			{
							width: 100%;
							height: 21px;
							border-style: none none solid none; 
							border-width: 1px; 
							border-color: #a8a8a8;
							margin-bottom: 15px;
							}
div.paginamenu ul		{ list-style-type: none; margin: 0; padding: 0;}
div.paginamenu li		{ float: left; }
div.paginamenu a		{ display: block; 
				 			  padding-top: 3px; 
								padding-left: 5px; 
								padding-right: 10px; 
								padding-bottom: 4px; 
								margin-left: 5px; 
								margin-right: 5px; 
								height: 21px; 
								text-decoration: none; 
								font-weight: bold; 
								font-size: 12px; 
								border-style: solid solid none solid; 
								border-width: 1px; 
								border-top-left-radius: 5px; border-top-right-radius: 5px; 
								border-color: #a8a8a8; 
								color: #4d4d4d;
								background: linear-gradient(#ffffff,#a8a8a8); }
div.paginamenu a:hover { color: #000000; background: linear-gradient(#c8c8c8,#e0e0e0); }
div.paginamenu a.actief{ color: #000000; background: linear-gradient(#e0e0e0,#ffffff); padding-bottom: 3px;}					
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 th.rotate { margin: 0; padding: 3px; border: 1px solid black; height: 180px; white-space: nowrap; vertical-align: bottom;}
table.uren_totaal th.rotate > div { width: 17px; transform: rotate(-90deg); padding: 2px; }
table.uren_totaal td { margin: 0; padding: 3px; border: 1px solid black; }	
#mailbox { position: absolute; top: 45px; left: 115px; width: 80px; height: 70px; margin: 0; padding: 0; background: none; border: none; }
#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; }
#mailbox img:hover { background-color: #FF9933; }
#ongelezen { position: absolute; top: 35px; left: 170px; width: 30px; text-align: center; height: 25px; border-radius: 10px; background-color: #FF9933; border: 1px solid #FF9933; color: white; font-size: 20px;}						 

div.bedrag_container { width: calc(100% - 22px); height: 40px; position: relative; margin: 10px; border-radius: 5px; border: 1px solid grey; background: linear-gradient(#ffffff,#c8c8c8); }
div.bedrag_container a { text-decoration: none; display: block;}
div.bedrag_container span { font-size: 1.9em; position: absolute; top: 6px; left: 10px; font-weight: bold; color: black; display: block; width: 100%;}
div.bedrag_container img { position: absolute; top: 7px; right: 5px; width: 25px; height: 25px; }
div.bedrag_container input[type=image] { position: absolute; top: 7px; right: 5px; width: 25px; height: 25px; }
div.bedrag_container input[type=text]{ font-size: 1.3em; width: 170px; font-weight: bold; color: black; border: 1px solid grey;}

.losseregelkeuze { display: block; padding: 2px; color: grey; text-decoration: none; }
.losseregelkeuze:hover { border: 1px solid grey; color: black;}

.tooltip {
  position: relative;
}

.tooltip .tooltiptext_l {
  visibility: hidden;
  width: 200px;
  background-color: #262626;
  opacity: 0.85;
  color: #f2f2f2;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1000;
  top: -1px;
  left: -5%;
}

.tooltip .tooltiptext_l::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #262626;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #262626;
  opacity: 0.85;
  color: #f2f2f2;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1000;
  top: -1px;
  left: 105%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #262626 transparent transparent;
}

.tooltip .tooltiptext_o {
  visibility: hidden;
  width: 200px;
  background-color: #262626;
  opacity: 0.85;
  color: #f2f2f2;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 50%;
  margin-top: 10px;
  margin-left: -100px;
  font-size: 11px !important;
  font-weight: normal !important;
}
.tooltip .tooltiptext_o::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #262626 transparent;
}
.tooltip:hover .tooltiptext, .tooltip:hover .tooltiptext_l, .tooltip:hover .tooltiptext_o {
  visibility: visible;
}
.po_regel { width: calc(100% - 10px); padding: 5px; border-bottom: 1px dashed grey; }
div.document_container { width: 166px; box-sizing: border-box; padding: 2px; float: left; margin-bottom: 10px; margin-right: 10px;}
div.document_container:hover { border: 1px dashed grey; }
div.document_container form { display: none; }
div.document_container:hover form { display: block; }
div.projectwaarschuwing { display: none; width: 100%; box-sizing: border-box; padding: 5px; text-align: center; border: 1px dashed grey; color: grey; animation:blinking 1.2s infinite; }
@keyframes blinking {
	0% { color: grey; border-color: grey; }
	50% { color: red; border-color: red; }
	75% { color: grey; border-color: grey; }
}

#interneopmerkingenknop { position: fixed; top: 25%; right: 0; padding: 7px; background-color: #ee833a; font-size: 3em; color: white; border: 1px solid #ee833a; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#interneopmerkingenuitklap { position: fixed; top: 25%; right: 0; padding: 5px; width: 400px; min-height: 350px; background-color: white; border: 1px solid #ee833a; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
#interneopmerkingenuitklap h3 { width: calc(100% + 10px); margin: -5px -5px 0 -5px; padding: 5px; background-color: #ee833a; color: white; border-top-left-radius: 10px;}
#interneopmerkingaantal { position: fixed; top: calc(25% - 10px); right: 40px; background-color: #ff3300; border-radius: 20px; color: white; text-align: center; padding: 4px 8px; }


#planningheader i.fas:hover { text-shadow: 0 0 6px #4d4d4d; transform: scaleY(120%);}
table.planningtabel { width: 100% !important; font-size: 10px; border: 1px solid #b3b3b3; border-bottom: 1px solid #000000; border-collapse: collapse; }

table.planningtabel tr:hover { background-color: #f0f0f0; }
table.planningtabel tr:hover th { background-color: #ffffff; }
table.planningtabel tr:hover th.vrij { background-color: #f0f0f0; }
table.planningtabel tr:hover th.actief { background-color: #f0f0f0 !important; }
table.planningtabel tr.wordtbewerkt { background-color: #f0f0f0;}
table.planningtabel tr.netbewerkt { animation-name: netbewerkt; animation-duration: 8s;}
@keyframes netbewerkt { from{ background-color: #28a745;} to { background-color: inherit; }}
table.planningtabel th { padding: 3px; border: 1px solid #b3b3b3; font-weight: normal; background-color: white;}	
table.planningtabel th.rotate { margin: 0; padding: 2px; border: 1px solid #b3b3b3; height: 75px; white-space: nowrap; vertical-align: bottom;}
table.planningtabel th.rotate > div { width: 17px; transform: rotate(-90deg); padding: 2px; }
table.planningtabel td { padding: 2px; border: 1px solid #b3b3b3; cursor: pointer;}
table.planningtabel th.actief { background-color: #f0f0f0; }
table.planningtabel td.actief { background-color: #f0f0f0; }
table.planningtabel td.actie, table.planningtabel th.actie { cursor: pointer; }
table.planningtabel td.actie:hover, table.planningtabel th.actie:hover { position: relative; background-color: #ffffff; box-shadow: 0 0 6px #4d4d4d; z-index: 2;}
table.planningtabel td.actie span { padding: 2px;  }
table.planningtabel td.actie span.tekstvak { display: none;  }
table.planningtabel td.actie:hover span.tekstvak { display: block; z-index: 1000; padding: 3px; width: 300px; height: auto; position: absolute; top: -5px; left: -305px; background-color: white; border: 1px solid black;}
table.planningtabel td a { color: inherit; }
table.planningtabel td.dwpl { padding: 0; text-align: center; }
table.planningtabel td.planbewerkcel { padding: 0; text-align: center;  }
table.planningtabel td.planbewerkcel input { width: 100%; text-align: center; border: 0; border-radius: 0; background: rgba(255,255,255,0.5); }
table.planningtabel td.planbewerkcel button { width: 30px; display: block; padding-left: 0px; text-align: center; border: 0; border-radius: 0; background: rgba(255,255,255,0.5); }
table.planningtabel td.planbewerkcel button:hover { background: rgba(255,255,255,0.7); animation:muis_verander 1s infinite; }
table.planningtabel td.planbewerkcel:focus-within { border-color: #000000 !important; }
table.planningtabel td.planbewerkcel:focus-within input { background: rgba(255,255,255,0.7); }

@keyframes muis_verander {
	0% { cursor: help; }
	70% { cursor: progress; }
	100% { cursor: progress; }
}

.planvakaanpassen { position: relative; }
.planvakaanpassen:hover { width: 100%; cursor: pointer; transform: scale(1.01); box-shadow: 0 0 3px #000000; z-index: 2; padding: 3px;}
.planvaknietaanpassen:hover { width: 100%; cursor: default; }
.planvakgereed { position: absolute; top: -10px; right: -15px; border: 2px solid black; padding: 5px; background-color: white; }

@media screen and (min-width: 2100px) { 	
	.week1, .week2, .week3, .week4, .week5, .week6 { display: table-cell; }
	table.planningtabel .pl_k { width: 200px !important;}
	.weekterug { right: 1195px; }
	.toekomstweek2 { display: none; }
	.toekomstweek3 { display: none; }
	.toekomstweek4 { display: none; }
	.toekomstweek5 { display: none; }
	.toekomstweek6 { display: table-cell; }
}
@media screen and (max-width: 1921px) { 	
	.week1, .week2, .week3, .week4 { display: table-cell; }
	.week5, .week6 { display: none; }
	table.planningtabel .pl_k { width: 160px !important;}
	.weekterug { right: 795px; }
	.toekomstweek2 { display: none; }
	.toekomstweek3 { display: none; }
	.toekomstweek4 { display: table-cell; }
	.toekomstweek5 { display: none; }
	.toekomstweek6 { display: none; }
}
@media screen and (max-width: 1601px) { 	
	.week1, .week2, .week3 { display: table-cell; }
	.week4, .week5, .week6 { display: none; }
	table.planningtabel .pl_k { width: 150px !important;}
	.weekterug { right: 595px; }
	.toekomstweek2 { display: none; }
	.toekomstweek3 { display: table-cell; }
	.toekomstweek4 { display: none; }
	.toekomstweek5 { display: none; }
	.toekomstweek6 { display: none; }
}
@media screen and (max-width: 1540px) { 	
	.week1, .week2, { display: table-cell; }
	.week3, .week4, .week5, .week6 { display: none; }
	table.planningtabel .pl_k { width: 140px !important;}
	.weekterug { right: 395px; }
	.toekomstweek2 { display: table-cell; }
	.toekomstweek3 { display: none; }
	.toekomstweek4 { display: none; }
	.toekomstweek5 { display: none; }
	.toekomstweek6 { display: none; }
}
@media screen and (max-width: 1200px) { 	
	.week1 { display: table-cell; }
	.week2, .week3, .week4, .week5, .week6 { display: none; }
	table.planningtabel .pl_k { width: 120px !important;}
	.weekterug { right: 195px; }
	.toekomstweek2 { display: table-cell; }
	.toekomstweek3 { display: none; }
	.toekomstweek4 { display: none; }
	.toekomstweek5 { display: none; }
	.toekomstweek6 { display: none; }
}
@keyframes plan_knipper {
	0% { background-color: #fc0000; color: white; border-color: #fc0000; }
	99% { background-color: white; color: #fc0000; border-color: #fc0000; }
}

table.planningtabel td.toekomst, table.planningtabel th.toekomst { width: 10px; padding: 0px; }	
.toekomstweek2, .toekomstweek3, .toekomstweek4, .toekomstweek5, .toekomstweek6 { width: 100%; height: 100%; padding: 2px; background-color: #fc0000; color: white;}
	
	
//table.planningtabel .pl_o { width: auto;}

.upload_vak { width: calc(33% - 12px); margin: 5px; float: left; height: 112px; border: 1px solid #a8a8a8; display: block; z-index: 1;}
.upload_vak p { width: 100%; padding: 3px; height: 20px; background-color: #f2f2f2; font-weight: bold; margin: 0;}
.upload_vak .bestanden_vak { width: 100%; height: 60px; overflow-y: auto; z-index: 1;}
.upload_vak .bestanden_vak .bestanden_vak_bestand { width: calc(100% - 20px); height: 20px; display: block; padding: 3px; border-bottom: 1px solid #f2f2f2; overflow: hidden; color: black; float: left;} 
.upload_vak .bestanden_vak .bestanden_vak_bestandinfo { width: 20px; height: 20px; display: block; padding: 3px; border-bottom: 1px solid #f2f2f2; border-left: 1px solid #f2f2f2; overflow: hidden; color: grey; float: left;} 
.upload_vak .bestanden_vak .bestanden_vak_bestandinfo:hover { color: black; background-color: #fefefe;}
.upload_vak .toevoegen_vak { width: 100%; height: 30px; font-size: 12px; color: grey; padding: 5px; background-color: #f2f2f2; text-align: center;}
.upload_vak .toevoegen_vak:hover { color: black; cursor: copy; }