body {
  background-color: beige;
  margin: 0;
  font-family: sans-serif;
}

p.error {
  color: red;
}

p.success {
  color: green;
}

.hidden {
  display: none;
  visibility: hidden;
}

/* treks app */

.treks-grid {
  display: grid;
  grid-template-columns: 0.1fr 2.6fr 0.1fr;
  gap: 2px;
}

.treks-grid h1 {
  display: inline;
}

.treks-grid div#login-app {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.treks-grid #treks-control {
  grid-column: 1 / 3;
  grid-row: 1;
  font-size: medium;
}

.treks-grid div#treks-list {
  grid-column: 1 / 4;
  grid-row: 3;
}

.treks-grid div#map {
  grid-column: 1 / 4;
  grid-row: 2;
  height: 520px;
  background-color: transparent;
}

/* Desktop */
@media screen and (min-width: 1080px) {
  .treks-grid {
    display: grid;
    grid-template-columns: 0.8fr 4fr 0.5fr;
  }
  .treks-grid #treks-control {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .treks-grid div#treks-list {
    grid-column: 1;
    grid-row: 2;
  }

  .treks-grid div#map {
    grid-column: 2 / 4;
    grid-row: 2;
    height: 800px;
  }

  #treks-control input#phrase {
    width: 20em;
  }
}

a.trek-create {
  text-decoration: none;
}

#treks-control input#from[type='number'],
#treks-control input#to[type='number'] {
  margin-left: 4px;
  margin-right: 4px;
  width: 4em;
  font-size: larger;
}

#treks-control button#clear-phrase {
  display: none;
  visibility: hidden;
}

/* Firefox lacks a search cancel button.
 https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button
*/
@supports (-moz-appearance: none) {
  #treks-control input#phrase,
  #treks-control button {
    border-style: solid;
    border-collapse: collapse;
    vertical-align: text-bottom;
  }

  #treks-control input#phrase {
    border-right: none;
    border-right-style: none;
  }

  @media screen and (max-width: 1079px) {
    #treks-control input#phrase {
      width: 8em;
    }
  }

  #treks-control button#clear-phrase {
    display: inline;
    visibility: visible;
    border-left: none;
    border-left-style: none;
  }
}

/*
WebKit specific styling for touch friendly spin buttons.
See:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-outer-spin-button
https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement
*/
#treks-control input#from[type='number']::-webkit-inner-spin-button,
#treks-control input#to[type='number']::-webkit-inner-spin-button {
  width: 40%;
}

#treks-control a.timeline {
  text-decoration: none;
  font-weight: bold;
  font-size: larger;
}

div#treks-list ul {
  padding-left: 2px;
  margin-top: 8px;
  margin-bottom: 8px;
}
div#treks-list ul li {
  list-style-type: none;
}

div#treks-list div.total {
  padding-left : 4px;
}

/* trek app */

nav ol {
  margin: 0px;
  padding: 0px;
}

nav ol li {
  display: inline;
}

.trek-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.8fr;
  gap: 1px;
  /*   grid-template-areas: */
/*     "menu login" */
/*     "info" */
/*     "map" */
/*     "video"; */
/*   grid-template-columns:    */
}

.trek-grid nav {
  grid-column: 1 / 4;
  grid-row: 1;
}

.trek-grid div#login-app {
  grid-column: 4;
  grid-row: 1;
}

.trek-grid div#login-app {
  justify-self: end;
}

.trek-grid #map {
  grid-column: 1 / 5;
  grid-row: 3;
  height: 274px;
  width: 100vw;
}

.trek-grid #video-player,
.trek-grid #chromecast {
  grid-column: 1 / 5;
  grid-row: 4;
}

.trek-grid #trek-thumbnail {
  grid-column: 1 / 5;
  grid-row: 4;  
}

video, #trek-thumbnail img.thumbnail {
  width: 100vw;
  object-fit: contain;
  touch-action: none;
}

#video-info ul {
  margin: 0;
  padding: 0;
}

#video-info ul li {
  list-style-type: none;
}
  
.trek-grid #video-info {
  grid-column: 3 / 5;
  grid-row: 2;
}

.trek-grid #trek-details {
  grid-column: 1 / 3;
  grid-row: 2;  
}

#chromecast {
  padding: 2px;
  display: grid;
  grid-template-columns: min-content auto max-content min-content;
  gap: 5px;
}

#chromecast #playpause {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}

#chromecast #seek {
  grid-column: 2;
  grid-row: 1;
}

#chromecast #seekbackward {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: start;
}

#chromecast #seekforward {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
}

#chromecast #times {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

#chromecast #volume {
  grid-column: 4;
  grid-row: 1 / 3;
  justify-self: center;
}
#chromecast #mute {
  grid-column: 4;
  grid-row: 4;
}

#chromecast input {
  font-size: larger;
}

#chromecast input[type='range']#seek {
  vertical-align: middle;
  width: 100%;
}

#chromecast input[type='range']#volume {
    writing-mode: vertical-lr;
    direction: rtl;
    height: 80px;
    width: 1em;
}

div.slideshow {
  position: relative;
}

div.slideshow button#play-all {
  font-size: xx-large;
  font-weight: bolder;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Desktop */
@media screen and (min-width: 1080px) {
  .trek-grid {
    width: 1920px;
    grid-template-columns: 896px 1024px;
    grid-template-rows: auto 100px 576px;
    gap: 2px;
  }
  
  .trek-grid nav {
    grid-column: 1;
    grid-row: 1;
  }

  .trek-grid div#login-app {
    grid-column: 2;
    grid-row: 1;
  }
  
  .trek-grid #trek-details {
    grid-column: 1 / 3;
    grid-row: 2;  
  }
  
  .trek-grid #map {
    grid-column: 1;
    grid-row: 3;
    height: 100%;
    width: 100%;
  }

  .trek-grid #video-player,
  .trek-grid #chromecast {
    grid-column: 2 / 4;
    grid-row: 3;
    width: auto;
  }
  
  .trek-grid #trek-thumbnail {
    grid-column: 2 / 4;
    grid-row: 3;  
  }
  .trek-grid #video-info {
    grid-column: 2 / 4;
    grid-row: 2;
  }
  
  video, #trek-thumbnail img.thumbnail {
    width: auto;
  }
}

.geo, .box {
  display: none;
  visibility: hidden;
}

h1 {
  font-size: medium;
}

h1, h2, h3, h4, h5, h6 {
  color: #722;
}

nav a {
  text-decoration: none;
}

div#debug {
  display: none;
}

/* Map */

.top-marker {
  background: blue;
  border: 2px solid white;
}

/* Form styles for preferences, upload, time sync. etc. */

form.admin.plain {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  max-width: 500px;
}

form.admin.plain label:nth-last-child(n+2) {
  margin-bottom: 2px;
}

form.admin.plain > fieldset.actions {
  align-self: flex-end;
}

fieldset.actions {
  border-style: none;
  padding: 0px;
}

.admin.simple {
  margin: 2px;
  display: grid;
  grid-template-columns: min-content min-content;
  grid-gap: 0.3em 0.3em;
}

.admin.simple > input {
  grid-column: 2;
  width: auto;
  margin: 0;
}

.admin.simple > .actions {
  grid-column: 1 / 3;
  justify-self: end;
}

fieldset.timecut > label,
fieldset.timecut > label > input,
fieldset.timecut > input {
  display: block;
  margin-bottom: 2px;
  margin-top: 2px;
}

a.leaflet-control-lock {
  font-weight: normal;
}

/* Login dialog */

dialog:first-child h3 {
  margin-top: 0px;
}

div.top-bar {
  display: flex;
  justify-content: space-between;
}

/* Misc text */

span.compass-direction-8 {
    display: inline-block;
    width: 3ch;
}