body {
    --body-margin-y: 4px;
    background-color: black;
    font-family: Consolas, monaco, monospace;
    color: white;
    margin: var(--body-margin-y) 0.75em;
    padding: 0;
}

div#body-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 2 * var(--body-margin-y));
}

div#demo-body {
    flex-grow: 1;
    display: flex;
}

div#body-left,
div#body-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 0 0.5em;
}

h1#title {
    font-size: 24px;
    text-align: center;
    margin-top: 0.2em;
    margin-bottom: 0;
}

p#description {
    text-align: center;
    margin-top: 0.2em;
}

div#code-wrapper {
    position: relative;
    height: 100%;
}

div#code {
    position: absolute;
    overflow-y: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: solid 1px rgb(84, 87, 89);
    font-size: 14px;
}

.cm-editor {
    height: 100%;
}

.cm-search button[name="close"] {
    color: white;
}

div#toolbar {
    display: flex;
    gap: 4px;
}

button#run,
button#compile-to-node,
button#load-example,
button#open-docs {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-family: inherit;
    font-size: 20px;
    color: white;
    border: 1px solid;
    border-radius: 2px;
    cursor: pointer;
}

button#run svg,
button#load-example svg {
    fill: white;
}

button#run.can-run {
    background-color: #008024;
    border-color: #01b328;
}
button#run.can-run:hover {
    background-color: #019927;
}
button#run.can-run svg#stop-icon {
    display: none;
}

button#run.can-stop {
    background-color: #b30000;
    border-color: #ff0000;
}
button#run.can-stop:hover {
    background-color: #db0000;
}
button#run.can-stop svg#run-icon {
    display: none;
}

button#compile-to-node {
    background-color: #1f69d1;
    border-color: #3e8fff;
}
button#compile-to-node:hover {
    background-color: #2580ff;
}

button#compile-to-node svg,
button#open-docs svg {
    stroke: white;
}

div#example-dropdown {
    display: inline-block;
    position: relative;
}

div#examples {
    display: none;
    position: absolute;
    box-shadow: 0px 1px 2px 1px #ffffff66;
}
div#example-dropdown:hover div#examples {
    display: block;
    z-index: 1;
}

div#examples span {
    display: block;
    background-color: #282c34;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 0.15em 0.3em;
}
div#examples span:hover {
    background-color: #6bacff;
    color: black;
}

button#load-example {
    cursor: auto;
    background-color: #8a00a3;
    border-color: #b623d0;
}

button#open-docs {
    background-color: #178ca0;
    border-color: #25b3cb;
}
button#open-docs:hover {
    background-color: #1aaac2;
}

div#execution-wrapper {
    position: relative;
    height: 100%;
}
p#execution {
    position: absolute;
    overflow-y: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #282c34;
    border: solid 1px rgb(84, 87, 89);
    padding: 0.4em 0.7em;
    font-size: 14px;
}

span.exec-error {
    color: #f55663;
}
span.exec-info {
    color: rgb(164, 164, 164);
}
span.exec-normal {
    color: white;
}
span.exec-input {
    color: #6bacff;
}

div#input-bar {
    display: flex;
    margin: 0.45em 0;
}

input#input-line {
    flex-grow: 1;
    outline: none;
    padding: 0.25em 0.5em;
    font-family: inherit;
    font-size: 14px;
    background-color: #282c34;
    color: white;
    border: 1px solid rgb(84, 87, 89);
    border-radius: 2px 0 0 2px;
}
input#input-line:disabled {
    border-color: #949aa9;
    background-color: #4a515f;
    cursor: not-allowed;
}
input#input-line::placeholder {
    color: #afafaf;
}

button#send {
    font-family: inherit;
    font-size: 16px;
    color: white;
    border: 1px solid;
    border-radius: 0 2px 2px 0;
}
button#send:enabled {
    background-color: #ad5700;
    border-color: #ff8000;
    cursor: pointer;
}
button#send:enabled:hover {
    background-color: #d76c00;
}

button#send:disabled,
button#compile-to-node:disabled {
    background-color: #808080;
    border-color: #afafaf;
    cursor: not-allowed;
}

p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

a {
    color: rgb(35, 182, 255);
    /*
        These are usually defined in UA style sheet but links that does
        not actually "link" anywhere (no href) may not have them:
    */
    text-decoration: underline;
    cursor: pointer;
}
a:visited {
    color: rgb(140, 140, 237);
}
a:hover {
    color: rgb(0, 200, 255);
}

p.fine-print {
    font-size: 14px;
}