/* resizer.css */
.resizable-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    flex: 1;
    min-height: 200px;
    --scale: 1;
}

.resizable-col-left {
    flex: 3 1 0%;
    min-width: 200px;
}

.resizable-col-right {
    flex: 1 1 0%;
    min-width: 200px;
}

.scalable-content {
    transform: scale(var(--scale));
    transform-origin: top left;
    width: calc(100% / var(--scale));
    height: calc(100% / var(--scale));
    font-size: calc(1rem * var(--scale));
}

#resizer, .table-resizer {
    width: 5px;
    background-color: #ccc;
    cursor: col-resize;
    flex-shrink: 0;
}

#vertical-resizer {
    height: 5px;
    background-color: #ccc;
    cursor: row-resize;
    flex-shrink: 0;
}

.resizable-tables-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    flex: 1;
    min-height: 200px;
    --scale: 1;
}

.resizable-table-col {
    flex: 1 1 0%;
    min-width: 200px;
}

.vertical-resizable-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px); /* Adjust as needed */
    overflow: hidden;
}