@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 {
  letter-spacing: -2px;
  line-height: 26px; }
  #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 {
      margin-bottom: 0.55em; }
      .control-panel .after-margin.one-button-each-line button {
        display: block;
        margin-top: 0.9em;
        margin-bottom: -0.225em; }
    .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 */