.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 {
    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 {
    display: none !important;
}

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


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

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

.load-combination .right-panel {
    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;
    }


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

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

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