:root {
    --margin: 10px;
}

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%; height: 100%; margin: var(--margin);
    overflow: hidden;
}

.header {
    padding-bottom: 5px;
}

#logo {
    width: 5ex;
    float: left;
    margin-right: 2ex;
}

div.github-buttons {
    position: absolute;
    top: var(--margin);
    right: var(--margin);
    display: inline-block;
    float: right;
}

.content {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    width: calc(100% - 2*var(--margin));
}

#left, #right {
    position: relative;
    box-sizing: border-box;
    height: calc(100% - 2*var(--margin));
}

div.tinker-source {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tinker-console-wrapper {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    padding: 5px;
    overflow: auto; display: flex; flex-direction: column-reverse;
    border: 1px solid black;
}
.tinker-scroll-start-at-top { flex: 1 1 0%; }

.source-files button, .source-files select { height: 26px; }
.source-files select option.url { color: blue; }
.source-files .create-file { display: none; }
.tinker-source.create-file .source-files .create-file { display: inline; }

.editor-wrapper {
    border: 1px solid black;
    padding: 1px;
    position: relative;
    flex-grow: 1;
}

.editor-wrapper div[name=editor] {
    box-sizing: border-box;
    border: 0px;
    resize: none;
    width: 100%; height: 100%;
}

.CodeMirror {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    font-size: 130%;
}

.source-buttons {
    margin-top: var(--margin);
}

		 /*******************************
		 *        PROLOG CONSOLE        *
		 *******************************/

.tinker-input {
    margin-top: 5px;
    box-sizing: border-box;
    width: 100%;
}

div.tinker-trace > button.nodebug > span,
button.tinker-query-run > span {
    position: relative;
    top: -1px;
}

button.tinker-query-run {
    color: blue;
}

.tinker-more, .tinker-trace { margin-left: 3ex; }

.tinker-input, .tinker-more, .tinker-trace,
.tinker-abort, .tinker-keyboard { display: none }

.tinker-query.read          .query-header    { display: none }
.tinker-query.read          .tinker-input    { display: flex }
.tinker-query.prompt        .tinker-input    { display: flex }
.tinker-query.more          .tinker-more     { display: inline-block }
.tinker-query.trace         .tinker-trace    { display: inline-block }
.tinker-query.run:not(.key) .tinker-abort    { display: block }
.tinker-query.key           .tinker-keyboard { display: block }

.tinker-input input { flex-grow: 1; margin-left: 10px;}

.tinker-keyboard:focus { outline: 0px; }
.tinker-keyboard > span { color: #888; font-style: italic; font-size: 90%; }

.tinker-console-output {
    font-family: monospace;
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
}
.stderr, .stdout, .query-header {
    white-space: pre-wrap;
    font-family: monospace;
    word-break: break-all;
    overflow-wrap: break-word;
}
.bold { font-weight: bold; }
.underline { text-decoration: underline; }
div.write { display: contents; }

div.query-header, span.prompt { font-weight: bold; }
div.query-header span.query-prompt { margin-right: 1ex; }
.query-header { margin-top: 5px; padding: 3px 0px; display: block; background-color: #add8e6;}
.tinker-query.engine .query-header { background: #ade6d8; }
.query-answer:nth-child(even) { background-color: #eee; }

.tinker-query, .query-answer { position: relative; }
span.query-buttons { position: absolute; right: 5px; top: 1px; padding: 0px; margin: 0px;
		     cursor: pointer; color: #666}
span.query-buttons > span { margin-left: 0.5ex; border: 1px;}
span.query-buttons > span:hover { color: black; border: 1px solid black;}
.tinker-query.collapsed > .query-answers { display: none; }
.tinker-query span.query-collapse:before { content: "\1401" }
.tinker-query.collapsed span.query-collapse:before { content: "\1405" }
span.query-collapse { font-size: 90%; }

span.exch-files {
    float: right;
    text-decoration: none;
}

span.exch-files input.upload-file { display: none; }
span.exch-files.upload-armed input.upload-file { display: inline; }

.CodeMirror-search-match {
  background-color: yellow;
}
.CodeMirror-trace-call      { background-color: #8df !important; }
.CodeMirror-trace-exit      { background-color: #0f0 !important; }
.CodeMirror-trace-fail      { background-color: #ff8787 !important; }
.CodeMirror-trace-redo      { background-color: #ff0 !important; }
.CodeMirror-trace-exception { background-color: #f0f !important; }