:root {
  --main-bg-color: #2c3940;
  --gridcell-color: #1b262d;
  --main-font-color: #dee0e2;
  --dimmed-font-color: #a4a9ac;
  --low-contrast-font-color: #7d7d7e;
  --blue-font-color: blue;
  --yellow-font-color: #cca708;
  --red-font-color: red;
  --yellow: #fef9e5;
  --green: #7a9c4a;
  --red: #7b1a1f;
  --green-back: #678e2f;
}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  max-width: 1400px;
  font-family: 'Roboto', sans-serif;
  color: var(--main-font-color);
  background-color: var(--main-bg-color);
  font-size: 12px;
}

header {
  font-size: 22px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.section-header {
  font-size: 13.5px;
  border-bottom: 1px solid var(--main-bg-color);
  text-transform: uppercase;
  padding: 6px;
}

.container {
  height: 90%;
  margin-right: 20px;
  margin-left: 20px;
  display: grid;
  grid-gap: 10px;
  grid-template:
    'position spread-analysis depth' auto
    'active-pair active-pair depth' auto
    'log log depth' 1fr / 1fr 1fr 1fr;
}

.container div {
  background-color: var(--gridcell-color);
  max-height: 625px;
}

.position-cell {
  grid-area: position;
}

.depth-cell {
  grid-area: depth;
  min-width: 320px;
}

.depth-cell .low-contrast:not(.best) {
  color: var(--low-contrast-font-color);
}

.spread-cell {
  grid-area: spread-analysis;
}

.active-pair-cell {
  grid-area: active-pair;
}

.active-pair-cell .content {
  max-height: 200px;
  overflow-y: auto;
}

.log-cell {
  grid-area: log;
  height: 250px;
}

.log-cell .content {
  height: 90%;
  overflow-y: auto;
}

.log-table td.info {
  color: var(--green);
}

.log-table td.warn {
  color: var(--yellow-font-color);
}

.log-table td.error {
  color: var(--red-font-color);
}

.log-table td:nth-child(1),
.log-table td:nth-child(2) {
  width: 1%;
}

.content {
  padding: 10px;
}

table {
  text-align: left;
  width: 100%;
}

table th {
  padding-right: 5px;
}

table td {
  padding-right: 5px;
  color: var(--dimmed-font-color);
}

nav {
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  color: var(--main-font-color);
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul {
  display: flex;
  height: 25px;
}

nav ul li a {
  display: block;
  text-align: center;
  padding: 8px;
  text-decoration: none;
  color: var(--main-font-color);
  font-size: 15px;
  font-weight: 500;
}

nav ul li .active-link {
  text-decoration: underline;
}

table.best-quotes {
  margin-bottom: 6px;
}

table.spread-analysis {
  border-top: 1px solid var(--main-font-color);
}

table.best-quotes td:first-child,
table.spread-analysis td:first-child {
  color: var(--main-font-color);
}

table.best-quotes td:nth-child(3),
table.best-quotes td:nth-child(4) {
  text-align: right;
}

table.depth-body td:nth-child(2) .depth-size-cell {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  min-width: 0;
}

table.depth-body td:nth-child(2) .depth-size-cell div {
  text-align: right;
}

table.depth-body td:nth-child(3) {
  text-align: center;
}

table.depth-body td:nth-child(4) .depth-size-cell {
  display: flex;
  flex-direction: row;
}

table.depth-body td:nth-child(1), table.depth-body td:nth-child(5) {
  width: 1%;
}

table.depth-body span:not(.untradable) {
  color: var(--main-font-color);
}

div.depth-body {
  max-height: 550px;
  overflow-y: auto;
}

div.depth-body td {
  border-top: 1px solid rgb(22, 32, 32);
}

div.depth-body .best:not(.untradable) {
  color: goldenrod;
  font-weight: bold;
}

.ok {
  color: var(--green) !important;
}

.ng {
  color: var(--red) !important;
}

.untradable {
  text-decoration: line-through;
  color: var(--low-contrast-font-color);
}

::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: rgb(48, 47, 47);
}

::-webkit-scrollbar-thumb {
  background: #a4a9ac;
}

.error-bar {
  color: var(--yellow-font-color);
  background-color: var(--yellow);
  border: 1px solid #f7d234;
  font-size: 15px;
  text-align: center;
  margin: 10px;
}

.header-control {
  color: var(--dimmed-font-color);
  font-size: 12px;
}

.header-control input {
  vertical-align: middle;
}
