html,
body {
    background-color: var(--windowbackground);
    color: var(--fontcolor);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    --windowbackground: #f5f7f9;
    --panelbackground: #FFFFFF;
    --containerbackground: #eff1f2;
    --filebackground: #C6CFDA;
    --hoverbackground: #E0E5EE;
    --hovercolor: #EEEEEE;
    --activecolor: #E0E0E0;
    --disabledcolor: #888888;
    --disabledbackground: #EEE;
    --shadowcolor: #AAAAAA;
    --highlightcolor: #AADDFF;
    --highlightbordercolor: #2a7b8c;
    --border: 1px solid #d8dee4;
    --border2: 0.5px solid #CCC;
    --bordercolor: #CCC;
    --comboborder: 0.5px solid #EEEEEE;
    --fontcolor: #000000;
    --textcolor: #555555;
    --iconcolor: #5b6a80;
    --tooltipbackground: #333;
    --tooltipcolor: #FFF;
    --buttonhovercolor: #AADDFF;
    --buttonactivecolor: #2a7b8c;
    --buttonlight: #FAFAFA;
    --checkbox: #959ba3;
    --button: #0067c0;
    --flowchartcolor: #eee;
    /* Blocks on the highlighted path are filled with the app's accent (the same colour as a
       selected tab / the Design button), so their text and equations flip to
       --flowchartpathtextcolor. Off-path blocks keep --flowchartcolor, which is what makes the
       taken path read at a glance. */
    --flowchartpathcolor: var(--buttonactivecolor);
    --flowchartpathbordercolor: #1f5f6d;
    --flowchartpathtextcolor: #F2F7FB;
    --groupbackground: #e8eef2;
    --rangeslider: #0067c0;
    --rangesliderline: #CCC;
    --workflow-background: #13383F;
    --workflow-border: 1px solid rgba(255, 255, 255, .15);
    --tabborder: 1px solid var(--buttonactivecolor);
    /* How long the pointer must rest on a control before its tooltip appears, and how
       long the tooltip then stays on screen before dismissing itself (fades included).
       Both are deliberate house values rather than the platform ones: Windows waits
       500ms (Win32 TTDT_INITIAL) and holds for 5s (TTDT_AUTOPOP / WPF
       ToolTipService.ShowDuration). The longer wait keeps tooltips out of the way while
       the pointer crosses a toolbar; the shorter hold leaves ~2.2s fully opaque after
       the fades, which reads a short label comfortably and clips only the longest
       strings we ship. */
    --tooltipdelay: 2s;
    --tooltipduration: 3s;
    --svgfilter: brightness(0) saturate(100%) invert(35%) sepia(15%) saturate(927%) hue-rotate(176deg) brightness(96%) contrast(90%);
    --disablesvgfilter: brightness(0) saturate(100%) invert(58%) sepia(20%) saturate(328%) hue-rotate(178deg) brightness(93%) contrast(84%);
}

body.dark {
    --windowbackground: #000000;
    --panelbackground: #333333;
    --containerbackground: #222222;
    --filebackground: #C6CFDA;
    --hoverbackground: #666666;
    --hovercolor: #EEEEEE;
    --activecolor: #E0E0E0;
    --disabledcolor: #BBBBBB;
    --disabledbackground: #333333;
    --shadowcolor: #555555;
    --highlightcolor: #AADDFF;
    --highlightbordercolor: #6666CC;
    --border: 0.5px solid #444444;
    --bordercolor: #444444;
    --comboborder: 0.5px solid #EEEEEE;
    --fontcolor: #FFFFFF;
    --iconcolor: #a8b9d1;
    --tooltipbackground: #333;
    --tooltipcolor: #FFF;
    --buttonhovercolor: #336688;
    --buttonactivecolor: #AAAAFF;
    --buttonlight: #333333;
    --checkbox: #959ba3;
    --button: #0067c0;
    --flowchartcolor: #444;
    /* The dark theme's accent (--buttonactivecolor) is a light periwinkle - unusable as a block
       fill - so the path blocks take a deep shade of the light theme's accent instead. */
    --flowchartpathcolor: #1c4b57;
    --flowchartpathbordercolor: #2a7b8c;
    --flowchartpathtextcolor: #EAF2F8;
    --svgfilter: brightness(0) saturate(100%) invert(50%) sepia(15%) saturate(1200%) hue-rotate(176deg) brightness(120%) contrast(90%);
    --disablesvgfilter: brightness(0) saturate(100%) invert(58%) sepia(20%) saturate(500%) hue-rotate(178deg) brightness(93%) contrast(84%);
    scrollbar-color: #555 var(--panelbackground);
    background-color: var(--windowbackground);
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

input,
select {
    background-color: var(--panelbackground);
    color: var(--fontcolor);
    font-family: 'Segoe UI', 'Segoe UI Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

input {
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.hidden {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.full-view {
    border-radius: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.disabled {
    cursor: default !important;
    color: var(--disabledcolor);
}

.menu-container-icon img {
    cursor: pointer;
    padding: 16px 0;
    width: 24px;
    margin: 0 16px;
}

.property {
    display: flex;
    padding: 2px 8px;
}

.property-icon img {
    filter: var(--svgfilter);
    width: 20px;
}

.property-text {
    align-content: center;
    color: var(--textcolor);
    width: 50%;
}

.property-table-body .property-text {
    display: none;
}

.property.property-enum-thumbnail {
    display: block;
    padding: 2px 0 2px 8px;
}

.property-enum-thumbnail .property-text {
    margin-bottom: 8px;
    width: unset;
}

.property-enum-thumbnail .thumbnails-body {
    margin: 0;
}

.property-enum-thumbnail .thumbnails {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

.property-enum-thumbnail .thumbnail {
    cursor: pointer;
    margin: 0 !important;
    padding: 8px !important;
    vertical-align: top;
}

.property-enum-thumbnail .thumbnail.thumbnail-selected {
    background-color: var(--windowbackground);
}

.property-enum-thumbnail.readonly .thumbnail {
    cursor: not-allowed;
    opacity: 0.45;
}

.property-enum-thumbnail.readonly .thumbnail.thumbnail-selected {
    opacity: 1;
    outline: 2px solid #1A9E78;
}

.property-enum-thumbnail .thumbnail-caption {
    padding: 8px 0 0 0 !important;
}

.property-range .property-text {
    width: 10%;
}

body .property-range .property-value {
    border: none;
    display: flex;
    width: 100%;
}

.property-input-border {
    border: var(--border);
    padding: 2px 0 2px 8px;
    margin-right: 2px;
    width: calc(25% - 2px);
}

.property-range-cell {
    margin-right: 2px;
    height: 40px;
    width: 25%;
}

.property-range-cell .property-input-border {
    width: 100%;
}

.property-range .property-list-value {
    padding: 2px 4px;
}

body .property-range.fixed .property-value>input:nth-child(2) {
    display: none;
}

body .property-range.fixed .property-value>input:nth-child(3) {
    display: none;
}

body .property-range .property-value>.property-enum {
    border: var(--border);
    padding: 0;
    margin: 0;
    width: 25%;
}

body .property-range .property-value>.property-enum .property-text {
    display: none;
}

body .property-range .property-value>.property-enum .property-value {
    width: 100%;
}

body .property-range-cell .property-enum {
    border: var(--border);
    padding: 0;
    margin: 0;
    height: 23px;
}

.property-range-cell-text {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 4px;
}

.property-checkbox-thumbnail .thumbnail,
.property-checkbox-thumbnail .thumbnails,
.property-checkbox-thumbnail .thumbnails-body {
    margin: 0 !important;
    padding: 0 !important;
}

.property-checkbox-thumbnail .thumbnails {
    border: none !important;
    display: inline-block;
    vertical-align: top;
}

.property-checkbox-thumbnail .thumbnail {
    background-color: var(--windowbackground);
    cursor: pointer;
    padding: 0 8px !important;
}

.property-checkbox-thumbnail .thumbnail:first-child {
    border-radius: 4px 0 0 4px;
    border: 1px solid var(--checkbox);
}

.property-checkbox-thumbnail .thumbnail:last-child {
    border-radius: 0 4px 4px 0;
    border: 1px solid var(--checkbox);
}

.property-checkbox-thumbnail .thumbnail.thumbnail-selected {
    background-color: var(--checkbox);
}

.property-checkbox-thumbnail .thumbnail.thumbnail-selected img {
    mix-blend-mode: color-dodge;
}

.property-checkbox-thumbnail .thumbnail img {
    width: 24px;
}

.property-list {
    position: relative;
}

.property-list .property-input.disabled {
    padding: 2px 8px 3px 8px;
}

.property-list.true {
    color: var(--disabledcolor);
}

.property-list.true select {
    color: var(--disabledcolor);
}

.property-list-block {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.property-appbutton .property-value {
    border: none;
    padding: 0;
}

.property-appbutton .button {
    background-color: var(--button);
    color: var(--buttonlight);
}

.property-appbutton .button-text {
    white-space: nowrap;
}

.ribbonmenu .property-icon {
    margin-right: 8px;
}

.ribbonmenu .property {
    align-items: center;
    padding: 1px 4px;
    min-height: 24px;
}

.ribbonmenu .property-text {
    margin: 0 16px 0 4px;
    width: 50%;
    white-space: nowrap;
}

.ribbonmenu .property-value {
    height: unset;
    padding: 3px 8px;
    min-width: 120px;
}

.property-value {
    align-content: center;
    border: var(--border);
    border-radius: 4px;
    margin-right: 8px;
    padding: 4px 8px;
    width: calc(50% - 48px);
    position: relative;
}

.property-checkbox .property-value {
    border: none;
}

.property-checkbox .property-value .property-input {
    width: 16px;
    margin-left: -8px;
}

.property-checkbox .native-selection-control {
    accent-color: #2a7b8c;
    cursor: pointer;
    height: 16px;
    width: 16px;
}

.property-checkbox .native-selection-control:disabled {
    cursor: default;
}

.property-checkbox .native-selection-control:focus-visible {
    outline: 2px solid #1A9E78;
    outline-offset: 2px;
}

.property-checkbox label.property-text {
    cursor: pointer;
    white-space: normal;
}

.property-checkbox:has(.native-selection-control:disabled) label.property-text {
    cursor: default;
}

    table .property-checkbox .property-value {
        margin: 0;
        text-align: center;
    }

table .property-checkbox .property-value .property-input {
    text-align: center;
    width: unset;
}

table .property-checkbox .property-value img {
    margin-left: 0;
}

table .property-checkbox .property-value .property-input img {
    filter: brightness(100%) saturate(100%) invert(94%) sepia(8%) saturate(30%) hue-rotate(13deg) brightness(40%) contrast(91%);
    width: 16px;
}

    .property-checkbox .property-value .property-input img {
        filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(3%) hue-rotate(13deg) brightness(85%) contrast(91%);
        width: 16px;
    }

    .property-checkbox .property-value .property-input img.radio-button {
        filter: none;
    }

.property-enum .property-value,
.property-list .property-value {
    padding: 0;
}

.property-input {
    border: none;
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    white-space: nowrap;
}

.property-input.disabled {
    margin-top: -2px;
    padding: 0.5px 0;
}

.property-enum .property-input.disabled {
    padding: 4px 8px;
}

.property-table .property-input.disabled {
    color: var(--fontcolor);
}

.property-table .property-enum .thumbnail {
    background-color: var(--panelbackground);
    padding: 4px 8px !important;
}

    .property-table .property-enum .thumbnail.thumbnail-selected {
        background-color: var(--highlightcolor);
    }

.property-table .property-enum .thumbnail img {
    width: 24px !important;
    height: 24px !important;
    filter: var(--svgfilter);
}

.property-table .property-enum .thumbnails-body {
    border-radius: 8px;
    border-width: 1.5px;
    display: inline-flex;
    flex-wrap: nowrap;
    margin: 4px;
    overflow: hidden;
    white-space: nowrap;
}

div.property-input {
    background-color: transparent;
    border-radius: 4px;
}

select.property-input {
    margin: -2px -8px;
    padding: 2px 4px;
    width: calc(100% + 8px);
}

.property-info {
    align-items: center;
    border-left: none;
    display: flex;
    padding-top: 1.5px;
    padding-left: 4px;
}

.property-enum-background {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 200 !important;
}

.property-value>img {
    position: absolute;
    left: unset;
    right: 4px;
    top: 0;
    width: 18px;
    height: 18px;
}

.property-enum-options {
    background: var(--panelbackground);
    box-shadow: var(--shadowcolor) 0 0 8px;
    border: var(--border);
    position: absolute;
    margin: 4px -8px;
    max-height: 200px;
    overflow: auto;
    z-index: 1000;
}

.property-enum-options>div {
    padding: 4px 12px;
    white-space: nowrap;
}

.property-enum-options>div:hover {
    background: var(--highlightcolor);
}

.property-error {
    margin-top: -2.5px;
}

.property-remark .property-value {
    align-content: center;
    border: none;
    color: #FFF;
    display: flex;
    font-size: 10px;
    text-transform: uppercase;
    justify-content: flex-end;
}

    .property-remark .property-value img {
        display: inline-block;
        margin-right: 8px;
        width: 10px;
    }

.property-remark .property-input {
    background-color: #F00;
    display: inline-flex;
    justify-content: flex-end;
    font-weight: bold;
    padding: 2px 6px;
    width: unset;
}

.property-remark.true .property-input {
    background-color: #0A55D2;
}

.panel {
    background-color: var(--panelbackground);
    border: var(--border);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.panel-header {
    align-items: center;
    background-color: var(--panelbackground);
    border-bottom: var(--border);
    display: flex;
    font-weight: bold;
    height: 28px;
    padding: 6px 10px;
    top: 0;
    z-index: 1;
}

.panel-header img {
    filter: var(--svgfilter);
    margin-right: 8px;
    height: 20px;
}

.panel-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    bottom: 28px;
    overflow-x: clip;
    overflow-y: auto;
}

.no-header .panel-body {
    top: 0 !important;
}

.no-footer .panel-body {
    bottom: 0 !important;
}

.propertygrid-footer {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px;
}

.propertygrid-footer .button {
    background-color: var(--button);
    color: var(--buttonlight);
    height: 100%;
    flex-grow: 1;
}

/* Workflow "Complete Step" button (added by AppBase for every workflow step).
   app.css has no style for this class, so it otherwise falls back to a plain
   bordered .button (icon + text) - i.e. the "> Complete Step" text-link look.
   Give it an explicit green pill so it reads consistently across every step /
   host, matching the brand green used in the workflow chrome. */
.button.workflow-complete-step {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background-color: #1A9E78 !important;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure the label + icon stay visible on the green fill (some toolbar contexts
   hide the .button-text or dim the button until hover). */
.button.workflow-complete-step .button-text {
    color: #FFFFFF !important;
    display: inline !important;
    font-size: 13px;
    font-weight: 600;
}

.button.workflow-complete-step .button-icon img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.button.workflow-complete-step:hover {
    background-color: #22c795 !important;
    box-shadow: 0 2px 6px rgba(26, 158, 120, 0.35);
}

.button.workflow-complete-step .button-text {
    color: #FFFFFF;
}

.button.workflow-complete-step img {
    filter: brightness(0) invert(1) !important;
}

/* ---------------------------------------------------------------------------
   Learning header button (kept identical in appv2.css)
   Pill-shaped gradient link added to the app header (right toolbar) when an
   app sets AppBase.LearningURL. Selector uses 4 classes so it beats the base
   .menu-toolbar .toolbar .button rule (3).
   --------------------------------------------------------------------------- */
/* Header "Learn" / "Discuss" pair. Deliberately identical to .cm-help-btn in
   EagleI.Analysis.App/public/css/analysis-common.css so a user moving between a
   Blazor app and Beam / Frame / Truss sees the same two buttons - keep the two
   blocks in step. Built by BasePage.AddHelpToolbarButtons, gated by
   Shared.ShowLearningButton. The !important flags override the generic
   .menu-toolbar .toolbar .button rules. */
.menu-toolbar .toolbar .button.learning-button,
.menu-toolbar .toolbar .button.discuss-button {
    display: inline-flex !important;
    align-items: center;
    height: 32px !important;
    min-height: 32px !important;
    box-sizing: border-box;
    padding: 0 10px !important;
    margin: 0 6px 0 0;
    border: 1px solid #d8e0ec !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #2a7b8c !important;
    box-shadow: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.menu-toolbar .toolbar .button.learning-button:hover,
.menu-toolbar .toolbar .button.discuss-button:hover {
    background: #f0fbfd !important;
    border-color: #9fc4d1 !important;
    color: #1f5f6d !important;
    transform: none;
}

.menu-toolbar .toolbar .button.learning-button:active,
.menu-toolbar .toolbar .button.discuss-button:active {
    background: #e3f4f8 !important;
    transform: none;
}

/* Icon + label live together inside .button-text (the glyph is markup in
   UIButton.Text), so lay that out the way the analysis apps lay out the anchor. */
.menu-toolbar .toolbar .button.learning-button .button-text,
.menu-toolbar .toolbar .button.discuss-button .button-text {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    color: inherit !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.menu-toolbar .toolbar .button .help-button-icon {
    display: block;
    flex: none;
    font-size: 16px;
    line-height: 1;
}

body.dark .menu-toolbar .toolbar .button.learning-button,
body.dark .menu-toolbar .toolbar .button.discuss-button {
    background: var(--panelbackground) !important;
    border-color: #444 !important;
    color: #7fd0e0 !important;
}

body.dark .menu-toolbar .toolbar .button.learning-button:hover,
body.dark .menu-toolbar .toolbar .button.discuss-button:hover {
    background: #143657 !important;
    border-color: #4a6f80 !important;
    color: #a5e2ee !important;
}

/* Upgrade: the SPA's .acct-btn--primary, verbatim - a filled 999px pill, 28px
   tall, text only. It lives in the account cluster now (UIPage.AccountAction),
   not on the centred help toolbar, so it is sized to sit beside the account chip
   rather than to line up with Learn and Discuss. */
.menu-container-buttons .button.upgrade-button {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    /* So its tooltip anchors to the button. Without a positioned ancestor of its
       own the .tooltip's `top: 150%; left: 0` resolves against .menu-container
       and the hint appears under the app icon, half a header away. */
    position: relative;
    height: 28px;
    min-height: 28px;
    padding: 0 14px;
    border: 1px solid #2a7b8c;
    /* !important throughout this block: `.button` sets `border-radius: 16px
       !important` later in this file, and `.button:hover` / `.button:active` set
       `background-color` the same way. Without it the pill renders as a rounded
       rectangle that turns grey under the cursor. */
    border-radius: 999px !important;
    background: #2a7b8c !important;
    color: #fff;
    box-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.menu-container-buttons .button.upgrade-button:hover {
    background: #23697a !important;
    border-color: #23697a;
}

.menu-container-buttons .button.upgrade-button:active {
    background: #1d5a68 !important;
}

.menu-container-buttons .button.upgrade-button .button-text {
    margin: 0;
    color: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Dark mode inverts it - a light fill on a dark bar, matching the SPA's
   html.dark .acct-btn--primary rather than keeping a mid-teal that would sink
   into the panel. */
body.dark .menu-container-buttons .button.upgrade-button {
    background: #7fd3e3 !important;
    border-color: #7fd3e3;
    color: #06283d;
}

body.dark .menu-container-buttons .button.upgrade-button:hover {
    background: #9adfec !important;
    border-color: #9adfec;
}

/* Whichever help button ends up last keeps a small gap before the account cluster. */
.menu-toolbar .toolbar .button.learning-button:last-child,
.menu-toolbar .toolbar .button.discuss-button:last-child {
    margin-right: 0;
}

/* Centre the pair on the header rather than letting it bunch up against the
   account menu, matching where the analysis apps put theirs. Taken out of flow so
   the centre is the header's centre, not the centre of whatever space is left
   over. Scoped with :has() to toolbars that actually carry a help button, so an
   app using the right toolbar for its own controls (Clipboard's New / Export)
   keeps them right-aligned. .menu-container is positioned, so it is the
   containing block. */
.menu-right-toolbar:has(.learning-button, .discuss-button) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

/* Too narrow for a true centre to clear the app title and the account menu, so
   fall back to the right edge. */
@media (max-width: 1100px) {
    .menu-right-toolbar:has(.learning-button, .discuss-button) {
        position: static;
        transform: none;
        margin-right: 10px;
    }
}

.property-value .button {
    border: none;
    padding: 0 4px;
    position: absolute;
    right: -28px;
    top: 0;
}

.property-value .button img {
    margin: 0;
}

.property-value .button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.property-file {
    align-content: center;
    display: flex;
    min-height: 28px;
    position: relative;
}

.property-file .property-text {
    border: none;
    width: unset;
}

.property-file .property-value {
    border: none;
    margin-left: auto;
    position: relative;
    width: 180px;
}

.property-file input {
    position: absolute;
    inset: 0;
    color: transparent;
    font-size: 0;
    height: 100%;
    width: 100%;
}

.property-file input::-webkit-file-upload-button {
    visibility: hidden;
}

.property-file input::before {
    content: 'Select a file...';
    display: inline-block;
    background: linear-gradient(top, #f9f9f9, #e3e3e3);
    border: var(--border);
    border-radius: 4px;
    box-sizing: border-box;
    height: 100%;
    padding: 2px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: 1px 1px #fff;
    color: var(--fontcolor);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    width: 100%;
}

.property-file input::before {
    border: var(--border);
}

.property-file input:active::before {
    background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

/* When a file has been picked, overlay its name on top of the static
   "Select a file..." pseudo-element. pointer-events: none lets clicks pass
   through to the underlying <input type="file"> so picking a different file
   still works. */
.property-file .property-file-name {
    position: absolute;
    inset: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 8px;
    border: var(--border);
    border-radius: 4px;
    background: linear-gradient(to bottom, #f9f9f9, #e3e3e3);
    color: var(--fontcolor);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    text-shadow: 1px 1px #fff;
}

.equation-visualizer .property-file .property-text {
    width: 50%;
}

.equation-visualizer .property-file .property-value {
    margin-left: 0;
    margin-right: 8px;
    width: calc(50% - 48px);
}

.tooltip {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 4px;
    box-shadow: var(--shadowcolor) 0 0 8px;
    cursor: pointer;
    padding: 6px 10px;
    top: 150%;
    left: 0;
    position: absolute;
    width: max-content;
    z-index: 1;
    visibility: hidden;
    /* Hidden by default */
    opacity: 0;
    /* Start with 0 opacity for fade effect */
    transition: opacity 0.2s;
    /* Plays when the pointer leaves; the fade IN belongs to the animation below */
}

/* Tooltips wait before appearing and then dismiss themselves, instead of showing at once
   and sitting under the pointer for as long as it rests there. The wait, the fade in, the
   hold and the fade out are one animation, tied to --tooltipdelay and --tooltipduration.
   A CSS animation overrides the plain "visibility: visible; opacity: 1" the :hover rules
   declare, whatever their specificity, so those rules are left alone and only need the
   animation attached.

   The fill mode has to be "both", not "forwards". Backwards fill is what holds the 0%
   keyframe - hidden - through the delay; without it the :hover rules would win for those
   two seconds and the tooltip would flash up immediately, then fade in a second time.
   Forwards fill holds the hidden end state for as long as the pointer stays put - moving
   off the control and back restarts the animation, which is how a tooltip is summoned
   again.

   0% and 1% differ only in visibility so the flip happens while opacity is still 0:
   visibility cannot interpolate, it steps at the midpoint of whichever interval it
   changes across, and that midpoint needs to be somewhere invisible.

   Note this is a deliberate departure from WCAG 2.1 SC 1.4.13 (Content on Hover or Focus),
   which asks hover content to persist until dismissed. Every tooltip here is supplementary
   to a visible icon or label rather than the only carrier of its information. */
@keyframes tooltip-show-then-hide {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    1% {
        opacity: 0;
        visibility: visible;
    }

    13% {
        opacity: 1;
        visibility: visible;
    }

    87% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Every selector that shows a .tooltip on hover - Blazor buttons, the JS FrameWork
   buttons that share the markup, tab headers and the parameter error popover. */
.button:hover .tooltip,
.property-value .button:hover .tooltip,
.property-groups-tab-header-item:hover .tooltip,
.property-error:hover .tooltip {
    animation: tooltip-show-then-hide var(--tooltipduration) ease-in-out var(--tooltipdelay) both;
}

.statusbar-container .tooltip {
    bottom: 32px;
    top: unset;
    z-index: 1000;
}

.statusbar-container .button {
    margin: 0px 2px;
}


.treeview-node-toolbar .tooltip {
    left: unset;
    right: 0;
    top: unset;
    bottom: 32px;
}



.button {
    align-items: center;
    /* Vertical alignment */
    justify-content: center;
    /* Horizontal alignment */
    text-align: center;
    border: var(--border);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    min-height: 24px;
    padding: 4px;
}

.button i {
    color: var(--iconcolor);
    font-size: 20px;
}

.button:hover {
    background-color: var(--buttonhovercolor) !important;
}

.button:active {
    background-color: var(--highlightcolor) !important;
}

.button.toggle {
    border: var(--border) !important;
}

.button.highlight {
    background-color: var(--highlightcolor) !important;
}

.button img {
    align-content: center;
    filter: var(--svgfilter);
    margin: 0 2px 0 2px;
    height: 20px;
    width: 20px;
}

    .button .text {
        margin-left: 8px;
    }

    .button.no-filter img {
        filter: none !important;
    }

.button>a {
    color: var(--fontcolor);
    text-decoration: none;
    display: flex;
}

.button>a>.button-text {
    white-space: nowrap;
}

.right-toolbar .button .text {
    white-space: nowrap;
}

.right-toolbar {
    position: absolute;
    right: 8px !important;
    top: 0;
    width: unset !important;
}

.right-toolbar .button .tooltip {
    right: 0;
    left: unset;
}

/* WF-001: hide right-toolbar icons when running inside Workflow Manager */
body.workflow .right-toolbar {
    display: none !important;
}

/* Keep the center toolbar - which holds the workflow "Complete Step" button - visible
   inside the Workflow iframe. The iframe is narrower than the browser, so it triggers
   the "@media (max-width:1200px) { .menu-center-toolbar .toolbar { display:none } }"
   rule below and the step would otherwise have no way to complete. Force it back on
   (and off the responsive hide) whenever we're running as a workflow step. */
body.workflow .menu-center-toolbar,
body.workflow .menu-center-toolbar .toolbar {
    display: flex !important;
}

/* Right-align the Complete Step button in workflow mode so it sits in the same
   top-right position as the Beam Analysis (SPA) step. The center toolbar normally
   centers itself with "margin: 0 auto"; pushing margin-left to auto (with the
   right-toolbar hidden in workflow) sends it to the right edge. */
body.workflow .menu-center-toolbar {
    margin-left: auto !important;
    margin-right: 8px !important;
}

#workflow-complete-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 10px 20px;
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.toolbar .button .property-group-list-body .property-icon {
    display: flex;
    padding: 2px 8px 2px 0px;
}

.toolbar .button .property-group-list-body .property {
    padding: 2px 16px 2px 8px;
}

.toolbar .button .property-input {
    width: 60px;
}

.button-text {
    align-content: center;
    margin: 0 8px;
}

.button.large {
    display: block;
    min-height: 48px;
    padding: 0px 4px;
}

.button.large img {
    height: unset;
    width: 42px;
}

.button.checked {
    background-color: var(--windowbackground) !important;
    border-color: var(--border);
}

.button.disabled {
    background-color: var(--disabledbackground);
    color: var(--disabledcolor);
    cursor: default;
}

.button.disabled:hover {
    background-color: var(--disabledbackground) !important;
}

.button.toggle {
    height: 23px;
    margin-bottom: 2px;
}

.button.toggle img {
    margin: 3px 2px 0 2px;
}

.button.disabled img {
    filter: var(--disablesvgfilter);
}

.button.large .button-icon {
    text-align: center;
}

.button:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.toolbar-separator {
    border-right: var(--border) !important;
    display: inline-flex;
    height: 32px;
    width: 1px;
    margin: 0 8px;
}

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

.toolbar {
    display: flex;
}

.toolbar .button {
    border: none;
    border-radius: 0;
}

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    outline: none;
}

.canvas.has-toolbar canvas {
    top: 43px;
    bottom: 0;
    height: calc(100% - 43px);
}

.canvas.has-statusbar canvas {
    bottom: 43px;
    height: calc(100% - 43px) !important;
}

.canvas.has-toolbar.has-statusbar canvas {
    height: calc(100% - 86px) !important;
}

.canvas2d,
.canvas3d {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.canvas2d .toolbar,
.canvas3d .toolbar {
    background-color: var(--panelbackground);
    border-bottom: var(--border);
    position: absolute;
    top: 0;
    height: 43px;
    width: 100%;
}

/* Beams M11 Model-tab toolbar.

   The controls need no rules of their own: '.viewer-container>.toolbar' already renders
   the flat full-width strip (43px, bottom border) that the Report and table toolbars use,
   and the shared '.viewer-container .toolbar .property*' styles lay the dropdowns and
   checkboxes out inside it. Only two things are declared here, both keyed on
   .beams-model-bar so they cannot reach another app's canvas.

   (The Slab M53 3D toolbar needs nothing at all - '.canvas3d-container>.toolbar' already
   carries the background and '.canvas3d.has-toolbar' the offset.) */
.viewer-container > .toolbar.beams-model-bar {
    background-color: var(--panelbackground);
}

/* Beam-line names run long - "Story10 - Grid 1 (X)" splits to "Grid 1 (X)", and the
   no-grid fallback reads "Y=21945.6 (X)" - so widen that one value box past the 100px
   toolbar default. The storey list ("Story10") fits the default. */
.toolbar.beams-model-bar .model-set-line .property-value {
    width: 150px;
}

/* Export is the action a drawing tab exists for, so it carries the app accent (the
   same fill as Update Model / .button-highlight) instead of the toolbar's flat
   icon-button look. Icon and label are forced white over that fill - .button img
   otherwise takes --svgfilter, a mid-slate that disappears on it. */
.toolbar.beams-model-bar .button.beams-model-export {
    background-color: var(--buttonactivecolor);
    border-color: var(--buttonactivecolor);
    border-radius: 8px;
    padding: 4px 10px 4px 6px;
}

.toolbar.beams-model-bar .button.beams-model-export .button-text {
    color: #FFF;
    font-weight: 600;
    white-space: nowrap;
}

.toolbar.beams-model-bar .button.beams-model-export img {
    filter: brightness(0) invert(1);
}

.toolbar.beams-model-bar .button.beams-model-export:hover {
    background-color: var(--buttonactivecolor) !important;
    box-shadow: 0 2px 6px var(--shadowcolor);
}

/* The dark theme's --buttonactivecolor is a light periwinkle, so white-on-accent
   inverts there: the label and glyph go dark instead. */
body.dark .toolbar.beams-model-bar .button.beams-model-export .button-text {
    color: #1a1a1a;
}

body.dark .toolbar.beams-model-bar .button.beams-model-export img {
    filter: brightness(0);
}

/* .tooltip is a child of the button, drawn on --panelbackground - it must keep the
   normal font colour rather than the on-accent white, or it reads as an empty box. It
   also has to hang from its right edge: these buttons sit at the end of the strip, and
   the default left:0 runs a 200px tooltip off the panel. */
.toolbar.beams-model-bar .toolbar-menu .button .tooltip {
    color: var(--fontcolor);
    left: unset;
    right: 0;
}

/* Display-toggle dropdown. Drops clear of its own button rather than overlapping it
   (the shared .toolbar-menu rule anchors popovers a flat 24px down, which lands inside
   a button that carries a text label), and lets the checkbox labels keep their full
   text - "Reinforcement Length" does not fit the 100px .property-text default. */
.toolbar.beams-model-bar .button.beams-model-display .property-list-container {
    padding: 8px 12px;
    top: calc(100% + 6px);
}

.toolbar.beams-model-bar .button.beams-model-display .property-list-container .property {
    align-items: center;
    display: flex;
    white-space: nowrap;
}

.toolbar.beams-model-bar .button.beams-model-display .property-list-container .property-text {
    margin: 0;
    width: unset !important;
}

.canvas2d .canvas-input {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 8px;
    box-shadow: 0 0 4px var(--shadowcolor);
    padding: 8px 10px;
    position: absolute;
    left: 50%;
    top: 50%;
}

.canvas-input div:first-child {
    font-weight: 500;
    margin-bottom: 4px;
}

.canvas-input div:nth-child(2) {
    background-color: var(--panelbackground);
    border: var(--border);
    padding: 4px 8px;
}

.canvas-input input {
    border: none !important;
}

mjx-container[jax="CHTML"][display="true"] {
    text-align: left !important;
}

.map {
    background-color: var(--panelbackground);
    box-shadow: #AAAAAA 0 0 8px;
    border: var(--border);
    border-radius: 8px;
    position: absolute !important;
    left: 100px !important;
    right: 100px !important;
    top: 100px !important;
    bottom: 100px !important;
    max-width: 1200px;
    max-height: 800px;
    margin: auto;
    overflow: hidden;
}

.map .icon {
    cursor: pointer;
    justify-content: unset;
    position: absolute;
    right: 6px;
    top: 3px;
    width: 20px;
}

.map .panel-header {
    border: none;
}

.map .panel-header-text {
    margin-top: 1px;
}

.input input,
.input select {
    border: var(--border);
    color: var(--fontcolor);
    outline: none;
    padding: 8px 0;
    width: 100%;
}

.input.with-unit>div:nth-child(3) {
    margin-left: 8px;
    width: 40px;
}

.picturebox {
    max-width: 100%;
}

.property-group-body .picturebox {
    max-height: 256px;
    margin: 0 auto;
    justify-content: center;
}

.picture-container {
    display: flex;
}

.thumbnails {
    background-color: var(--windowbackground);
    padding: 4px;
}

.thumbnail {
    display: inline-block;
    padding: 4px;
    margin: 4px;
}

.thumbnail:hover {
    outline: var(--border);
}

.thumbnail.disabled:hover {
    outline: none;
}

.thumbnail img {
    mix-blend-mode: multiply;
    margin: 0 auto;
    display: block;
    width: 100px;
}

.thumbnail-caption {
    text-align: center;
}

.thumbnails-text {
    padding: 2px 8px;
    text-align: left;
}

.thumbnails-body {
    border: var(--border);
    margin: 4px 8px;
}

.thumbnail.true {
    background-color: var(--panelbackground) !important;
}

.thumbnails.true .thumbnails-body {
    border: none;
    margin: 0;
}

.property-group-body .thumbnails {
    background-color: var(--panelbackground);
    margin: 4px 0;
}

.property-group-body .small-thumbnails .thumbnails .thumbnail {
    margin-right: 0cqh!important;
    padding: 4px 8px !important;
}

.property-group-body .small-thumbnails .thumbnails .thumbnail img {
    width: 24px !important;
    height: 24px !important;
    filter: var(--svgfilter);
}

    .property-group-body .thumbnails .thumbnail {
        align-self: stretch;
        border-top: var(--border);
        border-bottom: var(--border);
        border-right: var(--border);
        cursor: pointer;
        margin-bottom: 8px !important;
    }

    .property-group-body .thumbnails .thumbnail:first-child {
        border-radius: 8px 0 0 8px;
        border-left: var(--border);
    }

        .property-group-body .thumbnails .thumbnail:last-child {
            border-radius: 0 8px 8px 0;
            border-right: var(--border);
        }

.property-group-body .thumbnails-body {
    border: none !important;
    display: flex;
    flex-wrap: wrap;
}

.property-group-body .thumbnails-text {
    font-weight: bold;
}

.property-group-body .thumbnail.true {
    background-color: var(--windowbackground) !important;
}

.property-groups-tab-header {
    background-color: var(--panelbackground);
    display: flex;
    padding: 4px;
}

.property-groups-tab-header-item {
    position: relative;
}

.property-groups-tab-header-item .tab-icon {
    cursor: pointer;
    padding: 4px 8px;
}

.property-groups-tab-header-item .tab-icon img {
    width: 24px;
}

.property-groups-tab-header-item.selected {
    background-color: var(--highlightcolor);
    border-radius: 4px;
}

.property-groups-tab-header-item:hover .tooltip {
    visibility: visible;
    opacity: 1;
    z-index: 1000;
}

.border-left {
    border-left: var(--border) !important;
}

.border-right {
    border-right: var(--border) !important;
}

.border-bottom {
    border-bottom: var(--border) !important;
}

.border-top {
    border-top: var(--border) !important;
}

.toolbar-container {
    background-color: var(--panelbackground);
    border-bottom: var(--border);
    color: var(--C050);
    display: flex;
    height: 43px;
}

.statusbar-container {
    background-color: var(--panelbackground);
    border-top: var(--border);
    color: var(--C050);
    display: flex;
    height: 43px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 10;
}

.toolbar {
    align-items: center;
    display: inline-flex;
    padding-left: 8px;
}

.toolbar .button {
    align-items: center;
    background-color: var(--panelbackground);
    border-radius: 8px !important;
    color: var(--C50);
    display: inline-flex;
    position: relative;
    padding: 4px 6px;
    vertical-align: top;
}

.viewer-container .toolbar .button {
    border-radius: 4px !important;
}


.toolbar .button.hidden {
    display: none !important;
}

.toolbar .button:hover {
    color: var(--HIGHLIGHT);
}

.toolbar .button:active {
    background-color: var(--C900);
    color: var(--ACTIVE);
}

.toolbar .button .property-list-container>.button {
    background-color: var(--button);
    border-radius: 8px;
    color: var(--buttonlight);
    margin: 8px 8px 0 8px;
    width: calc(100% - 16px);
}

.toolbar .button .property-list-container {
    border-radius: 0 8px 8px 8px;
    overflow: hidden;
}

.toolbar .input {
    align-items: center;
    display: inline-flex;
    height: 32px;
    margin: 0;
}

.toolbar .input.inline {
    padding: 0 8px;
    vertical-align: top;
}

.toolbar .input select {
    background-color: var(--containerbackground);
    cursor: pointer;
    padding: 4px 8px;
    width: 120px;
}

.toolbar .button.dropdown-button {
    height: unset;
    padding: 0;
    margin: 0 4px;
}

.toolbar .property .property-text {
    width: 80px;
    white-space: nowrap;
}

.toolbar .property.property-checkbox .property-text {
    display: block;
    width: unset;
    white-space: nowrap;
}

.toolbar .property.property-checkbox .property-value {
    width: unset;
    margin-left: 8px;
}

.toolbar .property .property-value-group {
    width: unset;
}

.toolbar .property .property-value {
    width: 100px;
}

.split-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.split-container>div {
    position: absolute;
}

.split-container>div:nth-child(2) {
    background-color: var(--bordercolor);
    cursor: col-resize;
    text-align: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 1;
}

.report .split-container>div:nth-child(1) {
    height: 43px !important;
}

.report .split-container>div:nth-child(2) {
    top: 43px !important;
}

.report .split-container>div:nth-child(3) {
    top: 44px !important;
}

@keyframes progress {
    0% {
        --percentage: 0;
    }

    100% {
        --percentage: var(--value);
    }
}

@property --percentage {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

[role="progressbar"] {
    --percentage: var(--value);
    --primary: #369;
    --secondary: #adf;
    --size: 100px;
    animation: progress 1s 0.5s forwards;
    width: var(--size);
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    margin: calc(50% - 50px) auto;
}

[role="progressbar"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
    mask: radial-gradient(white 55%, transparent 0);
    mask-mode: alpha;
    -webkit-mask: radial-gradient(#0000 55%, #000 0);
    -webkit-mask-mode: alpha;
}

[role="progressbar"]::after {
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: var(--primary);
}

.property-group {
    margin: 0 8px;
}

.property-group {
    border: var(--border);
    border-radius: 4px;
    margin-bottom: 8px;
    margin-top: 8px;
}

.property-group.false {
    border: none;
}

.center-panel .tab-body .property-group {
    background: var(--panelbackground);
    border: var(--border);
    margin: 4px;
    padding: 0;
}

.center-panel .property-group .property-group-header {
    background: var(--groupbackground) !important;
    border-radius: 8px 8px 0 0;
    border: none;
    border-bottom: var(--border);
    margin: 0;
    padding: 0 8px !important;
    height: 42px;
}

.default.property-group .thumbnails {
    margin: 8px;
}

.line .property-group,
.plain .property-group {
    border: none;
    margin: 0;
}

.property-group .property-group-header {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-weight: bold;
    position: relative;
}

.property-group .property-group-header {
    background-color: var(--windowbackground);
    border-bottom: var(--border);
    padding: 4px 8px;
}

.line .property-group .property-group-header {
    background-color: transparent;
    border-bottom: var(--border);
    padding: 4px 8px !important;
}

.plain .property-group .property-group-header {
    background-color: transparent;
    border-bottom: none;
    padding: 4px 8px !important;
}

.property-group .property-group-header {
    border-bottom: var(--border);
    padding: 6px 8px;
}

.property-group-header img {
    cursor: pointer;
    width: 20px;
}

.property-group .property-group-body {
    padding: 0;
}

.property-group-body .table {
    margin: 0;
}

.line .property-group .property-group-body {
    padding: 8px !important;
}

.plain .property-group .property-group-body {
    padding: 8px !important;
}

.property-group.false>.property-group-body {
    padding: 0 !important;
}

.property-group .property-group-header img {
    filter: var(--svgfilter);
    position: absolute;
    right: 8px;
}

.line .property-group .property-group-header img,
.plain .property-group .property-group-header img {
    position: relative;
    right: 0;
}

.line .property-group .property-group-header img {
    position: relative;
    right: 0;
}

.line .property-group .property-group .property-group-header img {
    position: static;
}

.property-group .property-group-header-text {
    margin-left: 4px;
    width: 100%;
}

.property-group .property:first-child {
    margin-top: 8px;
}

.property-group .property-table .property:first-child {
    margin-top: 0;
}

/* Same exemption for the Slab M53 canvas groups (MakeCanvasGroup tags them .slab-view),
   whose 3D toolbar carries the display checkboxes. The 8px above is stacked-row spacing for
   a group body; inside a toolbar it only pushes the first control out of line with the rest
   of the row. Scoped to .slab-view rather than every .property-group .toolbar so no other
   app's grouped toolbar is re-spaced by it. */
.property-group.slab-view .toolbar .property:first-child {
    margin-top: 0;
}

.property-group .property-table .property:last-child {
    margin-bottom: 0;
}

.property.property-table-body {
    display: block;
}

.treeview-node {
    padding: 2px 0 2px 20px;
}

.treeview-node .treeview-node-header {
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 0 -20px;
    padding: 4px 8px;
}

.treeview-node .treeview-node .treeview-node-header {
    font-weight: normal;
}

.treeview-node.highlight>.treeview-node-header {
    background-color: var(--highlightcolor);
}

.treeview-node-toolbar>div,
.group-toolbar>div {
    position: absolute;
    right: 4px;
    top: 4px;
    display: flex;
}

.group-toolbar>div {
    top: -4px;
    right: 32px;
}

.treeview-node-toolbar .button,
.group-toolbar .button {
    border: none;
    padding: 0;
    margin: 0 4px;
}

.group-toolbar .button {
    justify-content: left;
    font-size: 11px;
    padding: 2px 4px;
    width: unset;
    text-align: left;
}

.group-toolbar .button.ai-button {
    background-color: #006496 !important;
    border-radius: 8px !important;
    color: #FFF;
}

.group-toolbar .button .button-text {
    font-weight: normal;
    margin-left: 2px;
    white-space: nowrap;
}

.group-toolbar .button .button-icon {}

.group-toolbar .button .button-icon img {
    position: unset;
    width: 20px;
}


.group-toolbar .button .tooltip {
    left: unset;
    right: 0;
}

.group-toolbar .button:hover {
    background-color: none !important;
}

.treeview-node:last-child {}

.property-table table {
    border-collapse: collapse;
}

.property-table .property {
    padding: 0 0 0 0 !important;
}

.datagrid .property-table .property {
    display: unset;
    padding: 0 !important;
}

.datagrid .property-table .property.display {
    background-color: var(--highlightcolor);
}

.datagrid .property-table .property.display .property-value {
    padding: 0 8px !important;
}

.property-table .property-value {
    border: none !important;
    border-radius: 0;
    height: unset;
    padding: 6px 8px;
    margin: 0;
    min-width: 64px;
    width: 100% !important;
}

.property-table .property-enum .property-value {
    padding: 0;
}

.property-table .property-list .property-value {
    padding: 4px 8px;
}

.property-group-body .canvas-container {
    border: var(--border);
    position: relative;
    width: 100%;
    height: 300px;
}

.property.property-table th:last-child {
    min-width: 0 !important;
    z-index: 4 !important;
}

.beam-sections .property.property-table th:nth-last-child(2) {
    min-width: 0 !important;
    z-index: 4 !important;
}

.beam-sections .datagrid .property.property-table tr:nth-child(2) th:nth-last-child(2),
.beam-sections .datagrid .property.property-table td:nth-last-child(2) {
    outline: var(--border2);
    position: sticky;
    right: 59px;
    min-width: 60px;
}

.datagrid .property.property-table th:last-child,
.datagrid .property.property-table td:last-child {
    position: sticky;
    right: 0;
    min-width: 60px;
    z-index: 3;
}

/* Moment-Curvature data table: opt out of the right-pinned last column above.
   UIDataGrid.Class lands on the OUTER .datagrid-container div while .datagrid is on the
   inner one, so the old `.mc-table.datagrid` (both classes on ONE element) never matched
   and the sticky rule stayed live - pinning a 60px block over the real last column at
   z-index 3. Same shape as the .m17-member-grid rule below. */
.mc-table.datagrid-container .datagrid .property.property-table th:last-child,
.mc-table.datagrid-container .datagrid .property.property-table td:last-child {
    position: static !important;
    right: auto !important;
    z-index: auto !important;
}

.m17-member-grid.datagrid-container .datagrid .property.property-table th:last-child,
.m17-member-grid.datagrid-container .datagrid .property.property-table td:last-child {
    position: static !important;
    right: auto !important;
    z-index: auto !important;
}

.datagrid .property.property-table th:last-child,
.datagrid .property.property-table td:last-child {
    outline: var(--border2);
}

.property.property-table td:last-child {
    background-color: var(--panelbackground);
}

.beam-sections .property.property-table td:nth-last-child(2) {
    background-color: var(--panelbackground);
}

.table-header {
    margin: 8px 0 8px 16px;
}

.property.property-table .button {
    border-radius: 4px !important;
}

.property.property-table .button.add-button {
    max-width: 36px;
    margin: 2px auto;
}

.property.property-table .button:hover {
    font-weight: bold;
}

.property-group .property-table {
    border: var(--border);
    position: relative;
    left: 0;
    right: 0;
    overflow: auto;
    margin: 4px 8px;
    max-height: 800px;
    padding: 0 !important;
}

.property-table-header {
    display: flex;
    margin-top: 4px;
}

    .property-table-header .button {
        border: none;
    }

    .property-table table {
        border: var(--border);
    }

.property-table th {
    background: var(--windowbackground);
    border: var(--border);
    padding: 4px 14px;
}

.property-table td {
    border: var(--border);
    padding: 0;
    white-space: nowrap;
}

.datagrid .property-table .empty-cell {
    background-color: #F8F8F8 !important;
    border: 0.5px solid #DDD !important;
    outline: none !important;
    height: 24px;
}

.property-table th:last-child,
.property-table td:last-child {
    border-right: none;
}

.property-table th {
    border-top: none;
}

.property-table .property {
    min-width: 78px;
}

.property-table .dt-container {
    width: 100%;
}

.property-group-body.false {
    display: none;
    height: 0;
    overflow: hidden;
    padding: 0;
}

.datagrid .property-table td:nth-child(1),
.datagrid .property-table th:nth-child(1) {
    position: sticky;
    left: -1px;
    min-width: 36px;
    width: 36px;
    text-align: center;
    z-index: 2;
}

.datagrid .property-table td:nth-child(1),
.datagrid .property-table th:nth-child(1) {
    outline: var(--border2);
}

.datagrid .property-table th:nth-child(1) {
    z-index: 5 !important;
}

.datagrid .property-table th:nth-child(1) {
    background-color: var(--panelbackground);
    z-index: 3 !important;
}

.property-table thead {
    z-index: 5;
}

.datagrid .property-table thead th {
    background-color: var(--panelbackground);
    position: sticky;
    top: -1px;
    z-index: 2 !important;
}

.property-table .no-paging thead th {
    position: unset;
}

.property-table-body {
    width: 100%;
}

.table-page {
    min-height: 24px;
}

.table-page,
.table-page-buttons {
    align-items: center;
    display: flex;
}

.table-page-summary {
    margin: 0 0 0 16px;
}

.table-page-buttons {
    position: absolute;
    right: 24px;
}

.table-page-buttons .button {
    border-radius: 4px !important;
    height: 24px !important;
    padding: 0px 4px;
    margin-left: 4px;
}

.table-page .property-enum {
    margin-left: 4px;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100px;
}

.datagrid .table-page .property-enum {
    margin-top: 4px !important;
}

.table-page .property-enum .property-text {
    display: none;
}

.table-page .property-enum .property-value {
    height: 24px !important;
    margin-right: 0;
    vertical-align: top;
    width: 100%;
}

.property-table table {
    width: 100%;
}

.property-group-header-text {
    margin-left: 8px;
}

.property-group .property {
    padding: 2px 0 2px 12px;
}

.property-group .property-group {
    margin: -8px;
}

.property-group-body .property-groups {
    margin-bottom: 8px;
}

.property-group-body .property-groups:last-child {
    margin-bottom: 0;
}

.property-group.true .property-group .property-group-header {
    border-bottom: var(--border) !important;
    color: var(--fontcolorlight);
    font-size: 12px;
    padding: 10px 0 !important;
}

.property-group.true .property-group .property-group {
    background-color: var(--containerbackground);
    border-radius: 8px;
    margin: 8px;
}

    .property-group.true .property-group .property-group .property-group-header {
        border-bottom: none !important;
    }

.property-groups>.property-group .property-group-header {
    border-bottom: var(--border);
}

.property-group .paragraph {
    padding: 8px 12px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* -----   BeamsExcelApp template instructions   -----
   Lays out each UIParagraph in the "Load Model From Excel" group as a
   compact row: small icon on the left, text on the right. Scoped to
   .import-model so other UIParagraph usages (reports, etc.) are unaffected. */
.import-model .paragraph {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 6px 12px;
}

    .import-model .paragraph-icon {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        height: 24px;
        justify-content: center;
        width: 24px;
    }

        .import-model .paragraph-icon img {
            display: block;
            height: 24px;
            width: 24px;
        }

    .import-model .paragraph-text {
        flex: 1;
        font-size: 13px;
        line-height: 1.4;
    }

    /* Separate the "Download Exporter" step from the upload step below it. */
    .import-model .button.import-download {
        margin-bottom: 16px;
    }

.radio-buttons {
    text-align: center;
}

.property-checkbox.inline-buttons {
    align-items: center;
    border-top: var(--buttonborder) !important;
    border-bottom: var(--buttonborder) !important;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    text-align: center;
    padding: 4px 0;
}

    .property-checkbox.inline-buttons.inline-buttons-selected {
        background-color: var(--button) !important;
        color: #FFF;
    }

    .property-checkbox.inline-buttons:first-child {
        border-radius: 8px 0 0 8px;
        border-left: var(--buttonborder) !important;
    }

    .property-checkbox.inline-buttons:last-child {
        border-radius: 0 8px 8px 0;
        border-right: var(--buttonborder) !important;
    }

    .property-checkbox.inline-buttons .radio-button {
        display: none;
    }

.tab {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.tab-header {
    align-items: center;
    background-color: var(--panelbackground);
    border: var(--border);
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 64px;
}

.tab-header-item {
    cursor: pointer;
    padding: 0 12px;
    height: 100%;
}

.tab-header-item img {
    display: block;
    margin: 12px auto 0 auto;
    width: 24px;
}

.tab-header-item.selected {
    background-color: var(--highlightcolor);
    font-weight: bold;
}

.tab-header-text {
    display: block;
    margin-top: 4px;
}

.tab-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    bottom: 0;
    overflow: auto;
}

input[readonly] {
    cursor: default;
    color: #888;
}

.ribbonmenu-column .button {
    border: none;
    justify-content: start;
    min-height: unset;
    margin-bottom: 2px;
    padding: 0px 4px;
    text-align: left;
}

.ribbonmenu-column .button.large {
    margin-right: 4px;
    margin-top: 4px;
    padding: 0px 2px 4px 2px;
}

.ribbonmenu-column .button.toggle {
    padding: 4px;
}

.thumbnails.tower-type {
    border: none;
    margin: -8px !important
}

.scale {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 16px;
}

.scale table {
    border-collapse: collapse;
    height: 100%;
    width: 100%;
}

.scale td {
    position: relative;
}

.scale td:hover {
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 4px);
}

.scale td:hover .scale-text {
    background-color: #333;
    border-radius: 4px;
    color: #FFF;
    display: block;
    padding: 2px 8px;
    z-index: 10;
    top: unset;
    bottom: 30px;
}

.scale-text {
    display: none;
    position: absolute;
    top: -16px;
    white-space: nowrap;
}

.scale td:first-child .scale-text {
    left: 8px;
}

.scale td:last-child .scale-text {
    text-align: right;
    right: 8px;
}

.scale .scale-text.align-right {
    text-align: right;
    right: 8px;
}

.scale-text.breakpoint {
    border-left: 2px solid #000;
    font-weight: bold;
    padding-left: 4px;
}

.scale-text.align-right.breakpoint {
    border-left: none;
    border-right: 2px solid #000;
    padding-left: 0;
    padding-right: 4px;
    margin-right: 8px;
}

.scale-text.show {
    display: block;
}

.scale td.thin {
    background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 4px);
}


.scale td.thin:first-child .scale-text,
.scale td.thin:last-child .scale-text {
    background-color: #0067c0;
    border-radius: 4px;
    color: #FFF;
    bottom: 36px;
    top: unset;
    padding: 0 6px 2px 6px;
}

.elastic-stresses .center-panel .scale-text {
    font-size: 10px;
}

.canvas2d.has-toolbar .legend {
    top: 48px;
}

.legend {
    position: absolute;
    top: 8px;
    right: 0;
}

.legend table {
    border-collapse: collapse;
    margin-right: 16px;
}

/* ---- Legend corner (LegendObject.Position) ----
   The legend is painted over the drawing with no background, so on a chart whose curve
   climbs into the top-right it sits on top of the data. C# picks a corner through
   LegendObject.Position and framework.ts turns it into one of the three classes below;
   LegendPosition.TopRight emits NO class, so every canvas that does not opt in is styled
   by the two rules above exactly as before.

   The table's 16px inset is mirrored for the left-hand corners, which keeps the header
   flush with the outer edge and the swatch table indented, the same way round as the
   default. */
.legend.legend-top-left,
.legend.legend-bottom-left {
    left: 0;
    right: auto;
}

.legend.legend-top-left table,
.legend.legend-bottom-left table {
    margin-left: 16px;
    margin-right: 0;
}

.legend.legend-bottom-left,
.legend.legend-bottom-right {
    top: auto;
    bottom: 8px;
}

/* `.canvas2d.has-toolbar .legend` above pushes the legend down to clear the toolbar. It
   outranks a plain `.legend.legend-bottom-*` (three classes to two), so a bottom-anchored
   legend has to undo `top` at matching specificity or it would be stretched between
   top: 48px and bottom: 8px. */
.canvas2d.has-toolbar .legend.legend-bottom-left,
.canvas2d.has-toolbar .legend.legend-bottom-right,
.canvas3d.has-toolbar .legend.legend-bottom-left,
.canvas3d.has-toolbar .legend.legend-bottom-right {
    top: auto;
}

.legend .legend-header {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 4px;
}

.legend .legend-unit {
    border-bottom: var(--border);
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.legend td {
    padding: 4px;
}

.legend td:first-child {
    width: 24px;
}

.legend td:nth-child(2) {
    padding-left: 8px;
}

/* ---- Circle legend swatch (ColorValue.Shape / LegendObject.Shape = Circle) ----
   Opt-in per legend item from C#; framework.ts then paints an inner dot instead of the
   cell background, so rectangle swatches - every legend that does not opt in - are
   untouched. The dot carries its own size because an empty div has no height, and the
   cell keeps its 24px column width so circle and rectangle rows still line up. */
.legend td.legend-swatch-circle {
    background-color: transparent;
}

.legend td.legend-swatch-circle .legend-swatch-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin: 0 auto;
}


.treeview-node-icon {
    filter: var(--svgfilter);
    width: 20px;
}

.ribbon-menu-file {
    background-color: var(--windowbackground);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
}

.file-header {
    padding-top: 8px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
}

.file-body {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 8px 0 0 0;
    position: absolute;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.file-body h1 {
    color: var(--iconcolor);
    font-size: 18px;
    padding: 24px 24px 8px 32px;
}

.file-body h2 {
    color: var(--iconcolor);
    font-size: 16px;
    margin: 0 0 24px 0;
    padding: 0;
}

.home-page.thumbnails {
    background-color: #eff2f5;
    border-top: var(--border);
    border-bottom: var(--border);
    padding: 16px;
}

.home-page.thumbnails .thumbnail {
    background-color: var(--panelbackground);
    border: var(--border);
    cursor: pointer;
    margin: 4px 8px;
}

.home-page.thumbnails .thumbnail:first-child {
    margin-left: 4px;
}

.home-page.thumbnails .thumbnail-caption {
    color: #737577;
    font-weight: bold;
    padding: 0 8px 4px 8px;
}

.home-page .property-group-body.false {
    display: flex;
    height: unset;
    padding: 8px 16px 8px 24px !important;
}

.home-page .property-group-body .property-text {
    margin-right: 10px;
    white-space: nowrap;
    width: unset;
}

.home-page .property-group-body .property-value {
    height: unset;
    width: unset;
}

.home-page .property-group-body .property-value .property-input {
    padding: 4px;
}

.home-page.property-group {
    border: none;
    margin: 4px !important;
}

.home-page.property-group .property {
    margin-right: 16px;
    padding: 2px 0;
}

.home-page.property-group .property:first-child {
    margin-top: 0;
}

.home-page.property-group .property:last-child {
    margin-bottom: 0;
}

.home-page.property-group>.property-group-header {
    display: none;
}

.home-page.property-group>.property-group-body {}

.ribbonmenu .home-page .property-value {
    min-width: 60px;
    width: 120px;
}


.file-body .templateview {
    top: 90px !important;
}

.file-navigation-item {
    cursor: pointer;
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    padding: 8px 16px;
}

.file-navigation-item.selected {
    background-color: var(--filebackground);
}

.file-navigation-item img {
    filter: var(--svgfilter);
    margin-right: 12px;
    width: 20px;
}

.file-navigation-item:hover {
    background-color: var(--hoverbackground);
}

.file-back {}

.file-back .navigation-view-item {
    margin: 8px 16px 16px 16px;
    padding: 0 16px 0 0;
}

.file-view .navigation-view {
    top: 0 !important;
}

.file-body-main {
    position: absolute;
    left: 0;
    top: 300px;
    bottom: 0;
    right: 0;
}

.file-body-sub {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    bottom: 0;
    padding: 32px;
}

.file-body-sub.second-item {
    left: 300px;
    right: 0;
    width: unset;
    padding-left: 0;
}

.file-body-sub iframe {
    border: var(--border);
    position: absolute;
    left: 0;
    top: 72px;
    width: calc(100% - 16px);
    height: calc(100% - 86px);
}

.latest-news {
    overflow-y: auto;
    height: calc(100% - 16px);
    padding-right: 16px;
}

.latest-news a {
    color: var(--fontcolor);
    text-decoration: none;
}

.latest-news-item {
    margin-bottom: 32px;
}

.latest-news-item a {
    display: flex;
}

.latest-news-item a:hover .news-title,
.latest-news-item a:hover .news-summary {
    color: var(--iconcolor);
}

.latest-news-item img {
    height: 96px;
    width: 96px;
}

.latest-news-item .news-details {
    margin-left: 16px;
}

.latest-news-item .news-title {
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 4px;
}

.latest-news-item .news-date {
    margin-bottom: 8px;
}

.latest-news-item .news-summary {
    color: #888;
}

.left-button {
    font-weight: normal;
    margin-right: 4px;
    padding: 2px 4px;
    min-height: unset;
}

.right-button {
    font-weight: normal;
    margin-left: auto;
    padding: 2px 4px;
    min-height: unset;
}

.button.bold {
    font-weight: bold;
}

.panel-header .left-button:first-child {
    margin-left: -7px;
}

.panel-header .right-button {
    background-color: var(--buttonlight);
    color: var(--fontcolor);
    border: 1px solid #5b6a80;
    font-weight: 500;
    margin-right: -7px;
}

.panel-header .right-button:hover {
    background-color: #5b6a80 !important;
    color: #FFF !important;
}

.rz-dropdown.property-input {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: unset !important;
}

.rz-dropdown-label.rz-inputtext:active {
    border: none !important;
    outline: none !important;
}

.rz-dropdown-panel.rz-popup {
    width: unset !important;
}

.rz-dropdown-label.rz-inputtext {
    padding: 2px 8px;
}

.viewer-container .progress-ring {
    left: calc(50% - 32px);
    top: calc(50% - 32px);
}

.viewer-container .progress-ring .progress-message {
    display: none;
}

.progress-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    z-index: 1000;
}

.progress-ring .ring-container {
    margin: 0 0 4px 0;
}

.progress-ring .progress-message {
    background-color: #555;
    border-radius: 4px;
    color: #FFF;
    text-align: center;
    padding: 4px 8px;
    margin: 0 auto;
    width: fit-content;
}

.progress-ring img {
    max-width: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100px;
}

/* ── A workflow step that is working ──────────────────────────────────────────────────────
   The handoff at "Complete Step" designs every beam and builds every chapter of the report,
   which takes as long as it takes - fine, as long as the app SAYS it is working.

   The cover is TRANSPARENT, the way this ring has always shown over a page: it is there to
   stop clicks landing on a step that is mid-handoff, not to grey the model out. What says
   "working" is the ring and its caption, centred over the step.

   body.workflow is set on the step page only (SetBodyStyle), so a standalone app keeps the
   plain ring it has always had. */
body.workflow .progress-ring {
    transform: translate(-50%, -50%);
}

body.workflow .progress-ring::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    z-index: -1;
}

body.workflow .progress-ring .progress-message {
    font-size: 13px;
    padding: 6px 12px;
}

.viewer-container .progress-ring img {
    height: 64px;
    width: 64px;
}

.property-unit .property-value {
    border: var(--border);
    width: calc(100% - 36px);
}

td.readonly-true {
    /*    background-color: var(--windowbackground) !important; */
}

td.display-true {
    background-color: #FAFAFA !important;
}

.property-value-group {
    display: flex;
    width: 50%;
}

table .property-value-group {
    width: 100%;
}

.property.display .property-value {
    border: none;
}

.property-info {
    color: #888;
    text-align: right;
    white-space: nowrap;
    padding: 0;
}

.property-error {
    position: absolute;
    right: 8px;
}

.property-error:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.property-error .tooltip {
    color: #000;
    max-width: 300px;
    left: unset;
    right: 0;
    text-align: left;
}

.property-error .tooltip .tooltip-header {
    font-weight: bold;
    padding: 4px;
}

.property-error .tooltip .tooltip-message {
    padding: 4px;
    white-space: pre-wrap;
}

.property-error img {
    cursor: pointer;
    filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(1353%) hue-rotate(1deg) brightness(104%) contrast(105%);
    margin-right: 8px;
    margin-top: 4px;
    width: 16px;
}

.property-button {
    background-color: #888;
    cursor: pointer;
    color: #FFF;
    position: absolute;
    top: 0;
    right: -30px;
    padding: 0 6px;
    height: 100%;
    outline: var(--border);
}

.property-table td.row-header {
    background: var(--panelbackground);
    cursor: pointer;
    padding: 0 8px;
}

.property-group-list {}

.property-group-list-container {
    background-color: var(--panelbackground);
    border: 1px solid #CCC;
    box-shadow: 0 4px 4px #AAA;
    left: -0.5px;
    margin-top: 4px;
    padding: 0 12px 12px 12px;
    position: absolute;
    z-index: 1000;
}

.property-group-list-value {
    cursor: pointer;
    padding: 0 4px;
}

.toolbar .property-group-list-value {
    display: flex;
}

.button .property-group-list-value>.button-text {
    display: none;
}

.button .property .property-value {
    width: unset;
}

.button .property .property-list-container .property-value {
    padding: 2px 8px;
}

.button .property {
    display: block;
}

.button .property .property-value {
    margin-top: 8px;
}

.button .property-enum.is-list .property,
.button .property-group-list.is-list .property {
    display: flex;
}

.button .property-enum.is-list .property-value,
.button .property-group-list.is-list .property-value {
    border: none;
    padding: 0;
}

.button .property-enum.is-list .property-list-container,
.button .property-group-list.is-list .property-list-container {
    box-shadow: none;
    position: relative;
    top: 0;
    left: 0;
    margin: 8px 0 0 0;
    padding: 8px 16px;
}

.button .property-group-list.is-list .property-list-container {
    padding: 8px;
    max-height: 200px;
    overflow: auto;
}

.button .property-group-list.is-list .property-list-container .property {
    margin: 0;
}

.button.dropdown-button .property-list-container .property {
    margin: 0 0 8px 0;
}

.button.dropdown-button.ismenu .property-list-container .property {
    margin: 0;
}

.button .property-group-list-value>.button-icon {
    padding: 4px 32px 4px 0;
}

.button .property-group-list {}

.button .property-group-list-value .expander-header-icon {
    margin-top: 4px;
}


.button .property-list-container {
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 24px;
    overflow: hidden;
    visibility: visible;
    padding: 16px;
    min-width: 200px;
}

.button.ismenu .property-list-container {
    border-radius: 8px 0 8px 8px;
    padding: 8px;
    min-width: unset;
}

.button .property-list-container .property-text {
    width: 100px !important;
}

.button .property-list-container .button-text {
    white-space: nowrap;
}

.button .property-group-list-body,
.button .property-group-list-body .button {
    justify-content: start;
    text-align: left;
    width: 100%;
}

.button .property-group-list-body .button {
    border-radius: 0 !important;
}

.button .property-group-list-body .border-bottom {
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.button .property-group-list-body .border-top {
    padding-top: 4px;
    margin-top: 4px;
}

.property-list-container .property-checkbox .property-value {
    margin-top: 0;
}

.property-list-value {
    cursor: pointer;
    font-family: "JetBrains Mono", monospace;
    overflow: hidden;
    padding: 4px 8px 4px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 16px);
}

.property-list-container {
    background-color: var(--panelbackground);
    border: var(--border);
    box-shadow: 0 4px 4px var(--shadowcolor);
    left: -0.5px;
    min-width: 60px;
    position: fixed;
    overflow-y: auto;
    z-index: 1000;
    visibility: hidden;
}

.property-list-body {
    cursor: pointer;
    font-family: "JetBrains Mono", monospace;
    padding: 4px 12px;
    white-space: nowrap;
}

.property-list-body:hover {
    background-color: var(--hoverbackground);
}

.property-group-list-value .expander-header-icon {
    margin-top: 2px;
}

.property-group-list .property-value {
    min-width: 120px;
}

.property-group-list-header {
    font-weight: bold;
    margin-bottom: 4px;
    margin-top: 16px;
}

.property-group-list-header:first-child {
    margin-top: 12px;
}

.property-group-list-body .property {
    padding: 0;
}

.property-list-container .property {
    padding: 2px 0;
}

.property-group-list-body .property-text {
    margin: 0 16px 0 0;
    width: 100px;
}

.property-group-list-body .property-icon {
    display: none;
}

.settings-menu-button .property-group-list-body .property-icon {
    display: unset;
    margin-top: 2px;
    margin-right: 8px;
}

.settings-menu-button .property-list-container {
    left: unset;
    right: 0;
    top: calc(100% + 8px);
}

.settings-menu-button.button .property-list-container .property-text {
    width: unset !important;
}

.settings-menu-button .property-list-container .property {
    align-items: center;
    display: flex;
    white-space: nowrap;
}

.settings-menu-button .property-list-container .property {
}

    .property-group-list-body .property-value {
        min-width: 20px;
    }

.property-group-list-body .property-enum .property-value {
    padding: 2px 8px;
    min-width: 100px;
    width: unset;
}

.property-group-list-body .property-enum .property-value .property-input.disabled {
    padding: 2px 8px;
}

.property-group-list-body input[type="checkbox"] {
    accent-color: #0067c0;
}

.property-group-list-container .button {
    background-color: var(--windowbackground);
    border: var(--border);
    display: block;
    margin-top: 8px;
    padding: 4px 8px;
    text-align: center;
}

.property-list-container .expander-header-icon {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 4px;
}

.expander-header-icon {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 2px;
    padding: 0 4px;
}

.ribbonmenu .expander-header-icon {
    top: 2px;
}

.property-group-list-value .expander-header-icon {
    top: 0;
}

.property-table tr:has(:hover, :focus) td {
    background: #CEF;
}

.property-table tr:has(:hover, :focus) input {
    background: #CEF;
}

.directory-breadcrumb {
    border-bottom: var(--border);
    padding: 8px 0;
    margin-bottom: 16px;
}

.directory-breadcrumb span {
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 8px;
}

.directory-breadcrumb span.breadcrumb-item:hover {
    background-color: var(--windowbackground);
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}

.dark-background {
    background-color: rgba(0, 0, 0, 0.3);
}

.dialog {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 16px;
    box-shadow: 0 0 8px #888;
    padding: 24px 32px;
    position: fixed;
    width: 400px;
    height: 200px;
    top: 0;
    left: 0;
    left: calc(50% - 200px);
    top: calc(50% - 100px);
    z-index: 101;
    animation: var(--animation-slide-in-up) forwards;
}

.dialog-header {
    font-weight: bold;
    font-size: 18px;
}

.dialog-body {
    font-size: 13px;
    margin-top: 24px;
}

.dialog-footer {
    display: flex;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    text-align: right;
}

.dialog-footer .button {
    border-bottom: 2px solid var(--bordercolor);
    justify-content: center;
    padding: 6px 0;
    width: 100px;
}

.dialog-footer .button:nth-child(1) {
    background-color: var(--button);
    border-bottom: 2px solid #333;
    color: #FFF;
    position: absolute;
    bottom: 0;
    right: 108px;
}

.dialog-footer .button:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 0px;
}

.dialog-background {
    background-color: rgba(0, 0, 0, 0.3);
}

.file-view {
    background-color: var(--panelbackground);
    border-top: var(--border);
    position: fixed;
    left: 201px;
    right: 0;
    top: 76px;
    bottom: 0;
    z-index: 1000;
}

.file-view .directory-explorer {
    border-left: var(--border);
    position: absolute;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 16px 32px;
    overflow: auto;
}

.directory-explorer table td:nth-child(2) {
    padding: 6px 0;
}

.file-view .directory-explorer table {
    width: 100%;
}

.file-view .directory-explorer table td:first-child {
    width: 36px;
}

.file-view .directory-explorer table td:hover {
    cursor: pointer;
    font-weight: bold;
}

.file-view .directory-explorer img {
    height: 20px;
    width: 20px;
}

.file-view .canvas3d {
    display: none;
    border-left: var(--border);
    position: absolute;
    left: unset;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
}

.directory-save {
    padding-bottom: 8px;
}

.directory-save input {
    border: var(--border);
    padding: 0 8px;
    margin-right: 8px;
    height: 25px;
    width: 400px;
}

.directory-save button {
    height: 24px;
    padding: 0 16px;
}


.appview {
    background-color: var(--windowbackground);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.appview-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 130px;
}

.appview-body {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 135px;
    bottom: 24px;
}

.appview-explorer {
    position: absolute;
    left: 0;
    width: 300px;
    top: 0;
    bottom: 0;
}

.appview-explorer.false {
    display: none;
}

.appview-property {
    position: absolute;
    left: 304px;
    width: 500px;
    top: 0;
    bottom: 0;
}

.appview-model {
    position: absolute;
    left: 808px;
    right: 404px;
    top: 0;
    bottom: 0;
}

.appview-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
}

.appview-help {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
}

.appview-output {
    background-color: var(--panelbackground);
    position: absolute;
    display: none;
    left: 0;
    right: 0;
    bottom: 0;
    height: 400px;
}

.hide-explorer .appview-explorer {
    display: none;
}

.hide-explorer .appview-property {
    left: 0;
}

.hide-explorer .appview-model {
    left: 504px;
}

.hide-property .appview-model {
    left: 304px;
}

.hide-property .appview-property {
    display: none;
}

.hide-explorer.hide-property .appview-model {
    left: 0;
}

.hide-help .appview-model {
    right: 0;
}

.hide-help .appview-help {
    display: none;
}

.row-header {
    position: relative;
}

.row-header-menu {
    display: flex;
    background-color: var(--panelbackground);
    border: var(--border);
    box-shadow: var(--shadowcolor) 0 0 4px;
    position: absolute;
    left: 60px;
    top: 0;
    z-index: 1000;
}

.row-header-menu .button {
    border-radius: 0;
    border: none;
    height: 22px !important;
    min-height: 22px !important;
    padding: 2px 4px;
}

.treeview-node-link img {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 16px;
}

.templateview {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    bottom: 4px;
}

.templateview-property {
    position: absolute;
    left: 0;
    width: 480px;
    top: 0;
    bottom: 0;
}

.templateview-model {
    position: absolute;
    left: 484px;
    right: 0;
    top: 0;
    bottom: 0;
}

.treeview-node>div:nth-child(2) {
    margin-left: -20px;
}

.treeview-node .treeview-node .treeview-node-header {
    padding-left: 18px;
}

.treeview-node .treeview-node .treeview-node .treeview-node-header {
    padding-left: 36px;
}

.treeview-node .treeview-node .treeview-node .treeview-node .treeview-node-header {
    padding-left: 54px;
}

.treeview-node .treeview-node .treeview-node .treeview-node .treeview-node .treeview-node-header {
    padding-left: 72px;
}

.treeview-node .treeview-node .treeview-node .treeview-node .treeview-node .treeview-node .treeview-node-header {
    padding-left: 90px;
}

.treeview-node-header {
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    min-height: 20px;
    padding: 3px 8px 1px 8px;
    position: relative;
}

.treeview-node-header.true {
    background-color: var(--windowbackground);
    font-weight: bold;
}

.treeview-node-header:hover,
.treeview-node-header:active {
    background-color: var(--highlightcolor);
    font-weight: bold;
}

.treeview-node-icon {
    align-content: center;
    cursor: pointer;
    display: inline;
}

.treeview-node-icon img {
    height: 16.667px;
    width: 16.667px;
}

.treeview-node-text {
    align-content: center;
    margin-left: 4px;
    margin-top: -2px;
    position: relative;
}

.treeview-node.noevent>.treeview-node-header:hover,
.treeview-node.noevent>.treeview-node-header:active {
    background-color: var(--hovercolor);
    font-weight: normal;
}

.treeview-node.noevent>.treeview-node-header {
    cursor: default;
}


.treeview-node .child-count {
    background-color: #CCC;
    border-radius: 4px;
    color: #FFF;
    font-size: 10px;
    padding: 1px 6px 2px 6px;
    position: absolute;
    right: 4px;
    min-width: 32px;
    text-align: center;
}

.expander {
    border: var(--border);
    margin-bottom: 8px;
}

.expander:last-child {
    margin-bottom: 0;
}

.expander .expander .expander-header {
    font-weight: normal;
}

.expander-header {
    background-color: var(--windowbackground);
    cursor: pointer;
    display: flex;
    font-weight: bold;
    min-height: 24px;
    padding: 0 8px;
    position: relative;
}

.expander-header:hover {
    background-color: var(--highlightcolor);
}

.expander-header-icon {
    align-content: center;
}

.property-group-list .expander-header-icon {
    right: 4px;
}

.expander-header-icon img {
    margin-top: 3px;
    margin-right: 4px;
    height: 12px;
    width: 12px;
}

.expander-header-text {
    align-content: center;
    margin-left: 8px;
}

.expander-body {
    padding: 8px;
}

.main-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 132px;
    bottom: 32px;
}

.tree-container {
    margin: 4px;
    position: absolute;
    left: 0;
    width: 240px;
    top: 0;
    bottom: 0;
}

.property-container {
    margin: 4px;
    position: absolute;
    left: 244px;
    width: 300px;
    top: 0;
    bottom: 0;
}

.model-container {
    margin: 4px;
    position: absolute;
    left: 548px;
    right: 0;
    top: 0;
    bottom: 0;
}

.help-container {
    background-color: var(--panelbackground);
    border: var(--border);
    display: none;
    margin: 4px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    overflow: auto;
}

.status-container {
    position: absolute;
    left: 0;
    right: 0;
    height: 32px;
    bottom: 0;
}

.ribbonmenu {}

.ribbonmenu-header {
    display: flex;
    padding: 0 4px;
}

.ribbonmenu-header-text {
    cursor: pointer;
    margin: 8px 8px 4px 8px;
    padding: 2px 0;
}

.ribbonmenu-header-text:hover {
    border-bottom: 2px solid #0094ff;
}

.ribbonmenu-header-text.selected {
    border-bottom: 2px solid #0094ff;
}

.ribbonmenu-body {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 8px;
    position: absolute;
    left: 4px;
    right: 4px;
    top: 32px;
    height: 100px;
}

.ribbonmenu-group {
    border-right: var(--border);
    position: relative;
    display: flex;
    height: 100px;
    min-width: 100px;
    padding: 4px 8px;
}

.ribbonmenu-group-text {
    bottom: 4px;
    font-size: 10px;
    position: absolute;
    text-align: center;
    margin: 0 -8px;
    width: 100%;
}

.ribbonmenu-tab {
    display: flex;
}

.navigation-view {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    width: calc(100% - 8px);
}

.navigation-view-item {
    border-radius: 8px;
    padding: 4px 12px;
}

.navigation-view-item .navigation-view-item-body {
    padding-bottom: 0;
}

.navigation-view-item-header {
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
}

.navigation-view-item .navigation-view-item-header {
    font-size: 13px;
    font-weight: normal;
}

.navigation-view-item:hover {
    background-color: var(--highlightcolor);
    font-weight: bold !important;
}

.navigation-view-item.highlight {
    background-color: rgb(237, 231, 246);
    font-weight: bold !important;
}

.navigation-view-item:hover .navigation-view-item-header {
    font-weight: bold !important;
}

.navigation-view-item .navigation-view-item-icon {
    align-content: center;
    height: 20px;
    width: 20px;
    margin-right: 8px;
}

.navigation-view-item-text {
    align-content: center;
    margin-left: 8px;
}

body .navigation-view .property-group {
    border-radius: 0;
    border-bottom: var(--border);
    margin: 0 4px;
    padding: 4px 0;
}

.property-enum-value {
    overflow: hidden;
    width: calc(100% - 16px);
    white-space: nowrap;
}

.map {
    z-index: 1000;
}

.picturebox {
    cursor: pointer;
}

.picture-container {
    margin-bottom: 8px;
    position: relative;
}

.picture-container:hover {
    outline: var(--border);
}

.picture-container:hover .picturebox-info {
    display: block;
}

.picturebox-info {
    background-color: #333;
    color: #FFF;
    display: none;
    padding: 2px 4px;
    position: absolute;
    margin: auto auto;
    top: 50%;
    left: calc(50% - 45px);
}

.map .panel-body {
    display: flex;
    overflow: hidden;
    justify-content: center;
}

.map img {
    justify-content: center;
    max-height: 100%;
    max-width: 100%;
}

.map .background {
    background-color: rgba(0, 0, 0, 0.15);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 90;
}

.treeview-node-menu {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 4px;
    position: absolute;
    z-index: 1000;
    top: 20px;
    left: 0;
    white-space: nowrap;
}

.treeview-node-menu .button {
    border: none;
    border-radius: 0;
    font-weight: normal;
}

.property-checkbox-thumbnail .property-value {
    border: none;
    padding: 0;
}

.rz-dropdown-items.rz-dropdown-list li span {
    padding: 2px 8px;
    white-space: nowrap;
}

.rz-dropdown.property-input .rz-dropdown-label.rz-inputtext {
    width: calc(100% - 20px);
}

.rz-dropdown-items {
    padding: 0 !important;
}

.statusbar {
    align-items: center;
    display: flex;
}

.statusbar img {
    margin: 2px 8px 0 8px;
    width: 16px;
}

table.dataTable td {
    padding: 0 8px !important;
}

.property-table table.dataTable .property {
    min-width: unset !important;
}

.property-table table.dataTable .property-value {
    padding: 4px 0;
}

.dt-container>div:nth-child(3) {
    display: block !important;
}

.dt-container>div:nth-child(3)>div:nth-child(2) {
    display: block !important;
}

.dt-paging {
    border-top: var(--border);
    margin-top: 8px;
    padding-top: 8px;
    text-align: right;
}

#canvas-info {
    background-color: var(--panelbackground);
    border-radius: 4px;
    box-shadow: 0 0 5px #888;
    color: var(--fontcolor);
    padding: 8px;
    position: absolute;
    z-index: 1000;
}

#canvas-info>div:first-child {
    font-weight: bold;
    margin-bottom: 8px;
}

#canvas-info table {
    border-collapse: collapse;
    border: var(--border);
    width: 100%;
}

#canvas-info td {
    border: var(--border);
    padding: 2px 8px;
    text-align: center;
    min-width: 100px;
    white-space: nowrap;
}

#canvas-info th {
    background-color: var(--windowbackground);
    border: var(--border);
    padding: 4px 0;
}

.datagrid-bottom.viewer-container {
    border: 2px solid var(--buttonactivecolor);
    top: unset;
    bottom: 8px;
    left: 392px;
    right: 8px;
    height: 25%;
}

.datagrid {
    background-color: var(--panelbackground);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.datagrid .property.property-table {
    background-color: var(--windowbackground);
    border: var(--border2);
    padding: 0;
    position: absolute;
    left: 8px;
    right: 8px;
    top: 43px;
    bottom: 43px;
    overflow: auto;
}

.datagrid .table.no-toolbar .property.property-table {
    top: 0 !important;
}

.datagrid table {
    background-color: var(--panelbackground);
    outline: none;
}

.datagrid .property-table-footer {
    align-items: center;
    background-color: var(--panelbackground);
    display: flex;
    position: absolute;
    height: 43px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.datagrid .table-page-buttons {
    top: 4px;
    right: 8px;
}

.datagrid .property-table-header {
    height: 43px;
    display: flex;
    align-items: center;
}

/* Right-aligned toolbar slot (e.g. Beams "Show all stations / load combos"). */
.datagrid .property-table-header .datagrid-toolbar-right {
    margin-left: auto;
    margin-right: 8px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.datagrid .property-table-header .datagrid-toolbar-right .property-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

/* Reset the base property-row widths/margins so the checkbox sits tight to its
   label (base rules give value/text 50% widths + offsets). */
.datagrid .property-table-header .datagrid-toolbar-right .property-checkbox .property-value {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
}

.datagrid .property-table-header .datagrid-toolbar-right .property-checkbox .property-value .property-input {
    width: 16px;
    margin: 0;
}

.datagrid .property-table-header .datagrid-toolbar-right .property-checkbox .property-text {
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.datagrid .button {
    padding: 0 4px;
    height: 20px;
}

.button.dropdown-button {
    justify-content: left;
    text-align: left;
    /*    padding-left: 8px !important; Cannot add padding here*/
}

.button.dropdown-button .button-text {
    width: 100%;
}

.datagrid .property-table-header .button {
    background-color: #FFF !important;
    border-radius: 8px !important;
    border: none;
    display: inline-flex;
    margin: 4px 0 4px 8px;
    padding: 2px 0 4px 0;
    position: relative;
    width: 100px;
}

.dropdown-button .property-group-list-value {
    padding: 0;
}

.datagrid > .button {
    background-color: var(--buttonactivecolor) !important;
    border-radius: 8px !important;
    color: #FFF;
    position: absolute;
    top: 4px;
    right: 12px;
    width: 28px;
    z-index: 1;
}

.datagrid>.button img {
    filter: brightness(0) invert(1);
}

.datagrid .table {
    margin: 0;
}

.treeview-header {
    height: 28px;
}

.treeview-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.treeview-node-link {
    position: absolute;
    right: 8px;
}

.treeview-node-link img {
    width: 16px;
}

.property-equations {
    display: block;
}

.property-equations-header {
    display: block;
}

.property-equations-header .button {
    display: inline-block;
}

.property-equation {
    display: block;
    border: var(--border);
    padding: 2px 8px;
    margin-top: 4px;
}

.equation-buttons {
    border-top: var(--border);
    text-align: right;
    margin-top: 8px;
    padding-top: 8px;
}

.equation-buttons>div {
    display: flex;
    justify-content: end;
}

.equation-buttons .button {
    border-radius: 8px;
    display: inline-flex;
    margin-bottom: 4px;
    margin-top: 4px;
    margin-right: 4px;
    width: 80px;
}

.equation-buttons .button:first-child {
    background-color: #0067c0;
    color: #FFF;
    font-weight: bold;
}

.form {
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: var(--shadowcolor) 0 0 16px;
    color: var(--C50);
    position: absolute;
    width: 600px;
    height: 400px;
    left: calc(50% - 300px);
    top: calc(50% - 200px);
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 200;
}

.form-header,
.form-body,
.form-footer {
    position: absolute;
    left: 0;
    right: 0;
}

.form-header {
    align-items: center;
    display: flex;
    font-weight: bold;
    font-size: 16px;
    height: 42px;
    top: 0;
    cursor: grab;
    margin-left: 16px;
}

.form-header .buttons,
.form-footer .buttons {
    align-items: center;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    height: 42px;
}

.form-header .button {
    background-color: transparent;
    border: none;
    color: #C6CCDB;
    margin-right: 8px;
    min-width: 24px;
}

.form-body {
    top: 43px;
    bottom: 43px;
}

.form.no-header .form-body {
    top: 0;
}

.form.no-footer .form-body {
    bottom: 0;
}

.form-footer {
    background-color: var(--C900);
    bottom: 0;
    height: 42px;
    z-index: 1;
}

.form-footer .buttons .input {
    margin-right: 8px;
    padding: 0;
}

.form-footer .buttons .button,
.form-footer .buttons input {
    margin-right: 8px;
    padding: 0 24px;
    text-align: center;
}

.form-footer .button .text {
    margin-left: 0;
}

.viewer-container {
    border-radius: 8px;
    border: var(--border);
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    bottom: 4px;
    overflow: hidden;
}

.flow-chart-container {
    background-color: var(--panelbackground);
    /* NOTE: do not set position here - this element also has .viewer-container
       (position: absolute) which sizes it and anchors the inner .flow-chart and
       the animation caption. Overriding it collapses the flowchart. */
}

/* Flowchart animation caption - explains the current step while animating */
.flow-chart-caption {
    display: none;
    position: absolute;
    z-index: 20;
    width: 260px;
    max-width: 45vw;
    padding: 10px 14px;
    background: var(--panelbackground);
    border: 1px solid var(--border);
    border-left: 4px solid rgba(44, 105, 141, 0.9);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    color: var(--fontcolor);
    font-size: 13px;
    text-align: left;
    transform: translateY(-50%);
    pointer-events: none;
}

.flow-chart-caption.show {
    display: block;
}

.flow-chart-caption-step {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.6;
}

.flow-chart-caption-text {
    display: block;
    line-height: 1.45;
}

.flow-chart-toolbar {
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 10;
    display: flex;
    gap: 4px;
}

.flow-chart-toolbar-btn {
    background: var(--panelbackground);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--fontcolor);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0;
}

.flow-chart-toolbar-btn:hover {
    background: var(--panelbuttonhover, rgba(0, 0, 0, 0.08));
}

.flow-chart {
    background-color: var(--panelbackground);
    position: absolute;
    left: 0;
    right: 0;
    top: 43px;
    bottom: 0;
    overflow: auto;
    text-align: center;
    min-width: 100%;
}

.flow-chart-auth-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--buttonactivecolor);
    color: #FFF;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    text-align: center;
}

/* Wrapper around the single <svg> scene FlowChart renders into (framework.ts). Inline-block so
   the ancestor .flow-chart's text-align: center centers it for free when it fits the viewport;
   CSS zoom (FlowChart.ApplyZoom) scales this element's whole rendered box, svg included. */
.flow-chart-scene {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 20px 0;
}

.flow-chart-svg {
    display: block;
}

.flow-chart-text {
    fill: var(--fontcolor);
    user-select: none;
}

/* Block titles (the caption above a block's equation). Muted by default - must stay after
   .flow-chart-text, which it deliberately overrides at equal specificity. */
.flow-chart-title {
    fill: #888;
}

/* Box/diamond fill+stroke. Diamonds (.flow-chart-shape) override fill/stroke below to keep
   their distinct decision-point coloring. */
.flow-chart-border {
    fill: var(--flowchartcolor);
    stroke: var(--flowchartcolor);
    stroke-width: 1px;
}

.flow-chart-border.path {
    fill: var(--flowchartpathcolor);
    stroke: var(--flowchartpathbordercolor);
    stroke-width: 2px;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

.flow-chart-shape {
    fill: #eee;
    stroke: #CCC;
}

.flow-chart-shape.path {
    fill: #efeeb4;
    stroke: #dad873;
}

/* Start / end pill - the app accent, same as the path blocks it leads into. */
.flow-chart-pill {
    fill: var(--buttonactivecolor);
    stroke: var(--buttonactivecolor);
}

/* Color context for embedded MathJax SVG equations, which fill with currentColor. */
.flow-chart-box {
    color: #555;
}

.flow-chart-box.path {
    color: var(--fontcolor);
}

/* A process box on the path is filled dark blue, so its own title and equations flip light.
   Scoped to .flow-chart-process (set by BuildBoxContent): the decision diamond and the Start
   pill are inside .flow-chart-box.path too and keep their own colouring. */
.flow-chart-box.path .flow-chart-process {
    color: var(--flowchartpathtextcolor);
}

.flow-chart-box.path .flow-chart-process .flow-chart-text,
.flow-chart-box.path .flow-chart-process .flow-chart-title {
    fill: var(--flowchartpathtextcolor);
}

/* The limit chip sits inside the box: against the dark fill it becomes a translucent panel and
   keeps the box's light text, rather than a light panel with now-invisible light equations. */
.flow-chart-box.path .flow-chart-process .flow-chart-limit-box {
    fill: rgba(255, 255, 255, 0.12);
    stroke: #9CD3DC;
}

/* Flowchart flow animation - toggled by the toolbar Animate button */
.flow-animating .flow-chart-arrow-svg.path .flow-chart-connector-line {
    stroke-dasharray: 6 6;
    animation: flow-chart-dash 0.6s linear infinite;
}

.flow-animating .flow-chart-border.path {
    transition: filter 0.25s ease-in-out;
}

.flow-animating .flow-chart-border.path.flow-active {
    filter: drop-shadow(0 0 6px rgba(42, 123, 140, 0.85));
}

@keyframes flow-chart-dash {
    to {
        stroke-dashoffset: -12;
    }
}

.flow-chart-limit-box {
    fill: var(--panelbackground);
    stroke: #00F;
    stroke-width: 1px;
}

.flow-chart-limit-icon {
    filter: brightness(0) saturate(100%) invert(67%) sepia(71%) saturate(4067%) hue-rotate(355deg) brightness(96%) contrast(114%);
}

.flow-chart-condition {
    fill: var(--fontcolor);
}

.flow-chart canvas {
    left: 0;
    top: 0;
}

.flow-chart-container .property-enum .property-text {
    display: none;
}

.flow-chart-container .property-enum .property-list-value,
.flow-chart-container .property-enum .property-list-body {
    text-align: left;
}

.flow-chart-container .property-enum .property-value {
    min-width: 100px;
    width: unset;
}

.context-menu {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 8px !important;
    box-shadow: var(--shadowcolor) 0 0 16px;
    display: block;
    position: absolute;
    padding: 4px;
    z-index: 1000;
}

.context-menu .button {
    display: flex;
}

.context-menu .button a {
    color: var(--fontcolor);
}

.iframe {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 8px !important;
    box-shadow: var(--shadowcolor) 0 0 16px;
    position: absolute;
    left: calc(50% - 300px);
    top: calc(50% - 400px);
    width: 600px;
    height: 800px;
    z-index: 1000;
}


.iframe iframe {
    border: none;
    height: 100%;
    width: 100%;
}


.canvas-2D.chart img {
    max-width: calc(100% - 0.25in);
    margin: 0 0 0 0.25in;
}

.graphic-tooltip {
    background-color: #FFF;
    border-radius: 8px 8px 8px 0;
    border: var(--border);
    box-shadow: var(--shadowcolor) 0 0 4px;
    padding: 8px 16px;
    margin: 8px 0 0 4px;
    position: absolute;
    z-index: 100;
}

.form-login {
    text-align: left;
    height: 300px;
}

.form-login .property .property-text {
    width: 40%;
}

.form-login .property .property-value {
    width: 60%;
}

.appstyle2 .center-panel {
    right: 4px;
}

.property-group-body .viewer-container {
    border: var(--border);
    height: 300px;
    margin-bottom: 16px;
    position: relative;
    width: calc(100% - 16px);
}

.property-group-body .viewer-container canvas {
    height: 300px;
    position: relative;
}

.page-menu {
    background-color: var(--panelbackground);
    border: var(--border);
    box-shadow: var(--shadowcolor) 4px 4px 8px;
    position: absolute;
    display: block;
    left: 0;
    top: 52px;
    padding: 0;
    width: 200px;
    z-index: 1000;
}

.page-menu .button {
    border: none;
    border-radius: 0px !important;
    align-items: start;
    justify-content: left;
}

.page-menu .button .button-text {
    align-content: start;
}

.page-menu .property-group {
    padding: 0 !important;
}

.menu-background {
    background-color: rgba(0, 0, 0, 0.1);
}

@media print {
    .report-view .page {
        display: none !important;
        z-index: 10;
    }

    .report-view .page:first-child {
        display: block !important;
    }

    .report-view .page * {
        display: none !important;
    }

    .report-view .page::before {
        background: #2A7B9B;
        color: #FFF;
        content: "Please use the Print button within the app itself, rather than the one in your browser, to print this report.";
        position: absolute;
        padding: 8px;
        font-size: 14px;
        text-align: center;
        top: 40%;
        width: calc(100% - 1in);
    }
}

.company-login {
    margin: 32px 0 16px 0;
}

#components-reconnect-modal,
.components-reconnect-show,
.components-reconnect-failed,
.components-reconnect-rejected {
    display: none !important;
}

.button {
    border-radius: 16px !important;
}

.authorization {
    background-color: #F00;
    border-radius: 4px;
    color: #FFF;
    font-size: 8px;
    font-weight: bold;
    padding: 0 3px;
    margin-left: -4px;
    vertical-align: top;
}

.upgrade-form .form-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 24px;
    text-align: center;
}

.upgrade-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.upgrade-badge {
    background-color: #F00;
    border-radius: 12px;
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 12px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.upgrade-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    color: var(--C50);
}

.upgrade-message {
    font-size: 14px;
    line-height: 1.5;
    color: var(--C50);
    opacity: 0.85;
    max-width: 320px;
}

.menu-toolbar .toolbar .button {
    border-radius: 4px;
    padding: 8px;
}

.loading-progress {
    position: absolute;
    display: block;
    left: calc(50% - 48px);
    top: calc(50% - 48px);
    width: 96px;
    height: 96px;
    z-index: 100;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    display: block;
    top: calc(50% - 7px);
    position: absolute;
    text-align: center;
    font-weight: bold;
    width: 100%;
    z-index: 100;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ── Splash / Welcome screen ── */
.splash-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--windowbackground);
    z-index: 9999;
}

.splash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 48px 56px;
    background-color: var(--panelbackground);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    min-width: 320px;
    text-align: center;
}

.splash-app-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--fontcolor);
    letter-spacing: 0.5px;
}

.splash-message {
    font-size: 13px;
    color: var(--fontcolorlight);
    margin-top: -8px;
}

.splash-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--containerbackground);
    border-top-color: #0067c0;
    border-radius: 50%;
    animation: splash-spin 0.9s linear infinite;
    flex-shrink: 0;
}

@keyframes splash-spin {
    to { transform: rotate(360deg); }
}

.menu-container {
    align-items: center;
    background-color: var(--panelbackground);
    border-bottom: var(--border);
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 0;
    height: 52px;
    /* The header and every panel are position:absolute with NO z-index, so they
       paint in DOM order - and .main-container comes after this in PageView.
       That put the panels on top of the header, and anything dropping out of
       the header (the account menu, the settings menu, the File menu) opened
       underneath them.

       z-index alone is not the whole story: the account dropdown carries
       z-index:1000, but `.button .property-list-container` overrides the base
       rule's position:fixed with position:absolute, which puts it back inside
       the header's box rather than the viewport's.

       60 clears the panels (auto) while staying below the app's modal layer
       (ContentDialog and the cloud dialogs sit at 380+ in the root stacking
       context), so a dialog still covers the header as it should. */
    z-index: 60;
}

.menu-container-icon img {
    border-radius: 50%;
    padding: 16px 0;
    width: 24px;
    margin: 0 16px;
}

.menu-container>a {
    display: inline-flex;
    padding: 8px;
}

.main-container-body {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    top: 52px;
    bottom: 0;
}

.frame .menu-container {
    border-bottom: var(--border);
}

/* Matched to the SPA's .app-title. `bold` is 700 where the analysis apps use
   600, and the missing letter-spacing made the Blazor title read noticeably
   heavier and tighter than Beam's beside the same chip. */
.menu-container-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--header-fg);
    white-space: nowrap;
}

/* Sits at the end of the header row. It used to be absolutely positioned with
   the right toolbar reserving a fixed 52px for it, which broke once the pill grew
   to fit a signed-in display name: the opaque account menu painted straight over
   the Learn / Discuss buttons. As a flex item it can never overlap them. */
/* The account cluster. 8px between its members is the SPA's .acct-cluster gap;
   the old 50% radius was inherited from the days when this held a single round
   avatar button, and rounded nothing once it became a row. */
.menu-container-buttons {
    align-items: center;
    background-color: var(--panelbackground);
    display: flex;
    gap: 8px;
    height: 42px;
    margin-right: 8px;
    justify-content: center;
    text-align: right;
}

.menu-container-buttons img {
    width: 24px;
}

.main-container {
    background-color: var(--windowbackground);
    padding: 16px;
    position: absolute;
    left: 0;
    right: 0;
    top: 52px !important;
    bottom: 0;
    overflow-y: auto;
}

.frame .main-container {
    padding: 0;
}

.app-group {
    color: rgb(52, 71, 103);
    border-radius: 16px;
    margin-bottom: 16px;
}

.app-group-header {
    color: rgb(50, 50, 71);
    font-size: 18px;
    font-weight: bold;
    padding: 16px 16px 8px 16px;
}

.app-group-description {
    color: rgb(150, 150, 150);
    padding: 0 16px 0 16px;
    max-width: 600px;
}

.app-group-body {
    padding: 16px 0 0 16px;
}

.left-panel {
    background: var(--panelbackground);
    border: var(--border);
    border-radius: 8px;
    position: absolute;
    margin: 4px;
    left: 0;
    top: 0;
    bottom: 0;
    width: 380px;
    overflow: hidden;
}

.left-panel {
    background: var(--panelbackground);
    border: var(--border);
    border-radius: 8px;
    position: absolute;
    margin: 4px;
    left: 0;
    top: 0;
    bottom: 0;
    width: 380px;
    overflow: hidden;
}

    .left-panel.collapsed {
        border: none;
        display: none;
        margin: 0;
        overflow: hidden;
    }

.left-panel-toggle {
    position: absolute;
    left: 384px;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: var(--buttonactivecolor);
    border: 2px solid var(--highlightbordercolor);
    border-radius: 12px;
    width: 20px;
    height: 48px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    transition: left 0.2s ease, width 0.2s ease, background 0.15s ease;
}

.left-panel-toggle:hover {
    background: var(--highlightcolor);
    border-color: var(--highlightbordercolor);
}

.left-panel-toggle.collapsed {
    left: 14px;
    width: 28px;
}

.left-panel-toggle img {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1);
}

.center-panel.left-collapsed {
    left: 4px;
}

.center-panel.right-collapsed {
    right: 4px;
}

.right-panel.collapsed {
    border: none;
    display: none;
    margin: 0;
    overflow: hidden;
}

.right-panel-toggle {
    position: absolute;
    right: 400px;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 100;
    background: var(--buttonactivecolor);
    border: 2px solid var(--highlightbordercolor);
    border-radius: 12px;
    width: 20px;
    height: 48px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    transition: right 0.2s ease, width 0.2s ease, background 0.15s ease;
}

.right-panel-toggle:hover {
    background: var(--highlightcolor);
    border-color: var(--highlightbordercolor);
}

    .right-panel-toggle.collapsed {
        right: 14px;
        width: 28px;
    }

.right-panel-toggle img {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1);
}

.center-panel {
    background: var(--panelbackground);
    border: var(--border);
    border-radius: 8px;
    margin: 4px;
    position: absolute;
    left: 384px;
    right: 400px;
    top: 0;
    bottom: 0;
    overflow: auto;
    overflow: hidden;
}

.center-panel .canvas2d,
.center-panel .canvas3d,
.center-panel .report,
.center-panel .pmm,
.center-panel .datagrid {
    border: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*border-radius: 16px;
        left: 8px;
        right: 8px;
        top: 8px;
        bottom: 8px;*/
    overflow: hidden;
}

.center-panel .pmm {
    background-color: var(--panelbackground);
}

/* ---------- Slab (M53) Model tab: 2x2 grid of equal views ----------
   This is the WIDE layout. Once the tab body drops to 944px or less the
   narrow-panel block further down re-lays the same four groups as a single
   scrolling column - see "narrow-panel stacked layout".

   The container fills the center-tab body and lays its four view groups out
   as a 2x2 CSS grid, so all four fit the viewport with no scrolling. Groups
   are auto-placed in add order: Plan View (top-left), View 2 (top-right),
   View 3 (bottom-left), View 4 (bottom-right). `minmax(0, 1fr)` tracks and
   `min-*: 0` on the cells let them shrink below content size (the standard
   grid/flex blowout guard) so the canvases never force a scrollbar. */
.center-panel .slab-model-canvas {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Each view fills its grid cell. The four leading classes raise specificity
   above the base `.center-panel .tab-body .property-group { margin: ... }`
   rule so the groups sit flush in their cells. `position` is deliberately left
   unset so the per-cell "maximize" toggle (.property-group.maximize) still
   lifts a view to fill the whole tab. */
.center-panel .tab-body .slab-model-canvas > .property-group {
    margin: 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.slab-model-canvas > .property-group > .property-group-body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}

/* Beat the base `.property-group-body .viewer-container { height: 300px }`
   default so the canvas fills the cell instead of a fixed 300px band. */
.slab-model-canvas .property-group-body .viewer-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
}

.slab-model-canvas .property-group-body .viewer-container canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ---------- Slab (M53) Model tab: narrow-panel stacked layout ----------
   The 2x2 grid only reads well while each cell stays wide enough for the
   drawings' dimension strings; below roughly 460px per cell the annotations
   start colliding. The switch is driven by a container query on the tab body
   rather than a viewport breakpoint, because the centre panel's width is not
   monotonic in window width (below the 1400px block further down the right panel
   drops underneath the left one, so the centre suddenly gets ~400px WIDER) and
   because collapsing either side panel resizes it with no window resize at all.
   Querying the tab body tracks the width the canvases actually get in all of
   those cases.

   944px of tab body = two 460px cells + one 8px gap + 2 x 8px padding, so at or
   below that the four views drop to a single full-width column.

   The `> .property-group` in the :has() is load-bearing. ShowReport() empties the
   centre panel and drops a UIReport into it, but never clears its class, so on the
   Report tab this same element is still `.slab-model-canvas` - just with no view
   groups in it. Without the guard the report would inherit the stacked rows below
   (four empty 460/460/300/300 tracks and a scrollbar over nothing) and the paint
   containment. */
.slab .center-panel .tab-body:has(.slab-model-canvas > .property-group) {
    container-type: inline-size;
    container-name: slabmodel;
    /* Paint containment, on top of the layout containment `container-type` already
       carries, is what makes this the containing block for the FIXED maximise
       override below - Chromium only grants that for `contain: paint`. It clips to
       the padding box, which `overflow: auto` on .tab-body already did. */
    contain: paint;
}

@container slabmodel (max-width: 944px) {
    /* One column, one view per row, and the container scrolls - four rows at
       their floors are always taller than the tab. Rows follow the add order in
       CreateModelGroups: Plan, 3D, Short Span Elevation, Long Span Elevation.

       The row floors are deliberately not uniform, because a canvas fits its
       drawing to whichever dimension runs out first. Plan and 3D are near-square,
       so a full-width but short row would scale them DOWN and make the overlap
       worse, not better - they get 460px. The two elevations are wide and flat
       and fit to width, so 300px is enough for them. The `1fr` maxima let the
       rows share any surplus on a very tall panel; with none to share, each falls
       back to its floor. */
    .center-panel .slab-model-canvas {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(460px, 1fr) minmax(460px, 1fr) minmax(300px, 1fr) minmax(300px, 1fr);
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* `.property-group.maximize` pins itself with `inset: 0 !important`, which
       resolves against `.slab-model-canvas` - now a scroll container, so a view
       maximised after scrolling down would be anchored off the top of the screen.
       `fixed` re-anchors it to the tab body, which the `contain: paint` above makes
       the containing block for fixed descendants - without that paint containment
       this resolves against the WHOLE window and covers the app menu. Scoped inside
       the same @container block as the scrolling that creates the problem. */
    .slab-model-canvas > .property-group.maximize {
        position: fixed;
    }
}

.center-panel.frame {
    right: 8px;
}

.right-panel {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 8px;
    margin: 4px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 396px;
    overflow: hidden;
}

.right-panel .display .property-text {

}

    .right-panel .property.display > div:first-child {
        width: 65%
    }

    .right-panel .property.display > div:nth-child(2) {
        width: 35%
    }

    .right-panel .property.display .property-value {
        padding: 4px 0;
        margin-right: 16px;
    }

.property-groups .tab {
    background-color: var(--windowbackground);
    border-radius: 8px;
    position: relative;
    margin: 4px;
    overflow: hidden;
}

.property-groups .tab-header,
.property-groups .tab-body {
    background-color: unset;
    position: relative !important;
    top: 0;
}

.tab {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

    .tab .tab-header {
        align-items: center;
        border-bottom: var(--border);
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 36px;
        overflow: hidden;
    }

.tab-header-item {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0 24px 0 16px !important;
    height: 100%;
}
    .tab-header-item img {
        margin-right: 12px !important;
        margin-top: 0 !important;
        width: 20px !important;
    }

    .tab-header-item.selected {
        background-color: var(--buttonactivecolor) !important;
        border-radius: 8px 8px 0 0;
        color: #FFF;
        font-weight: bold;
    }

.tab-header-item.selected img {
    filter: brightness(0) invert(1);
}

.tab.center .tab-header-item.selected {
    border-radius: 8px;
}

.tab-header-text {
    margin-top: 0 !important;
    position: relative;
}

body .tab-body {
    background-color: var(--containerbackground);
    top: 36px;
}

body .panel {
    background-color: transparent;
    border: none;
}

body .property-group-header {
    align-items: center;
    background-color: transparent !important;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: bold;
    margin: 0 8px;
    padding: 8px 0 !important;
    position: relative;
}

body .center-panel .property-group-header {
    padding: 5px 8px 8px 8px !important;
}

body .property-group {
    background-color: var(--panelbackground);
    border: none;
    border-radius: 8px;
    margin: 4px;
    padding: 8px;
}

.property-group.maximize {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: unset !important;
    width: unset !important;
    z-index: 10 !important;
}

body .tab.center .canvas2d,
body .tab.center .canvas3d,
body .tab.center .report {
    border: none;
    border-radius: 16px;
    left: 8px;
    right: 8px;
    top: 0;
    bottom: 8px;
    overflow: hidden;
}

body .canvas2d .toolbar,
body .canvas3d .toolbar {
    background-color: var(--panelbackground);
    border-bottom: var(--border);
    align-items: center;
    display: flex;
    height: 43px;
    position: absolute;
    top: 0;
    width: 100%;
}

body .property-unit .property-value {
    width: calc(100% - 48px);
}

body .main-container {
    bottom: 0;
}

.app-container.has-details {
    width: calc(100% - 336px);
}

.app-details {
    background-color: #eff1f2;
    border-radius: 8px;
    position: absolute;
    top: 16px;
    bottom: 16px;
    right: 16px;
    width: 320px;
    padding-bottom: 60px;
    overflow: auto;
}

.app-description,
.app-title {
    padding: 16px;
}

.app-title {
    border-bottom: var(--border);
    font-weight: 500;
    margin: 16px;
    padding: 8px 0;
}

.app-new-model {
    background-color: var(--button);
    color: var(--buttonlight);
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
}

.button.app-new-model:hover {
    background-color: #006496 !important;
}

.app-details .property {
    display: block;
    padding: 2px 16px;
    margin-bottom: 8px;
}

.app-details .property-text {
    color: #888;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    width: 100%;
}

.app-details .property-value {
    background-color: var(--panelbackground);
    width: 100%;
}

.app-group .app-group {
    background-color: var(--panelbackground);
    margin: 0 16px 16px 16px;
    padding: 0 0 8px 0;
}

.app-group .app-group .app-group-header {
    margin-bottom: 8px;
}

.app-thumbnail {
    background-color: var(--panelbackground);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    margin-right: 16px;
    min-height: 96px;
    width: 320px;
}

.app-thumbnail.disabled {
    background-color: #EEE;
    box-shadow: none !important;
}

.app-thumbnail:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.app-thumbnail:hover .app-thumbnail-text {
    font-weight: bold;
    white-space: nowrap;
}

.app-thumbnail img {
    display: block;
    margin: 16px 0 0 16px;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.app-thumbnail a {
    color: #000;
    text-decoration: none;
}

.app-thumbnail-text {
    font-size: 16px;
    font-weight: bold;
    padding: 8px 0;
    position: absolute;
    left: 90px;
    top: 16px;
}

.app-thumbnail-description {
    color: rgb(150, 150, 150);
    position: absolute;
    left: 90px;
    top: 48px;
    right: 16px;
}

.design-group .button {
    background-color: #0067c0;
    border-radius: 16px;
    color: #FFF;
    display: block;
    font-weight: bold;
    padding: 12px 0;
    text-align: center;
}

body .tab-header {
    border: none;
}

body .treeview {
    background-color: var(--panelbackground);
    border: none;
    border-radius: 8px;
    margin: 8px;
    position: unset;
}

body .treeview-header {
    background-color: #006496 !important;
    color: #FFF;
    border-bottom: 2px solid #006496;
    height: 32px;
}

body .treeview-body {
    padding: 8px;
    top: 32px;
    bottom: 0 !important;
    position: unset;
}

body .treeview-body.false {
    top: 0 !important;
}

.frame .main-menu {
    background-color: var(--panelbackground);
    border-bottom: var(--border);
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 43px;
    display: flex;
}


.frame .main-panel {
    position: absolute;
    top: 43px;
    bottom: 0;
    left: 0;
    right: 0;
}


.frame .panel.toolbar>.button img {
    height: 20px;
    width: 20px;
}

.frame .panel.toolbar>.button:first-child {
    border-radius: 8px 0 0 0;
}

.frame .center-panel {
    right: 4px;
}

.frame .center-panel .canvas2d {
    border-radius: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.canvas-container {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

.frame .panel-header {
    font-size: 14px;
    height: 43px;
    padding-left: 16px;
}

.panel-body {
    top: 43px !important;
    bottom: 46px !important;
}

.propertygrid-footer .button {
    height: 32px !important;
}

.table {
    margin: 8px 0 8px 0;
}

.table-header {
    margin: 8px 0 8px 12px;
}

.property-table thead th {
    font-weight: bold;
}

.viewer-container .toolbar .property {
    display: inline-flex;
    padding: 8px 0;
}

.viewer-container .toolbar>div {
    display: inline-flex;
}

.viewer-container .toolbar .property .property-text {
    margin-right: 16px;
    width: unset;
}

.viewer-container .toolbar .property-checkbox .property-value {
    padding: 4px 0;
}

.model-set-line {
    margin-left: 8px;
}

.toolbar .left-separator {
    border-radius: 0 !important;
    border-left: var(--border) !important;
    padding-left: 8px !important;
    margin-left: 4px;
}

.toolbar .right-separator {
    border-radius: 0 !important;
    border-right: var(--border) !important;
    padding-right: 8px !important;
    margin-right: 4px;
}

/* The right-docked end of a toolbar strip: UIToolbar.Menu followed by every
   UIToolbar.MenuItems button. Laid out as a row - a .button is itself display:flex,
   so a plain block container would stack them. */
.toolbar-menu {
    align-items: center;
    display: flex;
    gap: 6px;
    position: absolute;
    right: 8px;
    top: 8px;
}

.toolbar  {
    position: relative !important;
}

.toolbar-menu .button .property-list-container {
    left: unset;
    right: 0;
    top: 24px;
}

.toolbar-menu .button .property-input {
    width: unset;
}

.toolbar .disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: default;
}

.toolbar .enabled {
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
}

.toolbar-menu .button .property-group-list-body .property {
    padding: 2px 0;
}

.pmm {
    position: absolute;
}

.pmm .canvas2d {
    border-radius: 0;
}

.pmm .viewer-container.canvas3d-container {
    border-right: var(--border);
    border-radius: 8px 0 0 8px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 50%;
}

.pmm .viewer-container {
    left: 50%;
    right: 0;
}

.pmm .viewer-container .canvas2d {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pmm>.viewer-container:nth-child(2) {
    border-radius: 0 8px 0 0;
    border-bottom: var(--border);
    bottom: 50%;
    top: 0;
}

.pmm>.viewer-container:nth-child(3) {
    border-radius: 0 0 8px 0;
    bottom: 0;
    top: 50%;
}

.viewer-container.canvas3d-container>.toolbar {
    background-color: var(--panelbackground);
    border-bottom: var(--border);
    height: 43px;
    width: 100%;
}

.pmm .viewer-container .canvas2d.has-toolbar {
    top: 43px;
}

.viewer-container>.toolbar {
    border-bottom: var(--border);
    height: 43px;
    width: 100%;
}

.viewer-container .canvas3d.has-toolbar {
    top: 43px;
}

/* Beams M11 Model tab: push the canvas below its docked toolbar. .canvas2d is absolutely
   positioned at top:0, so without this the 43px strip would sit on top of the drawing.
   Deliberately keyed on the .beams-model-bar sibling rather than on .canvas2d.has-toolbar
   in general: that generic form would silently re-position the canvas of any app that
   later gives a UICanvas2D a Blazor toolbar. Canvas2D.razor renders the toolbar
   immediately before the canvas, so the adjacent-sibling match is exact. */
.viewer-container > .toolbar.beams-model-bar + .canvas2d {
    top: 43px;
}

.authenticate-button.button {
    background-color: #0067c0;
    border-radius: 8px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    padding: 0 12px;
}

.menu-container-buttons .user {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-right: 16px;
}

/*
@media only screen and (max-width: 1600px) {
    .left-panel {
        bottom: calc(50% - 4px);
    }

    .frame .left-panel {
        bottom: 0;
    }

    .center-panel {
        bottom: 0;
        left: 436px;
        right: 4px;
    }

    .frame .center-panel {
        bottom: 4px;
    }

    .right-panel {
        top: 50%;
        left: 0;
        width: 420px;
    }
}*/

.dialog.form {
    left: calc(50% - 300px);
    top: calc(50% - 200px);
    height: 400px;
    width: 600px;
}

.dialog-footer .button {
    border-radius: 16px;
}

.app-user {
    border-radius: 16px;
    float: left;
    overflow: hidden;
    padding: 16px;
    width: 320px;
}

.app-user-picture {
    text-align: center;
}

.app-user-picture img {
    border-radius: 50%;
    margin-bottom: 16px;
    width: 120px;
}

.app-user-name {
    font-size: 16px;
    font-weight: bold;
    margin-left: 16px;
}

.app-user-account {
    margin-left: 16px;
}

.app-container {
    margin-left: 336px;
}

.app-user-stats {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    margin: 16px 0;
    padding: 16px;
}

.app-user-stats-header {
    font-size: 14px;
    font-weight: bold;
}

.app-user-stats-body {
    background-color: #EEE;
    border-radius: 8px;
    height: 64px;
    margin-top: 8px;
}

.design-button {
    background-color: #006496 !important;
    color: #FFF;
    margin: 0 auto 0 auto;
    padding: 2px 0 4px 0;
    position: sticky;
    bottom: 8px;
    width: 100px;
}

.right-button {
    background-color: #006496 !important;
    color: #FFF;
    padding: 2px 8px;
    bottom: 8px;
    margin: 10px 60px;
    display: flex;
    justify-self: right;
    flex-direction: row;
}


.app-table .property-table .has-top-header thead tr:first-child th {
    /*    background-color: #006496 !important;
    color: #FFF;*/
    height: 32px;
    outline: var(--border2);
    top: -1px;
}

.app-table .property-table .has-top-header thead tr:nth-child(2) th {
    background-color: var(--panelbackground);
    outline: var(--border2);
    position: sticky;
    top: 31px;
}

.toolbar-dropdown {
    border: var(--border);
    border-radius: 8px;
    position: relative;
    padding: 0 4px;
    margin: 0 4px;
}

.toolbar-dropdown .icon.mdi {
    cursor: pointer;
    display: inline-block;
    font-size: 24px;
}

.toolbar-dropdown-body .button {
    justify-content: left;
    border-radius: 0 !important;
    text-align: left;
    width: 100%;
}

.toolbar-dropdown .button .text {
    margin: 0 8px;
    white-space: nowrap;
}

.toolbar-dropdown-header {
    align-items: center;
    display: flex;
}

.toolbar-dropdown .toolbar-dropdown-body {
    border: var(--border);
    background-color: var(--panelbackground);
    position: absolute;
    left: 0;
    top: 33px;
    z-index: 1000;
}

.treeview-node-toolbar {
    display: none;
}

.treeview-node-header:hover .treeview-node-toolbar {
    display: block;
}

.analysis .right-panel {
    background: #eff1f2;
    margin: 0 4px 4px 4px;
    top: unset;
    left: 0;
    bottom: 0;
    height: calc(40% - 4px);
    width: 380px;
    display: block;
}

.group-button {
    background-color: #006496 !important;
    border-radius: 8px !important;
    color: #FFF;
    margin: 8px auto 0 auto;
    padding: 8px 0;
    position: sticky;
    bottom: 8px;
    width: 100px;
}

.menu-toolbar .button img {
    width: 27px;
    height: 24px;
}

.menu-left-toolbar {
    margin-left: 32px;
}

.menu-center-toolbar {
    margin: 0 auto;
}

.menu-center-toolbar .toolbar,
.menu-right-toolbar .toolbar {
    white-space: nowrap;
}

.menu-right-toolbar {
    margin-right: 10px;
}

.menu-right-toolbar .tooltip {
    left: unset;
    right: 0;
}

.menu-right-toolbar .toolbar .button .property-list-container {
    left: unset;
    right: 0;
}

.tab-tools-canvas .property-group-body .viewer-container {
    border: none;
    border-radius: 0 0 8px 8px;
    position: absolute;
    left: 0;
    right: 0;
    top: 42px;
    bottom: 0;
    margin-bottom: 0;
    height: unset;
    width: 100%
}

.property-group-body .viewer-container canvas {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
}

.toolbar .play-button {
    background-color: #006496;
    border-radius: 8px !important;
    padding: 2px 8px;
    margin-right: 4px;
}

.toolbar .play-button i {
    color: #FFF;
}

.toolbar .play-button img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(100%) saturate(42%) hue-rotate(223deg) brightness(109%) contrast(99%);
    margin: 2px 0;
}

.property-group.no-expand .group-toolbar>div {
    right: 0;
}

.property-group.has-maximize.no-expand .group-toolbar>div {
    right: 28px;
}

.group-toolbar {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.group-toolbar>div {
    display: flex;
    align-items: center;
    margin-top: 6px;
    top: 0;
}

.group-toolbar .property {
    font-weight: normal;
    font-size: 12px;
    padding: 2px 2px;
}

.group-toolbar .property-enum .property-value {
    background-color: var(--panelbackground);
    min-width: 140px;
}

.property-group .group-toolbar .property:first-child {
    margin-top: 0;
}

.info {
    position: absolute;
    bottom: 16px;
    font-size: 14px;
    left: 0;
    right: 0;
    text-align: center;
    animation-name: fadeIn;
    animation-duration: 6s;
    animation-fill-mode: forwards;
}

.info .icon {
    font-size: 32px;
    margin-right: 12px;
}

.info .info-container {
    align-items: center;
    background-color: #DDFFDD;
    border-radius: 8px !important;
    border: 1px solid #AAA;
    padding: 4px 32px 4px 16px;
    display: inline-flex;
}

.info.warning .info-container {
    align-items: center;
    background-color: #FFEEDD;
    border-radius: 8px !important;
    border: 1px solid #AAA;
    display: inline-flex;
}

.info.error .info-container {
    align-items: center;
    background-color: #FF8888;
    color: #FFF;
    border-radius: 8px !important;
    border: 1px solid #AAA;
    display: inline-flex;
}

.button.settings-menu-button {
    border: none;
}

/* Matched to the SPA's .acct-user: a 32px transparent pill that only shows its
   outline on hover, holding an initials avatar and the name. The old version was
   an always-white 36px capsule with a 20px outline glyph, which read as a button
   where Beam's reads as an identity. */
.button.user-menu-button {
    align-items: center;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 999px !important;
    gap: 8px;
    height: 32px;
    min-height: 32px;
    min-width: 32px;
    justify-content: flex-start;
    padding: 0 10px 0 4px;
    max-width: 15rem;
    width: auto;
}

.button.user-menu-button:hover {
    background-color: var(--windowbackground) !important;
    border-color: var(--header-line);
}

/* Signed out there is no name and no initials to show, so it falls back to the
   round icon button - the SPA shows Sign Up / Login instead, which is a bigger
   change than styling. */
.button.user-menu-button:not(.has-display-name) {
    border-radius: 50% !important;
    justify-content: center;
    padding: 0;
    width: 36px;
    height: 36px;
    min-height: 36px;
}

/* Signed in, the label IS the avatar and the name (PageView.AccountLabel), so
   the icon slot would only add a second glyph in front of them. */
.button.user-menu-button.has-display-name .button-icon {
    display: none;
}

.button.user-menu-button .button-text {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--header-fg);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* Initials on a filled circle - the SPA's .acct-avatar, which is what it renders
   for an account with no provider photo. */
.button.user-menu-button .header-avatar {
    align-items: center;
    background: #2a7b8c;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex: none;
    font-size: 11px;
    font-weight: 700;
    height: 26px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1;
    overflow: hidden;
    width: 26px;
}

.button.user-menu-button .header-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.dark .button.user-menu-button .header-avatar {
    background: #7fd3e3;
    color: #06283d;
}

.button.user-menu-button .button-icon {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 20px;
}

.button.user-menu-button .button-icon img {
    height: 20px;
    margin: 0;
    width: 20px;
}

.button.user-menu-button.ismenu .property-list-container {
    background-color: #FFF;
    border: var(--border);
    left: unset;
    right: 0;
    top: calc(100% + 8px);
    min-width: 320px !important;
    padding: 0 !important;
}

.button.user-menu-button .property-group-list-body {
    display: block;
    width: 100%;
}

.button.user-menu-button .property-group-list-body > div {
    width: 100%;
}

.button.user-menu-button .property-group-list-body .property-icon {
    display: flex;
    flex: 0 0 22px;
    justify-content: center;
}

.button.user-menu-button .property-group-list-body > .property,
.button.user-menu-button .property-group-list-body > .button,
.button.user-menu-button .property-group-list-body > div > .property,
.button.user-menu-button .property-group-list-body > div > .button {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: flex-start;
    min-height: 0;
    padding: 8px 16px;
    text-align: left;
    width: 100%;
}

.button.user-menu-button .property-group-list-body > .property .property-text,
.button.user-menu-button .property-group-list-body > div > .property .property-text {
    display: none;
}

.button.user-menu-button .property-group-list-body > .property .property-value,
.button.user-menu-button .property-group-list-body > div > .property .property-value {
    flex: 1;
    margin-top: 0;
    width: auto;
}

.button.user-menu-button .property-group-list-body > .property .property-input.disabled,
.button.user-menu-button .property-group-list-body > div > .property .property-input.disabled {
    background-color: transparent;
    border: none;
    overflow: hidden;
    padding: 0;
    text-align: left;
    text-overflow: ellipsis;
    line-height: 1.4;
    white-space: nowrap;
    width: 100%;
}

.button.user-menu-button .property-group-list-body > .property.menu-profile .property-input.disabled,
.button.user-menu-button .property-group-list-body > div > .property.menu-profile .property-input.disabled {
    color: var(--fontcolor);
    font-size: 16px;
    font-weight: 700;
}

.button.user-menu-button .property-group-list-body > .property.menu-email .property-input.disabled,
.button.user-menu-button .property-group-list-body > div > .property.menu-email .property-input.disabled {
    color: var(--fontcolorlight);
    font-size: 14px;
}

.button.user-menu-button .property-group-list-body > .property .property-icon img,
.button.user-menu-button .property-group-list-body > .button .button-icon img,
.button.user-menu-button .property-group-list-body > div > .property .property-icon img,
.button.user-menu-button .property-group-list-body > div > .button .button-icon img {
    height: 22px;
    margin: 0;
    width: 22px;
}

.button.user-menu-button .property-group-list-body > .button,
.button.user-menu-button .property-group-list-body > div > .button {
    background-color: transparent;
    border: none;
    border-radius: 0 !important;
}

    .button.user-menu-button .property-group-list-body > .button .button-text,
    .button.user-menu-button .property-group-list-body > div > .button .button-text {
        flex: 1;
        margin: 0 8px 0 8px;
        text-align: left;
    }

.button.user-menu-button .property-group-list-body > .button:hover,
.button.user-menu-button .property-group-list-body > div > .button:hover {
    background-color: var(--buttonhovercolor) !important;
}

.button.user-menu-button .property-group-list-body > .separator,
.button.user-menu-button .property-group-list-body > div > .separator {
    border-top: var(--border)!important;
}

.parameter-common {
    background-color: var(--panelbackground);
    border-bottom: var(--border);
    overflow: hidden;
    padding-top: 6px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.parameter-common>.property-group {
    border-radius: 0;
    border-top: 1px solid var(--bordercolor);
    margin: 4px 0 0 0;
}

.center-button-container {
    height: 34px;
    margin: 0;
    padding: 0;
    position: relative;
}

    .center-button-container .button,
    .button-highlight {
        background-color: var(--buttonactivecolor) !important;
        border-radius: 8px !important;
        color: #FFF;
        padding: 7px 8px;
        display: flex;
        height: 30px;
        width: 130px;
        margin: 0 8px 0 auto;
    }

.menu-container .button-highlight {
    height: unset;
    padding: 2px 6px !important;
    margin-top: 4px;
    vertical-align: middle;
}

.menu-container .button-highlight img {
    width: 20px;
}

.button-highlight .button-text {
    color: #FFF;
}

.button-highlight img {
    filter: brightness(0) invert(1) !important;
}

.center-button-container .property-enum {
    border: 1px solid var(--bordercolor);
    border-radius: 4px;
    padding: 0 8px;
    position: absolute;
    height: 30px;
    top: 0;
    left: 8px;
    width: 160px;
}

.center-button-container .property-enum .property-text {
    padding-left: 4px;
}

.center-button-container .property-enum .property-value {
    border: none;
    border-left: 1px solid #888;
    border-radius: 0;
    margin-right: -4px;
    padding-left: 8px;
    width: 100px;
}

.center-button-container .property-enum .expander-header-icon {
    top: 4px;
}

.eaglei-link {
    background-color: #FFF;
    border-radius: 16px;
    border: 1px solid #CCC;
    padding: 8px 16px 4px 16px;
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 1000;
}

.eaglei-link img {
    width: 60px;
    height: auto;
}

.button .property-group-list-body .button.logout-button {
    background-color: #0083C4 !important;
    border-radius: 8px !important;
    color: #FFF;
    text-align: center;
    justify-content: center;
    padding: 6px 0;
}

.button .property-group-list-body .button.logout-button a {
    color: #FFF;
}

.button .property-group-list-body .button.logout-button .button-text {
    display: inline-flex;
    justify-content: center;
}

.datatable {
    border: none;
    border-radius: 8px;
    margin: 8px;
    overflow: hidden;
}

.datatable table {
    border: none;
    border-radius: 8px;
    width: 100%;
}

.datatable table thead {
    background-color: var(--panelbackground);
    border-bottom: var(--border);
}

.datatable table thead th {
    font-weight: bold;
    padding: 8px;
    text-align: left;
}

.datatable table tbody tr:nth-child(odd) {
    background-color: var(--containerbackground);
}

.datatable .datatable-text {
    font-weight: bold;
    margin-bottom: 8px;
}

.fea-calculations {
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: unset !important;
    width: unset !important;
    background-color: var(--panelbackground);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.fea-calculations .form-body {
    overflow-x: hidden;
    overflow-y: auto;
}

.fea-calculations .datatable table {
    width: unset;
}

.fea-calculations .form-header .button {
    border: none;
}

/* Calculations panel - docked at the bottom of the canvas. */
.fea-matrices-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--fea-matrices-height, 50%);
    background-color: var(--panelbackground);
    border: var(--border);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
    z-index: 5;
    display: flex;
    flex-direction: column;
    overflow: auto;
    resize: none;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: calc(100% - 72px);
}

.fea-matrices-panel.right {
    left: auto;
    top: 43px;
    bottom: 0;
    width: var(--fea-matrices-width, 50%);
    height: calc(100% - 43px);
    max-width: calc(100% - 120px);
    max-height: calc(100% - 43px);
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.12);
}

.canvas-2D.with-matrices-panel-bottom > canvas {
    width: 100%;
    height: calc(100% - var(--fea-matrices-height, 50%) - 43px) !important;
}

.canvas-2D.with-matrices-panel-right > canvas {
    width: calc(100% - var(--fea-matrices-width, 50%)) !important;
}

.fea-matrices-splitter {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--fea-matrices-height, 50%);
    height: 8px;
    cursor: row-resize;
    background: transparent;
    z-index: 6;
}

.fea-matrices-splitter.right {
    top: 43px;
    bottom: 0;
    left: auto;
    right: var(--fea-matrices-width, 50%);
    width: 8px;
    height: auto;
    cursor: col-resize;
}

.fea-matrices-splitter::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3px;
    height: 1px;
    background: var(--bordercolor, #d8dde3);
}

.fea-matrices-splitter.right::before {
    top: 0;
    bottom: 0;
    left: 3px;
    right: auto;
    width: 1px;
    height: auto;
}

.fea-matrices-splitter:hover::before {
    height: 2px;
    background: var(--primary, #2d7f8f);
}

.fea-matrices-splitter.right:hover::before {
    width: 2px;
    height: auto;
}

.fea-matrices-header {
    padding: 10px 16px;
    border-bottom: var(--border);
    flex: 0 0 auto;
}

.fea-matrices-title {
    font-weight: bold;
    font-size: 1.05em;
}

.fea-matrices-scope {
    color: var(--secondarytext, #666);
    font-size: 0.85em;
    margin-top: 6px;
}

.fea-matrices-selectorrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.fea-matrices-selectorlabel {
    font-size: 0.9em;
    color: var(--secondarytext, #555);
}

.fea-matrices-selector {
    flex: 0 1 auto;
    min-width: 160px;
    padding: 4px 8px;
    border: 1px solid var(--bordercolor, #ccc);
    border-radius: 4px;
    background: var(--inputbackground, #fff);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.fea-matrices-workinglabel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    color: var(--secondarytext, #555);
    cursor: pointer;
    margin-left: auto;
    white-space: nowrap;
}

.fea-matrices-workingcheck {
    cursor: pointer;
}

.fea-matrices-entry {
    margin-bottom: 22px;
}

.fea-matrices-entrytitle {
    font-weight: 600;
    margin-bottom: 6px;
}

.fea-notation-block {
    background: var(--altpanelbackground, #f9fafb);
    border: 1px solid var(--bordercolor, #d9dee7);
    border-radius: 8px;
    padding: 16px 18px;
}

.fea-notation-block .fea-matrices-entrytitle {
    margin-bottom: 14px;
}

.fea-notation-section {
    border-bottom: 1px solid var(--bordercolor, #d9dee7);
    color: var(--secondarytext, #444);
    font-weight: 600;
    margin: 18px 0 8px 0;
    padding-bottom: 6px;
}

.fea-notation-section:first-of-type {
    margin-top: 0;
}

.fea-notation-list {
    display: grid;
    grid-template-columns: minmax(150px, max-content) minmax(320px, 1fr);
    column-gap: 28px;
    row-gap: 8px;
    margin: 0 0 12px 0;
}

.fea-notation-list dt,
.fea-notation-list dd {
    margin: 0;
    line-height: 1.35;
}

.fea-notation-list dt {
    font-family: var(--monofont, "Consolas", monospace);
    color: var(--primarytext, #222);
    white-space: nowrap;
}

.fea-notation-list dd {
    color: var(--secondarytext, #555);
}

.fea-matrices-step {
    font-size: 0.85em;
    color: var(--secondarytext, #666);
    margin: 8px 0 4px 0;
    font-style: italic;
}

.fea-matrices-body .fea-matrices-symbolic td,
.fea-matrices-body .fea-matrices-substituted td {
    font-family: var(--monofont, "Consolas", monospace);
    font-size: 0.8em;
    color: var(--secondarytext, #444);
    background: var(--altpanelbackground, #f7f7f7);
}

.fea-matrices-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px 0;
    font-size: 0.85em;
}

.fea-matrices-legendlabel {
    color: var(--secondarytext, #555);
    margin-right: 4px;
}

.fea-matrices-legendchip {
    padding: 2px 10px;
    border-radius: 12px;
    border: 1px solid var(--bordercolor, #ccc);
    color: #222;
    white-space: nowrap;
}

/* Max Deflection teaching block - formula + sampling explanation + numeric result. */
.fea-maxdef-block {
    background: var(--altpanelbackground, #f9fafb);
    border: 1px solid var(--bordercolor, #ddd);
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 10px;
}

.fea-maxdef-text {
    margin: 6px 0;
    font-size: 0.9em;
    color: var(--secondarytext, #444);
    line-height: 1.5;
}

.fea-maxdef-eqn {
    font-family: var(--monofont, "Consolas", monospace);
    font-size: 1.0em;
    padding: 8px 12px;
    margin: 6px 0;
    background: var(--panelbackground, #fff);
    border-left: 3px solid #2563eb;
    border-radius: 3px;
    overflow-x: auto;
}

.fea-maxdef-list {
    margin: 6px 0 8px 18px;
    padding: 0;
    font-family: var(--monofont, "Consolas", monospace);
    font-size: 0.85em;
    color: var(--secondarytext, #444);
}

.fea-maxdef-list li {
    margin: 2px 0;
}

.fea-maxdef-result {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    font-size: 0.95em;
    color: #664d03;
}

/* DOF labels in matrix headers/row-labels - italic, smaller, no background-coloring. */
.fea-matrices-body .fea-dof-label {
    font-style: italic;
    color: var(--secondarytext, #555);
    font-family: var(--monofont, "Consolas", monospace);
    font-size: 0.85em;
}

.fea-matrices-body table.has-row-labels tbody td:first-child,
.fea-matrices-body table.has-row-labels thead th:first-child {
    background: var(--altpanelbackground, #f5f5f5) !important;
    text-align: left;
    border-right: 2px solid var(--bordercolor, #ccc);
    white-space: nowrap;
    /* Sticky so DOF labels stay visible while scrolling a wide matrix horizontally. */
    position: sticky;
    left: 0;
    z-index: 2;
}

.fea-matrices-body table thead th {
    background: var(--altpanelbackground, #f5f5f5);
    border-bottom: 2px solid var(--bordercolor, #ccc);
    padding: 4px 8px;
    font-weight: normal;
    text-align: center;
    /* Sticky header - stays visible when vertically scrolling. */
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Where header and row-label intersect - top-left cell needs higher z-index */
.fea-matrices-body table.has-row-labels thead th:first-child {
    z-index: 3;
}

/* Hover highlight - cells sharing the same contributor group light up together
   across the assembly-map / with-values / result tables. */
.fea-matrices-body td[data-contrib] {
    cursor: help;
    transition: box-shadow 80ms ease, filter 80ms ease;
}

.fea-matrices-body td.contrib-hovered {
    box-shadow: inset 0 0 0 2px #2563eb;
    filter: brightness(0.92);
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.fea-matrices-body {
    flex: 1 1 auto;
    /* min-width: 0 lets the flex child shrink below its intrinsic content width,
       which is what enables overflow-x: auto to actually produce a scrollbar
       when a wide matrix (e.g. 15×15 K) is rendered inside. */
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    padding: 12px 16px;
}

.fea-matrices-body .datatable {
    margin-bottom: 18px;
    width: max-content;
    max-width: none;
}

.fea-matrices-body .datatable-text {
    font-weight: 600;
    margin-bottom: 4px;
    position: sticky;
    left: 0;
}

.fea-matrices-body .datatable table {
    width: max-content;
    max-width: none;
    border-collapse: collapse;
    font-family: var(--monofont, "Consolas", monospace);
    font-size: 0.85em;
}

.fea-matrices-body .datatable td {
    padding: 3px 8px;
    text-align: right;
    border: 1px solid var(--bordercolor, #ddd);
}

.fea-matrices-empty {
    color: var(--secondarytext, #888);
    padding: 16px 0;
    font-style: italic;
}

.param-header {
    border-bottom: var(--border);
    font-weight: bold;
    margin: 16px 12px 8px 12px;
    padding: 2px 0 8px 0;
}

.pointer {
    border-radius: 50%;
    border: 2px solid #000;
    position: absolute;
    background-color: #FF0;
    width: 10px;
    height: 10px;
}

.clipping-plane-ui {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 8px;
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 200px;
    padding: 8px 16px;
}

.clipping-plane-ui>.text {
    font-weight: bold;
    margin-bottom: 8px;
}

.clipping-plane-ui .button {
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    margin-right: 4px;
    position: absolute;
    top: 4px;
    right: 4px;
    height: 24px;
    width: 24px;
}

.range-slider-val-left,
.range-slider-val-right {
    display: none;
}

.range-control {
    position: relative;
    width: 100%;
    height: 12px;
    margin-top: 8px;
}

.range-control .range-control-body {
    margin-left: 12px;
    width: calc(100% - 24px);
}

.range-control .range-control-body-back {
    background-color: #888;
    border-radius: 4px;
    height: 4px;
    width: 100%;
    position: absolute;
}

.range-control-left {
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 12px solid var(--rangeslider);
    margin-left: 0 !important;
    margin-top: -4px;
    position: absolute;
}

.range-control-right {
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 12px solid var(--rangeslider);
    margin-left: 0 !important;
    margin-top: -4px;
    right: 0;
    position: absolute;
}

.content-panel {
    background-color: var(--panelbackground);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.context-menu {
    position: absolute;
}

.context-menu .button {
    border: none;
    border-radius: 4px !important;
    text-align: left;
    justify-content: left;
}

.context-menu .button.separator, .context-menu .input.separator {
    border-bottom: var(--border);
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-bottom: 8px;
}

.context-menu .input {
    align-items: center;
    display: flex;
    padding: 4px 8px;
}

.context-menu .input > div:first-child {
    width: 80px;
}

.context-menu .input > div:nth-child(2) {
    border: var(--border);
    padding: 4px 8px;
}

.context-menu .input > div input {
    border: none;
}

.context-menu .button .icon {
    margin-right: 8px;
}


.strut-and-tie .right-panel {
     background: #eff1f2;
border-radius: 16px;
position: absolute;
margin: 8px;
        height: unset;
        top: 0;
        right: 0;
        width: 400px;
    overflow: hidden;
    }

.mini-app .menu-container, .mini-app .center-panel, .mini-app .right-panel, .mini-app .parameter-common, .mini-app .tab-header, .mini-app .right-panel-toggle {
    display: none !important;
}

.mini-app .main-container {
    top: 0 !important;
}

.mini-app .left-panel {
    right: 0;
    width: unset;
}

.mini-app .tab-body {
    bottom: 42px !important;
    top: 0;
}

.iframe-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

/* ── The workflow's "Result Preferences" panel ────────────────────────────────────────────
   Deliberately the same panel the Beam Analysis app puts beside its own report - its
   .report-pref-panel / #btnGenerateReport rules, values and all - so the two do not read as
   two different products. The Blazor property renderer gives us the same shape already
   (label left, control right); what was missing was the card, the row rhythm and a filled
   action instead of a plain bordered one.

   Scoped to .workflow-report-panel, the container class of a workflow that fills this panel
   (A.2), so every other right panel in the platform is untouched. */
.workflow-report-panel .right-panel .property-groups {
    background: #eef2f6;
    padding: 8px;
}

.workflow-report-panel .right-panel .property-group {
    background: #fff;
    border: 1px solid #d8e0ec;
    border-radius: 6px;
    padding: 12px;
}

.workflow-report-panel .right-panel .property-group-header {
    height: 30px;
    border-bottom: 1px solid #d8e0ec;
    margin-bottom: 10px;
}

.workflow-report-panel .right-panel .property-group-header-text {
    font-size: 12px;
    font-weight: 800;
    color: #1a2535;
}

.workflow-report-panel .right-panel .property {
    min-height: 30px;
    align-items: center;
}

.workflow-report-panel .right-panel .property-text {
    font-size: 12.5px;
    font-weight: 400;
    color: #56687e;
}

.workflow-report-panel .right-panel input[type="checkbox"] {
    accent-color: #2a7b8c;
}

/* The action, filled and full width - it is the one thing in the panel that DOES something. */
.workflow-report-panel .right-panel .center-button {
    width: 100%;
    height: 28px;
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    background: #2a7b8c;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    justify-content: center;
    cursor: pointer;
}

.workflow-report-panel .right-panel .center-button:hover {
    background: #226978;
}

/* A workflow keeps every step it has opened mounted - one iframe each, stacked here - so
   going back to a step is instant and gives it back exactly as it was left. */
.workflow-step-frames {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* The steps that are not on screen. Parked with visibility rather than display:none on
   purpose: a display:none frame is laid out at zero size, and a step that draws on a canvas
   (every design app) would come back blank until something resized it. */
.iframe-container.workflow-step-parked {
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
}

.workflow-step {
    margin-right: 8px;
    position: relative;
    padding: 4px 24px 4px 24px !important;
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    height: unset !important;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
    transition: all 0.3s ease;
    min-width: 150px;
    min-height: unset !important;
    margin-right: -10px;

    background-color: #EEE !important;
    border-color: #28a745;
    color: #333333 !important;
}

/* First step - no left indent */
    .workflow-step:first-child {
        clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
        padding-left: 16px !important;
    }

/* Last step - no right arrow */
    .workflow-step:last-child {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%);
        padding-right: 20px;
        margin-right: 0;
    }

/* Single step - no arrows on either side */
    .workflow-step:only-child {
        clip-path: none;
        padding: 12px 20px;
        margin-right: 0;
    }

    .workflow-step.active {
        background-color: #2a7b8c !important;
        border-color: #007bff;
        color: #ffffff !important;
        z-index: 2;
    }

    .workflow-step .button-icon img {
        width: 32px !important;
        height: 32px !important;
    }

    .workflow-step.active .button-icon img {
        filter: brightness(0) saturate(100%) invert(39%) sepia(74%) saturate(2569%) hue-rotate(139deg) brightness(95%) contrast(80%);
    }

    .workflow-step.pending .button-icon img {
        filter: brightness(0) saturate(100%) invert(54%) sepia(44%) saturate(2072%) hue-rotate(359deg) brightness(101%) contrast(102%);
    }

    .workflow-step.locked .button-icon img {
        filter: brightness(0) saturate(100%) invert(80%) sepia(0%) saturate(492%) hue-rotate(137deg) brightness(85%) contrast(90%);
    }

    /* Stale: upstream data changed - step needs to be re-run in sequence.
       Non-interactive: cursor blocked, slightly dimmed to signal it cannot be clicked. */
    .workflow-step.stale {
        background-color: #fff8e1 !important;
        border-color: #f59e0b !important;
        color: #78350f !important;
        cursor: not-allowed !important;
        opacity: 0.75;
        pointer-events: none;
    }

    .workflow-step.stale .button-icon img {
        /* amber tint */
        filter: brightness(0) saturate(100%) invert(58%) sepia(80%) saturate(800%) hue-rotate(5deg) brightness(100%) contrast(95%);
    }

    /* An Active step the reader is NOT looking at - they walked back to an earlier one - is
       running but not open, so it gives up the filled look and keeps only the colour. Exactly
       ONE chip is ever filled: the one in view. Two filled chips read as two selected steps. */
    .workflow-step.active:not(.current) {
        background-color: #ffffff !important;
        border-color: #2a7b8c;
        color: #2a7b8c !important;
        z-index: 1;
    }

    /* Where the reader IS, which is no longer the same thing as which step is Active: walking
       back into a finished step leaves it Complete and highlights it here instead. Same filled
       look .active has, so the strip reads exactly as it always did in the forward flow, and
       last in the file so it wins over the status colours above.
       Colour rather than an outline or a shadow: the chips are clip-path chevrons and anything
       drawn outside the fill is cut off. */
    .workflow-step.current {
        background-color: #2a7b8c !important;
        border-color: #007bff;
        color: #ffffff !important;
        z-index: 2;
    }

    .workflow-step .button-text {
        font-weight: bold;
        text-align: left;
    }

.workflow-step .button-text-secondline {
    font-weight: normal;
    font-size: 10px;
}

    .workflow .menu-right-toolbar, .workflow .menu-container-buttons, .workflow .menu-container-icon {
        display: none;
    }

.workflow .menu-container-title {
    margin-left: 20px;
    font-size: 16px;
}

.workflow .menu-container {
    height: 42px !important;
}

.workflow .main-container {
    top: 42px !important;
}

.workflow-container .left-panel {
    border-radius: 0;
    border: none;
    margin: 0;
    width: 384px;
}

    .workflow-container .left-panel .tab-header {
        background-color: var(--workflow-background);
        border-bottom: var(--workflow-border);
        color: rgba(255, 255, 255, .5);
        height: 46px;
    }

    .workflow-container .left-panel .tab-header-item.selected {
        color: rgba(255, 255, 255, .5);
    }


.workflow-container .left-panel .tab-body {
    background-color: var(--workflow-background);
    color: #FFF;
    top: 46px;
}

.workflow-container .left-panel .tab-header-item {
    background-color: transparent !important;
    border: none;
    border-radius: unset !important;
    font-size: 16px;
}

.workflow-container .left-panel .tab-header-item:first-child {
    border-top-left-radius: 0;
    border-left: none !important;
}

    .workflow-container .left-panel .tab-header-item.selected img {
        display: none;
    }

    /* Stretched over the hidden right panel. A workflow that fills that panel opts out
       with .workflow-report-panel and gets the standard three-column layout back. */
    .workflow-container:not(.workflow-report-panel) .center-panel {
        right: 0;
    }

    .workflow-container .center-panel .tab-header {
        display: none;
    }

    .workflow-container .center-panel .tab-body {
        top: 0;
    }

/* No right panel in a workflow: the step runs in an iframe that wants the full width.
   A workflow with its own content for that panel (ETABS RC Beam Workflow puts
   the report scope there, beside the document) adds .workflow-report-panel to the
   container and is excluded here. */
.workflow-container:not(.workflow-report-panel) .right-panel,
.workflow-container:not(.workflow-report-panel) .right-panel-toggle {
    display: none;
}

.workflow-container .parameter-common {
    display: none;
}

.workflow-container .menu-center-toolbar .toolbar > div {
    display: flex;
    align-items: center;
    gap: -10px; /* Negative gap to overlap chevrons */
    padding: 20px 0;
}

body .workflow-container .left-panel .property-group {
    background-color: transparent;
}

.workflow-container .left-panel .property-input {
    background-color: var(--workflow-background);
    color: rgba(255, 255, 255, .75);
}

.workflow-container .left-panel .property-text {
    color: rgba(255, 255, 255, .38);
}

.workflow-container .left-panel .property-group .property-group-header-text {
    color: rgba(255, 255, 255, .38);
}

.workflow-container .left-panel .property-value {
    border: var(--workflow-border);
}

.workflow-container .left-panel .property-groups > .property-group .property-group-header {
    border-bottom: var(--workflow-border);
}

/* Dropdown popup readability fix.
   .workflow-container .left-panel .tab-body forces color:#FFF for the dark
   left panel. The popup option list (.property-list-container) uses the
   theme's --panelbackground (white in light theme), so inheriting white
   text on white background made the options invisible. Restore the normal
   font color only inside the popup - labels/inputs on the dark panel
   itself are untouched. */
.workflow-container .left-panel .property-list-container,
.workflow-container .left-panel .property-list-container .property-list-body,
.workflow-container .left-panel .property-list-container .property-list-value {
    color: var(--fontcolor);
}

/* ── A.4 Work Flow ────────────────────────────────────────────────────────────
   The left panel is split into two stacked panes: Project Information on top and
   the Tree Menu below. .tab-body is absolutely positioned, so the split container
   fills it and each pane scrolls on its own instead of the whole panel scrolling
   as one long column. */
.workflow-container .left-panel .workflow-left-split {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.workflow-container .left-panel .workflow-info-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 35%;
    overflow: hidden;
    border-bottom: var(--workflow-border);
}

.workflow-container .left-panel .workflow-tree-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 65%;
    min-height: 220px;
    overflow: hidden;
}

.workflow-container .left-panel .workflow-tree-pane > .param-header,
.workflow-container .left-panel .workflow-info-pane > .param-header {
    flex: 0 0 auto;
    padding: 12px 12px 6px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
}

/* Scrolling body of each pane. */
.workflow-container .left-panel .workflow-tree-pane > .treeview,
.workflow-container .left-panel .workflow-info-pane > .property-groups {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

/* The shared .treeview skin paints a light card - drop it on the dark panel. */
.workflow-container .left-panel .treeview {
    background-color: transparent;
    border: none;
    border-radius: 0;
    margin: 0 4px 4px 4px;
}

.workflow-container .left-panel .treeview-body {
    padding: 0 4px 8px 4px;
}

/* Expand / collapse and bullet glyphs are dark artwork - flip them for the dark panel. */
.workflow-container .left-panel .treeview-node-icon img {
    filter: invert(1);
    opacity: .55;
}

.workflow-container .left-panel .treeview-node-header {
    color: rgba(255, 255, 255, .82);
}

.workflow-container .left-panel .treeview-node-header:hover,
.workflow-container .left-panel .treeview-node-header:active {
    background-color: rgba(255, 255, 255, .08);
}

/* Group headings sit one level above their apps. */
.workflow-container .left-panel .treeview > .treeview-body > .treeview-node > .treeview-node-header {
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Selected app. */
.workflow-container .left-panel .treeview-node.highlight > .treeview-node-header {
    background-color: #2a7b8c;
    color: #ffffff;
}

/* ── Step state badges ───────────────────────────────────────────────────────
   The tree is the only progress indicator in A.4 (there is no chevron bar and no
   per-step "Complete Step" button), so each app has to say for itself whether it
   is where you are, where you go next, or already done. */
.workflow-container .left-panel .treeview-node.wf-node > .treeview-node-header .treeview-node-text {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.workflow-container .left-panel .treeview-node.wf-node > .treeview-node-header .treeview-node-text::after {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.workflow-container .left-panel .treeview-node.wf-current > .treeview-node-header .treeview-node-text::after {
    content: "CURRENT";
    background-color: rgba(255, 255, 255, .22);
    color: #ffffff;
}

/* The click target that hands the open model over to the next app. */
.workflow-container .left-panel .treeview-node.wf-next > .treeview-node-header {
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(26, 158, 120, .55);
}

.workflow-container .left-panel .treeview-node.wf-next > .treeview-node-header .treeview-node-text::after {
    content: "NEXT";
    background-color: #1A9E78;
    color: #ffffff;
}

.workflow-container .left-panel .treeview-node.wf-done > .treeview-node-header .treeview-node-text::after {
    content: "DONE";
    background-color: rgba(26, 158, 120, .18);
    color: #6FD8B4;
}

/* An app you do not open directly - you pick one of its children (a station, a span).
   Without this the collapsed child list reads as a dead end. */
.workflow-container .left-panel .treeview-node.wf-select > .treeview-node-header .treeview-node-text::after {
    content: "SELECT";
    background-color: rgba(255, 255, 255, .16);
    color: #ffffff;
}

/* The span the open Design Details app is reading from. Shown only once the user has moved
   off that span, which is when "these numbers came from M2" stops being obvious. */
.workflow-container .left-panel .treeview-node.wf-selected > .treeview-node-header {
    color: #ffffff;
}

.workflow-container .left-panel .treeview-node.wf-selected > .treeview-node-header .treeview-node-text::after {
    content: "SELECTED";
    background-color: rgba(42, 123, 140, .85);
    color: #ffffff;
}

/* The step that is still loading and designing. The rest of the menu is inert until it
   finishes - opening a detail app off a half-finished design would show partial numbers. */
.workflow-container .left-panel .treeview-node.wf-busy > .treeview-node-header {
    background-color: #2a7b8c;
    color: #ffffff;
}

.workflow-container .left-panel .treeview-node.wf-busy > .treeview-node-header .treeview-node-text::after {
    content: "WORKING";
    background-color: rgba(255, 255, 255, .22);
    color: #ffffff;
}

/* Source badge: which span / station the row's numbers came from. Raised so it reads as a
   separate token rather than part of the app name - this is the answer to "where is this
   from", and on a dim panel flat text does not carry that. */
.workflow-container .left-panel .treeview-node-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    color: #ecfaff;
    background-image: linear-gradient(#31889d, #205f6f);
    border: 1px solid rgba(0, 0, 0, .38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30),
                inset 0 -1px 0 rgba(0, 0, 0, .22),
                0 1px 2px rgba(0, 0, 0, .45);
}

/* A locked row's badge should not out-shout the row it belongs to. */
.workflow-container .left-panel .treeview-node.wf-locked .treeview-node-badge {
    filter: grayscale(.5);
}

/* Apps the workflow cannot feed yet: dimmed and inert, so what is actionable stands out.
   TreeViewNode already blocks the click via IsEnabled; this is the visual half. */
.workflow-container .left-panel .treeview-node.wf-locked > .treeview-node-header {
    opacity: .34;
    cursor: not-allowed;
}

.workflow-container .left-panel .treeview-node.wf-locked > .treeview-node-header:hover,
.workflow-container .left-panel .treeview-node.wf-locked > .treeview-node-header:active {
    background-color: transparent;
    font-weight: normal;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media only screen and (max-width: 1700px) {
    .app-thumbnail {
        width: 250px;
    }

    .app-thumbnail-text {
        font-size: 14px;
    }
}

@media only screen and (max-width: 1400px) {
    .left-panel {
        bottom: 50%;
    }

    .left-panel.collapsed {
        bottom: 50%;
        width: 0;
        border: none;
        margin: 0;
        overflow: hidden;
    }

    .center-panel {
        border-right: 0;
        right: 0;
    }

    .right-panel {
        border-top: var(--border);
        position: absolute;
        left: 0;
        top: 50%;
        margin: 0 4px 4px 4px;
        bottom: 0;
        width: 380px;
        overflow: hidden;
        display: block;
    }

    .right-panel.left-collapsed {
        width: 0;
        border: none;
        margin: 0;
        overflow: hidden;
    }

    .left-panel-toggle {
        top: 50%;
    }

    .left-panel-toggle.collapsed {
        left: 14px;
    }

    .right-panel-toggle {
        display: none;
    }

    .right-panel.collapsed {
        width: 380px;
        border: var(--border);
        margin: 4px;
        overflow: hidden;
    }

    .center-panel.right-collapsed {
        right: 0;
    }

    .beam-sections .right-panel {
        height: unset;
        top: 60%;
        width: 380px;
    }

    .analysis .right-panel.left-collapsed {
        width: 0;
        border: none;
        margin: 0;
        overflow: hidden;
    }

    .equation-visualizer .left-panel,
    .dead-loads .left-panel,
    .live-loads .left-panel,
    .load-combination .left-panel,
    .workflow-container .left-panel {
        bottom: 0;
    }
}

@media only screen and (max-width: 1200px) {
    .menu-center-toolbar .toolbar {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .menu-container {
        border-bottom: var(--border);
    }

    .menu-center-toolbar {
        display: none;
    }

    .left-panel {
        bottom: 0 !important;
        border-radius: 0;
        width: unset;
        right: 0;
        margin: 0;
    }

    .tab .tab-header {
        top: unset !important;
        bottom: 0 !important;
    }

    body .tab-header {
        border: none;
        border-bottom: none !important;
        border-top: 2px solid #006496;
        height: 42px !important;
        overflow-x: auto !important;
    }

    .tab-body {
        top: 0 !important;
        bottom: 42px !important;
    }

    .mini-app .tab-body {
        bottom: 0 !important;
        top: 0;
    }

    .tab-header-item.selected {
        background-color: var(--panelbackground) !important;
        border-radius: 0;
        color: var(--fontcolor);
    }

    .tab-header-item.selected img {
        filter: none !important;
    }

    .parameter-common {
        background-color: var(--panelbackground);
        border: none;
        border-bottom: 1px solid var(--bordercolor);
        border-radius: 0;
        padding: 8px 0 4px 0;
        margin: 0;
        overflow: hidden;
        position: sticky;
        top: -1px;
        z-index: 1;
    }
}

/* -------- Help Tooltip (video / animation popup) -------- */

.help-anchor {
    /* display: contents removes the wrapper's own layout box - children render
       as if the span were not there, so existing CSS that targets the button
       (.group-toolbar .button, :hover, position contexts, etc.) keeps working
       unchanged. Events still bubble normally through the element. */
    display: contents;
}


.help-popup {
    background: #1f1f1f;
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    z-index: 5000;
}

.help-popup.preview {
    position: fixed;
    width: 320px;
    height: 180px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: help-fade-in 180ms ease-out;
    z-index: 5000;
}

.help-popup.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(880px, 92vw);
    height: min(495px, calc(92vw * 9 / 16));
    z-index: 6000;
    animation: help-pop-in 200ms ease-out;
}

.help-popup video,
.help-popup img,
.help-popup iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
    border: 0;
}

.help-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 10px;
    font-size: 11px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    color: #fff;
    pointer-events: none;
}

.help-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px 48px 10px 16px;
    font-size: 13px;
    font-weight: 500;
    background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    color: #fff;
    pointer-events: none;
}

.help-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1;
}

.help-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.help-hide-link {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.85);
    border: 0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.help-hide-link:hover {
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
}

/* When help videos are disabled, the popup is still the full preview size
   (320x180) and shows the video's poster/first frame in the background so the
   user knows what they would unlock. A dimmed overlay holds the re-enable
   button centred on top. */
.help-popup.reenable {
    /* same size as .preview - inherits position:fixed, width, height from it */
    cursor: default;
}

.help-reenable-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: help-fade-in 180ms ease-out;
}

.help-reenable-btn {
    background: #ffffff;
    color: #1f1f1f;
    border: 0;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.help-reenable-btn:hover {
    background: #f0f0f0;
}


.help-backdrop.expanded {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5999;
    animation: help-fade-in 180ms ease-out;
}

@keyframes help-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Video gallery overlay (center-toolbar Video button) ──────────────────
   Reuses .help-backdrop.expanded + .help-popup.expanded as the modal shell.
   .help-gallery overrides only the size and turns the popup into a scrolling
   thumbnail grid; the inline player view drops .help-gallery to fall back to
   the standard 16:9 .help-popup.expanded shell. */
.help-popup.help-gallery {
    width: min(900px, 92vw);
    height: min(560px, 82vh);
    display: flex;
    flex-direction: column;
}

.help-gallery-title {
    flex: 0 0 auto;
    padding: 14px 48px 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.help-gallery-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
    overflow-y: auto;
}

.help-gallery-empty {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.help-gallery-item {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 120ms ease, border-color 120ms ease;
}

.help-gallery-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Override the global ".help-popup video/img { object-fit: contain }" so tile
   thumbnails fill their cells. Size stays 100% of the cell, not the popup. */
.help-popup .help-gallery-item video,
.help-popup .help-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.help-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 8px 6px;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    pointer-events: none;
}

.help-gallery-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding-left: 3px;
    pointer-events: none;
    transition: background 120ms ease;
}

.help-gallery-item:hover .help-gallery-play {
    background: rgba(20, 160, 160, 0.9);
}

.help-gallery-back {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 0;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.help-gallery-back:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* ── Light theme — scoped to the video gallery overlay only (by #id, so the
   shared .help-popup / .help-backdrop used by the per-button help popups keep
   their dark styling). ──────────────────────────────────────────────────── */
#eagle-video-gallery.help-popup {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

#eagle-video-gallery .help-gallery-title {
    color: #111827;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

#eagle-video-gallery .help-gallery-item {
    background: #eef1f4;
    border-color: rgba(0, 0, 0, 0.12);
}

#eagle-video-gallery .help-gallery-item:hover {
    border-color: rgba(13, 148, 136, 0.8);
}

/* Light placeholder while a tile's thumbnail loads (or if it fails) instead of
   the default black <video> background - keeps the grid light. Scoped to grid
   tiles only, so the player-view video keeps its black letterbox. */
#eagle-video-gallery .help-gallery-item video,
#eagle-video-gallery .help-gallery-item img {
    background: #eef1f4;
}

#eagle-video-gallery .help-gallery-empty {
    color: rgba(0, 0, 0, 0.5);
}

/* Close + Back: light pills with dark glyphs */
#eagle-video-gallery .help-close,
#eagle-video-gallery .help-gallery-back {
    background: rgba(0, 0, 0, 0.06);
    color: #374151;
}

#eagle-video-gallery .help-close:hover,
#eagle-video-gallery .help-gallery-back:hover {
    background: rgba(0, 0, 0, 0.14);
    color: #111827;
}

/* Player-view title sits over video, keep it readable on a light scrim */
#eagle-video-gallery .help-title {
    color: #111827;
    background: linear-gradient(rgba(255, 255, 255, 0.92), transparent);
}

/* Softer backdrop so the white modal reads as light, not floating on black */
#eagle-video-gallery-backdrop.help-backdrop.expanded {
    background: rgba(17, 24, 39, 0.45);
}

@keyframes help-pop-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}



/* ── Eagle Eye Cloud: save status and recovery ───────────────────────────────
 *
 * The chip sits in .menu-container (a 52px flex row) immediately after the app
 * title, which is where the analysis SPA and Column Designer both put it.
 *
 * Colours are declared as their own tokens rather than reusing --button and
 * friends. The theme's accent green means "this is the primary action"; the
 * chip's green means "your work is safe", and an error state has to be able to
 * go red without that reading as a button someone should press. Both light and
 * dark values are set here so a state can never inherit a surface it was not
 * designed against - the dark block below only redefines the tokens.
 */
/* Light values are taken from the analysis SPA's analysis-common.css verbatim,
   so the Beam app and the Blazor gear apps render the same header rather than
   two near-misses. Dark values have no SPA counterpart to copy - that app's
   header is light-only - so they are chosen here to sit on --panelbackground. */
:root {
    /* Header ink and hairlines. The app-wide tokens are a shade off the SPA's -
       --fontcolor is pure black where .app-title / .cloud-filename are #1a2535,
       and --bordercolor is a neutral #CCC where the SPA's outlines are a cool
       #d8e0ec - which is exactly the kind of near-miss this block exists to
       avoid. Scoped to the header rather than fixed globally: those two tokens
       are read by every panel, table and input in the app. */
    --header-fg:          #1a2535;
    --header-line:        #d8e0ec;

    --cloud-chip-fg:      #5a6a7e;
    --cloud-chip-bg:      transparent;
    --cloud-ok-fg:        #1a7f5a;
    --cloud-ok-bg:        rgba(26, 158, 120, 0.10);
    --cloud-warn-fg:      #8a6100;
    --cloud-warn-bg:      rgba(217, 154, 20, 0.14);
    --cloud-error-fg:     #b42318;
    --cloud-error-bg:     rgba(198, 40, 40, 0.10);
    --cloud-signedout-fg: #2a7b8c;

    /* The queued-delete card in the picker: an inset card inside a list, with
       the cream the SPA gives its .filedlg-pending / .filedlg-undo-bar. */
    --cloud-pending-bg:   #fff6e5;
    --cloud-pending-fg:   #6b5836;
    --cloud-pending-br:   #f0dcb4;
    --cloud-pending-bar:  #c49a0c;
}

body.dark {
    /* From the SPA's html.dark .app-title / .app-header, which is the one part
       of its header that does have a dark counterpart. */
    --header-fg:          #ededed;
    --header-line:        rgba(255, 255, 255, 0.22);

    --cloud-chip-fg:      #9fb3c8;
    --cloud-ok-fg:        #4ecfa0;
    --cloud-ok-bg:        rgba(34, 199, 149, 0.16);
    --cloud-warn-fg:      #f0c674;
    --cloud-warn-bg:      rgba(240, 198, 116, 0.16);
    --cloud-error-fg:     #ff9b9b;
    --cloud-error-bg:     rgba(255, 107, 107, 0.16);
    --cloud-signedout-fg: #7ec8e3;

    /* Unlike the rest of this block the SPA DOES have dark values here
       (html.dark .filedlg-pending / .filedlg-undo-bar), so these are copied
       rather than chosen. */
    --cloud-pending-bg:   #3a2f14;
    --cloud-pending-fg:   #f2e6cd;
    --cloud-pending-br:   rgba(232, 194, 106, 0.3);
    --cloud-pending-bar:  #e8c26a;
}

.menu-container-cloud {
    display: flex;
    align-items: center;
    /* 16px clear of the app title, matching the SPA header row's gap-4 between
       the logo, the title and everything after it. The gap BETWEEN the controls
       is owned by .cloud-header-group - keep the two separate so they cannot
       silently add up. */
    margin-left: 16px;
    /* The toolbars that follow are absolutely positioned within the header, so
       the chip must not stretch or push them; it takes only what it needs. */
    flex: 0 0 auto;
    min-width: 0;
}

/* Geometry copied from the SPA's .cloud-chip so the two headers line up: the
   pill outline is what made the Blazor chip read as flat text next to Beam's.
   State is carried on the BORDER rather than a filled background - a permanent
   coloured badge in the header is too loud for a state the app is in almost all
   the time. */
.cloud-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 260px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--header-line);
    border-radius: 999px;
    background: var(--cloud-chip-bg);
    color: var(--cloud-chip-fg);
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

.cloud-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cloud-chip > i {
    font-size: 14px;
    line-height: 1;
    flex: 0 0 auto;
}

.cloud-chip:hover  { background: var(--hoverbackground); }
.cloud-chip:focus-visible {
    outline: 2px solid var(--highlightbordercolor);
    outline-offset: 1px;
}

.cloud-chip--saved     { color: var(--cloud-ok-fg);        border-color: color-mix(in srgb, var(--cloud-ok-fg) 35%, transparent); }
.cloud-chip--saving,
.cloud-chip--pending,
.cloud-chip--local     { color: var(--cloud-chip-fg); }
.cloud-chip--error,
.cloud-chip--quota     { color: var(--cloud-error-fg);     border-color: color-mix(in srgb, var(--cloud-error-fg) 35%, transparent); }
.cloud-chip--offline   { color: var(--cloud-warn-fg);      border-color: color-mix(in srgb, var(--cloud-warn-fg) 35%, transparent); }
.cloud-chip--signedout { color: var(--cloud-signedout-fg); border-color: color-mix(in srgb, var(--cloud-signedout-fg) 35%, transparent); }

/* No spin rule here on purpose: materialdesignicons.css already animates
   .mdi-spin, and it does so on the :before that actually holds the glyph.
   Animating the <i> as well would compound the two rotations. */

/* ── Eagle Eye Cloud: File menu, open picker, confirm ────────────────────────
 *
 * Visual language matched to the analysis SPA's .file-menu / .filedlg-* and
 * Column Designer's "All Projects" modal, so a user moving between the three
 * products meets the same control twice.
 *
 * Colours come from the shell's own tokens (--panelbackground, --fontcolor,
 * --border) rather than fresh literals, so dark mode via body.dark needs no
 * second set of rules here - only the cloud-specific tints defined further up,
 * which carry meaning the theme tokens do not.
 */

/* 10px to match the SPA's .cloud-status, and 16px clear of the app title -
   the SPA's header row is a flex with gap-4 between the logo, the title and
   everything after it. At 4px the File button, the model name and the chip ran
   together as one undifferentiated strip. */
.cloud-header-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ── Model name, renamed in place ── */

/* Matches the SPA's .cloud-filename: 13px/600, 22ch cap, 4px radius. The
   transparent resting border is what keeps the name from shifting by a pixel
   when the hover outline appears. */
.cloud-filename {
    max-width: 22ch;
    /* !important for the same reset (see .filedlg-search). This class is worn by
       both the resting <span> and the editing <input>, so without it only the
       input loses its padding and the name shifts 6px the moment it is clicked. */
    padding: 2px 6px !important;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--header-fg);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
}

.cloud-filename:hover {
    border-color: var(--header-line);
    background: var(--windowbackground);
}

.cloud-filename:focus-visible {
    outline: 2px solid var(--highlightbordercolor);
    outline-offset: 1px;
}

.cloud-filename--editing {
    border-color: var(--highlightbordercolor);
    background: var(--panelbackground);
    outline: none;
    overflow: visible;
    min-width: 160px;
}

/* ── File menu ── */

.file-menu-host { position: relative; display: inline-flex; }

/* Matches the SPA's .file-trigger, including the asymmetric padding that
   optically centres the caret. */
.file-trigger {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 26px;
    padding: 0 6px 0 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--fontcolor);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.file-trigger:hover,
.file-trigger[aria-expanded="true"] {
    background: var(--windowbackground);
    border-color: var(--bordercolor);
}

.file-trigger > i { font-size: 16px; line-height: 1; opacity: 0.7; }

.file-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    /* Above .background (z-index 100), which is the click-catcher beneath it. */
    z-index: 101;
    min-width: 240px;
    max-width: 340px;
    padding: 4px 0;
    background: var(--panelbackground);
    border: var(--border);
    border-radius: 8px;
    box-shadow: var(--shadowcolor) 4px 4px 12px;
}

.file-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: var(--fontcolor);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.file-menu-item:hover { background: var(--hoverbackground); }

.file-menu-item > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-menu-item.is-disabled {
    color: var(--disabledcolor);
    cursor: default;
}
.file-menu-item.is-disabled:hover { background: transparent; }

.file-menu-hint {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--textcolor);
}

.file-menu-sep {
    height: 1px;
    margin: 4px 0;
    background: var(--bordercolor);
}

.file-menu-heading {
    padding: 6px 14px 3px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--textcolor);
}

/* ── Confirm ── */

.cloud-confirm-scrim {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 36, 68, 0.45);
}

.cloud-confirm {
    width: min(420px, 90vw);
    padding: 22px 24px 18px;
    background: var(--panelbackground);
    color: var(--fontcolor);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.cloud-confirm h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.cloud-confirm p  { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--textcolor); }

.cloud-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

.cloud-confirm-cancel,
.cloud-confirm-go {
    padding: 7px 16px;
    border-radius: 7px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.cloud-confirm-cancel {
    border: var(--border);
    background: transparent;
    color: var(--fontcolor);
}
.cloud-confirm-cancel:hover { background: var(--hoverbackground); }

/* Destructive by construction: every confirm this raises is one where
   continuing costs the user work. */
.cloud-confirm-go {
    border: none;
    background: var(--cloud-error-fg);
    color: #fff;
}
.cloud-confirm-go:hover { filter: brightness(1.08); }

/* ── Open picker ── */
/*
 * Geometry and proportions copied from the SPA's .filedlg-* rules
 * (EagleI.Analysis.App/public/css/analysis-common.css) so the Beam app and the
 * Blazor gear apps present the same dialog rather than two near-misses.
 *
 * Surfaces use the shell's theme tokens so dark mode resolves; the accent stays
 * the SPA's teal, carried on its own token rather than --highlightbordercolor
 * (which is the shell's green) so the two dialogs actually match.
 */
:root {
    --filedlg-accent: #2a7b8c;
    --filedlg-accent-soft: rgba(42, 123, 140, 0.1);
}

body.dark {
    --filedlg-accent: #7fd3e3;
    --filedlg-accent-soft: rgba(127, 211, 227, 0.16);
}

.filedlg-scrim {
    position: fixed;
    inset: 0;
    z-index: 380;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 24px;
    background: rgba(15, 23, 42, 0.45);
}

.filedlg {
    display: flex;
    flex-direction: column;
    width: min(1100px, 92vw);
    max-height: 80vh;
    background: var(--panelbackground);
    color: var(--fontcolor);
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
    overflow: hidden;
}

.filedlg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px 12px;
}

.filedlg-title { margin: 0; font-size: 17px; font-weight: 700; }

.filedlg-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 20px;
    cursor: pointer;
}

.filedlg-close:hover { background: var(--windowbackground); }

/* The magnifier is absolutely positioned inside the field rather than sitting
   beside it in a bordered wrapper - that is what makes it read as one search
   input instead of an icon next to a box. */
.filedlg-searchwrap {
    position: relative;
    margin: 0 24px 14px;
    display: flex;
    align-items: center;
}

.filedlg-searchwrap > i {
    position: absolute;
    left: 12px;
    font-size: 17px;
    opacity: 0.45;
    pointer-events: none;
}

.filedlg-search {
    width: 100%;
    /* !important because of the blanket `input { padding-block: 0 !important;
       padding-inline: 0 !important; }` reset near the top of this file, which
       exists for the dense property-grid fields and wins over any class rule
       whatever its specificity. Without it the padding collapses on all four
       sides: the placeholder starts under the magnifier and the field flattens
       to its line box, which reads as a pill rather than a search box. */
    padding: 10px 12px 10px 38px !important;
    border: 1px solid var(--bordercolor);
    border-radius: 10px;
    background: var(--windowbackground);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--fontcolor);
    box-sizing: border-box;
}

.filedlg-search:focus {
    outline: none;
    border-color: var(--filedlg-accent);
    background: var(--panelbackground);
}

/* Name grows, the two metadata columns share the rest - the proportions
   ProjectFiles uses (2fr 1fr 1fr, minus its checkbox column). Fixed pixel
   columns made the Blazor dialog feel cramped at the same width. */
.filedlg-cols,
.filedlg-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 34px;
    gap: 16px;
    align-items: center;
    padding: 0 24px;
}

.filedlg-cols {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bordercolor);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--textcolor);
}

.filedlg-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    cursor: pointer;
}

.filedlg-sort:hover { color: var(--fontcolor); }
.filedlg-sort-ind { font-size: 10px; opacity: 0.8; }

.filedlg-list { flex: 1; min-height: 0; overflow-y: auto; }

.filedlg-row {
    width: 100%;
    padding-top: 14px;
    padding-bottom: 14px;
    border: 0;
    border-top: 1px solid var(--bordercolor);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.filedlg-row:first-child { border-top: 0; }
.filedlg-row:hover { background: var(--windowbackground); }

/* The open model is marked with an inset left bar, NOT a filled background.
   A tinted row at this size reads as a selection the user made and fights the
   hover state; the bar says "you are here" without shouting. */
.filedlg-row:focus-visible {
    outline: none;
    background: var(--windowbackground);
    box-shadow: inset 3px 0 0 var(--filedlg-accent);
}

.filedlg-row[aria-current="true"] { box-shadow: inset 3px 0 0 var(--filedlg-accent); }

.filedlg-row.is-busy { opacity: 0.55; pointer-events: none; }

.filedlg-namecell { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* A tinted rounded tile, not a bare glyph - the single biggest reason the two
   dialogs looked unrelated. */
.filedlg-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--filedlg-accent-soft);
    color: var(--filedlg-accent);
    font-size: 18px;
}

.filedlg-nametext { min-width: 0; }

.filedlg-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The location line - a project name when the model is filed, otherwise the
   cloud itself, exactly as ProjectFiles labels it. */
.filedlg-where {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--textcolor);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filedlg-where i { font-size: 13px; opacity: 0.8; }

.filedlg-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--textcolor);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filedlg-meta i { font-size: 14px; opacity: 0.7; }

.filedlg-rename {
    width: 100%;
    padding: 3px 6px !important;   /* see .filedlg-search for why */
    border: 1px solid var(--filedlg-accent);
    border-radius: 5px;
    background: var(--panelbackground);
    color: var(--fontcolor);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
}

.filedlg-kebab-cell { position: relative; justify-self: end; }

.filedlg-kebab {
    border: none;
    background: transparent;
    color: var(--iconcolor);
    font-size: 17px;
    line-height: 1;
    padding: 3px;
    border-radius: 5px;
    cursor: pointer;
}

.filedlg-kebab:hover { background: var(--hovercolor); color: var(--fontcolor); }

.filedlg-kebab-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 5;
    min-width: 150px;
    padding: 4px 0;
    background: var(--panelbackground);
    border: var(--border);
    border-radius: 8px;
    box-shadow: var(--shadowcolor) 3px 3px 10px;
}

.filedlg-kebab-item {
    display: block;
    width: 100%;
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: var(--fontcolor);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.filedlg-kebab-item:hover { background: var(--hoverbackground); }
.filedlg-kebab-item--danger { color: var(--cloud-error-fg); }

/* The strip standing in for a row while its delete counts down. It says "will
   be deleted", future tense deliberately: nothing has happened yet. */
/* The SPA's .filedlg-pending, ported: an inset rounded card rather than a
   full-bleed band. The shape is what makes the countdown legible - overflow
   clips the drain bar to the card's own bottom edge, so it reads as a progress
   bar inside the notice. Full-bleed, the same 2px line spans the whole dialog
   and reads as a row divider instead.

   16px margin against the rows' 24px padding is the SPA's own inset, so the
   card's edge sits just outside the row text rather than lining up with it. */
.filedlg-pending {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 16px;
    padding: 12px 14px;
    border: 1px solid var(--cloud-pending-br);
    border-radius: 10px;
    background: var(--cloud-pending-bg);
    color: var(--cloud-pending-fg);
    font-size: 13px;
    overflow: hidden;
}

/* Outlined amber pill, not a bare text link - it has to read as the action on a
   card that is already coloured, which a teal link on cream does not. */
.filedlg-undo {
    flex: 0 0 auto;
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--cloud-warn-fg) 40%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--cloud-warn-fg);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.filedlg-undo:hover {
    background: color-mix(in srgb, var(--cloud-warn-fg) 10%, transparent);
}

/* No radius of its own - the card's overflow:hidden clips both ends, so the bar
   cannot disagree with the corner it sits in. */
.filedlg-undo-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: var(--cloud-pending-bar);
    animation-name: filedlg-undo-drain;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes filedlg-undo-drain {
    from { width: 100%; }
    to   { width: 0%; }
}

.filedlg-state {
    padding: 44px 24px 52px;
    text-align: center;
    font-size: 13.5px;
    color: var(--textcolor);
}

.filedlg-state strong {
    display: block;
    margin-bottom: 5px;
    color: var(--fontcolor);
    font-size: 15px;
}

.filedlg-state-btn {
    margin-top: 14px;
    padding: 8px 16px;
    border: 1px solid var(--filedlg-accent);
    border-radius: 8px;
    background: var(--filedlg-accent);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.filedlg-foot {
    padding: 10px 24px 14px;
    border-top: 1px solid var(--bordercolor);
    font-size: 12px;
    color: var(--textcolor);
}

/* -----   Import model dialog   -----
   The "Load Model From ETABS / SAP2000 / Excel" instructions are presented as a
   centered modal (Form.razor, wired as Shared.Form) instead of being squeezed into
   the left panel. The form carries two classes: "import-dialog" (this block - the
   modal chrome) and "import-model" (the step-row paragraph styling above, shared
   with the inline fallback panel).
   z-index sits below .dialog / .dialog-background (101 / 100) so an error
   ContentDialog still stacks on top of the open import dialog. */
.form.import-dialog {
    background-color: var(--panelbackground);
    border: var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
    color: var(--fontcolor);
    display: flex;
    flex-direction: column;
    height: auto;
    left: 50%;
    max-height: min(680px, 88vh);
    overflow: hidden;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 32px));
    z-index: 100;
    animation: import-dialog-in .18s ease-out;
}

.background.dialog-background.import-dialog {
    z-index: 96;
}

@keyframes import-dialog-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 12px));
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* The base .form places header/body/footer with position:absolute against a fixed
   600x400 box - the import dialog is height-driven by its content instead. */
.form.import-dialog .form-header,
.form.import-dialog .form-body,
.form.import-dialog .form-footer {
    bottom: auto;
    left: auto;
    position: relative;
    right: auto;
    top: auto;
}

.form.import-dialog .form-header {
    align-items: center;
    border-bottom: var(--border);
    cursor: default;
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    height: 52px;
    margin: 0;
    padding: 0 12px 0 20px;
}

.form.import-dialog .form-icon img {
    display: block;
    height: 22px;
    width: auto;
}

.form.import-dialog .form-title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
}

.form.import-dialog .form-header .buttons {
    align-items: center;
    display: flex;
    gap: 6px;
    height: auto;
    position: static;
}

.form.import-dialog .form-header .button {
    background-color: transparent;
    border: none;
    border-radius: 50% !important;
    height: 28px;
    margin: 0;
    min-width: 28px;
    padding: 0;
    width: 28px;
}

    .form.import-dialog .form-header .button img {
        height: 14px;
        width: 14px;
    }


.form.import-dialog .form-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    /* Anchor for the floating download card. */
    position: relative;
}

/* Steps read as a list: a hairline rail on the left ties the numbered rows together. */
.form.import-dialog .form-body .paragraph:not(.import-warning) {
    margin-right: 186px;
    padding-left: 12px;
}

/* Download step: a card floating at the top right of the body, beside the steps, so the
   one thing the user has to fetch is impossible to miss. */
.form.import-dialog .button.import-download {
    align-items: center;
    background-color: rgba(0, 103, 192, .07);
    border: 1.5px solid var(--button);
    border-radius: 12px !important;
    color: var(--button);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    padding: 16px 12px;
    position: absolute;
    right: 20px;
    text-align: center;
    top: 16px;
    width: 166px;
}

    .form.import-dialog .button.import-download:hover {
        background-color: rgba(0, 103, 192, .14) !important;
    }

    .form.import-dialog .button.import-download > a {
        align-items: center;
        color: var(--button);
        flex-direction: column;
        gap: 6px;
    }

    .form.import-dialog .button.import-download img {
        height: 30px;
        margin: 0;
        width: 30px;
        /* Tint the black mdi glyph to the accent blue (#0067c0). */
        filter: brightness(0) saturate(100%) invert(23%) sepia(90%) saturate(2000%) hue-rotate(190deg) brightness(94%) contrast(101%);
    }

    .form.import-dialog .button.import-download .button-text {
        line-height: 1.25;
        white-space: normal;
    }


/* Drop zone is the upload step - give it room to breathe under the download button. */
.form.import-dialog .property-file-drop {
    margin-top: 4px;
}

.form.import-dialog .import-warning {
    background-color: rgba(200, 40, 30, .1);
    border-radius: 8px;
    color: #c8281e;
    margin-top: 10px;
    padding: 8px 12px;
}

    .form.import-dialog .import-warning .paragraph-icon img {
        height: 18px;
        width: 18px;
        /* The shipped warning.svg is a solid black glyph - tint it to the message colour. */
        filter: brightness(0) saturate(100%) invert(24%) sepia(64%) saturate(4260%) hue-rotate(354deg) brightness(93%) contrast(93%);
    }

.form.import-dialog .form-footer {
    background-color: transparent;
    border-top: var(--border);
    display: flex;
    flex-shrink: 0;
    gap: 8px;
    height: 60px;
    justify-content: flex-end;
    padding: 0 20px;
}

.form.import-dialog .form-footer .buttons {
    align-items: center;
    display: flex;
    gap: 8px;
    height: 100%;
    position: static;
}

.form.import-dialog .form-footer .button {
    margin: 0;
    min-width: 110px;
    padding: 7px 20px;
}

.form.import-dialog .form-footer .button.primary {
    background-color: var(--button);
    border-color: var(--button);
    color: #FFF;
    font-weight: 600;
}

    .form.import-dialog .form-footer .button.primary .button-text {
        color: #FFF;
    }

    /* .button:hover carries !important, so the primary hover has to as well -
       otherwise the fill flips to the light hover blue under white text. */
    .form.import-dialog .form-footer .button.primary:hover {
        background-color: #0056a3 !important;
    }


/* -----   File drop zone (UIParamFile.IsDropZone)   -----
   Dashed box with the <input type="file"> stretched over it: clicking anywhere opens
   the browse dialog, and dropping a file anywhere on it loads that file - a file input
   accepts drops natively, so no JS interop is involved. The .dragover highlight is
   driven by PropertyFile's drag handlers. */
.property.property-file-drop {
    display: block;
    padding: 0;
}

.file-dropzone {
    align-items: center;
    background-color: var(--containerbackground);
    border: 2px dashed var(--bordercolor);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-height: 108px;
    padding: 16px;
    position: relative;
    text-align: center;
    transition: background-color .12s ease, border-color .12s ease;
}

    .file-dropzone:hover,
    .file-dropzone.dragover {
        background-color: var(--hoverbackground);
        border-color: var(--button);
    }

    .file-dropzone.has-file {
        background-color: rgba(0, 103, 192, .06);
        border-color: var(--button);
        border-style: solid;
    }

    .file-dropzone .file-dropzone-input {
        cursor: pointer;
        font-size: 0;
        height: 100%;
        inset: 0;
        opacity: 0;
        position: absolute;
        width: 100%;
        z-index: 1;
    }

.file-dropzone-content {
    max-width: 100%;
    pointer-events: none;
}

.file-dropzone-icon img {
    filter: var(--svgfilter);
    height: 26px;
    opacity: .7;
    width: 26px;
}

.file-dropzone.has-file .file-dropzone-icon img {
    opacity: 1;
}

.file-dropzone-title {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-dropzone-hint {
    color: var(--textcolor);
    font-size: 12px;
    margin-top: 2px;
}

.file-dropzone-error {
    color: #c8281e;
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}

/* ── Report viewer inside a workflow ──────────────────────────────────────────
   The step collapses both side panels (ReportApp.ApplyStyle) so the document gets
   the full width. Their expander handles have to go with them: the workflow host
   draws its own panel handle at the same left edge, and the two sat on top of each
   other. Scoped to both classes so the standalone report viewer keeps its panels. */
body.workflow .reportviewer .left-panel-toggle,
body.workflow .reportviewer .right-panel-toggle {
    display: none;
}

/* ── A.1 / A.4 workflow host: left panel has no tab strip ─────────────────────
   Its left panel holds one thing - the workflow parameters - so a tab header
   over it is a label for a choice that does not exist. The panel itself stays.
   The body is pulled back up with it: it is positioned 46px down to clear the
   header (see .workflow-container .left-panel .tab-body), which would otherwise
   leave that height as an empty band at the top of the panel. */
.workflow-container .left-panel .tab-header {
    display: none;
}

.workflow-container .left-panel .tab-body {
    top: 0;
}