index.css

body {
  margin: 0;
}

.page-container {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

.page-content {
  flex: 1;
  display: flex;
}

.query, .score {
  flex: 1;
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.tab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tab-content > .tab-pane.active {
  display: flex;
}

.tab-pane {
  flex-direction: column;
  flex: 1;
}

.input {
  flex: 1;
}

.output {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.output svg {
  flex: 1;
}

#output .note.or use {
  fill: transparent;
}

/* @font-face {
    font-family:"Leipzig";
    src: url("/web/Leipzig-5.2.ttf");
} */


.controls {
  padding: 10px;
}

.input {
  font-size: 14px;
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
}

.query .search-controls {
  margin-bottom: 10px;
}