:root {
  --donker: #d4dada;
  --licht: #e9efef;
  --body-color:#ffffff;
  --positief: #85e085;
  --negatief: #ffb3b3;

}


body {
  /*background-color: #f8fcfc;

background-color: #e9efef;
    background-color: #fcf8f8;
  background-color: #e9efef;*/
  background-color: var(--body-color);
    color: #122301;
}


* {
  box-sizing: border-box;
}

.header {
  background-color: #e9efef;
  border: 3px solid #d4dada;
  padding: 2px;
  text-align: center;
/*  font-size:1.2vw; */
  font-size:12px;

  color: #e0e2df; 
/*  margin-bottom: 16px;*/
}

.nbsp{
  background-color: #ffffff;
}

#cs_test{
  width: 960px;
  height: 70px;
  background-color: #f5f8ef;
  border: 1px solid #cfbfbf;
  border-radius: 4px;
  padding: 5px;
  display: block;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  font-family: Tahoma, Verdana, sans-serif;
  font-style: italic;
  color: #1e2807d0;
  font-size: 24px;
  text-align: center;
}

.cs_menu_toon {
  width: 40%;
  height:100%;
  transition: width 0.7s;
  margin-left: 0px;
}

.cs_menu_hide {
  width: 0%;
  height:100%;
  transition: width 0.7s;
  margin-left: -30px;
}

.cs_menu_toon2 {
  width: 40%;
  height:100%;
  transition: width 0.7s;
}

.cs_menu_hide2 {
  width: -0%;
  height:100%;
  transition: width 0.7s;
}

button{
  width: 100%;

  background-color: #d4dada;
}


.dropbtn {
/*  background-color: #04AA6D;
d4dada
#e4e9e9
*/
background-color: #a3a9a9;
  color: white;
  padding: 6px;
  font-size: 16px;
  margin-top: 15px;
  margin-left: 1px;
  border: 3px solid #d4dada;
}

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 5px 5px;
/*  text-align: right; */
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #fe8e41;}

label{
  width: 100%;
  margin-top: 15px;
  text-align: right;
}

input[type=text], select {
  width: 100%;
  padding: 5px 7px;
  margin: 0px 0px 8px 0px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=checkbox], select {
  width: 100%;
  padding: 5px 20px;
  margin: 0px 0px 8px 0px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;

}


.menu{
  background-color: #e9efef;
  border: 3px solid #d4dada;
  padding: 4px;
}

.data{
  background-color: #e9efef;
  border: 3px solid #d4dada;
  margin-top: 16px;
  padding: 4px;
}

div.shadow {
  background-color: yellow;
  box-shadow: 10px 10px grey;
  margin: 16px;
  padding: 8px;
  text-align: center;
}

div.oneven{
  display: inline-blok;
  background-color: #d4dada;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  margin-left: 8px;
  padding: 4px;
}

div.even{
  display: blok;
  background-color: #e9efef;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  margin-left: 8px;
  padding: 4px;
}


div.periode{
  display: blok;
  background-color: #efefef;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  margin-left: 8px;
  padding: 4px;
}

div.adres{
  display: blok;
  background-color: #eeeeee;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  margin-left: 8px;
  padding: 4px;
  text-align: right;
  vertical-align: text-bottom;
}

div.lijn{
  margin-top: 1px;
  margin-bottom: 12px;
  margin-right: 2px;
  margin-left: 8px;
  padding: 1px;

  background-color: #22f41f;

}


.row::after {
  content: "";
  clear: both;
  display: table;
}


/* For mobile phones: */
[class*="col-"] {
  width: 100%;
  float: left;
}

p.periode{
  text-align: left;
}

[class^="col-s-status"] {
  background: var(--licht);

  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  margin-left: 8px;
  padding: 2px;
  text-align: center;
}

.donker-color{background: var(--donker);}

.verschil{
  background: var(--licht);
  margin:1px;

}

@media only screen and (min-width: 300px) {
  /* For tablets: */
  /* header */
  .col-s-m {width: 32%; background-color: #eeeeff;display: inline; margin: auto;top: 50%;left: 50%;}
  .col-s-h {width: 98%;display: inline;}

  /* status */
  .col-s-status-geen-label {width: 38%;background-color: var(--body-color);}
  .col-s-status-label {width: 38%; background-color:var(--donker); text-align: right;}
  .col-s-status-label-zon-werkelijk {width: 75.2%; background-color:var(--donker); text-align: right;}  /* status label */
  .col-s-status-huidige {width: 18%;}  /* status huidige */
  .col-s-status-huidige-label {width: 18%;background-color:var(--donker);}
  .col-s-status-vorige {width: 18%;}  /* status vorige */
  .col-s-status-vorige-label {width: 18%;background-color:var(--donker);}
  .col-s-status-verschil {width: 13%;}  /* status veschil */
  .col-s-status-verschil-positief {width: 13%; background-color:var(--positief);display: block;}  /* status veschil */
  .col-s-status-verschil-negatief {width: 13%; background-color:var(--negatief);display: block;}  /* status veschil */
  .col-s-status-verschil-label {width: 13%;background-color:var(--donker);}


  /* standaard */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  div.evens{
    margin-top: 0px;
    margin-bottom: 0px;
  }
  div.lijn {display: block;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  /* header */
  .col-m-m {width: 10%;background-color: #eeeeee;}
  .col-m-h {width: 90%;}

  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}
  div.evens{
    margin-top: 0px;
    margin-bottom: 0px;
  }
div.lijn {display: block;}
}

@media only screen and (min-width: 1500px) {
  /* For desktop: */
  /* header */
  .col-m {width: 5%;background-color: #eeeeee;top: 50%;}
  .col-h {width: 95%;}

  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  div.evens{
    margin-top: 0px;
    margin-bottom: 0px;
  }
div.lijn {display: none;}
}