/* Highlighted row in the Beam Span "Forces" table.
   Default = critical station (max |Mu|) set by RefreshDesignActions
   via UIParameters.Class = "selected". User clicks another row →
   SelectedRowChanged updates _selectedStationIndex → the highlight
   moves.

   Specificity note: theme.css applies a greenish tint to display-only
   cells via `.datagrid .property.property-table .property.display`,
   and that rule has high specificity. Our selectors chain the same
   path (.datagrid .property.property-table) and also target
   .property.display directly so we override the tint with the
   selection blue. !important is needed because both rules carry it. */
.beam-span .datagrid .property.property-table tbody tr.selected td,
.beam-span .datagrid .property.property-table tbody tr.selected td *,
.beam-span .datagrid .property.property-table tbody tr.selected .property,
.beam-span .datagrid .property.property-table tbody tr.selected .property.display {
    background-color: #cfe8ff !important;
}

/* Reset background on action buttons (Design / View / external-link
   icons) so the row-highlight rule above doesn't paint over their
   icons — without this, the buttons render as solid blue squares
   because the <img> background swallows the icon. */
.beam-span .datagrid .property.property-table tbody tr.selected .button,
.beam-span .datagrid .property.property-table tbody tr.selected .button *,
.beam-span .datagrid .property.property-table tbody tr.selected button,
.beam-span .datagrid .property.property-table tbody tr.selected button *,
.beam-span .datagrid .property.property-table tbody tr.selected img {
    background-color: transparent !important;
}

.beam-span .beam-span-actions {
    position: absolute;
    left: 0;
    top: 0;
    height: 378px;
    width: calc(100% - 8px);
}

.beam-span .canvas-section {
    position: absolute;
    left: 0;
    top: calc(378px + (100% - 378px) / 2);
    height: calc((100% - 378px) / 2 - 8px);
    width: calc(50% - 4px);
}

.beam-span .beam-span-analysis {
    position: absolute;
    left: 0;
    top: 382px;
    height: calc((100% - 378px) / 2 - 8px);
    width: calc(50% - 4px);
}

.beam-span .canvas-span-2D {
    position: absolute;
    left: 50%;
    top: 382px;
    height: calc((100% - 378px) / 2 - 8px);
    width: calc(50% - 8px);
}

.beam-span .canvas-span-3D {
    position: absolute;
    left: 50%;
    bottom: 0;
    top: calc(378px + (100% - 378px) / 2);
    height: calc((100% - 378px) / 2 - 8px);
    width: calc(50% - 8px);
}

.beam-span .datagrid-container, .beam-span .datagrid {
    border: none !important;
}

.beam-span .datagrid .property.property-table {
    background-color: var(--panelbackground);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 !important;
}

/* Force table (the "Forces" group at the top of the Beam Span tab) can
   grow taller than its fixed-height container — e.g. ~22 rows in the
   Workflow scenario vs ~6 rows when opened standalone. Without a scroll
   constraint, row-headers and content overflow vertically into the panels
   below (Beam Analysis / Beam Span / Section).

   Selector intentionally omits the .beam-span prefix so the rule applies
   in BOTH standalone (wrapper = .beam-span) and Workflow shell contexts
   (wrapper class hierarchy may differ). !important is required because
   property-table styles defined elsewhere set conflicting overflow and
   max-height values that would otherwise win on specificity.

   Two-step fix:
     1. .beam-span-actions: hide anything that escapes the box.
     2. Inner scroll containers (multiple candidates listed because the
        exact DOM nesting depends on whether UIDataGrid wraps the table
        and which inner class actually receives layout): constrain to
        parent height and scroll vertically. */
.beam-span-actions {
    overflow: hidden !important;
}

.beam-span-actions .property.property-table-body,
.beam-span-actions .property-table-body,
.beam-span-actions .datagrid-container,
.beam-span-actions .datagrid {
    overflow-x: auto !important;
    overflow-y: auto !important;
    /* max-height in PIXELS (not %): .property-table-body is a <tbody>
       converted to display:block. Its parent <table> has height:auto, so
       percentage max-height resolves to "none" per CSS spec — the body
       then expands to ~780px+ (full content height) and its horizontal
       scrollbar falls OUTSIDE the visible 378px .beam-span-actions box.
       Explicit pixels (378 - ~98 for group/column headers) keep the
       scrollbar inside the viewport in BOTH path A and path B. */
    max-height: 280px !important;
}

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

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

.beam-span .property-table thead tr:first-child th {
    position: sticky;
    height: 32px;
    outline: var(--border2);
    top: 1px;
}

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

.beam-span .property-table  thead tr:nth-child(2) th {
    background-color: var(--panelbackground);
    outline: var(--border2);
    position: sticky;
    top: 33px;
}

.beam-span .property-table thead tr:first-child th {
    height: 32px;
    outline: var(--border2);
    top: 1px;
}

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

    .beam-span .property.property-table td:last-child .button, .beam-span .property.property-table td:nth-last-child(2) .button {
        border: none;
        padding: 0;
    }

    .beam-span .property.property-table td:last-child .button-text, .beam-span .property.property-table td:nth-last-child(2) .button-text {
        display: none;
    }


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

.column-app .canvas-section {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(50% - 8px);
}

.column-app .canvas-framing {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: calc(50% - 8px);
}

.sdof-dynamics .canvas-loading {
    position: absolute;
    left: 0;
    top: 0;
    height: 33%;
    width: 100%;
}

.sdof-dynamics .impulse-canvas-loading {
    position: absolute;
    top: 8px;
    left: 0;
    width: calc(100% - 16px);
    height: calc(33% - 8px);
    margin: 0 8px 0 8px;
}

.sdof-dynamics .impulse-canvas-dis {
    position: absolute;
    top: calc(33% + 8px);
    left: 0;
    width: calc(100% - 16px);
    height: calc(33% - 8px);
    margin: 0 8px 0 8px;
}

.sdof-dynamics .impulse-canvas-forcefreeres {
    position: absolute;
    top: calc(66%);
    left: 0;
    width: calc(50% - 8px);
    height: calc(34% - 8px);
    margin-left: 8px;
}

.sdof-dynamics .impulse-canvas-overallmax {
    position: absolute;
    top: calc(66%);
    left: calc(50% + 4px);
    width: calc(50% - 8px);
    height: calc(34% - 8px);
    margin-right: 8px;
}

.sdof-dynamics .periodic-canvas-periodicloading {
    position: absolute;
    top: 0%;
    right: 0;
    width: calc(50% - 16px);
    height: calc(25% - 8px);
}

.sdof-dynamics .periodic-canvas-totaldis {
    position: absolute;
    top: 25%;
    right: 0;
    width: calc(50% - 16px);
    height: calc(25% - 8px);
}

.sdof-dynamics .periodic-canvas-pok {
    position: absolute;
    top: 0%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(16.67% - 8px);
}

.sdof-dynamics .periodic-canvas-1 {
    position: absolute;
    top: 16.67%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(16.67% - 8px);
}

.sdof-dynamics .periodic-canvas-2 {
    position: absolute;
    top: 33.33%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(16.67% - 8px);
}

.sdof-dynamics .periodic-canvas-3 {
    position: absolute;
    top: 49.98%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(16.67% - 8px);
}

.sdof-dynamics .periodic-canvas-4 {
    position: absolute;
    top: 66.64%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(16.67% - 8px);
}

.sdof-dynamics .periodic-canvas-5 {
    position: absolute;
    top: 83.3%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(16.67% - 8px);
}

.sdof-dynamics .periodic-canvas-amplitude {
    position: absolute;
    top: calc(50%);
    right: 0;
    width: calc(50% - 16px);
    height: 50%;
}

.sdof-dynamics .earthquake-canvas-l1 {
    position: absolute;
    top: 0%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}
.sdof-dynamics .earthquake-canvas-l2 {
    position: absolute;
    top: 25%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}
.sdof-dynamics .earthquake-canvas-l3 {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-l4 {
    position: absolute;
    top: 75%;
    left: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-r1 {
    position: absolute;
    top: 0%;
    right: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-r2 {
    position: absolute;
    top: 25%;
    right: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-r3 {
    position: absolute;
    top: 50%;
    right: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .earthquake-canvas-r4 {
    position: absolute;
    top: 75%;
    right: 0;
    width: calc(50% - 8px);
    height: calc(25% - 8px);
}

.sdof-dynamics .arbitrary-canvas-l1 {
    position: absolute;
    top: 0%;
    left: 0;
    width: calc(100% - 8px);
    height: calc(25% - 8px);
}
.sdof-dynamics .arbitrary-canvas-l2 {
    position: absolute;
    top: 25%;
    left: 0;
    width: calc(100% - 8px);
    height: calc(25% - 8px);
}
.sdof-dynamics .arbitrary-canvas-l3 {
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(100% - 8px);
    height: calc(25% - 8px);
}
.sdof-dynamics .arbitrary-canvas-l4 {
    position: absolute;
    top: 75%;
    left: 0;
    width: calc(100% - 8px);
    height: calc(25% - 8px);
}

.equation-visualizer .left-panel {
    width: 500px;
}

.equation-visualizer .center-panel {
    left: 512px;
    right: 0;
}

.equation-visualizer .right-panel,
.equation-visualizer .right-panel-toggle {
    display: none !important;
}

.equation-visualizer .property-input-border {
    align-items: center;
    display: flex;
    height: 24px;
    padding: 0 8px;
}

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

body .equation-visualizer .property-range .property-enum {
    align-items: center;
    height: 24px;
}

.dead-loads .center-panel {
   right: 0
}


.dead-loads .right-panel,
.dead-loads .right-panel-toggle {
    display: none !important;
}

.live-loads .center-panel {
    right: 0
}


.live-loads .right-panel,
.live-loads .right-panel-toggle {
    display: none !important;
}

.load-combination .center-panel {
    right: 0
}

.load-combination .right-panel,
.load-combination .right-panel-toggle {
    display: none !important;
}

/* Beam Deflection App Styles */

/* Canvas 1 - Bending Moment (Top) */
.beam-deflection .beam-deflection-canvas-1 {
    position: absolute;
    top: 370px;
    left: 0;
    width: calc(50% - 5px);
    height: calc(25% - 8px);
}

.beam-deflection-canvas-1 .property-group-body .viewer-container {
     height: 16vh !important;
}

/* Canvas 2 - Stiffness (Second from top) */
.beam-deflection .beam-deflection-canvas-2 {
   position: absolute;
       top: 370px;
     left: calc(50%);
    width: calc(50% - 16px);
    height: calc(25% - 8px);
}

.beam-deflection-canvas-2 .property-group-body .viewer-container {
    height: 16vh !important;
}

/* Canvas 3 - Curvature (Third from top) */
.beam-deflection .beam-deflection-canvas-3 {
    position: absolute;
       top: 590px;
     left: 0;
    width: calc(50% - 5px);
    height: calc(25% - 8px);
}

.beam-deflection-canvas-3 .property-group-body .viewer-container {
    height: 16vh !important;
}

/* Canvas 4 - Rotation (Bottom) */
.beam-deflection .beam-deflection-canvas-4 {
    position: absolute;
       top: 590px;
    left: calc(50%);
    width: calc(50% - 16px);
    height: calc(25% - 8px);
}

.beam-deflection-canvas-4 .property-group-body .viewer-container {
    height: 16vh !important;
}

/* Canvas 5 - Deflection (Bottom) */
.beam-deflection .beam-deflection-canvas-5 {
    position: absolute;
       top: 810px;
    left: 0;
    width: calc(50% - 5px);
    height: calc(25% - 8px);
}

.beam-deflection-canvas-5 .property-group-body .viewer-container {
    height: 16vh !important;
}



/* Canvas 6 - Deflection (Bottom) */
.beam-deflection .beam-deflection-canvas-6 {
    position: absolute;
       top: 810px;
          left: calc(50%);
    width: calc(50% - 16px);
     height: calc(25% - 8px);
}

.beam-deflection-canvas-6 .property-group-body .viewer-container {
    height: 16vh !important;
}

.beam-deflection .datagrid .property.property-table {
    background-color: var(--panelbackground);
    left: 0;
    right: 0;
    top: 0;
    bottom: 43px;
    margin: 0 !important;
}



.beam-deflection .property-table thead tr:first-child th {
    position: sticky;
    height: 32px;
    outline: var(--border2);
    top: 1px;
}

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

.beam-deflection .property-table  thead tr:nth-child(2) th {
    background-color: var(--panelbackground);
    outline: var(--border2);
    position: sticky;
    top: 33px;
}

.beam-deflection .property-table thead tr:first-child th {
    height: 32px;
    outline: var(--border2);
    top: 1px;
}

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

.beam-deflection .property.property-table td:last-child .button, .beam-span .property.property-table td:nth-last-child(2) .button {
        border: none;
        padding: 0;
    }

.beam-deflection .property.property-table td:last-child .button-text, .beam-span .property.property-table td:nth-last-child(2) .button-text {
        display: none;
    }

.beam-sections .left-panel {
    bottom: 40%;
}

.beam-sections .center-panel {
    border-right: 0;
    right: 0;
}

.beam-sections .right-panel {
    background: #eff1f2;
    border-radius: 16px;
    position: absolute;
    margin: 0 8px 8px 8px;
    left: 0;
    height: calc(40% - 8px);
    bottom: 0;
    top: unset;
    width: 380px;
    overflow: hidden;
    display: block;
}

.beam-sections .right-panel-toggle {
    display: none;
}


.beam-sections .property.property-table td:last-child,
.beam-sections .property.property-table td:nth-last-child(2) {
    width: 32px;
}

    .beam-sections .property.property-table td:last-child .button,
    .beam-sections .property.property-table td:nth-last-child(2) .button {
        border: none;
        padding: 0;
    }

        .beam-sections .property.property-table td:last-child .button img,
        .beam-sections .property.property-table td:nth-last-child(2) .button img {
            height: 20px;
            width: 20px;
        }

    .beam-sections .property.property-table td:last-child .button-text,
    .beam-sections .property.property-table td:nth-last-child(2) .button-text {
        display: none;
    }

.moment-curvature .center-panel .tab-body > div > .canvas2d-container:nth-child(1) {
    bottom: 50%;
    right: 50%;
    border-right: var(--border);
}

.moment-curvature .center-panel .tab-body > div > .canvas2d-container:nth-child(2) {
    bottom: 50%;
    left: 50%;
}

.moment-curvature .center-panel .tab-body > div > .canvas2d-container:nth-child(3) {
    border-top: var(--border);
    border-bottom: var(--border);
    top: 50%;
    bottom: 25%;
}

.moment-curvature .center-panel .tab-body > div > .canvas2d-container:nth-child(4) {
    border-right: var(--border);
    top: 75%;
    right: 50%;
}

.moment-curvature .center-panel .tab-body div > .canvas2d-container:nth-child(5) {
    top: 75%;
    left: 50%;
}

.moment-curvature .datagrid .property.property-table th:last-child, .datagrid .property.property-table td:last-child {
    position: unset;
}

.beam-span .datagrid .property.property-table th:last-child, .beam-span .datagrid .property.property-table td:last-child {
    position: sticky;
}

.elastic-stresses .left-panel {
    bottom: 0 !important;
}

.elastic-stresses .center-panel {
}

.elastic-stresses .right-panel,
.elastic-stresses .right-panel-toggle {
    display: none;
}

.elastic-analysis {
    position: absolute;
    left: 0;
    width: calc(33% - 8px);
    top: 0;
    height: 33%;
}

.elastic-distribution-1 {
    position: absolute;
    left: calc(33%);
    width: calc(33% - 8px);
    top: 0;
    height: 33%;
}

.elastic-distribution-2 {
    position: absolute;
    right: 0;
    width: calc(34% - 16px);
    top: 0;
    height: 33%;
}

.elastic-direct {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(33% + 8px);
    height: 33%;
    width: calc(33% - 8px);
}

.elastic-principal {
    position: absolute;
    right: 0;
    top: calc(33% + 8px);
    height: 33%;
    left: calc(33%);
    width: calc(33% - 8px);
}

.elastic-mohrs {
    position: absolute;
    right: 0;
    top: calc(33% + 8px);
    height: 33%;
    width: calc(34% - 16px);
}

.elastic-major {
    position: absolute;
    left: 0;
    width: calc(25% - 8px);
    bottom: 0;
    height: calc(33% - 20px);
}

.elastic-minor {
    position: absolute;
    left: calc(25%);
    width: calc(25% - 8px);
    bottom: 0;
    height: calc(33% - 20px);
}

.elastic-trajectories {
    position: absolute;
    right: 0;
    width: calc(50% - 16px);
    bottom: 0;
    height: calc(33% - 20px);
}

.analysis.analysis-template .left-panel {
    bottom: 0;
}

.analysis.analysis-template .right-panel,
.analysis.analysis-template .right-panel-toggle {
    display: none;
}

.analysis .left-panel {
    bottom: 40%;
}

.analysis .right-panel-toggle {
    display: none;
}

.analysis .left-panel.collapsed {
    bottom: 40%;
    width: 0;
    border: none;
    margin: 0;
    overflow: hidden;
}

.analysis .right-panel.left-collapsed {
    width: 0;
    border: none;
    margin: 0;
    overflow: hidden;
}

.etabs-app .left-panel {
    bottom: 50%;
}

.analysis .center-panel {
    right: 0;
}

.etabs-app .right-panel {
    height: calc(50% - 8px);
}

.curvature-canvas-section {
    position: absolute;
    height: 33%;
    width: calc(50% - 8px);
}

.curvature-canvas-curvature {
    position: absolute;
    height: 33%;
    right: 0;
    width: calc(50% - 4px);
}

.curvature-canvas-stress {
    position: absolute;
    left: 0;
    right: 0;
    height: 33%;
    top: calc(33% + 4px);
}

.curvature-canvas-steel {
    position: absolute;
    bottom: 0;
    height: calc(34% - 16px);
    width: calc(33% - 8px);
}

.curvature-canvas-concrete {
    position: absolute;
    bottom: 0;
    left: calc(33% - 4px);
    right: calc(33% - 8px);
    height: calc(34% - 16px);
    width: calc(33% - 4px);
}

.curvature-canvas-concrete-core {
    position: absolute;
    bottom: 0;
    height: calc(34% - 16px);
    right: 0;
    width: calc(34% - 4px);
}

.perf-based-eval .elastic-analysis {
    height: calc(67% - 4px);
    width: calc(33% - 8px);
}

.perf-based-eval .curvature-canvas-curvature {
    position: absolute;
    height: 33%;
    left: calc(33% - 4px);
    width: calc(33% - 4px);
}

.perf-based-eval .curvature-canvas-curvature-2 {
    position: absolute;
    height: 33%;
    right: 0;
    width: calc(34% - 4px);
}

.perf-based-eval .curvature-canvas-curvature-3 {
    position: absolute;
    height: 33%;
    top: calc(33% + 4px);
    left: calc(33% - 4px);
    right: 0;
    width: calc(67% - 4px);
}

/* set a single gap value */
.sdof-dynamics {
    --sd-gap: 8px;
}

    /* common panel size: (100% - 2*gaps) / 3 */
    .sdof-dynamics .sdof-canvas-1,
    .sdof-dynamics .sdof-canvas-2,
    .sdof-dynamics .sdof-canvas-3 {
        position: absolute;
        left: 0;
        right: 0;
        height: calc((100% - (2 * var(--sd-gap))) / 3);
    }

    /* stacked positions with equal gaps */
    .sdof-dynamics .sdof-canvas-1 {
        top: 0;
    }

    .sdof-dynamics .sdof-canvas-2 {
        top: calc((100% - (2 * var(--sd-gap))) / 3 + var(--sd-gap));
    }

    .sdof-dynamics .sdof-canvas-3 {
        top: calc(2 * ((100% - (2 * var(--sd-gap))) / 3) + 2 * var(--sd-gap));
        height: calc((100% - (2 * var(--sd-gap))) / 3 - 16px);
    }


    .sdof-dynamics .sdof-canvas-right-1 {
        position: relative;
        bottom: 0;
        left: 0;
        right: 0;
        height: 38%;
    }

    .sdof-dynamics .sdof-canvas-right-harmonic-1,
    .sdof-dynamics .sdof-canvas-right-harmonic-2,
    .sdof-dynamics .sdof-canvas-right-harmonic-3 {
        position: relative;
        /* no absolute positioning */
        width: 100%;
        min-height: 180px;
        /* tweak: 160–220px works well */
        margin-top: 8px;
        /* space between groups */
    }

    .sdof-dynamics .sdof-canvas-right-impulse-animation,
    .sdof-dynamics .sdof-canvas-right-impulse-1,
    .sdof-dynamics .sdof-canvas-right-impulse-2,
    .sdof-dynamics .sdof-canvas-right-impulse-3 {
        position: relative;
        /* no absolute positioning */
        width: 100%;
        min-height: 180px;
        /* tweak: 160–220px works well */
        margin-top: 8px;
        /* space between groups */
    }

.steel-beam .steel-beam-forces-table {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(50% - 12px);
    height: 33%;
}

.steel-beam .steel-beam-analysis-canvas {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(50% - 12px);
    height: 33%;
}

.steel-beam .steel-beam-section-canvas {
    position: absolute;
    left: 0;
    top: calc(33% + 8px);
    width: calc(50% - 12px);
    height: 33%;
}

.steel-beam .steel-beam-span-2d-canvas {
    position: absolute;
    right: 0;
    top: calc(33% + 8px);
    width: calc(50% - 12px);
    height: 33%;
}

.steel-beam .steel-beam-span-3d-canvas {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: calc(34% - 32px);
}

.steel-beam .steel-beam-forces-table .property-table {
    margin: 0;
    max-height: 100%;
}

.steel-beam .steel-beam-forces-table .property-table-footer {
    margin-top: 4px;
}

.steel-beam .steel-beam-forces-table .table {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 44px;
    bottom: 16px;
    margin-bottom: 0;
    height: unset;
    width: calc(100% - 32px);
}


@media only screen and (max-height: 1000px) {
    .perf-based-eval .curvature-canvas-curvature, .perf-based-eval .curvature-canvas-curvature-2 {
        height: 300px;
    }

    .perf-based-eval .curvature-canvas-curvature-3 {
        top: 304px;
        height: 300px;
    }

    .perf-based-eval .elastic-analysis {
        height: 604px;
    }

    .curvature-canvas-concrete, .curvature-canvas-concrete-core, .curvature-canvas-steel {
        top: 608px;
        height: 300px;
        bottom: 4px;
    }
}