.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;
}

    .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%;
}

.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% - 16px);
}

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

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

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

.perf-based-eval .curvature-canvas-steel {
}

.perf-based-eval .curvature-canvas-concrete {
}

.perf-based-eval .curvature-canvas-concrete-core {
}

.perf-based-eval .right-panel {
    background: #eff1f2;
    border-radius: 16px;
    position: absolute;
    margin: 8px;
    right: 0;
    top: 0;
    bottom: 0;
    width: 400px;
    overflow: hidden;
}

/* 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) {
    .curvature-canvas-section, .curvature-canvas-curvature {
        height: 300px;
    }

    .curvature-canvas-stress {
        top: 304px;
        height: 300px;
    }

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