/* CSS styles for the ajax overlay on click at details */
:root {
	
	/* Main colors */
	--clr-primary-100: hsla(0, 0%, 0%, 1);
	--clr-primary-400: hsla(192, 11%, 18%, 1);
	--clr-primary-700: hsla(76, 94%, 25%, 1);
	
		
	--clr-db-box: hsla(66, 77%, 65%, 1);
		
	/* Accent colors*/
	--clr-accent-white: hsla(0, 0%, 100%, 1) ;
	--clr-accent-white-transparent: hsla(0, 0%, 100%, 0.5);
	--clr-accent-200: hsla(96, 43%, 93%, 1);
	--clr-accent-500: hsla(89, 18%, 75%, 1);
	--clr-accent-800: hsla(0, 0%, 60%, 1);
	
	--clr-accent-700: hsla(0, 0%, 44%, 1);
	
	--clr-grey-transparent: hsla(0, 0%, 20%, 0.8);

	/* Font-colors */
	--clr-ff-100: var(--clr-accent-white);
	/* Font-settings*/
	
	--ff-primary: "Arial";
	
	--ff-body: var(--ff-primary);
	--ff-heading: var(-ff-primary);
	
	--fw-regular: 400;
	--fw-semi-bold: 500;
	--fw-bold: 700;
	
	--fs-200: .75rem;
	--fs-300: .875rem; /* LINK: KP-resp-webs part one 37:40 */
	--fs-400: 1rem;
	--fs-500: 1.25rem;
	--fs-600: 1.5rem;
	--fs-700: 2rem;
	
	--fs-body: var(--fs-400);
	--fs-primary-heading: var(--fs-700);
	
	--fs-nav: var(--fs-300);
	
	/* gap-values*/
	--gap-slim: 0.5rem;
	--gap-normal: 1rem;
	--gap-braod: 1.5rem;
}

::-webkit-scrollbar {
  	width: 0.5em;
	max-height: 10%;
}
::-webkit-scrollbar-track{
	background: var(--clr-scroll-track);
	margin-block: .5em;
	border-radius: .25em;
	
}
::-webkit-scrollbar-thumb{
	background: var(--clr-scroll-thumb);
	border-radius: .25em;
	
}
#pm_wait{
	border: .125em solid green;
	border-radius: 1.5em;
	margin-right: 1.25em;
	background-color: hsla(0,0%,85%,0.50);
	background-blend-mode: lighten;
	
}


/*test*/
#pm_gis_region{
z-index: 10000; 
background: var(--clr-grey-transparent); 
width: 99%; 
height: 9480px; 
position: absolute; 
top: 6ex; 
left: 1px; 
padding: 23px;

}
#pm_gis_region a.pm_close_button{
  text-align:right;
  width:6em;
  border:1px inset black; 
  padding: 12px; 
  font-size:200%; 
  text-align: center; 
  float:right;
  color:black;
  background:white;
  border-radius:8px;
  
}

#pm_gis_region a.pm_close_button:hover{
 background:#e6e0ff;
 text-shadow: 0 0 2px red;
 cursor: pointer;
 border:2px outset black;
}

iframe {
	display: block;
	margin: auto;
	
}

#pm_iframe_details{
	
}

#pm_details_overlay{
  font-family: var(--ff-primary);
  background-color: var(--clr-db-box);
  padding: 2em;
  margin-left: auto;
  margin-right: auto;	
  
}


#pm_ajax_paym{
	border: .125em solid green;
	border-radius: 1.5em;
	margin-right: 1.25em;
	background-color: hsla(0,0%,67%,0.50);
	background-blend-mode:  soft-light;

}
#pm_ajax_basics{
	border: .125em solid green;
	border-radius: 1.5em;
	margin-right: 1.25em;
	background-color: hsla(0,0%,85%,0.50);
	background-blend-mode: lighten;
}

#pm_iframe_scans{
	border: .125em solid green;
	border-radius: 1.5em;
	margin-right: 1.25em;
	background-color: hsla(0,0%,85%,0.50);
	background-blend-mode: lighten;
	overflow-x: hidden;
}


#pm_ajax_frame {
	display: flex;
	width: 45vw;
	
}
#pm_ajax_paym {
 padding:16px; 
}
#overlay-mapbox{
	width: 35em;
	border: .125em solid green;
	border-radius: 1.5em;
	background-color: hsla(0,0%,85%,0.50);
}
#pm_details_map{
	position: relative;
	width: 55ch;
	height: 8vh;
	
}

#pm_ajax_basics ul li{
 border-bottom: .1em solid rgba(97,97,97,1.00);
	
 padding:6px;
 width:20em;
 
 
}

#pm_details_docuscans {
  display: flex;
  flex-wrap: wrap;
}
#pm_details_docuscan>* {
	flex: 1 1 20%;
}
#pm_details_docuscan.pm_details_pic:first-child{
  content: ':';
  white-space: pre;
}


/*:nth-child(3n+1):last-child to target that div and set its width to 100%*/


#pm_details_docuscans div.pm_details_pic {
  flex: 20%;
  border:1px solid green;
  padding:4px;
  margin:2px;
  float:left;
  
}