html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    cursor: wait;
}
.wait {
    cursor: wait;
}

#selection-type {
    grid-column: 1 / 3;
}

.container-fluid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    grid-template-rows: 3em auto;
    height: 100%;
    column-gap: 1.5vh;
    row-gap: 1.5vh;
    padding: 1.5vh;
    box-sizing: border-box;
}

.input-area {
    grid-column: 1 / 2;
    border-radius: var(--bs-border-radius);
    height: 100%;
    overflow: hidden;
}

.output-area {
    grid-column: 2 / 3;
    background-color: #f5f5f5;
}

#in {
    font-family: monospace;
    height: 100%;
    box-sizing: border-box;
    resize: none;
}

#out {
    font-family: monospace;
    width: 100%;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 2vh;
    box-sizing: border-box;
    white-space: pre;
    overflow: auto;
    scroll-behavior: smooth;
}

.invalid {
    color: red;
}

span.color-name {
    color: green;
}

span.color-type {
    color: blue;
}

span.color-value {
    color: orange;
}

span.color-warning {
    color: red;
}

span.color-indent {
    color: gray;
}