.OK  { background-color: var(--ngnclr) !important; }
.ERR { background-color: var(--nrdclr) !important; }
.WRN { background-color: var(--dylclr) !important; }

#inner { font-size: 24px; }
.tab-content { grid-template-columns: repeat(1, 1fr); }
.query, .result { padding-top: 10px; }
.query, .result { width: 100%; }
.full { height: calc(100vh - 135px); }
.sub-full { height: calc(100vh - 170px); }

.editor { position: relative; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; }
.code { height: calc(70vh - 90px); }
.cons { height: calc(30vh); }
.btns { position: relative; height: 35px; background-color: var(--lylclr); }
.btn { padding: 5px; margin: 5px; font-size: 12px; color: var(--wbkclr); background-color: var(--lblclr); float: right; cursor: pointer; height: 15px; font-family: 'Mononoki'; }

.sql-header { font-size: 18px; font-weight: 700; padding-left: 5px; font-family: 'Fira Sans'; }
.sql-subheader { font-size: 18px; font-family: 'Fira Sans'; }
.col { padding: 5px; width: 100%; }
.res-tbl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }

@media (min-width: 900px) {
  .tab-content { grid-template-columns: repeat(2, 1fr); }
  .query, .result { overflow: hidden; height: calc(100vh - 107px); }
  .sql-header { font-size: 22px; }
  #inner { font-size: 20px; }
  .code { font-size: 16px !important; }
}