/* MAIN LAYOUT COMPONENTS ----------------------------------------------- */
/* expands height of the page regardless of content - for footer position */
html, body, .root-container {
  height: 100%;
}
/* creates a slot for the footer ---------------------------------------- */
.page-wrap {
  min-height: 100%;
  margin-bottom: -24px;
  padding-bottom: 24px;
}
/* utility links at page top -------------------------------------------- */
.nav-header {
  display: flex;
  justify-content: flex-end;
  align-content: center;
  padding: 0 1rem 0 0;
  margin: 0;
  width: 100%;
  height: 18px;
}
/* blue header area w/ logo, title, action links ------------------------ */
header {
  display: flex;
  flex-wrap: no-wrap;
  justify-content: flex-start;
  align-items: center;
  background-color: #4287d6;
  padding: 0 1rem;
  height: 3.75rem;
  color: #fff;
  position: relative;
}
/* contains all content below the header -------------------------------- */
main {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:no-wrap;
  flex-wrap:no-wrap;
  -webkit-box-align:start;
  -ms-flex-align:start;
  align-items:flex-start;
  padding: 1rem;
  margin: 0;
  width: 100vw;
}
/* nav element for child pages, positioned under header ----------------- */
nav.sub-nav {
  display: flex;
  justify-content: center;
  background-color: #669ee0;
}
/* nav element for main navigation, on left side or hidden for mobile --- */
nav.nav-sidebar {
  flex: 0 0 auto;
  border-right: 1px solid #ececec;
  padding: .5rem 0 2rem 0;
  margin: 0 2rem 0 0;
  text-align: right;
}
/* wrapper for all content in <main> besides sidebar -------------------- */
.main-content {
  flex: 1;
  margin-bottom: 2rem;
}
section {
  border-bottom: 1px solid #d1d1d1;
}
footer {
  text-align: center;
  padding: .25rem 0;
  width: 100%;
  color: #555;
  background-color: #ecf3fa;
  font-size: .688rem;
}
/* basic flex component for horizontal layout --------------------------- */
.row {
  display: flex;
  min-height: 1rem;
  align-items: center;
  flex-wrap: no-wrap;
  justify-content: space-between;
  position: relative;
}
.row.row-min {
  min-height: 0;
}

/* column for side-by-side containers ----------------------------------- */
.column {
  padding: 0;
  margin: 0 2rem 0 0;
}
.column:last-child {
  margin-right: 0;
}
/* turns a .row into a vertical layout w/ top-aligned content ----------- */
.flex-column {
  flex-direction: column;
  justify-content: flex-start;
}

/* GENERAL HELPERS ------------------------------------------------------ */
.relative {
  position: relative;
}
.inline {
  display: inline-block;
}
.middle {
  vertical-align: middle;
}
.align-top {
  vertical-align: top;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-nowrap {
  white-space: nowrap;
}
.nowrap {
  white-space: nowrap;
}
.wrap {
  white-space: normal;
  overflow: visible;
}

/* FLEX HELPERS --------------------------------------------------------- */
.flex-left {
  justify-content: flex-start;
}
.flex-right {
  justify-content: flex-end;
}
.flex-center {
  justify-content: center;
}
.items-top {
  align-items: flex-start;
}
.items-bottom {
  align-items: flex-end;
}
.items-center {
  justify-content: center;
}
.items-space-around {
  justify-content: space-around;
}
.items-stretch {
  align-items: stretch;
}

.flex-order-two {
  order: 2;
}
.flex-order-one {
  order: 1 !important;
}
/* flex-grow factors --------------------------------------------------- */
.flex-grow-0 {
  flex-grow: 0;
}
.flex-grow-half {
  flex-grow: .5;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-grow-1-25 {
  flex-grow: 1.25;
}
.flex-grow-1-5 {
  flex-grow: 1.5;
}
.flex-grow-2 {
  flex-grow: 2;
}
.flex-grow-2-5 {
  flex-grow: 2.5;
}
.flex-grow-3 {
  flex-grow: 3;
}

/* min/max width ------------------------------------------------------- */
.min-width-zero {
  min-width: 0;
}

.max-width-1 {
  max-width: 4rem; /* 1rem = 16px, 4rem = 64px */
}
.max-width-2 {
  max-width: 8rem; /* 128px */
}
.max-width-3 {
  max-width: 12rem; /* 192px */
}
.max-width-4 {
  max-width: 16rem; /* 256px */
}
.max-width-5 {
  max-width: 24rem; /* 384px */
}
.max-width-6 {
  max-width: 32rem; /* 512px */
}
.max-width-7 {
  max-width: 40rem; /* 640px */
}
.max-width-8 {
  max-width: 48rem; /* 768px */
}
.max-width-9 {
  max-width: 56rem; /* 896px */
}
.max-width-10 {
  max-width: 64rem; /* 1024px */
}
.max-width-11 {
  max-width: 72rem; /* 1152px */
}
.max-width-12 {
  max-width: 80rem; /* 1280px */
}

/* percentage width ---------------------------------------------------- */
.width-1 {
  width: 8.33333333%;
}
.width-2 {
  width: 16.66666667%;
}
.width-3 {
  width: 25%;
}
.width-4 {
  width: 33.33333333%;
}
.width-5 {
  width: 41.66666667%;
}
.width-6 {
  width: 50%;
}
.width-7 {
  width: 58.33333333%;
}
.width-8 {
  width: 66.66666667%;
}
.width-9 {
  width: 75%;
}
.width-10 {
  width: 83.33333333%;
}
.width-11 {
  width: 91.66666667%;
}
.width-12 {
  width: 100%;
}

/* fixed rem width ----------------------------------------------------- */
.fix-width-half {
  width: 2rem; /* 1rem = 16px, 2rem = 32px */
}
.fix-width-1 {
  width: 4rem; /* 1rem = 16px, 4rem = 64px */
}
.fix-width-2 {
  width: 8rem; /* 128px */
}
.fix-width-3 {
  width: 12rem; /* 192px */
}
.fix-width-4 {
  width: 16rem; /* 256px */
}
.fix-width-5 {
  width: 24rem; /* 384px */
}
.fix-width-6 {
  width: 32rem; /* 512px */
}
.fix-width-7 {
  width: 40rem; /* 640px */
}
.fix-width-8 {
  width: 48rem; /* 768px */
}
.fix-width-9 {
  width: 56rem; /* 896px */
}
.fix-width-10 {
  width: 64rem; /* 1024px */
}
.fix-width-11 {
  width: 72rem; /* 1152px */
}
.fix-width-12 {
  width: 80rem; /* 1280px */
}

/* fixed pixel width -------------------------------------------------- */
.width-300 {
  width: 300px;
}
.width-480 {
  width: 480px;
}
.width-530 {
  width: 530px;
}
.width-680 {
  width: 680px;
}

/* fixed height ------------------------------------------------------- */
.max-height-500 {
  max-height: 500px;
  overflow: auto;
}
.min-height-2 {
  height: 2rem;
}

/* margins ------------------------------------------------------------ */
.margin-0 {
  margin: 0 !important;
}

.margin-top-neg-1 {
  margin-top: -1rem;
}
.margin-top-0 {
  margin-top: 0;
}
.margin-top-half {
  margin-top: .5rem;
}
/* REMOVE */
.margin-top1 {
  margin-top: 1rem;
}
.margin-top-1 {
  margin-top: 1rem;
}
.margin-top-2 {
  margin-top: 2rem;
}
.margin-top-4 {
  margin-top: 4rem;
}

.margin-right-zero {
  margin-right: 0 !important;
}
.margin-right-0 {
  margin-right: 0 !important;
}
.margin-right-half {
  margin-right: .5rem;
}
.margin-right-1 {
  margin-right: 1rem;
}
.margin-right-15 {
  margin-right: 1.5rem;
}
.margin-right-2 {
  margin-right: 2rem;
}
.margin-right-25 {
  margin-right: 2.5rem;
}
.margin-right-3 {
  margin-right: 3rem;
}
.margin-right-35 {
  margin-right: 3.5rem;
}
.margin-right-4 {
  margin-right: 4rem;
}

.margin-bottom-0 {
  margin-bottom: 0;
}
.margin-bottom-half {
  margin-bottom: .5rem;
}
.margin-bottom-1 {
  margin-bottom: 1rem;
}
/* REMOVE */
.margin-bottom1 {
  margin-bottom: 1rem;
}
/* REMOVE */
.margin-bottom2 {
  margin-bottom: 2rem;
}
.margin-bottom-2 {
  margin-bottom: 2rem;
}
.margin-bottom-4 {
  margin-bottom: 4rem;
}

.margin-left-0 {
  margin-left: 0;
}
.margin-left-half {
  margin-left: .5rem;
}
.margin-left-1, .indent-1 {
  margin-left: 1rem;
}
.margin-left-2, .indent-2 {
  margin-left: 2rem;
}
.margin-left-3, .indent-3 {
  margin-left: 3rem;
}

/* padding ------------------------------------------------------------- */
.padding-0 {
  padding: 0 !important;
}

.padding-left-0 {
  padding-left: 0;
}
.padding-left-half {
  padding-left: .5rem;
}
.padding-left-1 {
  padding-left: 1rem;
}
.padding-left-2 {
  padding-left: 2rem;
}
.padding-left-2-5 {
  padding-left: 2.5rem;
}

.padding-right-min {
  padding-right: 4px;
}

.padding-bottom-6 {
  padding-bottom: 6rem;
}

/* extras -------------------------------------------------------------- */
.pre-line {
  white-space: pre-line;
}
.break-word {
  word-break: break-all;
}
.debug-outline {
  border: 1px dashed red;
}