html, body, .grid-container { height: 100%; margin: 0;
font-family: Barlow, sans-serif;
font-size: 16px;

 }

.grid-container {
  height : 100vh;
  width : 100vw;
  display: grid;
  grid-template-columns: 12.5% 54% 20% 12.5%;
  grid-template-rows: 10% 10% 30vw 22%;
  gap: 1vw 2vh;
  grid-template-areas: "G . . ." ". A B ." ". C D ." ". . . .";
}

.TESTDINGEN {30vw}

.A { grid-area: A; }

.B { grid-area: B;
    background-color: #B4ADA5;}

.C { grid-area: C;
      background-color: #B4ADA5; }

.D { grid-area: D;
        background-color: #ab9882; }

.G { grid-area: G; }

 { grid-area: C;}

#cmcVGVL,
#cmcAGVL,
#cmcIVGVL,
#cmcIAGVL,
#cmcBG,
#cmcV1,
#cmcV2,
#cmcV3 {grid-area: D;}

.leaflet-container {
  background: #ffffff;
}

.dropbtn {
  width: 100%;
  height: 10vh;
  background-color: #B4ADA5;
  color: white;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color:#B4ADA5;
}

.dropdown {
  position: relative;
  font-size: 1em;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width:28%;
  min-width: 160px;
  overflow: auto;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

.oud {

  padding: .5rem 0;
  margin: .125rem 0 0;

}

.dropdown-menu {
  position: absolute;
  height: 31.4vw;
  width: 100%;
  top: 9vh;
  z-index: 1000;
  display: none;
  font-size: 0.7rem;
  text-align: left;
  list-style: none;
  background-color: #B4ADA5;
  background-clip: padding-box;
  border: 0px;
  border-radius:0px;
}

.dropdown-item {
  width: 100%;
  padding: .25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #B4ADA5;
  border: 0px;

}

.leaflet-container {
  background: #ffffff;
}

.leaflet-control-layers-expanded {
  background: transparent;
  box-shadow: 0 0 0px rgba(0,0,0,0);
  height:46vh;

  background-position:3px 50% ;
  padding:6px;
  padding-left:2vw;
  font-size: 15px;
  color: white;
  }

.leaflet-control-layers-scrollbar {
    overflow-y: hidden;
    overflow-x: hidden;
    padding-right: 5px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%%;
}

.h1, h1 {
font-size: 1.4em;
text-align: left;
  }

button, input, optgroup, select, textarea {

    font-family: inherit;
    font-size: 1.1em;

}

.h2, h2 {
font-size: 15px;
  }

.h2 {
text-align: left;
font-size: 10px;
}

br {
line-height: 1%;
}

.p2 {
font-family: "Barlow",sans-serif;
font-size: 30px;
font-weight:bold;
position: relative;
}

.tab-pane {
width: 100%;
height: 100%;
border: 0px solid #ccc;
margin-bottom: 0px;
}

.tab-content>.active{
display:block;
height: 30vw;

}

.nav {
background-color: #fff !important;
font-size: 1em;
color: #333;
}

h4 {
  font-family: Barlow,sans-serif;
  font-size: 16px;
  background-color: transparent;
}

h3 {
  font-family: Barlow,sans-serif;
  font-size: 16px;
  background-color: transparent;
  text-align: right;
}



a {
font-family: Barlow,sans-serif;
font-size: 1.1em;
font-weight: bold;
background-color: transparent;
color: #755e43;

}

a:not([href]) {
color: inherit;
font-weight: normal;
text-decoration: underline;

}

a1 {
  font-family: Barlow,sans-serif;
  font-size: 1.3em;
  font-weight: normal;
  background-color: transparent;
  color: #755e43;
}

a1:not([href]) {
  color: inherit;
  font-weight: normal;
  text-decoration: underline;
}

a1:active {
  color: #B4ADA5;
}

h3print{
  font-family: Barlow,sans-serif;
  font-size: 25px;
  background-color: transparent;
  text-align:center;
  vertical-align:middle;
  padding: .0rem 1.5rem;
  color: white;
  cursor: pointer;
}


.nav>li>a {
background-color: #000000 !important;
font-size: 1em;
color: #ab9882;
vertical-align:middle;
line-height: 1.1em;
}

.nav-tabs .nav-link {
border: 0px solid transparent;
cursor: pointer;

}
.nav-tabs {
border-bottom: 0px solid #dee2e6;
max-width: 75%;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active  {
cursor: pointer;
font-family: Barlow, sans-serif;
color: #755e43;
font-size: 1.1em;
text-decoration: underline;
text-decoration-color: #ab9882;
background-color: #fff;
border-width: 0px;
border-color: #fff  #fff #fff;
}

.nav-link:hover {
color: #87745d !important;
cursor: pointer;
}

.favic {
width: 0em;
height: 0em;
padding-top: 1em;
padding-left: 1em;
}

.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
cursor: pointer;
top: 1px;
}

.dropbtn2 {
  width: 100%;
  height: 10vh;
  background-color: #ab9882;
  color: white;
  border: none;
  cursor: pointer;
}

.dropbtn2:hover, .dropbtn2:focus {
  background-color: #ab9882;
}

.dropdown2 {
  position: relative;
  font-size: 1em;
}

.dropdown-content2 {
  position: absolute;
  height: 40vh;
  width: 100%;
  top: 97%;
  z-index: 1003;
  display: none;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 0.7rem;
  text-align: left;
  list-style: none;
  background-color: #ab9882;
  background-clip: padding-box;
  border: 0px;
  border-radius:0px;
}

.dropdown-content2 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

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

.show2 {display: block;}
.show3 {display: block;}

.checkbox {
    display: inline-flex;
    cursor: pointer;
    position: relative;
}

.checkbox > span {
    color: #34495E;
    padding: 0.5rem 0.25rem;
}

.checkbox > input {
    height: 25px;
    width: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 1px solid #34495E;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #41B883;
    cursor: pointer;
  }

.checkbox > input:checked {
    border: 1px solid #41B883;
    background-color: #34495E;
}

.checkbox > input:checked + span::before {
    content: '\2713';
    display: block;
    text-align: center;
    color: #41B883;
    position: absolute;
    left: 0.7rem;
    top: 0.2rem;
}

.checkbox > input:active {
    border: 2px solid #34495E;
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="checkbox"] + span {
  font: 1em sans-serif;
  vertical-align:middle;
  text-align: center;

}

input[type="checkbox"] + span:before {
  font: 1.1em FontAwesome;
  content: '\f0c8';
  display: inline-block;
  width: 1em;
  padding:0em 0 0 0em;
  margin-right: 0.5em;
}

input[type="checkbox"]:checked + span:before {
  font: 1.1em FontAwesome;
  content: '\f14a';
  color: #fff;
}
input[type="checkbox"]:focus + span:before {
  outline: 1px dotted #aaa;
}
input[type="checkbox"]:disabled + span {
  color: #999;
}

@media only screen and (max-width: 1600px)   {

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    font-size: 0.9em;
}

a {
    font-size: 0.9em;
}

.nav-link {
    display: block;
    padding: 0rem 0.4rem;
}

button, input, optgroup, select, textarea {
  font-size: 0.9em;
}

input[type="checkbox"] + span {
  font: 0.8em sans-serif;
}

input[type="checkbox"] + span:before {
  font: 1.1em FontAwesome;
  content: '\f0c8';
  display: inline-block;
  width: 1.2em;
  padding: 0em 0 0 0em;
  margin-right: 0.5em;
}

input[type="checkbox"]:checked + span:before {
  font: 1.1em FontAwesome;
  content: '\f14a';
  color: #fff;
}

}

@media only screen and (min-width: 1281px) and (max-width: 1440px){


.dropdown-menu {
  height: 31.3vw;
  width: 100%;
  top: 9vh;
}

.nav-tabs {
  max-width: 95%;
}

a1 {
    font-size: 1.1em;

}

}

@media only screen and (min-width: 1100px) and (max-width: 1280px) {

.dropdown-menu {
  height: 32.3vw;
  width: 100%;
  top: 9vh;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    font-size: 0.9em;
}

a {
    font-size: 0.9em;
}

.nav-link {
    display: block;
    padding: .2rem 0.4rem;
}

.nav-tabs {
  max-width: 95%;
}

button, input, optgroup, select, textarea {
  font-size: 0.9em;
}

input[type="checkbox"] + span {
  font: 0.7em sans-serif;
}

input[type="checkbox"] + span:before {
  font: 1.2em FontAwesome;
  content: '\f0c8';
  display: inline-block;
  width: 1.2em;
  padding: 0px 0 0 3px;
  margin-right: 0.5em;
}

input[type="checkbox"]:checked + span:before {
  font: 1.2em FontAwesome;
  content: '\f14a';
  color: #fff;
}

}

@media only screen and (max-width: 1099px) {

.dropdown-menu {
  height: 50vh;
  width: 100%;
  top: 96%;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    font-size: 0.8em;
}

a {
    font-size: 0.8em;
}

.nav-link {
    display: block;
    padding: .3rem 0.4rem;
}

.nav-tabs {
  max-width: 100%;
}

button, input, optgroup, select, textarea {
  font-size: 0.8em;
}

input[type="checkbox"] + span {
  font: 0.65em sans-serif;
}

input[type="checkbox"] + span:before {
  font: 1.2em FontAwesome;
  content: '\f0c8';
  display: inline-block;
  width: 1.2em;
  padding: 0px 0 0 3px;
  margin-right: 0.5em;
}

input[type="checkbox"]:checked + span:before {
  font: 1.2em FontAwesome;
  content: '\f14a';
  color: #fff;
}

}

@media only screen and (max-width: 1000px) {

.dropdown-menu {
  height: 32vw;
  width: 100%;
  top: 96%;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    font-size: 0.6em;
}

a {
    font-size: 0.6em;
}

.nav-link {
    display: block;
    padding: .2rem 0.4rem;
}

.nav-tabs {
  max-width: 85%;
}

button, input, optgroup, select, textarea {
  font-size: 0.6em;
}

input[type="checkbox"] + span {
  font: 0.6em sans-serif;
}

input[type="checkbox"] + span:before {
  font: 1em FontAwesome;
  content: '\f0c8';
  display: inline-block;
  width: 1em;
  padding: 0px 0 0 3px;
  margin-right: 0.5em;
}

input[type="checkbox"]:checked + span:before {
  font: 1em FontAwesome;
  content: '\f14a';
  color: #fff;
}

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {

.grid-container {
  height : 100vh;
  width : 100vw;
  display: grid;
  grid-template-columns: 12.5% 55% 20% 12.5%;
  grid-template-rows: 20% 10% 30vw 20%;
  gap: 1vw 2vh;
  grid-template-areas: "G . . ." ". A B ." ". C D ." ". . . .";
}

.favic {
  width: 0em;
  height: 0em;
  padding-top: 1em;
  padding-left: 1em;
  vertical-align:middle;
}

.nav-link {
  padding: .3rem .3rem;
}
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active  {
  font-size: 0.8em;
}

a {
  font-size: 0.8em;
}

.h1, h1 {
  font-size: 1.0em;
  text-align: center;
}

.dropdown-menu {
  position: absolute;
  height: 31.5vw;
  width: 100%;
  top: 9vh;
  z-index: 1000;
  display: none;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 0.7rem;
}



a1 {
  font-family: Barlow,sans-serif;
  font-size: 1em;
  font-weight: normal;
  background-color: transparent;
  color: #755e43;
}

button, input, optgroup, select, textarea {
    font-size: 0.7em;
}

input[type="checkbox"] + span {
  font: 0.6em sans-serif;
}

input[type="checkbox"] + span:before {
  font: 1.2em FontAwesome;
  content: '\f0c8';
  display: inline-block;
  width: 1.2em;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}

input[type="checkbox"]:checked + span:before {
  font: 1.2em FontAwesome;
  content: '\f14a';
  color: #fff;
}

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {

.grid-container {
  display: grid;
  grid-template-columns: 2.5% 95% 2.5%;
  grid-template-rows: 7vh 5vh 4vh 5vh 1vh 5vh 5vh 5vh 20vh 4vh;
  gap: 1% 1%;
  grid-template-areas: " . . . " ". G ." ". . ." ". A ." ". B ." " . . . " ". D ." " . . . " ". C ." ". F .";
}

.nav-link {
  padding: .2rem .2rem;
}
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active  {
  font-size: 0.8em;
}

a {
  font-size: 0.8em;
}

.h1, h1 {
  font-size: 1.0em;
  text-align: center;
}

.dropdown-menu {
  position: absolute;
  height: 41.6vh;
  width: 100%;
  top: 97%;
  z-index: 1000;
  display: none;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 0.7rem;
}



.dropbtn {
  width: 100%;
  height: 7vh;
}

.dropbtn2 {
    width: 100%;
    height: 7vh;
}

.leaflet-control-layers-expanded {
    font-size: 1em;
}

a1 {
  font-family: Barlow,sans-serif;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  font-size: 0.8em;
}

input[type="checkbox"] + span {
  font: 0.6em sans-serif;
}

input[type="checkbox"] + span:before {
  font: 1.2em FontAwesome;
  content: '\f0c8';
  display: inline-block;
  width: 1.2em;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}

input[type="checkbox"]:checked + span:before {
  font: 1.2em FontAwesome;
  content: '\f14a';
  color: #fff;
}

}

@media (max-width: 750px) and (orientation:landscape) {

.grid-container {
  height : 100vh;
  width : 100vw;
  display: grid;
  grid-template-columns: 12.5% 55% 25% 12.5%;
  grid-template-rows: 10% 10% 30vw 10%;
  gap: 1vw 2vh;
  grid-template-areas: "G . . ." ". A B ." ". C D ." ". . . .";
}



.favic {
  width: 0em;
  height: 0em;
  padding-top: 1em;
  padding-left: 1em;
  vertical-align:middle;
}

.nav-tabs {
  max-width: 100%;
}

.nav-link {
  padding: .2rem .2rem;
}
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active  {
  font-size: 0.6em;
}

a {
  font-size: 0.6em;
}

.h1, h1 {
  font-size: 0.6em;
  text-align: left;
}


.dropdown-menu {
  position: absolute;
  height: 31.5vw;
  width: 100%;
  top: 9vh;
  z-index: 1000;
  display: none;
  padding: .5rem 0;
  margin: .125rem 0 0;
  font-size: 0.7rem;
}



a1 {
  font-family: Barlow,sans-serif;
  font-size: 0.8em;
  font-weight: normal;
  background-color: transparent;
  color: #755e43;
}

button, input, optgroup, select, textarea {
    font-size: 0.6em;
}

input[type="checkbox"] + span {
  font: 0.4em sans-serif;
}

input[type="checkbox"] + span:before {
  font: 1.0em FontAwesome;
  content: '\f0c8';
  display: inline-block;
  width: 1.0em;
  padding: 2px 0 0 3px;
  margin-right: 0.5em;
}

input[type="checkbox"]:checked + span:before {
  font: 1.0em FontAwesome;
  content: '\f14a';
  color: #fff;
}

.leaflet-control {
    position: relative;
    z-index: 800;
}



}

@media (max-width: 750px) and (orientation:portrait) {

.grid-container {
  display: grid;
  grid-template-columns: 4.5% 90% 4.5%;
  grid-template-rows: 1vh 1vh 1vh 12vh 5vh 5vh 5vh 5vh 30vh 4vh;
  gap: 1vh 1vw;
  grid-template-areas: " . . . " ". G ." ". . ." ". A ." ". B ." " . . . " ". D ." " . . . " ". C ." ". F .";
}

.nav-tabs {
  max-width: 100%;
}

.favic {
width: 0em;
height: 0em;
padding-top: 0em;
padding-left: 0em;
}

.tab-content>.active{
  display:block;
  height: 30vh;
}


 .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
     pointer-events: none !important;
 }

.leaflet-control-layers-expanded {
background: transparent;
box-shadow: 0 0 0px rgba(0,0,0,0);
height:10vh;
width:90vw;
background-position:3px 50% ;
padding:6px;
padding-left:2vw;
font-size: 13px;
color: white;
}

button, input, optgroup, select, textarea {
  font-size: 0.9em;
}

.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%%;
}

.nav {
  background-color: #fff !important;
  font-size: 16px;
  color: #333;
}

.nav-tabs, .nav-pills {
  text-align:center;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  text-align: center;
  font-family: Barlow, sans-serif;
  color: #ab9882;
  font-size: 13px;
  text-decoration: underline;
  background-color: #fff;
  border-width: 0px;
  border-color: #fff #fff #fff;

}

.nav-link {
  display: block;
  padding: .2rem .2rem;
}

a {
  font-family: Barlow,sans-serif;
  color: #333;
  font-size: 13px;
  background-color: transparent;
}

.h1, h1 {
font-size: 1em;
text-align: left;
  }

.h2, h2 {
font-size: 1em;
  }

.h2 {
text-align: left;
font-size: 10px;
}

.dropdown-menu {
position: absolute;
height: 44vh;
width: 100%;
top: 95%;
z-index: 1001;
display: none;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 0.7rem;
text-align: left;
list-style: none;
background-color: #B4ADA5;
background-clip: padding-box;
border: 0px;
border-radius:0px;
}

.dropdown-content2 {
    height: 32vh;
    top: 97%;

}


.leaflet-control-layers-expanded {

background: transparent;
box-shadow: 0 0 0px rgba(0,0,0,0);
width:90vw;
background-position:3px 50% ;
padding:6px;
padding-left:10vw;
font-size: 13px;
color: white;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0px;
    font-size: 13px;
    margin-bottom: .5rem;
}