@import url("mapbox.css");
@import url("L.Control.Sidebar.css");
@import url("easy-button.css");
@import url("jquery-ui.min.css");

/* --------------- body  ----------- */

body {
    line-height: 1.8;
}

#legend img {
	max-width:100%;
	max-height:100%;
}

#logo img {
	display: block;
  width: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

#id1 {
	width: 20px;
}

.state {
	font-weight: bold;
}

.description {
	color: gray;
	font-size: small;
	margin-bottom: 10px;
}
/* --------------- switch  ----------- */

.switch {
	position: relative;
	display: block;
	width: 50px;
	height: 18px;
	padding: 3px;
	margin: 0 10px 10px 0;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
	border-radius: 18px;
	box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	box-sizing:content-box;
}
.switch-input {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	box-sizing:content-box;
}
.switch-label {
	position: relative;
	display: block;
	top: -14px;
	height: inherit;
	font-size: 10px;
	text-transform: uppercase;
	background: #E1B42B;
	border-radius: inherit;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
	box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
	position: absolute;
	top: 50%;
	margin-top: -.5em;
	line-height: 1;
	-webkit-transition: inherit;
	-moz-transition: inherit;
	-o-transition: inherit;
	transition: inherit;
	box-sizing:content-box;
}
.switch-label:before {
	content: attr(data-on);
	right: 11px;
	color: #FFFFFF;
	text-shadow: 0 1px rgba(0, 0, 0, 0.2);
}
.switch-label:after {
	content: attr(data-off);
	left: 11px;
	color: #aaaaaa;
	text-shadow: 0 1px rgba(255, 255, 255, 0.5);
	opacity: 0;
}
.switch-input:checked ~ .switch-label {
	background: #eceeef;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
	opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
	opacity: 1;
}
.switch-handle {
	position: absolute;
	top: 4px;
	left: 5px;
	width: 14px;
	height: 14px;
	background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
	background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
	border-radius: 100%;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -6px 0 0 -6px;
	width: 14px;
	height: 14px;
	background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
	background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
	border-radius: 6px;
	box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
	left: 37px;
	box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-name {
	position: absolute;
	top: 4px;
	left: 58px;

}
 
/* Transition
========================== */
.switch-label, .switch-handle {
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	-moz-transition: All 0.3s ease;
	-o-transition: All 0.3s ease;
}




/* --------------- features  ----------- */

.btn-group {
	float: left;
	top: 20px;
	left: 60px;
}

.icon {
  position: absolute;
	margin: 0px;
  padding: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}

.button {
  margin-top: 5px;
}

.leaflet-touch .leaflet-bar button {
  width: 26px;
  height: 26px;
  line-height: 26px;
}

.leaflet-popup-content {
  margin: 10px 20px;
}

.leaflet-popup-content-wrapper {
  border-radius: 0px;
}


/* --------------- legend  ----------- */
#legend {
  font:bold 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  position: absolute;
  border-radius: 6px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
  background-color: white;
  bottom: 0;
  left: 270;
  /* transform: translateX(-50%); */
  margin: 10px;
  padding: 5px;
  line-height: 15px;
  width: 170px;
  z-index: 200;
  visibility: visible;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#showLegend {
  font:bold 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  position: absolute;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
  background-color: white;
  bottom: 5rem;
  left: 270;
  /* transform: translateX(-50%); */
  margin: 10px;
  padding: 5px;
  line-height: 15px;
  width: 170px;
  visibility: hidden;
  z-index: 200;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }

#showLegend:hover {
  background-color: #aeb6bf;
}

/* #showExamples {
  font:bold 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  position: absolute;
  text-align: center;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: white;
  bottom: 40px;
  left: 0;
  margin: 20px;
  padding: 5px;
  line-height: 15px;
  width: 160px;
  z-index: 200;
  visibility: visible;
}

#exmpl{
  visibility: hidden;
}

#showExamples:hover {
  background-color: #aeb6bf;
} */

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

.cB {
  height: 13px;
  width: 13px;
  position: absolute;
  cursor: pointer;
  top: 4px;
  right:4px;
  display:inline-block;
  padding:5px 5px;
  background: url("../img/ar_down.png");
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cB:hover {
  background: url("../img/ar_down_hover.png");
  cursor: pointer;
}

.cE {
  height: 13px;
  width: 13px;
  position: absolute;
  cursor: pointer;
  top: 4px;
  right:4px;
  display:inline-block;
  padding:5px 5px;
  background: url("../img/ar_down.png");
}

.cE:hover {
  background: url("../img/ar_down_hover.png");
  cursor: pointer;
}

/* --------------- divs  ----------- */

#intro{
	position: absolute;
	font:bold 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
	text-align: center;
	padding: 5px;
	top: 20%;
	left: 20%;
	background-color: white;
	border: 1px solid black;
  border-radius: 3px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
	z-index: 1000;
}

.no-padding {
  padding-right: 0px;
  padding-left: 0px;
}

#title {
	margin-top: 15px;
}

.infohidden {
  position: fixed;
  visibility: visible;
  text-align: justify;
  font: 1.2rem 'Helvetica Neue', Arial, Helvetica, sans-serif;
  width: 35rem;
  top: 15rem;
  bottom: 5rem;
  right: 0;
  padding: 1rem;
  margin: 1rem;
  z-index: 180;
  background-color: white;
  border-radius: 0.4rem;
  box-shadow: -0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  max-height: calc(100vh - 10rem);
}

#logo {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: bold 1.2rem 'Helvetica Neue', Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  padding: 0.5rem;
  margin: 1rem;
  width: 35rem;
  height: 14rem;
  max-width: 50%;
  max-height: 14rem; /* maximale Höhe für das Logo-Container */
  z-index: 180;
  background-color: white;
  border-radius: 0.4rem;
  box-shadow: -0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
}

/* legend links */
.leaflet-control-layers {
  max-height: 80vh; /* Begrenze die Höhe auf 70% der Viewport-Höhe */
  overflow-y: auto; /*Ermögliche vertikales Scrollen*/
  width: fit-content;
}

/* --------------- map  ----------- */

#mapper {
/*  z-index: 0;*/
  height: 100%;
}

#map {
/*  z-index: 0;*/
  height: 100%;
  z-index: 150;
}

.map-overlay {
    font:bold 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 6%;
    min-width: 160px;
    top: 0;
    left: 35px;
    padding: 12px;
    z-index: 200;
    overflow-y: auto;
}

.map-overlay-left {
    font:bold 12px 'Helvetica Neue', Arial, Helvetica, sans-serif;
	background-color: #fff;
    position: absolute;
    min-width: 260px;
    bottom: 60px;
	height: calc(100% - 500px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	border: 1px solid black;
    border-radius: 3px;
	overflow-y: auto; /* change to auto if you want to scroll */
	overflow-x: hidden;
    left: 0px;  
	margin: 20px;
    z-index: 200;
}

.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 6px;
    margin-bottom: 10px;
}

.map-overlay-left .map-overlay-inner {
    background-color: #fff;
    border-radius: 3px;
    padding: 6px;
	line-height: 1.8;
}

.map-overlay-left .map-overlay-inner img {
    padding-top: 2px;
    padding-bottom: 2px;
	width: 250px;
}

.map-overlay-left .map-overlay-inner img:hover {
	box-shadow:0px 0px 0px 10px black inset;
	padding-top: 2px;
    padding-bottom: 2px;
}

.map-overlay label {
    display: block;
    margin: 0 0 5px;
}

.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}

/*  ########### Swiper */

#chartdivs {
  width: 100%;
  height: 100%;
  display: block;
}

#chartdiv {
  display: inline-block;
}

#chartdiv2 {
  display: inline-block;
}

.swiper {
    width: 100%;
    height: 100%;
}

.slick-initialized .swipe-tab-content {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: center;
}

.swipe-tab-content::-webkit-scrollbar {
    display: none;
}

.sub-header {
  height: 5%;
  background-color: grey;
}

.swipe-tabs-container {
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 767px) {
  .slick-initialized .swipe-tab-content {
    /*min-height: 300px;*/
  }
}
.slick-initialized .swipe-tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  background: none;
  border: 0;
  background-color: white;
  color: #757575;
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-family: 'Corbel', sans-serif;
  /*font-weight: bold;*/
  font-size: 0.9vw;
}
.slick-initialized .swipe-tab:hover {
  background-color: #ddbc95;
  color: #000;
  font-family: 'Corbel', sans-serif;
  /*font-weight: bold;*/
  font-size: 0.9vw;
}
.slick-initialized .swipe-tab.active-tab {
  background-color: #ddbc95;
  border-bottom-color: #000;
  color: #000;
  font-family: 'Corbel', sans-serif;
  /*font-weight: normal;*/
  font-weight: bold;
  font-size: 0.9vw;
}
.main-container {
  height: 92%;
  background-color: blue;
  padding-top: 10px;
  background: #ffffff;
}

.slick-slide img {
  display: inline-block;
}

.sub-header_methods {
  height: 7%;
}

.slick-initialized .method-tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /*height: 50px;*/
  background: none;
  border: 0;
  color: #757575;
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid transparent;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-family: 'Corbel', sans-serif;
  font-size: 0.9vw;
}
.slick-initialized .method-tab:hover {
  background-color: #ddbc95;
  color: #000;
  font-family: 'Corbel', sans-serif;
  font-size: 0.9vw;
}
.slick-initialized .method-tab.active-tab {
  background-color: #ddbc95;
  border-bottom-color: #000;
  color: #000;
  font-family: 'Corbel', sans-serif;
  font-weight: bold;
  font-size: 0.9vw;
}