body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
    background-color: #eee8d5;
    max-width: 1200px;
    margin: 0px auto;
    padding: 5px;
    color: #073642;
    --keyword-color: #93a1a1;
    --input-color: LightCyan;
    --result-color: LightCyan;
    --count-color: LightCyan;
    --panel-background: #002b36;
}

h1, p{
    padding: 0px 10px;
}

#content {
    width: 100%;
    padding: 0px;
    height: 600px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    grid-gap: 1.5rem;
}

.panel {
    padding: 1rem;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--panel-background);
    /* color: #93a1a1; */
    /* color: #cacaca; */
    color: #efefef;
    font-size: 14px;
    overflow: auto;
}

#sebas-input {
    resize: none;
    outline: none;
}

#sebas-output {
    width: 130%;
}

#sebas-output > table {
    border-collapse: collapse;
}

#sebas-output > table > thead {
    font-weight: bold;
}

#sebas-output td {
    padding: 0.25rem 0.5rem;
    border: 1px solid white;
}

#sebas-output td.input {
    color: var(--input-color);
}

#sebas-output td.result {
    color: var(--result-color);
}

#sebas-output td.count {
    color: var(--count-color);
}

code {
    color: rgb(0, 74, 97);
    padding: 0px;
    font:12px Monaco,Consolas,"Andale  Mono","DejaVu Sans Mono",monospace
}

table {
  border-collapse: collapse;
  border: 1px solid;
}
table td {
    border: 1px solid black;
    padding: 0.25rem 0.5rem;
}
table td.code {
    padding: 0.25rem 0.625rem;
}
table tr.header {
    height: 30px;
}
.firstLine th{
    border-bottom: 2px solid black;
}