/* Reset */
* {box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, th, td, caption {font-weight: normal;}
img {border: 0;}

/*==========================================================*
* Farben und Schriften, allg. Definitionen                  *
*==========================================================*/
:root{
  --grau: rgb(117,117,117);
  --dunkelgrau: rgb(63,63,63);
  --hellgrau:rgb(225,225,225);
  --gruen: #113e2f;
  --gruen-hover: #0c2e23;
  --gelb: #f5be00;
  --gelb-hover: #e2b002;
  --weiss: #fff;
  --milchglass: #ffffffdd;
  --schwarz: #000;
}

body {
  color: var(--grau);
  font-family: "FF DIN OT", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
  padding: 0px;
  margin:0px;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: var(--weiss);
}
h1, h2, h3, h4, h5, h6{
  color: var(--dunkelgrau);
  /*font-family: "FF DIN Pro ExtraLight";*/
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 10px;
}
h1{font-size: 250%;}
h2{font-size: 200%;}
h3{font-size: 160%;}
h4{font-size: 140%;}
h5{font-size: 120%;}
h6{font-size: 100%;}
p{
  text-align: justify;
  margin-bottom:5px;
}
a{
  color: var(--gruen);
  cursor: pointer;
  text-decoration: none;
  text-decoration-color: var(--gelb);
  transition: all 0.15s ease-in-out;
}
a:hover, a:active a:focus{
  color: var(--gruen-hover);
  text-decoration-line: underline;
  text-decoration-style: solid;
}
/*Formularelemente*/
::placeholder{
  color: var(--hellgrau);
}
.button, button, input[type=submit], input[type=reset] {
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid var(--gelb);
  background-color: var(--gelb);
  color: var(--weiss);
  line-height: 1em;
  font-size: 120%;
  font-family: inherit;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  margin-bottom: 5px;
}
.button:hover, .button:focus, button:hover, button:focus, input[type=submit]:hover, input[type=submit]:focus, input[type=reset]:hover, input[type=reset]:focus{
  background-color: var(--gelb-hover);
}
label span{
  display: inline-block;
  margin-right: 1em;
  width: 120px;
}
textarea, select, input[type=text], input[type=email], input[type=search], input[type=password], input[type=tel], input[type=url], input[type=date], input[type=time], input[type=number]{
  background-color: var(--weiss);
  border: 1px solid var(--hellgrau);
  border-bottom: 1px solid var(--grau);
  color: var(--grau);
  padding: 5px;
  margin-bottom: 5px;
  font-family: inherit;
  font-size: inherit;
}
textarea:invalid, select:invalid, input[type=text]:invalid, input[type=email]:invalid, input[type=search]:invalid, input[type=password]:invalid, input[type=tel]:invalid, input[type=url]:invalid, input[type=date]:invalid, input[type=time]:invalid, input[type=number]:invalid{
  box-shadow: none;
  border-bottom: 1px solid red;
}
input[type=radio], input[type=checkbox]{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.15em;
  height: 1.15em;
  border: 1px solid var(--grau);
  margin: 0px;
  background-color: var(--weiss);
}
input[type=radio]{
  border-radius: 50%;
}
input[type=radio]:checked, input[type=checkbox]:checked{
  background-color: var(--gelb-hover);
  box-shadow: 0px 0px 0px 2px var(--weiss) inset;
}
select{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.5em;
  background-color: var(--weiss);
  background-repeat: no-repeat;
  background-position: right .375em top 50%;
  background-size: .75em auto;
  background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><path style="fill:none; stroke:black" d="M .5 4 L 5 8.5 L 9.5 4"/></svg>');
}
select option{
  color: inherit;
  background-color: var(--weiss);
}
select option:hover{background-color: var(--gelb-hover);}
/*Tabellen*/
table{
  border-collapse: collapse;
  margin: 10px 0px;
  border-spacing: 0;
}
td, th{
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
}
th{font-weight: bold;}
table.tborder td, table.tborder th{border: 1px solid var(--dunkelgrau);}
table.tstripes tr:nth-of-type(2n+0){background-color: var(--hellgrau);}
table.tlines tr{
  border-bottom: 1px solid var(--dunkelgrau);
  border-top: 1px solid var(--dunkelgrau);
}

.small{
    font-size: 70%;
}
/*==========================================================*
* Dokumentaufbau                                            *
*==========================================================*/
body{
	height: 100%;

}

header{
  background-color: var(--gruen);
  display: flex;
  justify-content: space-between;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0px;
  box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
}
@media only screen and (min-width: 700px) {
  div.title{order:1;}
  div.user{order:3;}
  nav.main{order:2;}
}
/* Titel und Logo */
div.title{
  height: 50px;
  flex-basis: 400px;
}
div.title img{
  height: 100%;
  float: left;
}
div.title span{
  display: block;
  margin-top: 12px;
  margin-left: 55px;
  color: var(--weiss);
/* Navigation */
}
nav.main>ul {
  margin: 0px;
  padding: 0px;
}
nav.main>ul>li{
  float: left;
  list-style: none;
}
nav.main>ul>li a:any-link{
  height: 50px;
  padding: 12px;
  display: block;
  white-space: nowrap;
}
nav.main>ul>li>a:any-link{color:var(--weiss)}
nav.main>ul>li:hover{background-color: var(--gruen-hover)}
nav.main>ul>li>ul{
  display:none;
  position: absolute;
  z-index: 10000;
}
nav.main>ul>li:hover>ul{
  display: block;
  padding: 0px;
}
nav.main>ul>li>ul>li{
  list-style: none;
  margin:0px;
  padding: 0px;
  position: relative;
  background-color: var(--milchglass);
  border-left: 1px solid var(--hellgrau);
  border-right: 1px solid var(--hellgrau);
  border-bottom: 1px solid var(--hellgrau);
}
nav.main>ul>li>ul>li:hover{background-color: var(--weiss)}
nav.main>ul>li>a:after {content: " \2335";}
nav.main>ul>li>a:only-child:after {content: "";
}
/* Login und Logout */
div.user{
  flex-basis:50px;
  height: 50px;
}
div.user a:any-link{color: var(--weiss);}
div.user svg * {
  fill: var(--hellgrau);
  stroke: var(--dunkelgrau);
  stroke-width: 2;
}
div.user svg.loggedin *{
  fill: var(--dunkelgrau);
  stroke: var(--grau)
}


 /* The sidebar menu */
.sidenav {
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  display: table-cell;
  vertical-align: top;
  flex: auto;
  max-width: 450px;
  min-width: 450px;
  border-right: 10px solid var(--gruen);
	-moz-box-shadow: 0px 0px 6px 0px var(--schwarz);
	-webkit-box-shadow: 0px 0px 6px 0px var(--schwarz);
	box-shadow: 0px 0px 6px 0px var(--schwarz);
	z-index: 1;
	position: relative;
}


/* The navigation menu links 
.sidenav .h2 {
  padding: 6px 8px 16px 16px;
  font-size: 25px;
  display: block;
  line-height: 1.0;
  margin: 0px;
}

.sidenav .headlvl2 {
  padding: 6px 8px 6px 40px;
  font-size: 20px;
  display: block;
  line-height: 1.0;
  margin: 0px;
}
*/
/* Hauptfenster */
div.main{
  flex:1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}
main {
  margin-left: auto;
  margin-right: auto;
  /*max-width: 1160px;*/
  padding:20px;
}
/* Footer */
div.footer{background-color: var(--hellgrau);}
footer{
  height: 40px;	
  font-size: 12px;
  margin:auto;
  max-width: 1160px;
  padding:10px;
}
/* Overlay */
div.overlay{
  position:fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  background-color: var(--milchglass);
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
div.overlay>div{
  border: 1px solid var(--hellgrau);
  background-color: var(--weiss);
  width: 500px;
  max-width: 90vw;
  padding: 10px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
  overflow: auto;
}
div.overlay:target{display:flex;}
div.overlay-close{
  line-height: 0.1;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row-reverse;
}
div.overlay-close>a{font-size: 1px;}
div.overlay-close>a>svg>path{
  stroke: var(--grau);
  stroke-width: 1;
  fill: var(--hellgrau);
}

div#popUp {
  position:fixed;
  max-width: 200px;
  background-color: var(--milchglass);
  border: 1px solid var(--hellgrau);
  box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
  padding: 10px;
  top: 150px;
  left: 10px;
  color: var(--gelb);
  font-weight: bold;
  }
/*==========================================================*
* Seitenspezifische Definitionen                            *
*==========================================================*/
/* Suchegebnisse Vorschriften */
div#results div.resultHeader {
  font-size: 70%;
}
div#results div.result {
  clear: both;
  min-height: 60px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hellgrau);
  margin-bottom: 10px;
}
div#results div.result div.resultbutton {
  float:left;
  height: 60px;
  width: 40px;
  line-height: 0em;
}
div#results div.result div.resultbutton a img{
  width: 25px;
  height: 25px;
  padding: 2px;
  margin: 0px;
  filter: grayscale(50%);
}
div#results div.result div.resultbutton a:hover img{filter: none;}
div#results div.result div.resultname { font-weight: bold;}
input#searchField {
  max-width: 300px;
  min-width: 150px;
}
div.autocomplete {
  margin: 0px;
  padding: 0px;
  position: absolute;
  border: 1px solid var(--hellgrau);
  background-color: var(--weiss);
  box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
  width: 300px;
  display: none;
  z-index: 2;
}
div.autocomplete ul{
  padding: 0px;
  margin: 0px;
}
div.autocomplete ul li{
  list-style: none;
  padding: 5px;
  margin: 0px;
  cursor: pointer;
}
div.autocomplete ul li:hover{background-color: var(--hellgrau)}
div.autocomplete ul li.noResult{
  cursor: inherit;
  background: none;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.form-frame{
  border: 1px solid var(--hellgrau);
  width: 1000px;
  margin-left:auto;
  margin-right:auto;
  max-width: 90vw;
  padding: 80px;
  box-shadow: 0px 0px 7px rgba(0,0,0,0.5);
}

.divTable
{
	display:  table;
	width: 100%;
   /* border-collapse:separate;*/
}

.divTable.withBorder
{
	border:1px solid  var(--schwarz);
   /* border-collapse:separate;*/
}

.divRow
{
	display:  table-row;

   	background-color:var(--hellgrau);


}
.headRow
{
	padding: 10px 20px;

	width:auto;
   	background-color:var(--gruen);
	color: var(--weiss);
}

.divCell
{
	display: table-cell;
	padding: 10px 0px 20px 20px;
}

.projectDataTable .divRow .divCell
{
	padding: 4px 4px 4px 20px;
}


.detailView.detailOff
{
	display: none;
}



.nameCell
{
	width:230px;
}
.ratingCell
{
     text-align: center;
}

/* scroll table */
.my-custom-scrollbar {
position: relative;
height: 200px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/*===========================================================*
* ProMap                                                   *
*===========================================================*/

/* The PROMAP Header */

#header {
    width: 100%;
    height: 56px;
    background-image: url("../img/header.png");
    background-repeat: repeat-x;
    z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

#menu-icon {

}

#header_search {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 55px;
}

#header_search_submit, #menu-icon {
    font-size: 38px;
    cursor: pointer;
    background: linear-gradient(var(--weiß), var(--hellgrau));
    border-radius: 1px;
    margin: 0 5px;
    font-family: none;
	border: 1px solid var(--grau);
    padding: 0 10px;  
    position: relative;
    top: 5px;
    z-index: 100;
}

#map {
    margin-left: 453px;
    height:calc(100vh - 146px);
	width: calc(100vw - 453px);
    z-index: 1;
    border: none;
    overflow: hidden;
	position: absolute
}
/* The sidebar menu */
.sidenav.inactive + #map {
    margin-left: 0;
	width: 100%
}

.sidenav.inactive{
	display:none;
}


.folder_item{
	height:25px;
	background-image:url("../img/px_grau.png");
	background-repeat:repeat-x;
	font:bold 11pt Helvetica;
	color:#3e7468;
	cursor:pointer;
	padding: 0px 40px 0px 20px;
	margin:0px;
	line-height:24px;
	display: list-item;
	list-style-image: url("../img/pfeil rechts.png");
	list-style-position: inside;
	 }
.folder_item:hover{
	background-image:url("../img/px_hellgruen.png");
}
.folder_item:active,.folder_item.active{
	background-image:url("../img/px_gruen.png");
	color:var(--weiss);
	list-style-image: url("../img/pfeil unten.png");
}
.folder_item_content{
	overflow:auto;
	padding: 0px 40px 0px 20px;
	text-align:left;
	display:none;
}
.folder_item.active+.folder_item_content{
	display:block;
}

.bubbleProject {
	cursor: pointer;
}

.bubbleProject:not(:first-child){
	border-top: 1px solid #ddd;
	padding-top: 5px;
}
.bubbleProject:hover{background-color: #2222 }
.bubbleOcp{
	font-size: 120%;
	font-weight:bold;
	margin-bottom:8px;
}


.leaflet-popup-scrolled{
	padding-right: 10px;
}






/*===========================================================*
* Darkmode                                                   *
*===========================================================*/
/*@media (prefers-color-scheme: dark) {
  :root{
    --grau:rgb(225,225,225);
    --dunkelgrau: rgb(63,63,63);
    --hellgrau:rgb(117,117,117);
    --gruen: #113e2f;
    --gruen-hover: #0c2e23;
    --gelb: #f5be00;
    --gelb-hover: #e2b002;
    --weiss: #000;
    --milchglass: #000000dd;
    --schwarz: #fff;
  }
  select{background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><path style="fill:none; stroke:white" d="M .5 4 L 5 8.5 L 9.5 4"/></svg>');}
  header{box-shadow: 0px 2px 3px rgba(255,255,255,0.2);}
  div.overlay>div{box-shadow: 0px 0px 3px rgba(255,255,255,.5);}
}
*/