/* Hall display page: one full-screen stage. */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #17052a;
}
body.hide-cursor, body.hide-cursor * { cursor: none; }

#stage {
  width: 100vw;
  height: 100vh;
}

.stage.is-blank #slides,
.stage.is-blank .progress { opacity: 0; }
#slides, .progress {
  -webkit-transition: opacity 0.45s ease;
  transition: opacity 0.45s ease;
}

.help {
  display: none;
  position: fixed;
  right: 4vw;
  bottom: 8vh;
  padding: 2vh 2vw;
  background: rgba(15, 4, 28, 0.92);
  border: 1px solid rgba(217, 180, 90, 0.6);
  color: #e4d9f2;
  font-family: "Noto Serif", Georgia, serif;
  font-size: 2vh;
  line-height: 1.7;
}
.help b { color: #d9b45a; font-weight: 600; }
.help.open { display: block; }

/* Temple kiosk slideshow, shown over the lyrics in kiosk mode. Hidden with
   visibility rather than display:none so it keeps its size and scaling. */
.kiosk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.kiosk.shown {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
.kiosk iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #17052a;
}

/* Small red dot in the corner when the remote control connection is lost */
.sync-dot {
  display: none;
  position: fixed;
  right: 1.6vw;
  bottom: 1.6vh;
  width: 1.2vh;
  height: 1.2vh;
  border-radius: 50%;
  background: #e0566b;
  opacity: 0.8;
}
.sync-dot.offline { display: block; }