/* .name = object.class */
/* #name = object.id    */
/* body  = all html items */

/* Building a Responsive Grid-View */
/* First ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements. Add the following code in your CSS: */
* {
  box-sizing: border-box;
}

table {  /* Omlijning van een tabel beschrijven */
  border: 1px solid #ccbfaf;
}

tr:nth-child(even) {background-color:#faf2f1;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-roze*/
tr:nth-child(odd)  {background-color:#eff9f5;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-blauw*/

.dropbtn {       /* Dropdown Button */
  cursor: pointer;
  background-color:Transparent;
}

.dropdown {   /* The container <div> - needed to position the dropdown content */
  float: right;
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: red;
  min-width: 16px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: 20px;
  top: 40px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 1px 2px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
   background-color: blue;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;} 

/* https://www.w3schools.com/css/css_rwd_mediaqueries.asp */










@media only screen and (max-width: 600px) {  /* Extra small devices (phones, 600px and down) SAMSUNG S8 ********/

   body {
      background-color: AntiqueWhite;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 5vw; /* >1200= 1vw, <600= 5vw */ 
      color: black;
      margin: 0px;    /* Nodig om de menubalk netjes op het hele scherm te krijgen */
   }

   select {
      font-size: 5vw; /* >1200= 1vw, <600= 5vw */ 
      text-align: left;
      width: 100%
   }

   input {
      font-size: 5vw; /* >1200= 1vw, <600= 5vw */ 
      text-align: left;
      width: 100%
   }

   button:hover {
      cursor: pointer;
   }

   .topbar {
      z-index: 2; /*Anders zouden de buttons met tootips er overheen vliegen */
      font-size: 6vw; /* 1.5vw voor > 1200, 6vw voor max-width: 600px */
      color: white;
      vertical-align: middle;
      position: fixed;
      top: 0;
      width: 100%;
      background-color: red; /* slategray yellow red green fuchsia */
      border-style: none;
   }
   .topbarlogo {
      width: 7vw;  /* 1.5vw voor > 1200, 7vw voor max-width: 600px */
      height: 7vw; /* 1.5vw voor > 1200, 7vw voor max-width: 600px */
   }
   .topbarspacer {
      font-size: 9vw; /* 2.5vw voor > 1200, 9vw voor max-width: 600px */
   }

      img.zaad {
         width: 100%;
         height: 221px;
         border-radius: 0%;
         border: 1px solid #ddd;
         padding: 0px;
      }


   .tooltip {
      position: relative;
      display: inline-block;
   }

   .tooltip .tooltiptext {
      visibility: hidden;
      width: 150px;        /* >1200= 250px, <600=  150px */
      background-color: black;
      color: #fff;
      text-align: left;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: 110%;            /* >1200=   125%, <600=   110% */
      left: 60px;
      margin-left: -60px;   /* >1200= -160px, <600=  -60px */
   }



   .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 100%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent black transparent;
   }

   .tooltip:hover .tooltiptext {
       visibility: visible;
   }


   table.instellingen {
      background-color: white; 
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 1%;
    /*  float: center; */
    }

   table.instellingen:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }



   .trbuttonsedit {
      background-color: AntiqueWhite;
   }

   span.zaadzak { 
      width: 100%;
      height: 300px;      /* >1200= 690px, <600= 650px */
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 1%;
      float: left;
    }

   span.zaadzak:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   img.zaadzak {
      height: 500px;     /* >1200= 550px, <600= 500px */
      width: 80%;        /* >1200=   70%, <600=   80% */
      border-radius: 0%;
      border: 1px solid #ddd;
      padding: 0px;
   }

   span.inputfield:hover {
      cursor: pointer;
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   span.polaroid:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   span.container {
      width: 100%;
      padding: 0px 0px;
   }

   span.container:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   div.activiteit_kaart {
      width: 33%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      border-radius: 5%;
      float: left;
    }

   img.activiteit {
      width: 100%;
      height: 320px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }


   div.activatebarDIR {
      width: 100%;
      /*height: 170px;*/
      background-color:#F0DEF6;
      /* background-image: url("/flora/images/sys/backcouveuse1.png"); */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 5px;
      /*border-radius: 5%;*/
      /*float: left;*/
      text-align: center;
    }

   div.activatebarDIR:hover {
      /*cursor: pointer;*/
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   .activategrp {
      width: 50%;
      padding: 10px 5px;
   }


   .activatebar {
      cursor: pointer;
      /*box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);*/
   }

   .activatebar:hover {
      cursor: pointer;
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }
}







@media only print and (orientation: portrait) { /*Print A4 portrait*/
   .donotprint {
       display: none;
   }
   body {
      background-color: white;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 1.5vw;
      color: black;
      margin: 0px;    /* Nodig om de menubalk netjes op het hele scherm te krijgen */
   }
   tr:nth-child(even) {background-color:#faf2f1;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-roze*/
   tr:nth-child(odd)  {background-color:#eff9f5;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-blauw*/
   .topbar {
      font-size: 3vw;
      color: white;
      vertical-align: middle;
      position: fixed;
      top: 0;
      width: 100%;
      background: slategray;
   }
   .topbarlogo {
      width: 3vw;
      height: 3vw;
   }
   .topbarspacer {
      font-size: 5vw;  /* Nodig om de pagina niet onder de topbar te laten starten. */
   }

   img.zaad {
      width: 100%;
      height: 250px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }

   div.polaroid {
      width: 25%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      float: left;
      border-radius: 5%;
    }

   div.container {
      padding: 10px 20px;
      float: left;
   }

   div.polaroid:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   img.stopcontact {
      width: 50%;
      height: 100px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }

   div.stopcontact {
      width: 100%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      border-radius: 5%;
      float: left;
    }

   div.stopcontact:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }
}


@media only print and (orientation: landscape) { /* Print A4 landscape */
   .donotprint {
       display: none;
   }
   body {
      background-color: white;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 1.5vw;
      color: black;
      margin: 0px;    /* Nodig om de menubalk netjes op het hele scherm te krijgen */
   }
   tr:nth-child(even) {background-color:#faf2f1;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-roze*/
   tr:nth-child(odd)  {background-color:#eff9f5;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-blauw*/
   .topbar {
      font-size: 3vw;
      color: white;
      vertical-align: middle;
      position: fixed;
      top: 0;
      width: 100%;
      background: slategray;
   }
   .topbarlogo {
      width: 3vw;
      height: 3vw;
   }
   .topbarspacer {
      font-size: 5vw;  /* Nodig om de pagina niet onder de topbar te laten starten. */
   }

   img.zaad {
      width: 100%;
      height: 250px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }

   div.polaroid {
      width: 16.6%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      float: left;
      border-radius: 5%;
    }

   div.polaroid:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }


   div.container {
      padding: 10px 20px;
      float: left;
   }


   img.stopcontact {
      width: 50%;
      height: 100px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }

   div.stopcontact {
      width: 100%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      border-radius: 5%;
      float: left;
    }

   div.stopcontact:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }
}

















@media only screen and (min-width: 600px) {  /* Small devices (portrait tablets and large phones, 600px and up) */

   body {
      background-color: AntiqueWhite;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 2vw;
      color: black;
      margin: 0px;    /* Nodig om de menubalk netjes op het hele scherm te krijgen */
   }


   tr:nth-child(even) {background-color:#faf2f1;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-roze*/
   tr:nth-child(odd)  {background-color:#eff9f5;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-blauw*/

   .topbar {
      font-size: 2.55vw;
      color: white;
      vertical-align: middle;
      position: fixed;
      top: 0;
      width: 100%;
      background-color: green; /* slategray purple yellow green*/
      border-style: none;
   }

   .topbarlogo {
      width: 5vw;
      height: 5vw;
   }

   .topbarspacer {
      font-size: 13vw;  /* Vs 2.5 indien >1200px Nodig om de pagina niet onder de topbar te laten starten. */
   }

   img.zaad {
      width: 100%;
      height: 100;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }

   span.polaroid {
      width: 33%;
      height: 280px;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 5%;
      float: left;
    }

   img.stopcontact {
      width: 16%;
      height: 45px;
      border-radius: 15%;
      border: 3px solid #dddd;
      padding: 0px;
   }

   img.stopcontact:hover {
      cursor: pointer;
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   div.stopcontact {
      width: 50%;
      height: 155px;
      background-color:#faf2f1;
      /* background-image: url("/flora/images/sys/backcouveuse1.png"); */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 5px;
      border-radius: 5%;
      float: left;
      text-align: center;
    }

   div.stopcontact:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   div.hobbykas {
      width: 50%;
      height: 155px;
      background-color:#eff9f5;
      /* background-image: url("/flora/images/sys/backhobbykas.png"); */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 5px;
      border-radius: 5%;
      float: left; 
      text-align: center;
    }

   div.hobbykas:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }


   img.clock {
      width: 60%;
      height: 150px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }


   div.polaroid {
      width: 50%;
      height: 240px;
      background-color: white; 
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      border-radius: 5%;
      /* float: left; */
    }

   div.polaroid:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   span.container {
      width: 100%;
      padding: 10px 5px;
   }

   div.activiteit_kaart {
      width: 33%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      border-radius: 5%;
      float: left;
    }

   img.activiteit {
      width: 100%;
      height: 320px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }
}






@media only screen and (min-width: 768px) { /* Medium devices (Dell laptop landscape tablets, 768px and up) */
   body {
      background-color: AntiqueWhite;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 2vw;
      color: black;
      margin: 0px;    /* Nodig om de menubalk netjes op het hele scherm te krijgen */
   }
   tr:nth-child(even) {background-color:#faf2f1;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-roze*/
   tr:nth-child(odd)  {background-color:#eff9f5;} /* Geeft in een <table> elke th en tr afwisselend een andere achtergrond kleur flets-blauw*/

   .topbar {
      font-size: 6vw;
      color: white;
      vertical-align: middle;
      position: fixed;
      top: 0;
      width: 100%;
      background: blue;
   }
   .topbarlogo {
      width: 6vw;
      height: 6vw;
   }
   .topbarspacer {
      font-size: 2.5vw;
   }

   img.zaad {
      width: 100%;
      height: 380px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }

   div.polaroid {
      width: 33%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      float: left;
      border-radius: 5%;
    }

   div.container {
      padding: 10px 20px;
      float: left;
   }

   div.polaroid:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   img.stopcontact {
      width: 50%;
      height: 100px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }

   div.stopcontact {
      width: 100%;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      border-radius: 5%;
      float: left;
    }

   div.stopcontact:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }
}









@media only screen and (min-width: 992px) { /* Large devices (small laptops/desktops, 992px and up)       DELL */

   body {
      background-color: AntiqueWhite;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 1.2vw;      /* <600=5, >992=1.2 >1200=1 */ 
      color: black;
      margin: 0px;           /* Nodig om de menubalk netjes op het hele scherm te krijgen */
   }

   select {
      font-size: 1.2vw;      /* <600=5, >992=1.2 >1200=1 */ 
      text-align: left;
      width: 100%
   }

   input {
      font-size: 1.2vw;      /* <600=5, >992=1.2 >1200=1 */ 
      text-align: left;
      width: 100%
   }

   button:hover {
      cursor: pointer;
   }

   .topbar {
      font-size: 2vw;        /* <600=7, >992=2 >1200=1.5 */    
      color: black;
      vertical-align: middle;
      position: fixed;
      z-index: 2;            /*Anders zouden de buttons met tootips er overheen vliegen */
      top: 0;
      width: 100%;
      background-color: lightgray; /* slategray yellow orange red fuchsia green */
      border-style: none;
   }
   .topbarlogo {
      width: 2.5vw;  /* 1.5vw voor > 1200, 7vw voor max-width: 600px */
      height: 2vw;  /* 1.5vw voor > 1200, 7vw voor max-width: 600px */
   }
   .topbarspacer {
      font-size: 3.5vw; /* 2.5vw voor > 1200, 9vw voor max-width: 600px */
   }
   .tooltip {
      position: relative;
      display: inline-block;
   }

   .tooltip .tooltiptext {
      visibility: hidden;
      width: 250px;        /* >1200= 250px, <600=  150px */
      background-color: black;
      color: #fff;
      text-align: justify;
      border-radius: 6px;
      padding: 5px 10px ;
      position: absolute;
      z-index: 1;
      top: 150%;            /* >1200=   125%, <600=   110% */
      left: 50px;
      margin-left: -120px;  /* >1200= -160px, <600=  -60px */
   }

   .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 100%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent black transparent;
   }

   .tooltip:hover .tooltiptext {
       visibility: visible;
   }




   table.instellingen {
      background-color: white; 
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 1%;
    /*  float: center; */
    }

   table.instellingen:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }



   span.zaadzak {
      width: 33.3%;
      height: 200px;       /* >1200= 690px, <600= 650px */
      background-color: white; 
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 1%;
      float: left;
    }

   span.zaadzak:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   img.zaadzak {
      height: 550px;    /* >1200= 550px, <600= 500px */
      width: 70%;       /* >1200=   70%, <600=   80% */
      border-radius: 0%;
      border: 1px solid #ddd;
      padding: 0px;
   }

} /* END OF @media only screen and (min-width: 768px) { / Medium devices (Dell laptop landscape tablets, 768px and up) */









@media only screen and (min-width: 1200px) { /* Extra large devices (large laptops and desktops, 1200px and up)   UBUNTU PC ****************************************************/
   body {
      background-color: AntiqueWhite;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 1vw; /* >1200= 1vw, <600= 5vw */ 
      color: black;
      margin: 0px;    /* Nodig om de menubalk netjes op het hele scherm te krijgen */
   }

   select {
      font-size: 1vw; /* >1200= 1vw, <600= 5vw */ 
      text-align: left;
      width: 100%
   }

   input {
      font-size: 1vw; /* >1200= 1vw, <600= 5vw */ 
      text-align: left;
      width: 100%
   }

   button:hover {
      cursor: pointer;
   }

   .level1{
      font: 22px Arial;
      color: #008080;
      border: none;
    }


   .level2{
      font: 20px Arial;
      color: #ff6600;
      border: none;
   } 


   .level3{
      font: 18px Arial;
      color: #1E90FF;
      border: none;
   }


   .level4{
      font: 16px Arial;
      color: #B22222;
      border: none;
   }



   .topbar {
      font-size: 1.5vw; /* 1.5vw voor > 1200, 7vw voor max-width: 600px */
      color: white;
      vertical-align: middle;
      position: fixed;
      z-index: 2; /*Anders zouden de buttons met tootips er overheen vliegen */
      top: 0;
      width: 100%;
      background-color: slategray; /* slategray yellow red fuchsia green */
      border-style: none;
   }
   .topbarlogo {
      width: 1.5vw;  /* 1.5vw voor > 1200, 7vw voor max-width: 600px */
      height: 1.5vw;  /* 1.5vw voor > 1200, 7vw voor max-width: 600px */
   }
   .topbarspacer {
      font-size: 2vw; /* 2.5vw voor > 1200, 9vw voor max-width: 600px */
   }
      img.zaad {
         width: 100%;
         height: 221px;
         border-radius: 0%;
         border: 1px solid #ddd;
         padding: 0px;
      }

      img.stopcontact {
         width: 45px;
         height: 45px;
         border-radius: 15%;
         border: 3px solid #dddd;
         padding: 0px;
      }

      img.stopcontact:hover {
         cursor: pointer;
         box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
      }

   div.stopcontactrose {
      width: 16.6%;     /* >1200= 16.6%, <600=  100% */
      height: 185px;    /* >1200= 185px, <600= 155px */
      background-color:#faf2f1;
      /* background-image: url("/flora/images/sys/backcouveuse1.png"); */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 5px;
      border-radius: 5%;
      float: left;
      text-align: center;
    }

   div.stopcontactrose:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   div.stopcontactblue {
      width: 16.6%;     /* >1200= 16.6%, <600=  100% */
      height: 185px;    /* >1200= 185px, <600= 195px */
      background-color:#eff9f5;
      /* background-image: url("/flora/images/sys/backhobbykas.png"); */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 5px;
      border-radius: 5%;
      float: left; 
      text-align: center;
    }

   div.stopcontactblue:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   div.hobbykas:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }














   div.polaroid {
      width: 20%;
      height: 460px;
      background-color: white; 
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      border-radius: 5%;
      /* float: left; */
    }

   span.polaroid {
      width: 10%;   /* 10% voor > 1200, 50% voor max-width: 600px */
      height: 290px;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 5%;
      float: left;
    }


   span.legepot {
      width: 10%;   /* 10% voor > 1200, 50% voor max-width: 600px */
      height: 290px;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 5%;
      float: left;
    }


   span.vollepot {
      width: 10%;   /* 10% voor > 1200, 50% voor max-width: 600px */
      height: 530px;    /* >1200= 530px, <600=  640px */
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 5%;
      float: left;
    }

   span.pannelpotten {
      width: 33%;   /* 10% voor > 1200, 50% voor max-width: 600px */
      height: 190px;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 5%;
      float: left;
    }
   img.menubutton {
      width: 55px;
      height: 55px;
      border-radius: 5%;
      border: 2px solid #ddd;
      padding: 0px;
   }

   img.menubutton:hover {
      border: 2px solid #ff00cc;
   }

   img.containerscherm {
      width: 375px;
      height: 282px;
      border-radius: 0%;
      border: 1px solid #ddd;
      padding: 0px;
   }

   span.containerscherm {
      width: 420px;
      height: 500px;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 50px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 5%;
      float: initial;
    }

   .tooltip {
      position: relative;
      display: inline-block;
   }

   .tooltip .tooltiptext {
      visibility: hidden;
      width: 250px;        /* >1200= 250px, <600=  150px */
      background-color: black;
      color: #fff;
      text-align: left;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: 124%;            /* >1200=   125%, <600=   110% */
      left: 60px;
      margin-left: -160px;  /* >1200= -160px, <600=  -60px */
   }

   .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      bottom: 100%;
      left: 100%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent black transparent;
   }

   .tooltip:hover .tooltiptext {
       visibility: visible;
   }

   span.zaadzak {
      width: 33%;
      height: 290px;       /* >1200= 690px, <600= 650px */
      background-color: white; 
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 1%;
      float: left;
    }

   span.zaadzak:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   img.zaadzak {
      height: 550px;    /* >1200= 550px, <600= 500px */
      width: 70%;       /* >1200=   70%, <600=   80% */
      border-radius: 0%;
      border: 1px solid #ddd;
      padding: 0px;
   }



   span.fotopage1 {
      width: 25%;
      height: 530px;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 1%;
      float: left;
    }

   span.fotopage1:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   img.fotopage1 {
      height: 500px;
      border-radius: 0%;
      border: 1px solid #ddd;
      padding: 0px;
   }


   span.fotopage2 {
      width: 50%;
      height: 420px;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      margin-left: auto;
      margin-right: auto;
      border-radius: 1%;
      float: left;
    }

   span.fotopage2:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   img.fotopage2 {
      height: 85%;
      width: 60%;
      border-radius: 0%;
      border: 1px solid #ddd;
      padding: 0px;
   }



   span.inputfield {
      width: 100%;
   }

   span.inputfield:hover {
      cursor: pointer;
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   span.polaroid:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   span.container {
      width: 100%;
      padding: 0px 0px;
   }

   span.container:hover {
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   div.activiteit_kaart {
      width: 33%;
      height: 320px;
      background-color: white;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 25px;
      border-radius: 5%;
      float: left;
    }

   img.activiteit {
      width: 100%;
      height: 320px;
      border-radius: 5%;
      border: 1px solid #ddd;
      padding: 5px;
   }


   div.activatebarDIR {
      width: 100%;
      /*height: 170px;*/
      background-color:#F0DEF6;
      /* background-image: url("/flora/images/sys/backcouveuse1.png"); */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      margin-bottom: 5px;
      /*border-radius: 5%;*/
      /*float: left;*/
      text-align: center;
    }

   div.activatebarDIR:hover {
      /*cursor: pointer;*/
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }

   .activategrp {
      width: 50%;
      padding: 10px 5px;
   }


   .activatebar {
      cursor: pointer;
      /*box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);*/
   }

   .activatebar:hover {
      cursor: pointer;
      box-shadow: 0 0 4px 2px rgba(0, 140, 186, 0.5);
   }
} /*End of @media only screen and (min-width: 1200px) large laptops and desktops, 1200px and up UBUNTU SERVER PC  */