/* container for elements stacked horizontal  */
.FlexContHoriz {	
	display: flex;		
	flex-direction: row;								
}

/* container for elements stacked vertical */
.FlexContVert {			
	display: flex;			
	flex-direction: column;								
}

/* container for child element positioning */
/* 1 2 3 */
/* 4 5 6 */
/* 7 8 9 */

.FlexContAlign1 {	
	display: flex;
    align-items: flex-start;   	
    justify-content: flex-start;   				
}

.FlexContAlign2 {	
	display: flex;
    align-items: flex-start;	   	
    justify-content: center;    				
}

.FlexContAlign3 {	
	display: flex;	
    align-items: flex-start;	
    justify-content: flex-end;  						
}

.FlexContAlign4 {	
	display: flex;
    align-items: center;
    justify-content: flex-start;   				
}

.FlexContAlign5 {	
	display: flex;
    align-items: center;
    justify-content: center;    				
}

.FlexContAlign6 {	
	display: flex;
    align-items: center;	
    justify-content: flex-end;  						
}

.FlexContAlign7 {	
	display: flex;
    align-items: flex-end;	
    justify-content: flex-start; 					
}

.FlexContAlign8 {	
	display: flex;
    align-items: flex-end;			
    justify-content: center; 					
}

.FlexContAlign9 {	
	display: flex;
    align-items: flex-end;	
    justify-content: flex-end; 					
}

/* deprecated: for new dev, use one of the FlexContAlignX above instead */
.FlexContAlignVCenter {	
	display: flex;
    align-items: center;						
}

	
/* for items with defined width/height either absolute size or percentage; if no size is given the item will be sized based on content
   since this is the default, this class does not need to be applied unless set dynamically from FlexItemAuto through javascript  */
.FlexItemDef { 	    		
	flex: none;
}
		
/* fills remaining space left by other FlexItemDef items 
   if more than one FlexItemAuto defined in a container, the size is divided evenly among them */
.FlexItemAuto { 			
	flex: 1;

    /* hack for Chrome bug which doesn't respect flex item sizing and instead uses content for sizing;
       this makes it work like other browsers that don't need this;
       submitted the bug (https://bugs.chromium.org/p/chromium/issues/detail?id=606186) and was promissed a fix in Chrome v51 */
    flex-basis: 0; 

    /* explicitly allows flexbox items to be smaller than the size of their content (allowing their content to scroll);
       the flexbox spec was changed to default 'min-width/height' to 'auto'; setting them to 0 reverts back to the original behavior */
    min-height: 0;
    min-width: 0;

    /* flex items like this, with large content, should shrink to 0 not affecting their siblings unless they also are flex items;
       a Chrome bug was introduced that shrinks all siblings of a flexbox container, collapsing content of items not marked as flex;
       this hack forces this flex item to infinitely (almost) shrink in proportion to its siblings preventing them from collapsing */
    flex-shrink: 1000000;
}