:root {
  --background: gainsboro; /* Dominates page */
  --text: darsklategray; /* Text, should have high contrast with background */
  --div: lightgray; /* muted, close to background */
  --link: black;
  --visited: var(--text);
}

body {
  font-family: sans-serif;
  background: var(--background);
  color: var(--text);
  font-size: 1.0em;
  margin: 0;
}

a:link {
  color: var(--link);
}

a:visited {
  color: var(--visited);
}

input, textarea {
  font-size: 1.2em;
}

button {
  font-size: 1.4em;
  margin-top: 0.5em;
  border-radius: 0.4em;
}

button.close {
  margin-top: 0em;
  margin-bottom: 0.5em;
}

button.small {
  font-size: 0.7em;
}

h2 {
  text-align: center;
}

h3 {
  text-align: center;
}

.panel-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  max-width: 65em;
  margin: auto;
}

.panel {
  border: 0px solid;
  border-radius: 1.0em;
  background: var(--div);
  width: 20em;
  min-width: 15em;
  margin: 0.5em;
  padding: 1.0em;
  text-align: center;
}

.item-panel {
  border: 1.0px solid var(--text);
}

.double-width {
  width: 43em;
  border: 1px solid var(--text);
}

.full-width {
  width: 100%;
}

.panel.space-above {
  margin-top: 2em;
}

.selected {
  border: 5px solid green;
  border-radius: 1.0em;
  margin: 0.2em;
}

.unselected {
  border: 1px solid var(--div);
  border-radius: 1.0em;
  margin: 0.4em;
}

.appointment-list {
  text-align: left;
}

.appointment-list > li {
  margin-bottom: 0.5em;
}

audio {
  width: 90%;
}

.no-top-margin {
  margin-top: 0em;
}

.small-bottom-margin {
  margin-bottom: 0.3em;
}

.allow-notice {
  color: darkslategray;
  background-color: #ffffffcc;
  font-size: 3.6em;
  z-index: 1000;
  position: absolute;
  left: 2em;
  top: 2.4em;
  width: 5em;
  border-radius: 0.4em;
  padding: 0.2em;
  border: 0.1em solid black;
}


#video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width: 320px;
  height: 240px;
}

img {
  max-width: 80vw;
  /*border: 1px solid red;*/
}

.col-img {
  max-width: 18em;
}

.screen-shot {
  border: 1px solid var(--text);
}

.notification-bubble {
  border: 2px solid black;
  padding: .2em;
  margin-top: 0.5em;
}

.distance-medium {
  color: yellow;
}

.distance-far {
  color: darkorange;
}

.label > div > h1:first-of-type {
  margin-top: 0.3em;
}

.label h1.name {
  font-size: 3.5em;
}

.label .close {
  margin: 0;
}

.label h1,h2,h3,h4 {
  margin: 0;
  text-align: center;
}

.label h2,h3,h4 {
  margin-bottom: 0.1em;
}

.label .panel-container {
  flex-direction: column;
  align-content: center;
}

.label .panel {
  flex: 1;
}

.label .panel.scan h2 {
  font-size: 2em;
}

.label .panel.post {
  margin-top: 2em;
}

.label li {
  text-align: left;
}

.label img {
  border: 0;
}

.header-icon {
  position: relative;
}

.header-icon-overlay {
  position: absolute;
  top: -0.2em;
  left: -0.2em;
  font-size: 1.6em;
}

@media print {
  @page {
    margin: 0;
  }

  body {
    background-color: white;
  }

  .label .panel {
    border: 1px solid black;
    padding-bottom: 0;
    background-color: white;
  }

  .label .panel.scan {
    border: 3px solid black;
  }

  .label ul {
    margin-bottom: 0;
  }

  .label {
    color: black;
    background-color: white;
  }

  .hidden-printed {
    display: none;
  }
}

@media (max-width: 640px) {
  .allow-notice {
    color: darkslategray;
    font-size: 1.4em;
    background-color: white;
    border-radius: 0.4em;
    padding: 0.2em;
    border: 0.1em solid black;
    position: unset;
    width: unset;
  }

  h1, h2, h3, h4 {
    margin: 0.2em;
  }

  button {
    margin-top: 0.2em;
  }

  .panel {
    padding: 0.5em;
    margin: 0.3em;
    margin-bottom: 0;
  }

  .double-width,.full-width {
    width: 20em;
  }
}