/*******************************
 * FLEX CONTAINER SYSTEM
 *******************************/
/* 
 * ROOT
 * This is designed for a page layout where any scrolling is done within a content element.
 */
.flex-root {
  position: relative;
  display: flex;
  flex-grow: 1; /* self will grow by this factor relative to siblings */
  flex-shrink: 0; /* self will NOT shrink relative to siblings */
  flex-direction: column; /* children MAIN AXIS is in block direction (down) */
  flex-wrap: nowrap; /* children will not wrap if available vertical space exceeded */
  align-items: stretch; /* children will have their center aligned to the main axis. To have the width of a child fill the space in the cross axis specify { align-self: stretch } on the child */
  align-content: stretch; /* children: distributes space between and around flex items along the cross-axis of their container. */
  justify-content: flex-start; /* children will be immediately next to each other along the main axis */
  min-height: 0; /* fix for Firefox mishandling of overflow-y on inner box */
  /* padding: 2px; border:1px dotted red; */
}

/*
 * FLEX HEADER
 */
.flex-header {
  position: relative;
  display: flex; /* flex-direction is row by default */
  flex-grow: 0;
  flex-shrink: 0;
  min-height: 0px;
  height: 36px;
  max-height: 50px;
  align-items: center;
  box-shadow: 0px 2px 3px -1px black;
}
.flex-header nav {
  margin: 2px;
}

/*
 * ROW
 */
.flex-row {
  position: relative;
  display: flex;
  flex-direction: row; /* children MAIN AXIS is inline direction (RTL) */
  flex-wrap: wrap; /* children will wrap if available horizontal space exceeded */
  justify-content: flex-start; /* children will be immediately next to each other along the main axis */
  min-height: 0; /* fix for Firefox mishandling of overflow-y on inner box */
}
/* 
 * COLUMN
 */
.flex-col {
  position: relative;
  display: flex;
  flex-direction: column; /* children MAIN AXIS is block direction (DOWN) */
  flex-wrap: nowrap; /* children will NOT wrap if available vertical space exceeded */
  justify-content: flex-start; /* children will be immediately next to each other along the main axis */
  min-height: 0; /* fix for Firefox mishandling of overflow-y on inner box */
}
/* 
 * SIDEBAR
 */
.flex-sidebar {
  position: relative;
  display: flex;
  flex-grow: 0; /* self will stay the size determined by its content */
  flex-shrink: 1; /* self will shrink by this factor relative to siblings */
  flex-direction: column; /* children MAIN AXIS is in block direction (down) */
  flex-wrap: nowrap; /* children will not wrap if available vertical space exceeded */
  min-height: 0; /* fix for Firefox mishandling of overflow-y on inner box */
}
/* 
 * MODIFIERS
 * Most of these are just one line, but I find it is easier to read the behaviour 
 * of the element from the class list than from inline style additions.
 */
.self-stretch {
  /* Stretch the current element to the content bounds in the cross-axis direction: */
  align-self: stretch; /* ONLY HAS AN EFFECT IF PARENT HAS align-items: center; */
}
.self-center {
  /* Allow the current element to maintain it's own bounds in the cross-axis direction: */
  align-self: center; /* ONLY HAS AN EFFECT IF PARENT HAS align-items: stretch; */
}
.child-center {
  /* align children center to main axis, allowing children to maintain its own bounds in the cross-axis direction: */
  align-items: center;
}
.child-stretch {
  /* children bounds match the dimension of the cross-axis space: */
  align-items: stretch;
}
.child-align-start {
  justify-content: flex-start;
}
.child-align-end {
  justify-content: flex-end;
}
.flex-wrap {
  flex-wrap: wrap; /* children will wrap if available main axis exceeded */
}
.flex-fit-height {
  /* Ensures the height of the element fits the available space, without being stretched by its content. 
  *   NOTE: this works best as the container of .flex-height-autoscroll.
  */
  overflow: initial;
  flex-grow: 1;
  max-height: 100%;
  /* height: 100%; */
  min-height: 0;
}
.flex-height-autoscroll {
  /* Ensures the height of the element fits the available space, without being stretched by its content. 
  *   NOTE: this works best if the container is flex-col.
  */
  overflow-y: auto;
  /* flex-grow: 1; */
  max-height: 100%;
  height: 100%;
  min-height: 0;
}
.flex-grow {
  flex-grow: 1;
}