/* ======================== flexx.ui.layouts._hv ========================*/

/* Autogenerated code from Flexx. Code Subject to the BSD-2-clause license. */





    /* === for box layout === */

    .flx-HVLayout > .flx-Widget {
        margin: 0; /* the layout handles the margin */
     }

    .flx-box {
        display: -webkit-flex;
        display: -ms-flexbox;  /* IE 10 */
        display: -ms-flex;     /* IE 11 */
        display: -moz-flex;
        display: flex;

        /* How space is divided when all flex-factors are 0:
           start, end, center, space-between, space-around */
        -webkit-justify-content: space-around;
        -ms-justify-content: space-around;
        -moz-justify-content: space-around;
        justify-content: space-around;

        /* How items are aligned in the other direction:
           center, stretch, baseline */
        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        -moz-align-items: stretch;
        align-items: stretch;
    }

    .flx-box.flx-horizontal {
        -webkit-flex-flow: row;
        -ms-flex-flow: row;
        -moz-flex-flow: row;
        flex-flow: row;
        width: 100%;
    }
    .flx-box.flx-vertical {
        -webkit-flex-flow: column;
        -ms-flex-flow: column;
        -moz-flex-flow: column;
        flex-flow: column;
        height: 100%; width: 100%;
    }
    .flx-box.flx-horizontal.flx-reversed {
        -webkit-flex-flow: row-reverse;
        -ms-flex-flow: row-reverse;
        -moz-flex-flow: row-reverse;
        flex-flow: row-reverse;
    }
    .flx-box.flx-vertical.flx-reversed {
        -webkit-flex-flow: column-reverse;
        -ms-flex-flow: column-reverse;
        -moz-flex-flow: column-reverse;
        flex-flow: column-reverse;
    }

    /* Make child widgets (and layouts) size correctly */
    .flx-box.flx-horizontal > .flx-Widget {
        height: auto;
        width: auto;
    }
    .flx-box.flx-vertical > .flx-Widget {
        width: auto;
        height: auto;
    }

    /* If a boxLayout is in a compound widget, we need to make that widget
       a flex container (done with JS in Widget class), and scale here */
    .flx-Widget > .flx-box {
        flex-grow: 1;
        flex-shrink: 1;
    }

    /* === For split and fix layout === */

    .flx-split > .flx-Widget {
        /* Let child widgets position well, and help them become a layout
         * boundary. We cannot do "display: block;", as that would break stuff.
        /* overflow is set in Widget.CSS, setting here breaks scrollable widgets
         */
        position: absolute;
    }

    .flx-split.flx-dragging { /* Fix for odd drag behavior on Chrome */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .flx-split.flx-dragging iframe {  /* disable iframe during drag */
        pointer-events: none;
    }

    .flx-split.flx-horizontal > .flx-split-sep,
    .flx-split.flx-horizontal.flx-dragging {
        cursor: ew-resize;
    }
    .flx-split.flx-vertical > .flx-split-sep,
    .flx-split.flx-vertical.flx-dragging {
        cursor: ns-resize;
    }
    .flx-split-sep {
        z-index: 2;
        position: absolute;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0); /* transparent */
        /* background: #fff;  /* hide underlying widgets */
    }