:root {
    --navbar-height: 3em;
    --control-width: 20em;
    --control-input-width: 8em;

    --background-color: #eee;
    --navbar-background-color: #666;
    --navbar-text-color: #eee;
    --navbar-nav-background-color: #444;
    --navbar-nav-text-color: #eee;

    --space: 0.5em;
    --small-space: 0.3em;
    --tiny-space: 0.15em;
    --radius: 2px;
}

body {
    overflow: hidden;
    font-family: sans-serif;
    margin: 0;
    background-color: var(--background-color);
}

canvas {
    width: 100vw;
    height: 100vh;
}

.d-none {
    display: none!important;
}

#controls-container,
#info-container {
    --controls-margin: var(--space);
    position: absolute;
    top: var(--navbar-height);
    right: 0;
    margin: var(--controls-margin);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: calc(100vh - var(--navbar-height) - 2 * var(--controls-margin));
    overflow: auto;
}

.controls-toggle,
.control-block {
    background-color: #fffe;
    padding: var(--space);
    margin: var(--tiny-space);
    color: #000;
    border-radius: var(--radius);
    user-select: none;
}

.control-title {
    cursor: pointer;
}

.controls {
    margin-top: var(--space);
}

.control-block {
    width: var(--control-width);
}

.controls div {
    display: flex;
    align-items: center;
    height: 1.5em;
}

.controls div:not(:first-child) {
    padding-top: 5px;
}

.controls label {
    margin-right: auto;
}

.controls progress {
    margin: 2px;
}

.controls {
    --margin: 5px;
    --width-100: var(--control-input-width);
    --width-50: calc(var(--control-input-width) * 0.5);
}

.controls input,
.controls button,
.controls select,
.controls progress {
    box-sizing: border-box;
    width: var(--width-100);
    height: 1.8em;
    margin-left: var(--margin);
}

.controls input:not(:last-child) {
    width: var(--width-50);
}

.controls input[type="checkbox"] {
    width: unset;
}

.controls table {
    border-collapse: collapse;
}

.controls td,
.controls th {
    padding: 3px;
    border: 1px solid black;
}

.triangle-right::before,
.triangle-down::before {
    --size: 0.8em;
    display: inline-block;
    content: " ";
    width: var(--size);
    height: var(--size);
    background-size: var(--size) var(--size);
    margin-right: var(--space);
}

.triangle-right::before {
    background-image: url(785b1d4b0cbe48b35440.svg);
}

.triangle-down::before {
    background-image: url(785b1d4b0cbe48b35440.svg);
    transform: rotate(90deg);
}

#navbar-container {
    position: fixed;
    width: 100%;
}

#navbar-container {
    top: 0;
    width: 100%;
    height: var(--navbar-height);
    background-color: var(--navbar-background-color);
    color: var(--navbar-text-color);
}

#navbar {
    height: 100%;
    margin: 0 var(--space);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#navbar a {
    color: var(--navbar-text-color);
    text-decoration: none;
    margin-right: auto;
}

#navbar a:visited {
    color: var(--navbar-text-color);
}

#control-toggle,#info-toggle {
    cursor: pointer;
    user-select: none;
    background-color: var(--navbar-nav-background-color);
    padding: var(--space);
    border-radius: var(--radius);
    margin-left: var(--space);
}

#tools-group {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--small-space);
}

#tools-group div {
    border-radius: var(--radius);
    padding: var(--small-space);
    background-color: #efefef;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 1px solid black;
}

#tools-group div.selected {
    background-color: #cccccc;
}

#tools-group div:hover {
    background-color: #e5e5e5;
}

#tools-group span {
    grid-column: 1 / -1;
    padding-bottom: var(--small-space);
}

#tools-group span:not(:first-child) {
    padding-top: var(--small-space);
}