@font-face {
    font-family: Open-Sans, sans-serif;
    src: url("./font/OpenSans-VariableFont_wdth,wght.ttf");
}

@font-face {
    font-family: RobotoMono;
    src: url("./font/RobotoMono-VariableFont_wght.ttf");
}

:root {
    --primary-color-bg: rgba(35, 35, 35, 0.95);
    --primary-color-fg: rgba(50, 50, 50, 0.8);
    --text-color: rgba(204, 204, 204, 0.75);

    --accent-color-bg: rgba(74, 125, 234, 0.4);
    --accent-color-bg-hover: rgba(67, 111, 208, 0.4);

    --accent-color-fg: #4a7dea;
    --accent-color-fg-hover: #3f65bd;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    background-color: rgb(26, 26, 26);

    font-family: sans-serif;
}

#game {
    display: block;
}

img {
    display: block;
}

#placeholders {
    display: none;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;

    user-select: none;
}

#play-fps {
    display: none;

    position: absolute;
    left: 16px;
    top: 16px;

    margin: 0;

    color: white;
    mix-blend-mode: difference;

    font-family: RobotoMono, monospace;
    font-size: 15px;
}

#crosshair {
    display: none;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 2px;
    height: 2px;

    background-color: white;
    mix-blend-mode: difference;
}

::selection {
    background-color: var(--accent-color-fg-hover);
}


/** Scrollbar **/

::-webkit-scrollbar {
    width: 8px;
    display: none;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 50em;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 79, 79, 0.25);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(51, 51, 51, 0.25);
}

::-webkit-scrollbar-button {
    display: none;
}


/** Tooltips **/

.file-button {
    position: relative;
}

.file-button .tooltip {
    position: absolute;
    z-index: 1;
    top: calc(100% + 24px);
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: row;
    align-items: center;

    visibility: hidden;
    background-color: rgba(45, 45, 45, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);

    padding: 6px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-family: Open-Sans, sans-serif;
    font-size: 14px;
}

.key-hint {
    margin: 0 0 0 6px;
    padding: 2px 6px;

    background-color: var(--accent-color-bg);
    color: rgba(255, 255, 255, 0.85);

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);

    border-radius: 4px;
}

.file-button:hover .tooltip {
    visibility: visible;
}

.text-label .tooltip {
    position: absolute;
    z-index: 1;
    top: calc(100% + 4px);
    left: 0;

    display: flex;
    flex-direction: row;

    visibility: hidden;
    background-color: var(--primary-color-bg);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    padding: 6px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-family: Open-Sans, sans-serif;
    font-size: 14px;
}

.text-label:hover .tooltip {
    visibility: visible;
}


/** Headers **/

.header {
    font-family: Open-Sans, serif;
    display: flex;
    flex: 0;
    align-items: center;
    color: white;

    margin-bottom: 6px;

    user-select: none;
}

.header-title {
    flex: 1;
    margin: 0 0 0 6px;
    color: var(--text-color);
    font-size: 18px;
    padding-right: 16px;
    display: flex;
    align-items: center;

    font-family: Open-Sans, sans-serif;
}

.header-button {
    margin: 0 0 0 4px;

    background-color: rgba(9, 9, 9, 0.2);
    padding: 6px;
    border-radius: 4px;

    cursor: pointer;
}

.header-button img {
    width: 20px;
    filter: invert();
    opacity: 80%;
}

.header-button:hover {
    background-color: rgba(70, 70, 70, 0.2);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.header-tabs {
    display: flex;
    flex-direction: row;
    margin: 0 16px 0 16px;
}

.header-tab {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: 3px;
    margin-right: 3px;

    background-color: rgba(35, 35, 30, 0.95);
    backdrop-filter: blur(10px);

    padding: 8px 8px 8px 8px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

    pointer-events: all;

    cursor: pointer;
    user-select: none;
}

.header-tab p {
    display: none;

    margin: 0 0 0 4px;

    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    opacity: 0.8;
}

.header-tab-current p {
    display: inherit;
}

.header-tab .tooltip {
    visibility: hidden;
    background-color: var(--primary-color-bg);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    padding: 6px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    position: absolute;
    z-index: 1;
    top: calc(100% + 4px);
    left: 50%;
    transform: translate(-50%);
}

.header-tab:hover .tooltip {
    visibility: visible;
}

.header-tab:hover {
    background-color: rgba(30, 30, 30, 0.85);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.header-tab-current, .tab-spaces-back {
    background-image: radial-gradient(rgba(35, 35, 35, 0), 0%, var(--accent-color-bg) 50%);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5), inset 0 0 8px var(--accent-color-fg);
}

.header-tab-current:hover, .tab-spaces-back:hover {
    background-image: radial-gradient(rgba(35, 35, 35, 0), 0%, var(--accent-color-bg-hover) 90%);
    outline: 2px solid var(--accent-color-fg-hover);
}

.header-tab img, .header img {
    filter: invert();
    opacity: 80%;
}

.header-tab img {
    width: 1.4rem;
}


/** Project manager **/

.full-parent {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);

    z-index: 1;
}

#projects-parent {
    display: none;
}

#projects {
    display: flex;
    flex-direction: column;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 35%;
    height: 60%;

    background-color: var(--primary-color-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    border-radius: 8px;
    padding: 8px;
}

.projects-icon {
    margin-left: 4px;
    margin-right: 2px;
}

#projects-inner {
    flex: 1;

    display: flex;
    flex-direction: column;

    overflow-y: scroll;
}

.projects-empty {
    flex: 1;
    font-family: Open-Sans, sans-serif;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255, 255, 255, 0.8);

    user-select: none;
}

.projects-listing {
    background-color: var(--primary-color-fg);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);

    color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    font-family: Open-Sans, sans-serif;
    font-size: 24px;
    margin: 8px 8px 0;
    padding: 8px 8px 8px 12px;

    display: flex;
    flex-direction: row;

    cursor: pointer;

    user-select: none;
}

.projects-listing-over {
    background-color: rgba(84, 84, 84, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.projects-listing:hover {
    background-color: rgba(40, 40, 40, 0.8);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.projects-listing-label {
    flex: 1;
    margin: 0;

    display: flex;
    align-items: center;
}

.projects-listing-button {
    margin: 0;

    color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    font-family: Open-Sans, sans-serif;
    font-size: 18px;
    padding: 8px;
}

.projects-listing-button:hover {
    background-color: rgba(0, 0, 0, 0.15);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.projects-listing-button-img {
    filter: invert();
    opacity: 30%;
}

.projects-listing:hover .projects-listing-button-img {
    opacity: 80%;
}

.projects-listing-current {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15) inset;
}

.projects-listing-current:hover {
    background-color: var(--accent-color-bg-hover);
    outline: 2px solid var(--accent-color-fg-hover);
}

.project-list {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
}


/** Left menu **/

.overview-header {
    justify-content: right;
}

.overview-header-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 6px;
    position: relative;
}

.add-hidden {
    display: none;
}

.add-actor {
    user-select: none;
}

.add-actor .tooltip {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 1;

    visibility: hidden;
    background-color: var(--primary-color-bg);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    padding: 6px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-family: Open-Sans, sans-serif;
    font-size: 14px;
}

.add-actor:hover .tooltip {
    visibility: visible;
}

.overview-header:hover #add-actor {
    display: none;
}

.add-divider {
    width: 2px;
    height: 4px;

    margin-left: 4px;

    background-color: rgba(255, 255, 255, 0.3);
}

.overview-header:hover .add-hidden {
    display: flex;
}

.overview-header:hover .header-title {
    display: none;
}

.outline-line {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
}

#menu-left {
    position: absolute;
    left: 0;
    top: 0;

    height: 100%;
    display: flex;
    flex-direction: column;

    pointer-events: none;
}

.add-events-parent {
    flex: 1;
    display: flex;
    justify-content: left;
}

#space-add-prefab, #prefab-add-prefab {
    margin-right: 1px;
    margin-left: 0;
}

.prefab-add-menu {
    margin-bottom: 6px;
    border-radius: 4px;
    max-height: 350px;

    overflow: scroll;
}

.prefab-add-menu-inner {
    background-color: rgba(9, 9, 9, 0.2);
    box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 2px;
    color: rgba(255, 255, 255, 0.8);
    font-family: Open-Sans, sans-serif;

    user-select: none;

    overflow: scroll;
}

.menu-left-section {
    margin: 8px;
    padding: 6px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);

    background-color: var(--primary-color-bg);

    overflow: scroll;

    pointer-events: all;
}

#menu-file {
    margin: 8px;
    border-radius: 10px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: row;

    pointer-events: all;
}

#menu-debug {
    display: none;

    background-color: rgba(35, 35, 35, 0.85);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-family: Open-Sans, sans-serif;
    font-size: 12px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;

    width: fit-content;

    user-select: none;
}

.debug-r {
    color: #d74f4f;
}

.debug-g {
    color: #48bd49;
}

.debug-b {
    color: #598ad3;
}

#debug-title {
    font-size: 16px;
    margin-top: 0;
}

#overview-parent {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    margin-bottom: 8px;
    padding-bottom: 0;
    padding-top: 2px;

    width: fit-content;
    min-width: 16vw;

    overflow-y: scroll;
}

#menu-overview {
    flex: 1;
    display: flex;
    flex-direction: column;

    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;

    width: fit-content;
    min-width: 16vw;
}

#menu-overview-prefabs {
    display: none;
}

.menu-overview-bottom {
    margin-top: 0;
    margin-bottom: 6px;
}

.menu-overview-bottom-buttons {
    margin-top: 0;
    justify-content: right;
    align-content: center;
    padding: 1px;
}

.menu-overview-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.menu-overview-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    margin-bottom: 6px;
    overflow-y: scroll;
}

#menu-overview-prefabs {
    display: none;
}

#menu-overview-space {
    display: none;
}

.menu-overview-empty {
    color: gray;
    padding: 12px;
    user-select: none;
    font-size: 14px;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#asset-list {
    padding-top: 8px;
}

.menu-overview-listing-parent {
    position: relative;

    display: flex;
    flex-direction: column;
    border-radius: 8px;
}

.menu-overview-listing {
    position: relative;

    text-align: left;
    color: white;

    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    background-color: var(--primary-color-fg);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 6px;

    margin: 4px;

    cursor: pointer;
    user-select: none;

    display: flex;
    flex-direction: row;
}

.menu-overview-listing .preview {
    background-color: #ffffff;

    visibility: hidden;

    position: absolute;
    top: calc(100% + 4px);
    left: 0;

    width: 128px;
    height: auto;

    z-index: 10000;

    border: 2px solid rgba(200, 200, 200, 0.8);
    border-radius: 8px;

    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);

    image-rendering: pixelated;

    pointer-events: none;
}

.menu-overview-listing:hover .preview {
    visibility: visible;
}

.menu-overview-listing-parent .menu-overview-listing-parent .menu-overview-listing {
    margin-top: 2px;
    padding: 2px;
    font-size: 12px;
}

.menu-overview-listing-parent .menu-overview-listing-parent .menu-overview-listing .overview-listing-icon {
    width: 15px;
    margin-left: 3px;
}

.menu-overview-listing.dragging :where(.de) {
    opacity: 0;
}

.dragging-over {
    background-color: rgba(255, 255, 255, 0.2);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.menu-overview-listing:hover {
    background-color: rgba(40, 40, 40, 0.8);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.menu-overview-listing-selected {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset 0 0 8px var(--accent-color-fg);
}

.menu-overview-listing-selected.menu-overview-listing-anonymous p {
    color: rgb(200, 200, 200);
}

.menu-overview-listing-selected:hover {
    background-color: var(--accent-color-bg-hover);
    outline: 2px solid var(--accent-color-fg-hover);
    box-shadow: inset 0 0 8px var(--accent-color-fg-hover);
}

.menu-overview-listing-selected-child {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15) inset;
}

.menu-overview-listing-selected-child:hover {
    background-color: var(--accent-color-bg-hover);
    outline: 2px solid var(--accent-color-fg-hover);
}

.overview-listing-icon {
    filter: invert();
    opacity: 50%;
    width: 20px;
}

.menu-overview-listing-selected .overview-listing-icon {
    opacity: 85%;
}

.menu-overview-listing p {
    margin: 0 10px 0 6px;
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: left;

    color: rgba(255, 255, 255, 0.7);
}

.menu-overview-listing-anonymous p {
    color: rgba(148, 148, 148, 0.8);
    font-style: italic;
}

.outline-name-prefab {
    margin-left: 5px;
    color: var(--accent-color-fg);
    filter: brightness(0.85);
    text-decoration: underline;
}

.menu-overview-listing-anonymous .outline-name-prefab {
    color: var(--accent-color-bg);
    font-style: normal;
}

#menu-details .outline-name-prefab {
    margin-left: 8px;
}

.menu-overview-listing-selected .outline-name-prefab {
    color: rgb(255, 255, 255);
}

.overview-buttons {
    display: flex;
    visibility: hidden;
}

.menu-overview-listing:hover .overview-buttons {
    visibility: visible;
}
.menu-overview-listing-selected .overview-buttons {
    visibility: visible;
}

.overview-listing-button {
    margin-left: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 2px;
    border-radius: 2px;
}

.overview-listing-button:hover {
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.overview-listing-button-icon {
    filter: invert();
    opacity: 40%;
    width: 17px;
}

.overview-listing-button:hover .overview-listing-button-icon {
    opacity: 80%;
}

.overview-collapse-parent {
    display: flex;
    flex-direction: row;
}

.overview-collapse-button {
    margin-left: 0;
    display: none;
}

.overview-collapse-parent:hover .overview-collapse-button {
    display: flex;
}

.overview-collapse-parent:hover .overview-listing-icon {
    display: none;
}

.overview-collapse-buttons {
    display: flex;
}

.overview-group {
    width: 18px;
    display: flex;
    margin-right: 2px;
    opacity: 25%;
}

#prefab-add-menu-space, #prefab-add-menu-prefab {
    display: none;
}

#prefab-add-close {
    display: none;
}

.menu-overview-listing:hover .overview-group {
    display: none;
}

.menu-overview-listing-selected .overview-group {
    display: none;
}

#menu-overview-assets {
    display: none;
}

.menu-file-row {
    background-color: var(--primary-color-bg);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    display: flex;
    padding: 5px;
    margin-right: 24px;
}

.menu-button {
    flex: 1;

    background-color: var(--primary-color-fg);
    padding: 12px;
    color: rgba(187, 187, 187, 0.85);
    border-radius: 5px;
    user-select: none;

    margin-right: 6px;

    font-family: Open-Sans, sans-serif;
}

.menu-button:hover {
    filter: brightness(90%);
    cursor: pointer;
    background-color: rgba(40, 40, 40, 0.8);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.menu-button-disabled {
    filter: brightness(75%);
}

.menu-button-disabled:hover {
    filter: brightness(50%);
    cursor: default;
    outline: none;
}

.menu-button p {
    margin: 0;
    text-align: center;
}

.menu-button img {
    filter: invert();
    opacity: 85%;
}

#button-export, #button-redo, #button-play {
    margin-right: 0;
}

#button-save {
    transition: 0.5s;
}

.just-saved {
    box-shadow: 0 0 8px var(--accent-color-fg), inset 0 0 4px var(--accent-color-fg);
    outline: 1px solid var(--accent-color-bg);

    transition: 0.25s;
}

.just-saved:hover {
    box-shadow: 0 0 8px var(--accent-color-fg-hover), inset 0 0 4px var(--accent-color-fg-hover);
    outline: 1px solid var(--accent-color-bg-hover);
}

.overview-asset-title {
    margin: 16px 4px 8px 4px;
    padding: 4px;
    border-bottom: 1px solid var(--accent-color-bg-hover);

    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    font-family: Open-Sans, sans-serif;
    font-size: 17px;
}


/** Project Name **/

.full-menu {
    display: flex;
    flex-direction: column;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background-color: rgba(35, 35, 35, 0.85);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    border-radius: 8px;
    padding: 6px;
}

.full-menu-inner {
    display: flex;
    flex-direction: column;

    border-radius: 4px;

    align-items: center;
}

.full-menu-row {
    display: flex;
    flex-direction: row;
}

#project-name-parent {
    display: none;
}

.full-menu-input {
    outline: none;
    border: none;
    padding: 8px;

    background-color: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.8);

    border-radius: 4px;

    font-family: Open-Sans, sans-serif;
    font-size: 20px;

    text-align: center;
}

.full-menu-input:hover, .full-menu-input:focus {
    background-color: #888888;
    color: #000000;
    outline: 1px solid white;
}

#project-name-save  {
    font-size: 24px;

    margin: 0 0 0 6px;

    background-color: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.5);
    border-radius: 4px;

    padding: 12px;

    cursor: pointer;
    user-select: none;
}

#project-name-save:hover {
    background-color: rgba(70, 70, 70, 0.2);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}


/** Project Settings **/

#project-settings-parent {
    display: none;
}

#project-settings-save {
    margin: 0 0 0 8px;
}


/** Toolbar **/

#menu-tools-parent, #menu-tools-landscape-parent {
    display: none;

    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 8px;
    flex-direction: row;
}

.toolbar {
    display: flex;
    flex-direction: row;
    padding: 6px;
    border-radius: 10px;

    background-color: var(--primary-color-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    user-select: none;
}

.menu-tools-button {
    padding: 8px;
    border-radius: 5px;
    background-color: var(--primary-color-fg);
    margin-right: 8px;

    cursor: pointer;
}

.menu-tools-button:hover {
    background-color: rgba(60, 60, 60, 0.3);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.menu-tool-current {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset 0 0 8px var(--accent-color-fg);
}

.menu-tool-current:hover {
    background-color: var(--accent-color-bg-hover);
    outline: 2px solid var(--accent-color-fg-hover);
}

#tool-scale, #tool-landscape-noise {
    margin: 0;
}

.menu-tools-button img {
    width: 32px;
    height: auto;
    filter: invert();
    opacity: 85%;
}

#menu-tools-landscape-parent {
    display: none;
}


/** Actor Details **/

#menu-details-parent {
    display: none;

    position: absolute;
    right: 0;
    top: 0;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    max-height: 100%;

    pointer-events: none;

    overflow-y: scroll;
}

#menu-details-left {
    display: flex;
    flex-direction: column;
    align-items: end;
}

#menu-details-tabs {
    margin-top: 64px;
    margin-bottom: 16px;
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;

    overflow-y: scroll;

    width: fit-content;
    justify-content: right;

    pointer-events: all;
}

.menu-details-tab-separator {
    height: 32px;
}

.menu-details-tab {
    position: relative;

    background-color: rgba(35, 35, 30, 0.95);
    backdrop-filter: blur(10px);

    margin-bottom: 8px;

    padding: 8px 8px 8px 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;

    pointer-events: all;

    cursor: pointer;
    user-select: none;

    display: flex;
    flex-direction: column;
}

.menu-details-tab:hover {
    background-color: rgba(30, 30, 30, 0.85);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.menu-details-tab-current {
    background-image: radial-gradient(rgba(35, 35, 35, 0), 0%, var(--accent-color-bg) 50%);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset -4px 0 8px rgba(0, 0, 0, 0.5), inset 0 0 8px var(--accent-color-fg);
}

.menu-details-tab-current:hover {
    background-image: radial-gradient(rgba(35, 35, 35, 0), 0%, var(--accent-color-bg-hover) 90%);
    outline: 2px solid var(--accent-color-fg-hover);
}

.menu-details-tab img {
    filter: invert();
    opacity: 80%;

    width: 20px;

    margin-bottom: 6px;
}

.menu-details-tab-label {
    writing-mode: vertical-rl;
    text-orientation: sideways;
    transform: scaleX(0.875);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    margin: 0;
    margin-bottom: 4px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: rgba(255, 255, 255, 0.6);
}

.menu-details-tab-current .menu-details-tab-label {
    color: rgba(255, 255, 255, 0.8);
}

.menu-details-tab .tooltip {
    visibility: hidden;
    background-color: var(--primary-color-bg);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    padding: 6px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    writing-mode: vertical-rl;
    text-orientation: sideways;

    position: absolute;
    z-index: 1;
    right: calc(100% + 6px);
    top: 50%;
    transform: translate(0, -50%);

    pointer-events: none;
}

.menu-details-tab:hover .tooltip {
    visibility: visible;
}

.menu-details-tab .tooltip .tooltip-sub {
    opacity: 60%;
    font-size: 12px;
    font-style: italic;
}

.menu-details-tab-delete {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);

    background-color: rgba(255, 255, 255, 0.8);
    padding: 3px;
    border-radius: 6px;
}

.menu-details-tab-delete img {
    filter: none;
    width: 16px;

    margin-bottom: 0;

    display: flex;
}

#menu-details {
    display: flex;
    flex-direction: column;

    background-color: var(--primary-color-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    user-select: none;

    overflow: scroll;

    color: white;
    width: 20vw;

    padding: 6px;
    border-radius: 8px;

    margin-top: 8px;
    margin-right: 8px;
    margin-bottom: 8px;

    pointer-events: all;
}

.menu-details-empty {
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: Open-Sans, sans-serif;

    color: gray;
}

.menu-details-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: left;

    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    color: #c4c4c4;
    font-family: Open-Sans, sans-serif;
    font-size: 18px;
    padding-left: 2px;
    padding-right: 8px;
}

.menu-details-section {
    display: flex;
    flex-direction: column;

    margin-bottom: 6px;

    border-radius: 6px;
}

.menu-details-section-add {
    margin: 0 24px 0 32px;

    background: none;
    box-shadow: none;
}

.menu-details-header {
    display: flex;
    flex-direction: row;
    margin-bottom: 6px;
    padding-left: 4px;
}

.menu-details-icon {
    flex: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-details-icon-img {
    filter: invert();
    opacity: 85%;
    width: 22px;
}

.menu-details-button {
    flex: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: 4px;

    background-color: rgba(161, 161, 161, 0.1);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.03);
    padding: 6px;
    border-radius: 4px;

    cursor: pointer;
}

.menu-details-button:hover {
    background-color: rgba(73, 73, 73, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.menu-details-button-img {
    filter: invert();
    opacity: 85%;
    width: 18px;
}

.menu-details-header-title {
    margin-left: 4px;
}

#details-title {
    display: flex;
    justify-content: center;
    margin: 8px 0 8px 42px;
    font-size: 20px;
}

#menu-details-inner {
    flex: 1;
    display: flex;
    flex-direction: column;

    overflow: scroll;

    margin-top: 8px;
    margin-bottom: 0;

    border-radius: 4px;

    padding: 2px 2px 0;
}

.menu-details-section-inner {
    display: flex;
    flex-direction: column;

    padding: 8px 8px 0;

    border-radius: 4px;
}

.menu-components-title {
    flex: 1;

    text-align: center;
    color: gray;
    font-size: 16px;
    font-family: Open-Sans, sans-serif;

    padding: 24px 16px;
}

.menu-details-name {
    width: 50%;

    outline: none;
    border: none;
    font-size: 16px;
    padding: 8px;

    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1) inset;
    color: rgba(255, 255, 255, 0.8);

    border-radius: 4px;

    font-family: Open-Sans, sans-serif;

    text-align: center;
}

.menu-details-name:hover, .menu-details-name:focus {
    background-color: #888888;
    color: #000000;
    outline: 1px solid white;
}


/** Vec3 **/

.vec3-parent {
    display: flex;
    flex-direction: row;

    margin-bottom: 10px;
}

.vec3-label {
    flex: 1;
    display: flex;
    align-items: center;

    margin-top: 0;
    margin-bottom: 0;
    margin-right: 8px;
    color: #c7c7c7;

    font-family: Open-Sans, sans-serif;
}

.vec3-icon {
    position: relative;

    flex: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 8px;
}

.vec3-icon img {
    filter: invert();
    opacity: 85%;
}

.vec3-icon .tooltip {
    visibility: hidden;
    background-color: var(--primary-color-bg);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    padding: 6px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-family: Open-Sans, sans-serif;
    font-size: 16px;

    position: absolute;
    z-index: 1;
    left: calc(100% + 4px);

    pointer-events: none;
}

.vec3-icon:hover .tooltip {
    visibility: visible;
}

.vec3 {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    padding: 2px;
    border-radius: 4px;
}

.vec3 input {
    width: 16px;
    outline: none;
    border: none;
    font-size: 16px;
    padding: 8px;

    margin-left: 2px;

    background-color: rgba(0, 0, 0, 0.175);
    color: rgba(255, 255, 255, 0.8);

    font-family: Open-Sans, sans-serif;

    text-align: center;

    transition: 0.15s;
}

.vec3 input:hover, .vec3 input:focus {
    filter: brightness(90%);
    background-color: #595959;
    outline: 1px solid white;

    transition: 0.15s;
}

.vec3-x {
    flex: 1;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.vec3-y {
    flex: 1;
}

.vec3-z {
    flex: 1;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/** Quat **/

.quat-w {
    flex: 1;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.quat-x {
    flex: 1;
}


/** Mesh Selector **/

.mesh-parent {
    display: flex;
    flex-direction: row;
    margin-top: 4px;
    margin-bottom: 12px;
}

.mesh {
    display: flex;
    flex-direction: row;

    position: relative;

    outline: none;
    border: none;
    height: fit-content;

    padding: 2px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 4px;

    background-color: rgba(161, 161, 161, 0.1);
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.05);
    color: rgba(255, 255, 255, 0.8);

    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    cursor: pointer;

    transition: 0.15s;
}

.mesh:hover {
    background-color: rgba(73, 73, 73, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);

    transition: 0.15s;
}

.mesh p {
    flex: 1;
    display: flex;
    align-items: center;

    margin: 0 4px 0 4px;
}

.mesh-icon {
    filter: invert();
    opacity: 0.85;

    width: 20px;
}

.mesh-list {
    display: flex;
    flex-direction: column;

    max-height: 60vh;

    position: fixed;

    background-color: var(--primary-color-bg);
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    padding: 6px 6px 0;
    border-radius: 4px;

    z-index: 999;

    cursor: default;

    overflow: scroll;
}

.mesh-option {
    display: flex;
    flex-direction: row;
    align-items: center;

    margin-bottom: 6px;

    background-color: var(--primary-color-fg);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 6px;

    cursor: pointer;
}

.mesh-option:hover {
    background-color: rgba(40, 40, 40, 0.8);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.mesh option {
    background-color: #3b3b3b;
    font-family: Open-Sans, sans-serif;
}

.mesh-option img {
    margin-right: 8px;
    border-radius: 4px;

    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1), inset 0 0 4px rgba(0, 0, 0, 0.5);

    outline: 1px solid rgba(255, 255, 255, 0.3);
}

.mesh-option-selected {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset 0 0 8px var(--accent-color-fg);
}

.mesh-option-selected:hover {
    background-color: var(--accent-color-bg-hover);
    outline: 2px solid var(--accent-color-fg-hover);
    box-shadow: inset 0 0 8px var(--accent-color-fg-hover);
}

.mesh-label {
    display: flex;
    flex: 1;
    align-items: center;

    margin: 0;
    color: #c7c7c7;
}


/** Material Section **/

.material {
    border-radius: 4px;
    padding: 8px;
}

.material-stack {
    border-radius: 6px;

    margin-bottom: 8px;
}

.material-stack.collapsed {
    cursor: pointer;
}

.material-stack.collapsed:hover {
    background-color: rgba(73, 73, 73, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.material-stack-header {
    display: flex;
    flex-direction: row;
    margin-bottom: 4px;
}

.material-stack-label {
    flex: 1;

    margin: 4px 0 4px 0;
    color: #d3d3d3;
    font-family: Open-Sans, sans-serif;
    font-size: 15px;
}

.material-stack-button {
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 4px;

    padding: 4px;

    cursor: pointer;
}

.material-stack-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.material-stack-button-img {
    width: 18px;
    filter: invert();
    opacity: 80%;
}

.material-stack-inner {
    display: flex;
    flex-direction: column;
}

.material-slot {
    border-radius: 4px;
    padding-top: 8px;
    padding-bottom: 0;
    margin-bottom: 4px;
    font-family: Open-Sans, sans-serif;
}

.material-slot-header {
    display: flex;
    flex-direction: row;

    margin-bottom: 12px;

    border-radius: 4px;
}

.material-slot-label {
    flex: 1;

    margin: 0;
    color: #c5c5c5;
    font-size: 18px;

    display: flex;
    justify-content: left;
    align-items: center;
}

.simple-parent {
    flex: 1;

    display: flex;
    flex-direction: row;
    justify-content: right;
}

.simple-label {
    flex: 0;
    margin: 0 6px 0 0;
    font-family: Open-Sans, sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.simple {
    flex: 1;
}

.material-stack-slots {
    display: flex;
    flex-direction: row;

    background-color: rgba(25, 25, 25, 0.65);
    border-radius: 8px;

    margin-top: 8px;
    padding: 8px 0 0 8px;
}

.material-stack-slot {
    width: 32px;
    height: 32px;

    margin-right: 8px;
    margin-bottom: 8px;

    border-radius: 2px;

    outline: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);

    filter: brightness(90%);

    cursor: pointer;
}

.material-stack-slot:hover {
    outline: 1px solid rgba(255, 255, 255, 0.8);

    filter: none;
}

.material-stack-slot-current {
    outline: 2px solid rgba(255, 255, 255, 0.9);
}

.material-stack-slot-current:hover {
    outline: 2px solid rgba(255, 255, 255, 0.8);
}


/** Color Selector **/

.color-parent {
    display: flex;
    flex-direction: row;

    padding-bottom: 12px;
}

.color-label {
    flex: 1;
    display: flex;
    justify-content: left;
    align-items: center;

    font-size: 15px;

    color: #c7c7c7;

    margin: 0;
}

.color {
    flex: 1;

    background: none;
    outline: none;
    border: none;
    padding: 0;

    cursor: pointer;
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    padding: 2px;
    border-radius: 9px;
    height: 36px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;

    outline: 1px solid rgba(255, 255, 255, 0.6);

    transition: 0.15s;
}

input[type="color"]::-webkit-color-swatch:hover {
    outline: 1px solid white;

    transition: 0.15s;
}

.color-buttons {
    position: relative;
    left: 4px;

    margin-right: 8px;
    padding: 2px;

    display: flex;
    flex-direction: row;
}

.color-button {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 2px;

    cursor: pointer;

    border-radius: 4px;

    padding: 4px;

    transition: 0.15s;
}

.color-button:hover {
    background-color: rgba(0, 0, 0, 0.15);
    outline: 1px solid rgba(255, 255, 255, 0.5);

    transition: 0.15s;
}

.color-button-img {
    filter: invert();
    opacity: 80%;
    width: 20px;
}


/** New Object Creation **/

.overview-new-input {
    outline: none;
    border: none;
    font-size: 16px;
    padding: 8px;

    margin-left: 12px;

    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1) inset;
    color: rgba(255, 255, 255, 0.8);

    border-radius: 4px;

    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    text-align: left;

    transition: 0.15s;
}

.overview-new-input:hover, .overview-new-input:focus {
    background-color: #888888;
    color: #000000;
    outline: 1px solid white;

    transition: 0.15s;
}

.overview-new-input-invalid, .overview-new-input-invalid:hover, .overview-new-input-invalid:focus {
    background-color: #e85959;
    outline: 2px solid #ff8989;
    color: black;

    transition: 0.15s;
}


/** Name **/

.name-input {
    outline: none;
    border: none;
    font-size: 16px;
    padding: 8px;
    margin-bottom: 12px;

    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1) inset;
    color: rgba(255, 255, 255, 0.8);

    border-radius: 4px;

    font-family: Open-Sans, sans-serif;

    text-align: center;
}

.name-input:hover, .name-input:focus {
    background-color: #888888;
    color: #000000;
    outline: 1px solid white;

    transition: 0.15s;
}

.name-input-invalid, .name-input-invalid:hover, .name-input-invalid:focus {
    background-color: #e85959;
    outline: 2px solid #ff8989;
    color: black;

    transition: 0.15s;
}


/** Text **/

.text-parent {
    display: flex;
    flex-direction: row;

    margin-bottom: 6px;
}

.text-label {
    position: relative;
    
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-top: 0;
    margin-bottom: 0;
    margin-right: 8px;
    color: #c7c7c7;

    font-family: Open-Sans, sans-serif;
    font-size: 15px;
}

.text-input {
    flex: 1;

    width: 50%;

    outline: none;
    border: none;
    font-size: 15px;
    padding: 8px;

    background-color: rgba(0, 0, 0, 0.175);
    color: rgba(255, 255, 255, 0.8);

    border-radius: 4px;

    font-family: Open-Sans, sans-serif;

    text-align: center;
}

.text-input:hover, .text-input:focus {
    background-color: #595959;
    color: #d5d5d5;
    outline: 1px solid rgba(255, 255, 255, 0.7);

    transition: 0.15s;
}

.text-input-invalid, .text-input-invalid:hover, .text-input-invalid:focus {
    background-color: #e85959;
    outline: 2px solid #ff8989;
    color: black;

    transition: 0.15s;
}


/** Slider **/

.slider-input {
    flex: 0.5;
}

.slider {
    margin-right: 12px;

    -webkit-appearance: none;
    background: transparent;

    cursor: grab;
}

.slider:active {
    cursor: grabbing;
}

.slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--accent-color-bg) 0%, var(--accent-color-bg) calc(var(--fill) + 2px), rgba(255, 255, 255, 0.5) calc(var(--fill) + 2px), rgba(255, 255, 255, 0.5) 100%);
    height: 4px;

    border-radius: 50em;
}

.slider:hover::-webkit-slider-runnable-track {
    background: linear-gradient(to right, var(--accent-color-bg-hover) 0%, var(--accent-color-bg-hover) calc(var(--fill) + 2px), rgba(255, 255, 255, 0.35) calc(var(--fill) + 2px), rgba(255, 255, 255, 0.35) 100%);
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px;
    background-color: #d3d3d3;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.115);
    height: 14px;
    width: 14px;

    border-radius: 3px;
}

.slider:hover::-webkit-slider-thumb {
    background-color: #939393;
    outline: 1px solid white;
}


/** Add Component **/

.comp-add-parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comp-add-button {
    position: relative;

    font-size: 18px;

    margin-bottom: 16px;

    flex: 0;

    background-color: rgba(161, 161, 161, 0.1);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.03);
    border-radius: 8px;

    padding: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    user-select: none;
}

.comp-add-button .tooltip {
    visibility: hidden;
    background-color: var(--primary-color-bg);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
    padding: 6px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    position: absolute;
    z-index: 1;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translate(-50%);
}

.comp-add-button:hover .tooltip {
    visibility: visible;
}

.comp-add-button:hover {
    background-color: rgba(70, 70, 70, 0.2);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.menu-details-add-inner {
    background: none;
}

.menu-details-add-header {
    justify-content: center;
}

.menu-details-add-title {
    text-align: center;
    display: flex;
    justify-content: center;

    margin-top: 4px;
}

.comp-add-buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 24px;
}

.comp-add-button:hover {
    background-color: rgba(73, 73, 73, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.comp-add-img {
    filter: invert();
    opacity: 80%;

    margin-left: 24px;
    margin-right: 16px;
}

.comp-add-details {
    display: flex;
    flex-direction: column;
}

.comp-add-label {
    margin: 0 0 4px;
}

.comp-add-description {
    margin: 0 0 4px;
    font-size: 14px;

    color: rgba(255, 255, 255, 0.55);
}

.comp-add-input-parent {
    display: flex;
    justify-content: center;
    margin: 0;
    margin-top: 14px;
}

.comp-add-input-center {
    width: 75%;
    display: flex;
}

.comp-add-input {
    flex: 1;
}

.comp-add-final {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 8px;
}


/** List **/

.list-parent {
    margin: 8px 0 10px;

    display: flex;
    flex-direction: row;
}

.list-label {
    flex: 0;
    align-items: baseline;
    justify-content: left;

    margin-top: 14px;
    margin-right: 64px;
}

.list {
    flex: 1;
    display: flex;
    flex-direction: column;

    background-color: rgba(0, 0, 0, 0.2);
    padding: 6px;
    border-radius: 7px;

    height: 200px;
}

.list-header {
    display: flex;
    flex-direction: row;

    margin-bottom: 6px;
}

.list-input {
    flex: 1;
    text-align: left;
    padding-left: 12px;
    background-color: rgba(255, 255, 255, 0.025);
}

.list-input:hover, .list-input:focus {
    background-color: rgba(73, 73, 73, 0.02);
}

.list-add {
    flex: 0;
    margin-left: 6px;
    margin-right: 0;
    background-color: rgba(255, 255, 255, 0.025);

    border-radius: 4px;
}

.list-add-img {
    filter: invert();
    opacity: 80%;
}

.list-inner {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.025);
    border-radius: 4px;
    padding: 6px;
    padding-left: 12px;
    padding-right: 12px;

    display: flex;
    flex-direction: column;

    overflow-y: scroll;
}

.list-empty {
    flex: 1;
    text-align: center;
    font-family: Open-Sans, sans-serif;
    font-size: 14px;
    color: rgba(162, 162, 162, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
}

.list-entry {
    display: flex;
    flex-direction: row;
}

.list-entry-text {
    flex: 1;
    font-family: Open-Sans, sans-serif;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 10px 0 10px 12px;
}

.list-entry-buttons {
    flex: 0;
    display: flex;
    flex-direction: row;
}

.list-entry-button {
    visibility: hidden;

    margin-top: 10px;
    margin-bottom: 10px;
    flex: 0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
}

.list-entry:hover .list-entry-button {
    visibility: visible;
}

.list-entry-button:hover {
    background-color: rgba(70, 70, 70, 0.2);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.list-entry-button-img {
    filter: invert();
    opacity: 80%;

    width: 15px;
}

.list-line {
    min-height: 1px;
    height: 1px;
    background-color: rgba(180, 180, 180, 0.25);
    margin-left: 8px;
    margin-right: 8px;
}


/** Switch **/

.switch-parent {
    margin: 8px 0 10px;

    display: flex;
    flex-direction: row;
}

.switch-label {
    flex: 1;
    display: flex;
    align-items: center;

    margin-top: 0;
    margin-bottom: 0;
    margin-right: 8px;
    color: #c7c7c7;

    font-family: Open-Sans, sans-serif;
    font-size: 15px;
}

.switch-outer {
    display: flex;
    flex-direction: row;

    width: 36px;
    height: 18px;

    padding: 3px;

    background-color: #4b4b4b;

    border-radius: 4px;

    cursor: pointer;

    transition: 0.15s;
}

.switch-outer:hover {
    background-color: #424242;
    outline: 1px solid white;

    transition: 0.15s;
}

.switch-on {
    background-color: var(--accent-color-bg);

    transition: 0.15s;
}

.switch-on:hover {
    background-color: var(--accent-color-bg-hover);
    outline: 1px solid white;

    transition: 0.15s;
}

.switch-fill {
    flex: 1;
    background-color: #bebebe;
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.115);

    border-radius: 2px;
}

.switch-negative {
    flex: 1;
}


/** Button **/

.details-button {
    display: flex;
    flex-direction: row;

    outline: none;
    border: none;
    height: fit-content;

    padding: 12px 14px;
    border-radius: 4px;

    background-color: rgba(161, 161, 161, 0.1);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.03);

    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    cursor: pointer;
}

.details-button:hover {
    background-color: rgba(73, 73, 73, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.details-button img {
    width: 18px;
    margin-right: 6px;
}

.details-button p {
    margin: 0;

    display: flex;
    align-items: center;
}

.details-button-highlight {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset 0 0 8px var(--accent-color-fg);
}

.details-button-highlight:hover {
    background-color: var(--accent-color-bg-hover);
    outline: 2px solid var(--accent-color-fg-hover);
    box-shadow: inset 0 0 8px var(--accent-color-fg-hover);
}


/** Play Button **/

#menu-play-button-parent {
    position: absolute;
    left: 50%;
    bottom: 8px;

    transform: translate(-50%);
}

#play-button-row {
    margin: 0;
}

#play-button-row .file-button .tooltip {
    top: initial;
    bottom: calc(100% - 4px);
}

#play-stop {
    display: none;
}


/** Code Editor **/

.script-list {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.script-new {
    flex: 0;

    display: flex;
    flex-direction: row;
}

#menu-code-parent {
    display: flex;
    flex-direction: column;

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    pointer-events: none;

    z-index: 10000;
}

#menu-code {
    flex: 1;
    display: flex;
    flex-direction: column;

    background-color: var(--primary-color-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    user-select: none;

    overflow: scroll;

    color: white;

    padding: 6px;
    border-radius: 8px;

    margin: 8px;

    pointer-events: all;
}

.code-header {
    margin-bottom: 0;
}

#menu-code-inner {
    flex: 1;

    display: flex;
    flex-direction: row;

    overflow: scroll;
}

#menu-code-inner .menu-details-empty {
    display: none;
    flex: 1;
}

#menu-code-icon {
    margin-left: 4px;
    margin-bottom: 6px;
}

#code-input-parent {
    flex: 1;
    display: flex;
    flex-direction: row;

    background-color: rgba(29, 29, 29, 0.6);

    overflow: scroll;

    margin-bottom: 0;

    border-radius: 4px;
}

.code-header .header-button {
    margin-bottom: 6px;
}

.code-tabs {
    flex: 1;
    display: flex;
    flex-direction: row;

    margin-left: 12px;
}

.code-tab {
    display: flex;
    flex-direction: row;

    position: relative;

    background-color: rgba(35, 35, 30, 0.95);
    backdrop-filter: blur(10px);

    margin-bottom: 8px;
    margin-right: 8px;

    padding: 8px;
    border-radius: 8px;

    pointer-events: all;

    cursor: pointer;
    user-select: none;
}

.code-tab:hover {
    background-color: rgba(30, 30, 30, 0.85);

    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.code-tab-current {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset 0 0 8px var(--accent-color-fg);
}

.code-tab-current:hover {
    background-color: var(--accent-color-bg-hover);
    outline: 2px solid var(--accent-color-fg-hover);
    box-shadow: inset 0 0 8px var(--accent-color-fg-hover);
}

.code-tab img {
    width: 18px;
}

.code-tab p {
    flex: 1;

    margin: 0 0 0 6px;

    display: flex;
    align-items: center;

    font-family: Open-Sans, sans-serif;
    font-size: 14px;

    color: rgba(255, 255, 255, 0.8);
}

.code-tab-close {
    margin-left: 8px;

    border-radius: 4px;

    cursor: pointer;
}

.code-tab-close:hover {
    background-color: rgba(0, 0, 0, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.3);
}

.code-tab-close img {
    width: 20px;
}

.code-input {
    margin: 1px;

    flex: 1;

    min-width: 50vw;
    min-height: 40vh;

    padding: 12px;

    resize: none;

    background: none;
    color: rgba(255, 255, 255, 0.8);

    font-family: RobotoMono, monospace;
    font-size: 15px;

    outline: none;
    border: none;

    line-height: 26px;

    -moz-tab-size : 4;
    -o-tab-size : 4;
    tab-size : 4;
}

#code-lines {
    min-width: 0;

    text-align: right;

    padding-left: 0;
    padding-right: 8px;

    background-color: rgba(0, 0, 0, 0.15);

    color: rgba(255, 255, 255, 0.5);

    border-radius: 4px 0 0 4px;

    user-select: none;
}

.code-error {
    outline: 2px solid rgba(255, 74, 74, 0.85);
}

#code-input-empty {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 32px;

    color: rgba(255, 255, 255, 0.5);
    font-family: Open-Sans, sans-serif;
    font-style: italic;
    font-size: 14px;
}

#code-right {
    margin-left: 6px;

    display: flex;
    flex-direction: column;
    min-width: 30%;

    border-radius: 4px;

    overflow: scroll;
}

.code-right-tab-current {
    background-color: rgba(69, 119, 91, 0.8);
    outline: 2px solid rgba(62, 197, 127, 0.8);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15) inset;
}

.code-right-tab-current:hover {
    background-color: rgba(54, 93, 73, 0.8);
    outline: 2px solid rgba(54, 173, 112, 0.8);
}

.code-event-listing {
    background-color: rgba(255, 255, 255, 0.05);

    margin: 8px;

    padding: 6px;
    padding-top: 24px;
    border-radius: 8px;
}

.code-event-listing p {
    margin: 0 0 24px;

    font-size: 18px;

    color: rgba(255, 255, 255, 0.9);

    font-family: Open-Sans, sans-serif;

    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

.code-event-listener-listing p {
    text-align: left;
}

.code-function-listing {
    display: flex;
    flex-direction: row;

    background-color: rgba(255, 255, 255, 0.05);

    margin: 8px;

    padding: 18px;
    border-radius: 8px;

    cursor: pointer;
}

.code-function-listing p {
    flex: 1;

    margin: 0;
    margin-left: 8px;

    font-size: 14px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);

    font-family: Open-Sans, sans-serif;

    text-align: left;

    display: flex;
    align-items: center;
}

.code-event-listing .code-function-listing p {
    justify-content: left;

    text-align: left;

    color: rgba(255, 255, 255, 0.7);

    margin-left: 8px;
}

.code-function-listing:hover {
    background-color: rgba(84, 84, 84, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

#code-right-inner {
    flex: 1;

    display: flex;
    flex-direction: column;
}

#code-add-input {
    text-align: left;
}

.code-empty {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 32px;

    text-align: center;
    color: rgba(255, 255, 255, 0.5);

    user-select: none;
}


/** Context Menu (Right Click) **/

#context-menu {
    display: none;

    position: absolute;
    left: 200px;
    top: 200px;

    margin: 8px;
    padding: 6px;
    border-radius: 6px;
    background-color: var(--primary-color-bg);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);

    color: rgba(255, 255, 255, 0.85);
    font-family: Open-Sans, sans-serif;

    overflow: scroll;
}

#cm-inner {
    display: flex;
    flex-direction: column;
}

#cm-title {
    margin: 4px;
    text-align: center;

    font-size: 18px;
}

.cm-option {
    display: flex;
    flex-direction: row;

    background-color: var(--primary-color-fg);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 8px;

    margin-top: 8px;

    cursor: pointer;
}

.cm-option:hover {
    background-color: rgba(84, 84, 84, 0.1);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.cm-option-icon, .cm-option-text {
    display: flex;
    align-items: center;
}

.cm-option-icon {
    filter: invert();
    opacity: 80%;

    margin-right: 7px;

    width: 18px;
}

.cm-option-text {
    flex: 1;

    margin: 0;

    font-size: 15px;

    color: var(--text-color);
}


/** Color List **/

.details-color-list-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: right;

    max-width: 50%;
}

.details-color-list-option {
    width: 28px;
    height: 28px;

    margin-left: 8px;
    margin-bottom: 8px;

    border-radius: 2px;

    outline: 1px solid rgba(255, 255, 255, 0.5);

    filter: brightness(90%);

    cursor: pointer;
}

.details-color-list-option:hover {
    outline: 1px solid rgba(255, 255, 255, 0.8);

    filter: none;
}

.color-list-option-current {
    outline: 2px solid rgba(255, 255, 255, 0.9);
}

.color-list-option-current:hover {
    outline: 2px solid rgba(255, 255, 255, 0.8);
}


/** Debugging Console **/

#console-parent {
    display: none;
}

#console {
    display: flex;
    flex-direction: column;

    position: absolute;
    left: 64px;
    top: 64px;

    width: 45vw;
    height: 60vh;

    background-color: var(--primary-color-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    border-radius: 8px;
    padding: 8px;
}

#console {
    cursor: grab;
}

#console:active {
    cursor: grabbing;
}

.console-icon {
    margin-left: 4px;
    margin-right: 2px;

    width: 24px;
}

#console-inner {
    flex: 1;
    display: flex;
    flex-direction: column;

    overflow-y: scroll;
}

#console-content {
    flex: 1;
    display: flex;
    flex-direction: column;

    overflow-y: scroll;

    padding: 8px;

    cursor: default;
}

.console-text {
    margin: 12px 8px 4px;

    overflow-wrap: break-word;

    color: rgba(255, 255, 255, 0.8);

    font-family: RobotoMono, monospace;
    font-size: 14px;

    cursor: text;
}

.console-title {
    font-size: 16px;
    font-weight: bold;
}

.console-hint {
    margin-top: 0;

    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.console-warning {
    padding: 4px 8px;
    border-radius: 4px;

    background-color: rgba(225, 188, 63, 0.5);
    box-shadow: inset 0 0 8px #e1bc3f;
    outline: 2px solid #e1bc3f;
    color: rgb(255, 255, 255);
}

.console-error {
    padding: 4px 8px;
    border-radius: 4px;

    background-color: rgba(217, 78, 78, 0.5);
    box-shadow: inset 0 0 8px #d94e4e;
    outline: 2px solid #d94e4e;
    color: rgb(255, 255, 255);
}

.console-user {
    color: var(--accent-color-fg);
}

#console-bottom {
    display: flex;
    flex-direction: row;

    margin-top: 8px;

    padding: 1px;
}

#console-input {
    flex: 1;
    display: flex;
    flex-direction: row;
}

#console-input input {
    flex: 1;

    text-align: left;

    padding-left: 10px;

    font-family: RobotoMono, monospace;
    font-size: 14px;
}


/** Animations **/

.animation-listing {
    display: flex;
    flex-direction: column;

    margin-bottom: 8px;

    background-color: var(--primary-color-fg);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 6px 16px;

    cursor: pointer;
}

.animation-listing .list-parent {
    display: none;
}

.animation-listing:hover {
    background-color: rgba(40, 40, 40, 0.8);
    outline: 1px solid rgba(255, 255, 255, 0.5);
}

.script-listing {
    cursor: default;
}

.script-listing:hover {
    background-color: var(--primary-color-fg);
    outline: none;
}

.script-listing hr {
    width: 100%;
    margin-top: 0;
    margin-bottom: 8px;
    height: 1px;
    border: none;

    background-color: rgba(255, 255, 255, 0.3);
}

.animation-listing-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.animation-listing-right {
    flex: 0;
    display: flex;
    flex-direction: column;
}

.animation-listing-play {
    margin-top: 8px;

    padding: 4px;

    border-radius: 4px;

    opacity: 65%;

    cursor: pointer;
}

.animation-listing-play:hover {
    outline: 1px solid rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.15);

    opacity: 90%;
}

.animation-listing-play img {
    filter: invert();
}

.script-var-reset {
    margin: 0 6px 0 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.script-var-reset img {
    width: 22px;
}

.script-var-reset-disabled {
    opacity: 0.2;
    cursor: default;
}

.script-var-reset-disabled:hover {
    background: none;
    outline: none;
    opacity: 0.2;
}

.script-var-left {
    display: flex;
    align-items: baseline;
}

.animation-listing-current {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset 0 0 8px var(--accent-color-fg);
}

.animation-listing-current .list-parent {
    display: flex;
}

.animation-listing-current .details-paragraph {
    font-size: 24px;
}

.animation-listing-current:hover {
    background-color: var(--accent-color-bg-hover);
    outline: 2px solid var(--accent-color-fg-hover);
    box-shadow: inset 0 0 8px var(--accent-color-fg-hover);
}

.animation-listing-locked {
    outline: 1px solid var(--accent-color-bg);
    box-shadow: 0 0 4px var(--accent-color-bg);

    cursor: default;
}

.animation-listing-locked:hover {
    background-color: var(--primary-color-fg);

    outline: 1px solid var(--accent-color-bg);
    box-shadow: 0 0 4px var(--accent-color-bg);
}


/** Animation Editor **/

#animation {
    position: absolute;
    left: 0;
    bottom: 0;

    display: flex;
    flex-direction: row;

    width: 75vw;
    height: 25vh;

    margin-left: 8px;
    margin-bottom: 8px;

    padding: 6px;

    background-color: var(--primary-color-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    border-radius: 8px;

    font-family: Open-Sans, sans-serif;

    user-select: none;
}

#animation-left {
    display: flex;
    flex-direction: column;

    min-width: 15%;

    margin-right: 6px;

    background-color: var(--primary-color-fg);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 6px;
}

.animation-left-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255, 255, 255, 0.5);

    font-style: italic;
    font-size: 15px;
}

#animation-right {
    flex: 1;

    display: flex;
    flex-direction: column;
}

#animation-tracks {
    flex: 1;

    display: flex;
    flex-direction: column;

    overflow-y: scroll;

    background-color: var(--primary-color-fg);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 6px 6px 0;
}

.animation-track {
    display: flex;
    flex-direction: row;

    margin-bottom: 6px;
    padding: 4px;

    border-radius: 2px;

    opacity: 0.7;

    cursor: pointer;
}

.animation-track:hover {
    background-color: rgba(40, 40, 40, 0.8);
    outline: 1px solid rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.animation-track-current {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset 0 0 8px var(--accent-color-fg);

    opacity: 1;
}

.animation-track-current:hover {
    background-color: var(--accent-color-bg);
    outline: 2px solid var(--accent-color-fg);
    box-shadow: inset 0 0 8px var(--accent-color-fg);

    cursor: default;
}

.animation-track-header {
    display: flex;
    flex-direction: row;

    align-items: center;
}

.animation-track-header img {
    filter: invert();
    opacity: 0.8;

    width: 22px;
}

.animation-track-header p {
    margin: 8px 12px 8px 4px;

    color: rgba(255, 255, 255, 0.8);
}

.animation-track-keyframes {
    flex: 1;

    margin-right: 12px;
    margin-left: 4px;

    position: relative;
}

.animation-track-line {
    height: 1px;

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    margin: 0;

    background-color: rgba(255, 255, 255, 0.5);
    border: none;
}

.animation-keyframe {
    position: absolute;

    top: 50%;
    transform: translate(-50%, -50%);

    filter: invert();
    opacity: 0.8;
    width: 22px;

    padding: 2px;
}

.animation-keyframe-add {
    position: absolute;

    top: 50%;
    transform: translate(-50%, -50%);

    filter: invert();
    opacity: 0.8;
    width: 22px;

    pointer-events: none;
}

.animation-track-current .animation-keyframe {
    cursor: pointer;
}

.animation-track-current .animation-keyframe:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;

    box-shadow: 0 0 16px rgba(255, 255, 255, 0.25);
}

#animation-bottom {
    display: flex;
    flex-direction: row;

    margin-top: 6px;
}

#animation-bottom-left {
    flex: 1;

    display: flex;
    flex-direction: row;
}

#animation-length {
    max-width: 64px;
}

#animation-bottom-left p {
    margin: 0 8px;

    display: flex;
    align-items: center;

    color: rgba(255, 255, 255, 0.6);

    font-size: 14px;
}

#animation-bottom-right {
    display: flex;
    flex-direction: row;
}

#animation-bottom-right p {
    margin: 0 12px 0 0;

    display: flex;
    align-items: center;

    color: rgba(255, 255, 255, 0.6);

    font-size: 14px;
}


/** MISC **/

.details-title {
    margin: 32px 0 12px 0;

    color: rgba(200, 200, 200, 0.9);

    font-family: Open-Sans, sans-serif;
    font-size: 20px;

    font-weight: normal;

    user-select: none;
}

.details-paragraph {
    margin: 4px 0 4px 0;

    color: rgba(200, 200, 200, 0.9);

    font-family: Open-Sans, sans-serif;
    font-size: 15px;

    line-height: 135%;

    user-select: none;
}

.advanced-export {
    display: flex;
    flex-direction: column;

    width: 90%;
    margin: 16px auto 12px;

    background-color: rgba(25, 25, 25, 0.65);
    border-radius: 8px;

    overflow: scroll;
}

.advanced-export .header-tabs {
    margin: 5px 2px 2px 2px;
}

.advanced-export .header-tab {
    background-color: rgba(145, 145, 145, 0.1);

    border-radius: 4px;
}

.ae-list {
    display: flex;
    flex-direction: column;

    padding: 0 4px 4px;

    max-height: 512px;

    overflow: scroll;
}

.ae-list .menu-overview-listing .ae-check {
    opacity: 0;

    filter: invert();
}

.ae-list .menu-overview-listing-selected .ae-check {
    opacity: 75%;
}

.ae-dependency {
    outline: 1px solid var(--accent-color-fg);
}

.ae-dependency:hover {
    outline: 1px solid var(--accent-color-fg-hover);
}

.ae-depend {
    display: none;
    width: 24px;
    opacity: 75%;
    filter: invert();
}

.ae-dependency .ae-depend {
    display: flex;
}

.menu-overview-listing-selected.ae-dependency .ae-depend {
    display: none;
}

.new-space-name {
    flex: 1;
}

#camera-speed-parent {
    display: none;

    pointer-events: none;
}

#camera-speed {
    display: flex;
    flex-direction: row;

    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translate(-50%, 50%);

    width: 15vw;
    min-height: 1vh;

    padding: 4px;

    border-radius: 6px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);

    background-color: var(--primary-color-bg);
}

#camera-speed img {
    flex: 0;

    filter: invert();
    opacity: 0.85;

    margin-left: 4px;

    width: 100px;
    height: auto;
}

#camera-speed-inner {
    display: flex;
    flex-direction: column;

    flex: 1;

    width: 65%;

    border-radius: 4px;
    background-color: rgba(75, 75, 75, 0.8);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);

    margin: 6px;
}

#camera-speed-fill {
    flex: 1;

    width: 65%;
    height: 100%;

    border-radius: 4px;
    background-color: var(--accent-color-fg);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.35);
}

#camera-speed-text {
    display: flex;
    align-items: center;

    margin: 0 4px;

    color: rgba(255, 255, 255, 0.85);
    font-family: Open-Sans, sans-serif;
    font-size: 14px;
}

.notification-outer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    background-color: #c26f6f;
    color: rgba(255, 255, 255, 0.85);
}

.graph-parent {
    display: flex;
    flex-direction: column;

    margin-bottom: 16px;
    padding: 8px;
    border-radius: 6px;

    background-color: rgba(131, 131, 131, 0.1);
}

.graph-title {
    margin: 8px 0 16px 0;
    text-align: center;

    opacity: 0.8;
}

.graph-canvas {
    border-left: 1px solid rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.75);
}

.graph-axis-label {
    opacity: 0.8;
}

#prompt-parent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);

    display: none;
}

#prompt {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    max-width: 20vw;

    display: flex;
    flex-direction: column;

    background-color: var(--primary-color-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);

    user-select: none;

    overflow: scroll;

    color: white;

    padding: 18px;
    border-radius: 8px;
}

#prompt p {
    margin: 0;

    text-align: center;
}

#prompt-title {
    font-size: 24px;
    padding-bottom: 12px;
}

#prompt-body {
    opacity: 70%;
    font-style: italic;
    padding-bottom: 20px;
}

#prompt-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#prompt .details-button {
    font-size: 16px;
}

.partition-button {
    margin-bottom: 8px;
}