<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: black;
  width: 100%;
  height: 0%;
  margin: 0;
  padding: 0;
  z-index: -3;
}

iframebody {
  background-color: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: black;
  width: 100%;
  height: 0%;
  margin: 0;
  padding: 0;
  z-index: -3;
  display: inline;
  grid-template-columns: repeat(3, 3fr);
  grid-column-gap: 20px; /* space between columns, change as needed */
  grid-row-gap: 20px; /* space between rows, change as needed */
}

h1 {
  margin-top: -40px;
  position: relative;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-weight: 700;
}
h2 {
  margin-top: -20px;
  position: relative;
  text-align: center;
  font-size: medium;
}
p {
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 2.5%;
}

/* -------------------------------------------- */
/* navigation bar */
.topnav {
  width: 100%;
  overflow: hidden;
  text-align: center;
  font-size: 16px;
  padding-top: 20px;
  padding-bottom: 50px;
  backdrop-filter: grayscale(30%) blur(20px);
  -webkit-backdrop-filter: grayscale(30%) blur(20px);
  z-index: 1;
}

.nav-item {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  /* display: block; */
  color: black;
  /* text-align: center; */
  text-decoration: none;
  /* display: inline; */
}

.nav-item:hover {
  background-color: rgb(54, 54, 54);
  color: white;
  border-radius: 5px;
}

/* -------------------------------------------- */
/* buttons to change between maps */
.map-option {
  position: absolute;
  margin-left: 3%;
  top: 30%;
  z-index: 0;
  font-size: 14px;
}

.option-item {
  display: block;
  width: 90px;
  height: 20px;
  margin-top: 15px;
  padding-top: 4px;
  color: rgb(73, 73, 73);
  border: 2px solid rgb(204, 204, 204);
  border-radius: 5px;
  text-align: center;
  backdrop-filter: blur(8px) brightness(150%) grayscale(70%);
  -webkit-backdrop-filter: blur(8px) brightness(150%) grayscale(70%);
  text-decoration: none;
}

.option-item:hover {
  background-color: rgb(54, 54, 54);
  color: white;
  border-color: rgb(54, 54, 54);
}
/* ____________________________________________
  home tab */

/* Dropdown Button */
/* https://csslayout.io/nested-dropdowns/ */
/* The sub nested-dropdowns */

/* used to eliminate the list item spacing */
ul {
  margin: 0;
  padding: 0;
}

/* the position of the whole dropdown menu and the design of the first button */
.nested-dropdowns {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  position: absolute;
  margin-left: 5%;
  top: 33%;
  width: 150px;
  border: 2px solid lightgray;
  border-radius: 5px;
  text-align: center;
  /* Reset list styles */
  list-style-type: none;
}

.nested-dropdowns:hover {
  background-color: lightgray;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

/* the whole list of indicators which drops down  */
.nested-dropdowns ul {
  /* Hidden by default */
  display: none;
  /* Absolute position */
  left: -2px;
  position: absolute;
  top: 100%;
  /* Reset styles */
  list-style-type: none;
}

/* The second level sub nested-dropdowns */
.nested-dropdowns ul ul {
  left: 170px;
  position: absolute;
  top: -15px;
  /* Reset list styles */
  list-style-type: none;
  z-index: 10;
}

.nested-dropdowns li {
  /* Used to position the sub nested-dropdowns */
  position: relative;
  /* Reset list styles */
  list-style-type: none;
}

/* Show the direct sub nested-dropdowns when hovering the list item */
.nested-dropdowns li:hover > ul {
  display: block;
}

/* all the dropdown items which come down from the first button */
.dropdownlist li {
  color: rgb(73, 73, 73);
  border-left: 2px solid lightgrey;
  border-right: 2px solid lightgrey;
  text-align: center;
  font-size: 14px;
}

.dropdownlist li:hover {
  background-color: lightgrey;
}

/* all the indicator buttons */
.nested-dropdowns__item {
  min-width: 150px;
  padding: 10px;
}

/* all the cantons and districts dropdown buttons */
.tilescale {
  cursor: pointer;
  padding: 10px;
}

.dropdownbutton {
  z-index: 12;
  padding: 10px;
}

/* the cantons dropdown button */
#first_dropdown_item {
  border-top-right-radius: 5px;
  border-top: 2px solid lightgrey;
}

/* the districts dropdown button */
#last_dropdown_item {
  border-bottom-right-radius: 5px;
  border-bottom: 2px solid lightgrey;
}

/* the first (highest up) cantons dropdown button */
#first_scale_dropdown_item {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top: 2px solid lightgrey;
}

/* the last (lowest down) cantons dropdown button */
#last_scale_dropdown_item {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom: 2px solid lightgrey;
}

/* the first (highest) indicator  */
#first_indicator {
  border-top-right-radius: 5px;
  border-top: 2px solid lightgrey;
}

#first_indicator:hover {
  background-color: lightgrey;
  border-top-right-radius: 0px;
}

/* the last (lowest indicator) */
#last_indicator {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom: 2px solid lightgrey;
}

#last_indicator:hover {
  background-color: lightgrey;
  border-bottom-right-radius: 0px;
}

/* -------------------- */

.chartIframe {
  width: 100%;
  height: 80%;
  margin: 0;
  position: absolute;
  text-align: center;
  display: block;
}

/* ____________________________________________
  legend */

.legend {
  position: absolute;
  width: 250px;
  height: 10px;
  margin-left: 105px;
  bottom: 2%;
  z-index: 0;
  font-size: 14px;
  background-image: linear-gradient(to right, white, black);
}
.legend_min {
  position: absolute;
  margin-left: 70px;
  bottom: 1.7%;
  z-index: 0;
  font-size: 12px;
}

.legend_max {
  position: absolute;
  margin-left: 362px;
  bottom: 1.7%;
  z-index: 0;
  font-size: 12px;
}

.legend_background {
  position: absolute;
  width: 340px;
  height: 30px;
  margin-left: 60px;
  bottom: 0.7%;
  z-index: -1;
  border-radius: 5px;
  background-color: transparent;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* __________________________________________ */
/* Details window (iframe) */

#detailsIframe {
  padding: 2%;
  /* padding-right: 0.3%; */
  position: absolute;
  margin-left: 59%;
  margin-top: 0%;
  margin-bottom: 0%;
  width: 35%;
  color: rgb(204, 204, 204);
  height: 72%;
  background-color: #ffffff99;
  backdrop-filter: blur(23px) brightness(90%) saturate(80%);
  -webkit-backdrop-filter: blur(23px) brightness(90%) saturate(80%);
  border-radius: 16px;
  /* visibility : "hidden"; */
}

#iframebackbutton {
  position: absolute;
  background-color: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: rgb(0, 0, 0);
  border-style: hidden;
  text-align: center;
  cursor: pointer;
  margin-top: 50px;
  margin-left: 45%;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 2px;
  padding-bottom: 2px;
}

#iframebackbutton:hover {
  background-color: rgb(0, 0, 0);
  color: white;
  border-radius: 10%;
}

.detailsicon {
  width: 20px;
  height: 20px;
  background-color: transparent;
  border-radius: 5px;
  padding: 5px;
}
.detailsicon:hover {
  -webkit-filter: invert();
  filter: invert();
  cursor: pointer;
  background-color: white;
}

.expand {
  position: absolute;
  margin-left: 85%;
  margin-right: 3%;
}

detailsTitle {
  display: block;
  width: auto;
  font-size: large;
  color: black;
  font-weight: bold;
  text-align: center;
}

#detailsButton {
  background-color: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  color: rgb(73, 73, 73);
  border: 2px solid rgb(204, 204, 204);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  margin-top: 3px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 2px;
  padding-bottom: 2px;
}

#detailsButton:hover {
  background-color: rgb(54, 54, 54);
  color: white;
  border-color: rgb(54, 54, 54);
}

/* -------------------------------------------- */

/* -------------------------------------------- */

/* ________________________________________________ */

/* maps */
#map {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  z-index: -2;
}
/* source: https://github.com/Leaflet/Leaflet/issues/2896 */
.reverse-popup .leaflet-popup-tip-container {
  position: absolute;
  transform: rotate(180deg);
  top: -20px;
  left: 48.3%; /*to be centered better, maybe use % with margins or so*/
}

.container {
  z-index: -3;
}

/* -------------------------------------------- */
/* popup */

/* Popup container */

/* .detailsPopup {
  position: relative;
  display: inline-block;
  cursor: pointer;
} */

/* The actual popup (appears on top) */

/* .detailsPopup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
} */

/* -------------------------------------------- */
/* leaflet map stuff (tooltips and minipopup) */
.foliumtooltip {
}
.foliumtooltip table {
  margin: auto;
}
.foliumtooltip tr {
  text-align: left;
}
.foliumtooltip th {
  padding: 2px;
  padding-right: 8px;
}

.foliumpopup {
}
.foliumpopup table {
  margin: auto;
}
.foliumpopup popuptitle {
  font-size: 14px;
  font-weight: bold;
}
.foliumpopup popuptext {
  font-size: 11px;
}
.foliumpopup tr {
  text-align: left;
}
.foliumpopup th {
  padding: 2px;
  padding-right: 8px;
}

/* -------------------------------------------- */
/* links */

.a:link {
  text-decoration: none;
}

.a:visited {
  text-decoration: none;
}

.a:hover {
  text-decoration: none;
}

.a:active {
  text-decoration: none;
}
/* Bar chart in the details page */
/* inspiration: https://www.coding-dude.com/wp/html5/bar-chart-html/ */

.chart {
  margin-left: 1.5%;
  margin-top:0px;
  width: 80%;
  /* margin: 0 auto; */
}

.charttitle{
  margin-top: 25px;
  position: relative;
  margin-left: -7px;
  font-weight: bold;
}
.charttext{
  position: relative;
  margin-bottom: 1.5em;
  margin-left: -7px;
}

.chart .grid {
  position: relative;
  padding: 5px 0 5px 0;
  height: 100%;
  width: 100%;
  border-left: 1.2px solid #aaa;
  /* border-right: 2px solid #aaa; */
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 49.5%,
    rgba(0, 0, 0, 0.147) 50%
  );
}

.chart .bar {
  box-sizing: border-box;
  width: var(--bar-value);
  height: 30px;
  margin: 10px 0;
  background-color: #00000028;
  border-radius: 0 4px 4px 0;
  padding-left: var(--bar-value);
  white-space: pre;
  padding-top: 6px;
}

.chart .bar.stats {
  box-sizing: border-box;
  width: var(--bar-value);
  height: 20px;
  margin: 10px 0;
  background-color: #00000028;
  border-radius: 0 4px 4px 0;
  padding-left: var(--bar-value);
  white-space: pre;
  padding-top: 4px;
}

.chart .bar:hover {
  font-weight: bold;
}

/* the two min and max labels at the top of all the charts for the cantons */

/* average farm size */
.afs_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0 ha";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.afs_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "42 ha";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}

/* soil artificialization */
.sar_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0%";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.sar_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "1.1%";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}

/* impermeability */
.imp_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0%";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.imp_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "49.5%";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}

/* organic farming */
.orf_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0%";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.orf_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "66.2%";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}

/* farmers */
.far_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0%";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.far_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "6.1%";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}

/* the two min and max labels at the top of all the charts for the districts */

/* average farm size */
.d_afs_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0 ha";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.d_afs_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "52.5 ha";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}

/* soil artificialization */
.d_sar_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0%";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.d_sar_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "3.19%";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}

/* impermeability */
.d_imp_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0%";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.d_imp_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "49.5%";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}

/* organic farming */
.d_orf_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0%";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.d_orf_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "83.6%";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}

/* farmers */
.d_far_chart .grid::before {
  font-size: 0.8em;
  font-weight: bold;
  content: "0%";
  position: absolute;
  left: -0.5em;
  top: -1.5em;
}
.d_far_chart .grid::after {
  font-size: 0.8em;
  font-weight: bold;
  content: "10.5%";
  position: absolute;
  right: -1.5em;
  top: -1.5em;
}</style>