body {
  height: 100vh;
  overflow: hidden;
  margin: 0em;
  background-color: lightgrey;
}

header {
  grid-area: header;
  overflow: hidden;
}
main {
  grid-area: main;
  position: relative;
}
#logo {
  height: 25px;
}

.splitter {
  width: 100%;
  height: 100%;
  display: flex;
}
.separator {
  background-color: #aaa;
  /* background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>"); */
  background-repeat: no-repeat;
  background-position: center;

  /* Prevent the browser's built-in drag from interfering */
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#separatorV {
  cursor: col-resize;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
  width: 10px;
  height: 100%;
}
#separatorH {
  cursor: row-resize;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M0 2 h30 M0 5 h30 M0 8 h30' fill='none' stroke='black'/></svg>");
  height: 10px;
  width: 100%;
}

#leftPanel {
  overflow: auto;
  width: 250px;
  min-width: 10px;
}

#mainPanel {
  position: relative;
  min-width: 10px;
  background-color: #eeeeee;
}
#canvas-holder {
  position: relative;
  width: 100%;
  height: 100%;
}
#canvas {
  touch-action: none;
  width: 100%;
  height: 100%;
}

#topPanel {
  height: 70%;
}

#bottomPanel {
  height: 30%;
  min-height: 10px;
  display: flex;
}
#schedule-view {
  width: 100%;
  height: 100%;
}

.progress-display {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 5px;
}
progress::-webkit-progress-value {
  background: #f9ce03;
}
progress {
  color: #f9ce03;
}

.fps-display {
  position: absolute;
  bottom: 15px;
  right: 10px;
}

.hidden {
  visibility: hidden;
}
.xr-button {
  position: absolute;
  right: 10px;
  bottom: 10px;

  font-family: "arial";
  background-color: #f9ce03; /* Green */
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  user-select: none;
}
.button:hover {
  background-color: #78b87a; /* Green */
}
.button:focus {
  background-color: #78b87a;
}