* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 3%;
}

@font-face {
  font-family: "UIFont_old";
  src: url(fonts/orbitron.light.ttf) format("truetype");
}
@font-face {
  font-family: "UIFont";
  src: url(fonts/glacial-indifference.regular.otf) format("truetype");
}
@font-face {
  font-family: "DataFont0";
  src: url(fonts/glacial-indifference.regular.otf) format("truetype");
}
@font-face {
  font-family: "DataFont1";
  src: url(fonts/glacial-indifference.bold.otf) format("truetype");
}
@font-face {
  font-family: "DataFont2";
  src: url(fonts/dense.regular.otf) format("truetype");
}
@font-face {
  font-family: "DataFont3";
  src: url(fonts/oswald.regular.ttf) format("truetype");
}
@font-face {
  font-family: "DataFont4";
  src: url(fonts/poppins.medium.ttf) format("truetype");
}
@font-face {
  font-family: "DataFont5";
  src: url(fonts/poppins.thin.ttf) format("truetype");
}
@font-face {
  font-family: "DataFont6";
  src: url(fonts/wire-one.regular.ttf) format("truetype");
}
@font-face {
  font-family: "DataFont7";
  src: url(fonts/orbitron.light.ttf) format("truetype");
}

html {
  /* font-family: "Lucida Sans", sans-serif;*/
  /* first 
  --inner_bg_color: #01609d;
  --outer_bg_color: #02578b;
  --button_background2: #019d61;
  --button_border2: #028b36;
  --tile2_color: #7db0d0;
  --tile4_color: #ca7c96;
  --object_in_cache_color: #b4dabe;
  --border_color: #cfcff0;
  */
  /* second
  --inner_bg_color: #BDE000;
  --outer_bg_color: #00BDE0;
  --button_background2: #BDE000;
  --button_border2: #BDE000;
  --tile2_color: #00BDE0;
  --tile4_color: #E000BD;
  --object_in_cache_color: #BDE000;
  --border_color: #00BDE0;
  */
  /* third
  --inner_bg_color: #BDE000;
  --outer_bg_color: #00BDE0;
  --button_background2: var(--inner_bg_color);
  --button_border2: var(--inner_bg_color);
  --tile2_color: var(--outer_bg_color);
  --tile4_color: #E000BD;
  --object_in_cache_color: var(--inner_bg_color);
  --border_color: var(--inner_bg_color);
  */
  /* fourth
  --inner_bg_color: #ACCC00;
  --outer_bg_color: #00ACCC;
  --button_background2: var(--inner_bg_color);
  --button_border2: var(--inner_bg_color);
  --tile2_color: var(--outer_bg_color);
  --tile4_color: #CC00AC;
  --object_in_cache_color: var(--inner_bg_color);
  --border_color: var(--inner_bg_color);
  */
  /* fifth: farbschema_4.png
  --inner_bg_color: #92AD00;
  --outer_bg_color: #0092AD;
  --button_background2: var(--inner_bg_color);
  --button_border2: var(--inner_bg_color);
  --tile2_color: var(--outer_bg_color);
  --tile4_color: #AD0092;
  --object_in_cache_color: var(--inner_bg_color);
  --border_color: var(--inner_bg_color);
  */
  /* fifth adobe: farbschema_4_adobe.png
  --inner_bg_color: #AD9B00;
  --outer_bg_color: #0092AD;
  --button_background2: var(--inner_bg_color);
  --button_border2: var(--inner_bg_color);
  --tile2_color: var(--outer_bg_color);
  --tile4_color: #AD004E;
  --object_in_cache_color: var(--inner_bg_color);
  --border_color: var(--inner_bg_color);
  */
  /* sixth */
  --inner_bg_color: #C5D295;
  --outer_bg_color: #445D27;
  --button_background2: var(--inner_bg_color);
  --button_border2: var(--inner_bg_color);
  --tile2_color: var(--outer_bg_color);
  --tile4_color: #DD692E;
  --object_in_cache_color: var(--inner_bg_color);
  --border_color: var(--inner_bg_color);
  /* */
  --border_width: 10px;
  --background-color: #FFFBF5;
  --hover_height: 18%;
  scroll-behavior: smooth;
  font-family: "UIFont", Verdana, Tahoma;
  background-color: var(--background-color);
  max-width: 640px;
  margin: auto;
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* burger menu start */
.topNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  background-color: var(--outer_bg_color);
  z-index: 1020;
  max-width: 640px;
  margin: auto;
}

.ham {
/*  position: relative;*/
  position:absolute;
  width: 2rem;
  height: 2rem;
  right: var(--border_width);
  background: none;
  border: none;
  cursor: pointer;
  color: white;
}

.menuX {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 2rem;
  height: 2rem;
  margin-left: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: white;
}

.sideNav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1020;
  background: var(--outer_bg_color);
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: white;
  /* hide the menu above the screen by default */
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}

.showNav {
  transform: translateY(0);
}

.sideNav ul {
  width: 100%;
  height: 100%;
  list-style: none;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding-top: 5rem;
  font-family: "UIFont", Verdana, Tahoma;
}

.sideNav ul li a {
  display: block;
  color: white;
  padding-bottom: 10px;
  margin-top: 1rem;
  border-bottom: 2px solid var(--inner_bg_color);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  font-family: "UIFont", Verdana, Tahoma;
}

.sideNav ul li a:hover, .sideNav ul li a:focus {
  border-bottom: 2px solid white;
  font-family: "UIFont", Verdana, Tahoma;
}

.overlay {
  position: fixed;
  display: none;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100vh;
}

.showOverlay {
  display: block;
}

.loginNav {
  position: fixed;
  z-index: 1;
  left: 15%;
  bottom: 15%;
  transform: translateX(-1000%);
  transition: transform 0.2s ease;
}

.showLoginNav{
  transform: translateY(0%);
  transition: transform 0.2s ease;
}

section {
  width: 100%;
  height: 100vh;
  display: flex;
  font-size: xx-large;
  justify-content: center;
  align-items: center;
}

section:nth-child(even) {
  background-color: rgb(245, 245, 245);
}

/* burger menu end */


input,
password,
textarea,
select {
	border: solid 1px #ccc;
	border-radius: 3px;
	display: inline-block;
	padding: 0.5rem 0.75rem;
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
  background-color: var(--background-color);
}

form {
	display: inline-block;
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
  background-color: var(--background-color);
}

.hover_button {
	border-radius: 3px;
	padding: 5px;
}

.filter_input {
	border: solid 1px #ccc;
	border-radius: 3px;
	display: inline-block;
	padding: 0.5rem 0.75rem;
	width: 86%;
	font-family: inherit;
	font-size: 1rem;
}

.checkbox_input {
	border: solid 1px #ccc;
	border-radius: 3px;
	display: inline-block;
	padding: 0.5rem 0.75rem;
	width: 2rem;
  height: 3vmax;
	font-family: inherit;
	font-size: 1rem;
}

.container {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	width: 100%;
  background-color: var(--background-color);
}

.field {
	margin-bottom: 0.75rem;
  background-color: var(--background-color);
}

.header {
  position: absolute;
  left: var(--border_width);
  background-color: var(--outer_bg_color);
  color: #ffffff;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 3px;
  padding-left: 0px;
  font-size: x-large;
}

.aside {
  background-color: var(--inner_bg_color);
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


.footer {
  background-color: var(--outer_bg_color);
  color: #ffffff;
  text-align: center;
  font-size: 0.76em;
  padding: 15px;
}

.button {
    width:100%;
    background-color: var(--inner_bg_color);
    border: 1px solid var(--inner_bg_color);
    color: var(--outer_bg_color);
    height: 45px;
    padding: 10px;
    margin: initial;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    flex: initial;
    color: #ffffff;
    font-family: "UIFont", Verdana, Tahoma;
    font-size: large;
}

.button2 {
    width:100%;
    background-color: var(--outer_bg_color);
    border: 1px solid var(--outer_bg_color);
    color: var(--outer_bg_color);
    height: 45px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    flex: initial;
    color: #ffffff;
    font-family: "UIFont", Verdana, Tahoma;
    font-size: large;
}

.tile {
    width:49%;
    background-color: var(--inner_bg_color);
    border: 1px solid var(--inner_bg_color);
    color: var(--outer_bg_color);
    height: 45px;
    padding: 10px;
    margin: initial;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    flex: initial;
    color: #ffffff;
    font-family: "UIFont", Verdana, Tahoma;
    font-size: large;
}

.tile2 {
    width:45%;
    background-color: var(--tile2_color);
    border: 1px solid var(--tile2_color);
    color: var(--outer_bg_color);
    height: 45px;
    padding: 10px;
    margin: initial;
    margin-left: 7px;
    margin-right: 7px;
    margin-bottom: 7px;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    flex: initial;
    color: #ffffff;
    font-family: "UIFont", Verdana, Tahoma;
    font-size: large;
}

.tile3 {
    width:33%;
    background-color: var(--tile2_color);
    border: 1px solid var(--tile2_color);
    color: var(--outer_bg_color);
    height: 27px;
    padding: 0px;
    margin: initial;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 21px;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    flex: initial;
    color: #ffffff;
    font-family: "UIFont", Verdana, Tahoma;
    font-size: medium;
}

.tile4 {
    width:45%;
    background-color: var(--tile4_color);
    border: 1px solid var(--tile4_color);
    color: var(--outer_bg_color);
    height: 27px;
    padding: 0px;
    margin: initial;
    margin-left: 7px;
    margin-right: 7px;
    margin-bottom: 7px;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    flex: initial;
    color: #ffffff;
    font-family: "UIFont", Verdana, Tahoma;
    font-size: medium;
}

.icon_tile {
    width:18%;
    background-color: var(--inner_bg_color);
    border: 1px solid var(--inner_bg_color);
    color: var(--outer_bg_color);
    height: 36px;
    padding: 4px;
    margin: initial;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 0px;
    margin-bottom: 0px;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    flex: initial;
    color: #ffffff;
    font-family: "UIFont", Verdana, Tahoma;
    font-size: medium;
}

.icon_tile2 {
    width:18%;
    background-color: var(--inner_bg_color);
    border: 1px solid var(--inner_bg_color);
    color: var(--outer_bg_color);
    height: 42px;
    padding: 6px;
    margin: initial;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 0px;
    margin-bottom: 0px;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    flex: initial;
    color: #ffffff;
    font-family: "UIFont", Verdana, Tahoma;
    font-size: medium;
}

.object_area {
    width:100%;
    background-color: var(--inner_bg_color);
    border: 1px solid var(--inner_bg_color);
    color: var(--outer_bg_color);
    padding: 10px;
    margin: initial;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    flex: initial;
    color: #ffffff;
    font-size: large;
}

.field {
    width:100%;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 50%;
  padding: 0rem 0rem;
  height: 9px;
  background: #dddee0;
  position: absolute;
  left: 35%;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #dddee0;
  cursor: pointer;
  border-radius: 50%;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #dddee0;
  cursor: pointer;
  border-radius: 50%;
}

.qrcode {
  image-rendering: pixelated;
  width: 3em;
}

a.near:link {color:#445D27;}
a.middle:link {color:#C5D295;}
a.far:link {color:#DD692E;}
a.white:link {color:#ffffff;}
a:link {color:#FABF7F;}
input:checked {accent-color: #445D27}

.main0 {
  font-family: "DataFont0", Verdana, Tahoma;
  font-size: x-large;
}
.main1 {
  font-family: "DataFont1", Verdana, Tahoma;
  font-size: large;
}
.main2 {
  font-family: "DataFont2", Verdana, Tahoma;
  font-size: xx-large;
}
.main3 {
  font-family: "DataFont3", Verdana, Tahoma;
  font-size: x-large;
}
.main4 {
  font-family: "DataFont4", Verdana, Tahoma;
  font-size: large;
}
.main5 {
  font-family: "DataFont5", Verdana, Tahoma;
  font-size: large;
}
.main6 {
  font-family: "DataFont6", Verdana, Tahoma;
  font-size: xx-large;
}
.main7 {
  font-family: "DataFont7", Verdana, Tahoma;
  font-size: large;
}

.leaflet-container {
  height: 90vmin;
  width: 90vmin;
  max-width: 98%;
  max-height: 90%;
}

td {
  text-align: center;
}

.apple-signin-button {
  width: 210px;
  height: 42px;
}

/* For desktop: */
.col-1 {width: 8.33%; background-color: var(--background-color);}
.col-2 {width: 16.66%; background-color: var(--background-color);}
.col-3x {width: 25%; height: 64px; background-color: var(--background-color);}
.col-3 {width: 25%; height: 64px; background-color: var(--background-color); display:flex; align-items:flex-end;}
.col-4 {width: 33.33%; background-color: var(--background-color);}
.col-5 {width: 41.66%; background-color: var(--background-color);}
.col-6 {width: 50%; height: 74vh; overflow:auto; background-color: var(--background-color);}
.col-7 {width: 58.33%; background-color: var(--background-color);}
.col-8 {width: 66.66%; background-color: var(--background-color);}
.col-9 {width: 75%; background-color: var(--background-color);}
.col-10 {width: 83.33%; background-color: var(--background-color);}
.col-11 {width: 91.66%; background-color: var(--background-color);}
.col-12 {width: 100%; background-color: var(--background-color);}

@media only screen and (max-width: 2400px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
  html{
    font-size:larger;
  }
}

@supports (-webkit-touch-callout: none) {
   /* CSS specific to iOS devices */
  html{
    --hover_height: 8%;
  }
}