:root {
  touch-action: pan-x pan-y;
  height: 100%
}

html {

}

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Avenir Next', 'HelveticaNeue-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.125em;
  color: #000000;
}

body > header {
  width: 100vw;
  min-height: 100%;
}

h1,h2,h3,h4,h5 {
  margin: 0px;
}


a#skipnav {
  position: absolute;
  left: -1000px; 
}

div#header {
}

div#header > nav {
  background-color: lightgray;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

nav#nav > div {
  min-height: 100%;
  min-height: 8vh;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: lightgray;
  flex-grow: 1;
  margin-right: 1px;
  align-items: center;
  display: flex;
  justify-content: center;
}

nav#nav > div:not(:last-child) {
  border-right: 1px solid slateray;
}

.outline {
  border: 1px solid slategray;
}

.hilite {
  border: 1px solid palegoldenrod;
  background-color: palegoldenrod;
}

.pointer {
  cursor: pointer;
  text-decoration: underline;
}

.tiny {
  font-size: .95em;
  padding: .0em 0em;
}

span[data-type=geojson].export::after {
  background-image: url('/i/geojson-icon.png');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px; 
  height: 20px;
  content:"";
  position: relative;
  top: 5px;
  margin: 0px 10px 0px 1px;
}

span[data-type=gpx].export::after {
  background-image: url('/i/gpx-icon.png');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px; 
  height: 20px;
  content:"";
  position: relative;
  top: 5px;
  margin: 0px 10px 0px 1px;
}

span[data-type=kml].export::after {
  background-image: url('/i/kml-icon.png');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px; 
  height: 20px;
  content:"";
  position: relative;
  top: 5px;
  margin: 0px 10px 0px 1px;
}

span.delete::after {
  background-image: url('/i/delete.svg');
  background-size: 20px 20px;
  display: inline-block;
  width: 20px; 
  height: 20px;
  content:"";
  position: relative;
  top: 5px;
  margin: 0px 10px 0px 1px;
}

span.hikingpng {
  content: url('/i/hiking.png');
  max-width: 1.5em;
  padding: 10px 10px 10px 10px;
  border-radius: .5em;
  flex-grow: 1;
  cursor: pointer;
}

span.listpng {
  content: url('/i/list.png');
  max-width: 1.5em;
  padding: 10px 10px 10px 10px;
  border-radius: .5em;
  flex-grow: 1;
  cursor: pointer;
}

span.countBadge {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  align-items: center;
  justify-content: center;
  vertical-align: middle; 
  font-size: .85em;
  color: white;
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;}

span.countBadge:before {
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}

div.countBadge {
  align-items: center;
  justify-content: center;
  background-color: #555;
  color: white;
  min-width: 1.25em;
  border-radius: 50%;
  vertical-align: middle; 
  display: none;
  font-size: .65em;
  position: absolute;
  top: 0px;
  left: 0px;
}

div.countBadge:before {
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}

div.countBadge:after {
  content:'';
  float: left;
  width: auto;
  padding-bottom: 100%;
}

span.mapspng {
  content: url('/i/maps.png');
  max-width: 1.5em;
  padding: 10px 10px 10px 10px;
  border-radius: .5em;
  flex-grow: 1;
  cursor: pointer;
}

span.userpng {
  content: url('/i/user.png');
  max-width: 1.5em;
  padding: 10px 10px 10px 10px;
  border-radius: .5em;
  flex-grow: 1;
  cursor: pointer;
}

span.userpng-logged-in {
  content: url('/i/user-logged-in.png');
  max-width: 1.5em;
  padding: 10px 10px 10px 10px;
  border-radius: .5em;
  flex-grow: 1;
  cursor: pointer;
}

div#map {
  width: 100vw;
  /* height: 92vh; */
  background-color: #212223;
  display: flex;
  align-items: center;
  justify-content: center;
}

div#logging {
  z-index: 99;
  display: none;
  position: absolute;
  top: 14vh;
  left: 4.5vw;
  width: 90vw;
  height: auto;
  margin: 0 auto;
}

div#logging > div#bearings {
  width: auto;
  background-color: white;
  border-radius: .5em;
  max-height: 250px;
  overflow: scroll;
  font-size: .75em;
}

div#logging > div#bearings > ol {
  padding-left: 20px;
  font-size: .8em;
}

div#container {
  z-index: 100;
  position: absolute;
  top: 14vh;
  left: 4.5vw;
  width: 90vw;
  height: auto;
  margin: 0 auto;
}

div#container h1 {
  font-size: .85em;
}

div#container h2 {
  font-size: .80em;
}

div#container h3 {
  font-size: .75em;
}

div#container h4, h5 {
  font-size: .70em;
}

div#login {
  display: none;
  width: auto;
  background-color: white;
  border-radius: .5em;
  padding: .5em 0em .5em .25em;
}

div#login > div#welcomeId {
  display: none;
}

div#list {
  display: none;
  width: auto;
  background-color: white;
  border-radius: .5em;
  padding: .25em;
  max-height: 250px;
  overflow: scroll;
}

div#list > h3, h4, h5 {
  margin: 0px;
}

div#list > p, ul {
  font-size: .75em;
}

div#list div ul {
  margin: 0px 0px 1em 0px;
}

ul[id$=walks] {
  margin-left: -.25em!important;
  max-width: fit-content;
}

ul[id$=walks] li {
  border-bottom: solid 1px lightgray;
  margin: 0px 0px 1.25em -1.75em;
  list-style: none;
  
}

ul[id$=walks] li:nth-child(odd) {
  background-color: ghostwhite; 
}

div#list p {
  font-size: .75em;
}

.startFlag {
  content: '🚩';
}

.finishFlag {
  content: '🏁';
}

div#walk-div {
  display: none;
  width: auto;
  max-height: fit-content;
  overflow: scroll;
  background-color: white;
  border-radius: .5em;
  padding: .25em;
  font-size: .85em;
}

div#walk-div > h3, h4, h5 {
  margin: 0px;
}

span.close {
  cursor: pointer;
  position: relative;
  top: -.25em;
  float: right;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 50%;
  text-align: center;
  vertical-align: bottom;
  padding: 0px;
  margin: 0px;
  font-size: .89em; 
}

div#walk-div > ul#walkData {
  list-style: none;
  padding-left: .5em;
  font-size: 1em;
  margin: auto;
  margin-top: 1em;

}

h3#walkName {
}

div#new {
  display: none;
  width: auto;
  background-color: white;
  border-radius: .5em;
  padding: .25em;
}

div#new > h3 {
  margin: 0px;
}

div#new > p, ul {
  font-size: .75em;
}

div#maps {
  display: none;
  width: auto;
  background-color: white;
  border-radius: .5em;
  padding: .25em;
}

div#maps > h3 {
  margin: 0px;
}

div#app {
  display: none;
  width: auto;
  max-height: 300px;
  overflow: scroll;
  background-color: white;
  border-radius: .5em;
  padding: .25em;
}

div#app > h3 {
  margin: 0px;
}

div#app p {
  font-size: .75em;
}

div#app > ol#change {
  font-size: .7em;
}

button[name="showStartNew"] {
  color: blue;
}

div#stats {

}

div#stats span#duration {
  float: right;
}

div#stats span#numWaypoints {
  float: right;
}

div#stats span#distance {
  float: right;
}

button#start {
  display: inline-block;
  float: left;
  margin-left: 1.5em;
}

button#stop {
  display: inline-block;
  float: right;
  margin-right: 1.5em;
}

button#saveWalk {
  display: inline-block;
  float: left;
  margin-left: 1.5em;
}

button#clearWalk {
  display: inline-block;
  float: right;
  margin-right: 1.5em;
}

form {
  margin: 0 .25em .5em auto
}

fieldset {
  border-radius: .5em;
}

fieldset label {
  font-size: .90em;
}

fieldset label:hover {
  border-radius: .5em;
  background-color: lightblue;
}

input[type=radio] {
  margin-left: .5em;
}

input[type=text] {
  width: auto;
  max-width: 95%;
}

input[type=password] {
  width: auto;
  max-width: 95%;
}

textarea {
  width: 100%;
  display: block;
}

@media screen and (max-width: 400px) {
  div#header {
  }
  
  div#header > nav {
    background-color: lightgray;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  
  nav#nav > div {
    min-height: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: lightgray;
    flex-grow: 1;
    margin-right: 1px;
    align-items: center;
    display: flex;
    justify-content: center;
  }

  nav#nav > div:not(:last-child) {
    border-right: 1px solid slategray;
  }

  form {
    margin: 0 .25em .5em auto
  }

  fieldset {
    border-radius: .5em;
  }

  input[type=radio] {
    float: right;
  }

  input[type=text] {
    width: auto;
    max-width: 95%;
  }

  input[type=password] {
    width: auto;
    max-width: 95%;
  }

  textarea {
    width: 100%;
    display: block;
  }

  nav#foot-nav {
    display: none;
  }
}

@media screen and (max-width: 768px) {

}

@media screen and (min-width: 1200px) { 
 
}