:root {
  --max-height: 25rem;
  --max-width: 45rem;

  --dosee-width: 640px;
  --dosee-height: 480px;
  --dosee-border: 3px solid var(--background);

  --foreground: white;
  --background: black;
  --failure: red;
  --success: green;
}

#doseeContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

#doseeCanvas {
  background-color: #000;
  border: var(--dosee-border);
}

#doseeProgressIndicator {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 2px;
  background-color: var(--background);
  color: var(--foreground);
}

#doseeSplashImg {
  width: auto;
  max-width: 180px;
  height: 100%;
  max-height: 180px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#doseeSplashScreen {
  width: var(--dosee-width);
  height: var(--dosee-height);
  border: var(--dosee-border);
  background-color: var(--background);
  color: var(--foreground);
  overflow-y: auto;
}

#doseeSplashTitle {
  display: block;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 4em;
  text-align: center;
}

.dosee-crisp-render {
  /* FF 3 */
  image-rendering: -moz-crisp-edges;
  /* Safari 6 */
  image-rendering: -webkit-optimize-contrast;
  /* Chrome: 13, FF 65*/
  image-rendering: crisp-edges;
  /* Chrome: 41, Safari 10 */
  image-rendering: pixelated;
}

.splash-status {
  display: inline-block;
  min-width: 2em;
}
.text-failure {
  color: var(--failure);
}
.text-success {
  color: var(--success);
}

.toast {
  /* override mini-css */
  position: initial;
  transform: none;
  bottom: 0;
  left: 0;
}