html, body, #Map {
	height: 100%
}
custom_min_select {
	width: 50%;
}
.input{
font-family:'Lucida Casual', 'Comic Sans MS';    
}
span.pfeil_rechts:before {
   content:url(../img/arrow_right.png);
}
span.pfeil_links:before {
   content:url(../img/arrow_left.png);
}
.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden; z-index: 4096;}

input[type=checkbox] {

 -ms-transform: scale(1.3); /* IE */
 -moz-transform: scale(1.3); /* FF */
 -webkit-transform: scale(1.3); /* Safari and Chrome */
 -o-transform: scale(1.3); /* Opera */
  padding: 10px;
}

 .table{
    display: block;
    overflow-x: auto;
	width:100%;
}

.alert-info {
    background-color: #d9edf7;
	color: #103656;
	border-color: #24759E;
	border-width: 2px;
	margin-left: 15px;
	margin-right: 15px;
}

.alert-danger{
	/*background-color: #ea9999;*/
	color: #570000;
	border-color: #8A0000;
	border-width: 2px;
}

legend {
  border: 1px solid;
  font-size:1em;
}

.form-control,
.card-header {
	border-color: #757575;
}

.card {
	border:none;
}

.card-block {
	 border-left: 1px solid #757575;
	 border-right: 1px solid #757575;
	 border-bottom: 1px solid #757575;
}


.form-control:focus,.btn:focus,.btnKarteClose:focus,
input:focus-visible,
label input[role="switch"] ~ .state:focus-visible  ,
label input[role="switch"] ~ .state > .container:focus-visible,
a:focus, .btnKarte:focus,
.leaflet-marker-icon:focus
{
	border-color: #002B57;
	border-width: 2px;
	box-shadow:0 0 0 .3rem #7298C0; /* rgba(0,123,255,.30);*/
	outline-color: #002B57;
	outline-width: 2px;
}

input:focus-visible 
{
	outline: ButtonText dotted 3px;
}

.btn-danger{
	background-color:#990000;
	border-color: #990000;
}

.btn-danger:focus{
	background-color:#F63C3A;
	border: 2px solid #570000;
	box-shadow:0 0 0 .3rem rgba(153,0,0,.50);
	border-width: 2px;
}
.btn-primary{
	background-color:#2F2FFF;
	border-color: #2F2FFF;
}

.btn-primary:hover{
	background-color:#00000E;
	border-color:#00000E;
}

.btn-primary:focus{
	background-color:#00000E;
	border: 2px solid #2F2FFF;
	box-shadow:0 0 0 .3rem rgba(0,0,46,.40);
	border-width: 2px;
}

.tooltiptext {
  visibility: hidden;
  margin-top: 3em;
  width: auto;
  background-color: #757575;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;

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

.tooltip1:hover .tooltiptext {
  visibility: visible;
}

/***** KARTE/LEAFLET *****/
a,
.leaflet-container a {
	color: #091B39;
}

a:hover,
.leaflet-container a:hover{
	color: #003366;
}
.leaflet-marker-icon {
	background-color: #fff;
	border: 2px solid #000;
}

.leaflet-popup-content-wrapper {
	padding:0px; 
	border-radius: 0px;
	margin-left: 50px;
	margin-right: 50px;
}
.leaflet-popup-content {
	margin:0px; 
}

.leaflet-popup-tip {
	width:0px; 
	height:0px; 
}

.leaflet-tile-container {
	filter:  hue-rotate(180deg);
 }
 
.btnKarte-group {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 90px;
	left: 10px;
    gap: 2px;
	z-index: 99999999;
}

.btnKarte {
	width: 34px;
    height: 34px;
	font-size: 22px;
	border-radius: 4px;
	color: #263238;
	background-color: #fff;
    border: 2px solid rgba(0, 0, 0, 0.2);

}

.btnKarteClose {
	float: right;
    color: #263238;
	width: 34px;
    height: 34px;
	line-height: 34px;
	background: transparent;
	border:0px;
	font: 16px / 24px Tahoma, Verdana, sans-serif;
}

/***** SWITCH *****/
label input[role="switch"] {
  opacity: 0; 
}

label input[role="switch"] ~ .state {
  display: inline-block;
  user-select: none;

}

label input[role="switch"] ~ .state > .container {
  position: relative;
  top: 2px;
  display: inline-block;
  border: 2px solid #757575;
  width: 50px;
  height: 26px;
  border-radius: 11px;
}

label input[role="switch"] ~ .state > .container:focus-visible {

  border: 2px solid red;
}


label input[role="switch"] ~ .state > .container > .position {
  position: relative;
  top: 1px;
  left: -14px;
  display: inline-block;
  border: 2px solid black;
  border-radius: 9px;
  width: 20px;
  height: 20px;
  background: black;
  opacity: 0.6;
}

label input[role="switch"]:not(:checked) ~ .state span.on {
  display: none;
}

label input[role="switch"]:checked ~ .state > span.off {
  display: none;
}

label input[role="switch"]:checked ~ .state > .container > .position {
  left: 10px;
  border-color: #00A300;
  background: #00A300;
  opacity: 1;
}


label:focus span.container,
label:hover span.container {
	border-color: #002B57;
	border-width: 2px;
	box-shadow:0 0 0 .3rem #7298C0; /* rgba(0,123,255,.30); */
}

/***** NVIGATION *****/
.classNavbar ol {
  list-style-type: none;
  padding-left: 0;
}

.classNavbar {
  overflow: hidden;
  background-color: #757575;
  margin-bottom: 2em;
}

.classNavbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 12px;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;

}

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

.classNavbar a.active {
  background-color: #000014; /* #426894; */
  color: white;
}

.classNavbar .iconNavbar {
  display: none;
}

@media screen and (max-width: 600px) {
  .classNavbar a {display: none;}
  .classNavbar a.iconNavbar {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
	.classNavbar.responsive ol {
		list-style-type: none;
		padding-left: 0;
	}
	
  .classNavbar.responsive {position: relative;}
  .classNavbar.responsive .iconNavbar {
    position: absolute;
    right: 0;
    top: 0;
  }
  .classNavbar.responsive a {
    float: none;
    display: block;
    text-align: left;
	text-decoration: none;
	font-size: 1em;
  }
  
}