@charset "UTF-8";
html, body {
  margin: 0;
  width: 1048px;
  height: 600px;
}

body {
  font-size: 16px;
  font-family: sans-serif;
  background-color: black;
}

address {
  position: relative;
  font-style: inherit;
}
address .link-list a:after {
  content: ",";
}
address .link-list a.head:after {
  content: ":";
}
address .link-list a:last-child:after {
  content: "";
}
address .link-list a:after {
  display: inline-block;
}

sub {
  vertical-align: baseline;
  font-size: x-small;
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid black;
  background-color: #838383;
  border-radius: 8px;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

button, select, input[type=text] {
  background-color: #1f1f1f;
  color: #b4b4b4;
  border-radius: 4px;
  border-color: #9f9f9f;
  border-width: 1px;
}

input[type=text]::placeholder {
  color: #707070;
}

select::-webkit-scrollbar-thumb {
  border-color: #1f1f1f;
  border-radius: 0;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.inline {
  display: inline;
}

.normal-font-size {
  font-size: 1em;
}

.monospace {
  font-family: monospace;
}

.align-right {
  position: absolute;
  right: 0;
}

.version {
  font-family: sans-serif;
}

#canvas-container canvas {
  color: grey;
}

.control-panel {
  font-size: 14px;
  position: fixed;
  top: 296px;
  left: 256px;
  width: 512px;
  height: 288px;
  padding: 8px;
  overflow-y: scroll;
  background-color: #303030;
  color: #9f9f9f;
  border-radius: 0 8px 8px;
  transition: opacity 0.2s;
}
.control-panel::-webkit-scrollbar-thumb {
  border-color: #303030;
}
.control-panel.inactive {
  opacity: 0;
  z-index: -1;
}
.control-panel.active {
  opacity: 1;
  z-index: auto;
}
.control-panel > div {
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #9f9f9f;
}
.control-panel > div:last-of-type, .control-panel > div.half-width, .control-panel > div.no-divider {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.control-panel > div.vertical-space-but-no-divider {
  padding: 0.5em 0;
  border-bottom: 0;
}
.control-panel > div.after-margin {
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
}
.control-panel > div.top-divider {
  padding-top: 0.5em;
  margin-top: 0.5em;
  border-top: 1px solid #9f9f9f;
}
.control-panel > div.va-top, .control-panel > div.half-width {
  vertical-align: top;
}
.control-panel > div.half-width {
  width: 48%;
  display: inline-block;
}
.control-panel b {
  display: block;
  margin-bottom: 0.5em;
}
.control-panel b.inline {
  display: inline;
}
.control-panel label {
  display: inline-block;
}
.control-panel address {
  font-size: 0.8em;
  margin-top: 0.25em;
}
.control-panel address a {
  color: #c1c1c1;
}
.control-panel .after-margin {
  margin-bottom: 0.25em;
}
.control-panel .after-margin.button-container, .control-panel .after-margin.multiline-button-container {
  line-height: 2em;
  margin-top: -0.25em;
}
.control-panel .after-margin.button-container {
  margin-bottom: 0.035em;
}
.control-panel .after-margin.one-button-each-line, .control-panel .after-margin.two-buttons-each-line {
  line-height: 2em;
}
.control-panel .after-margin.one-button-each-line button.inactive, .control-panel .after-margin.two-buttons-each-line button.inactive {
  display: none;
}
.control-panel .after-margin.one-button-each-line button {
  display: block;
  margin-top: 0.9em;
  margin-bottom: -0.225em;
}
.control-panel .after-margin.one-button-each-line {
  margin-bottom: 0.55em;
}
.control-panel .after-margin.two-buttons-each-line div button {
  display: inline-block;
}
.control-panel span.after-margin {
  display: block;
}
.control-panel .full-width {
  display: block;
}
.control-panel .inactive {
  display: none;
}
.control-panel .description {
  font-size: 0.8em;
}
.control-panel .description b {
  display: inline;
}
.control-panel div.cpMessage {
  padding: 0.5em;
  border-radius: 8px;
  color: #c1c1c1;
}
.control-panel div.cpMessage:before {
  font-family: Segoe UI Emoji, monospace;
  margin-right: 0.2em;
}
.control-panel div.cpMessage a {
  color: #cacaca;
}
.control-panel div.cpMessage b {
  display: inline;
}
.control-panel div.cpMessage.caution {
  background-color: #5e5c37;
}
.control-panel div.cpMessage.caution:before {
  content: "⚠️ ";
}
.control-panel div.cpMessage.caution a {
  color: #cac89d;
}
.control-panel div.cpMessage.info {
  background-color: #374c5e;
}
.control-panel div.cpMessage.info:before {
  content: "ℹ️ ";
}
.control-panel div.cpMessage.info a {
  color: #9db5ca;
}
@media (max-height: 599px) and (orientation: landscape) {
  .control-panel {
    height: auto;
    bottom: 0;
  }
}

/*# sourceMappingURL=main.css.map */