/* FONTS */
@font-face {
    font-family: "Roboto Mono";
    src: url("fonts/RobotoMono-Regular.woff2");
    font-display: block;
}

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Regular.woff2");
    font-weight: normal;
    font-display: block;
}

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Bold.woff2");
    font-weight: bold;
    font-display: block;
}

/* DEFAULT THEME */
:root {
    --browser-theme-color: #4080ff;
    --ui-color-background1: #282828;
    --ui-color-background2: #000000;
    --ui-color-text: #ffffff;
    --ui-color-accent1: #4080ff;
    --ui-color-accent2: #ff4040;
    --ui-color-text-accent: #ffffff;
    --ui-color-border1: #ffffff40;
    --ui-color-border2: #ffffff60;
    --ui-color-disabled: #c0c0c0;
    --ui-color-form-background: #404040;
    --ui-color-form-highlighted: #2d4b79;
    --ui-color-form-text: #ffffff;
    --ui-color-form-border: #ffffff60;
    --ui-color-form-border-selected: #ffffffa0;
    --ui-color-form-disabled: #808080;
    --ui-measure-border-thin: 1px;
    --ui-measure-border-medium: 0.1rem;
    --ui-measure-border-thick: 0.15rem;
    --ui-measure-spacer-small: 0.25rem;
    --ui-measure-spacer-medium: 0.5rem;
    --ui-measure-spacer-large: 0.75rem;
    --ui-measure-form-padding-base: 0.35rem 0.5rem;
    --ui-measure-form-font-size: 0.9rem;
    --ui-measure-border-radius: 0.35rem;
    --flowchart-Assign-color1: #696a30;
    --flowchart-Assign-color2: #84853d;
    --flowchart-Assign-color3: #ffffff;
    --flowchart-Output-color1: #3f7335;
    --flowchart-Output-color2: #509243;
    --flowchart-Output-color3: #ffffff;
    --flowchart-Input-color1: #305c6a;
    --flowchart-Input-color2: #3d7585;
    --flowchart-Input-color3: #ffffff;
    --flowchart-If-color1: #783753;
    --flowchart-If-color2: #924365;
    --flowchart-If-color3: #ffffff;
    --flowchart-DoWhile-color1: #326d4f;
    --flowchart-DoWhile-color2: #3e8762;
    --flowchart-DoWhile-color3: #ffffff;
    --flowchart-While-color1: #326d4f;
    --flowchart-While-color2: #3e8762;
    --flowchart-While-color3: #ffffff;
    --flowchart-For-color1: #326d4f;
    --flowchart-For-color2: #3e8762;
    --flowchart-For-color3: #ffffff;
    --flowchart-Breakpoint-color1: #9a5758;
    --flowchart-Breakpoint-color2: #bd6b6c;
    --flowchart-Breakpoint-color3: #ffffff;
    --flowchart-Comment-color1: transparent;
    --flowchart-Comment-color2: #cccccc;
    --flowchart-Comment-color3: #ffffff;
    --flowchart-Comment-dashLength: 10;
    --flowchart-Comment-text-maxLength: 350;
    --flowchart-Turtle-Move-color1: #3b4f78;
    --flowchart-Turtle-Move-color2: #5d7ebd;
    --flowchart-Turtle-Move-color3: #ffffff;
    --flowchart-Turtle-Turn-color1: #593b78;
    --flowchart-Turtle-Turn-color2: #8d5dbd;
    --flowchart-Turtle-Turn-color3: #ffffff;
    --flowchart-Turtle-Home-color1: #593b78;
    --flowchart-Turtle-Home-color2: #8d5dbd;
    --flowchart-Turtle-Home-color3: #ffffff;
    --flowchart-Error-color1: #000000;
    --flowchart-Error-color2: #c00000;
    --flowchart-Error-color3: #ffffff;
    --flowchart-Round-color1: #4c45a5;
    --flowchart-Round-color2: #3d3886;
    --flowchart-Round-color3: #ffffff;
    --flowchart-Block-outline-thickness: 1.75;
    --flowchart-Block-highlight-color1: keep;
    --flowchart-Block-highlight-color2: #ffffff;
    --flowchart-Block-highlight-color3: keep;
    --flowchart-Font-family: "Roboto Mono";
    --flowchart-Font-svgEmbeddableFile: "fonts/RobotoMono-Regular.woff2";
    --flowchart-Block-font-size: 12;
    --flowchart-Line-thickness: 2;
    --flowchart-Line-arrow-size: 4;
    --flowchart-Line-color: #ffffff;
    --flowchart-Line-font-size: 10;
    --flowchart-Line-selected-color: #ff0000;
    --flowchart-selected-color1: #ffffff;
    --flowchart-selected-color2: #1330b0;
    --flowchart-selected-color3: #ffffff;
    --flowchart-Padding-base: 10;
    --flowchart-Padding-spaceBetweenInstructions: 24;
    --flowchart-Block-text-maxWidth: 40;
    --flowchart-Comment-text-maxWidth: 30;
    --flowchart-Block-wrapMode: new;
    --flowchart-Round-text-minWidth: 7;
    --flowchart-scrollbar-thickness: 6;
    --flowchart-scrollbar-padding: 4;
    --flowchart-scrollbar-color: #ffffff60;
    --insert-Font-size: 14;
    --insert-Wide-Padding-betweenColumns: 18;
    --insert-Wide-Padding-belowLabel: 20;
    --insert-Wide-Padding-spaceBetweenInstructions: 20;
    --insert-Tall-Padding-belowLabel: 10;
    --insert-Tall-Padding-belowRow: 20;
    --insert-Tall-Padding-spaceBetweenInstructions: 20;
    --turtle-color-cursor: #009000;
    --turtle-color-background: #404040;
    --turtle-color-foreground: #f0f0f0;
    --crash-Padding-spaceFromInstruction: 10;
    --layout-large-threshold: 80;
    --layout-small-threshold: 55;
    --layout-consoleArea-width: 25rem;
    --layout-variablesArea-width: 20rem;
    --toast-background: #ffffffd0;
    --toast-color: #000000;
    --toast-animation-duration: 0.4s;
}

/* BASIC RULES */
* {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

html {
    font-size: 11pt;
    background: black;
    color: white;
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--ui-color-background1);
    color: var(--ui-color-text);
    font-family: "Noto Sans";
}

::selection {
    background: var(--ui-color-accent1);
    color: var(--ui-color-text-accent);
}

::-webkit-scrollbar {
    width: calc(var(--flowchart-scrollbar-thickness) * 1px + var(--flowchart-scrollbar-padding) * 2px);
}

::-webkit-scrollbar-thumb {
    background: var(--flowchart-scrollbar-color);
    border: calc(var(--flowchart-scrollbar-padding) * 1px) solid transparent;
    border-radius: 999rem;
    background-clip: content-box;
}

@media print {
    body {
        display: none;
    }
}

a {
    color: var(--ui-color-accent1);
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.clear {
    clear: both;
}

#popupBackdrop {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}

#popupBackdrop.active {
    display: block;
}

div.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--ui-color-background2);
    border: var(--ui-measure-border-thick) solid var(--ui-color-accent1);
    border-radius: var(--ui-measure-border-radius);
}

div.popup.visible {
    display: block;
}

div.autoVert {
    display: flex;
    flex-direction: column;
}

div.autoHor {
    display: flex;
    flex-direction: row;
    gap: var(--ui-measure-spacer-medium);
}

div.autoHor>* {
    flex-grow: 1;
}

div.expander {
    position: absolute;
    z-index: 99;
    padding: var(--ui-measure-spacer-medium);
    cursor: pointer;
    text-transform: uppercase;
    border: var(--ui-measure-border-thin) solid var(--ui-color-border1);
    text-align: center;
}

div.expander .icon {
    display: block;
    margin-bottom: var(--ui-measure-spacer-medium);
    font-size: 1.1rem;
}

div.expander .text {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    font-weight: bold;
    font-size: 0.85rem;
}

div.sideHeader {
    margin: var(--ui-measure-spacer-small);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.1rem;
    flex: none;
}

/* FORMS */
button {
    background: none;
    padding: var(--ui-measure-form-padding-base);
    border: var(--ui-measure-border-medium) solid var(--ui-color-form-border);
    color: var(--ui-color-form-text);
    border-radius: var(--ui-measure-border-radius);
    font-weight: bold;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button,
button * {
    line-height: 1;
}

button:hover,
button:focus {
    border-color: var(--ui-color-form-border-selected);
}

button.important {
    background: var(--ui-color-accent1);
    color: var(--ui-color-text-accent);
    border-color: transparent;
}

button.danger {
    background: var(--ui-color-accent2);
    color: var(--ui-color-text-accent);
    border-color: transparent;
}

button.important:hover,
button.important:focus,
button.danger:hover,
button.danger:focus {
    border-color: var(--ui-color-form-border-selected);
}

button.important:active,
button.danger:active {
    box-shadow: none;
}

button[disabled] {
    color: var(--ui-color-form-disabled) !important;
    border-color: var(--ui-color-form-disabled) !important;
}

button .icon {
    font-size: 1.15rem;
    vertical-align: bottom;
}

input[type="text"] {
    font-family: "Roboto Mono";
    background: var(--ui-color-form-background);
    color: var(--ui-color-form-text);
    border: none;
    font-size: var(--ui-mesaure-form-font-size);
    border-radius: var(--ui-measure-border-radius);
    padding: var(--ui-measure-form-padding-base);
}

*[contenteditable] {
    color: var(--ui-color-form-text);
    padding: var(--ui-measure-form-padding-base);
    border-radius: var(--ui-measure-border-radius);
    cursor: text;
}

textarea {
    font-family: "Roboto Mono";
    resize: none;
    background: var(--ui-color-form-background);
    color: var(--ui-color-form-text);
    border: none;
    font-size: var(--ui-mesaure-form-font-size);
    border-radius: var(--ui-measure-border-radius);
    padding: var(--ui-measure-form-padding-base);
    height: 5rem;
}

input[type="checkbox"] {
    accent-color: var(--ui-color-accent1);
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
}

input[type="checkbox"]+label {
    vertical-align: top;
}

select {
    background: var(--ui-color-form-background);
    color: var(--ui-color-form-text);
    border: none;
    font-size: var(--ui-mesaure-form-font-size);
    border-radius: var(--ui-measure-border-radius);
    padding: var(--ui-measure-form-padding-base);
}

input:focus,
textarea:focus,
select:focus,
*[contenteditable]:focus {
    box-shadow: 0 0 0 var(--ui-measure-border-thick) var(--ui-color-accent1) inset;
}

input[type="checkbox"]:focus {
    outline: var(--ui-measure-border-thin) solid var(--ui-color-accent1);
}

@keyframes errorFlash {
    0% {
        box-shadow: 0 0 0 0rem var(--ui-color-accent2) inset;
    }

    25% {
        box-shadow: 0 0 0 var(--ui-measure-border-thick) var(--ui-color-accent2) inset;
    }

    50% {
        box-shadow: 0 0 0 0rem var(--ui-color-accent2) inset;
    }

    75% {
        box-shadow: 0 0 0 var(--ui-measure-border-thick) var(--ui-color-accent2) inset;
    }

    100% {
        box-shadow: 0 0 0 0rem var(--ui-color-accent2) inset;
    }
}

div.sideHeader button {
    border: none;
    padding: 0;
    margin-left: 0.5rem;
    vertical-align: bottom;
}

div.sideHeader .icon {
    font-size: 1.25rem;
}

div.window {
    display: none;
    position: fixed;
    z-index: 199;
    background: var(--ui-color-background2);
    border: var(--ui-measure-border-thick) solid var(--ui-color-accent1);
    border-top: none;
    outline: var(--ui-measure-border-thin) solid var(--ui-color-border1);
    border-radius: var(--ui-measure-border-radius);
    overflow: hidden;
}

div.window.visible {
    display: block;
}

div.window>div.window_bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    background: var(--ui-color-accent1);
    display: flex;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    padding: 0 var(--ui-measure-spacer-small);
}

div.window>div.window_bar * {
    color: var(--ui-color-text-accent);
}

div.window>div.window_bar>div.window_title {
    flex-grow: 1;
}

div.window>div.window_bar>div.window_buttons {
    margin-left: auto;
}

div.window>div.window_contents {
    position: absolute;
    top: 2.5rem;
    left: 0;
    right: 0;
    bottom: 0;
}

/* FLOWCHART AREA */
#flowchartArea {
    position: fixed;
    top: 2.5rem;
    left: var(--layout-variablesArea-width);
    right: var(--layout-consoleArea-width);
    bottom: 0;
    overflow: hidden;
    background: var(--ui-color-background1);
    left: 0;
    right: 0;
}

#flowchartArea.variablesExpanded {
    left: var(--layout-variablesArea-width);
}

#flowchartArea.consoleExpanded {
    right: var(--layout-consoleArea-width);
}

/* BLOCK EDITOR POPUP */
#editor {
    padding: var(--ui-measure-spacer-medium);
}

#editor label {
    font-weight: bold;
    margin-left: 0.15rem;
}

#editor_buttons {
    margin-top: var(--ui-measure-spacer-large);
}

#editor_Input {
    width: 20rem;
}

#editor_Output {
    width: 30rem;
}

#editor_Assign {
    width: 30rem;
}

#editor_If {
    width: 30rem;
}

#editor_DoWhile {
    width: 30rem;
}

#editor_While {
    width: 30rem;
}

#editor_For {
    width: 30rem;
}

#editor_Comment {
    width: 30rem;
}

#editor_Breakpoint {
    width: 15rem;
}

#editor_Move {
    width: 30rem;
}

#editor_Turn {
    width: 30rem;
}

#editor_Home {
    width: 20rem;
}

#editor_Comment textarea {
    height: 10rem;
}

#editor div.editor_graphics_container {
    display: flex;
    align-items: center;
    margin-bottom: var(--ui-measure-spacer-large);
}

#editor div.editor_graphics {
    flex: none;
    margin-right: var(--ui-measure-spacer-large);
}

#editor div.editor_graphics_description {
    flex-grow: 1;
    height: fit-content;
    font-size: 0.85rem;
    font-weight: bold;
}

#editor2 {
    padding: var(--ui-measure-spacer-medium);
    width: 8rem;
}

#editor2 .icon {
    font-size: 1.5rem;
    margin-right: var(--ui-measure-spacer-small);
}

#editor2>div {
    padding: var(--ui-measure-spacer-small);
    border-radius: var(--ui-measure-border-radius);
    display: flex;
    align-items: center;
}

#editor2>div:hover {
    background: var(--ui-color-accent1);
    color: var(--ui-color-text-accent);
}

/* INSERT POPUP */
#insertWide,
#insertTall {
    box-sizing: content-box;
    padding: 0 var(--ui-measure-spacer-small);
}

/* CRASH POPUP */
#crash {
    border-color: var(--ui-color-accent2);
    padding: var(--ui-measure-spacer-medium);
    width: 20rem;
    text-align: center;
}

#crash_title {
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}

#crash_title .icon {
    font-size: 3.25rem;
    vertical-align: middle;
    display: block;
}

#crash_buttons {
    margin-top: var(--ui-measure-spacer-large);
}

/* PROGRAM LOAD ERROR POPUP */
#loadError {
    border-color: var(--ui-color-accent2);
    padding: var(--ui-measure-spacer-medium);
    text-align: center;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}

#loadError_title {
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}

#loadError_title .icon {
    font-size: 2.5rem;
    vertical-align: middle;
    margin-right: var(--ui-measure-spacer-small);
}

#loadError_buttons {
    margin-top: var(--ui-measure-spacer-large);
}

/* YES/NO POPUP */
#yesno {
    border-color: var(--ui-color-accent2);
    padding: var(--ui-measure-spacer-medium);
    width: 20rem;
    text-align: center;
}

#yesno_title {
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}

#yesno_title .icon {
    font-size: 2.5rem;
    vertical-align: middle;
    margin-right: var(--ui-measure-spacer-small);
}

#yesno_buttons {
    margin-top: var(--ui-measure-spacer-large);
}

/* PROGRAM RECOVERY POPUP */
#errorRec {
    border-color: var(--ui-color-accent2);
    padding: var(--ui-measure-spacer-medium);
    text-align: center;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}

/* VARIABLES EDITOR */
#variablesArea {
    position: fixed;
    top: 2.5rem;
    left: 0;
    bottom: 0;
    width: var(--layout-variablesArea-width);
    background: var(--ui-color-background2);
    border-right: var(--ui-measure-border-thin) solid var(--ui-color-border1);
    display: none;
}

#variablesWrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

#variableList {
    width: 100%;
    overflow: auto;
    flex-grow: 1;
}

div.variable {
    margin: var(--ui-measure-spacer-small);
    border: var(--ui-measure-border-thin) solid var(--ui-color-border1);
    border-radius: var(--ui-measure-border-radius);
    position: relative;
    overflow: hidden;
}

div.variable>div.nameType {
    background: var(--ui-color-form-background);
    padding: var(--ui-measure-spacer-small);
}

div.variable>div.nameType::after {
    content: "";
    display: block;
    clear: both;
}

div.variable>div.nameType>.buttonGroup {
    float: right;
    width: fit-content;
    display: inline-flex;
    gap: var(--ui-measure-spacer-small);
}

div.variable>.value {
    padding: var(--ui-measure-spacer-small);
    text-align: center;
    min-height: 1.5rem;
    max-height: 5rem;
    overflow-y: auto;
}

div.variable>.value.modified {
    background: var(--ui-color-form-highlighted);
    font-weight: bold;
}

div.variable>.value.edit {
    text-align: initial;
}

div.variable>.value.edit>div[contentEditable] {
    padding: var(--ui-measure-spacer-small);
}

div.variable>.value.edit>div[contentEditable]:empty::before {
    content: "Initial value";
    opacity: 0.5;
}

div.variable>.value.uninitialized {
    color: var(--ui-color-form-disabled);
}

div.variable .name {
    font-weight: bold;
}

div.variable .name[contentEditable]:empty::before {
    content: "name";
    opacity: 0.5;
}

div.variable .name,
div.variable .type {
    display: inline-block;
    min-width: 3rem;
    max-width: 100%;
    padding: var(--ui-measure-spacer-small);
    vertical-align: middle;
}

div.variable .name.edit {
    overflow: auto;
}

div.variable .name.vis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.variable button {
    min-width: 2rem;
}

#variablesArea.noedit button {
    visibility: hidden;
    width: 0 !important;
}

div.variable.editing .vis {
    display: none;
}

div.variable:not(.editing) .edit {
    display: none;
}

#newVariable {
    display: flex;
    margin: var(--ui-measure-spacer-medium) auto;
}

#variableDropIndicator {
    position: fixed;
    left: 0;
    width: var(--layout-variablesArea-width);
    height: var(--ui-measure-spacer-small);
    z-index: 999;
    background: var(--ui-color-accent1);
    display: none;
}

#variableDropIndicator.visible {
    display: block;
}

#variablesArea.expanded {
    display: block;
}

#variablesExpander {
    left: 0;
    top: 10rem;
    background: var(--ui-color-accent2);
    border-radius: 0 var(--ui-measure-border-radius) var(--ui-measure-border-radius) 0;
    border-left: none;
}

#variablesExpander .text {
    transform: rotate(180deg);
}

#variablesArea.expanded+#variablesExpander {
    left: var(--layout-variablesArea-width);
}

/* CONSOLE */
#consoleArea {
    position: fixed;
    top: 2.5rem;
    right: 0;
    bottom: 0;
    width: var(--layout-consoleArea-width);
    overflow: hidden;
    background: var(--ui-color-background2);
    border-left: var(--ui-measure-border-thin) solid var(--ui-color-border1);
    overflow: visible;
    display: none;
}

#inputArea {
    position: absolute;
    bottom: var(--ui-measure-spacer-small);
    left: var(--ui-measure-spacer-small);
    right: var(--ui-measure-spacer-small);
    height: calc(5rem - var(--ui-measure-spacer-small));
}

#input {
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Noto Sans";
    border-radius: var(--ui-measure-border-radius) 0 0 var(--ui-measure-border-radius);
    margin: 0;
    height: 100%;
    width: calc(100% - 4.75rem);
}

#input[disabled] {
    opacity: 0.8;
}

#input_send {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4.75rem;
    background: var(--ui-color-accent1);
    color: var(--ui-color-text-accent);
    border: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0 var(--ui-measure-border-radius) var(--ui-measure-border-radius) 0;
}

#input_send:focus {
    box-shadow: 0 0 0 var(--ui-measure-border-medium) var(--ui-color-text-accent) inset;
}

#input_send[disabled] {
    background: var(--ui-color-form-background);
    color: var(--ui-color-form-text) !important;
    opacity: 0.6;
}

#input_send .icon {
    font-size: 1.5rem;
}

#logWrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(5rem + var(--ui-measure-spacer-small));
    display: flex;
    flex-direction: column;
}

#log {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    overflow: auto;
    flex-grow: 1;
}

#log div.message {
    max-width: 85%;
    min-width: 3rem;
    border-width: calc(var(--flowchart-Block-outline-thickness) * 1px);
    border-style: solid;
    padding: 0.35rem 0.6rem;
    margin-top: var(--ui-measure-spacer-small);
    width: fit-content;
    overflow-wrap: break-word;
    color: var(--flowchart-Text-color);
}

#log div.message.output {
    align-self: flex-start;
    background: var(--flowchart-Output-color1);
    border-color: var(--flowchart-Output-color2);
    color: var(--flowchart-Output-color3);
    margin-left: var(--ui-measure-spacer-small);
    border-radius: 1rem 1rem 1rem 0;
}

#log div.message.input {
    align-self: flex-end;
    background: var(--flowchart-Input-color1);
    border-color: var(--flowchart-Input-color2);
    color: var(--flowchart-Input-color3);
    margin-right: var(--ui-measure-spacer-small);
    border-radius: 1rem 1rem 0 1rem;
}

#log div.notice {
    color: var(--ui-color-disabled);
    text-align: center;
    font-size: 0.85rem;
    margin-top: var(--ui-measure-spacer-small);
}

#consoleArea.expanded {
    display: block;
}

#consoleExpander {
    right: 0;
    top: 10rem;
    background: var(--ui-color-accent1);
    border-radius: var(--ui-measure-border-radius) 0 0 var(--ui-measure-border-radius);
    border-right: none;
}

#consoleArea.expanded+#consoleExpander {
    right: var(--layout-consoleArea-width);
}

@media all and (max-width: 30rem) {
    #consoleExpander {
        top: initial;
        bottom: 10rem;
    }
}

/* TOP BAR */
#bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 var(--ui-measure-spacer-small);
    background: var(--ui-color-accent1);
    border-bottom: var(--ui-measure-border-thin) solid var(--ui-color-border1);
    color: var(--ui-color-text-accent);
    z-index: 99;
    overflow: hidden;
}

#bar_contents {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-measure-spacer-large);
    row-gap: 0;
}

#bar .group {
    height: 2.5rem;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-measure-spacer-small);
}

#bar .group>.icon {
    font-size: 1rem;
}

#bar .separator {
    margin-right: var(--ui-measure-spacer-large);
}

#bar button[disabled] {
    color: var(--ui-color-text-accent) !important;
    border-color: var(--ui-color-form-border) !important;
    opacity: 0.5;
}

#bar select {
    border: var(--ui-measure-border-medium) solid var(--ui-color-form-border);
    background: transparent;
    max-height: 100%;
}

#bar select:hover,
#bar select:focus {
    border-color: var(--ui-color-form-border-selected);
}

#bar select>option {
    color: black;
    background: white;
}

#filePicker {
    display: none;
}

#bar_settings {
    margin-left: auto;
}

#bar .expandCollapse {
    display: none;
}

#bar.small .expandCollapse {
    display: inline-flex;
    float: right;
    align-items: center;
    flex-direction: column;
    line-height: 0;
    justify-content: center;
    width: 3rem;
}

#bar.small.expanded #expandBar {
    display: none;
}

#bar.small:not(.expanded) #collapseBar {
    display: none;
}

#bar.small #bar_settings {
    margin-left: 0;
}

/* SETTINGS */
#settings {
    width: 100%;
    max-width: 35rem;
    max-height: 35rem;
    background: var(--ui-color-background2);
    overflow-y: auto;
    border: var(--ui-measure-border-thick) solid var(--ui-color-border1);
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}

#settings_tabSelector {
    background: var(--ui-color-background2);
    width: 100%;
    overflow-x: auto;
}

#settings_tabSelector>div {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: var(--ui-measure-spacer-medium);
    display: inline-block;
}

#settings_tabSelector>div.selected {
    background: var(--ui-color-background1);
}

#settings_tabs {
    display: grid;
}

div.settings_tab {
    background: var(--ui-color-background1);
    padding: var(--ui-measure-spacer-medium);
    visibility: hidden;
    overflow-x: auto;
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
}

div.settings_tab.selected {
    visibility: visible;
}

div.settings_tab_buttons {
    margin-top: var(--ui-measure-spacer-large);
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: var(--ui-measure-spacer-small);
}

p.settings_desc {
    font-size: 0.9rem;
    font-weight: bold;
}

#settings_about {
    text-align: center;
}

#versionTypeBadge {
    border-radius: 0.1rem;
    margin: 0 0.5rem;
    padding: 0 0.2rem;
    font-size: 0.85rem;
    font-weight: bold;
}

#about_logo {
    width: 100%;
    max-width: 24rem;
    margin: 1rem;
}

#licenseViewer {
    top: 50vh;
    left: 50vw;
    width: 90%;
    max-width: 50rem;
    height: 90%;
    max-height: 70rem;
    transform: translate(-50%, -50%);
    border: var(--ui-measure-border-thick) solid var(--ui-color-border1);
}

#license {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: white;
    color: black;
}

#license_close {
    background: var(--ui-color-accent2);
    position: absolute;
    top: calc(var(--ui-measure-spacer-large)*2);
    right: calc(var(--ui-measure-spacer-large)*2);
}

/* HELP THING */
#man {
    top: 50vh;
    left: 50vw;
    width: 90%;
    max-width: 50rem;
    height: 90%;
    max-height: 70rem;
    transform: translate(-50%, -50%);
    border: var(--ui-measure-border-thick) solid var(--ui-color-border1);
}

#man * {
    user-select: text;
    -webkit-user-select: text;
}

#man table {
    border-spacing: 0;
    border-collapse: collapse;
}

#man table,
#man table>*>*>* {
    border: var(--ui-measure-border-medium) solid var(--ui-color-accent1);
    padding: var(--ui-measure-spacer-small);
}

#man thead {
    background: var(--ui-color-accent1);
    color: var(--ui-color-text-accent);
}

#man tbody>tr>td:first-child {
    font-family: "Roboto Mono";
    font-size: 1.2rem;
}

#man code {
    font-family: "Roboto Mono";
    opacity: 0.7;
}

#man a {
    color: var(--ui-color-accent1);
    text-decoration: underline;
    cursor: pointer;
}

#man_contents {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    padding: var(--ui-measure-spacer-medium);
}

#man_close {
    background: var(--ui-color-accent2);
    position: absolute;
    top: calc(var(--ui-measure-spacer-large)*2);
    right: calc(var(--ui-measure-spacer-large)*2);
}

#man_logo {
    width: 100%;
    max-width: 25rem;
    display: block;
    margin: 0 auto;
}

#man h2 {
    text-align: center;
    background: var(--ui-color-accent1);
    padding: var(--ui-measure-spacer-small);
    color: var(--ui-color-text-accent);
}

#man h3 {
    text-align: center;
}

/* TURTLE GRAPHICS */
#turtleArea {
    min-width: 25rem;
    min-height: 25rem;
    width: 45vw;
    height: 45vh;
    top: 5rem;
    left: 5rem;
    background: var(--turtle-color-background);
}

#turtle_openMenu {
    border: none;
}

#turtleMenu {
    padding: var(--ui-measure-spacer-medium);
}

#turtleMenu .icon {
    font-size: 1.5rem;
    margin-right: var(--ui-measure-spacer-small);
}

#turtleMenu>div {
    padding: var(--ui-measure-spacer-small);
    border-radius: var(--ui-measure-border-radius);
    display: flex;
    align-items: center;
}

#turtleMenu>div:hover {
    background: var(--ui-color-accent1);
    color: var(--ui-color-text-accent);
}

/* TOAST NOTIFICATIONS */
div.toast {
    z-index: 9999;
    position: fixed;
    bottom: 2rem;
    width: fit-content;
    max-width: 40rem;
    padding: var(--ui-measure-spacer-large);
    background: var(--toast-background);
    color: var(--toast-color);
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 9999rem;
    text-align: center;
    pointer-events: none;
}

@keyframes toast-in {
    0% {
        opacity: 0;
        transform: translate(0, 0.35rem);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes toast-out {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
        transform: translate(0, -0.35rem);
    }
}

/* MISC */
#fps {
    position: fixed;
    bottom: 0;
    left: 50vw;
    transform: translate(-50%, 0);
    font-size: 2rem;
    display: inline-block;
    z-index: 9999999;
    background: red;
    color: black;
    font-family: monospace;
}