html, body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
  }

.wrapper {
  box-sizing: border-box;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
 .page-header, .page-footer {
  flex-grow: 0;
  flex-shrink: 0;
 }
 .page-body {
     flex-grow: 1;
     margin: 1rem;
 }

 .page-footer {
     background-color: #4b9cd3;
     color: #F0F0F0;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
 }

 .footer-content {
     flex-grow: 1;
     margin: 1rem;
     width: 40vw;
 }

 @media (max-width: 1250px) {
     .footer-content {
         width: unset;
     }
 }

 .page-footer h2 {
     font-weight: 700;
 }

 .footer-content h2 > a, h3 > a {
     text-decoration: none;
     color: #f0f0f0;
 }

#container {
    max-height: 45vh;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #ccc;
  }

  #params {
      display: flex;
      flex-direction: column;
      margin-top: 20px;
  }

  #panzoom {
      display: inline-block;
  }
  #panzoom img {
      cursor: move;
  }

  #fl-sim {
      position: absolute;
      top: 0%;
      left: 10%;
      width: 100%;
      height: 100%;
      border: 10px solid #f00;
  }

  input {
      box-sizing: border-box;
  }

  .input {
      display: flex;
      justify-content: space-between;
  }
  .right-col-width {
      width: 15vw;
  }
  @media (max-width: 335px) {
      #container {
          height: 30vh;
      }
      .sm-col {
          flex-direction: column;
      }
      .sm-col-width {
          width:100%;
      }
  }

  .input-range {
      display: flex;
      flex-direction: column;
      margin: 5px;
  }

  blockquote {
      text-indent: 1.6em;
      font: italic 1.2rem Areil;
  }



/* Ref: https://stackoverflow.com/a/64306268 */
.range {
  --ticksThickness: 2px;
  --ticksHeight: 30%;
  --ticksColor: silver;

  display: inline-block;
  background: silver;
  background: linear-gradient(to right, var(--ticksColor) var(--ticksThickness), transparent 1px) repeat-x;
  background-size: calc(100%/((var(--max) - var(--min)) / var(--step)) - .1%) var(--ticksHeight);
  background-position: 0 bottom;
  position: relative;

  width: 100%;
  margin-bottom: 20px;
}


/* min / max labels at the edges */
.range::before, .range::after {
  font: 12px monospace;
  content: counter(x);
  position: absolute;
  bottom: -2ch;
}

.range::before {
  counter-reset: x var(--min);
  transform: translateX(-50%);
}

.range::after {
  counter-reset: x var(--max);
  right: 0;
}

.range > input {
  width: 100%;
  margin: 0 -6px; /* Critical adjustment */
}

.title h1 {
    margin-bottom: 5px;
}

.header-forkme {
    display:flex;
    margin-bottom: 10px;
}

#forkme_banner {
  display: block;
  position: absolute;
  top:0;
  right: 10px;
  z-index: 10;
  padding: 10px 10px 10px 10px;
  color: #fff;
  background: #0090ff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
    -webkit-transition: -webkit-box-shadow 0.1s ease-in-out;
       -moz-transition:    -moz-box-shadow 0.1s ease-in-out;
        -ms-transition:         box-shadow 0.1s ease-in-out;
            transition:         box-shadow 0.1s ease-in-out;
}
#forkme_banner:hover {
       -moz-box-shadow: inset black 0px 0px 5px;
    -webkit-box-shadow: inset black 0px 0px 5px;
            box-shadow: inset black 0px 0px 5px;
}
#forkme_banner:active {
       -moz-box-shadow: inset black 0px 0px 10px;
    -webkit-box-shadow: inset black 0px 0px 10px;
            box-shadow: inset black 0px 0px 10px;
}