:root {
  --main-color: #719bef;
  --highlight-color: rgb(4, 255, 4);
  --bg-highlight-color: black;
  --line-dasharray: 10, 5;
}

html, body {
  height: 100%;
  margin: 0;
}

@font-face {
  font-family: DIN;
  src: url('../fonts/D-DINExp-Bold.otf');
}

* {
  font-family: DIN, serif, monospace;
  color: var(--main-color);
}

#map { width: 100%; height: 100%; background-color: #000;}

.info { 
  padding:5px;
  color: var(--main-color);

  position: fixed;
  top:50vh;
  left:10px;
  line-height: 1.25rem;
  font-size: 1rem;

  z-index: 100000000;
}

.info > span.highlight {
  color: var(--highlight-color);
}

.info > span {
  background: var(--bg-highlight-color);
}

.info a {
  color: white;
}


.legend {display:none; text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }

.leaflet-touch .leaflet-bar {
  border: 2px solid var(--main-color);
  border-radius: none;
}
.leaflet-bar a {
  background-color: #111;
  color: var(--main-color);
  border-bottom: 1px solid var(--main-color);
}
.leaflet-bar a:hover {
  background-color: var(--main-color);
  color: #111;
  border-bottom: 1px solid var(--main-color);
}
.leaflet-bar a.leaflet-disabled {
  background-color: unset;
  color: rgb(54, 54, 54);
}



#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: black;
  top:0;
  left:0;
  z-index: 1000000000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: 0.25s;
  pointer-events: none;
}

.fullScreen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#stats {
  z-index: 100000000000;
  position: fixed;
  width: 100vw;
  height: 5em;
  bottom: 0;

  border-top: 2px solid var(--main-color);
  background: rgba(0,0,0,0.8);
  display: flex;
  flex-wrap: wrap;
  
  justify-content: space-evenly;
  align-items: flex-start;

  font-size: 1.5rem;
}
#stats>div {
  width: 30vw;

}
/* #stats>div>p {
  visibility: hidden;
} */
#stats.open>div>p {
  visibility: visible;
}

h2 {
  border-bottom: 1px solid var(--main-color);
}

#stats:hover {
  cursor: pointer;
}
#stats.open {
  height: 100vh;
  overflow: auto;
/* 	background: #719bef55; */
}

#stats>table {
  display:none;
  transition:.25s;
}

#stats.open>table{
  display:block;
}

th {
  text-align: left;
}

td {
  padding-right: 1em;
}

/* #stats div {
  color: white;		
} */



/*


WORLD ICON FOR SHOW LINES


*/

#icon {
  position: fixed;
  left: 53px;
  top: 6px;

  z-index: 10000;
  cursor: pointer;
}

#icon > svg {
  height: 71px;

  fill: var(--main-color);
  stroke: var(--main-color);
  stroke-dasharray: var(--line-dasharray);
  transition: 0.1s;
}

#icon.on > svg {
  stroke: var(--highlight-color);
}


/*


WORLD ICON FOR SHOW LINES


*/

#info-toggle {
  width: 25px !important;
  position: absolute;
  right: 12px;
  top: 12px;

  z-index: 100000000;
  cursor: pointer;
}

#info-toggle > svg {
  height: 25px;
  stroke-width: 10px;
  stroke: var(--main-color);
  transition: 0.5s;
}

/*


MOBILE

*/


@media only screen and (max-width: 900px) {
  /*
  :root {
    --main-color: yellow;
  }
  */

  #stats {
    font-size: 1rem;
    align-items: center;
  }

  #stats > div {
    width: 90vw;
  }
}