/* v2024.11.28 */
.container {
    height: 100vh;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    /*
    user-select: none;
    background: linear-gradient(to right, #b89370, #d7bba8, #c0a080);*/
}

.splitter {
    width: 4px;
    cursor: ew-resize;
    /*background-color: rgba( 157, 90, 1, 0.50 );*/
}

.left {
    flex-grow: 0;
    width: 100px;
    overflow: auto;
    transition: min-width 0.5s ease;
}

.main {
    flex-grow: 1;
    background-color: #FF000000;
    overflow: auto;
    transition: min-width 0.5s ease;
}

.right {
    flex-grow: 0;
    width: 50px;
    overflow: auto;
    transition: min-width 0.5s ease;
}

/* CSS for mobile and smaller screens */
@media (max-width: 600px) {
    .left, .right {
        min-width: 40%; /* Each pane takes up the full width of the container */
    }
    .main {
        min-width: 60%; /* Each pane takes up the full width of the container */
    }
    .splitter {
        width: 0px;
    }
}