:root {
    --controls-color: #303030;
}

* {
    box-sizing: border-box;
}

html
{
    height: 100%;
    padding: 0;
    margin: 0;
}

body
{
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    height: 100%;
    padding: 0;
    margin: 0;
}

select {
    background: white;
    color: black;
    border-radius: 0;
    border: 1px solid #909090;
}

textarea
{
    padding: 10px;
    resize: none;
    width: calc( 100% - 20px );
    height: 100%;
    margin: 0;
    border: 0;
    font-size: 14px;
    border-radius: 0;
    font-family: monospace;
}

textarea:focus
{
    outline: none;
}

#resulframe
{
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
}

.controls
{
    border-top   : 1px solid #808080;
    border-bottom: 1px solid #808080;
    padding: 10px;
    white-space: nowrap;
    overflow-x: auto;
    min-height: 30px;
    font-family: arial;
    font-size: 15.5px;
    a, span, label
    {
        text-decoration: none;
        color: var(--controls-color);
        user-select: none;
        padding: 8px;
        cursor: pointer;
    }
    select, input {
        color: var(--controls-color);
    }
    select {
        margin-left: 8px;
        margin-right: 8px;
    }
    a:hover, span:hover, label:hover, input:focus
    {
        color: #000000;
    }
}

input[type="checkbox"] {
    accent-color: #808080;
}

body.horizontal {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "textarea iframe"
        "controls controls";
    textarea {
        border-right: 1px solid #000000;
    }
    #resulframe {
        grid-area: iframe;
    }
    .controls {
        grid-area: controls;
        border-bottom: 0;
    }
}

body.edit_only {
    grid-template-rows: 1fr auto;
    #resulframe {
        display: none;
    }
}