body {
    max-height: calc(100vh - 8px);
}

main {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-size: 10pt;
}

main:has(form#sim_init:not(.hidden)) {
    align-items: center;
}

form#sim_init {
    display: block;
    max-width: 80%;
    max-height: 80%;
    height: fit-content;
    width: fit-content;
    margin: auto;
    padding: 8px;
    border: 1pt solid black;
    border-radius: 6pt;
    box-shadow: 4pt 4pt black;
}

form#sim_init h2 {
    margin: 0;
}

div#sim_main {
    display: contents;
    width: 100%;
    height: max-content;
}

form#sim_init.hidden,
div#sim_main.hidden {
    display: none;
}

div.sim-container {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 8pt;
}

div.sim-header {
    background-color: white;
    margin: 0;
    padding: 4pt;
}

div.sim-header button {
    font-weight: bold;
    padding: 4px;
    margin: 0 2px;
    font-size: small;
}

div.sim-header button:hover {
    padding: 4px 6px;
    margin: 0;
}

div.sim-header button:active {
    margin: 0 4px;
    padding: 4px 2px;
}

div.sim-header>div>h1:first-child {
    margin: 0 0 4pt;
}

div.sim-container>div:first-child>h2.label {
    margin-top: 0;
}

.no-spacing {
    margin-top: 0;
    margin-bottom: 0;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.vcenter {
    margin-top: auto;
    margin-bottom: auto;
}

.monospace {
    font-family: monospace;
}

div.popup {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #00000088;
    z-index: 10;

    flex-direction: column;
    align-items: center;
}

div.popup>div {
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 4px;
    background-color: white;
    border: 1px solid black;
    border-radius: 6px;
    box-shadow: 4pt 4pt black;
    max-width: 80%;
    max-height: 80%;
    overflow: hidden;
}

div.popup>div div.error-message {
    flex: 1;
    width: 80ch;
    max-width: 100%;
    overflow: scroll;
    padding: 10px 0 16px 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

div.popup>div div.message {
    flex: 1;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding-top: 4px;
    padding-bottom: 4px;
    overflow: scroll;
}

div.popup button.close-button {
    display: block;
    margin: 4px 0 0 auto;
}

table td {
    transition: 500ms ease all;
}

table td.updated {
    background-color: aquamarine;
}

main>div:first-child>h2.label {
    margin-top: 0;
}

table,
table th,
table td {
    border: 1px solid black;
    border-collapse: separate;
}

table td,
table th {
    text-align: right;
    padding: 0 .5ch;
}

div.table-container {
    width: fit-content;
    max-width: 80%;
    overflow-x: scroll;
    margin: 0 auto;
    border: 1px solid black;
}

div.table-container>table {
    border: none;
}

table#pipeline_table th,
table#pipeline_table td {
    min-width: 10ch;
    user-select: none;
    -webkit-user-select: none;
}

table {
    margin: 0 auto;
}

div:has(>table#register_table) {
    overflow-y: hidden;
    scrollbar-width: none;
    transition: 500ms all ease;
}

div:has(>table#register_table):hover {
    scrollbar-width: unset;
}

table#register_table {
    border: none;
    font-family: monospace;
}

div:has(>table#memory_table) {
    height: 10cm;
    overflow: scroll;
    scrollbar-width: none;
    scroll-snap-type: block mandatory;
}

table#memory_table tr {
    scroll-snap-align: end;
}

table#memory_table {
    border: none;
    font-family: monospace;
}

table#memory_table tr.header-row th {
    position: sticky;
    top: -1px;
    background-color: white;
    min-width: 3ch;
    z-index: 1;
}

table#memory_table tr:not(.header-row) th {
    position: sticky;
    left: -1px;
    background-color: white;
}

table#memory_table td {
    background-color: white;
    transition: background-color 125ms ease;
}

table#memory_table td:hover {
    background-color: #00F0F0;
    transition: background-color 125ms ease;
}

table#memory_table td:active {
    background-color: #88FFFF;
    transition: background-color 125ms ease;
}

div:has(>ul.configuration-display) {
    width: 10cm;
    max-width: 100%;
}

ul.configuration-display {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.configuration-display ul {
    list-style: none;
}

ul.configuration-display ul {
    border-left: 1px solid black;
    margin-left: 1ch;
    padding-left: 1ch;
}

div#memory_view_switcher {
    display: grid;
    grid-template-columns: auto [prev]1.5cm [label]3cm [next]1.5cm auto;
    grid-template-rows: 8mm;
    margin: 4px;
}

div#memory_view_switcher button {
    font-size: large;
    font-family: monospace;
}

div#memory_view_switcher>button#memory_view_prev {
    grid-column: prev;
}

div#memory_view_switcher>p#memory_view_pageid {
    display: block;
    grid-column: label;
    margin: auto;
    text-align: center;
}

div#memory_view_switcher>button#memory_view_next {
    grid-column: next;
}

div.form-container {
    width: 100%;
}

form#watchlist_form {
    margin: 12px auto;
    width: fit-content;
}

table#watchlist_table {
    border: 1pt solid black;
}

table#watchlist_table th,
table#watchlist_table td {
    background-color: white;
}

table#watchlist_table .address {
    cursor: pointer;
    font-family: monospace;
    font-weight: bold;
}

table#watchlist_table .address {
    display: flex;
    height: 100%;
}

table#watchlist_table .address .address-value {
    margin-left: auto;
    transition: color 250ms ease;
}

table#watchlist_table .address .remove {
    content: 'X';
    font-family: monospace;
    color: transparent;
    transition: color 250ms ease;
}

table#watchlist_table .address:hover .remove {
    color: crimson;
}

table#watchlist_table .address:hover {
    color: crimson;
}

table#watchlist_table tr th {
    min-width: 12ch;
}

form#watchlist_form label,
form#watchlist_form input,
form#watchlist_form select,
form#watchlist_form option {
    font-size: 8pt;
}

form#watchlist_form input.monospace {
    text-align: right;
}

select.h2-select {
    font-size: large;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

div#cache_view_content {
    width: max-content;
    max-width: 80%;
    max-height: 10cm;
    margin-left: auto;
    margin-right: auto;
}

div#cache_view_content:has(>table) {
    border: 1px solid black;
    overflow: scroll;
    scrollbar-width: none;
}

div#cache_view_content table {
    border: none;
}

div#cache_view_content table tr:first-child th {
    position: sticky;
    background-color: white;
    top: -1px;
    z-index: 1;
}

select {
    padding: 4px;
}