.flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex; 

    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 

    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    -moz-flex-direction: row;
    flex-direction: row;

    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;

    flex-flow: row nowrap;

}

.flex > *{
    float:none !important; /* firefox breaks if this isnt here*/
}
.flex > div{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}

/* ROW ORIENTATION */
.flex.left{
    justify-content: flex-start;
}
.flex.right{
    justify-content: flex-end;
}
.flex.center{
    justify-content: center;
}
.flex.space-between{
    justify-content:space-between
}
.flex.space-around{
    justify-content:space-around
}
.flex.space-evenly{
    justify-content:space-around
}
.flex.top{
    align-items: flex-start;
}
.flex.middle{
    align-items: center;
}
.flex.bottom{
    align-items: flex-end;
}
.flex.wrap{
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-flow: row wrap;
}
.flex.wrap.divnowrap > div{
    white-space: nowrap;
}
/* COLUMN ORIENTATION */
.flex.stack{
    -webkit-flex-direction: column; 
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    flex-flow: column;
}
.flex.stack > * {
    min-height: 0px;
}
.flex.stack.top{
    justify-content: flex-start;
}
.flex.stack.bottom{
    justify-content: flex-end;
}
.flex.stack.middle{
    justify-content: center;
}
.flex.stack.left{
    align-items: flex-start;
}
.flex.stack.right{
    align-items: flex-end;
}
.flex.stack.center{
    align-items: center;
}

/* COMMON */
.flex > .grow{
    flex-shrink: 0;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    flex-grow: 1;
    flex-basis: 0%; 
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}

.flex.stack > .grow{
    min-height: 0px;
    height:0px;  
}
.flex.stack > .grow.v-scroll{
    overflow-y: auto;
}

.flex.stack > .grow.scroll{
    overflow-y: auto;
    overflow-x: auto;
}

.flex.debug, .flex.debug .flex{
    background-color:rgba(149,129,238,.2) !important;
    box-shadow: inset 0px 0px 1px rgba(149,129,238,.8) !important;
}