body, table, div
			{background-color: lavender; color: #000000; 
			 font-family: Verdana; font-size: 10pt; 
              margin-left: 0;   margin-right: 0; margin-top: 0; margin-bottom: 0;
            }		   

/* style: solid, wavy, dotted, dashed, double */

fieldset {
  border: 1px solid darkgrey;
  width: auto ;
  /* max-width: 870px; */
  background: lavender; 
  border-radius: 5px;
}
.fs-info  {
	border: 1px solid darkgrey;
	width: auto ;
	border-radius: 5px;
	background: lavender; 
	/*max-width: 880px; */
}
	
legend 
{	border: 1px solid Darkgray;
	width: auto ;
	padding: 3 3 3 3;  
	border-radius: 5px;
	font-family: Arial, Verdana, Calibri; 
	font-size: 10pt; 
	background: lightblue; 
}

.lijst	{background: lightgrey; }
.help 	{background: azure;  font-size: 8pt; }
.transp {background-color: transparent; } 

}


a         {color: maroon; text-decoration: none; }
a:link    {color: maroon; text-decoration: none; border-bottom:  thin dotted black; }
a:visited {color: maroon;text-decoration: none;  }
a:active  {color: maroon; text-decoration: none;  }
a:hover   {color: maroon;  border-bottom: thin dotted maroon;   	  }
	   
 .ui-menu	{color: black; background-color: lightyellow;} 

.ui-test 	{color: green ; background-color: grey; border: 1px solid red ;}

.ui-col		{color: black; background-color: lightyellow;  	border: 1px solid #005DBA ;
				font-family: Verdana; font-size: 10pt; 
}
.ui-light 	{color: black; background-color: lightyellow;	border: 1px solid #005DBA ;}

.ui-col-thin	{color: black; background-color: lightyellow;
				 border-top: thin solid #005DBA; border-left: thin solid #005DBA;
				 border-bottom: thin solid #005DBA; border-right: thin solid #005DBA;}
				 
.thintop {border-top:    thin dotted #005DBA; font-size: 8pt; vertical-align: top;}
.thinbot {border-bottom: thin dotted #005DBA; font-size: 8pt; vertical-align: top;}
	
.klein      {font-size: 8pt; }
.klein7 	{font-size: 5pt; }
.dik        {font-weight: bold; color: black; font-size: 10pt }
.tbl-head	{font-weight: bold; color: red; font-size: 10pt }


.retlogin   { border: 1px solid #005DBA ; width:350px; background-color: ffcc99;  }
.retval     { border: 1px solid #005DBA ; background-color: orange;  }
.msgval     { border: 0px solid #005DBA ; background-color: orange; color: black; }
.msgrev     { border: 0px solid #005DBA ; background-color: #005DBA  ; color: white; }

.error		{background-color: orange; color:black; }
.okmsg		{background-color: lightgreen; color:black; }
.fout		{color: red; font-weight: bold; } 
// onderstaand nog nodig?? 

.x_msgkader	{ padding: 10 10 10 10; border: 1px solid #005DBA ;margin-left:0px; 
			 background-color: #005DBA; color: white;}
.msgbox		{ padding: 10 10 10 10; margin-left:0px;  border: 1px solid #005DBA ; 
			 background-color: lightyellow; color: black;}
			 

.thintd		{font-size: 8pt; vertical-align: top;      }
.thinhr		{border-bottom: thin dotted #005DBA; }
			 
.head5		{font-size: 10pt; font-weight: bold; color: orange;  }

.transp {background: transparent;}

.lbutton {
  display: inline-block;
  padding: 5px 5px;
  font-size: 1em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white !important; 
  background-color: #005DBA;
  border: none;
  border-radius: 6px;
  box-shadow: 0 5px #999;
  width: auto;
  margin: 2px;   
  padding-right: 10px; 
  padding-left: 10px; 
}

.lbutton:hover {background-color: ForestGreen;}

.lbutton:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  padding-right: 5px; 
  padding-left: 5px; 
}

.kbutton {
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.8em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white !important; 
  background-color: ForestGreen;
  border: none;
  border-radius: 5px;
  box-shadow: 0 3px #999;
  width: auto; 
  height: auto; 
  margin: 2px; 
  padding-right: 5px; 
  padding-left: 5px; 
}

.kbutton:hover {
	background-color: dodgerblue;
	
	transform: translateX(4px);
	}

.kbutton:active {
  background-color: ForestGreen; 
  box-shadow: 0 3px #666;
  transform: translateX(4px);
  padding-right: 5px; 
  padding-left: 5px; 
}

.pbutton {
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.8em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white !important; 
  background-color: #005DBA;
  border: none;
  border-radius: 5px;
  box-shadow: 0 3px #999;
  width: 75px; 
  height: auto; 
  margin: 2px; 
  padding-right: 5px; 
  padding-left: 5px; 
}

.pbutton:hover {
	background-color: Forestgreen;
	
	transform: translateX(4px);
	}

.pbutton:active {
  background-color: ForestGreen;
  box-shadow: 0 3px #666;
  transform: translateX(4px);
  padding-right: 5px; 
  padding-left: 5px; 
}


.ibutton {
  display: inline-block;
  padding: 5px 5px;
  font-size: 1em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white !important; 
  background-color: #005DBA;
  border: none;
  border-radius: 5px;
  box-shadow: 0 3px #999;
  width: 75px; 
  height: auto; 
  margin: 2px; 
  padding-right: 5px; 
  padding-left: 5px; 
}

.ibutton:hover {
	background-color: ForestGreen;
	
	transform: translateX(4px);
	}

.ibutton:active {
  background-color: ForestGreen;
  box-shadow: 0 3px #666;
  transform: translateX(4px);
  padding-right: 5px; 
  padding-left: 5px; 
}
.kop1 { 	font-size: 16pt; 
			font-weight: bold;
			color: dodgerblue; 
}
.kop2 { 	font-size: 14pt; 
			font-weight: bold;
			color: dodgerblue; 
}
.kop3 { 	font-size: 12pt; 
			font-weight: bold;
			color: dodgerblue; 
}
.kop4 { 	font-size: 10pt; 
			font-weight: bold;
			color: dodgerblue; 
}

/* tool tip style voor PC en tablets */ 
.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip zelf */
.tooltip-text {
  position: absolute;
  bottom: 125%;
  left: 70%;
  width: 300px; 
  transform: translateX(-25%);
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: normal;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

/* Hover op desktop */
.tooltip-container:hover .tooltip-text {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Klik/tik op touchscreen */
.tooltip-container.show .tooltip-text {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.wbutton {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    background-image: url("roodkruis.png");
}

.wbutton::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("pics/roodkruis.png");
    background-size: contain;
    background-repeat: no-repeat;
}


.dbutton {
  display: inline-block;
  padding: 5px 5px;
  font-size: 0.8em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: white !important; 
  background-color: red;
  border: none;
  border-radius: 5px;
  box-shadow: 0 3px #999;
  width: auto; 
  height: 25px; 
  margin: 2px; 
  padding-right: 8px; 
  padding-left: 8px; 
}

.dbutton:hover {
	background-color: maroon;
	
	transform: translateX(4px);
	}

.dbutton:active {
  background-color: orange; 
  box-shadow: 0 3px #666;
  transform: translateX(4px);
  padding-right: 5px; 
  padding-left: 5px; 
}