html {
    font-size: 14px;
    border: 2px;
}

html, body {
    overflow-x: hidden;
}

a:hover {
    background-color: yellow;
}

span.userid {
    float: right;
}

table {
    border-collapse: collapse;
    border: 1px solid black;
}

div.query {
    margin: 6px;
    max-width: 100%;
}

div.output {
    margin: 8px;
}

div.result {
    margin: 8px;
    font-size: 13px;
}

div.result-error {
    font-weight: bold;
    font-size: 16px;
    background-color: black;
    padding: 10px;
    color: red;
}

div.result-main {
    font-weight: bold;
    font-size: 16px;
    font-family: sans-serif;
    background-color: ivory;
    padding: 10px;
}

pre.result-text {
    background-color: lightgray;
    margin: 0 20px 0 20px;
    padding: 4px;
    max-width: 100%;
    white-space: pre-wrap;
}

div.debug {
    margin: 8px;
    font-size: 11px;
}

pre.debug-stack-line {
    margin-top: 0;
    margin-bottom: 0;
}

button[type=submit] {
    color: white;
    background: green;
}

button[type=reset] {
    color: white;
    background: darkgoldenrod;
}

button:hover {
    background-color: darkmagenta;
}

button.disabled {
    background-color: gray;
}

table.info-table {
    border: 1px solid gray;
    margin-top: 4px;
    width: 100%;
    font-size: 14px;
}

table.info-table th {
    background-color: darkgreen;
    color: white;
    padding: 3px;
}

table.info-table tr {
    background-color: #f0fff0;
}

table.info-table tr:nth-child(odd) {
    background-color: #c0ffc0;
}

table.info-table td {
    padding: 1px 3px 1px 3px;
}

table.output-table {
    border-style: none;
    margin-top: 2px;
}

table.output-table td {
    padding: 1px 3px 1px 3px;
}
table.debug-table {
    border: 1px solid black;
    margin-top: 4px;
    width: 100%;
}

table.debug-table caption {
    font-family: cursive;
    padding-top: 2px;
    background-color: lightyellow;
}

table.debug-table th {
    background-color: navy;
    color: yellow;
    padding: 3px;
}

table.debug-table tr {
    background-color: azure;
}

table.debug-table tr:nth-child(odd) {
    background-color: lightcyan;
}

table.debug-table td {
    padding: 1px 3px 1px 3px;
}

table.debug-table.wide-table {
    display: block;
    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: 0 auto;
    overflow-x: auto;
}

p.debug-p {
    padding: 2px;
    background-color: lightyellow;
    width: 100%;
}

table.status-table td:nth-child(1) {
    font-weight: bolder;
    font-family: monospace;
    width: 20ch;
}

input.user-input, textarea.user-input {
    border-radius: 10px;
    padding: 10px;
    margin-top: 5px;
}

.query-input input, textarea {
    font-size: 16px;
    max-width: 95%;
}

.query-history {
    font-weight: bold;
}

button.query-submit-button, button.status-reload-button, button.query-cancel-button {
    border-radius: 5px;
    border: none;
    padding: 14px 32px;
    text-align: center;
    display: inline-block;
}

#query-error {
    color: red;
}

table.output-table-list {
    border: 1px solid black;
    width: 100%;
    margin-top: 2px;
}

table.output-table-list, th, td {
    border: 1px solid black;
}

#output-table td:nth-child(1) {
    font-style: italic;
}
#output-table td:nth-child(2) {
    font-weight: bold;
    font-family: sans-serif;
}
#debug-notes-table td {
    font-family: monospace;
}
#debug-notes-table td:nth-child(1) {
    font-weight: bolder;
}
#debug-shots-table td:nth-child(2), #debug-shots-table td:nth-child(5) {
    font-family: monospace;
}
#debug-model-label {
    font-family: cursive;
}
#debug-model-value {
    font-family: monospace;
}


div.autocomplete-itemlist {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}
div.autocomplete-itemlist div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}
div.autocomplete-itemlist div:hover {
    background-color: #e9e9e9;
}
div.autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}