BODY {
  Font-Family: Calibri, Arial;
  Font-Size: 11pt;
  color: #333333;
  text-align: justify;
}

A:LINK        {color: #0000FF; text-decoration: none}
A:VISITED     {color: #0000FF; text-decoration: none}
A:HOVER       {color: #000080; text-decoration: none}
A:ACTIVE      {color: #0000FF; text-decoration: none}





/* LET OP: dubbel slash // werkt niet, gaat dan ook fout in de rest van het script */


/*
licht geel:  #FFFFBB en #FFFF99 (focus) 
licht blauw: #EEEEFF en #DDDDFF (focus)
*/


/* --- INPUT --- */

/* input[type=text], input[type=date], input[type=time], input[type=number] { */
input {
  Font-Family: Calibri, Arial;
  color: #0000FF; 
  background-color: #EEEEFF;
  border: 0;
  margin: 0;
  padding: 2;
  @media print { 
    background-color: #FFFFFF;
  }
}


/* input[type="text"]:disabled, input[type=date]:disabled, input[type=time]:disabled { */
input:disabled {
  background-color: transparent;
  border: 0;
}

/* input[type=text]:focus, input[type=date]:focus, input[type=time]:focus { */
input:focus {
  background-color: #DDDDFF;
  border: 0;
  border-color: #333;
}

/* input[type=text]:read-only, input[type=date]:read-only, input[type=time]:read-only  { */
/*
input:read-only  {
  background-color: transparent;
  pointer-events: none;
  tabindex: -1;
}
*/

/* hide Arrows/Spinners in Chrome, Safari, Edge, Opera */
/*
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
*/
/* hide Arrows/Spinners in Firefox */
/*
input[type=number] {
  -moz-appearance: textfield;
}
*/





/* rgba(255, 0, 0, 0.5) is 50% transparant,  rgba(0, 0, 0, 0.0) of transparent gebruiken



/* --- PLACEHOLDER --- */

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  Font-Size: 8pt;
  color: #999;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #999;
}





/* --- SELECT --- */

select {
  Font-Family: Calibri, Arial;
  color: #0000FF; 
  background: #EEEEFF;
  border: 1;
  margin: 0;
  padding: 2;
}


/* select:disabled, select:read-only { */
select:disabled {
  /* haal het pijltje weg (verschillende browsers) */
  -webkit-appearance: none; 
  -moz-appearance: none;
  appearance: none;
  /* background-color: transparent; */
  background: transparent;
  border: 0;
}


select:focus {
  background-color: #DDDDFF;
  border: 1;
  border-color: #333;
}








/* --- BUTTON --- */

button {
  color: #0000FF; 
  background-color: #AAAAAA;	
  padding:5px 5px; 
  margin: 3px 1px 3px 1px; 
  border:0 none;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  cursor:pointer;
}


/*
::-webkit-datetime-edit { padding: 1em; }
::-webkit-datetime-edit-fields-wrapper { background: silver; }
::-webkit-datetime-edit-text { color: red; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: blue; }
::-webkit-datetime-edit-day-field { color: green; }
::-webkit-datetime-edit-year-field { color: purple; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { background: orange; }

::-webkit-clear-button
::-webkit-clear-button { -webkit-appearance: none; }
*/
::-webkit-calendar-picker-indicator { padding: 0; margin: 0px; }



input[type=button] {
  color: #555555; 
  background-color:#AAAAAA;	
  padding:5px 15px; 
  margin: 3px 1px 3px 1px; 
  border:0 none;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  cursor:pointer;
}


input[type=submit] {
  color: #555555; 
  background-color:#AAAAAA;	
  padding:5px 15px; 
  margin: 3px 1px 3px 1px; 
  border:0 none;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  cursor:pointer;
}





input.datumIN {
  width: 110px;
  color: #0000FF;
  font-family: Courier New;
  text-align: right;
}


input.getalIN {
  width: 110px;
  color: #0000FF;
  font-family: Courier New;
  text-align: right;
}

input.getalRO {
  width: 110px;
  color: #000000;
  font-family: Courier New;
  text-align: right;
  border-width: 0px;
}

/*
 LET OP: alleen input, zonder 'type=...' gaat soms fout, sommige elementen zijn dan
 niet meer klikbaar 
*/

/*
input:read-only { 
  pointer-events: none;
  tabindex: -1;
}
*/



/* --- CHECKBOX --- */

input[type=checkbox] {
         position: relative;
         text-align: center;
         color: #444444;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 14px;
         height: 14px;
         top: 0;
         left: 0;
         border: 2px solid #AAAAAA;
         border-radius: 3px;
         background-color: white;
}
    input.prior[type=checkbox]:before {
         content: "*";
         display: block;
         position: absolute;
         width: 14px;
         height: 14px;
         top: 0;
         left: 0;
         border: 2px solid #AAAAAA;
         border-radius: 3px;
         background-color: yellow;
}
    input.nvt[type=checkbox]:before {
         content: "-";
         display: block;
         position: absolute;
         width: 14px;
         height: 14px;
         top: 0;
         left: 0;
         border: 2px solid #AAAAAA;
         border-radius: 3px;
         background-color: #AAAAAA;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid #999999;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}





/* --- TEXTAREA --- */

textarea {
  Font-Family: Calibri, Arial, Courier New;
  Font-Size: 12pt;
  color: #0000FF; 
  background-color: #EEEEFF;
  border: 0;
  border-color: #555;
  margin: 0;
  padding: 2;
}

textarea:focus {
  background-color: #DDDDFF;
  border: 0;
  border-color: #333;
}

.tekstvakWeergave {
  Font-Family: Calibri, Arial, Courier New;
  Font-Size: 12pt;
  color: #0000FF; 
}


/* --- CANVAS tbv handtekening ---  */

.m-signature-pad--body canvas {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 150px;
  border: 1px solid #CCCCCC;
}



/* --- CLASS (speciale opmaak) --- */

.c0 {
  color: #FFFFFF;   /* witte tekst (bedoeld om spaties weer te geven) */
}

.c1 {
  color: #FF0000;   /* rode tekst */
}

.c2 {
  color: #555555;   /* grijze tekst */
}
.c3 {
  color: #0000FF;   /* blauwe tekst */
}
.c5 {
  background-color: #FFFF00;   /* gele arcering */
}

.c6 {
  background-color: #5EFF5E;   /* groene arcering */
}

.c7 {
  background-color: #FFCC00;   /* oranje arcering */
}

.c8 {
  background-color: #FF8484;   /* rode arcering */
}

.c9 {
  background-color: #33CCCC;   /* blauwe arcering */
}

.x {
  color: #555555;   /* grijze tekst */
}


.celopmaakX {
  table, tr, td {   /* werkt niet */
    background-color: #FFFF99;
    border: 0;
    border-color: #333;
  }
}

.celopmaak1 {
  color: #555555; 
  background-color:#FFFFFF;	
  padding:1px 5px; 
  margin: 1px 1px 1px 1px; 
  border: 1px solid #AAAAAA;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
}



/* tabel met class="raster" */
.raster {
  border-collapse: collapse;
}

.raster th, .raster td {
  border: 0.5px solid rgba(0, 0, 0, 0.2); /* Zeer subtiele lijn */
}

.test {
  border: 0.5px solid #ccc; /* Dunne, lichte grenslijn */
  border: 0.5px solid rgba(0, 0, 0, 0.2); /* Zeer subtiele lijn */
}



/* http://www.websonic.nl/tutorials/websitejquery/jquery_inenuitklappen.php */

.uitklapbaar {
  color: #0000FF;
  cursor: hand;
  cursor: pointer;
}
.uitklapdiv {
  display: none;
  margin: 0px 5px 5px 5px;
  padding: 3px;
}



div.Xheader {
  position: fixed;
  width: 100%; 
  max-width: 800px;
  height: 75px; 
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  margin: 0px auto; 
  background-color: #A3C9D8; 
}

div.kolom1 {
  width: 100%; 
  min-width: 300px;
  max-width: 500px;
  float: left; 
  margin: 3; 
  padding: 5px; 
  border: 0 none;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
  background-color: #EEEEEE;
}

div.centerDiv {
  width: 100%;
  margin: 0 auto;  /* marge boven en links-rechts (als auto, dan wordt gecentreerd) */
}

div.kolom {
  width: 100%;
  float: left; 
  /* padding: 5px; --> niet instellen, anders passen 2 kolommen van 50% net niet naast elkaar */
}

/* instellingen voor schermen breder dan 800px */
@media screen and (min-width: 801px) { 
  div.centerDiv { width: 800px; }
  div.kolom { width: 50%; }  /* net iets minder dan de helft */
}

/* instellingen voor schermen smaller dan 800px */
@media screen and (max-width: 800px) { 
  div.centerDiv { width: 100%; }
  div.kolom { width: 50%; }
}

/* instellingen voor schermen smaller dan 600px */
@media screen and (max-width: 600px) { 
  div.centerDiv { width: 100%; }
  div.kolom { width: 100%; }
}






@media screen {
  /*.tekstvakPrint { display:none; } */
}


@media print {
  div.container { 
    background-color: #FFFFFF;
    height: 100%; 
  }
  div.achtergrond { 
    height: 100%; 
  }
  div.kolom { 
    width: 50%;
  }
  .nietprinten { 
    display:none; /* bijv. <span class="nietprinten"><hr></span> */
  }

}



/* page-break */
.page-break td {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}
@media print {
  .page-break {
    page-break-before: always;
  }
}
/*
als in een tabel, een extra rij toevoegen vóór een page-break:
<tr><td colspan="1"><div class="page-break"></div></td></tr>
*/



a.knop {
  color: #555555; 
  background-color:#AAAAAA;	
  padding:5px 15px; 
  margin: 3px 1px 3px 1px; 
  border:0 none;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  cursor:pointer;
}

a.knop2 {
  font-family: Calibri, Arial, Sans-serif;
  font-size: 10pt; 
  background-color:#99CCFF;
  color: #333333; 	
  padding:2px 10px; 
  margin: 3px 1px 3px 1px; 
  border-width:1px;  
  border-style:solid;
  border-color: #AAAAAA;
  cursor:pointer;
}

a.knop2:hover {
  background-color:#B0C8E2;
}

/* de knop 'sluiten' X */
a.knopX {
  font-family: Calibri, Arial, Sans-serif;
  font-size:13pt; 
  color: #FFFFFF; 
  background-color:#FF5555;	
  padding: 0px 5px 0px 5px; 
  border:0 none;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
  cursor:pointer;
}





/* initiele (responsive) instellingen */
div.container {
  width:  100%;
  border: 0;
  margin: 0px auto;
}

.groot {
  font-size: 16pt;
}


/* instellingen voor schermen breder dan 800px */
@media screen and (min-width: 801px) { 
  div.container { 
    width: 800px; 
  }
  input[type=text] { font-size: 14pt; }
  input[type=date] { font-size: 14pt; }
  input[type=time] { font-size: 14pt; }
  input    { font-size: 140%; }
  button   { font-size: 140%; }
  textarea { font-size: 12pt; }
  select   { font-size: 14pt; }
  .groot   { font-size: 16pt; }
}

/* instellingen voor schermen smaller dan 800px */
@media screen and (max-width: 800px) { 
  input[type=text] { font-size: 14pt; }
  input[type=date] { font-size: 14pt; }
  input[type=time] { font-size: 14pt; }
  input    { font-size: 120%; }
  button   { font-size: 120%; }
  textarea { font-size: 12pt; }
  select   { font-size: 14pt; }
  .groot   { font-size: 16pt; }
}

/* instellingen voor schermen smaller dan 600px */
@media screen and (max-width: 600px) { 
  input[type=text] { font-size: 12pt; }
  input[type=date] { font-size: 12pt; }
  input[type=time] { font-size: 12pt; }
  input    { font-size: 110%; }
  button   { font-size: 110%; }
  textarea { font-size: 11pt; }
  select   { font-size: 12pt; }
  .groot   { font-size: 14pt; }
  .nietopsmalscherm { display:none; }
}

/* instellingen voor schermen smaller dan 450px */
@media screen and (max-width: 450px) { 
  input[type=text] { font-size: 10pt; }
  input[type=date] { font-size: 10pt; }
  input[type=time] { font-size: 10pt; }
  input    { font-size: 100%; }
  button   { font-size: 100%; }
  textarea { font-size: 10pt; }
  select   { font-size: 10pt; }
  .groot   { font-size: 12pt; }
}

/* instellingen voor schermen smaller dan 300px */
@media screen and (max-width: 300px) {
  div.container { width: 300px; } 
  input[type=text] { font-size: 10pt; }
  input[type=date] { font-size: 10pt; }
  input[type=time] { font-size: 10pt; }
  textarea { font-size: 10pt; }
  select   { font-size: 10pt; }
  .groot   { font-size: 10pt; }
}



/* instellingen voor schermen hoger dan 700px */
@media screen and (min-height: 701px) { 
  .tekstvakWeergave { height: 410px; }
}

/* instellingen voor schermen lager dan 700px */
@media screen and (max-height: 700px) { 
  .tekstvakWeergave { height: 310px; }
}

/* instellingen voor schermen lager dan 600px */
@media screen and (max-height: 600px) { 
  .tekstvakWeergave { height: 210px; }
}

/* instellingen voor schermen lager dan 500px */
@media screen and (max-height: 500px) { 
  .tekstvakWeergave { height: 110px; }
}


div.achtergrond {
  background-image: url("pics/pic001a.png"), url("pics/pic001b.png");
  background-repeat: no-repeat, no-repeat;
  background-position: right top, left bottom; 
  @media print { height: 100%; }
}