assets/src/css/app.scss
html, body, #root, #root > div.app {
  margin: 0; padding: 0; height: 100%;
}

#root > div.app {
  display: flex;
  flex-direction: column;

  .mosaic {
    flex: 1;
  }
}

.mosaic-window-body {
  display: flex;
  flex-direction: column;
}
.code-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  #editor {
    flex: 1;
    height: auto !important;
    width: auto !important;
    font-size: 14px;
  }
}

.raw-output {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;

  .error {
    padding: 12px;
    background-color: red;
    font-weight: 500;
    color: white;
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;

    code {
      flex: 1;
      overflow: auto;
      padding: 12px;
      white-space: pre-wrap;
      font-family: monospace;
      font-size: 14px;
    }
    code.json {
      white-space: pre;
    }

    .metadata {
      position: absolute;
      bottom: 4px;
      right: 20px;
    }

  }
  &.error code {
    opacity: 0.3;
  }
}

.bp3-navbar, .bp3-callout {
  .bp3-control, .bp3-button {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0;
  }

  ul {
    margin: 0;
    padding: 0;
    padding-left: 20px;
  }

  box-shadow: 0 1px 1px rgba(16, 22, 26, 0.15);
}
