* {
  box-sizing: border-box;
}
html, body {
	height: 100%;
	margin: 0;
  }
.about {
    position:relative;
	top:3.6vw;
    color: #000;
    background: #fff;
    border: 1px solid black;
	/* height:28.2vw; */
	height:33.0vw;
    text-align: left;
    padding: 1vw;	
	font-weight:100;
	font-size:0.75vw;
}

.atlaslink {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	display:block;
	height:100%;
	text-decoration:none !important;	
}

.atlaslink {
	border-bottom:none;
	text-decoration:none;
}

.banner-heading {
  font-family:'Open Sans', Avenir Next; 
  font-size: 4vw; 
  text-align: center;	
  color:#fff;
  position:absolute;
  top:-0.5vw;
  text-shadow:0.1vw 0.1vw #000;
  z-index:2;
  margin-left:auto;
  margin-right:auto;
  display:block;
  width:100%;
}

body {
  margin: 0;
}

calcite-loader {
	top:4vw;
}

.showDisabled {
	display: block;
}

.noShowDisabled {
	display: none;
}

@media (min-width:500px) and (max-width:1000px){
	calcite-loader {
		top:8vw !important;
	}	
}

@media (max-width:499px){
	calcite-loader {
		top:11vw !important;
	}	
}

.lower {
	padding-top:75px;
}

.loading {
	position:relative;
	color:#000;
	margin-left:auto;
	margin-right:auto;
	display:block;
	width:9vw;
	font-size:0.65vw;
	top:50%;
}

.menubalk {
	position:absolute; 
	float:left; 
	background:#333; 
	opacity:1; 
	width:100%; 
	height:2.25vw; 
	margin-left:-3px; 
	z-index:-1;
}

.navbar {
  color:#fff;
  font-family: Lucida Sans, Lucida Grande, Arial !important;
  font-size: 1vw;
  /* text-transform: uppercase; */
  font-weight:600;
  width:100%;
  z-index:2;
  display:block;
  height:auto;
  min-height:6vh;
}

a#sign-in, a#startLoading, a#loginArcGIS, button#loginArcGIS, a#sign-out, a#sign-out-mobile .box.buttons {
  position:relative;
  top:1.0vw;
  left:0vw;
  z-index:5;
  text-decoration: none;
  letter-spacing:1px;
  font-size:0.6vw;
  height:2.25vw;
  background:#0d6efd;
  width:100%;
  max-width:15vw;
  display:block;
}
a#sign-out, a#sign-out-mobile {
    /* background: #ff3232 !important; /*red color */
    background: #0d6efd !important; /*blue color */
	display: block;
	color: #fff !important;
	margin-bottom: 1vw;
}

a#sign-in:hover, a#startLoading:hover, a#loginArcGIS:hover, button#loginArcGIS:hover, a#sign-out:hover, a#sign-out-mobile:hover, .dropdown:hover .dropbtn, .buttons:hover {
  background-color: #0d6efd;
  color: #fff;
  cursor:pointer;
  border-bottom: 0.2vw solid black;
  border-right: 0.2vw solid black;
  transition: all 0.8s, border-bottom 0s, border-right 0s;
  text-decoration: none !important;
  }

.userIdmobile {
  font-size:4vw !important;
  height:13vw !important;
  max-width:100% !important;
  margin-bottom:2vw !important;
}

.userIdmobile:hover {
  border-bottom: 1vw solid black !important;
  border-right: 1vw solid black !important;
}

#userIdmobile {
  margin-bottom:5px;
}

.userId {
	position:relative;
	/* border-radius: 0.5vw; */
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
	padding-right: 0.8vw;
	padding-left: 0.8vw;
	text-transform: none;
	background: #fff;
	color:#333;
    font-family: Lucida Sans, Lucida Grande, Arial;
    font-size: 1vw;
	text-align:left;
	z-index:2;
	border:0.1vw solid #000;
}

.dropdown {
  float: left;
  overflow: hidden;
  margin-left:15px;
  margin-right:15px;
}

.dropdown .dropbtn {
  font-size: inherit;  
  border: none;
  outline: none;
  color: #fff;
  padding: 7px 8px;
  background-color: inherit;
  font: inherit;
  margin: 0;
  text-transform: inherit;
  letter-spacing:1px;
  font-size:0.9em;
}

#etilframe, #previewframe {
	background:transparent; 
	width:95%; 
	z-index:2;	
	margin-left:3vw;
	margin-top:3vw;
}

h4 {
  text-align:left;
  color:#333;
}

.kolom > a {
  font-size:0.8em;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f5f5f5;
  min-width:500px;
  width: 44%;
  /* max-height:480px; */
  height: 55%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 4;
}

.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}

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

.login {
	color:#fff;
	background:#0d6efd;
	padding:20px;
	border-radius:6px;
	font-size:1.2em;
	text-decoration:none;
	font-weight:600;
}

.login:hover {
	background:#fff;
	color:#333;
	border-bottom:4px solid black;
    transition: all 0.8s, border-bottom 0s;  
}

/* Create three equal columns that floats next to each other */
.kolom {
  float: left;
  width: 50.0%;
  padding: 10px;
  height: 250px;
  cursor: pointer;
}

.kolom a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-radius: 6px;
}

.kolom a:hover {
  background-color: #0d6efd;
  color:#fff;
  transition: all 0.8s, border-bottom 0s;  
}

.ondertitel {
	margin-top:75px;
}

/* Clear floats after the columns */
.rij:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 1199px) {
	.atlaslink {
		position:relative !important;
	}
	
	.box {
		padding:0% !important;
	}
	
	#etilframe {
		/* top:0vw !important;  */
	}
	
	.icoon {
		max-width:100% !important;
		width:100% !important;
	}
	
	.innerContent {
		position:relative !important;
	}
}

@media screen and (min-width: 783px) and (max-width: 765px) {

/*
	.action {
		position:relative;
		top:0.5vw;
	}
*/
	
    .menubalk {
	    background:transparent;
    }
    
    /* 
	.navbar a#sign-in {
      width: 50%;
      border: none;
	  padding-top: 0px;
	  background: #333;
	  margin-right:1vw;
	  opacity:1;
	  top:2.25vw;
	  position:relative;
	  border-top:0.1vw solid white;
    }
	*/
	
	#etilframe {
		top:14vw !important; 
	}
	
	#previewframe {
		top:7vw !important; 
	}

	.zoek {
		top:13vw !important;
	}

}

.row {
	/* margin-top:40px; */
}

.minimaliseer {
	display:block;
	float:right;
	position:relative;
	top:0px;
	right:0px;
	padding:10px;
	cursor: pointer;
	border-radius:6px;
	background:#4c4c4c;
	color:#fff;
	height:35px;
	text-transform:none;
	font-size:0.9em;
	padding-bottom:30px;
	border-bottom:4px solid #4c4c4c;
}

.minimaliseer:hover {
	background:#0d6efd;
}

.minimaliseer:hover, .maximaliseer:hover {
	border-bottom:4px solid black;
	transition: all 0.8s, border-bottom 0s; 
}

.maximaliseer:hover {
	background:#0d6efd;
	color:#fff;
}

.maximaliseer {
	display:none;
	float:right;
	position:relative;
	top:39px;
	left:0px;
	padding-top:5px;
	cursor: pointer;
	background:#4c4c4c;
	color:#fff;
	height:37px;
	margin-top:-39px;
	width:100%;
	font-size:0.9em;
}

#personalizedPanel, #anonymousPanel, #transbox {
	/* display: block; */

/*
	padding-left: 3px;
	padding-right: 3px;
	text-align: center;
	position:absolute;
	width: 10%;
	margin-top: 0.75vw; 
	left: 5%;
	z-index:4;
	float:right;
*/
}

.subtitle {
	color: #FFF; 
	/*text-align: right; */
	/* font-size:2vw;	*/
	top:4vw; 
	/*right:1vw;*/
	/*margin-right:2vw;*/
}

svg {
	color:inherit;	
}

.titelZoekresultaten {
	padding:10px; 
	position:absolute;
	width:370px;
	top:-21px;
	overflow-y:auto;
	overflow-x:hidden;
	height:56px;
}

#transbox {
	background: #ccc;	
	opacity:0.6;
}

.zoek {
	display: none; 
	color: #555; 
	text-align: center; 
	margin:auto;
	position:absolute;
	top:39px;
	right:39px;
}

.zoek.zoek-min{
	float: left !important; 
	margin-top: 0px;
	position:relative;
	margin-bottom: 0px;
	margin-left: 45px !important;
	top: 2px !important;
}

.zoekresultaten {
  display: block;
  position: relative;
  background-color: #fff;
  width: 521px;
  left: 0;
  z-index: 2;
  margin-left:auto;
  margin-right:auto;
  box-shadow:2px 2px 2px 2px #ccc;
  overflow-y:auto;
}

/* icons */
.icon {
  /* margin: 25px 50px; */
  /* max-width: 50x; */
  max-height: 17px;
  float:left;
  margin-right:10px;
  margin-top:-2px;
}

.icon-groot {
  margin: 50px 50px;
  max-width: 150x;
  max-height: 150px;
}

.icon:hover {
  filter: grayscale(0%);
  transform: scale(1.2);
  transition: 0.8s;
  }
  
.icon-groot:hover {
  filter: grayscale(0%);
  transform: scale(1.2);
  transition: 0.8s;
  }
  
.onderwerp{
    font-weight: 700;
    font-size: 1em;
    color: #0d6efd;
  }
 
#signOutBlock {
	/* display:block; 
	width:10%; 
	float:right; 
	position:absolute; 
	*/
	z-index:4;
}
@media (min-width: 1200px) {
	.show-only-large {
	  display: block !important;  /* Maak het zichtbaar voor grote schermen */
	}
	.show-only-small {
	  display: none !important;  /* Verberg het voor grote schermen */
	}
}
  

@media (min-width: 1000px) and (max-width: 1275px){
	.lower {
		padding-top:75px;
	}
}

  
/* Als het scherm kleiner is dan 1200px (mobiele versie) */
@media (max-width: 1199px) {
	.lower {
		padding-top:75px;
	}

	.show-only-large {
	  display: none !important;  /* Verberg het voor kleine schermen */
	}

	.show-only-small {
	  display: block !important;  /* Maak het zichtbaar voor kleine schermen */
	  font-size: 1vw !important;  /* Pas de lettergrootte aan voor kleine schermen */
	}
}
  
/* Specifieke stijl voor #userId op kleine schermen */
@media (max-width: 1199px) {
	#userId.show-only-small {
	  font-size: 1vw !important;  /* Vergroot de tekstgrootte op kleinere schermen */
	}
}