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 0px 0px 40px; /* top, right, bottom, left */
    padding: 5px;
    color: #073642;
    --keyword-color: #93a1a1;
    --name-color: LightGreen;
    --type-color: LightBlue;
    --no-value-color: Gray;
    --panel-background: #002b36;
}

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

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

u {
    text-decoration: #f00 wavy underline;
    -webkit-text-decoration: underline wavy red;
}

#content {
    width: 100%;
    padding: 0px;
    height: 750px;
    display: grid;
    grid-template-columns: 62% 55%;
    grid-template-rows: 100%;
    grid-gap: 1.5rem;
    max-width: 1200px;   /* wider */
    margin: 0 auto;      /* centered */
}

.panel {
    padding: 10px;
    font-family: 'JetBrains Mono', 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: 16px;
    overflow: auto;
}

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

#tidyparse-output {
    width: 130%;
    white-space: pre-wrap;
}

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

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

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

#tidyparse-output td.name {
    color: var(--name-color);
}

#tidyparse-output td.type {
    color: var(--type-color);
}

#tidyparse-output td.no-value {
    color: var(--no-value-color);
}

#confrow1, #confrow2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    margin-right: -400px;
}

mark {
    background-color: darkslategray;
}

/* TextareaDecorator.css
 * written by Colin Kuebler 2012
 * Part of LDT, dual licensed under GPLv3 and MIT
 * Provides styles for rendering a textarea on top of a pre with scrollbars
 */

/* settings you can play with */

.ldt .red { color: red; }
.ldt .orange { color: orange; }
.ldt .yellow { color: yellow; }
.ldt .green { color: green; }
.ldt .blue { color: blue; }
.ldt .gray { color: darkslategray; }
/*.ldt .indigo { color: indigo; }*/
/*.ldt .violet { color: violet; }*/

.ldt, .ldt label {
    padding: 4px;
}

.ldt, .ldt pre, .ldt textarea {
    padding: 5px;
    font-size: 16px !important;
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    border-radius: 10px;
    background: var(--panel-background);
    color: #efefef;
}

/* settings you shouldn't play with unless you have a good reason */

.ldt {
    overflow: auto;
    position: relative;
}

.ldt pre {
    margin: 0;
    overflow: initial;
}

.ldt label {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 99%;
    height: 100%;
    display: inline;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: text;
}

.ldt textarea {
    margin: 0;
    padding: 0;
    border: 0;
    background: 0;
    outline: none;
    resize: none;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
    /* IE doesn't support rgba textarea, so use vendor specific alpha filter */
    filter: alpha(opacity = 20);

    /* hide the text but show the text caret */
    color: transparent !important;
    caret-color: white;
}

.spacer { display: inline; background-color: gray; }
.spacer::before { content: "\00a0"; white-space: pre; }