:root {
    --workspace-left-panel-min-width: 250px;
    --workspace-right-panel-min-width: 250px;
    --workspace-top-panel-min-height: 250px;
    --workspace-bottom-panel-min-height: 100px;
    --workspace-spacing: 10px;
    --workspace-top: 70px;
    --workspace-handler-size: 2px;
}

#workspace-container {
    height: calc(100vh - var(--workspace-spacing));
}

#workspace-container .content-column {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: calc(var(--workspace-left-panel-min-width) + var(--workspace-right-panel-min-width) + var(--workspace-spacing) + var(--workspace-handler-size));
    min-height: calc(var(--workspace-top-panel-min-height) + var(--workspace-bottom-panel-min-height) + 2 * var(--workspace-spacing) + var(--workspace-handler-size) + var(--workspace-top));
}

#workspace {
    display: flex;
    flex-direction: row;
    flex: 1;
    max-height: calc(100% - var(--workspace-top));
}

#workspace-left-panel {
    width: 50%;
    min-width: var(--workspace-left-panel-min-width);
    overflow: hidden;
    padding-right: var(--workspace-spacing);
}

#workspace-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: var(--workspace-right-panel-min-width);
}

#workspace-right-top-panel {
    height: 70%;
    min-height: var(--workspace-top-panel-min-height);
    overflow: hidden;
    padding-left: var(--workspace-spacing);
    padding-bottom: var(--workspace-spacing);
}

#workspace-right-bottom-panel {
    flex: 1;
    min-height: var(--workspace-bottom-panel-min-height);
    overflow: hidden;
    padding-left: var(--workspace-spacing);
    padding-top: var(--workspace-spacing);
}

#workspace-horizontal-handler {
    background-color: lightgray;
    width: var(--workspace-handler-size);
    min-width: var(--workspace-handler-size);
    max-width: var(--workspace-handler-size);
    height: 100%;
    padding-left: 0;
    cursor: ew-resize;
}

#workspace-vertical-handler {
    background-color: lightgray;
    height: var(--workspace-handler-size);
    min-height: var(--workspace-handler-size);
    max-height: var(--workspace-handler-size);
    width: 100%;
    cursor: ns-resize;
}

#workspace .panel-content {
    width: 100%;
    height: 100%;
    overflow: auto;
}

#workspace-left-panel .panel-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#workspace-right-top-panel .panel-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

#workspace-console {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

#workspace-console .console-placeholder {
    position: absolute;
    z-index: -1;
    color: darkgray;
    font-size: 0.8em;
    font-style: italic;
}

#workspace-console .py-error {
    margin-top: 0;
}

#workspace-console .py-output {
    flex: 1;
    max-height: unset;
    margin-bottom: 0;
    background-color: white;
}

#workspace-left-panel .nav-tabs {
    font-size: 0.9em;
}

#workspace-left-panel .tab-content {
    flex: 1;
    height: 50%;
    padding-top: 4px;
}

#workspace-left-panel .tab-pane {
    height: 100%;
}

#workspace-left-panel .tab-pane.code {
    margin-bottom: 100px;
}

#workspace-left-panel .tab-pane.code.show {
    display: flex;
    flex-direction: column;
}

#workspace-left-panel .tab-pane.code editor {
    flex: 1;
    height: 50%;
}

#workspace-left-panel .tab-pane.code editor .cm-editor {
    height: 100%;
}

#workspace-left-panel #instructions {
    overflow: auto;
    height: 100%;
    padding-top: 10px;
    padding-right: 10px;
}