/* 
 A container for the docking areas of the main body area for indi
 
 This container lives under the header and contains regions for a
 docking items on the left, right, top or bottom as well as the main
 area for "docking" in the middle.
 
 This container contains the left dock, right dock & sub-container.
 The sub-container contains the vertical docks.
 */
.indi-dock-container {
    position: relative;
    pointer-events: none; /* Disable pointer events for the docks to allow clicks to fall through to the underlying .indi-full-content div (see below) */
    width: 100%;
    height: 100%;
    background: none;
    display: flex;
    flex-grow: 1;
    flex-flow: row nowrap;
}

.indi-dock-sub-container {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
}


.indi-dock {
    position: relative;
    flex-grow: 0;
    display: flex;
}


.indi-dock-left {
    flex-flow: column nowrap;
    max-width: 30%; /* Don't let the side-docks auto-size out into the middle of the screen */
}

.indi-dock-right {
    flex-flow: column nowrap;
    max-width: 30%; /* Don't let the side-docks auto-size out into the middle of the screen */
}

.indi-dock-top {
    flex-flow: row nowrap;
}

.indi-dock-bottom {
    flex-flow: row nowrap;
}


.indi-dock-mid {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
}

/*  Represents the entire area under the header and importantly *behind* the main dock area.  

    This area is good for:
      * 3D content that should render behind the docks; or
      * Dialogs that should be draggable over the dock content
*/
.indi-full-content {
    pointer-events: auto; /* Re-enable pointer events for the full-screen content under here, eg Cesium */

    /* This content is a child of a flex-layout and lives next to auto-laid out content, we want to detach ourselves from that layout hierarchy and expand to the full-parent size */
    position: absolute; 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    display: flex;
    flex-flow: column nowrap;
}

.indi-stacked-content.indi-stacked-content {
    pointer-events: none;
    position: relative;

    display: flex;
    flex-flow: column nowrap;
    
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    
    flex-grow: 1;
    flex-shrink: 1;
}


/* Re-enable pointer events for content that is under the docks */
.indi-dock > div {
    pointer-events: auto;
}
.indi-dock-mid > div {
    pointer-events: auto;
}
.indi-stacked-content > div {
    pointer-events: auto;
}