div.fourDEditorGridContainer {

    width: 100%;
    height: 80vh;
    display: grid;

    /* top and left border close */
    border-top: 1px solid;
    border-left: 1px solid;


    /* add border to box size so its 100vh including borders */
    box-sizing: border-box;

}

div.fourDEditorTileContainer {

    display: flex;

    /* vertical */
    flex-direction: column;

    /* vertical */
    align-items: flex-start;

    height: 100%;
    min-height: 0;

    /* bottom and right borders */
    border-bottom: 1px solid;
    border-right: 1px solid;

    box-sizing: border-box;

}

div.fourDEditorTileContainer h5 {
    text-align: center;
    margin: 0.5em 0.5em;
}

canvas.fourDEditorPlane {

    border: 0px solid;

    /* simply means it will fill remaining space */
    width: 100%;
    height: 100%;

    /* allows shrinking */
    min-height: 0;

}



canvas.fourDEditorPreview {

    border: 0px solid;

    /* simply means it will fill remaining space */
    width: 100%;
    height: 100%;

    /* allows shrinking */
    min-height: 0;

}