/*
=========================================================================================================
   -  05-05-2019
      *  Nieuwe CSS classen voor het opmaken van de fomulieren met formbuilder versie 3
   -  20-10-2020
      *  de width510-690 + width750-900 toegevoegd

=========================================================================================================
Gebruik voor de breedte 'inputclass', 'labelleftclass', 'labelrightclass'
de volgende CSS-class (maximale normale rijbreedte is 895px):
   width030   achtste
   width060   kwart
   width090
   width120   half            DEFAULT voor labelleftclass en labelrightclass
   width150
   width180   driekwart
   width210
   width240   hele breedte    DEFAULT voor inputclass
   width270
   width300   een+kwart
   width330
   width360   een+half
   width390
   width420   een+driekwart
   width450
   width480   dubbel
   width510
   width540
   width570
   width600
   width630
   width660
   width690
   width720   driedubbel
   width750
   width780
   width810
   width840
   width870
   width900

Bij meerdere elementen naast elkaar is een stukje witruimte tussen de elementen nodig.
Hiervoor extra CSS class toevoegen afhankelijk van waarde van de 'div' property:
   div = TRUE    -->             (geen witruimte)
   div = 'START' --> witrechts   (witruimte 2px aan rechterkant element)
   div = FALSE   --> witbeide    (witruimte 2px aan linker- en rechterkant element)
   div = 'END'   --> witlinks    (witruimte 2px aan linkerkant element)

Uitlijning van tekst binnen label en inputveld (standaard is links uitgelijnd):
   aligncenter {text-align: center;}
   alignright {text-align: right;}

Hoogte van een TEXTAREA regelen met CSS-class:
   heightXrow   waarin de X 1 t/m 12 kan zijn (default 6)

Eventuele inline style voor de CONTENT met behulp van div:
   <div style="display:inline-block; width: 158px>...</div>

Fieldset naast elkaar:
   ->divclass = left/right
   ->divclass = lefttab/righttab (in tabstructuur iets smaller)
   Hoogte: ->fieldsetstyle = $fieldsetstyle = 'style="height: 520px;"';


=====================================================================================
*/
/* Kleuren horen hier niet! ==> aparte css maken voor de kleuren!   */
/* class die met jQuery wordt toegevoegd/verwijderd als het element de focus heeft */
   .highlightonfocus {
      background-color: #ee0;
   }

   .warningcolor {
      background-color: #ee0;
   }

   .readonly {
      background-color: #F0F0F0;
   }

   .disabledtekst {
      color: #6D6D6D;
   }


/* Kleuren en opmaak van speciale knoppen (hoort hier wel natuurlijk!) */
   .helpknop   {color: #0000FF;  font-weight: bold; cursor: help; }
   .blauweknop {color: #0000FF;  font-weight: bold;   }

   .groeneknop {color: #00C100;  font-weight: bold;   }

   .deleteknop {color: #FF0000;  font-weight: bold; cursor: no-drop;  }
   .rodeknop   {color: #FF0000;  font-weight: bold;   }

/* ALGEMENE OPMAAK FORMULIEREN */
   form {
      width: 490px;
      margin: 20px 0px 20px 10px;
      padding: 0px 0px  0px  0px;
   /*   background-color: blue;   */
   }

   form.breed {
      width: 900px;   /* floatleft = 150 + input = 225 floatrigt = 390 */
   }

   form.dialoog050 {   /* halve breedte, dialoogvenster 300px breed  */
      width: 250px;
   }
   form.dialoog080 {   /* driekwart breedte, dialoogvenster 410px breed  */
      width: 370px;
   }

   form.dialoog100 {   /* normale breedte, dialoogvenster 490px breed  */
      width: 445px;
   }
   form.dialoog125 {   /* 1,25 breedte, dialoogvenster 540px breed  */
      width: 495px;
   }
   form.dialoog150 {   /* ander halve breedte, dialoogvenster 590px breed  */
      width: 545px;
   }

   form.dialoog200 {  /* dubbele breedte, dialoogvenster 720px breed */
      width: 675px;
   }

   form.dialoog250 {  /* dubbele breedte, dialoogvenster 850px breed */
      width: 805px;
   }
   form.dialoog900 {  /* dialoogvenster 900px breed (normale formulier breedte) */
      width: 900px;
   }


   fieldset {
      border: 1px solid #B7B7B7;
      margin: 10px 0px 10px 0px;
      padding: 10px 10px 10px 10px;
      background-color: #EBEBEB;
   }
   fieldset.leftextra {    /* padding rechts op 0 zodat er 1 3/4 ruimte is voor de elementen */
      padding: 10px  0px 10px 10px;
   }
   fieldset.rightextra {    /* padding rechts op 0 zodat er 1 3/4 ruimte is voor de elementen */
      padding: 10px  0px 10px 10px;
   }

   legend {
      font-weight: bold;
      padding: 0px 5px 0px 5px;
   }





/* formrow is de div die de rij maakt waarin de elementen komen te staan (hoogte 24px maar niet afdwingen!) */
   div.formrow {
      margin:  0px 0px 5px  5px;
      padding: 0px 0px 0px  0px;
   }
   div.formlabelrow {
      height: 18px;
      margin:  -4px 0px 2px  5px;
      padding: 0px 0px 0px  0px;
   }




/* --------------------------------------------------------------------------------------------------- */
/* div voor de teksten in een div met inline-block, heeft padding 3px ==> breedte - 2x 3px             */
/* "inline-block" is de truc om een inline-element toch een breedte te geven                           */
/* WIDTH -6px, maar geen correctie voor witruimte                                                      */
/* --------------------------------------------------------------------------------------------------- */
   div.width030 {
      width: 24px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width060 {
      width:  54px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }

/* twee speciale toegevoegd tbv labels in de taakplanning */
   div.width071 {
      width:  65px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width087 {
      width:  81px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }

   div.width090 {
      width:  84px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width120 {
      width: 114px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width150 {
      width: 144px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width180 {
      width: 174px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width210 {
      width: 204px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width240 {
      width: 234px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width270 {
      width: 264px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width300 {
      width: 294px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width330 {
      width: 324px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width360 {
      width: 354px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width390 {
      width: 384px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width420 {
      width: 414px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width450 {
      width: 444px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width480 {
      width: 474px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width510 {
      width: 504px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width540 {
      width: 534px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width570 {
      width: 564px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width600 {
      width: 594px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width630 {
      width: 624px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width660 {
      width: 654px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width690 {
      width: 684px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width720 {
      width: 714px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width750 {
      width: 744px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width780 {
      width: 774px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width810 {
      width: 804px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width840 {
      width: 834px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width870 {
      width: 864px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }
   div.width900 {
      width: 894px;
      vertical-align: top;
      margin: 0px 0px 0px  0px;
      padding: 3px 3px 3px  3px;
      display: inline-block;
   }


/* twee fieldsets naast elkaar moet ook verschillende breedtes kunnen hebben (totaal 900px) */
/* left/right = left450/right450 max totale elementbreedte = 420/420 = 840 px */
/* left/right = left420/right480 max totale elementbreedte = 390/450 = 840 px */
/* left/right = left390/right510 max totale elementbreedte = 360/480 = 840 px */
/* left/right = left360/right540 max totale elementbreedte = 330/510 = 840 px */
/* left/right = left330/right570 max totale elementbreedte = 300/540 = 840 px */
/* left/right = left300/right600 max totale elementbreedte = 270/570 = 840 px */
/* door de float left wordt right div blijkbaar 10px in local_administratie naar beneden geduwd, dit corrigeren door de margin  */
   form div.left     {width: 445px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right    {width: 445px; margin: 0px 0px 0px  455px; padding: 0px 0px 0px -10px;   }

   form div.left450  {width: 445px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right450 {width: 445px; margin: 0px 0px 0px  455px; padding: 0px 0px 0px -10px;}

   form div.left420  {width: 415px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right480 {width: 475px; margin: 0px 0px 0px  425px; padding: 0px 0px 0px -10px;}

   form div.left390  {width: 385px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right510 {width: 505px; margin: 0px 0px 0px  395px; padding: 0px 0px 0px -10px;}

   form div.left360  {width: 355px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right540 {width: 535px; margin: 0px 0px 0px  365px; padding: 0px 0px 0px -10px;}

   form div.left330  {width: 325px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right570 {width: 565px; margin: 0px 0px 0px  335px; padding: 0px 0px 0px -10px;}

   form div.left300  {width: 295px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right600 {width: 595px; margin: 0px 0px 0px  305px; padding: 0px 0px 0px -10px;}

   form div.left480  {width: 475px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right420 {width: 415px; margin: 0px 0px 0px  485px; padding: 0px 0px 0px -10px;}

   form div.left510  {width: 505px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right390 {width: 385px; margin: 0px 0px 0px  515px; padding: 0px 0px 0px -10px;}

   form div.left540  {width: 535px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right360 {width: 355px; margin: 0px 0px 0px  545px; padding: 0px 0px 0px -10px;}

   form div.left570  {width: 565px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right330 {width: 325px; margin: 0px 0px 0px  575px; padding: 0px 0px 0px -10px;}

   form div.left600  {width: 595px; margin: -10px 0px 0px  0px; padding: 0px 0px 0px  0px; float: left;}
   form div.right300 {width: 295px; margin: 0px 0px 0px  605px; padding: 0px 0px 0px -10px;}

   /* fieldset in een tab moet smaller zijn dan normaal */
   form div.lefttab  {width: 435px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px   0px; float: left;}
   form div.righttab {width: 435px; margin: 0px 0px 0px  455px; padding: 0px 0px 0px -10px;}

   form div.lefttab450  {width: 435px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab450 {width: 435px; margin: 0px 0px 0px  455px; padding: 0px 0px 0px -10px;}

   form div.lefttab420  {width: 405px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab480 {width: 465px; margin: 0px 0px 0px  425px; padding: 0px 0px 0px -10px;}

   form div.lefttab390  {width: 375px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab510 {width: 495px; margin: 0px 0px 0px  395px; padding: 0px 0px 0px -10px;}

   form div.lefttab360  {width: 345px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab540 {width: 525px; margin: 0px 0px 0px  365px; padding: 0px 0px 0px -10px;}

   form div.lefttab330  {width: 315px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab570 {width: 555px; margin: 0px 0px 0px  335px; padding: 0px 0px 0px -10px;}

   form div.lefttab300  {width: 285px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab600 {width: 585px; margin: 0px 0px 0px  305px; padding: 0px 0px 0px -10px;}

   form div.lefttab480  {width: 465px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab420 {width: 405px; margin: 0px 0px 0px  485px; padding: 0px 0px 0px -10px;}

   form div.lefttab510  {width: 495px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab390 {width: 375px; margin: 0px 0px 0px  515px; padding: 0px 0px 0px -10px;}

   form div.lefttab540  {width: 525px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab360 {width: 345px; margin: 0px 0px 0px  545px; padding: 0px 0px 0px -10px;}

   form div.lefttab570  {width: 555px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab330 {width: 315px; margin: 0px 0px 0px  575px; padding: 0px 0px 0px -10px;}

   form div.lefttab600  {width: 585px; margin: -10px 0px 0px  5px; padding: 0px 0px 0px  0px; float: left;}
   form div.righttab300 {width: 285px; margin: 0px 0px 0px  605px; padding: 0px 0px 0px -10px;}



/* div.heightXrow  mn tbv label en combinatie met andere elementen  */
   form div.height1row  {height:  18px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height2row  {height:  32px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height3row  {height:  48px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height4row  {height:  64px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height5row  {height:  80px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height6row  {height:  96px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height7row  {height: 112px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height8row  {height: 128px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height9row  {height: 144px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height10row {height: 160px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height11row {height: 176px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}
   form div.height12row {height: 192px; margin: 0px 0px 2px  5px; padding: 0px 0px 0px  0px;}

   form div.aligncenter {text-align: center;}
   form div.alignright {text-align: right;}



   input.aligncenter {text-align: center;}
   input.alignright {text-align: right;}
/* --------------------------------------------------------------------------------------------------- */
/* ALGEMEEN INPUT-ELEMENTEN                                                                            */
/* input heeft default border van 1px en padding 2px  (WIDTH CORRECTIE -6px)                           */
/* --------------------------------------------------------------------------------------------------- */
   input.width030 { width:  24px; margin: 0px 0px 0px 0px; }
   input.width060 { width:  54px; margin: 0px 0px 0px 0px; }
   input.width090 { width:  84px; margin: 0px 0px 0px 0px; }
   input.width120 { width: 114px; margin: 0px 0px 0px 0px; }
   input.width150 { width: 144px; margin: 0px 0px 0px 0px; }
   input.width180 { width: 174px; margin: 0px 0px 0px 0px; }
   input.width210 { width: 204px; margin: 0px 0px 0px 0px; }
   input.width240 { width: 234px; margin: 0px 0px 0px 0px; }
   input.width270 { width: 264px; margin: 0px 0px 0px 0px; }
   input.width300 { width: 294px; margin: 0px 0px 0px 0px; }
   input.width330 { width: 324px; margin: 0px 0px 0px 0px; }
   input.width360 { width: 354px; margin: 0px 0px 0px 0px; }
   input.width390 { width: 384px; margin: 0px 0px 0px 0px; }
   input.width420 { width: 414px; margin: 0px 0px 0px 0px; }
   input.width450 { width: 444px; margin: 0px 0px 0px 0px; }
   input.width480 { width: 474px; margin: 0px 0px 0px 0px; }
   input.width510 { width: 504px; margin: 0px 0px 0px 0px; }
   input.width540 { width: 534px; margin: 0px 0px 0px 0px; }
   input.width570 { width: 564px; margin: 0px 0px 0px 0px; }
   input.width600 { width: 594px; margin: 0px 0px 0px 0px; }
   input.width630 { width: 624px; margin: 0px 0px 0px 0px; }
   input.width660 { width: 654px; margin: 0px 0px 0px 0px; }
   input.width690 { width: 684px; margin: 0px 0px 0px 0px; }
   input.width720 { width: 714px; margin: 0px 0px 0px 0px; }
   input.width750 { width: 744px; margin: 0px 0px 0px 0px; }
   input.width780 { width: 774px; margin: 0px 0px 0px 0px; }
   input.width810 { width: 804px; margin: 0px 0px 0px 0px; }
   input.width840 { width: 834px; margin: 0px 0px 0px 0px; }
   input.width870 { width: 864px; margin: 0px 0px 0px 0px; }
   input.width900 { width: 894px; margin: 0px 0px 0px 0px; }

   /* Aan de linkerzijde van het element een witruimte van 2px (+ 2px van ander element) */
   input.width030.witlinks { width:  22px; margin: 0px 0px 0px 2px; }
   input.width060.witlinks { width:  52px; margin: 0px 0px 0px 2px; }
   input.width090.witlinks { width:  82px; margin: 0px 0px 0px 2px; }
   input.width120.witlinks { width: 112px; margin: 0px 0px 0px 2px; }
   input.width150.witlinks { width: 142px; margin: 0px 0px 0px 2px; }
   input.width180.witlinks { width: 172px; margin: 0px 0px 0px 2px; }
   input.width210.witlinks { width: 202px; margin: 0px 0px 0px 2px; }
   input.width240.witlinks { width: 232px; margin: 0px 0px 0px 2px; }
   input.width270.witlinks { width: 262px; margin: 0px 0px 0px 2px; }
   input.width300.witlinks { width: 292px; margin: 0px 0px 0px 2px; }
   input.width330.witlinks { width: 322px; margin: 0px 0px 0px 2px; }
   input.width360.witlinks { width: 352px; margin: 0px 0px 0px 2px; }
   input.width390.witlinks { width: 382px; margin: 0px 0px 0px 2px; }
   input.width420.witlinks { width: 412px; margin: 0px 0px 0px 2px; }
   input.width450.witlinks { width: 442px; margin: 0px 0px 0px 2px; }
   input.width480.witlinks { width: 472px; margin: 0px 0px 0px 2px; }
   input.width510.witlinks { width: 502px; margin: 0px 0px 0px 2px; }
   input.width540.witlinks { width: 532px; margin: 0px 0px 0px 2px; }
   input.width570.witlinks { width: 562px; margin: 0px 0px 0px 2px; }
   input.width600.witlinks { width: 592px; margin: 0px 0px 0px 2px; }
   input.width630.witlinks { width: 622px; margin: 0px 0px 0px 2px; }
   input.width660.witlinks { width: 652px; margin: 0px 0px 0px 2px; }
   input.width690.witlinks { width: 682px; margin: 0px 0px 0px 2px; }
   input.width720.witlinks { width: 712px; margin: 0px 0px 0px 2px; }
   input.width750.witlinks { width: 742px; margin: 0px 0px 0px 2px; }
   input.width780.witlinks { width: 772px; margin: 0px 0px 0px 2px; }
   input.width810.witlinks { width: 802px; margin: 0px 0px 0px 2px; }
   input.width840.witlinks { width: 832px; margin: 0px 0px 0px 2px; }
   input.width870.witlinks { width: 862px; margin: 0px 0px 0px 2px; }
   input.width900.witlinks { width: 892px; margin: 0px 0px 0px 2px; }
   /* Aan de rechterzijde van het element een witruimte van 2px (+ 2px van ander element) */
   input.width030.witrechts { width:  22px; margin: 0px 2px 0px 0px; }
   input.width060.witrechts { width:  52px; margin: 0px 2px 0px 0px; }
   input.width090.witrechts { width:  82px; margin: 0px 2px 0px 0px; }
   input.width120.witrechts { width: 112px; margin: 0px 2px 0px 0px; }
   input.width150.witrechts { width: 142px; margin: 0px 2px 0px 0px; }
   input.width180.witrechts { width: 172px; margin: 0px 2px 0px 0px; }
   input.width210.witrechts { width: 202px; margin: 0px 2px 0px 0px; }
   input.width240.witrechts { width: 232px; margin: 0px 2px 0px 0px; }
   input.width270.witrechts { width: 262px; margin: 0px 2px 0px 0px; }
   input.width300.witrechts { width: 292px; margin: 0px 2px 0px 0px; }
   input.width330.witrechts { width: 322px; margin: 0px 2px 0px 0px; }
   input.width360.witrechts { width: 352px; margin: 0px 2px 0px 0px; }
   input.width390.witrechts { width: 382px; margin: 0px 2px 0px 0px; }
   input.width420.witrechts { width: 412px; margin: 0px 2px 0px 0px; }
   input.width450.witrechts { width: 442px; margin: 0px 2px 0px 0px; }
   input.width480.witrechts { width: 472px; margin: 0px 2px 0px 0px; }
   input.width510.witrechts { width: 502px; margin: 0px 2px 0px 0px; }
   input.width540.witrechts { width: 532px; margin: 0px 2px 0px 0px; }
   input.width570.witrechts { width: 562px; margin: 0px 2px 0px 0px; }
   input.width600.witrechts { width: 592px; margin: 0px 2px 0px 0px; }
   input.width630.witrechts { width: 622px; margin: 0px 2px 0px 0px; }
   input.width660.witrechts { width: 652px; margin: 0px 2px 0px 0px; }
   input.width690.witrechts { width: 682px; margin: 0px 2px 0px 0px; }
   input.width720.witrechts { width: 712px; margin: 0px 2px 0px 0px; }
   input.width750.witrechts { width: 742px; margin: 0px 2px 0px 0px; }
   input.width780.witrechts { width: 772px; margin: 0px 2px 0px 0px; }
   input.width810.witrechts { width: 802px; margin: 0px 2px 0px 0px; }
   input.width840.witrechts { width: 832px; margin: 0px 2px 0px 0px; }
   input.width870.witrechts { width: 862px; margin: 0px 2px 0px 0px; }
   input.width900.witrechts { width: 892px; margin: 0px 2px 0px 0px; }
   /* Aan de linker- en rechterzijde van het element een witruimte van 2px (+ 2px van ander element) */
   input.width030.witbeide { width:  20px; margin: 0px 2px 0px 2px; }
   input.width060.witbeide { width:  50px; margin: 0px 2px 0px 2px; }
   input.width090.witbeide { width:  80px; margin: 0px 2px 0px 2px; }
   input.width120.witbeide { width: 110px; margin: 0px 2px 0px 2px; }
   input.width150.witbeide { width: 140px; margin: 0px 2px 0px 2px; }
   input.width180.witbeide { width: 170px; margin: 0px 2px 0px 2px; }
   input.width210.witbeide { width: 200px; margin: 0px 2px 0px 2px; }
   input.width240.witbeide { width: 230px; margin: 0px 2px 0px 2px; }
   input.width270.witbeide { width: 260px; margin: 0px 2px 0px 2px; }
   input.width300.witbeide { width: 290px; margin: 0px 2px 0px 2px; }
   input.width330.witbeide { width: 320px; margin: 0px 2px 0px 2px; }
   input.width360.witbeide { width: 350px; margin: 0px 2px 0px 2px; }
   input.width390.witbeide { width: 380px; margin: 0px 2px 0px 2px; }
   input.width420.witbeide { width: 410px; margin: 0px 2px 0px 2px; }
   input.width450.witbeide { width: 440px; margin: 0px 2px 0px 2px; }
   input.width480.witbeide { width: 470px; margin: 0px 2px 0px 2px; }
   input.width510.witbeide { width: 500px; margin: 0px 2px 0px 2px; }
   input.width540.witbeide { width: 530px; margin: 0px 2px 0px 2px; }
   input.width570.witbeide { width: 560px; margin: 0px 2px 0px 2px; }
   input.width600.witbeide { width: 590px; margin: 0px 2px 0px 2px; }
   input.width630.witbeide { width: 620px; margin: 0px 2px 0px 2px; }
   input.width660.witbeide { width: 650px; margin: 0px 2px 0px 2px; }
   input.width690.witbeide { width: 680px; margin: 0px 2px 0px 2px; }
   input.width720.witbeide { width: 710px; margin: 0px 2px 0px 2px; }
   input.width750.witbeide { width: 740px; margin: 0px 2px 0px 2px; }
   input.width780.witbeide { width: 770px; margin: 0px 2px 0px 2px; }
   input.width810.witbeide { width: 800px; margin: 0px 2px 0px 2px; }
   input.width840.witbeide { width: 830px; margin: 0px 2px 0px 2px; }
   input.width870.witbeide { width: 860px; margin: 0px 2px 0px 2px; }
   input.width900.witbeide { width: 890px; margin: 0px 2px 0px 2px; }
/* --------------------------------------------------------------------------------------------------- */
/* KNOPPEN                                                                                             */
/* Een knop heeft default 3px border en padding links/rechts 8px (GEEN WIDTH CORRECTIE)                */
/* --------------------------------------------------------------------------------------------------- */
   input[type=submit].width030 { width:  30px; margin: 0px 0px 0px 0px; }
   input[type=submit].width060 { width:  60px; margin: 0px 0px 0px 0px; }
   input[type=submit].width090 { width:  90px; margin: 0px 0px 0px 0px; }
   input[type=submit].width120 { width: 120px; margin: 0px 0px 0px 0px; }
   input[type=submit].width150 { width: 150px; margin: 0px 0px 0px 0px; }
   input[type=submit].width180 { width: 180px; margin: 0px 0px 0px 0px; }
   input[type=submit].width210 { width: 210px; margin: 0px 0px 0px 0px; }
   input[type=submit].width240 { width: 240px; margin: 0px 0px 0px 0px; }
   input[type=submit].width270 { width: 270px; margin: 0px 0px 0px 0px; }
   input[type=submit].width300 { width: 300px; margin: 0px 0px 0px 0px; }
   input[type=submit].width330 { width: 330px; margin: 0px 0px 0px 0px; }
   input[type=submit].width360 { width: 360px; margin: 0px 0px 0px 0px; }
   input[type=submit].width390 { width: 390px; margin: 0px 0px 0px 0px; }
   input[type=submit].width420 { width: 420px; margin: 0px 0px 0px 0px; }
   input[type=submit].width450 { width: 450px; margin: 0px 0px 0px 0px; }
   input[type=submit].width480 { width: 480px; margin: 0px 0px 0px 0px; }
   input[type=submit].width510 { width: 510px; margin: 0px 0px 0px 0px; }
   input[type=submit].width540 { width: 540px; margin: 0px 0px 0px 0px; }
   input[type=submit].width570 { width: 570px; margin: 0px 0px 0px 0px; }
   input[type=submit].width600 { width: 600px; margin: 0px 0px 0px 0px; }
   input[type=submit].width630 { width: 630px; margin: 0px 0px 0px 0px; }
   input[type=submit].width660 { width: 660px; margin: 0px 0px 0px 0px; }
   input[type=submit].width690 { width: 690px; margin: 0px 0px 0px 0px; }
   input[type=submit].width720 { width: 720px; margin: 0px 0px 0px 0px; }
   input[type=submit].width750 { width: 750px; margin: 0px 0px 0px 0px; }
   input[type=submit].width780 { width: 780px; margin: 0px 0px 0px 0px; }
   input[type=submit].width810 { width: 810px; margin: 0px 0px 0px 0px; }
   input[type=submit].width840 { width: 840px; margin: 0px 0px 0px 0px; }
   input[type=submit].width870 { width: 870px; margin: 0px 0px 0px 0px; }
   input[type=submit].width900 { width: 900px; margin: 0px 0px 0px 0px; }
   /* Aan de linkerzijde van het element een witruimte van 2px (+ 2px van ander element) */
   input[type=submit].width030.witlinks { width:  28px; margin: 0px 0px 0px 2px; }
   input[type=submit].width060.witlinks { width:  58px; margin: 0px 0px 0px 2px; }
   input[type=submit].width090.witlinks { width:  88px; margin: 0px 0px 0px 2px; }
   input[type=submit].width120.witlinks { width: 118px; margin: 0px 0px 0px 2px; }
   input[type=submit].width150.witlinks { width: 148px; margin: 0px 0px 0px 2px; }
   input[type=submit].width180.witlinks { width: 178px; margin: 0px 0px 0px 2px; }
   input[type=submit].width210.witlinks { width: 208px; margin: 0px 0px 0px 2px; }
   input[type=submit].width240.witlinks { width: 238px; margin: 0px 0px 0px 2px; }
   input[type=submit].width270.witlinks { width: 268px; margin: 0px 0px 0px 2px; }
   input[type=submit].width300.witlinks { width: 298px; margin: 0px 0px 0px 2px; }
   input[type=submit].width330.witlinks { width: 328px; margin: 0px 0px 0px 2px; }
   input[type=submit].width360.witlinks { width: 358px; margin: 0px 0px 0px 2px; }
   input[type=submit].width390.witlinks { width: 388px; margin: 0px 0px 0px 2px; }
   input[type=submit].width420.witlinks { width: 418px; margin: 0px 0px 0px 2px; }
   input[type=submit].width450.witlinks { width: 448px; margin: 0px 0px 0px 2px; }
   input[type=submit].width480.witlinks { width: 478px; margin: 0px 0px 0px 2px; }
   input[type=submit].width510.witlinks { width: 508px; margin: 0px 0px 0px 2px; }
   input[type=submit].width540.witlinks { width: 538px; margin: 0px 0px 0px 2px; }
   input[type=submit].width570.witlinks { width: 568px; margin: 0px 0px 0px 2px; }
   input[type=submit].width600.witlinks { width: 598px; margin: 0px 0px 0px 2px; }
   input[type=submit].width630.witlinks { width: 628px; margin: 0px 0px 0px 2px; }
   input[type=submit].width660.witlinks { width: 658px; margin: 0px 0px 0px 2px; }
   input[type=submit].width690.witlinks { width: 688px; margin: 0px 0px 0px 2px; }
   input[type=submit].width720.witlinks { width: 718px; margin: 0px 0px 0px 2px; }
   input[type=submit].width750.witlinks { width: 748px; margin: 0px 0px 0px 2px; }
   input[type=submit].width780.witlinks { width: 778px; margin: 0px 0px 0px 2px; }
   input[type=submit].width810.witlinks { width: 808px; margin: 0px 0px 0px 2px; }
   input[type=submit].width840.witlinks { width: 838px; margin: 0px 0px 0px 2px; }
   input[type=submit].width870.witlinks { width: 868px; margin: 0px 0px 0px 2px; }
   input[type=submit].width900.witlinks { width: 898px; margin: 0px 0px 0px 2px; }
   /* Aan de rechterzijde van het element een witruimte van 2px (+ 2px van ander element) */
   input[type=submit].width030.witrechts { width:  28px; margin: 0px 2px 0px 0px; }
   input[type=submit].width060.witrechts { width:  58px; margin: 0px 2px 0px 0px; }
   input[type=submit].width090.witrechts { width:  88px; margin: 0px 2px 0px 0px; }
   input[type=submit].width120.witrechts { width: 118px; margin: 0px 2px 0px 0px; }
   input[type=submit].width150.witrechts { width: 148px; margin: 0px 2px 0px 0px; }
   input[type=submit].width180.witrechts { width: 178px; margin: 0px 2px 0px 0px; }
   input[type=submit].width210.witrechts { width: 208px; margin: 0px 2px 0px 0px; }
   input[type=submit].width240.witrechts { width: 238px; margin: 0px 2px 0px 0px; }
   input[type=submit].width270.witrechts { width: 268px; margin: 0px 2px 0px 0px; }
   input[type=submit].width300.witrechts { width: 298px; margin: 0px 2px 0px 0px; }
   input[type=submit].width330.witrechts { width: 328px; margin: 0px 2px 0px 0px; }
   input[type=submit].width360.witrechts { width: 358px; margin: 0px 2px 0px 0px; }
   input[type=submit].width390.witrechts { width: 388px; margin: 0px 2px 0px 0px; }
   input[type=submit].width420.witrechts { width: 418px; margin: 0px 2px 0px 0px; }
   input[type=submit].width450.witrechts { width: 448px; margin: 0px 2px 0px 0px; }
   input[type=submit].width480.witrechts { width: 478px; margin: 0px 2px 0px 0px; }
   input[type=submit].width510.witrechts { width: 508px; margin: 0px 2px 0px 0px; }
   input[type=submit].width540.witrechts { width: 538px; margin: 0px 2px 0px 0px; }
   input[type=submit].width570.witrechts { width: 568px; margin: 0px 2px 0px 0px; }
   input[type=submit].width600.witrechts { width: 598px; margin: 0px 2px 0px 0px; }
   input[type=submit].width630.witrechts { width: 628px; margin: 0px 2px 0px 0px; }
   input[type=submit].width660.witrechts { width: 658px; margin: 0px 2px 0px 0px; }
   input[type=submit].width690.witrechts { width: 688px; margin: 0px 2px 0px 0px; }
   input[type=submit].width720.witrechts { width: 718px; margin: 0px 2px 0px 0px; }
   input[type=submit].width750.witrechts { width: 748px; margin: 0px 2px 0px 0px; }
   input[type=submit].width780.witrechts { width: 778px; margin: 0px 2px 0px 0px; }
   input[type=submit].width810.witrechts { width: 808px; margin: 0px 2px 0px 0px; }
   input[type=submit].width840.witrechts { width: 838px; margin: 0px 2px 0px 0px; }
   input[type=submit].width870.witrechts { width: 868px; margin: 0px 2px 0px 0px; }
   input[type=submit].width900.witrechts { width: 898px; margin: 0px 2px 0px 0px; }
   /* Aan de linker- en rechterzijde van het element een witruimte van 2px (+ 2px van ander element) */
   input[type=submit].width030.witbeide { width:  26px; margin: 0px 2px 0px 2px; }
   input[type=submit].width060.witbeide { width:  56px; margin: 0px 2px 0px 2px; }
   input[type=submit].width090.witbeide { width:  86px; margin: 0px 2px 0px 2px; }
   input[type=submit].width120.witbeide { width: 116px; margin: 0px 2px 0px 2px; }
   input[type=submit].width150.witbeide { width: 146px; margin: 0px 2px 0px 2px; }
   input[type=submit].width180.witbeide { width: 176px; margin: 0px 2px 0px 2px; }
   input[type=submit].width210.witbeide { width: 206px; margin: 0px 2px 0px 2px; }
   input[type=submit].width240.witbeide { width: 236px; margin: 0px 2px 0px 2px; }
   input[type=submit].width270.witbeide { width: 266px; margin: 0px 2px 0px 2px; }
   input[type=submit].width300.witbeide { width: 296px; margin: 0px 2px 0px 2px; }
   input[type=submit].width330.witbeide { width: 326px; margin: 0px 2px 0px 2px; }
   input[type=submit].width360.witbeide { width: 356px; margin: 0px 2px 0px 2px; }
   input[type=submit].width390.witbeide { width: 386px; margin: 0px 2px 0px 2px; }
   input[type=submit].width420.witbeide { width: 416px; margin: 0px 2px 0px 2px; }
   input[type=submit].width450.witbeide { width: 446px; margin: 0px 2px 0px 2px; }
   input[type=submit].width480.witbeide { width: 476px; margin: 0px 2px 0px 2px; }
   input[type=submit].width510.witbeide { width: 506px; margin: 0px 2px 0px 2px; }
   input[type=submit].width540.witbeide { width: 536px; margin: 0px 2px 0px 2px; }
   input[type=submit].width570.witbeide { width: 566px; margin: 0px 2px 0px 2px; }
   input[type=submit].width600.witbeide { width: 596px; margin: 0px 2px 0px 2px; }
   input[type=submit].width630.witbeide { width: 626px; margin: 0px 2px 0px 2px; }
   input[type=submit].width660.witbeide { width: 656px; margin: 0px 2px 0px 2px; }
   input[type=submit].width690.witbeide { width: 686px; margin: 0px 2px 0px 2px; }
   input[type=submit].width720.witbeide { width: 716px; margin: 0px 2px 0px 2px; }
   input[type=submit].width750.witbeide { width: 746px; margin: 0px 2px 0px 2px; }
   input[type=submit].width780.witbeide { width: 776px; margin: 0px 2px 0px 2px; }
   input[type=submit].width810.witbeide { width: 806px; margin: 0px 2px 0px 2px; }
   input[type=submit].width840.witbeide { width: 836px; margin: 0px 2px 0px 2px; }
   input[type=submit].width870.witbeide { width: 866px; margin: 0px 2px 0px 2px; }
   input[type=submit].width900.witbeide { width: 896px; margin: 0px 2px 0px 2px; }

   input[type=submit].height2x {padding: 12px 12px; }
   input[type=submit].height3x {padding: 22px 22px; }

/* --------------------------------------------------------------------------------------------------- */
/* RADIO en CHECKBOX LABEL element                                                                     */
/* radio element (het keuze rondje) is 20x13px met rondom marge van 5px ==> label width -30px (20+5+5) */
/* radio en checkbox geen correctie voor witruimte omdat dit al rond element zelf ziet (elementclass)  */
/* --------------------------------------------------------------------------------------------------- */
   form label.width060 {width:  30px; display: inline-block; }
   form label.width090 {width:  60px; display: inline-block; }
   form label.width120 {width:  90px; display: inline-block; }
   form label.width150 {width: 120px; display: inline-block; }
   form label.width180 {width: 150px; display: inline-block; }
   form label.width210 {width: 180px; display: inline-block; }
   form label.width240 {width: 210px; display: inline-block; }
   form label.width270 {width: 240px; display: inline-block; }
   form label.width300 {width: 270px; display: inline-block; }
   form label.width330 {width: 300px; display: inline-block; }
   form label.width360 {width: 330px; display: inline-block; }
   form label.width390 {width: 360px; display: inline-block; }
   form label.width420 {width: 390px; display: inline-block; }
   form label.width450 {width: 420px; display: inline-block; }
   form label.width480 {width: 450px; display: inline-block; }
   form label.width510 {width: 480px; display: inline-block; }
   form label.width540 {width: 510px; display: inline-block; }
   form label.width570 {width: 540px; display: inline-block; }
   form label.width600 {width: 570px; display: inline-block; }
   form label.width630 {width: 600px; display: inline-block; }
   form label.width660 {width: 630px; display: inline-block; }
   form label.width690 {width: 660px; display: inline-block; }
   form label.width720 {width: 690px; display: inline-block; }
   form label.width750 {width: 720px; display: inline-block; }
   form label.width780 {width: 750px; display: inline-block; }
   form label.width810 {width: 780px; display: inline-block; }
   form label.width840 {width: 810px; display: inline-block; }
   form label.width870 {width: 840px; display: inline-block; }
   form label.width900 {width: 870px; display: inline-block; }

   input.radio {
      width: 20px;
      margin: 5px 5px 5px 5px;
   }
   input.checkbox {
      width: 20px;
      margin: 5px 5px 5px 5px;
   }
/* checkboxmin voor twee aan twee naast elkaar plaatsen van de checkboxen (tbv in urenregistratie)  */
/* dd 03-06-2021 de width van 12px naar 14px gezet. 12px is in nieuwe versie Firefox erg klein en niet mooi... */
   input.checkboxstartleft {
      width: 14px;
      margin: 5px 0px 5px 5px;
   }
   input.checkboxwitlinks {
      width: 14px;
      margin: 5px 0px 5px 2px;
   }
   input.checkboxgeenwit {
      width: 14px;
      margin: 5px 1px 5px 1px;
   }
   input.checkboxwitrechts {
      width: 14px;
      margin: 5px 2px 5px 0px;
   }

   input.checkbox5witlinks {
      width: 14px;
      margin: 5px 0px 5px 5px;
   }
   input.checkbox5witrechts {
      width: 14px;
      margin: 5px 5px 5px 0px;
   }

   input.checkbox8witlinks {
      width: 14px;
      margin: 5px 0px 5px 8px;
   }
   input.checkbox8witrechts {
      width: 14px;
      margin: 5px 8px 5px 0px;
   }

   input.checkboxendright {
      width: 14px;
      margin: 5px 5px 5px 0px;
   }

/* CHECKBOX CSS CODE VOOR DE TOGGLESWITCH  */
/* Opbouw: achtergrond + een klein rondje dat heen en weer schuift + kleur van de achtergrond afhankelijk van checked */
/* label rondom de input - zorgt voor het achtergrondblok */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 22px;
  margin: 0px 27px 0px 5px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {    /* span na het input element */
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CCCCCC;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #1595D3;    /* LV blauw */
}

input:focus + .slider {
  box-shadow: 0 0 1px #000000;  /* zwart */
}

input:checked + .slider:before {
  transform: translateX(36px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}






/* --------------------------------------------------------------------------------------------------- */
/* SELECT ELEMENT                                                                                      */
/* (GEEN WIDTH CORRECTIE)                                                                              */
/* --------------------------------------------------------------------------------------------------- */
   select.width030 { width:  30px; margin: 0px 0px 0px 0px; }
   select.width060 { width:  60px; margin: 0px 0px 0px 0px; }
   select.width090 { width:  90px; margin: 0px 0px 0px 0px; }
   select.width120 { width: 120px; margin: 0px 0px 0px 0px; }
   select.width150 { width: 150px; margin: 0px 0px 0px 0px; }
   select.width180 { width: 180px; margin: 0px 0px 0px 0px; }
   select.width210 { width: 210px; margin: 0px 0px 0px 0px; }
   select.width240 { width: 240px; margin: 0px 0px 0px 0px; }
   select.width270 { width: 270px; margin: 0px 0px 0px 0px; }
   select.width300 { width: 300px; margin: 0px 0px 0px 0px; }
   select.width330 { width: 330px; margin: 0px 0px 0px 0px; }
   select.width360 { width: 360px; margin: 0px 0px 0px 0px; }
   select.width390 { width: 390px; margin: 0px 0px 0px 0px; }
   select.width420 { width: 420px; margin: 0px 0px 0px 0px; }
   select.width450 { width: 450px; margin: 0px 0px 0px 0px; }
   select.width480 { width: 480px; margin: 0px 0px 0px 0px; }
   select.width510 { width: 510px; margin: 0px 0px 0px 0px; }
   select.width540 { width: 540px; margin: 0px 0px 0px 0px; }
   select.width570 { width: 570px; margin: 0px 0px 0px 0px; }
   select.width600 { width: 600px; margin: 0px 0px 0px 0px; }
   select.width630 { width: 630px; margin: 0px 0px 0px 0px; }
   select.width660 { width: 660px; margin: 0px 0px 0px 0px; }
   select.width690 { width: 690px; margin: 0px 0px 0px 0px; }
   select.width720 { width: 720px; margin: 0px 0px 0px 0px; }
   select.width750 { width: 750px; margin: 0px 0px 0px 0px; }
   select.width780 { width: 780px; margin: 0px 0px 0px 0px; }
   select.width810 { width: 810px; margin: 0px 0px 0px 0px; }
   select.width840 { width: 840px; margin: 0px 0px 0px 0px; }
   select.width870 { width: 870px; margin: 0px 0px 0px 0px; }
   select.width900 { width: 900px; margin: 0px 0px 0px 0px; }
   /* Aan de linkerzijde van het element een witruimte van 2px (+ 2px van ander element) */
   select.width030.witlinks { width:  28px; margin: 0px 0px 0px 2px; }
   select.width060.witlinks { width:  58px; margin: 0px 0px 0px 2px; }
   select.width090.witlinks { width:  88px; margin: 0px 0px 0px 2px; }
   select.width120.witlinks { width: 118px; margin: 0px 0px 0px 2px; }
   select.width150.witlinks { width: 148px; margin: 0px 0px 0px 2px; }
   select.width180.witlinks { width: 178px; margin: 0px 0px 0px 2px; }
   select.width210.witlinks { width: 208px; margin: 0px 0px 0px 2px; }
   select.width240.witlinks { width: 238px; margin: 0px 0px 0px 2px; }
   select.width270.witlinks { width: 268px; margin: 0px 0px 0px 2px; }
   select.width300.witlinks { width: 298px; margin: 0px 0px 0px 2px; }
   select.width330.witlinks { width: 328px; margin: 0px 0px 0px 2px; }
   select.width360.witlinks { width: 358px; margin: 0px 0px 0px 2px; }
   select.width390.witlinks { width: 388px; margin: 0px 0px 0px 2px; }
   select.width420.witlinks { width: 418px; margin: 0px 0px 0px 2px; }
   select.width450.witlinks { width: 448px; margin: 0px 0px 0px 2px; }
   select.width480.witlinks { width: 478px; margin: 0px 0px 0px 2px; }
   select.width510.witlinks { width: 508px; margin: 0px 0px 0px 2px; }
   select.width540.witlinks { width: 538px; margin: 0px 0px 0px 2px; }
   select.width570.witlinks { width: 568px; margin: 0px 0px 0px 2px; }
   select.width600.witlinks { width: 598px; margin: 0px 0px 0px 2px; }
   select.width630.witlinks { width: 628px; margin: 0px 0px 0px 2px; }
   select.width660.witlinks { width: 658px; margin: 0px 0px 0px 2px; }
   select.width690.witlinks { width: 688px; margin: 0px 0px 0px 2px; }
   select.width720.witlinks { width: 718px; margin: 0px 0px 0px 2px; }
   select.width750.witlinks { width: 748px; margin: 0px 0px 0px 2px; }
   select.width780.witlinks { width: 778px; margin: 0px 0px 0px 2px; }
   select.width810.witlinks { width: 808px; margin: 0px 0px 0px 2px; }
   select.width840.witlinks { width: 838px; margin: 0px 0px 0px 2px; }
   select.width870.witlinks { width: 868px; margin: 0px 0px 0px 2px; }
   select.width900.witlinks { width: 898px; margin: 0px 0px 0px 2px; }
   /* Aan de rechterzijde van het element een witruimte van 2px (+ 2px van ander element) */
   select.width030.witrechts { width:  28px; margin: 0px 2px 0px 0px; }
   select.width060.witrechts { width:  58px; margin: 0px 2px 0px 0px; }
   select.width090.witrechts { width:  88px; margin: 0px 2px 0px 0px; }
   select.width120.witrechts { width: 118px; margin: 0px 2px 0px 0px; }
   select.width150.witrechts { width: 148px; margin: 0px 2px 0px 0px; }
   select.width180.witrechts { width: 178px; margin: 0px 2px 0px 0px; }
   select.width210.witrechts { width: 208px; margin: 0px 2px 0px 0px; }
   select.width240.witrechts { width: 238px; margin: 0px 2px 0px 0px; }
   select.width270.witrechts { width: 268px; margin: 0px 2px 0px 0px; }
   select.width300.witrechts { width: 298px; margin: 0px 2px 0px 0px; }
   select.width330.witrechts { width: 328px; margin: 0px 2px 0px 0px; }
   select.width360.witrechts { width: 358px; margin: 0px 2px 0px 0px; }
   select.width390.witrechts { width: 388px; margin: 0px 2px 0px 0px; }
   select.width420.witrechts { width: 418px; margin: 0px 2px 0px 0px; }
   select.width450.witrechts { width: 448px; margin: 0px 2px 0px 0px; }
   select.width480.witrechts { width: 478px; margin: 0px 2px 0px 0px; }
   select.width510.witrechts { width: 508px; margin: 0px 2px 0px 0px; }
   select.width540.witrechts { width: 538px; margin: 0px 2px 0px 0px; }
   select.width570.witrechts { width: 568px; margin: 0px 2px 0px 0px; }
   select.width600.witrechts { width: 598px; margin: 0px 2px 0px 0px; }
   select.width630.witrechts { width: 628px; margin: 0px 2px 0px 0px; }
   select.width660.witrechts { width: 658px; margin: 0px 2px 0px 0px; }
   select.width690.witrechts { width: 688px; margin: 0px 2px 0px 0px; }
   select.width720.witrechts { width: 718px; margin: 0px 2px 0px 0px; }
   select.width750.witrechts { width: 748px; margin: 0px 2px 0px 0px; }
   select.width780.witrechts { width: 778px; margin: 0px 2px 0px 0px; }
   select.width810.witrechts { width: 808px; margin: 0px 2px 0px 0px; }
   select.width840.witrechts { width: 838px; margin: 0px 2px 0px 0px; }
   select.width870.witrechts { width: 868px; margin: 0px 2px 0px 0px; }
   select.width900.witrechts { width: 898px; margin: 0px 2px 0px 0px; }
   /* Aan de linker- en rechterzijde van het element een witruimte van 2px (+ 2px van ander element) */
   select.width030.witbeide { width:  26px; margin: 0px 2px 0px 2px; }
   select.width060.witbeide { width:  56px; margin: 0px 2px 0px 2px; }
   select.width090.witbeide { width:  86px; margin: 0px 2px 0px 2px; }
   select.width120.witbeide { width: 116px; margin: 0px 2px 0px 2px; }
   select.width150.witbeide { width: 146px; margin: 0px 2px 0px 2px; }
   select.width180.witbeide { width: 176px; margin: 0px 2px 0px 2px; }
   select.width210.witbeide { width: 206px; margin: 0px 2px 0px 2px; }
   select.width240.witbeide { width: 236px; margin: 0px 2px 0px 2px; }
   select.width270.witbeide { width: 266px; margin: 0px 2px 0px 2px; }
   select.width300.witbeide { width: 296px; margin: 0px 2px 0px 2px; }
   select.width330.witbeide { width: 326px; margin: 0px 2px 0px 2px; }
   select.width360.witbeide { width: 356px; margin: 0px 2px 0px 2px; }
   select.width390.witbeide { width: 386px; margin: 0px 2px 0px 2px; }
   select.width420.witbeide { width: 416px; margin: 0px 2px 0px 2px; }
   select.width450.witbeide { width: 446px; margin: 0px 2px 0px 2px; }
   select.width480.witbeide { width: 476px; margin: 0px 2px 0px 2px; }
   select.width510.witbeide { width: 506px; margin: 0px 2px 0px 2px; }
   select.width540.witbeide { width: 536px; margin: 0px 2px 0px 2px; }
   select.width570.witbeide { width: 566px; margin: 0px 2px 0px 2px; }
   select.width600.witbeide { width: 596px; margin: 0px 2px 0px 2px; }
   select.width630.witbeide { width: 626px; margin: 0px 2px 0px 2px; }
   select.width660.witbeide { width: 656px; margin: 0px 2px 0px 2px; }
   select.width690.witbeide { width: 686px; margin: 0px 2px 0px 2px; }
   select.width720.witbeide { width: 716px; margin: 0px 2px 0px 2px; }
   select.width750.witbeide { width: 746px; margin: 0px 2px 0px 2px; }
   select.width780.witbeide { width: 776px; margin: 0px 2px 0px 2px; }
   select.width810.witbeide { width: 806px; margin: 0px 2px 0px 2px; }
   select.width840.witbeide { width: 836px; margin: 0px 2px 0px 2px; }
   select.width870.witbeide { width: 866px; margin: 0px 2px 0px 2px; }
   select.width900.witbeide { width: 896px; margin: 0px 2px 0px 2px; }

/* --------------------------------------------------------------------------------------------------- */
/* TEXTAREA                                                                                            */
/* textarea heeft standaard 1px border en 2px padding (WIDTH CORRECTIE -6px)                           */
/* --------------------------------------------------------------------------------------------------- */
   textarea {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 1.00em;
      font-weight: normal;
      width: 234px;
      height: 96px;   /* default 6 rijen hoog */
      margin: 0px 0px 0px 0px;
   }
   textarea.width030 { width:  24px; margin: 0px 0px 0px 0px; }
   textarea.width060 { width:  54px; margin: 0px 0px 0px 0px; }
   textarea.width090 { width:  84px; margin: 0px 0px 0px 0px; }
   textarea.width120 { width: 114px; margin: 0px 0px 0px 0px; }
   textarea.width150 { width: 144px; margin: 0px 0px 0px 0px; }
   textarea.width180 { width: 174px; margin: 0px 0px 0px 0px; }
   textarea.width210 { width: 204px; margin: 0px 0px 0px 0px; }
   textarea.width240 { width: 234px; margin: 0px 0px 0px 0px; }
   textarea.width270 { width: 264px; margin: 0px 0px 0px 0px; }
   textarea.width300 { width: 294px; margin: 0px 0px 0px 0px; }
   textarea.width330 { width: 324px; margin: 0px 0px 0px 0px; }
   textarea.width360 { width: 354px; margin: 0px 0px 0px 0px; }
   textarea.width390 { width: 384px; margin: 0px 0px 0px 0px; }
   textarea.width420 { width: 414px; margin: 0px 0px 0px 0px; }
   textarea.width450 { width: 444px; margin: 0px 0px 0px 0px; }
   textarea.width480 { width: 474px; margin: 0px 0px 0px 0px; }
   textarea.width510 { width: 504px; margin: 0px 0px 0px 0px; }
   textarea.width540 { width: 534px; margin: 0px 0px 0px 0px; }
   textarea.width570 { width: 564px; margin: 0px 0px 0px 0px; }
   textarea.width600 { width: 594px; margin: 0px 0px 0px 0px; }
   textarea.width630 { width: 624px; margin: 0px 0px 0px 0px; }
   textarea.width660 { width: 654px; margin: 0px 0px 0px 0px; }
   textarea.width690 { width: 684px; margin: 0px 0px 0px 0px; }
   textarea.width720 { width: 714px; margin: 0px 0px 0px 0px; }
   textarea.width750 { width: 744px; margin: 0px 0px 0px 0px; }
   textarea.width780 { width: 774px; margin: 0px 0px 0px 0px; }
   textarea.width810 { width: 804px; margin: 0px 0px 0px 0px; }
   textarea.width840 { width: 834px; margin: 0px 0px 0px 0px; }
   textarea.width870 { width: 864px; margin: 0px 0px 0px 0px; }
   textarea.width900 { width: 894px; margin: 0px 0px 0px 0px; }
   /* Aan de linkerzijde van het element een witruimte van 2px (+ 2px van ander element) */
   textarea.width030.witlinks { width:  22px; margin: 0px 0px 0px 2px; }
   textarea.width060.witlinks { width:  52px; margin: 0px 0px 0px 2px; }
   textarea.width090.witlinks { width:  82px; margin: 0px 0px 0px 2px; }
   textarea.width120.witlinks { width: 112px; margin: 0px 0px 0px 2px; }
   textarea.width150.witlinks { width: 142px; margin: 0px 0px 0px 2px; }
   textarea.width180.witlinks { width: 172px; margin: 0px 0px 0px 2px; }
   textarea.width210.witlinks { width: 202px; margin: 0px 0px 0px 2px; }
   textarea.width240.witlinks { width: 232px; margin: 0px 0px 0px 2px; }
   textarea.width270.witlinks { width: 262px; margin: 0px 0px 0px 2px; }
   textarea.width300.witlinks { width: 292px; margin: 0px 0px 0px 2px; }
   textarea.width330.witlinks { width: 322px; margin: 0px 0px 0px 2px; }
   textarea.width360.witlinks { width: 352px; margin: 0px 0px 0px 2px; }
   textarea.width390.witlinks { width: 382px; margin: 0px 0px 0px 2px; }
   textarea.width420.witlinks { width: 412px; margin: 0px 0px 0px 2px; }
   textarea.width450.witlinks { width: 442px; margin: 0px 0px 0px 2px; }
   textarea.width480.witlinks { width: 472px; margin: 0px 0px 0px 2px; }
   textarea.width510.witlinks { width: 502px; margin: 0px 0px 0px 2px; }
   textarea.width540.witlinks { width: 532px; margin: 0px 0px 0px 2px; }
   textarea.width570.witlinks { width: 562px; margin: 0px 0px 0px 2px; }
   textarea.width600.witlinks { width: 592px; margin: 0px 0px 0px 2px; }
   textarea.width630.witlinks { width: 622px; margin: 0px 0px 0px 2px; }
   textarea.width660.witlinks { width: 652px; margin: 0px 0px 0px 2px; }
   textarea.width690.witlinks { width: 682px; margin: 0px 0px 0px 2px; }
   textarea.width720.witlinks { width: 712px; margin: 0px 0px 0px 2px; }
   textarea.width750.witlinks { width: 742px; margin: 0px 0px 0px 2px; }
   textarea.width780.witlinks { width: 772px; margin: 0px 0px 0px 2px; }
   textarea.width810.witlinks { width: 802px; margin: 0px 0px 0px 2px; }
   textarea.width840.witlinks { width: 832px; margin: 0px 0px 0px 2px; }
   textarea.width870.witlinks { width: 862px; margin: 0px 0px 0px 2px; }
   textarea.width900.witlinks { width: 892px; margin: 0px 0px 0px 2px; }
   /* Aan de rechterzijde van het element een witruimte van 2px (+ 2px van ander element) */
   textarea.width030.witrechts { width:  22px; margin: 0px 2px 0px 0px; }
   textarea.width060.witrechts { width:  52px; margin: 0px 2px 0px 0px; }
   textarea.width090.witrechts { width:  82px; margin: 0px 2px 0px 0px; }
   textarea.width120.witrechts { width: 112px; margin: 0px 2px 0px 0px; }
   textarea.width150.witrechts { width: 142px; margin: 0px 2px 0px 0px; }
   textarea.width180.witrechts { width: 172px; margin: 0px 2px 0px 0px; }
   textarea.width210.witrechts { width: 202px; margin: 0px 2px 0px 0px; }
   textarea.width240.witrechts { width: 232px; margin: 0px 2px 0px 0px; }
   textarea.width270.witrechts { width: 262px; margin: 0px 2px 0px 0px; }
   textarea.width300.witrechts { width: 292px; margin: 0px 2px 0px 0px; }
   textarea.width330.witrechts { width: 322px; margin: 0px 2px 0px 0px; }
   textarea.width360.witrechts { width: 352px; margin: 0px 2px 0px 0px; }
   textarea.width390.witrechts { width: 382px; margin: 0px 2px 0px 0px; }
   textarea.width420.witrechts { width: 412px; margin: 0px 2px 0px 0px; }
   textarea.width450.witrechts { width: 442px; margin: 0px 2px 0px 0px; }
   textarea.width480.witrechts { width: 472px; margin: 0px 2px 0px 0px; }
   textarea.width510.witrechts { width: 502px; margin: 0px 2px 0px 0px; }
   textarea.width540.witrechts { width: 532px; margin: 0px 2px 0px 0px; }
   textarea.width570.witrechts { width: 562px; margin: 0px 2px 0px 0px; }
   textarea.width600.witrechts { width: 592px; margin: 0px 2px 0px 0px; }
   textarea.width630.witrechts { width: 622px; margin: 0px 2px 0px 0px; }
   textarea.width660.witrechts { width: 652px; margin: 0px 2px 0px 0px; }
   textarea.width690.witrechts { width: 682px; margin: 0px 2px 0px 0px; }
   textarea.width720.witrechts { width: 712px; margin: 0px 2px 0px 0px; }
   textarea.width750.witrechts { width: 742px; margin: 0px 2px 0px 0px; }
   textarea.width780.witrechts { width: 772px; margin: 0px 2px 0px 0px; }
   textarea.width810.witrechts { width: 802px; margin: 0px 2px 0px 0px; }
   textarea.width840.witrechts { width: 832px; margin: 0px 2px 0px 0px; }
   textarea.width870.witrechts { width: 862px; margin: 0px 2px 0px 0px; }
   textarea.width900.witrechts { width: 892px; margin: 0px 2px 0px 0px; }
   /* Aan de linker- en rechterzijde van het element een witruimte van 2px (+ 2px van ander element) */
   textarea.width030.witbeide { width:  20px; margin: 0px 2px 0px 2px; }
   textarea.width060.witbeide { width:  50px; margin: 0px 2px 0px 2px; }
   textarea.width090.witbeide { width:  80px; margin: 0px 2px 0px 2px; }
   textarea.width120.witbeide { width: 110px; margin: 0px 2px 0px 2px; }
   textarea.width150.witbeide { width: 140px; margin: 0px 2px 0px 2px; }
   textarea.width180.witbeide { width: 170px; margin: 0px 2px 0px 2px; }
   textarea.width210.witbeide { width: 200px; margin: 0px 2px 0px 2px; }
   textarea.width240.witbeide { width: 230px; margin: 0px 2px 0px 2px; }
   textarea.width270.witbeide { width: 260px; margin: 0px 2px 0px 2px; }
   textarea.width300.witbeide { width: 290px; margin: 0px 2px 0px 2px; }
   textarea.width330.witbeide { width: 320px; margin: 0px 2px 0px 2px; }
   textarea.width360.witbeide { width: 350px; margin: 0px 2px 0px 2px; }
   textarea.width390.witbeide { width: 380px; margin: 0px 2px 0px 2px; }
   textarea.width420.witbeide { width: 410px; margin: 0px 2px 0px 2px; }
   textarea.width450.witbeide { width: 440px; margin: 0px 2px 0px 2px; }
   textarea.width480.witbeide { width: 470px; margin: 0px 2px 0px 2px; }
   textarea.width510.witbeide { width: 500px; margin: 0px 2px 0px 2px; }
   textarea.width540.witbeide { width: 530px; margin: 0px 2px 0px 2px; }
   textarea.width570.witbeide { width: 560px; margin: 0px 2px 0px 2px; }
   textarea.width600.witbeide { width: 590px; margin: 0px 2px 0px 2px; }
   textarea.width630.witbeide { width: 620px; margin: 0px 2px 0px 2px; }
   textarea.width660.witbeide { width: 650px; margin: 0px 2px 0px 2px; }
   textarea.width690.witbeide { width: 680px; margin: 0px 2px 0px 2px; }
   textarea.width720.witbeide { width: 710px; margin: 0px 2px 0px 2px; }
   textarea.width750.witbeide { width: 740px; margin: 0px 2px 0px 2px; }
   textarea.width780.witbeide { width: 770px; margin: 0px 2px 0px 2px; }
   textarea.width810.witbeide { width: 800px; margin: 0px 2px 0px 2px; }
   textarea.width840.witbeide { width: 830px; margin: 0px 2px 0px 2px; }
   textarea.width870.witbeide { width: 860px; margin: 0px 2px 0px 2px; }
   textarea.width900.witbeide { width: 890px; margin: 0px 2px 0px 2px; }

/* Regelhoogte is circa 16px, behalve voor de 1e die is 15px   */
   textarea.height1row  {height:  15px; }
   textarea.height2row  {height:  32px; }
   textarea.height3row  {height:  48px; }
   textarea.height4row  {height:  64px; }
   textarea.height5row  {height:  80px; }
   textarea.height6row  {height:  96px; }
   textarea.height7row  {height: 112px; }
   textarea.height8row  {height: 128px; }
   textarea.height9row  {height: 144px; }
   textarea.height10row {height: 160px; }
   textarea.height11row {height: 176px; }
   textarea.height12row {height: 192px; }

/* =================================================================================================== */
/* jQuery ui instellingen overrulen                                                                    */
/* =================================================================================================== */

   .ui-tabs .ui-tabs-panel {   /* ui padding is 1em 1.4em --> dus 16px 20px heel breed! */
      padding: 0px;
   }
   .ui-accordion .ui-accordion-content {   /* Inhoud binnen een accordion (default: 1em 2.2em 1em 2.2em) */
      padding: 15px;
   }