.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, .flex > label{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing: border-box;
	flex-shrink: 0;
}

/* ROW ORIENTATION */
.flex.left:not(.stack, .column){
    justify-content: flex-start;
}
.flex.right:not(.stack, .column){
    justify-content: flex-end;
}
.flex.center:not(.stack, .column){
    justify-content: center;
}
.flex.space-between:not(.stack, .column){
    justify-content:space-between
}
.flex.space-around:not(.stack, .column){
    justify-content:space-around
}
.flex.top:not(.stack, .column){
    align-items: flex-start;
}
.flex.middle:not(.stack, .column){
    align-items: center;
}
.flex.bottom:not(.stack, .column){
    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;
}

/* COLUMN ORIENTATION */
.flex.column,
.flex.stack{
    -webkit-flex-direction: column; 
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    flex-flow: column;
}
.flex.column > *,
.flex.stack > * {
    min-height: 0px;
    float:none !important; /* firefox breaks if this isnt here*/
}

.flex.column,
.flex.stack.top{
    justify-content: flex-start;
}

.flex.column.bottom,
.flex.stack.bottom{
    justify-content: flex-end;
}
.flex.column.middle,
.flex.stack.middle{
    justify-content: center;
}
.flex.column.bottom.left, /* becuase there is a conflict from the original flex.css*/
.flex.stack.bottom.left,
.flex.column.left,
.flex.stack.left{
    align-items: flex-start;
}
.flex.column.right,
.flex.stack.right{
    align-items: flex-end;
}
.flex.column.center,
.flex.stack.center{
    align-items: center;
}

/* COMMON */
.flex > .growAuto,
.flex > .grow{
    float:none !important; /* firefox breaks if this isn't here*/
    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;
	overflow: hidden; /* required on all grow elements incase any children wish to have scroll*/
}

.flex:not(.stack, .column) > .growAuto,
.flex:not(.stack, .column) > .grow{
	min-width: 0px;
	width: 0px;
}
.flex:not(.stack, .column) > .growAuto{
	width:auto;
}

.flex.column > .growAuto,
.flex.stack > .growAuto,
.flex.column > .grow,
.flex.stack > .grow{
    min-height: 0px;
	height: 0px;
}
.flex.column > .growAuto,
.flex.stack > .growAuto{
	height: auto;
}

.flex.column > .growAuto.v-scroll,
.flex.stack > .growAuto.v-scroll,
.flex.column > .grow.v-scroll,
.flex.stack > .grow.v-scroll{
    overflow-y: auto;
}

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