@charset "UTF-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

meta.foundation-version {
  font-family: "1.2.0"; }

meta.foundation-mq {
  font-family: "small=0&medium=46.0625rem&large=65rem&xlarge=90rem&xxlarge=120rem"; }

/*
  GLOBAL
  ------

  Global styles and settings for Foundation for Apps are stored here. This file must always
  be imported, no matter what.

  Includes:
   -
*/
html, body {
  height: 100%;
  font-size: 100%; }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

body {
  background: #fff;
  color: #222;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
  display: inline-block;
  vertical-align: middle; }

a, [ui-sref], [zf-open], [zf-close], [zf-toggle] {
  cursor: pointer; }

#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object {
  max-width: none !important; }

.padding {
  padding: 1rem; }

meta[name="viewport"] {

  zoom: 1;
}

/*
  ACTION SHEET
  ------------

  A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.
*/
/*
  Styles for the list inside an action sheet.
  Don't include this mixin if you want to build custom controls inside the sheet.
*/
/*
  Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.
*/
.action-sheet-container {
  position: relative;
  display: inline-block; }
  .action-sheet-container .button {
    margin-left: 0;
    margin-right: 0; }

.action-sheet {
  position: fixed;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  transition-property: transform opacity;
  transition-duration: 0.25s;
  transition-timing-function: ease-out;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.25);
  bottom: 0;
  transform: translateY(100%); }
  .action-sheet.is-active {
    transform: translateY(0%); }
  .action-sheet ul {
    margin: -1rem;
    margin-top: 0;
    list-style-type: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .action-sheet ul:first-child {
      margin-top: -1rem; }
      .action-sheet ul:first-child li:first-child {
        border-top: 0; }
    .action-sheet ul a {
      display: block;
      padding: 0.8rem;
      line-height: 1;
      color: #000;
      border-top: 1px solid transparent; }
      .action-sheet ul a:hover {
        color: #000;
        background: rgba(242, 242, 242, 0.9); }
    .action-sheet ul .alert > a {
      color: #F04124; }
    .action-sheet ul .disabled > a {
      pointer-events: none;
      color: #999; }
  @media only screen and (min-width: 46.0625em) {
    .action-sheet {
      /*
    Core styles
  */
      position: absolute;
      left: 50%;
      width: 12.5rem;
      border-radius: 4px;
      opacity: 0;
      pointer-events: none;
      /*
    Menu shadow
  */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
      /*
    Active state
  */
      /*
    Menu tail
  */
      /*
    Positioning
  */
      top: auto;
      bottom: 0;
      transform: translateX(-50%) translateY(110%); }
      .action-sheet.is-active {
        opacity: 1;
        pointer-events: auto; }
      .action-sheet::before, .action-sheet::after {
        content: '';
        position: absolute;
        left: 50%;
        display: block;
        width: 0px;
        height: 0px;
        border-left: 0px solid transparent;
        border-right: 0px solid transparent;
        margin-left: 0px; }
      .action-sheet.is-active {
        transform: translateX(-50%) translateY(100%); }
      .action-sheet::before, .action-sheet::after {
        top: 0px;
        bottom: auto;
        border-top: 0;
        border-bottom: 0px solid rgba(255, 255, 255, 0.9); }
      .action-sheet::before {
        top: -2px;
        border-bottom-color: rgba(0, 0, 0, 0.15); }
      .action-sheet.top {
        /*
    Core styles
  */
        position: absolute;
        left: 50%;
        width: 12.5rem;
        border-radius: 4px;
        opacity: 0;
        pointer-events: none;
        /*
    Menu shadow
  */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
        /*
    Active state
  */
        /*
    Menu tail
  */
        /*
    Positioning
  */
        top: 0;
        bottom: auto;
        transform: translateX(-50%) translateY(-120%); }
        .action-sheet.top.is-active {
          opacity: 1;
          pointer-events: auto; }
        .action-sheet.top::before, .action-sheet.top::after {
          content: '';
          position: absolute;
          left: 50%;
          display: block;
          width: 0px;
          height: 0px;
          border-left: 0px solid transparent;
          border-right: 0px solid transparent;
          margin-left: 0px; }
        .action-sheet.top.is-active {
          transform: translateX(-50%) translateY(-110%); }
        .action-sheet.top::before, .action-sheet.top::after {
          top: auto;
          bottom: 0px;
          border-top: 0px solid rgba(255, 255, 255, 0.9);
          border-bottom: 0; }
        .action-sheet.top::before {
          bottom: -2px;
          border-top-color: rgba(0, 0, 0, 0.15); } }
  .action-sheet.primary {
    background: #00558b;
    color: #fff;
    border: 0; }
    .action-sheet.primary::before {
      display: none; }
    .action-sheet.primary::before, .action-sheet.primary::after {
      border-top-color: #00558b; }
    .action-sheet.primary.top::before, .action-sheet.primary.top::after {
      border-bottom-color: #00558b; }
    .action-sheet.primary ul {
      margin: -1rem;
      margin-top: 0;
      list-style-type: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
      .action-sheet.primary ul:first-child {
        margin-top: -1rem; }
        .action-sheet.primary ul:first-child li:first-child {
          border-top: 0; }
      .action-sheet.primary ul a {
        display: block;
        padding: 0.8rem;
        line-height: 1;
        color: #fff;
        border-top: 1px solid #006cb0; }
        .action-sheet.primary ul a:hover {
          color: #fff;
          background: #00609e; }
      .action-sheet.primary ul .alert > a {
        color: #F04124; }
      .action-sheet.primary ul .disabled > a {
        pointer-events: none;
        color: #999; }
  .action-sheet.dark {
    background: #232323;
    color: #fff;
    border: 0; }
    .action-sheet.dark::before {
      display: none; }
    .action-sheet.dark::before, .action-sheet.dark::after {
      border-top-color: #232323; }
    .action-sheet.dark.top::before, .action-sheet.dark.top::after {
      border-bottom-color: #232323; }
    .action-sheet.dark ul {
      margin: -1rem;
      margin-top: 0;
      list-style-type: none;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none; }
      .action-sheet.dark ul:first-child {
        margin-top: -1rem; }
        .action-sheet.dark ul:first-child li:first-child {
          border-top: 0; }
      .action-sheet.dark ul a {
        display: block;
        padding: 0.8rem;
        line-height: 1;
        color: #fff;
        border-top: 1px solid #393939; }
        .action-sheet.dark ul a:hover {
          color: #fff;
          background: #2e2e2e; }
      .action-sheet.dark ul .alert > a {
        color: #F04124; }
      .action-sheet.dark ul .disabled > a {
        pointer-events: none;
        color: #999; }

/*
  BLOCK LIST
  ----------

  A generic list component that can accomodate a variety of styles and controls.

  Features:
   - Icons
   - Labels
   - Chevrons
   - Text fields
   - Dropdown menus
   - Checkbox/radio inputs
*/
/*
  Adds styles for a block list container.

  $font-size: global font size for the list.
  $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element.
*/
.block-list {
  margin-bottom: 1rem;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .block-list, .block-list ul {
    list-style-type: none; }
  .block-list ul {
    margin-left: 0; }

/*
  Styles block list headers on the selector you include this mixin in (normally a <header>).

  $color - color of the header.
  $font-size - font size of the header.
  $offset - left margin to add to the header, to line it up with the list items.
*/
/*
  Styles block list items on the selector you include this mixin in (normally an <li>).

  $color - color of items.
  $color-hover - color of items on hover.
  $background - background of items.
  $background-hover - background of items on hover.
  $border - border between items.
  $padding - padding on items.
*/
/*
  Adds label styles to the class you include this mixin in.

  $color - color of the label.
  $left-class - extra class to flip the orientation of the label.
  $left-padding - left padding to use for left-hand labels.
*/
/*
  Adds support for chevrons, which appear on the right-hand side of the item.

  $color - color of the chevron.
  $padding - include the global padding of block list items here.
*/
/*
  Adds icon styles. Call this mixin on a block list container.

  $size - size of the icon as a percentage (decimal) of the list item's height.
  $item-selector - overrides the 'li' selector used for list items.
*/
/*
  Adds support for text fields, select menus, and checkbox/radio groups in block lists.

  $color - color of select menu arrow.
  $background-hover - color of select menu when hovered over.
  $padding - include the global padding of block list items here.
  $dropdown-class - class to use for list items that contain a dropdown.
  $switch-class - class to use for switches inside list items.
*/
.block-list {
  font-size: 1rem;
  margin-left: -1rem;
  margin-right: -1rem; }
  .block-list input[type="text"], .block-list input[type="password"], .block-list input[type="date"], .block-list input[type="datetime"], .block-list input[type="datetime-local"], .block-list input[type="month"], .block-list input[type="week"], .block-list input[type="email"], .block-list input[type="number"], .block-list input[type="search"], .block-list input[type="tel"], .block-list input[type="time"], .block-list input[type="url"], .block-list input[type="color"], .block-list textarea {
    overflow: visible;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    height: 2.6rem;
    padding: 0.6rem 1rem 0.6rem 1rem;
    color: inherit;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle; }
    .block-list input[type="text"]:hover, .block-list input[type="text"]:focus, .block-list input[type="password"]:hover, .block-list input[type="password"]:focus, .block-list input[type="date"]:hover, .block-list input[type="date"]:focus, .block-list input[type="datetime"]:hover, .block-list input[type="datetime"]:focus, .block-list input[type="datetime-local"]:hover, .block-list input[type="datetime-local"]:focus, .block-list input[type="month"]:hover, .block-list input[type="month"]:focus, .block-list input[type="week"]:hover, .block-list input[type="week"]:focus, .block-list input[type="email"]:hover, .block-list input[type="email"]:focus, .block-list input[type="number"]:hover, .block-list input[type="number"]:focus, .block-list input[type="search"]:hover, .block-list input[type="search"]:focus, .block-list input[type="tel"]:hover, .block-list input[type="tel"]:focus, .block-list input[type="time"]:hover, .block-list input[type="time"]:focus, .block-list input[type="url"]:hover, .block-list input[type="url"]:focus, .block-list input[type="color"]:hover, .block-list input[type="color"]:focus, .block-list textarea:hover, .block-list textarea:focus {
      border: 0; }
  .block-list li > input[type="checkbox"], .block-list li > input[type="radio"] {
    position: absolute;
    left: -9999px; }
    .block-list li > input[type="checkbox"] + label, .block-list li > input[type="radio"] + label {
      display: block;
      font-size: 1rem;
      margin: 0; }
    .block-list li > input[type="checkbox"]:checked + label::before, .block-list li > input[type="radio"]:checked + label::before {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="32" viewBox="0 0 32 32"><path fill="black" d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm6.906 8.875l2.219 2.031-12.063 13.281-6.188-6.188 2.125-2.125 3.938 3.938 9.969-10.938z"/></svg>');
      content: '';
      background-size: 100% 100%;
      width: 1.5em;
      height: 1.5em;
      color: #00558b;
      float: right;
      pointer-events: none;
      margin-top: -0.25em; }
      @media screen and (min-width: 0\0) {
        .block-list li > input[type="checkbox"]:checked + label::before, .block-list li > input[type="radio"]:checked + label::before {
          background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdlJREFUeNrMl0FugzAQRY3TRZeoFyhVL0BOkGTXJezaHZwguUnECaCrdFd6gqQnCN11Uyk5QekNOlONJWMVGMCgfGlkEIY3HnsG2xFM3d96PjQB2AJsWdPtAPYOln+dTwXnuw4DHEGzBvNFN6EDCTiS9XIAwB40acNoucKoxODIie0AwAOCu8KOSnIiNx/MakK+A7sW9oTferxx3fP3T1nURoBG/irGVahHwjHm/Ggx7E3TMVdrQmoP0gngghhpZQ3QvG/EdPLUelARWI8Aycjq9Md0qMIdbcNhjmOKLoY7quk3l1Rebeqg4AwFkmq7LWGOh1pmNY0etZAWSq0OX8HoS4JvWuCopbSY26EGR/CW86K0BF+pwkLwlPuyHJhOCl5oe4ZtF++vOqST+GdOYwO+71pN2VNAjmQGPCe42weuHDg0PI8olUwnYrXTGQJH9gxq8l1LKvrQx4O6/YY32Kp/ugb3ey7gZ4xAzuhYiYTxB/UHZFAuaREVXZ2g6yFlvEC2yoKEmbsRZYNgVLk2JeaOaG+xLHN+WCszDWMqLGOrJFa1DlApjSdwoHJGqGzLIb0+cas0wh5Bh780ngswx8GJD7h8sHg2wLA/mfDLPZpdxOF0quP5rwADAAFIzSRvu1m5AAAAAElFTkSuQmCC"); } }
  .block-list .with-dropdown {
    color: inherit; }
    .block-list .with-dropdown select {
      -webkit-appearance: none;
      -moz-appearance: none;
      outline: 0;
      background: 0;
      border: 0;
      height: auto;
      padding: 0.8rem 1rem;
      margin: 0;
      font-size: 1em;
      line-height: 1;
      color: inherit;
      background-color: transparent; }
  .block-list .switch {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%); }
  .block-list.with-icons li > a, .block-list.with-icons li > span, .block-list.with-icons li > label {
    padding-left: 2.8rem; }
  .block-list.with-icons li img, .block-list.with-icons li .iconic {
    position: absolute;
    top: 0.26rem;
    left: 0.26rem;
    width: 2.08rem;
    height: 2.08rem;
    border-radius: 8px;
    pointer-events: none; }
  .block-list header {
    margin-top: 1em;
    color: #666666;
    font-weight: bold;
    margin-bottom: 0.5em;
    margin-left: 1rem;
    font-size: 0.8em;
    cursor: default;
    text-transform: uppercase; }
  .block-list li {
    position: relative;
    border-bottom: 1px solid #d0d0d0; }
    .block-list li:first-child {
      border-top: 1px solid #d0d0d0; }
    .block-list li > a, .block-list li > span, .block-list li > label {
      display: block;
      padding: 0.8rem 1rem;
      padding-left: 1rem;
      color: #000;
      line-height: 1; }
    .block-list li > span {
      cursor: default; }
    .block-list li > a, .block-list li > label {
      cursor: pointer; }
      .block-list li > a:hover, .block-list li > label:hover {
        color: #000; }
    .block-list li > a:hover, .block-list li > label:hover, .block-list li select:hover {
      background: #f4f4f4; }
    .block-list li.caution > a, .block-list li.caution > a:hover {
      color: #F04124; }
    .block-list li.disabled > a {
      cursor: default; }
      .block-list li.disabled > a, .block-list li.disabled > a:hover {
        color: #999; }
      .block-list li.disabled > a:hover {
        background: transparent; }
    .block-list li.with-chevron::after {
      content: '\203A';
      display: block;
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      color: #666666;
      font-size: 2em; }
    .block-list li.with-chevron .block-list-label {
      padding-right: 1.5rem; }
    .block-list li .block-list-label {
      display: inline-block;
      float: right;
      padding: 0;
      color: #444444;
      pointer-events: none; }
      .block-list li .block-list-label.left {
        margin-left: 0.8rem;
        float: none; }

/*
  Cards

  Structure:

  titles
  lists
*/
/*
  Odds and ends.
*/
/*
  FORMS
  -----

  Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components.

  Includes:
   - Text fields
   - Text areas
   - Select menus
   - Checkboxes and radio buttons
   - Range slider
   - Progress bars and meters
*/
/*
  PANEL
  -----

  The friendly panel is an all-purpose container for hiding content off-screen.

  Features:
   - Position at top, right, bottom, or left
   - Anchor to grid block or window
   - Define max width or height
   - Transform into grid block depending on screen size
*/
.panel {
  position: absolute;
  z-index: 100;
  overflow-y: auto;
  display: none; }
  .is-active.panel {
    display: block; }

.panel {
  /*
    Basic styles
  */
  padding: 0;
  background: #fff; }

.panel-top {
  /*
    Direction
  */
  top: 0;
  left: 0;
  width: 100%;
  /*
    Sizing
  */
  height: 300px;
  /*
    Shadows
  */ }
  .panel-top.is-active {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); }

.panel-right {
  /*
    Direction
  */
  top: 0;
  right: 0;
  height: 100%;
  /*
    Sizing
  */
  width: 100%;
  /*
    Shadows
  */ }
  @media only screen and (min-width: 18.75em) {
    .panel-right {
      width: 300px; } }
  .panel-right.is-active {
    box-shadow: -3px 0 10px rgba(0, 0, 0, 0.25); }

.panel-bottom {
  /*
    Direction
  */
  bottom: 0;
  left: 0;
  width: 100%;
  /*
    Sizing
  */
  height: 300px;
  /*
    Shadows
  */ }
  .panel-bottom.is-active {
    box-shadow: 2px -3px 10px rgba(0, 0, 0, 0.25); }

.panel-left {
  /*
    Direction
  */
  top: 0;
  left: 0;
  height: 100%;
  /*
    Sizing
  */
  width: 100%;
  /*
    Shadows
  */ }
  @media only screen and (min-width: 18.75em) {
    .panel-left {
      width: 300px; } }
  .panel-left.is-active {
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.25); }

.panel-fixed {
  position: fixed; }

/*
  THE GRID
  --------

  Foundation's magical, flexbox-powered grid.

  Features:
   - Horizontal or vertical grids
   - Auto-sizing or percentage width grid blocks
   - Independently-scrollable blocks
   - Column alignment
   - Source ordering
   - Offsets
*/
/*
  Define the size of a grid block. Blocks are flex items. By default, they stretch to fill all available space, based on the size of sibling blocks. This is the "expand" behavior.

  If set to "shrink", the block will contract and only fill as much space as it needs for its content.

  If set to a number, the block will be given a percentage width, based on the total number of columns (12 by default). Percentage widths don't work if a block is inside a vertical grid.

  @group grid

  @param {number|string} $size - Sizing behavior of the block. Should be expand, shrink, or a number.

  @output The flex-basis, flex-grow, and flex-shrink properties.
*/
/*
  Set the orientation of blocks within this block. The grid is re-oriented by changing the flex direction of the block.

  @group grid

  @param {string} $orientation - Direction of the grid, either horizontal or vertical.

  @output A flex-flow property to match the direction given.
*/
/*
  Stretch a grid's child blocks across its cross-axis, making every column appear to have the same height.

  @group grid

  @param {bool} $stretch - Stretch blocks if true, or align blocks to top if false.

  @output Sets align-items to "stretch" if $stretch is true, or "flex-start" (the default value) if false.
*/
/*
  Set the alignment of blocks within a grid.

  left: Items align to the left.
  right: Items align to the right.
  center: Items align to the center.
  justify: Items are spaced equally apart so they occupy the space of the entire grid.
  spaced: Items are given equal space to their left and right.

  @group grid

  @param {string} $align - Alignment to use.

  @output An appropriate justify-content value.
*/
/*
  Set the source order of a block. Items with lower numbers appear first. If multiple items have the same number, the one in the HTML first will appear first.

  @group grid

  @param {number} $order - Position in source order.

  @output An order property.
*/
/*
  Collapse a content block by removing the padding.

  @group grid

  @param {bool} $collapse - Collapses the block if true.

  @output A padding value.

  @todo No way to reverse collapse using this mixin. Solution:
    - If true, add padding: 0;
    - If false, add padding: 1rem;
    - If null, add nothing, to cut down on CSS output
    - Make null the default value
*/
/*
  Constrain the size of a block to the size of the average grid row, and center-align it. This imitates the behavior of ordinary Foundation rows.

  @group grid

  @param {bool} $container - Adds container styles if true.

  @output A maximum width and the good old margin: 0 auto for center alignment.
*/
/*
  Add negative margins to a block, equal to the padding of a content block. This aligns the edges of a block nested inside a content block.

  @group grid

  @param {bool} $nest - Adds negative margins if true.

  @output Negative margin values.
*/
/*
  Offset a block by adding a left margin.

  @group grid

  @param {number | bool} $offset - If false, nothing is output. If a number, offsets the column by the specified number of columns.

  @output A left margin based on the number of columns specified, and the global number of columns.
*/
/*
  Resets styles set by panels. Use this when a panel transforms into a block on larger screens.

  @group grid

  @output Resets to transform, position, and a few visual styles.
*/
/*
  Frames are containers that stretch to the full dimmensions of the browser window.
*/
/*
  Groups are collections of content items. They're the "rows" of Foundation for Apps.
*/
/*
  Blocks are containers for actual content. They're the "columns" of Foundation for Apps.
*/
.vertical.grid-frame, .vertical.grid-block, .vertical.small-grid-block, .vertical.medium-grid-block, .vertical.large-grid-block {
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: stretch;
      -ms-grid-row-align: stretch;
      align-items: stretch; }

.small-vertical.grid-frame, .small-vertical.grid-block, .small-vertical.small-grid-block, .small-vertical.medium-grid-block, .small-vertical.large-grid-block {
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: stretch;
      -ms-grid-row-align: stretch;
      align-items: stretch; }

.small-horizontal.grid-frame, .small-horizontal.grid-block, .small-horizontal.small-grid-block, .small-horizontal.medium-grid-block, .small-horizontal.large-grid-block {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; }

@media only screen and (min-width: 46.0625em) {
  .medium-vertical.grid-frame, .medium-vertical.grid-block, .medium-vertical.small-grid-block, .medium-vertical.medium-grid-block, .medium-vertical.large-grid-block {
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-align: stretch;
        -ms-grid-row-align: stretch;
        align-items: stretch; }
  .medium-horizontal.grid-frame, .medium-horizontal.grid-block, .medium-horizontal.small-grid-block, .medium-horizontal.medium-grid-block, .medium-horizontal.large-grid-block {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap; } }

@media only screen and (min-width: 65em) {
  .large-vertical.grid-frame, .large-vertical.grid-block, .large-vertical.small-grid-block, .large-vertical.medium-grid-block, .large-vertical.large-grid-block {
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-align: stretch;
        -ms-grid-row-align: stretch;
        align-items: stretch; }
  .large-horizontal.grid-frame, .large-horizontal.grid-block, .large-horizontal.small-grid-block, .large-horizontal.medium-grid-block, .large-horizontal.large-grid-block {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap; } }

.align-right.grid-frame, .align-right.grid-block, .align-right.small-grid-block, .align-right.medium-grid-block, .align-right.large-grid-block {
  -ms-flex-pack: end;
      justify-content: flex-end; }

.align-center.grid-frame, .align-center.grid-block, .align-center.small-grid-block, .align-center.medium-grid-block, .align-center.large-grid-block {
  -ms-flex-pack: center;
      justify-content: center; }

.align-justify.grid-frame, .align-justify.grid-block, .align-justify.small-grid-block, .align-justify.medium-grid-block, .align-justify.large-grid-block {
  -ms-flex-pack: justify;
      justify-content: space-between; }

.align-spaced.grid-frame, .align-spaced.grid-block, .align-spaced.small-grid-block, .align-spaced.medium-grid-block, .align-spaced.large-grid-block {
  -ms-flex-pack: distribute;
      justify-content: space-around; }

.wrap.grid-frame, .wrap.grid-block, .wrap.small-grid-block, .wrap.medium-grid-block, .wrap.large-grid-block {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: start;
      -ms-grid-row-align: flex-start;
      align-items: flex-start; }

.shrink.grid-block, .shrink.grid-content, .shrink.small-grid-block, .shrink.small-grid-content, .shrink.medium-grid-block, .shrink.medium-grid-content, .shrink.large-grid-block, .shrink.large-grid-content {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  overflow: visible; }

.noscroll.grid-block, .noscroll.grid-content, .noscroll.small-grid-block, .noscroll.small-grid-content, .noscroll.medium-grid-block, .noscroll.medium-grid-content, .noscroll.large-grid-block, .noscroll.large-grid-content {
  overflow: visible; }

.grid-frame {
  display: -ms-flexbox;
  display: flex;
  /*height: 100vh;*/
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0; }

.grid-block {
  display: -ms-flexbox;
  display: flex;
  height: auto;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }

.grid-content {
  display: block;
  padding: 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }
  .grid-content.collapse {
    padding: 0; }
  .grid-content .grid-block {
    margin-left: 0;
    margin-right: 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    overflow: visible; }
    .grid-content .grid-block.nowrap {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -ms-flex-align: stretch;
          -ms-grid-row-align: stretch;
          align-items: stretch; }
    .grid-content .grid-block .grid-content {
      overflow: visible; }

.grid-container {
  max-width: 75rem;
  margin: 0 auto; }
  .grid-container.contain-left {
    max-width: 75rem;
    margin: 0 auto 0 0; }
  .grid-container.contain-right {
    max-width: 75rem;
    margin: 0 0 0 auto; }

.small-grid-block {
  display: -ms-flexbox;
  display: flex;
  height: auto;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }
  .small-grid-block.panel {
    transform: none;
    position: relative;
    width: auto;
    height: auto;
    z-index: auto;
    box-shadow: none;
    background: transparent;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto; }

.small-grid-content {
  display: block;
  padding: 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto; }
  .small-grid-content.panel {
    transform: none;
    position: relative;
    width: auto;
    height: auto;
    z-index: auto;
    box-shadow: none;
    background: transparent;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto; }

@media only screen and (min-width: 46.0625em) {
  .grid-frame {
    height: 100vh;
  }
  .medium-grid-block {
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; }
    .medium-grid-block.panel {
      transform: none;
      position: relative;
      width: auto;
      height: auto;
      z-index: auto;
      box-shadow: none;
      background: transparent;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto; } }

@media only screen and (min-width: 46.0625em) {
  .medium-grid-content {
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto; }
    .medium-grid-content.panel {
      transform: none;
      position: relative;
      width: auto;
      height: auto;
      z-index: auto;
      box-shadow: none;
      background: transparent;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto; } }

@media only screen and (min-width: 65em) {
  .large-grid-block {
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; }
    .large-grid-block.panel {
      transform: none;
      position: relative;
      width: auto;
      height: auto;
      z-index: auto;
      box-shadow: none;
      background: transparent;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto; } }

@media only screen and (min-width: 65em) {
  .large-grid-content {
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto; }
    .large-grid-content.panel {
      transform: none;
      position: relative;
      width: auto;
      height: auto;
      z-index: auto;
      box-shadow: none;
      background: transparent;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto; } }

.order-1 {
  -ms-flex-order: 1;
      order: 1; }

.order-2 {
  -ms-flex-order: 2;
      order: 2; }

.order-3 {
  -ms-flex-order: 3;
      order: 3; }

.order-4 {
  -ms-flex-order: 4;
      order: 4; }

.order-5 {
  -ms-flex-order: 5;
      order: 5; }

.order-6 {
  -ms-flex-order: 6;
      order: 6; }

.order-7 {
  -ms-flex-order: 7;
      order: 7; }

.order-8 {
  -ms-flex-order: 8;
      order: 8; }

.order-9 {
  -ms-flex-order: 9;
      order: 9; }

.order-10 {
  -ms-flex-order: 10;
      order: 10; }

.order-11 {
  -ms-flex-order: 11;
      order: 11; }

.order-12 {
  -ms-flex-order: 12;
      order: 12; }

.small-1 {
  -ms-flex: 0 0 8.33333%;
      flex: 0 0 8.33333%;
  max-width: 8.33333%; }

.small-order-1 {
  -ms-flex-order: 1;
      order: 1; }

.small-offset-1 {
  margin-left: 8.33333%; }

.small-up-1 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-1 > li, .small-up-1 > div, .small-up-1 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }

.small-2 {
  -ms-flex: 0 0 16.66667%;
      flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.small-order-2 {
  -ms-flex-order: 2;
      order: 2; }

.small-offset-2 {
  margin-left: 16.66667%; }

.small-up-2 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-2 > li, .small-up-2 > div, .small-up-2 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%; }

.small-3 {
  -ms-flex: 0 0 25%;
      flex: 0 0 25%;
  max-width: 25%; }

.small-order-3 {
  -ms-flex-order: 3;
      order: 3; }

.small-offset-3 {
  margin-left: 25%; }

.small-up-3 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-3 > li, .small-up-3 > div, .small-up-3 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
    max-width: 33.33333%; }

.small-4 {
  -ms-flex: 0 0 33.33333%;
      flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.small-order-4 {
  -ms-flex-order: 4;
      order: 4; }

.small-offset-4 {
  margin-left: 33.33333%; }

.small-up-4 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-4 > li, .small-up-4 > div, .small-up-4 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%; }

.small-5 {
  -ms-flex: 0 0 41.66667%;
      flex: 0 0 41.66667%;
  max-width: 41.66667%; }

.small-order-5 {
  -ms-flex-order: 5;
      order: 5; }

.small-offset-5 {
  margin-left: 41.66667%; }

.small-up-5 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-5 > li, .small-up-5 > div, .small-up-5 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 20%;
        flex: 0 0 20%;
    max-width: 20%; }

.small-6 {
  -ms-flex: 0 0 50%;
      flex: 0 0 50%;
  max-width: 50%; }

.small-order-6 {
  -ms-flex-order: 6;
      order: 6; }

.small-offset-6 {
  margin-left: 50%; }

.small-up-6 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-6 > li, .small-up-6 > div, .small-up-6 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
    max-width: 16.66667%; }

.small-7 {
  -ms-flex: 0 0 58.33333%;
      flex: 0 0 58.33333%;
  max-width: 58.33333%; }

.small-order-7 {
  -ms-flex-order: 7;
      order: 7; }

.small-offset-7 {
  margin-left: 58.33333%; }

.small-up-7 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-7 > li, .small-up-7 > div, .small-up-7 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 14.28571%;
        flex: 0 0 14.28571%;
    max-width: 14.28571%; }

.small-8 {
  -ms-flex: 0 0 66.66667%;
      flex: 0 0 66.66667%;
  max-width: 66.66667%; }

.small-order-8 {
  -ms-flex-order: 8;
      order: 8; }

.small-offset-8 {
  margin-left: 66.66667%; }

.small-up-8 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-8 > li, .small-up-8 > div, .small-up-8 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
    max-width: 12.5%; }

.small-9 {
  -ms-flex: 0 0 75%;
      flex: 0 0 75%;
  max-width: 75%; }

.small-order-9 {
  -ms-flex-order: 9;
      order: 9; }

.small-offset-9 {
  margin-left: 75%; }

.small-up-9 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-9 > li, .small-up-9 > div, .small-up-9 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 11.11111%;
        flex: 0 0 11.11111%;
    max-width: 11.11111%; }

.small-10 {
  -ms-flex: 0 0 83.33333%;
      flex: 0 0 83.33333%;
  max-width: 83.33333%; }

.small-order-10 {
  -ms-flex-order: 10;
      order: 10; }

.small-offset-10 {
  margin-left: 83.33333%; }

.small-up-10 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-10 > li, .small-up-10 > div, .small-up-10 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 10%;
        flex: 0 0 10%;
    max-width: 10%; }

.small-11 {
  -ms-flex: 0 0 91.66667%;
      flex: 0 0 91.66667%;
  max-width: 91.66667%; }

.small-order-11 {
  -ms-flex-order: 11;
      order: 11; }

.small-offset-11 {
  margin-left: 91.66667%; }

.small-up-11 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-11 > li, .small-up-11 > div, .small-up-11 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 9.09091%;
        flex: 0 0 9.09091%;
    max-width: 9.09091%; }

.small-12 {
  -ms-flex: 0 0 100%;
      flex: 0 0 100%;
  max-width: 100%; }

.small-order-12 {
  -ms-flex-order: 12;
      order: 12; }

.small-offset-12 {
  margin-left: 100%; }

.small-up-12 {
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  overflow: visible;
  list-style-type: none; }
  .small-up-12 > li, .small-up-12 > div, .small-up-12 > section {
    padding: 0 1rem 1rem;
    -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
    max-width: 8.33333%; }

@media only screen and (min-width: 46.0625em) {
  .medium-1 {
    -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .medium-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .medium-offset-1 {
    margin-left: 8.33333%; }
  .medium-up-1 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-1 > li, .medium-up-1 > div, .medium-up-1 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-2 {
    -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .medium-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .medium-offset-2 {
    margin-left: 16.66667%; }
  .medium-up-2 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-2 > li, .medium-up-2 > div, .medium-up-2 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
      max-width: 50%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-3 {
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%; }
  .medium-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .medium-offset-3 {
    margin-left: 25%; }
  .medium-up-3 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-3 > li, .medium-up-3 > div, .medium-up-3 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
      max-width: 33.33333%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-4 {
    -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .medium-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .medium-offset-4 {
    margin-left: 33.33333%; }
  .medium-up-4 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-4 > li, .medium-up-4 > div, .medium-up-4 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
      max-width: 25%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-5 {
    -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .medium-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .medium-offset-5 {
    margin-left: 41.66667%; }
  .medium-up-5 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-5 > li, .medium-up-5 > div, .medium-up-5 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
      max-width: 20%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-6 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%; }
  .medium-order-6 {
    -ms-flex-order: 6;
        order: 6; }
  .medium-offset-6 {
    margin-left: 50%; }
  .medium-up-6 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-6 > li, .medium-up-6 > div, .medium-up-6 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
      max-width: 16.66667%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-7 {
    -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .medium-order-7 {
    -ms-flex-order: 7;
        order: 7; }
  .medium-offset-7 {
    margin-left: 58.33333%; }
  .medium-up-7 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-7 > li, .medium-up-7 > div, .medium-up-7 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 14.28571%;
          flex: 0 0 14.28571%;
      max-width: 14.28571%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-8 {
    -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .medium-order-8 {
    -ms-flex-order: 8;
        order: 8; }
  .medium-offset-8 {
    margin-left: 66.66667%; }
  .medium-up-8 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-8 > li, .medium-up-8 > div, .medium-up-8 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 12.5%;
          flex: 0 0 12.5%;
      max-width: 12.5%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-9 {
    -ms-flex: 0 0 75%;
        flex: 0 0 75%;
    max-width: 75%; }
  .medium-order-9 {
    -ms-flex-order: 9;
        order: 9; }
  .medium-offset-9 {
    margin-left: 75%; }
  .medium-up-9 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-9 > li, .medium-up-9 > div, .medium-up-9 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 11.11111%;
          flex: 0 0 11.11111%;
      max-width: 11.11111%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-10 {
    -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .medium-order-10 {
    -ms-flex-order: 10;
        order: 10; }
  .medium-offset-10 {
    margin-left: 83.33333%; }
  .medium-up-10 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-10 > li, .medium-up-10 > div, .medium-up-10 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 10%;
          flex: 0 0 10%;
      max-width: 10%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-11 {
    -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .medium-order-11 {
    -ms-flex-order: 11;
        order: 11; }
  .medium-offset-11 {
    margin-left: 91.66667%; }
  .medium-up-11 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-11 > li, .medium-up-11 > div, .medium-up-11 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 9.09091%;
          flex: 0 0 9.09091%;
      max-width: 9.09091%; } }

@media only screen and (min-width: 46.0625em) {
  .medium-12 {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }
  .medium-order-12 {
    -ms-flex-order: 12;
        order: 12; }
  .medium-offset-12 {
    margin-left: 100%; }
  .medium-up-12 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .medium-up-12 > li, .medium-up-12 > div, .medium-up-12 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 8.33333%;
          flex: 0 0 8.33333%;
      max-width: 8.33333%; } }

@media only screen and (min-width: 65em) {
  .large-1 {
    -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .large-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .large-offset-1 {
    margin-left: 8.33333%; }
  .large-up-1 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-1 > li, .large-up-1 > div, .large-up-1 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; } }

@media only screen and (min-width: 65em) {
  .large-2 {
    -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .large-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .large-offset-2 {
    margin-left: 16.66667%; }
  .large-up-2 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-2 > li, .large-up-2 > div, .large-up-2 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
      max-width: 50%; } }

@media only screen and (min-width: 65em) {
  .large-3 {
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%; }
  .large-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .large-offset-3 {
    margin-left: 25%; }
  .large-up-3 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-3 > li, .large-up-3 > div, .large-up-3 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
      max-width: 33.33333%; } }

@media only screen and (min-width: 65em) {
  .large-4 {
    -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .large-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .large-offset-4 {
    margin-left: 33.33333%; }
  .large-up-4 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-4 > li, .large-up-4 > div, .large-up-4 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
      max-width: 25%; } }

@media only screen and (min-width: 65em) {
  .large-5 {
    -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .large-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .large-offset-5 {
    margin-left: 41.66667%; }
  .large-up-5 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-5 > li, .large-up-5 > div, .large-up-5 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
      max-width: 20%; } }

@media only screen and (min-width: 65em) {
  .large-6 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%; }
  .large-order-6 {
    -ms-flex-order: 6;
        order: 6; }
  .large-offset-6 {
    margin-left: 50%; }
  .large-up-6 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-6 > li, .large-up-6 > div, .large-up-6 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
      max-width: 16.66667%; } }

@media only screen and (min-width: 65em) {
  .large-7 {
    -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .large-order-7 {
    -ms-flex-order: 7;
        order: 7; }
  .large-offset-7 {
    margin-left: 58.33333%; }
  .large-up-7 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-7 > li, .large-up-7 > div, .large-up-7 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 14.28571%;
          flex: 0 0 14.28571%;
      max-width: 14.28571%; } }

@media only screen and (min-width: 65em) {
  .large-8 {
    -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .large-order-8 {
    -ms-flex-order: 8;
        order: 8; }
  .large-offset-8 {
    margin-left: 66.66667%; }
  .large-up-8 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-8 > li, .large-up-8 > div, .large-up-8 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 12.5%;
          flex: 0 0 12.5%;
      max-width: 12.5%; } }

@media only screen and (min-width: 65em) {
  .large-9 {
    -ms-flex: 0 0 75%;
        flex: 0 0 75%;
    max-width: 75%; }
  .large-order-9 {
    -ms-flex-order: 9;
        order: 9; }
  .large-offset-9 {
    margin-left: 75%; }
  .large-up-9 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-9 > li, .large-up-9 > div, .large-up-9 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 11.11111%;
          flex: 0 0 11.11111%;
      max-width: 11.11111%; } }

@media only screen and (min-width: 65em) {
  .large-10 {
    -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .large-order-10 {
    -ms-flex-order: 10;
        order: 10; }
  .large-offset-10 {
    margin-left: 83.33333%; }
  .large-up-10 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-10 > li, .large-up-10 > div, .large-up-10 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 10%;
          flex: 0 0 10%;
      max-width: 10%; } }

@media only screen and (min-width: 65em) {
  .large-11 {
    -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .large-order-11 {
    -ms-flex-order: 11;
        order: 11; }
  .large-offset-11 {
    margin-left: 91.66667%; }
  .large-up-11 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-11 > li, .large-up-11 > div, .large-up-11 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 9.09091%;
          flex: 0 0 9.09091%;
      max-width: 9.09091%; } }

@media only screen and (min-width: 65em) {
  .large-12 {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }
  .large-order-12 {
    -ms-flex-order: 12;
        order: 12; }
  .large-offset-12 {
    margin-left: 100%; }
  .large-up-12 {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .large-up-12 > li, .large-up-12 > div, .large-up-12 > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 8.33333%;
          flex: 0 0 8.33333%;
      max-width: 8.33333%; } }

.grid-content .modal .grid-block {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; }

/*
  TITLE BAR
  ---------

  A navigational component which can display the current screen the user is on, along with additional controls or menu items.

  The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order:
   - Center
   - Left
   - Right
*/
/*
  Label
*/
/*
  Badge
*/
.badge {
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  border-radius: 1000px; }

.badge {
  font-size: 0.8em;
  width: 1.5rem;
  height: 1.5rem;
  background: #00558b;
  color: #fff; }
  .badge.secondary {
    background: #f1f1f1;
    color: #000; }
  .badge.primary {
    background: #00558b;
    color: #fff; }
  .badge.success {
    background: #43AC6A;
    color: #fff; }
  .badge.warning {
    background: #F08A24;
    color: #fff; }
  .badge.alert {
    background: #F04124;
    color: #fff; }
  .badge.dark {
    background: #232323;
    color: #fff; }

.inline-list {
  list-style-type: none;
  text-align: left; }
  .inline-list li, .inline-list dt, .inline-list dd {
    display: inline-block;
    margin-left: -2px;
    margin-right: -2px; }
  .inline-list li {
    margin-right: 1rem;
    margin-left: 0; }

/*
  MENU BAR
  --------

  A generic, flexible menu component.

  Features:
   - Orient horizontally and vertically
     - Change orientation at certain breakpoints
   - Items with icons above, below, or to the left or right
   - Text labels for vertical menus and badges for horizontal menus
*/
.menu-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: stretch;
      align-items: stretch;
  margin: 0;
  list-style-type: none;
  overflow-y: visible; }
  .menu-bar > li {
    -ms-flex: 1 0 0;
        flex: 1 0 0;
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
        align-items: stretch; }
    .menu-bar > li > a {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
      -ms-flex-align: center;
          align-items: center;
      padding: 1rem;
      font-size: 1rem;
      line-height: 1; }

/*
  Set the alignment of menu items (li) within a menu-bar

  left: Items align to the left.
  right: Items align to the right.
  center: Items align to the center.
  justify: Items are spaced equally apart so they occupy the space of the entire grid.
  spaced: Items are given equal space to their left and right.

  @group menu-bar

  @param {string} $align - Alignment to use.

  @output An appropriate justify-content value.
*/
/*
  CSS output
*/
.menu-bar {
  background: #fff; }
  .menu-bar > li > a {
    color: #000; }
    .menu-bar > li > a:hover {
      background: #ededed;
      color: #000; }
  .menu-bar .is-active > a {
    background: #ededed;
    color: #000; }
  .menu-bar, .menu-bar.horizontal {
    /*
    Orientation
  */
    overflow-x: hidden;
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    /*
    Stretch
  */ }
    .menu-bar > li > a, .menu-bar.horizontal > li > a {
      -ms-flex: 1 0 0;
          flex: 1 0 0; }
    .menu-bar > li > a, .menu-bar.horizontal > li > a {
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap; }
  .menu-bar.vertical {
    /*
    Orientation
  */
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    /*
    Stretch
  */ }
    .menu-bar.vertical > li {
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }
    .menu-bar.vertical > li > a {
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap; }
  .menu-bar.condense > li {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto; }
  .menu-bar.align-right {
    -ms-flex-pack: end;
        justify-content: flex-end; }
  .menu-bar.align-center {
    -ms-flex-pack: center;
        justify-content: center; }
  .menu-bar.align-justify {
    -ms-flex-pack: justify;
        justify-content: space-between; }
  .menu-bar.align-spaced {
    -ms-flex-pack: distribute;
        justify-content: space-around; }
  .menu-bar.small-condense li {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto; }
  .menu-bar.small-expand li {
    -ms-flex: 1 0 auto;
        flex: 1 0 auto; }
  .menu-bar.small-align-left {
    -ms-flex-pack: start;
        justify-content: flex-start; }
  .menu-bar.small-align-right {
    -ms-flex-pack: end;
        justify-content: flex-end; }
  .menu-bar.small-align-center {
    -ms-flex-pack: center;
        justify-content: center; }
  .menu-bar.small-align-justify {
    -ms-flex-pack: justify;
        justify-content: space-between; }
  .menu-bar.small-align-spaced {
    -ms-flex-pack: distribute;
        justify-content: space-around; }
  @media only screen and (min-width: 46.0625em) {
    .menu-bar.medium-condense li {
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }
    .menu-bar.medium-expand li {
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }
    .menu-bar.medium-align-left {
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .menu-bar.medium-align-right {
      -ms-flex-pack: end;
          justify-content: flex-end; }
    .menu-bar.medium-align-center {
      -ms-flex-pack: center;
          justify-content: center; }
    .menu-bar.medium-align-justify {
      -ms-flex-pack: justify;
          justify-content: space-between; }
    .menu-bar.medium-align-spaced {
      -ms-flex-pack: distribute;
          justify-content: space-around; } }
  @media only screen and (min-width: 65em) {
    .menu-bar.large-condense li {
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }
    .menu-bar.large-expand li {
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }
    .menu-bar.large-align-left {
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .menu-bar.large-align-right {
      -ms-flex-pack: end;
          justify-content: flex-end; }
    .menu-bar.large-align-center {
      -ms-flex-pack: center;
          justify-content: center; }
    .menu-bar.large-align-justify {
      -ms-flex-pack: justify;
          justify-content: space-between; }
    .menu-bar.large-align-spaced {
      -ms-flex-pack: distribute;
          justify-content: space-around; } }
  .menu-bar.small-horizontal {
    /*
    Orientation
  */
    overflow-x: hidden;
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    /*
    Stretch
  */ }
    .menu-bar.small-horizontal > li > a {
      -ms-flex: 1 0 0;
          flex: 1 0 0; }
    .menu-bar.small-horizontal > li > a {
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap; }
  .menu-bar.small-vertical {
    /*
    Orientation
  */
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    /*
    Stretch
  */ }
    .menu-bar.small-vertical > li {
      -ms-flex: 1 0 auto;
          flex: 1 0 auto; }
    .menu-bar.small-vertical > li > a {
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap; }
  @media only screen and (min-width: 46.0625em) {
    .menu-bar.medium-horizontal {
      /*
    Orientation
  */
      overflow-x: hidden;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
      /*
    Stretch
  */ }
      .menu-bar.medium-horizontal > li > a {
        -ms-flex: 1 0 0;
            flex: 1 0 0; }
      .menu-bar.medium-horizontal > li > a {
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap; }
    .menu-bar.medium-vertical {
      /*
    Orientation
  */
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
      /*
    Stretch
  */ }
      .menu-bar.medium-vertical > li {
        -ms-flex: 1 0 auto;
            flex: 1 0 auto; }
      .menu-bar.medium-vertical > li > a {
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap; } }
  @media only screen and (min-width: 65em) {
    .menu-bar.large-horizontal {
      /*
    Orientation
  */
      overflow-x: hidden;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
      /*
    Stretch
  */ }
      .menu-bar.large-horizontal > li > a {
        -ms-flex: 1 0 0;
            flex: 1 0 0; }
      .menu-bar.large-horizontal > li > a {
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap; }
    .menu-bar.large-vertical {
      /*
    Orientation
  */
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
      /*
    Stretch
  */ }
      .menu-bar.large-vertical > li {
        -ms-flex: 1 0 auto;
            flex: 1 0 auto; }
      .menu-bar.large-vertical > li > a {
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap; } }
  .menu-bar > li > img, .menu-bar > li > .iconic, .menu-bar.icon-top > li > img, .menu-bar.icon-top > li > .iconic {
    margin: 0;
    width: 25px;
    height: 25px; }
    .menu-bar > li > img:first-child:last-child, .menu-bar > li > .iconic:first-child:last-child, .menu-bar.icon-top > li > img:first-child:last-child, .menu-bar.icon-top > li > .iconic:first-child:last-child {
      margin: 0; }
  .menu-bar > li > a, .menu-bar.icon-top > li > a {
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap; }
    .menu-bar > li > a > img, .menu-bar > li > a > .iconic, .menu-bar.icon-top > li > a > img, .menu-bar.icon-top > li > a > .iconic {
      margin: 0 0 1rem 0; }
  .menu-bar.icon-right > li > img, .menu-bar.icon-right > li > .iconic {
    margin: 0;
    width: 25px;
    height: 25px; }
    .menu-bar.icon-right > li > img:first-child:last-child, .menu-bar.icon-right > li > .iconic:first-child:last-child {
      margin: 0; }
  .menu-bar.icon-right > li > a {
    -ms-flex-flow: row-reverse nowrap;
        flex-flow: row-reverse nowrap; }
    .menu-bar.icon-right > li > a > img, .menu-bar.icon-right > li > a > .iconic {
      margin: 0 0 0 1rem; }
  .menu-bar.icon-bottom > li > img, .menu-bar.icon-bottom > li > .iconic {
    margin: 0;
    width: 25px;
    height: 25px; }
    .menu-bar.icon-bottom > li > img:first-child:last-child, .menu-bar.icon-bottom > li > .iconic:first-child:last-child {
      margin: 0; }
  .menu-bar.icon-bottom > li > a {
    -ms-flex-flow: column-reverse nowrap;
        flex-flow: column-reverse nowrap; }
    .menu-bar.icon-bottom > li > a > img, .menu-bar.icon-bottom > li > a > .iconic {
      margin: 1rem 0 0 0; }
  .menu-bar.icon-left > li > img, .menu-bar.icon-left > li > .iconic {
    margin: 0;
    width: 25px;
    height: 25px; }
    .menu-bar.icon-left > li > img:first-child:last-child, .menu-bar.icon-left > li > .iconic:first-child:last-child {
      margin: 0; }
  .menu-bar.icon-left > li > a {
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center; }
    .menu-bar.icon-left > li > a > img, .menu-bar.icon-left > li > a > .iconic {
      margin: 0 1rem 0 0; }
  .menu-bar.small-icon-top > li > img, .menu-bar.small-icon-top > li > .iconic {
    margin: 0;
    width: 25px;
    height: 25px; }
    .menu-bar.small-icon-top > li > img:first-child:last-child, .menu-bar.small-icon-top > li > .iconic:first-child:last-child {
      margin: 0; }
  .menu-bar.small-icon-top > li > a {
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap; }
    .menu-bar.small-icon-top > li > a > img, .menu-bar.small-icon-top > li > a > .iconic {
      margin: 0 0 1rem 0; }
  .menu-bar.small-icon-right > li > img, .menu-bar.small-icon-right > li > .iconic {
    margin: 0;
    width: 25px;
    height: 25px; }
    .menu-bar.small-icon-right > li > img:first-child:last-child, .menu-bar.small-icon-right > li > .iconic:first-child:last-child {
      margin: 0; }
  .menu-bar.small-icon-right > li > a {
    -ms-flex-flow: row-reverse nowrap;
        flex-flow: row-reverse nowrap; }
    .menu-bar.small-icon-right > li > a > img, .menu-bar.small-icon-right > li > a > .iconic {
      margin: 0 0 0 1rem; }
  .menu-bar.small-icon-bottom > li > img, .menu-bar.small-icon-bottom > li > .iconic {
    margin: 0;
    width: 25px;
    height: 25px; }
    .menu-bar.small-icon-bottom > li > img:first-child:last-child, .menu-bar.small-icon-bottom > li > .iconic:first-child:last-child {
      margin: 0; }
  .menu-bar.small-icon-bottom > li > a {
    -ms-flex-flow: column-reverse nowrap;
        flex-flow: column-reverse nowrap; }
    .menu-bar.small-icon-bottom > li > a > img, .menu-bar.small-icon-bottom > li > a > .iconic {
      margin: 1rem 0 0 0; }
  .menu-bar.small-icon-left > li > img, .menu-bar.small-icon-left > li > .iconic {
    margin: 0;
    width: 25px;
    height: 25px; }
    .menu-bar.small-icon-left > li > img:first-child:last-child, .menu-bar.small-icon-left > li > .iconic:first-child:last-child {
      margin: 0; }
  .menu-bar.small-icon-left > li > a {
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
    -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center; }
    .menu-bar.small-icon-left > li > a > img, .menu-bar.small-icon-left > li > a > .iconic {
      margin: 0 1rem 0 0; }
  @media only screen and (min-width: 46.0625em) {
    .menu-bar.medium-icon-top > li > img, .menu-bar.medium-icon-top > li > .iconic {
      margin: 0;
      width: 25px;
      height: 25px; }
      .menu-bar.medium-icon-top > li > img:first-child:last-child, .menu-bar.medium-icon-top > li > .iconic:first-child:last-child {
        margin: 0; }
    .menu-bar.medium-icon-top > li > a {
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap; }
      .menu-bar.medium-icon-top > li > a > img, .menu-bar.medium-icon-top > li > a > .iconic {
        margin: 0 0 1rem 0; } }
  @media only screen and (min-width: 46.0625em) {
    .menu-bar.medium-icon-right > li > img, .menu-bar.medium-icon-right > li > .iconic {
      margin: 0;
      width: 25px;
      height: 25px; }
      .menu-bar.medium-icon-right > li > img:first-child:last-child, .menu-bar.medium-icon-right > li > .iconic:first-child:last-child {
        margin: 0; }
    .menu-bar.medium-icon-right > li > a {
      -ms-flex-flow: row-reverse nowrap;
          flex-flow: row-reverse nowrap; }
      .menu-bar.medium-icon-right > li > a > img, .menu-bar.medium-icon-right > li > a > .iconic {
        margin: 0 0 0 1rem; } }
  @media only screen and (min-width: 46.0625em) {
    .menu-bar.medium-icon-bottom > li > img, .menu-bar.medium-icon-bottom > li > .iconic {
      margin: 0;
      width: 25px;
      height: 25px; }
      .menu-bar.medium-icon-bottom > li > img:first-child:last-child, .menu-bar.medium-icon-bottom > li > .iconic:first-child:last-child {
        margin: 0; }
    .menu-bar.medium-icon-bottom > li > a {
      -ms-flex-flow: column-reverse nowrap;
          flex-flow: column-reverse nowrap; }
      .menu-bar.medium-icon-bottom > li > a > img, .menu-bar.medium-icon-bottom > li > a > .iconic {
        margin: 1rem 0 0 0; } }
  @media only screen and (min-width: 46.0625em) {
    .menu-bar.medium-icon-left > li > img, .menu-bar.medium-icon-left > li > .iconic {
      margin: 0;
      width: 25px;
      height: 25px; }
      .menu-bar.medium-icon-left > li > img:first-child:last-child, .menu-bar.medium-icon-left > li > .iconic:first-child:last-child {
        margin: 0; }
    .menu-bar.medium-icon-left > li > a {
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
      -ms-flex-align: center;
          -ms-grid-row-align: center;
          align-items: center; }
      .menu-bar.medium-icon-left > li > a > img, .menu-bar.medium-icon-left > li > a > .iconic {
        margin: 0 1rem 0 0; } }
  @media only screen and (min-width: 65em) {
    .menu-bar.large-icon-top > li > img, .menu-bar.large-icon-top > li > .iconic {
      margin: 0;
      width: 25px;
      height: 25px; }
      .menu-bar.large-icon-top > li > img:first-child:last-child, .menu-bar.large-icon-top > li > .iconic:first-child:last-child {
        margin: 0; }
    .menu-bar.large-icon-top > li > a {
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap; }
      .menu-bar.large-icon-top > li > a > img, .menu-bar.large-icon-top > li > a > .iconic {
        margin: 0 0 1rem 0; } }
  @media only screen and (min-width: 65em) {
    .menu-bar.large-icon-right > li > img, .menu-bar.large-icon-right > li > .iconic {
      margin: 0;
      width: 25px;
      height: 25px; }
      .menu-bar.large-icon-right > li > img:first-child:last-child, .menu-bar.large-icon-right > li > .iconic:first-child:last-child {
        margin: 0; }
    .menu-bar.large-icon-right > li > a {
      -ms-flex-flow: row-reverse nowrap;
          flex-flow: row-reverse nowrap; }
      .menu-bar.large-icon-right > li > a > img, .menu-bar.large-icon-right > li > a > .iconic {
        margin: 0 0 0 1rem; } }
  @media only screen and (min-width: 65em) {
    .menu-bar.large-icon-bottom > li > img, .menu-bar.large-icon-bottom > li > .iconic {
      margin: 0;
      width: 25px;
      height: 25px; }
      .menu-bar.large-icon-bottom > li > img:first-child:last-child, .menu-bar.large-icon-bottom > li > .iconic:first-child:last-child {
        margin: 0; }
    .menu-bar.large-icon-bottom > li > a {
      -ms-flex-flow: column-reverse nowrap;
          flex-flow: column-reverse nowrap; }
      .menu-bar.large-icon-bottom > li > a > img, .menu-bar.large-icon-bottom > li > a > .iconic {
        margin: 1rem 0 0 0; } }
  @media only screen and (min-width: 65em) {
    .menu-bar.large-icon-left > li > img, .menu-bar.large-icon-left > li > .iconic {
      margin: 0;
      width: 25px;
      height: 25px; }
      .menu-bar.large-icon-left > li > img:first-child:last-child, .menu-bar.large-icon-left > li > .iconic:first-child:last-child {
        margin: 0; }
    .menu-bar.large-icon-left > li > a {
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
      -ms-flex-align: center;
          -ms-grid-row-align: center;
          align-items: center; }
      .menu-bar.large-icon-left > li > a > img, .menu-bar.large-icon-left > li > a > .iconic {
        margin: 0 1rem 0 0; } }
  .menu-bar.label-side > li {
    position: relative; }
    .menu-bar.label-side > li > a {
      padding-right: 3.2rem; }
  .menu-bar.label-side .menu-bar-label {
    display: block;
    font-size: 0.9rem;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    border-radius: 1000px;
    background: red;
    color: #fff;
    position: absolute;
    pointer-events: none;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%); }
  .menu-bar.label-corner > li {
    position: relative; }
    .menu-bar.label-corner > li > a {
      padding-right: 3.2rem; }
  .menu-bar.label-corner .menu-bar-label {
    display: block;
    font-size: 0.9rem;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    border-radius: 1000px;
    background: red;
    color: #fff;
    position: absolute;
    pointer-events: none;
    right: 1rem;
    top: 1rem; }
  .menu-bar.primary {
    background: #00558b; }
    .menu-bar.primary > li > a {
      color: #fff; }
      .menu-bar.primary > li > a:hover {
        background: #0065a5;
        color: #fff; }
    .menu-bar.primary .is-active > a {
      background: #0065a5;
      color: #fff; }
  .menu-bar.dark {
    background: #232323; }
    .menu-bar.dark > li > a {
      color: #fff; }
      .menu-bar.dark > li > a:hover {
        background: #323232;
        color: #fff; }
    .menu-bar.dark .is-active > a {
      background: #323232;
      color: #fff; }
  .menu-bar > li.title {
    padding: 1rem;
    cursor: default;
    font-weight: bold; }

.menu-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media only screen and (min-width: 46.0625em) {
    .menu-group {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; } }
  .menu-group > .menu-group-left, .menu-group > .menu-group-right {
    -ms-flex: 1 1 100%;
        flex: 1 1 100%; }
    @media only screen and (min-width: 46.0625em) {
      .menu-group > .menu-group-left, .menu-group > .menu-group-right {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; } }
  .menu-group .menu-bar {
    margin: 0; }
    .menu-group .menu-bar > li {
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; }
  .menu-group.primary {
    background-color: #00558b; }
    .menu-group.primary .menu-bar {
      background: #00558b; }
      .menu-group.primary .menu-bar > li > a {
        color: #fff; }
        .menu-group.primary .menu-bar > li > a:hover {
          background: #0065a5;
          color: #fff; }
      .menu-group.primary .menu-bar .is-active > a {
        background: #0065a5;
        color: #fff; }
  .menu-group.dark {
    background-color: #232323; }
    .menu-group.dark .menu-bar {
      background: #232323; }
      .menu-group.dark .menu-bar > li > a {
        color: #fff; }
        .menu-group.dark .menu-bar > li > a:hover {
          background: #323232;
          color: #fff; }
      .menu-group.dark .menu-bar .is-active > a {
        background: #323232;
        color: #fff; }

/*
  MODAL
  -----

  The humble modal hides off-canvas until summoned with an fa-open directive. Modals appear over an overlay that darkens the rest of the page, and have a maxmimum width. You can construct a grid inside a modal, or attach panels to it.

  Note that the modal overlay is hardcoded into the CSS, because whether or not you build your modal semantically, the overlay is always required and will always look the same.
*/
@keyframes shake {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    transform: translateX(7%); }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    transform: translateX(-7%); }
  100% {
    transform: translateX(0); } }

@keyframes spin-cw {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes spin-ccw {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-360deg); } }

@keyframes wiggle {
  40%, 50%, 60% {
    transform: rotate(7deg); }
  35%, 45%, 55%, 65% {
    transform: rotate(-7deg); }
  0%, 30%, 70%, 100% {
    transform: rotate(0); } }

/*
    Transitions
  */
.slideInUp.ng-enter, .slideInUp.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  backface-visibility: hidden;
  transform: translateY(100%); }

.slideInUp.ng-enter.ng-enter-active, .slideInUp.ng-hide-remove.ng-hide-remove-active {
  transform: translateX(0) translateY(0); }

.slideInRight.ng-enter, .slideInRight.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  backface-visibility: hidden;
  transform: translateX(-100%); }

.slideInRight.ng-enter.ng-enter-active, .slideInRight.ng-hide-remove.ng-hide-remove-active {
  transform: translateX(0) translateY(0); }

.slideInDown.ng-enter, .slideInDown.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  backface-visibility: hidden;
  transform: translateY(-100%); }

.slideInDown.ng-enter.ng-enter-active, .slideInDown.ng-hide-remove.ng-hide-remove-active {
  transform: translateX(0) translateY(0); }

.slideInLeft.ng-enter, .slideInLeft.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  backface-visibility: hidden;
  transform: translateX(100%); }

.slideInLeft.ng-enter.ng-enter-active, .slideInLeft.ng-hide-remove.ng-hide-remove-active {
  transform: translateX(0) translateY(0); }

.slideOutUp.ng-leave, .slideOutUp.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  backface-visibility: hidden;
  transform: translateX(0) translateY(0); }

.slideOutUp.ng-leave.ng-leave-active, .slideOutUp.ng-hide-add.ng-hide-add-active {
  transform: translateY(-100%); }

.slideOutRight.ng-leave, .slideOutRight.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  backface-visibility: hidden;
  transform: translateX(0) translateY(0); }

.slideOutRight.ng-leave.ng-leave-active, .slideOutRight.ng-hide-add.ng-hide-add-active {
  transform: translateX(100%); }

.slideOutDown.ng-leave, .slideOutDown.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  backface-visibility: hidden;
  transform: translateX(0) translateY(0); }

.slideOutDown.ng-leave.ng-leave-active, .slideOutDown.ng-hide-add.ng-hide-add-active {
  transform: translateY(100%); }

.slideOutLeft.ng-leave, .slideOutLeft.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  backface-visibility: hidden;
  transform: translateX(0) translateY(0); }

.slideOutLeft.ng-leave.ng-leave-active, .slideOutLeft.ng-hide-add.ng-hide-add-active {
  transform: translateX(-100%); }

.fadeIn.ng-enter, .fadeIn.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: opacity;
  opacity: 0; }

.fadeIn.ng-enter.ng-enter-active, .fadeIn.ng-hide-remove.ng-hide-remove-active {
  opacity: 1; }

.fadeOut.ng-leave, .fadeOut.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: opacity;
  opacity: 1; }

.fadeOut.ng-leave.ng-leave-active, .fadeOut.ng-hide-add.ng-hide-add-active {
  opacity: 0; }

.hingeInFromTop.ng-enter, .hingeInFromTop.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateX(-90deg);
  transform-origin: top;
  opacity: 0; }

.hingeInFromTop.ng-enter.ng-enter-active, .hingeInFromTop.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromRight.ng-enter, .hingeInFromRight.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateY(-90deg);
  transform-origin: right;
  opacity: 0; }

.hingeInFromRight.ng-enter.ng-enter-active, .hingeInFromRight.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromBottom.ng-enter, .hingeInFromBottom.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateX(90deg);
  transform-origin: bottom;
  opacity: 0; }

.hingeInFromBottom.ng-enter.ng-enter-active, .hingeInFromBottom.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromLeft.ng-enter, .hingeInFromLeft.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateY(90deg);
  transform-origin: left;
  opacity: 0; }

.hingeInFromLeft.ng-enter.ng-enter-active, .hingeInFromLeft.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromMiddleX.ng-enter, .hingeInFromMiddleX.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateX(-90deg);
  transform-origin: center;
  opacity: 0; }

.hingeInFromMiddleX.ng-enter.ng-enter-active, .hingeInFromMiddleX.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromMiddleY.ng-enter, .hingeInFromMiddleY.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateY(-90deg);
  transform-origin: center;
  opacity: 0; }

.hingeInFromMiddleY.ng-enter.ng-enter-active, .hingeInFromMiddleY.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeOutFromTop.ng-leave, .hingeOutFromTop.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: top;
  opacity: 1; }

.hingeOutFromTop.ng-leave.ng-leave-active, .hingeOutFromTop.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hingeOutFromRight.ng-leave, .hingeOutFromRight.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: right;
  opacity: 1; }

.hingeOutFromRight.ng-leave.ng-leave-active, .hingeOutFromRight.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.hingeOutFromBottom.ng-leave, .hingeOutFromBottom.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: bottom;
  opacity: 1; }

.hingeOutFromBottom.ng-leave.ng-leave-active, .hingeOutFromBottom.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateX(90deg);
  opacity: 0; }

.hingeOutFromLeft.ng-leave, .hingeOutFromLeft.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: left;
  opacity: 1; }

.hingeOutFromLeft.ng-leave.ng-leave-active, .hingeOutFromLeft.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateY(90deg);
  opacity: 0; }

.hingeOutFromMiddleX.ng-leave, .hingeOutFromMiddleX.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: center;
  opacity: 1; }

.hingeOutFromMiddleX.ng-leave.ng-leave-active, .hingeOutFromMiddleX.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hingeOutFromMiddleY.ng-leave, .hingeOutFromMiddleY.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: center;
  opacity: 1; }

.hingeOutFromMiddleY.ng-leave.ng-leave-active, .hingeOutFromMiddleY.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.zoomIn.ng-enter, .zoomIn.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, property;
  transform: scale(1.5);
  opacity: 0; }

.zoomIn.ng-enter.ng-enter-active, .zoomIn.ng-hide-remove.ng-hide-remove-active {
  transform: scale(1);
  opacity: 1; }

.zoomOut.ng-leave, .zoomOut.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, property;
  transform: scale(0.5);
  opacity: 1; }

.zoomOut.ng-leave.ng-leave-active, .zoomOut.ng-hide-add.ng-hide-add-active {
  transform: scale(1);
  opacity: 0; }

.spinIn.ng-enter, .spinIn.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(-270deg);
  opacity: 0; }

.spinIn.ng-enter.ng-enter-active, .spinIn.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0);
  opacity: 1; }

.spinOut.ng-leave, .spinOut.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0);
  opacity: 1; }

.spinOut.ng-leave.ng-leave-active, .spinOut.ng-hide-add.ng-hide-add-active {
  transform: rotate(270deg);
  opacity: 0; }

.spinInCCW.ng-enter, .spinInCCW.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(270deg);
  opacity: 0; }

.spinInCCW.ng-enter.ng-enter-active, .spinInCCW.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0);
  opacity: 1; }

.spinOutCCW.ng-leave, .spinOutCCW.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0);
  opacity: 1; }

.spinOutCCW.ng-leave.ng-leave-active, .spinOutCCW.ng-hide-add.ng-hide-add-active {
  transform: rotate(-270deg);
  opacity: 0; }

/*
    Transition modifiers
  */
.slow {
  transition-duration: 750ms !important; }

.fast {
  transition-duration: 250ms !important; }

.linear {
  transition-timing-function: linear !important; }

.ease {
  transition-timing-function: ease !important; }

.easeIn {
  transition-timing-function: ease-in !important; }

.easeOut {
  transition-timing-function: ease-out !important; }

.easeInOut {
  transition-timing-function: ease-in-out !important; }

.bounceIn {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.bounceOut {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.bounceInOut {
  transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.delay {
  transition-delay: 300ms !important; }

.long-delay {
  transition-delay: 700ms !important; }

/*
    Animations
  */
.shake {
  animation-name: shake;
  animation-duration: 500ms;
  animation-timing-function: ease;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-delay: 0; }

.spin-cw {
  animation-name: spin-cw;
  animation-duration: 500ms;
  animation-timing-function: ease;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-delay: 0; }

.spin-ccw {
  animation-name: spin-ccw;
  animation-duration: 500ms;
  animation-timing-function: ease;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-delay: 0; }

.wiggle {
  animation-name: wiggle;
  animation-duration: 500ms;
  animation-timing-function: ease;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-delay: 0; }

/*
    Animation modifiers
  */
.shake.infinite,
.spin-cw.infinite,
.spin-ccw.infinite,
.wiggle.infinite {
  animation-iteration-count: infinite; }

.shake.linear,
.spin-cw.linear,
.spin-ccw.linear,
.wiggle.linear {
  animation-timing-function: linear !important; }

.shake.ease,
.spin-cw.ease,
.spin-ccw.ease,
.wiggle.ease {
  animation-timing-function: ease !important; }

.shake.easeIn,
.spin-cw.easeIn,
.spin-ccw.easeIn,
.wiggle.easeIn {
  animation-timing-function: ease-in !important; }

.shake.easeOut,
.spin-cw.easeOut,
.spin-ccw.easeOut,
.wiggle.easeOut {
  animation-timing-function: ease-out !important; }

.shake.easeInOut,
.spin-cw.easeInOut,
.spin-ccw.easeInOut,
.wiggle.easeInOut {
  animation-timing-function: ease-in-out !important; }

.shake.bounceIn,
.spin-cw.bounceIn,
.spin-ccw.bounceIn,
.wiggle.bounceIn {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.shake.bounceOut,
.spin-cw.bounceOut,
.spin-ccw.bounceOut,
.wiggle.bounceOut {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.shake.bounceInOut,
.spin-cw.bounceInOut,
.spin-ccw.bounceInOut,
.wiggle.bounceInOut {
  animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.shake.slow,
.spin-cw.slow,
.spin-ccw.slow,
.wiggle.slow {
  animation-duration: 750ms !important; }

.shake.fast,
.spin-cw.fast,
.spin-ccw.fast,
.wiggle.fast {
  animation-duration: 250ms !important; }

.shake.delay,
.spin-cw.delay,
.spin-ccw.delay,
.wiggle.delay {
  animation-delay: 300ms !important; }

.shake.long-delay,
.spin-cw.long-delay,
.spin-ccw.long-delay,
.wiggle.long-delay {
  animation-delay: 700ms !important; }

.stagger {
  transition-delay: 150ms;
  transition-duration: 0; }

.stort-stagger {
  transition-delay: 150ms;
  transition-duration: 0; }

.long-stagger {
  transition-delay: 150ms;
  transition-duration: 0; }

.position-absolute {
  overflow: hidden;
  position: relative; }

[ui-view].ng-enter-active, [ui-view].ng-leave-active {
  position: absolute !important;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

/*
  NOTIFICATION
  ------------

  An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be asigned to a notification as well.

  Optionally, the notifications directive can also tap into the browser's native notification support, if it exists.
*/
.notification, .static-notification {
  z-index: 1000;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-top: .5rem;
  margin-bottom: .5rem;
  display: none; }
  .notification h1, .static-notification h1 {
    font-size: 1.25em;
    margin: 0; }
  .notification p, .static-notification p {
    margin: 0; }
  .is-active.notification, .is-active.static-notification {
    display: -ms-flexbox;
    display: flex; }
  .notification .close-button, .static-notification .close-button {
    color: white; }

.notification-container {
  z-index: 3000;
  position: fixed;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }

/*
  CSS Output
*/
.notification {
  background: #00558b;
  padding: 1rem;
  border-radius: 4px; }
  .notification, .notification h1, .notification h2, .notification h3, .notification h4, .notification h5, .notification h6 {
    color: white; }
  .notification.success {
    background: #43AC6A;
    padding: 1rem;
    border-radius: 4px; }
    .notification.success, .notification.success h1, .notification.success h2, .notification.success h3, .notification.success h4, .notification.success h5, .notification.success h6 {
      color: white; }
  .notification.warning {
    background: #F08A24;
    padding: 1rem;
    border-radius: 4px; }
    .notification.warning, .notification.warning h1, .notification.warning h2, .notification.warning h3, .notification.warning h4, .notification.warning h5, .notification.warning h6 {
      color: white; }
  .notification.alert {
    background: #F04124;
    padding: 1rem;
    border-radius: 4px; }
    .notification.alert, .notification.alert h1, .notification.alert h2, .notification.alert h3, .notification.alert h4, .notification.alert h5, .notification.alert h6 {
      color: white; }
  .notification.dark {
    background: #232323;
    padding: 1rem;
    border-radius: 4px; }
    .notification.dark, .notification.dark h1, .notification.dark h2, .notification.dark h3, .notification.dark h4, .notification.dark h5, .notification.dark h6 {
      color: #fff; }

.static-notification {
  background: #00558b;
  padding: 1rem;
  border-radius: 4px;
  position: fixed !important; }
  .static-notification, .static-notification h1, .static-notification h2, .static-notification h3, .static-notification h4, .static-notification h5, .static-notification h6 {
    color: white; }
  .static-notification.top-right {
    width: 25rem;
    right: 1rem;
    top: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .static-notification.top-right {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .static-notification.top-left {
    width: 25rem;
    left: 1rem;
    top: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .static-notification.top-left {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .static-notification.top-middle {
    width: 25rem;
    left: 50%;
    margin-left: -12.5rem;
    top: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .static-notification.top-middle {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .static-notification.bottom-right {
    width: 25rem;
    right: 1rem;
    top: auto;
    bottom: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .static-notification.bottom-right {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .static-notification.bottom-left {
    width: 25rem;
    left: 1rem;
    top: auto;
    bottom: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .static-notification.bottom-left {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .static-notification.bottom-middle {
    width: 25rem;
    left: 50%;
    margin-left: -12.5rem;
    top: auto;
    bottom: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .static-notification.bottom-middle {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .static-notification.success {
    background: #43AC6A;
    padding: 1rem;
    border-radius: 4px; }
    .static-notification.success, .static-notification.success h1, .static-notification.success h2, .static-notification.success h3, .static-notification.success h4, .static-notification.success h5, .static-notification.success h6 {
      color: white; }
  .static-notification.warning {
    background: #F08A24;
    padding: 1rem;
    border-radius: 4px; }
    .static-notification.warning, .static-notification.warning h1, .static-notification.warning h2, .static-notification.warning h3, .static-notification.warning h4, .static-notification.warning h5, .static-notification.warning h6 {
      color: white; }
  .static-notification.alert {
    background: #F04124;
    padding: 1rem;
    border-radius: 4px; }
    .static-notification.alert, .static-notification.alert h1, .static-notification.alert h2, .static-notification.alert h3, .static-notification.alert h4, .static-notification.alert h5, .static-notification.alert h6 {
      color: white; }
  .static-notification.dark {
    background: #232323;
    padding: 1rem;
    border-radius: 4px; }
    .static-notification.dark, .static-notification.dark h1, .static-notification.dark h2, .static-notification.dark h3, .static-notification.dark h4, .static-notification.dark h5, .static-notification.dark h6 {
      color: #fff; }

.notification-container {
  width: 25rem;
  right: 1rem;
  top: 1rem; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .notification-container {
      width: auto;
      left: 1rem;
      right: 1rem;
      margin-left: 0; } }
  .notification-container.top-right {
    width: 25rem;
    right: 1rem;
    top: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .notification-container.top-right {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .notification-container.top-left {
    width: 25rem;
    left: 1rem;
    top: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .notification-container.top-left {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .notification-container.top-middle {
    width: 25rem;
    left: 50%;
    margin-left: -12.5rem;
    top: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .notification-container.top-middle {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .notification-container.bottom-right {
    width: 25rem;
    right: 1rem;
    top: auto;
    bottom: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .notification-container.bottom-right {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .notification-container.bottom-left {
    width: 25rem;
    left: 1rem;
    top: auto;
    bottom: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .notification-container.bottom-left {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }
  .notification-container.bottom-middle {
    width: 25rem;
    left: 50%;
    margin-left: -12.5rem;
    top: auto;
    bottom: 1rem; }
    @media only screen and (min-width: 0em) and (max-width: 46rem) {
      .notification-container.bottom-middle {
        width: auto;
        left: 1rem;
        right: 1rem;
        margin-left: 0; } }

.notification-icon {
  -ms-flex: 0 0 60px;
      flex: 0 0 60px;
  margin-right: 1rem;
  -ms-flex-item-align: start;
      align-self: flex-start; }
  .notification-icon img {
    width: 100%;
    height: auto; }

.notification-content {
  -ms-flex: 1;
      flex: 1; }

/*
  Off-canvas menu
  ---------------

  A generic container that stays fixed to the left, top, right, or bottom of the screen, and is summoned when needed. When an off-canvas panel is open, the app frame shifts over to reveal the menu.
*/
.off-canvas {
  position: fixed;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  transition: transform 0.25s ease-out;
  z-index: 2; }
  .is-active.off-canvas {
    transform: translate(0, 0) !important; }
  .off-canvas ~ .grid-frame {
    transform: translate(0, 0, 0);
    transition: transform 0.25s ease-out;
    backface-visibility: hidden;
    background: white; }

.off-canvas {
  /*
    Get shadow values for later use
  */
  /*
    Sizing
  */
  width: 250px;
  height: 100%;
  /*
    Positioning
  */
  top: 0;
  left: 0;
  box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.25);
  transform: translateX(-100%);
  background: #fff;
  color: #000; }
  .off-canvas.is-active ~ .grid-frame {
    transform: translateX(250px) !important; }
  .off-canvas.top {
    /*
    Get shadow values for later use
  */
    /*
    Sizing
  */
    height: 250px;
    width: 100%;
    /*
    Positioning
  */
    top: 0;
    left: 0;
    transform: translateY(-100%);
    box-shadow: inset 0 -3px 10px rgba(0, 0, 0, 0.25); }
    .off-canvas.top.is-active ~ .grid-frame {
      transform: translateY(250px) !important; }
  .off-canvas.right {
    /*
    Get shadow values for later use
  */
    /*
    Sizing
  */
    width: 250px;
    height: 100%;
    /*
    Positioning
  */
    left: auto;
    top: 0;
    right: 0;
    box-shadow: inset 3px 0 10px rgba(0, 0, 0, 0.25);
    transform: translateX(100%); }
    .off-canvas.right.is-active ~ .grid-frame {
      transform: translateX(-250px) !important; }
  .off-canvas.bottom {
    /*
    Get shadow values for later use
  */
    /*
    Sizing
  */
    height: 250px;
    width: 100%;
    /*
    Positioning
  */
    top: auto;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.25); }
    .off-canvas.bottom.is-active ~ .grid-frame {
      transform: translateY(-250px) !important; }
  .off-canvas.left {
    /*
    Get shadow values for later use
  */
    /*
    Sizing
  */
    width: 250px;
    height: 100%;
    /*
    Positioning
  */
    top: 0;
    left: 0;
    box-shadow: inset -3px 0 10px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%); }
    .off-canvas.left.is-active ~ .grid-frame {
      transform: translateX(250px) !important; }
  .off-canvas.detached {
    z-index: 0;
    box-shadow: none; }
    .off-canvas.detached, .off-canvas.detached.is-active {
      transform: none; }
    .off-canvas.detached ~ .grid-frame {
      z-index: 1;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); }
  .off-canvas.primary {
    background: #00558b;
    color: #fff; }
  .off-canvas.dark {
    background: #232323;
    color: #fff; }

/*
  POPUP
  -----

  A floating container that can anchor to any other on-screen element, and contain any content, including grid blocks or panels.
*/
.popup {
  position: absolute;
  z-index: 1000;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.25s ease-out;
  pointer-events: none; }
  .tether-enabled.popup {
    opacity: 1;
    pointer-events: auto; }

.popup {
  width: 18.75rem;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border: 0; }
  .popup.dark {
    background: #232323;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    border: 0; }
  .popup.primary {
    background: #00558b;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    border: 0; }

/*
  SWITCH
  ------
*/
.switch {
  position: relative;
  overflow: hidden;
  display: inline-block; }
  .switch > input {
    position: absolute;
    left: -9999px;
    outline: none; }
  .switch > label {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0; }
    .switch > label::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0; }
  .switch input + label {
    margin-left: 0; }

/*
  Defines the dimmensions of the switch.

  $width - width of the switch.
  $height - height of the switch.
*/
.switch {
  width: 3.125rem;
  height: 2rem;
  border-radius: 9999px; }
  .switch > label::after {
    width: 2rem;
    height: 2rem; }
  .switch input:checked + label::after {
    left: 1.125rem; }
  .switch > label {
    background: #ccc; }
    .switch > label::after {
      background: white;
      border-radius: 9999px;
      transition: left 0.15s ease-out;
      border: 4px solid #ccc; }
  .switch input:checked + label {
    background: #00558b;
    margin: 0; }
    .switch input:checked + label::after {
      border-color: #00558b; }
  .switch.small {
    width: 2.5rem;
    height: 1.625rem; }
    .switch.small > label::after {
      width: 1.625rem;
      height: 1.625rem; }
    .switch.small input:checked + label::after {
      left: 0.875rem; }
  .switch.large {
    width: 3.75rem;
    height: 2.375rem; }
    .switch.large > label::after {
      width: 2.375rem;
      height: 2.375rem; }
    .switch.large input:checked + label::after {
      left: 1.375rem; }

/*
  TABS
  ----
*/
.tabs {
  /*
    Container styles
  */
  display: -ms-flexbox;
  display: flex;
  background: transparent;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; }
  .tabs.vertical {
    /*
    Container styles
  */
    display: -ms-flexbox;
    display: flex;
    background: transparent;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap; }
  .tabs .tab-item {
    background: #f3f3f3;
    padding: 1rem;
    line-height: 1;
    margin: 0;
    -ms-flex: 0 1 auto;
        flex: 0 1 auto;
    cursor: pointer;
    color: #000; }
    .tabs .tab-item.is-active {
      background: #ececec;
      color: #000; }
      .tabs .tab-item.is-active:hover {
        background: #e7e7e7; }
    .tabs .tab-item:hover {
      background: #e7e7e7; }

.tab-contents {
  padding: 1rem; }
  .tab-contents .tab-content {
    display: none; }
    .tab-contents .tab-content.is-active {
      display: block; }

/*
  ACCORDION
  ---------

  The trusy accordion allows you to create a series of vertical tabs.
*/
.accordion {
  border: 1px solid #cbcbcb; }

.accordion-title {
  padding: 1rem;
  background: #f3f3f3;
  color: #000;
  line-height: 1;
  cursor: pointer; }
  .accordion-title:hover {
    background: #e7e7e7; }
  .is-active > .accordion-title {
    background: #ececec;
    color: #000; }

.accordion-content {
  padding: 1rem;
  display: none; }
  .is-active > .accordion-content {
    display: block; }

/*
  TYPOGRAPHY
  ----------

  Includes typographic resets for many common elements, and a few helper classes.
   - Headers
   - Subheaders
   - Lead paragraphs
   - Ordered/unordered lists
   - Code samples
   - Anchors
   - Dividers
   - Blockquotes
   - Acronyms
*/
/* Typography resets */
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0; }

/* Default Link Styles */
a {
  color: #00558b;
  text-decoration: none;
  line-height: inherit; }
  a[ui-sref] {
    cursor: pointer; }
  a:hover, a:focus {
    color: #004978; }
  a img {
    border: none; }

/* Default paragraph styles */
p {
  font-family: inherit;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-rendering: optimizeLegibility; }
  p.lead {
    font-size: 1.21875rem;
    line-height: 1.6; }
  p aside {
    font-size: 0.875rem;
    line-height: 1.35;
    font-style: italic; }

/* Default header styles */
h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #222;
  text-rendering: optimizeLegibility;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.4; }
  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-size: 60%;
    color: #6f6f6f;
    line-height: 0; }

h1 {
  font-size: 2.125rem; }

h2 {
  font-size: 1.6875rem; }

h3 {
  font-size: 1.375rem; }

h4 {
  font-size: 1.125rem; }

h5 {
  font-size: 1.125rem; }

h6 {
  font-size: 1rem; }

.subheader {
  line-height: 1.4;
  color: #6f6f6f;
  font-weight: normal;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem; }

hr {
  border: solid #ddd;
  border-width: 1px 0 0;
  clear: both;
  margin: 1.25rem 0 1.1875rem;
  height: 0; }

/* Helpful Typography Defaults */
em,
i {
  font-style: italic;
  line-height: inherit; }

strong,
b {
  font-weight: bold;
  line-height: inherit; }

small {
  font-size: 60%;
  color: #6f6f6f;
  line-height: inherit; }

code {
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-weight: normal;
  color: #464646;
  background-color: #fbfbfb;
  border-width: 1px;
  border-style: solid;
  border-color: #e2e2e2;
  padding: 0.125rem 0.3125rem 0.0625rem; }

/* Lists */
ul,
ol,
dl {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  list-style-position: outside;
  font-family: inherit; }

/* Lists */
ul, ol {
  margin-left: 1.1rem; }
  ul li ul,
  ul li ol, ol li ul,
  ol li ol {
    margin-left: 1.25rem;
    margin-bottom: 0; }

/* Lists without bullets */
ul.no-bullet {
  margin-left: 0; }
  ul.no-bullet, ul.no-bullet li ul, ul.no-bullet li ol {
    list-style-type: none; }

/* Definition Lists */
dl dt {
  margin-bottom: 0.3rem;
  font-weight: bold; }

dl dd {
  margin-bottom: 0.75rem; }

/* Abbreviations */
abbr,
acronym {
  text-transform: uppercase;
  font-size: 90%;
  color: #222;
  border-bottom: 1px dotted #ddd;
  cursor: help; }

abbr {
  text-transform: none; }

/* Blockquotes */
blockquote {
  margin: 0 0 1.25rem;
  padding: 0.5625rem 1.25rem 0 1.1875rem;
  border-left: 1px solid #ddd; }
  blockquote cite {
    display: block;
    font-size: 0.8125rem;
    color: #555555; }
    blockquote cite:before {
      content: "\2014 \0020"; }
    blockquote cite a,
    blockquote cite a:visited {
      color: #555555; }

blockquote,
blockquote p {
  line-height: 1.6;
  color: #6f6f6f; }

@media only screen and (min-width: 46.0625em) {
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.4; }
  h1 {
    font-size: 2.75rem; }
  h2 {
    font-size: 2.3125rem; }
  h3 {
    font-size: 1.6875rem; }
  h4 {
    font-size: 1.4375rem; }
  h5 {
    font-size: 1.125rem; }
  h6 {
    font-size: 1rem; } }

/*
  UTILITIES
  ---------

  Responsive helper classes to assist you in quickly doing basic formatting and layout.

  Features:
   - Vertical alignment
   - Visibility
   - Text alignment
   - Floating
*/
.v-align {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between; }
  .v-align .align-top {
    -ms-flex-item-align: start;
        align-self: flex-start; }
  .v-align .align-center {
    -ms-flex-item-align: center;
        align-self: center; }
  .v-align .align-bottom {
    -ms-flex-item-align: end;
        align-self: flex-end; }
  .v-align .small-align-top {
    -ms-flex-item-align: start;
        align-self: flex-start; }
  .v-align .small-align-center {
    -ms-flex-item-align: center;
        align-self: center; }
  .v-align .small-align-bottom {
    -ms-flex-item-align: end;
        align-self: flex-end; }
  @media only screen and (min-width: 46.0625em) {
    .v-align .medium-align-top {
      -ms-flex-item-align: start;
          align-self: flex-start; } }
  @media only screen and (min-width: 46.0625em) {
    .v-align .medium-align-center {
      -ms-flex-item-align: center;
          align-self: center; } }
  @media only screen and (min-width: 46.0625em) {
    .v-align .medium-align-bottom {
      -ms-flex-item-align: end;
          align-self: flex-end; } }
  @media only screen and (min-width: 65em) {
    .v-align .large-align-top {
      -ms-flex-item-align: start;
          align-self: flex-start; } }
  @media only screen and (min-width: 65em) {
    .v-align .large-align-center {
      -ms-flex-item-align: center;
          align-self: center; } }
  @media only screen and (min-width: 65em) {
    .v-align .large-align-bottom {
      -ms-flex-item-align: end;
          align-self: flex-end; } }

.hide {
  display: none !important; }

.invisible {
  visibility: hidden; }

.hide-for-small:not(.ng-hide) {
  display: block !important;
  display: none !important; }

.hide-for-small[class*="grid-block"]:not(.ng-hide) {
  display: -ms-flexbox !important;
  display: flex !important;
  display: none !important; }

.show-for-small:not(.ng-hide) {
  display: none !important;
  display: block !important; }

.show-for-small[class*="grid-block"]:not(.ng-hide) {
  display: none !important;
  display: -ms-flexbox !important;
  display: flex !important; }

.hide-for-small-only:not(.ng-hide) {
  display: block !important; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .hide-for-small-only:not(.ng-hide) {
      display: none !important; } }

.hide-for-small-only[class*="grid-block"]:not(.ng-hide) {
  display: -ms-flexbox !important;
  display: flex !important; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .hide-for-small-only[class*="grid-block"]:not(.ng-hide) {
      display: none !important; } }

.show-for-small-only:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .show-for-small-only:not(.ng-hide) {
      display: block !important; } }

.show-for-small-only[class*="grid-block"]:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .show-for-small-only[class*="grid-block"]:not(.ng-hide) {
      display: -ms-flexbox !important;
      display: flex !important; } }

.hide-for-medium:not(.ng-hide) {
  display: block !important; }
  @media only screen and (min-width: 46.0625em) {
    .hide-for-medium:not(.ng-hide) {
      display: none !important; } }

.hide-for-medium[class*="grid-block"]:not(.ng-hide) {
  display: -ms-flexbox !important;
  display: flex !important; }
  @media only screen and (min-width: 46.0625em) {
    .hide-for-medium[class*="grid-block"]:not(.ng-hide) {
      display: none !important; } }

.show-for-medium:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 46.0625em) {
    .show-for-medium:not(.ng-hide) {
      display: block !important; } }

.show-for-medium[class*="grid-block"]:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 46.0625em) {
    .show-for-medium[class*="grid-block"]:not(.ng-hide) {
      display: -ms-flexbox !important;
      display: flex !important; } }

.hide-for-medium-only:not(.ng-hide) {
  display: block !important; }
  @media only screen and (min-width: 46.0625em) and (max-width: 64.9375rem) {
    .hide-for-medium-only:not(.ng-hide) {
      display: none !important; } }

.hide-for-medium-only[class*="grid-block"]:not(.ng-hide) {
  display: -ms-flexbox !important;
  display: flex !important; }
  @media only screen and (min-width: 46.0625em) and (max-width: 64.9375rem) {
    .hide-for-medium-only[class*="grid-block"]:not(.ng-hide) {
      display: none !important; } }

.show-for-medium-only:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 46.0625em) and (max-width: 64.9375rem) {
    .show-for-medium-only:not(.ng-hide) {
      display: block !important; } }

.show-for-medium-only[class*="grid-block"]:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 46.0625em) and (max-width: 64.9375rem) {
    .show-for-medium-only[class*="grid-block"]:not(.ng-hide) {
      display: -ms-flexbox !important;
      display: flex !important; } }

.hide-for-large:not(.ng-hide) {
  display: block !important; }
  @media only screen and (min-width: 65em) {
    .hide-for-large:not(.ng-hide) {
      display: none !important; } }

.hide-for-large[class*="grid-block"]:not(.ng-hide) {
  display: -ms-flexbox !important;
  display: flex !important; }
  @media only screen and (min-width: 65em) {
    .hide-for-large[class*="grid-block"]:not(.ng-hide) {
      display: none !important; } }

.show-for-large:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 65em) {
    .show-for-large:not(.ng-hide) {
      display: block !important; } }

.show-for-large[class*="grid-block"]:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 65em) {
    .show-for-large[class*="grid-block"]:not(.ng-hide) {
      display: -ms-flexbox !important;
      display: flex !important; } }

.hide-for-large-only:not(.ng-hide) {
  display: block !important; }
  @media only screen and (min-width: 65em) and (max-width: 89.9375rem) {
    .hide-for-large-only:not(.ng-hide) {
      display: none !important; } }

.hide-for-large-only[class*="grid-block"]:not(.ng-hide) {
  display: -ms-flexbox !important;
  display: flex !important; }
  @media only screen and (min-width: 65em) and (max-width: 89.9375rem) {
    .hide-for-large-only[class*="grid-block"]:not(.ng-hide) {
      display: none !important; } }

.show-for-large-only:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 65em) and (max-width: 89.9375rem) {
    .show-for-large-only:not(.ng-hide) {
      display: block !important; } }

.show-for-large-only[class*="grid-block"]:not(.ng-hide) {
  display: none !important; }
  @media only screen and (min-width: 65em) and (max-width: 89.9375rem) {
    .show-for-large-only[class*="grid-block"]:not(.ng-hide) {
      display: -ms-flexbox !important;
      display: flex !important; } }

@media only screen and (orientation: portrait) {
  .hide-for-portrait {
    display: none !important; }
    .hide-for-portrait[class*="grid-block"] {
      display: -ms-flexbox !important;
      display: flex !important; } }

.show-for-portrait {
  display: none !important; }
  @media only screen and (orientation: portrait) {
    .show-for-portrait {
      display: block !important; }
      .show-for-portrait[class*="grid-block"] {
        display: -ms-flexbox !important;
        display: flex !important; } }

@media only screen and (orientation: landscape) {
  .hide-for-landscape {
    display: none !important; }
    .hide-for-landscape[class*="grid-block"] {
      display: -ms-flexbox !important;
      display: flex !important; } }

.show-for-landscape {
  display: none !important; }
  @media only screen and (orientation: landscape) {
    .show-for-landscape {
      display: block !important; }
      .show-for-landscape[class*="grid-block"] {
        display: -ms-flexbox !important;
        display: flex !important; } }

/*
    Text alignment
  */
.text-left {
  text-align: left; }

.small-text-left {
  text-align: left; }

@media only screen and (min-width: 0em) and (max-width: 46rem) {
  .small-only-text-left {
    text-align: left; } }

@media only screen and (min-width: 46.0625em) {
  .medium-text-left {
    text-align: left; } }

@media only screen and (min-width: 46.0625em) and (max-width: 64.9375rem) {
  .medium-only-text-left {
    text-align: left; } }

@media only screen and (min-width: 65em) {
  .large-text-left {
    text-align: left; } }

@media only screen and (min-width: 65em) and (max-width: 89.9375rem) {
  .large-only-text-left {
    text-align: left; } }

.text-right {
  text-align: right; }

.small-text-right {
  text-align: right; }

@media only screen and (min-width: 0em) and (max-width: 46rem) {
  .small-only-text-right {
    text-align: right; } }

@media only screen and (min-width: 46.0625em) {
  .medium-text-right {
    text-align: right; } }

@media only screen and (min-width: 46.0625em) and (max-width: 64.9375rem) {
  .medium-only-text-right {
    text-align: right; } }

@media only screen and (min-width: 65em) {
  .large-text-right {
    text-align: right; } }

@media only screen and (min-width: 65em) and (max-width: 89.9375rem) {
  .large-only-text-right {
    text-align: right; } }

.text-center {
  text-align: center; }

.small-text-center {
  text-align: center; }

@media only screen and (min-width: 0em) and (max-width: 46rem) {
  .small-only-text-center {
    text-align: center; } }

@media only screen and (min-width: 46.0625em) {
  .medium-text-center {
    text-align: center; } }

@media only screen and (min-width: 46.0625em) and (max-width: 64.9375rem) {
  .medium-only-text-center {
    text-align: center; } }

@media only screen and (min-width: 65em) {
  .large-text-center {
    text-align: center; } }

@media only screen and (min-width: 65em) and (max-width: 89.9375rem) {
  .large-only-text-center {
    text-align: center; } }

.text-justify {
  text-align: justify; }

.small-text-justify {
  text-align: justify; }

@media only screen and (min-width: 0em) and (max-width: 46rem) {
  .small-only-text-justify {
    text-align: justify; } }

@media only screen and (min-width: 46.0625em) {
  .medium-text-justify {
    text-align: justify; } }

@media only screen and (min-width: 46.0625em) and (max-width: 64.9375rem) {
  .medium-only-text-justify {
    text-align: justify; } }

@media only screen and (min-width: 65em) {
  .large-text-justify {
    text-align: justify; } }

@media only screen and (min-width: 65em) and (max-width: 89.9375rem) {
  .large-only-text-justify {
    text-align: justify; } }

/*
    Floating
  */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table; }

.clearfix:after {
  clear: both; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.float-none {
  float: none; }

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

button {
  border: 0;
  background: transparent;
  -webkit-appearence: none;
  -moz-appearence: none;
  -ms-appearence: none; }

/* 30px */
/* 45px */
/* 60px */
/* 90px */
/*------------------------------------*    TYPOGRAPHY
\*------------------------------------*/
/**
 * PROXIMA NOVA
 *
 * This is the primary font used in the app.
 *
 *
 */
@font-face {
  font-family: 'proxima-nova';
  src: url("../fonts/proximanova-reg-webfont.eot");
  src: url("../fonts/proximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-reg-webfont.woff") format("woff"), url("../fonts/proximanova-reg-webfont.ttf") format("truetype"), url("../fonts/proximanova-reg-webfont.svg#proxima_nova_rgregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'proxima-nova-thin';
  src: url("../fonts/proximanova-thin-webfont.eot");
  src: url("../fonts/proximanova-thin-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-thin-webfont.woff") format("woff"), url("../fonts/proximanova-thin-webfont.ttf") format("truetype"), url("../fonts/proximanova-thin-webfont.svg#proxima_nova_ththin") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'proxima-nova-semibold';
  src: url("../fonts/proximanova-sbold-webfont.eot");
  src: url("../fonts/proximanova-sbold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-sbold-webfont.woff") format("woff"), url("../fonts/proximanova-sbold-webfont.ttf") format("truetype"), url("../fonts/proximanova-sbold-webfont.svg#proxima_nova_ltsemibold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'proxima-nova-bold';
  src: url("../fonts/proximanova-bold-webfont.eot");
  src: url("../fonts/proximanova-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-bold-webfont.woff") format("woff"), url("../fonts/proximanova-bold-webfont.ttf") format("truetype"), url("../fonts/proximanova-bold-webfont.svg#proxima_nova_rgbold") format("svg");
  font-weight: normal;
  font-style: normal; }

/**
 * Mixin to be used when regular font weight is needed.
 */
/**
 * Mixin to be used when thin font weight is needed.
 */
/**
 * Mixin to be used when semibold/medium font weight is needed.
 */
/**
 * Mixin to be used when bold font weight is needed.
 */
/**
 * Mixin to be used when serif font is needed.
 */
/**
 * ICON FONT
 *
 * This is the custom icon font used in the app.
 */
@font-face {
  font-family: 'x-font';
  src: url("../fonts/x-font.eot?53940796");
  src: url("../fonts/x-font.eot?53940796#iefix") format("embedded-opentype"), url("../fonts/x-font.woff?53940796") format("woff"), url("../fonts/x-font.woff2?53940796") format("woff2"), url("../fonts/x-font.ttf?53940796") format("truetype"), url("../fonts/x-font.svg?53940796#x-font") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: 'x-font';
    src: url("../font/x-font.svg?32748979#x-font") format("svg"); } }

/**
 * Icon font specific styling
 */
[class^="icon-"]:before, [class*="icon-"]:before {
  /* Display and box model */
  display: inline-block;
  width: 1em;
  /* Appearance */
  font-family: "x-font";
  font-style: normal;
  font-weight: normal;
  speak: none;
  text-decoration: inherit;
  text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/*
 * Hides accessible <h> tags used to structure
 * the HTML Outline
*/
.accessibility-hidden {
  /* Display and box model */
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden; }

/*
 * Global font rendering styles
 */
* {
  /* Appearance */
  font-family: 'proxima-nova', Helvetica, Arial, San-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/*///// TEXT UTILITIES /////*/
/*
 *
 */
.label-bold {
  /* Display and box model */
  display: block;
  padding-bottom: 0.3125rem;
  /* Appearance */
  font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
  font-weight: normal;
  color: #444444;
  text-transform: uppercase;
  font-size: 0.9375rem; }

/*------------------------------------*    FONT-ICON
\*------------------------------------*/
/**
 * Variables for icon fonts.
 *
 *
 */
/**
 * Resets all elements for table structures.
 * Used primarily for tables.
 *
 */
/**
 * Use when you want text to ellipse in narrower
 * screen sizes.
 *
 */
/**
 * Include this to completely reset a button style.
 * Meant to discourage the use of anchor elements instead
 * of buttons just because they have less default styles.
 *
 * If you use this mixin please make sure you implement
 * your own focus, active, and disabled states (where applicable).
 */
/**
 * Apply this mixin to font icons.
 * You will likely include this
 * in `:before` pseudo elements.
 */
/**
* Include this to add max-width and vertical spacing to a block of elements.
* Use on elements that group multiple elements together.
*
*/
/**
 * Apply this mixin to elements you
 * want to be a block element at 100% width
 * Used for card modifier to override specified widths.
 */
/**
 * Include this in elements that surround content
 * in a modal. Mainly responsible for padding
 * and white bg.
 */
/*
 * Image path variable
 */
/*
 * Images
 */
/*------------------------------------*    L(LAYOUT)
\*------------------------------------*/
/**
 * Layout objects are the building blocks of the application UI (Literally).
 * these layout mechanisms allow for standalone scrollable sections.
 *
 *  <div class="l__row">
 *    <div class="l__block">
 *      <div class="l__content">
 *
 *      <!-- Content goes here -->
 *
 *      </div>
 *    </div>
 *  </div>
 *
 * @block l(ayout)
 */
.l {
  /*
   * Used to wrap entire zones of rows and blocks and make
   * them scrollable.
   *
   * @element frame
   */
  /*
   * Used to wrap the container to allow it to span.
   *
   * @element wrapper
   */
  /*
   * By default, all grids stretch the full width and
   * height available. However, it's possible to wrap a grid's
   * content in a container with a maximum width.
   *
   * @element container
   */
  /*
   * By default a row spans the page.
   * By default the contents of a row span horizontally.
   * Using a modifier "--vertical" will span items vertically.
   * A row can contain infinite about of items.
   *
   * @element row
   */
  /*
   * A block is to position/contain individual blocks of information
   * within a row. As with a row they are horizontally laid out
   * by default and be changed using a modifier.
   *
   * @element block
   */
  /*
   * The content element wraps content of a block and is
   * vertically stacks content.
   *
   * @element content
   */
  /*///// PARENT LEVEL ELEMENTS
   *
   * Parent level elements go on the same tag as a row.
   * Ex. <div class="l__row l__two-col">
   *
   */
  /*
   * A parent level class that combines short and long
   * modifiers to make a 3/4 layout w/ breakdown.
   *
   * @element three-quater-right
   */
  /*
   * A parent level class that combines short and long
   * modifiers to make a 3/4 layout w/ breakdown.
   *
   * @element three-quater-left
   */
  /*
   * The two column element says it all. This
   * parent level element lays out an infinite number of divs
   * in rows of two.
   *
   * @element two-col
   */
  /*
   * The three column element says it all. This
   * parent level element lays out an infinite number of divs
   * in rows of three.
   *
   * @element three-col
   */
  /*
   * Used for display purposes
   */ }
  .l__frame {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: 100vh;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0; }
  .l__wrapper {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1; }
  .l__container {
    /* Display and box model */
    max-width: 75rem;
    margin: 0 auto;
    padding-bottom: 5.625rem; }
    .l__container--no-pad {
      /* Display and box model */
      padding-bottom: 0; }
  .l__row {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: auto !important;
    /*
     * @modifier padding
     * @for row
     */
    /*
     * @modifier footer
     * @for row
     */
    /*
     * Orients contents of a row vertically
     *
     * @modifier vertical
     * @for row
     */
    /*
     * By default rows take up avaiable space on screen
     * The shrink modifier allows you to define only the space needed
     * by an element.
     *
     * @modifier shrink
     * @for block
     */
    /*
     * Removes -webkit-overflow-scroll.
     *
     * @modifier overflow
     * @for block
     */ }
    .l__row--padding {
      /* Display and box model */
      padding: 0.9375rem; }
    .l__row--footer {
      /* Display and box model */
      margin-bottom: 4.75rem; }
    .l__row--vertical {
      /* Display and box model */
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
      -ms-flex-align: stretch;
          -ms-grid-row-align: stretch;
          align-items: stretch; }
    .l__row--shrink {
      /* Display and box model */
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      overflow: visible; }
    .l__row--overflow {
      -webkit-overflow-scrolling: auto; }
  .l__block {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /*
     * @modifier padding
     * @for block
     */
    /*
     * Orients contents of a block vertically
     *
     * @modifier vertical
     * @for block
     */
    /*
     * By default rows take up avaiable space on screen
     * The shrink modifier allows you to define only the space needed
     * by an element.
     *
     * @modifier shrink
     * @for block
     */
    /*
     * The expand modifier returns the block back to it's original state.
     * by an element.
     *
     * @modifier expand
     * @for block
     */
    /*
     * @modifier short
     * @for block
     */
    /*
     * @modifier long
     * @for block
     */
    /*
     * @modifier half
     * @for block
     */ }
    .l__block--padding {
      /* Display and box model */
      margin: 0.9375rem 0;
      padding: 0 0.9375rem; }
    .l__block--vertical {
      /* Display and box model */
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
      -ms-flex-align: stretch;
          -ms-grid-row-align: stretch;
          align-items: stretch; }
    .l__block--shrink {
      /* Display and box model */
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      overflow: visible; }
    .l__block--expand {
      /* Display and box model */
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }
    .l__block--short, .l__three-quarter-right > .l__block:first-child,
    .l__three-quarter-right > .portal-block:first-child, .l__three-quarter-left > .l__block:last-child,
    .l__three-quarter-left > .portal-block:last-child {
      /* Display and box model */
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
      @media only screen and (min-width: 46.0625em) {
        .l__block--short, .l__three-quarter-right > .l__block:first-child,
        .l__three-quarter-right > .portal-block:first-child, .l__three-quarter-left > .l__block:last-child,
        .l__three-quarter-left > .portal-block:last-child {
          -ms-flex: 0 0 33.33333%;
              flex: 0 0 33.33333%;
          max-width: 33.33333%; } }
      @media only screen and (min-width: 65em) {
        .l__block--short, .l__three-quarter-right > .l__block:first-child,
        .l__three-quarter-right > .portal-block:first-child, .l__three-quarter-left > .l__block:last-child,
        .l__three-quarter-left > .portal-block:last-child {
          -ms-flex: 0 0 25%;
              flex: 0 0 25%;
          max-width: 25%; } }
    .l__block--long, .l__three-quarter-right > .l__block:last-child,
    .l__three-quarter-right > .portal-block:last-child, .l__three-quarter-left > .l__block:first-child,
    .l__three-quarter-left > .portal-block:first-child {
      /* Display and box model */
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
      @media only screen and (min-width: 46.0625em) {
        .l__block--long, .l__three-quarter-right > .l__block:last-child,
        .l__three-quarter-right > .portal-block:last-child, .l__three-quarter-left > .l__block:first-child,
        .l__three-quarter-left > .portal-block:first-child {
          -ms-flex: 0 0 66.66667%;
              flex: 0 0 66.66667%;
          max-width: 66.66667%; } }
      @media only screen and (min-width: 65em) {
        .l__block--long, .l__three-quarter-right > .l__block:last-child,
        .l__three-quarter-right > .portal-block:last-child, .l__three-quarter-left > .l__block:first-child,
        .l__three-quarter-left > .portal-block:first-child {
          -ms-flex: 0 0 75%;
              flex: 0 0 75%;
          max-width: 75%; } }
    .l__block--half {
      /* Display and box model */
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
      @media only screen and (min-width: 46.0625em) {
        .l__block--half {
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
          max-width: 50%; } }
    .l__block--theme--index {
      background: #F9F9F9; }
  .l__content {
    /* Display and box model */
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    /*
     * By default rows take up avaiable space on screen
     * The shrink modifier allows you to define only the space needed
     * by an element.
     *
     * @modifier shrink
     * @for content
     */
    /*
     * @modifier noscroll
     */ }
    .l__content--shrink {
      /* Display and box model */
      display: block;
      padding: 0 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      overflow: visible; }
    .l__content--noscroll {
      /* Display and box model */
      overflow: visible !important; }
    .l__content .form-footer {
      position: relative; }
  .l__two-col {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .l__two-col > li, .l__two-col > div, .l__two-col > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
    .l__two-col > .l__block,
    .l__two-col > .portal-block {
      padding-bottom: 0; }
    @media only screen and (min-width: 46.0625em) {
      .l__two-col {
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        overflow: visible;
        list-style-type: none; }
        .l__two-col > li, .l__two-col > div, .l__two-col > section {
          padding: 0 1rem 1rem;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
          max-width: 50%; } }
  .l__three-col {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .l__three-col > li, .l__three-col > div, .l__three-col > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
    .l__three-col > .l__block,
    .l__three-col > .portal-block {
      padding-bottom: 0; }
    @media only screen and (min-width: 46.0625em) {
      .l__three-col {
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        overflow: visible;
        list-style-type: none; }
        .l__three-col > li, .l__three-col > div, .l__three-col > section {
          padding: 0 1rem 1rem;
          -ms-flex: 0 0 33.33333%;
              flex: 0 0 33.33333%;
          max-width: 33.33333%; } }
  .l--display .l__row {
    /* Appearance */
    background: #abe1c1; }
  .l--display .l__block {
    /* Display and box model */
    margin: 0.9375rem 0;
    padding: 0 0.9375rem;
    /* Appearance */
    background: rgba(68, 68, 68, 0.1); }
  .l--display .l__content {
    /* Display and box model */
    -ms-flex-pack: center;
        justify-content: center;
    /* Appearance */
    background: rgba(68, 68, 68, 0.5); }
  .l--display .l__three-quater-left {
    /* Appearance */
    background: #fee2a9; }
  .l--display .l__three-quater-right {
    /* Appearance */
    background: #fee2a9; }
  .l--display .l__two-col {
    /* Appearance */
    background: #fee2a9; }
  .l--display .l__three-col {
    /* Appearance */
    background: #fee2a9; }

/*------------------------------------*    X(LAYOUT)
\*------------------------------------*/
/**
 * Layout objects are the building blocks of Portal Builder (Literally).
  *
 *  <div class="x__row">
 *    <div class="x__block">
 *      <div class="x__content">
 *
 *      <!-- Content goes here -->
 *
 *      </div>
 *    </div>
 *  </div>
 *
 * @block x(x-layout)
 */
.x {
  /*
   * By default, all grids stretch the full width and
   * height available. However, it's possible to wrap a grid's
   * content in a container with a maximum width.
   *
   * @element container
   */
  /*
   * By default a row spans the page.
   * By default the contents of a row span horizontally.
   * Using a modifier "--vertical" will span items vertically.
   * A row can contain infinite about of items.
   *
   * @element row
   */
  /*
   * A block is to position/contain individual blocks of information
   * within a row. As with a row they are horizontally laid out
   * by default and be changed using a modifier.
   *
   * @element block
   */
  /*
   * The content element wraps content of a block and is
   * vertically stacks content.
   *
   * @element content
   */
  /*///// PARENT LEVEL ELEMENTS
   *
   * Parent level elements go on the same tag as a row.
   * Ex. <div class="l__row l__two-col">
   *
   */
  /*
   * A parent level class that combines short and long
   * modifiers to make a 3/4 layout w/ breakdown.
   *
   * @element three-quater-right
   */
  /*
   * A parent level class that combines short and long
   * modifiers to make a 3/4 layout w/ breakdown.
   *
   * @element three-quater-left
   */
  /*
   * The two column element says it all. This
   * parent level element lays out an infinite number of divs
   * in rows of two.
   *
   * @element two-col
   */
  /*
   * The three column element says it all. This
   * parent level element lays out an infinite number of divs
   * in rows of three.
   *
   * @element three-col
   */
  /*
   * Used for display purposes
   */ }
  .x__container {
    /* Display and box model */
    max-width: 75rem;
    margin: 0 auto; }
  .x__row {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
  .x__block {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0.625rem;
    /* Appearance */
    background: #ffffff;
    border: dashed 1px #D5D5D5;
    /*
     * Active state
     *
     * @modifier active
     * @for block
     */
    /*
     * Style used when an advanced widget w/o display
     * is added to a block.
     *
     * @modifier advanced widget
     * @for block
     */
    /*
     * @modifier top
     * @propert pad
     * @for block
     */
    /*
     * @modifier transparent
     * @propert style
     * @for block
     */
    /*
     * @modifier short
     * @for block
     */
    /*
     * @modifier long
     * @for block
     */
    /*
     * @modifier split
     * @for block
     */ }
    .x__block--active {
      /* Appearance */
      border: solid 5px #186ca6;
      color: #186ca6; }
      .x__block--active .blank-slate__title {
        /* Appearance */
        color: #186ca6; }
    .x__block--advanced-widget {
      /* Appearance */
      background-image: linear-gradient(-180deg, purple 0%, #670067 100%);
      color: #ffffff; }
      .x__block--advanced-widget .blank-slate__title {
        /* Appearance */
        color: white; }
    .x__block--pad--top {
      /* Display and box model */
      margin-top: 1.25rem; }
    .x__block--style--transparent {
      /* Appearance */
      background: transparent;
      border: none; }
    .x__block--short, .x__three-quarter-right > .x__block:first-child, .x__three-quarter-left > .x__block:last-child {
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%;
      /*12*/ }
      @media only screen and (min-width: 46.0625em) {
        .x__block--short, .x__three-quarter-right > .x__block:first-child, .x__three-quarter-left > .x__block:last-child {
          -ms-flex: 0 0 33.33333%;
              flex: 0 0 33.33333%;
          max-width: 33.33333%;
          /*3*/ } }
      @media only screen and (min-width: 65em) {
        .x__block--short, .x__three-quarter-right > .x__block:first-child, .x__three-quarter-left > .x__block:last-child {
          /* Display and box model */
          -ms-flex: 0 0 25%;
              flex: 0 0 25%;
          max-width: 25%; } }
    .x__block--long, .x__three-quarter-right > .x__block:last-child, .x__three-quarter-left > .x__block:first-child {
      /* Display and box model */
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%;
      /*12*/
      overflow: visible !important; }
      @media only screen and (min-width: 46.0625em) {
        .x__block--long, .x__three-quarter-right > .x__block:last-child, .x__three-quarter-left > .x__block:first-child {
          -ms-flex: 0 0 66.66667%;
              flex: 0 0 66.66667%;
          max-width: 66.66667%;
          /*9*/ } }
      @media only screen and (min-width: 65em) {
        .x__block--long, .x__three-quarter-right > .x__block:last-child, .x__three-quarter-left > .x__block:first-child {
          -ms-flex: 0 0 75%;
              flex: 0 0 75%;
          max-width: 75%;
          /*8*/ } }
    .x__block--half {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      height: auto;
      position: relative;
      overflow: hidden;
      backface-visibility: hidden;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -ms-flex-align: stretch;
          align-items: stretch;
      -ms-flex-pack: start;
          justify-content: flex-start;
      -ms-flex-order: 0;
          order: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar; }
      @media only screen and (min-width: 46.0625em) {
        .x__block--half {
          display: -ms-flexbox;
          display: flex;
          height: auto;
          position: relative;
          overflow: hidden;
          backface-visibility: hidden;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
          max-width: 50%;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap;
          -ms-flex-align: stretch;
              align-items: stretch;
          -ms-flex-pack: start;
              justify-content: flex-start;
          -ms-flex-order: 0;
              order: 0;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          -ms-overflow-style: -ms-autohiding-scrollbar; } }
  .x__content {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    -ms-flex-pack: center;
        justify-content: center;
    padding: 1.25rem;
    /* Appearance */
    word-break: break-word;
    /*
     * Removes padding from element.
     * Ex. Persistant blocks in Canvas area.
     *
     * @modifier no-pad
     */ }
    .x__content--no-pad {
      /* Display and box model */
      padding: 0; }
  .x__three-quarter-right > .x__block {
    /* Display and box model */
    margin-bottom: 0.9375rem; }
  .x__three-quarter-left > .x__block {
    /* Display and box model */
    margin-bottom: 0.9375rem; }
  .x__two-col {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .x__two-col > li, .x__two-col > div, .x__two-col > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
    .x__two-col .x__block {
      padding-bottom: 0; }
    @media only screen and (min-width: 46.0625em) {
      .x__two-col {
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        overflow: visible;
        list-style-type: none; }
        .x__two-col > li, .x__two-col > div, .x__two-col > section {
          padding: 0 1rem 1rem;
          -ms-flex: 0 0 50%;
              flex: 0 0 50%;
          max-width: 50%; } }
  .x__three-col {
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    overflow: visible;
    list-style-type: none; }
    .x__three-col > li, .x__three-col > div, .x__three-col > section {
      padding: 0 1rem 1rem;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
    .x__three-col .x__block {
      padding-bottom: 0; }
    @media only screen and (min-width: 46.0625em) {
      .x__three-col {
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        overflow: visible;
        list-style-type: none; }
        .x__three-col > li, .x__three-col > div, .x__three-col > section {
          padding: 0 1rem 1rem;
          -ms-flex: 0 0 33.33333%;
              flex: 0 0 33.33333%;
          max-width: 33.33333%; } }
  .x--display .x__row {
    /* Appearance */
    background: #abe1c1; }
  .x--display .x__block {
    /* Display and box model */
    margin: 0.9375rem 0;
    padding: 0 0.9375rem;
    /* Appearance */
    background: rgba(68, 68, 68, 0.1); }
  .x--display .x__content {
    /* Display and box model */
    -ms-flex-pack: center;
        justify-content: center;
    /* Appearance */
    background: rgba(68, 68, 68, 0.5); }
  .x--display .x__three-quater-left {
    /* Appearance */
    background: #fee2a9; }
  .x--display .x__three-quater-right {
    /* Appearance */
    background: #fee2a9; }
  .x--display .x__two-col {
    /* Appearance */
    background: #fee2a9; }
  .x--display .x__three-col {
    /* Appearance */
    background: #fee2a9; }

/*------------------------------------*    ACCORDION
\*------------------------------------*/
/**
 * Override styling for ZF accordion.
 *
 * @block accordion
 */
.accordion {
  /* Appearance */
  border: none;
  /*
   * @element list-item
   */
  /*
   * @element header
   */
  /*
   * @element list-action
   */
  /*
   * Adapts accordion style for common sidebar usage.
   *
   * @modifer sidebar
   */
  /*
   * Adapts accordion style for common portal sidebar usage.
   *
   * @modifer sidebar-portal
   */ }
  .accordion__list-item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-bottom: 0.625rem;
    /* Appearance */
    color: #444444;
    cursor: pointer;
    line-height: 1.3em;
    /*
     * @modifier selected
     * @property is
     * @element list-item
     */
    /*
     * @modifier action
     * @element list-item
     */ }
    .accordion__list-item--is--selected {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal;
      color: #444444; }
    .accordion__list-item--action {
      /* Appearance */
      color: #444444;
      text-decoration: underline; }
  .accordion__header {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding: 1.25rem 0;
    padding-top: 0; }
  .accordion__list-action {
    /* Appearance */
    color: #444444; }
  .accordion--sidebar {
    /* Appearance */
    background: transparent;
    border-top: solid 1px #D5D5D5; }
    .accordion--sidebar .accordion-item--is-viewing .accordion-title-action {
      color: #186ca6; }
    .accordion--sidebar .accordion-title-group {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      width: 100%; }
    .accordion--sidebar .accordion-title {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      padding: 0.9375rem 0;
      width: 100%;
      /* Appearance */
      color: #444444;
      text-transform: uppercase;
      background: transparent; }
      .accordion--sidebar .accordion-title:before {
        /* Display and box model */
        position: relative;
        display: inline-block;
        /** Appearance */
        font-family: "x-font";
        font-style: normal;
        font-weight: normal;
        speak: none;
        text-decoration: inherit;
        text-align: center;
        text-transform: none;
        font-variant: normal;
        text-transform: none;
        line-height: 1px;
        -webkit-text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        content: "";
        font-size: 0.6875rem;
        margin-right: 1.25rem;
        -ms-flex: 1;
            flex: 1;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: end;
            justify-content: flex-end; }
    .accordion--sidebar .accordion-title-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* Display and box model */
      -ms-flex: 3;
          flex: 3;
      /* Appearance */
      color: #444444;
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal; }
    .accordion--sidebar .accordion-title-action {
      /* Display and box model */
      -ms-flex: 1;
          flex: 1;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end;
      width: 100%;
      /* Appearance */
      font-size: 0.9375rem;
      color: #444444;
      /*
       * @modifier active
       * @for accordion-action
       */ }
      .accordion--sidebar .accordion-title-action--is-active {
        /* Appearance */
        color: #186ca6; }
    .accordion--sidebar .accordion-content {
      /* Display and box model */
      padding: 0; }
    .accordion--sidebar .is-active .accordion-title:before {
      content: "";
      color: #444444; }
    .accordion--sidebar .is-active .accordion-title-text {
      color: #444444; }
    .accordion--sidebar .is-active .accordion-content {
      padding-bottom: 1.25rem; }
  .accordion--sidebar-portal {
    /* Appearance */
    background: transparent;
    border-top: solid 1px #D5D5D5; }
    .accordion--sidebar-portal .accordion-title {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      padding: 0.9375rem;
      padding-left: 0;
      width: 100%;
      /* Appearance */
      color: #444444;
      text-transform: uppercase;
      background: transparent; }
      .accordion--sidebar-portal .accordion-title:after {
        /* Display and box model */
        position: relative;
        display: inline-block;
        /** Appearance */
        font-family: "x-font";
        font-style: normal;
        font-weight: normal;
        speak: none;
        text-decoration: inherit;
        text-align: center;
        text-transform: none;
        font-variant: normal;
        text-transform: none;
        line-height: 1px;
        -webkit-text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        content: "";
        font-size: 0.6875rem;
        -ms-flex: 1;
            flex: 1;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: end;
            justify-content: flex-end; }
    .accordion--sidebar-portal .accordion-title-group {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      width: 100%; }
    .accordion--sidebar-portal .accordion-title-text {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex: 2;
          flex: 2;
      /* Appearance */
      color: #444444;
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal; }
    .accordion--sidebar-portal .accordion-title-action {
      /* Display and box model */
      -ms-flex: 1;
          flex: 1;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end;
      width: 100%;
      /* Appearance */
      font-size: 0.9375rem;
      color: #444444;
      /*
       * @modifier active
       * @for accordion-action
       */ }
      .accordion--sidebar-portal .accordion-title-action--active {
        /* Appearance */
        color: #186ca6; }
    .accordion--sidebar-portal .accordion-content {
      /* Display and box model */
      padding: 0; }
    .accordion--sidebar-portal .is-active .accordion-title:after {
      content: "";
      color: #444444; }
    .accordion--sidebar-portal .is-active .accordion-title-group .icon {
      color: #444444; }
    .accordion--sidebar-portal .is-active .accordion-title-text {
      color: #444444; }
    .accordion--sidebar-portal .is-active .accordion-content {
      padding-bottom: 1.25rem; }

/*------------------------------------*    AS-SORTABLE
    \*------------------------------------*/
/**
 *  Styles drag-n-drop interaction
 *
 *
 * @block as-sortable
 */
.as-sortable-item {
  /* Display and box model */
  display: block;
  /* Appearance */
  -ms-touch-action: none;
      touch-action: none;
  /* to disable context menu on iOS devices */
  -webkit-touch-callout: none; }

.as-sortable-placeholder {
  /* Display and box model */
  display: block;
  /* Appearance */
  background: #fff3dc; }

.as-sortable-item-handle {
  /* Appearance */
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab; }

.as-sortable-drag {
  /* Display and box model */
  position: absolute;
  /* Appearance */
  pointer-events: none;
  z-index: 9999; }

.as-sortable-dragging {
  /* Display and box model */
  transform: scale(1.1);
  /* Appearance */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.1); }

.as-sortable-hidden {
  /* Display and box model */
  display: none !important; }

.as-sortable-un-selectable {
  /* Appearance */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

/*------------------------------------*    OFF-CANVAS
\*------------------------------------*/
/**
 * Override styling for ZF off-canvas menu.
 *
 * @block off-canvas
 */
.off-canvas {
  /* Appearance */
  background: #F7F7F7;
  border-top: solid 1px #D5D5D5;
  /*
   * Overrides ZF default bottom panel
   */ }
  .off-canvas.bottom {
    /* Display and box model */
    height: 100%; }

/*
 SIDEBAR
*/
.sidebar {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  height: auto;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* Appearance */
  background: #F7F7F7;
  border-left: solid 1px #D5D5D5;
  /*
   * Container element for sidebar
   *
   * @element content
   */
  /*
   * Contains the button-group that switchs
   * between Sidebar sections.
   *
   * @element header
   */
  /*
   *
   * @element footer
   */
  /*
   * Wraps groups of information within
   * Sidebar
   *
   * @element item
   */
  /*
   * @element list-item
   */
  /*
   * @element item-group
   */
  /*
   * @element label
   */
  /*
   * @element label
   */
  /*
   * @element item-footer
   */
  /*
   * Wraps buttons, and other
   * actions elements within the Sidebar
   *
   * @element action
   */
  /*
    * @element list-item
    */ }
  .sidebar__content {
    /* Display and box model */
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    padding-bottom: 6.25rem; }
  .sidebar__header {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    overflow: visible;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex-pack: center;
        justify-content: center;
    height: 3.75rem;
    padding: 0 1.25rem; }
  .sidebar__footer {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    overflow: visible;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex-pack: end;
        justify-content: flex-end;
    padding: 1.875rem;
    padding-bottom: 0; }
  .sidebar__item {
    /* Display and box model */
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    overflow: visible;
    margin: 1.25rem;
    margin-top: 0;
    /*
     * Removes padding from Sidebar Item
     *
     * @element item
     */
    /*
     * Removes padding from Sidebar Item
     *
     * @element item
     */ }
    .sidebar__item--no-pad {
      margin: 0; }
    .sidebar__item--no-pad-bottom {
      margin-bottom: 0; }
  .sidebar__list-item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-bottom: 0.625rem;
    /* Appearance */
    color: #444444;
    /*
     * @modifier selected
     * @property is
     * @element list-item
     */
    /*
     * @modifier action
     * @element list-item
     */ }
    .sidebar__list-item--is--selected {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal;
      color: #444444; }
    .sidebar__list-item--action {
      /* Appearance */
      color: #444444;
      text-decoration: underline; }
  .sidebar__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Appearance */
    color: #444444; }
  .sidebar__copy {
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    font-size: 0.8125rem;
    line-height: 1.4em; }
  .sidebar__item-footer {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    margin-top: 1.875rem;
    padding-top: 1.25rem;
    /* Appearance */
    border-top: solid 1px #D5D5D5; }
  .sidebar__button {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    margin-right: 0.625rem; }
    .sidebar__button .button {
      /* Display and box model */
      max-width: 100%; }
    .sidebar__button:last-child {
      /* Display and box model */
      margin-right: 0; }
  .sidebar__action {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
    max-width: 41.66667%;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    margin: 0.625rem; }
  .sidebar__list-item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    padding-bottom: 0.625rem;
    /* Appearance */
    color: #444444;
    /*
     * @modifier selected
     * @property is
     * @element list-item
     */
    /*
     * @modifier action
     * @element list-item
     */ }
    .sidebar__list-item--is--selected {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal;
      color: #444444; }
    .sidebar__list-item--action {
      /* Appearance */
      color: #444444;
      text-decoration: underline; }
  @media only screen and (min-width: 46.0625em) {
    .sidebar {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      height: auto;
      position: relative;
      overflow: hidden;
      backface-visibility: hidden;
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
      max-width: 33.33333%;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -ms-flex-align: stretch;
          align-items: stretch;
      -ms-flex-pack: start;
          justify-content: flex-start;
      -ms-flex-order: 0;
          order: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      max-width: 20rem; } }
  @media only screen and (min-width: 65em) {
    .sidebar {
      /* Display and box model */
      max-width: 26.25rem;
      /*
     * Contains the button-group that switchs
     * between Sidebar sections.
     *
     * @element header
     */
      /*
     * Wraps groups of information within
     * Sidebar
     *
     * @element item
     */ }
      .sidebar__header {
        /* Display and box model */
        padding: 0 1.875rem; }
      .sidebar__item {
        /* Display and box model */
        margin: 1.875rem;
        margin-top: 0;
        /*
       * Removes padding from Sidebar Item
       *
       * @element item
       */ }
        .sidebar__item--no-pad-bottom {
          margin-bottom: 0; } }

/*------------------------------------*    ACTION OPTIONS
\*------------------------------------*/
/**
 * List of actions for the user to pick from.
 * Clicking on one item in this list should trigger
 * a specific action.
 *
 *
 * @block action-options
 */
.action-options {
  /**
   * Adds large margin from top
   *
   * @modifier pad-top
   */
  /**
   * Used when a action option is within a form.
   *
   * @modifier inline
   */
  /**
   * Removes padding from sides
   *
   * @modifier no-pad
   */
  /**
   * The input's label. Use a `<label>` tag.
   *
   * @element label
   */
  /**
   * Indicates that an input is required.
   * Place this after the label. Make sure
   * to use an inline element like `<span>`
   *
   * @element required
   */
  /**
   * The links/buttons for the user to click on.
   * There can be more than one item.
   *
   * @element item
   */ }
  .action-options--pad-top {
    margin-top: 1.25rem; }
  .action-options--inline {
    /* Display and box model */
    padding: 0 1.25rem;
    margin-top: 0.3125rem; }
    .action-options--inline .action-options__title {
      /* Display and box model */
      padding: 0; }
    .action-options--inline .action-options__item {
      /* Display and box model */
      padding: 0 0.75rem;
      min-height: 2.8125rem;
      /* Appearance */
      border: solid 1px #D5D5D5;
      border-radius: 0.1875rem;
      background-position: 98% 50%; }
    .action-options--inline .action-options__label {
      /* Display and box model */
      padding-left: 0;
      padding-right: 0; }
  .action-options--no-pad {
    /* Display and box model */
    padding: 0; }
  .action-options__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    margin-bottom: .35em;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    /* Appearance */
    line-height: 1.6em; }
  .action-options__required {
    /* Display and box model */
    margin-left: .35em;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #FF6800; }
  .action-options__item {
    /* Display and box mode */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: 1.25rem;
    /* Appearance */
    -webkit-appearance: none;
    cursor: pointer;
    background: #ffffff url(../img/icon-arrow-right.svg) 94% 50% no-repeat;
    background-size: 0.6875rem;
    border-top: solid 1px #D5D5D5;
    border-bottom: solid 1px #D5D5D5;
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #186ca6;
    font-size: 0.9375rem;
    text-align: left;
    text-decoration: none;
    /**
     * Removes Icon
     *
     * @modifier none
     * @property icon
     * @for item
     */
    /**
     * Replaces Chevron w/ Add
     *
     * @modifier add
     * @property icon
     * @for item
     */ }
    .action-options__item:focus, .action-options__item:active {
      border-top: solid 1px #186ca6;
      border-bottom: solid 1px #186ca6;
      border-color: #186ca6; }
    .action-options__item--icon-none {
      /* Appearance */
      background: none; }
    .action-options__item--icon-add {
      background: #ffffff url(../img/icon-add.svg) 94% 50% no-repeat;
      background-size: 1.1875rem; }

/*--------------------ALERT BLOCK
\*------------------------------------*/
/**
 * @block alert-block
 */
.alert-block {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  margin-top: 0;
  padding: 15px;
  /* Appearance */
  background: #444444;
  /*///// COLOR VALUE /////*/ }
  .alert-block--inline {
    /* Appearance */
    border-radius: 0.3125rem; }
  .alert-block__content {
    /* Display and box model */
    margin: 0 auto; }
  .alert-block__title {
    /* Appearance */
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2em; }
  .alert-block__copy {
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: #ffffff;
    text-align: center;
    line-height: 1.2em; }
  .alert-block--color--red {
    /* Appearance */
    background: #E74C3C; }
  .alert-block--color--green {
    /* Appearance */
    background: #1a6f43; }
  .alert-block--color--yellow {
    /* Appearance */
    background: #fdb72b; }

/*------------------------------------*   ACTIVITY MENU
\*------------------------------------*/
/**
 * activity menu listings
 *
 * @block activity-menu
 */
.activity-menu {
  margin: 0.625rem;
  /**
   * Wraps content within activity button.
   *
   * @element item
   */
  /**
   * Wraps content within activity button.
   *
   * @element content
   */
  /**
   * Styles Title
   *
   * @element title
   */
  /**
   * Styles Desription
   *
   * @element description
   */
  /**
   *
   *
   * @element figure
   */
  /**
     *
     *
     * @element figure
     */ }
  .activity-menu__item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: 0.625rem;
    margin-bottom: 0.625rem;
    /* Appearance */
    background: #ffffff;
    border: solid 1px #D5D5D5;
    border-radius: 0.375rem; }
    .activity-menu__item:last-child {
      margin-bottom: 1.25rem; }
    .activity-menu__item:hover {
      /* Appearance */
      cursor: pointer; }
  .activity-menu__content {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center; }
  .activity-menu__title {
    /* Display and box model */
    display: block;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    text-transform: uppercase;
    text-align: left; }
  .activity-menu__description {
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    text-align: left;
    line-height: 1.4em; }
  .activity-menu__figure {
    /* Display and box model */
    position: relative;
    display: inline-block;
    /** Appearance */
    font-family: "x-font";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    font-variant: normal;
    text-transform: none;
    line-height: 1px;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end;
    /* Appearance */
    color: #D5D5D5; }
    .activity-menu__figure:before {
      content: ""; }
  .activity-menu__figure {
    margin-right: 0.75rem; }

/*------------------------------------*   ACTIVITY POST
\*------------------------------------*/
/**
 *
 * @block activity-post
 */
.activity-post {
  /* Display and box model */
  display: block;
  padding-top: 1.875rem;
  /* Appearance */
  transition: .3s;
  /*
   * @element header
   */
  /*
   * @element message
   */
  /*
   * @element footer
   */
  /*
   * @element item
   */
  /*
   * @element title
   */
  /*
   * @element copy
   */
  /*
   * @element label
   */
  /*
   * @element link
   */
  /*
   * @element action
   */
  /**
   * Media query for min-width 1024px, xlarge screens up
   */
  /*
      * @element message
      */ }
  .activity-post:nth-of-type(even) {
    background: rgba(21, 138, 202, 0.05); }
  .activity-post:hover {
    /* Appearance */
    background: #fff3dc; }
  .activity-post__header {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    margin-bottom: 0.625rem;
    padding: 1.25rem;
    padding-top: 0; }
  .activity-post__message {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    margin: 15px 0;
    padding: 1.25rem;
    padding-top: 0; }
  .activity-post__footer {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    text-align: right;
    padding: 1.25rem;
    padding-top: 0; }
  .activity-post__item {
    /* Display and box model */
    margin-bottom: 0.625rem; }
    .activity-post__item--flex {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: baseline;
          align-items: baseline; }
  .activity-post__title {
    /* Display and box model */
    margin-bottom: 0.625rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: #444444; }
  .activity-post__copy {
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    line-height: 1.4em;
    color: #444444; }
  .activity-post__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Display and box model */
    margin-right: .35em;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal; }
  .activity-post__link {
    /* Appearance */
    color: #186ca6; }
  .activity-post__action {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    text-align: right; }
  .activity-post--flex {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: start;
        align-items: flex-start; }
  .activity-post__message {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    margin: 0; }

/*------------------------------------*   ACTIVITY POST GROUP
\*------------------------------------*/
/**
 *
 * @block activity-post-group
 */
.activity-post-group {
  /* Display and box model */
  margin: 1.875rem 1.25rem;
  margin-top: 0;
  /**
   * Media query for min-width 641px, medium screens up
   */
  /* Display and box model */
  margin: 1.25rem 1.875rem;
  margin-top: 0; }

/*------------------------------------*   ACTIVITY TAB
\*------------------------------------*/
/**
 * Apply this class to any element to transform it into a button.
 *
 * @block activity-tab
 */
.activity-tab {
  /* Display and box model */
  /*
    We are using flexbox to align text
    vertically and horizontally.
    <button> elements (vertically) center text
    automatically, but <a> elements don't.
  */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: columns;
      flex-direction: columns;
  /* Fixes display issue w/ Safari */
  display: -webkit-inline-box;
  /* align horizontally */
  -ms-flex-pack: center;
      justify-content: center;
  /* align vertically */
  -ms-flex-align: center;
      align-items: center;
  /* Display and box model */
  min-height: 2.8125rem;
  /*
      Fill the parent's height unless the
      parent is too big.
    */
  width: 100%;
  max-width: 10.625rem;
  min-width: 5.625rem;
  /* Appearance */
  font-size: 0.875rem;
  box-sizing: border-box;
  padding: 0;
  -webkit-appearance: none;
  /* Appearance */
  border: none;
  border-bottom: solid 1px #D5D5D5;
  background: transparent;
  color: #444444;
  -webkit-color: none;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
  font-weight: normal;
  /*
    TODO: We need an alternative for focus
    if we want to disable this.
  */
  outline: none;
  transition: .3s;
  /**
   * @action :hover
   * Related to: cursor position
   *
   * This is applied automatically when a user
   * hovers their mouse.
   */
  /**
   * Styles labels
   *
   * @element label
   */
  /*
   * Selection State
   */
  /** OTHER MODIFIERS */
  /**
   * Removes restrictions on button max width.
   * Using `&.button-flexible` selector
   * to override other size modifiers (specificity).
   * The reason this happened is because
   * this modifier modifies the same properties
   * as other complementary modifiers (not very common case).
   *
   * @modifier flexible
   */
  /**
   * Disabled buttons
   * Using double selector for specificity because
   * its properties overlap with complementary modifiers (color)
   *
   * @modifier disabled
   */ }
  .activity-tab:hover, .activity-tab:active {
    /* Appearance */
    border-bottom: solid 1px #1A304B; }
    .activity-tab:hover .activity-tab__label, .activity-tab:active .activity-tab__label {
      /* Appearance */
      color: #1A304B; }
    .activity-tab:hover .badge, .activity-tab:active .badge {
      background: #1A304B;
      border: solid 1px #1A304B; }
  .activity-tab__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Display and box model */
    display: block;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    /*
    *
    * @modifier white
    * property color
    * for label
    */ }
    .activity-tab__label--color--white {
      /* Appearance */
      color: #ffffff; }
  .activity-tab--selected {
    /* Appearance */
    border-bottom: solid 3px #186ca6; }
    .activity-tab--selected .activity-tab__label {
      /* Appearance */
      color: #186ca6; }
    .activity-tab--selected .badge {
      background: #186ca6;
      border-color: #186ca6; }
  .activity-tab.activity-tab--flexible {
    max-width: none;
    width: 100%; }
  .activity-tab.activity-tab--disabled {
    /* Appearance */
    color: #ffffff;
    background: #D5D5D5;
    border-color: #D5D5D5;
    box-shadow: none;
    pointer-events: none; }

/*------------------------------------*  ACTIVITY TAB GROUP
\*------------------------------------*/
/**
 * Groups buttons
 * Used to create radial switch
 *
 * @block activity-tab-group
 */
.activity-tab-group {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  margin: 0 0.9375rem;
  padding: 0;
  /* Adjust button styles within button-group */
  /**
   * Makes button element 100% width.
   *
   * @modifier flexible
   * @property flexible
   */
  /**Adapts for use in menus.
   *
   * @modifier menu
   */
  /**
   * Media query for min-width 1041px, med screens up
   */
  /* Display and box model */
  margin: 0.9375rem 1.875rem;
  /* Adjust button styles within button-group */
  /*
     * Adapts for use in menus.
     *
     * @modifier menu
     */ }
  .activity-tab-group .activity-tab {
    /* Display and box model */
    min-width: 3.125rem; }
  .activity-tab-group--flexible .activity-tab {
    /* Display and box model */
    width: 100%;
    max-width: 100%; }
  .activity-tab-group--menu {
    /* Display and box model */
    margin: 0.9375rem; }
  .activity-tab-group .activity-tab {
    /* Display and box model */
    min-width: 5rem; }
  .activity-tab-group--menu {
    /* Display and box model */
    margin: 0.9375rem;
    /**
       * Wraps content within activity button.
       *
       * @element content
       */ }
    .activity-tab-group--menu .activity-tab {
      /* Display and box model */
      width: 100%;
      min-width: 2.8125rem; }
    .activity-tab-group--menu .activity-tab__content {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center; }
    .activity-tab-group--menu .activity-tab__badge {
      /* Display and box model */
      margin-right: 0;
      margin-bottom: .25em;
      padding: 0; }
    .activity-tab-group--menu .activity-tab__label {
      /* Display and box model */
      max-width: 2.8125rem; }

/*------------------------------------*    BADGE
\*------------------------------------*/
/**
 * Circle icon containing a number.
 * Used with the alert button-icon
 * to indiciate the number of filters
 * applied.
 *
 *
 * @block badge
 */
.badge {
  /* Display and box model */
  display: inline-block;
  height: 0.9375rem;
  min-width: 0.9375rem;
  padding: 0 .25em;
  /* Appearance */
  /* center vertically */
  line-height: 1.5em;
  background: #444444;
  border: solid 1px #444444;
  color: #ffffff;
  font-size: 0.6875rem;
  text-align: center;
  font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
  font-weight: normal;
  border-radius: 3px;
  /*
   * Adds spacing for when a badge is the left
   * of a label
   *
   * @modifier left
   */
  /*
   * Adds spacing for when a badge is the top
   * of a label
   *
   * @modifier top
   */
  /*
   * Adds spacing for when a badge is the left
   * of a label
   *
   * @modifier left
   */ }
  .badge--left {
    /* Display and box model */
    margin-right: 1em; }
  .badge--top {
    /* Display and box model */
    margin-bottom: .35em; }
  .badge--small {
    /* Display and box model */
    font-size: 0.5625rem; }

/*------------------------------------*    BLANK SLATE
\*------------------------------------*/
/**
 * When there is no content to be displayed or content is not yet added.
 * Can have buttons, images, and other element that help decribe the state
 * and any action that can help move the user forward.
 *
 * Can be used to display a No activity found or Add Payment.
 *
 * @block blank-slate
 */
.blank-slate {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
  padding: 2.8125rem 0;
  width: 100%;
  /**
   * This is used when views are loading.
   *
   * @element loading
   */
  /**
   * Alternative card of overlay.
   *
   * @element loading-card
   */
  /**
   * This styles the title style for blank-slate-message.
   *
   * Can be standalone or as title with subtext.
   *
   * @element title
   */
  /**
   * This styles the text styling for blank-slate-message.
   *
   * Used for descriptive text.
   *
   * @element text
   */
  /**
   * This spaces and postions additional elements within a blank-slate message.
   *
   * Can wrap around elements such as buttons
   *
   * @element item
   */ }
  .blank-slate--loading {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /* Appearance */
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(0.1875rem); }
  .blank-slate--loading-card {
    /* Display and box model */
    padding: 1.875rem;
    /* Appearance */
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(0.1875rem);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius: 0.1875rem; }
  .blank-slate__title {
    /* Display and box model */
    min-width: to-rem(150px);
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-align: center;
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.2em;
    letter-spacing: .03em;
    color: #D5D5D5; }
  .blank-slate__text {
    /* Appearance */
    font-size: 0.8125rem;
    text-align: center;
    color: #444444;
    /**
     * Adds space to top
     *
     * @modifier pad-top
     * @for text
     */ }
    .blank-slate__text--pad-top {
      /* Display and box model */
      margin-top: 0.9375rem; }
  .blank-slate__item {
    /* Display and box model */
    margin-top: 0.625rem;
    /* Appearance */
    text-align: center;
    /**
      * Adds display: flex; to the item
      *
      * Ex. Used for bottom of indexes when
      * back-to-top button is displayed.
      *
      * @modifier flex
      * @for item
      */ }
    .blank-slate__item--flex {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center; }

/*------------------------------------*    BUTTON
\*------------------------------------*/
/**
 * Apply this class to any element to transform it into a button.
 *
 * The html element should preferrably be a `button` element to
 * get built-in features for free such as focus ability.
 *
 * @example
 *
 * ```html
 * <button class="button">My Button</button>
 * ```
 *
 * @block button
 */
.button {
  /* Display and box model */
  /*
    We are using flexbox to align text
    vertically and horizontally.
    <button> elements (vertically) center text
    automatically, but <a> elements don't.
  */
  display: inline-block;
  /* Display and box model */
  height: 2.8125rem;
  /*
      Fill the parent's height unless the
      parent is too big.
    */
  width: 100%;
  max-width: 10.625rem;
  min-width: 5.625rem;
  /* Appearance */
  font-size: 0.875rem;
  border-radius: 0.1875rem;
  box-sizing: border-box;
  padding: 0;
  -webkit-appearance: none;
  /* Appearance */
  border: solid 1px #444444;
  background: transparent;
  color: #444444;
  -webkit-color: none;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
  font-weight: normal;
  /*
    TODO: We need an alternative for focus
    if we want to disable this.
  */
  transition: 300ms;
  /**
   * @action :hover
   * Related to: cursor position
   *
   * This is applied automatically when a user
   * hovers their mouse.
   */
  /**
   * @action `:active`
   *
   * This is applied automatically when a user
   * clicks on the button (or focuses + ENTER).
   */
  /** COLOR MODIFIERS */
  /**
   * Apply this button to primay buttons
   * such as a "Save" button on a form.
   *
   * @modifier primary
   * @property color
   */
  /**
   *
   * @modifier orange
   * @property color
   */
  /**
   * Apply this button to primay buttons
   * such as a "Save" button on a form.
   *
   * @modifier gray
   * @property color
   */
  /**
   * Green buttons
   *
   * @modifier green
   * @property color
   */
  /**
   * Red buttons
   *
   * @modifier red
   * @property color
   */
  /**
   * Blue buttons
   *
   * @modifier blue
   * @property color
   */
  /**
   * Mint buttons
   *
   * @modifier mint
   * @property color
   */
  /**
   * Purple buttons
   *
   * @modifier purple
   * @property color
   */
  /**
   * White buttons
   *
   * @modifier white
   * @property color
   */
  /**
   * White-Mint buttons
   *
   * @modifier white-mint
   * @property color
   */
  /**
   * Wire buttons
   *
   * @modifier orange
   * @property wire
   */
  /**
   * Wire buttons
   *
   * @modifier red
   * @property wire
   */
  /**
   * White wire button
   *
   * @modifier white
   * @property wire
   */
  /**
   * Orange wire button
   *
   * @modifier orange
   * @property wire
   */
  /* SIZE MODIFIERS */
  /**
   * Apply this to a button that has an icon in place of text.
   *
   * @modifier icon
   * @property size
   */
  /**
   * @modifier micro
   * @property size
   */
  /**
   * @modifier extra-small
   * @property size
   */
  /**
   * Apply this to a button for small size.
   *
   * @modifier small
   * @property size
   */
  /**
   * Apply this to a button for medium size.
   *
   * @modifier medium
   * @property size
   */
  /**
   * Apply this to a medium button that needs
   * to be wider than the regular medium.
   */
  /**
   * Apply this to a button for extra large size.
   *
   * @modifier extra-large
   * @property size
   */
  /** OTHER MODIFIERS */
  /**
   * Removes restrictions on button max width.
   * Using `&.button-flexible` selector
   * to override other size modifiers (specificity).
   * The reason this happened is because
   * this modifier modifies the same properties
   * as other complementary modifiers (not very common case).
   *
   * @modifier flexible
   */
  /**
   * Removes restrictions on button max width.
   * Using `&.button-flexible` selector
   * to override other size modifiers (specificity).
   * The reason this happened is because
   * this modifier modifies the same properties
   * as other complementary modifiers (not very common case).
   *
   * @modifier flexible
   */
  /**
   * Gives the button a pill shape.
   * Use for Hide/Show buttons
   *
   * @modifier pill
   */
  /**
   * Extends the max-width for longer confirmation buttons.
   * Using `&.button-long-text` selector
   * to override other size modifiers (specificity).
   * The reason this happened is because
   * this modifier modifies the same properties
   * as other complementary modifiers (not very common case).
   *
   * @modifier long-text
   */
  /**
   * Selected buttons
   *
   * @modifier selected
   */
  /**
   * Disabled buttons
   * Using double selector for specificity because
   * its properties overlap with complementary modifiers (color)
   *
   * @modifier disabled
   */
  /**
   * Loading buttons
   * Using double selector for specificity because
   * its properties overlap with complementary modifiers (color)
   *
   * @modifier loading
   * @property operation
   */
  /**
   * Menu buttons
   * Used for closing menu
   *
   * @modifier button-menu
   */
  /**
   * Media query for print
   *
   * Hides buttons from print.
   */ }
  .button:hover {
    background: #444444;
    color: white; }
  .button:active *:focus {
    outline: none; }
  .button--color--primary {
    /* Appearance */
    background: #186ca6;
    border: solid 1px #186ca6;
    color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    /**
     * This is applied automatically when a user
     * hovers their mouse.
     *
     * @action :hover
     */ }
    .button--color--primary:hover {
      /* Appearance */
      background: #1b6496;
      border: solid 1px #1b6496; }
  .button--color--orange {
    /* Appearance */
    background: #FF6800;
    border: solid 1px #FF6800;
    color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    /**
     * This is applied automatically when a user
     * hovers their mouse.
     *
     * @action :hover
     */ }
    .button--color--orange:hover {
      /* Appearance */
      background: #993e00;
      border: solid 1px #993e00; }
  .button--color--gray {
    /* Appearance */
    background: #444444;
    border: solid 1px #444444;
    color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    /**
     * This is applied automatically when a user
     * hovers their mouse.
     *
     * @action :hover
     */ }
    .button--color--gray:hover {
      /* Appearance */
      background: #666666;
      border: solid 1px #666666; }
  .button--color--green, .button--color--green:focus {
    /* Appearance */
    color: #ffffff;
    background: #1a6f43;
    border: solid 1px #1a6f43;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
    .button--color--green:hover, .button--color--green:focus:hover {
      /* Appearance */
      background: #39a064; }
  .button--color--red, .button--color--red:focus {
    /* Appearance */
    color: #ffffff;
    background: #E74C3C;
    border: solid 1px #E74C3C; }
    .button--color--red:hover, .button--color--red:focus:hover {
      /* Appearance */
      background: #d62c1a; }
  .button--color--blue, .button--color--blue:focus {
    /* Appearance */
    color: #ffffff;
    background: #167ce3;
    border: solid 1px #167ce3; }
    .button--color--blue:hover, .button--color--blue:focus:hover {
      /* Appearance */
      background: #1163b5; }
  .button--color--mint, .button--color--mint:focus {
    /* Appearance */
    color: #ffffff;
    background: #1DD3AB;
    border: solid 1px #1DD3AB;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
    .button--color--mint:hover, .button--color--mint:focus:hover {
      /* Appearance */
      background: #17a687; }
  .button--color--purple, .button--color--purple:focus {
    /* Appearance */
    color: #ffffff;
    background: purple;
    border: solid 1px purple;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
    .button--color--purple:hover, .button--color--purple:focus:hover {
      /* Appearance */
      background: #4d004d; }
  .button--color--white, .button--color--white:focus {
    /* Appearance */
    color: #FF6800;
    background: #ffffff;
    border: solid 1px #ffffff; }
    .button--color--white:hover, .button--color--white:focus:hover {
      /* Appearance */
      opacity: .8;
      color: #FF6800;
      background: #ffffff; }
  .button--color--white-mint, .button--color--white-mint:focus {
    /* Appearance */
    color: #1DD3AB;
    background: #ffffff;
    border: solid 2px #ffffff; }
    .button--color--white-mint:hover, .button--color--white-mint:focus:hover {
      /* Appearance */
      opacity: .8;
      color: #1DD3AB;
      background: #ffffff; }
  .button--wire--blue {
    color: #186ca6;
    border: solid 1px #186ca6; }
    .button--wire--blue:hover {
      /* Appearance */
      color: #ffffff;
      background: #186ca6; }
  .button--wire--red {
    color: #E74C3C;
    border: solid 1px #E74C3C; }
    .button--wire--red:hover {
      /* Appearance */
      color: #ffffff;
      background: #E74C3C; }
  .button--wire--white {
    color: #ffffff;
    border: solid 2px #ffffff; }
    .button--wire--white:hover {
      background: #ffffff;
      color: #444444; }
  .button--wire--orange {
    color: #FF6800;
    border: solid 2px #FF6800; }
    .button--wire--orange:hover {
      background: #FF6800;
      color: #ffffff; }
  .button--size--icon {
    /* Display and box model */
    height: 1.6875rem;
    /* Appearance */
    font-size: 0.9375rem;
    line-height: 1em; }
  .button--size--micro {
    /* Display and box model */
    min-width: 0;
    max-width: none;
    height: 1.0625rem;
    width: auto;
    padding: 0 .5em;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.5625rem;
    letter-spacing: .03; }
  .button--size--extra-small {
    /* Display and box model */
    min-width: 0;
    max-width: none;
    height: 1.6875rem;
    width: auto;
    padding: 0 1em;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.5625rem;
    letter-spacing: .03; }
  .button--size--small {
    /* Display and box model */
    height: 1.6875rem;
    padding: 0 1em;
    /*
    We use max width so that the button
    would fit in small containers
    */
    min-width: 5.625rem;
    width: auto;
    max-width: 5.3125rem;
    /* Appearance */
    font-size: 0.6875rem;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal; }
  .button--size--medium {
    height: 2.25rem;
    /*
      We use max width so that the button
      would fit in small containers
    */
    max-width: 9.375rem;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal; }
  .button--size--medium-wide {
    /* Display and box model */
    height: 2.25rem;
    max-width: 13.4375rem;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal; }
  .button--size--extra-large {
    /* Display and box model */
    height: 3.3125rem;
    max-width: none;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .button.button--mobile {
      max-width: 100%;
      width: 100%; } }
  .button.button--flexible {
    max-width: none;
    width: 100%; }
  .button.button--pill {
    border-radius: 3.125rem; }
  .button.button--long-text {
    max-width: 18.75rem; }
  .button--selected, .button--selected:focus {
    /* Appearance */
    color: #ffffff;
    background: #167ce3;
    border: solid 1px #167ce3; }
    .button--selected:hover, .button--selected:focus:hover {
      /* Appearance */
      background: #1163b5; }
  .button.button--disabled, .button:disabled {
    /* Appearance */
    color: #ffffff;
    background: #D5D5D5;
    border-color: #D5D5D5;
    box-shadow: none;
    pointer-events: none; }
  .button.button--operation--loading {
    /* Appearance */
    background: #1a6f43;
    color: #ffffff;
    border-color: #1a6f43;
    background-image: linear-gradient(to left, transparent 0%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0.2) 100%);
    background-size: 100%;
    animation: button__animation-load 3s linear forwards infinite;
    pointer-events: none; }
  .button.button--menu {
    /* Appearance */
    border-radius: 0 0 0.1875rem 0.1875rem;
    box-shadow: none; }
  @media print {
    .button {
      display: none; } }

/**
 * Loading Button animation
 * This is used by `&.button-operation-loading`
 *
 * @animation button-loading
 */
@keyframes button__animation-load {
  0% {
    background-position: 0 0; }
  100% {
    background-position: 175px 0; } }

/*------------------------------------*    BUTTON ICON
\*------------------------------------*/
/**
 * Buttons made up of icons (no text). Examples include the activity icon button,
 * the add button (plus sign), etc.
 *
 * @block button-icon
 */
.button-icon {
  padding: 0;
  border: none;
  -webkit-appearance: none;
  background: transparent;
  -webkit-color: none;
  font-size: inherit;
  /* Display and box model */
  position: relative;
  display: inline-block;
  /** Appearance */
  font-family: "x-font";
  font-style: normal;
  font-weight: normal;
  speak: none;
  text-decoration: inherit;
  text-align: center;
  text-transform: none;
  font-variant: normal;
  text-transform: none;
  line-height: 1px;
  -webkit-text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Display and box model */
  display: inline-block;
  position: relative;
  width: 2.1875rem;
  height: 2.1875rem;
  /* center the icon vertically */
  line-height: 1em;
  /* Appearance */
  color: #444444;
  font-size: 2.1875rem;
  cursor: pointer;
  transition: .3s;
  /* MODIFIER: ICON */
  /**
   * Button that opens closes sidebar
   * in the X Builder UI
   *
   * @modifier sidebar
   * @property icon
   */
  /**
   *
   * @modifier play
   * @property icon
   */
  /**
   * Used to display right arrow.
   *
   * @modifier arrow-right
   * @property icon
   */
  /**
   * Used to display left arrow.
   *
   * @modifier arrow-left
   * @property icon
   */
  /**
   * Used to display ability to move
   *
   * @modifier move
   * @property icon
   */
  /**
   * Plus sign used to represent
   * an "Add" button.
   *
   * @modifier add
   * @property icon
   */
  /**
   * Close button
   *
   * @modifier close
   * @property icon
   */
  /**
   * Close in circle button
   *
   * @modifier close-knockout
   * @property icon
   */
  /**
   * Download button
   *
   * @modifier download
   * @property icon
   */
  /**
   * Tools button used in main navigation.
   *
   * @modifier tools
   * @property icon
   */
  /**
   * Back button used in main navigation/View Controls.
   *
   * @modifier back
   * @property icon
   */
  /**
   * Hamburger Menu
   *
   * @modifier nav
   * @property icon
   */
  /**
   * Help button used in main navigation.
   *
   * @modifier help
   * @property icon
   */
  /**
   * Tools button used in main navigation/View Controls
   *
   * @modifier down
   * @property icon
   */
  /**
   * Icon button used to show more options/actions.
   *
   * @modifier more
   * @property icon
   */
  /**
   * Icon button used to show remove action.
   *
   * @modifier remove
   * @property icon
   */
  /**
   * Icon button used to show add-action.
   *
   * @modifier add-knockout
   * @property icon
   */
  /**
   * Icon button used to show add-action.
   *
   * @modifier add-knockout
   * @property icon
   */
  /**
   * Icon button used to show/hide profile panel.
   *
   * @modifier profile
   * @property icon
   */
  /**
   * Activity Icon used in View Controls
   *
   * @modifier activity
   * @property icon
   */
  /**
   * Notfication Icon used in View Controls
   *
   * @modifier alert
   * @property icon
   */
  /**
   * Filter Icon
   *
   * @modifier filter
   * @property icon
   */
  /**
   * A button containing an avatar image.
   *
   * @modifier avatar
   * @property icon
   */
  /*
   * Vertical ellipsis
   *
   * @element ellipsis-vert
   * @property icon
   */
  /**
   * Circle to the top left of the button
   * icon containing a number.
   * Used with the alert button-icon
   * to indiciate the number of filters
   * applied.
   *
   * @element badge
   */
  /**
   * When the button is active. Used
   * in the main navigation when a sub-nav
   * is opened.
   *
   * @modifier active
   */
  /**
   *
   * @modifier pad-left
   * @property size
   */
  /**
   *
   * @modifier pad-right
   * @property size
   */
  /**
   *
   * @modifier extra-small
   * @property size
   */
  /* Display and box model */
  width: 2.1875rem;
  height: 2.1875rem;
  /* Appearance */
  font-size: 2.1875rem;
  /**
     * Tools button used in main navigation/View Controls
     *
     * @modifier down
     * @property icon
     */
  /**
     *
     * @modifier extra-small
     * @property size
     */
  /* MODIFIER: COLOR */
  /**
   * Set the color to white instead of the
   * default $med-gray. Used in the header
   * for example.
   *
   * @modifier white
   * @property color
   */
  /**
   * Set the color to orange instead of the
   * default $brand. Used in the header
   * for example.
   *
   * @modifier orange
   * @property color
   */ }
  .button-icon--icon--sidebar:before {
    /* Appearance */
    content: ""; }
  .button-icon--icon--play:before {
    /* Appearance */
    content: ""; }
  .button-icon--icon--arrow-right:before {
    /* Appearance */
    content: ""; }
  .button-icon--icon--arrow-left:before {
    /* Appearance */
    content: ""; }
  .button-icon--icon--move:before {
    /* Appearance */
    content: ""; }
  .button-icon--icon--add:before {
    /* Appearance */
    content: ""; }
  .button-icon--icon--close:before {
    content: ""; }
  .button-icon--icon--close-knockout:before {
    content: ""; }
  .button-icon--icon--download {
    /* Appearance */
    line-height: 1.6em; }
    .button-icon--icon--download:before {
      content: ""; }
  .button-icon--icon--tools {
    /* Appearance */
    color: #ffffff; }
    .button-icon--icon--tools:before {
      content: ""; }
  .button-icon--icon--back {
    /* Appearance */
    font-size: 2.1875rem; }
    .button-icon--icon--back:before {
      content: ""; }
  .button-icon--icon--nav {
    /* Appearance */
    font-size: 2.1875rem; }
    .button-icon--icon--nav:before {
      content: ""; }
  .button-icon--icon--help {
    /* Appearance */
    font-size: 2.1875rem; }
    .button-icon--icon--help:before {
      content: ""; }
  .button-icon--icon--menu {
    /* Appearance */
    font-size: 15px;
    line-height: 2em; }
    .button-icon--icon--menu:before {
      content: ""; }
  .button-icon--icon--more:before {
    content: ""; }
  .button-icon--icon--more.button-icon--active:before {
    content: ""; }
  .button-icon--icon--remove:before {
    content: ""; }
  .button-icon--icon--add-knockout:before {
    content: ""; }
  .button-icon--icon--calendar:before {
    content: ""; }
  .button-icon--icon--profile:before {
    content: ""; }
  .button-icon--icon--activity:before {
    /* Appearance */
    content: ""; }
  .button-icon--icon--alert:before {
    /* Appearance */
    content: ""; }
  .button-icon--icon--filter:before {
    /* Appearance */
    content: ""; }
  .button-icon--icon--avatar {
    /* Display and box model */
    /* Center the containing image */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    /* image inside is a square but our
    border is rounded. So we we cut the image
    using overflow hidden */
    overflow: hidden;
    border-radius: 50%;
    /* Appearance */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
    .button-icon--icon--avatar.button-icon--active {
      transition: border .3s ease-in-out;
      border: solid 3px #186ca6; }
  .button-icon--icon--ellipsis-vert:before {
    content: ""; }
  .button-icon__badge {
    /* Display and box model */
    position: absolute;
    top: 0;
    left: -11px;
    height: 1rem;
    width: 1rem;
    /* Appearance */
    /* center vertically */
    line-height: 1.125rem;
    background: #E74C3C;
    color: #ffffff;
    font-size: 0.5625rem;
    text-align: center;
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    border-radius: 15px;
    border: solid 2px #ffffff;
    animation: bounce 0.2s; }
  .button-icon--active, .button-icon:hover {
    /* Appearance */
    color: #186ca6; }
  .button-icon--pad-left {
    /* Display and box model */
    margin-left: 0.625rem; }
  .button-icon--pad-right {
    /* Display and box model */
    margin-right: 0.625rem; }
  .button-icon--size--extra-small {
    /* Display and box model */
    width: 1.6875rem;
    height: 1.6875rem;
    /* Appearance */
    font-size: 1.4375rem; }
  .button-icon--disabled {
    /* Appearance */
    opacity: .5;
    cursor: not-allowed; }
    .button-icon--disabled:hover {
      /* Display and box model */
      color: #444444; }
  .button-icon--icon--menu {
    /* Appearance */
    font-size: 15px; }
  .button-icon--size--extra-small {
    /* Display and box model */
    width: 1.4375rem;
    height: 1.4375rem;
    /* Appearance */
    font-size: 1.4375rem; }
  .button-icon--color--white {
    color: #ffffff; }
  .button-icon--color--orange {
    color: #FF6800; }

/*------------------------------------*  BUTTON GROUP
\*------------------------------------*/
/**
 * Groups buttons
 * Used to create radial switch
 *
 * @block button-group
 */
.button-group {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  /* Adjust button styles within button-group */
  /**
   * Makes button element 100% width.
   *
   * @modifier flexible
   */
  /**
   * Removes min-width.
   *
   * @modifier icon
   */
  /**
   * Media query for min-width 1041px, large screens up
   */ }
  .button-group .button {
    /* Display and box model */
    min-width: 3.125rem;
    /* Appearance */
    border-radius: 0;
    box-shadow: none; }
    .button-group .button:first-child {
      /* Appearance */
      border-radius: 0.1875rem 0 0 0.1875rem;
      border-right-width: 0; }
    .button-group .button:last-child {
      /* Appearance */
      border-radius: 0 0.1875rem 0.1875rem 0;
      border-left-width: 0; }
  .button-group--flexible .button {
    /* Display and box model */
    width: 100%;
    max-width: 100%; }
  .button-group--icon .button {
    /* Display and box model */
    min-width: 2.1875rem;
    height: 2.1875rem; }
  @media only screen and (min-width: 46.0625em) {
    .button-group {
      /* Adjust button styles within button-group */
      /**
     * Removes min-width.
     *
     * @modifier icon
     */ }
      .button-group .button {
        /* Display and box model */
        min-width: 5rem; }
      .button-group--icon .button {
        /* Display and box model */
        min-width: 2.1875rem; } }

.builder-featured {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: center;
      justify-content: center;
  height: 80vh;
  /*
   *
   * @element content
   */
  /*
   *
   * @element header
   */
  /*
   *
   * @element title
   */
  /*
   * Horizontal lays out items.
   * Default stack is 3 up.
   *
   * @element list
   */
  /*
   *
   * @element list-item
   */
  /*
   * @element div
   */
  /*
   *
   * @element item-icon
   */
  /*
   *
   * @element item-title
   */ }
  .builder-featured__content {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; }
  .builder-featured__header {
    /* Display and box model */
    margin: 0 0.9375rem;
    /* Appearance */
    color: #444444; }
  .builder-featured__title {
    /* Display and box model */
    margin-bottom: 1.875rem;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    font-size: 1.0625rem;
    line-height: 1.2em;
    text-align: center;
    /* Other */
    transition: color .3s;
    transition: .5s; }
  .builder-featured__list {
    /* Display and box model */
    padding: 0 15px; }
  .builder-featured__list-item {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    margin-bottom: 0.9375rem;
    padding: 0.9375rem;
    /* Appearance */
    background: #ffffff;
    text-align: center;
    border: solid 1px #D5D5D5;
    border-radius: 0.5625rem;
    transition: .3s;
    /*
     * @modifier split
     * @for list-item
     */ }
    .builder-featured__list-item:hover {
      /* Display and box model */
      z-index: 10;
      /* Appearance */
      transform: scale(1.1);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.1); }
    .builder-featured__list-item--disabled {
      /* Appearance */
      -webkit-filter: grayscale(100%);
              filter: grayscale(100%);
      cursor: not-allowed;
      opacity: .7; }
      .builder-featured__list-item--disabled:hover {
        transform: scale(1);
        box-shadow: none; }
  .builder-featured__div {
    /* Display and box model */
    padding-top: 0.625rem;
    margin-top: 1.5625rem;
    margin-bottom: 0.9375rem;
    /* Appearance */
    border-top: solid 1px #D5D5D5; }
  .builder-featured__item-icon {
    /* Display and box model */
    margin-bottom: 0.9375rem;
    max-width: 9.375rem; }
    .builder-featured__item-icon img {
      max-height: 5.625rem; }
  .builder-featured__item-title {
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    font-size: 0.9375rem;
    text-transform: uppercase;
    /* Other */
    transition: color .3s;
    transition: .5s; }
  @media only screen and (min-width: 46.0625em) {
    .builder-featured {
      /*
     * Horizontal lays out items.
     * Default stack is 3 up.
     *
     * @element list
     */
      /*
     *
     * @element list-item
     */
      /*
     * @element div
     */ }
      .builder-featured__list {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center; }
      .builder-featured__list-item {
        /* Display and box model */
        -ms-flex: 1 0 13.75rem;
            flex: 1 0 13.75rem;
        max-width: 13.75rem;
        margin-bottom: 0;
        margin-right: 0.9375rem; }
        .builder-featured__list-item:last-child {
          /* Display and box model */
          margin-right: 0; }
      .builder-featured__div {
        /* Display and box model */
        padding-right: 0.625rem;
        margin-right: 1.5625rem;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 0;
        /* Appearance */
        border-top: 0;
        border-right: solid 1px #D5D5D5; } }

/*
 CANVAS
*/
.canvas {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  height: auto;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }
  .canvas__container {
    /* Display and box model */
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    padding-bottom: 8.75rem; }
  .canvas__item {
    /* Display and box model */
    padding: 1.25rem 0;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5;
    /**
     * Adds a shaded background to field groups.
     *
     * @modifer shaded
     * @property style
     */ }
    .canvas__item:first-child {
      /* Appearance */
      border-top: solid 1px #D5D5D5; }
    .canvas__item:last-child {
      /* Display and box model */
      padding-bottom: 0;
      /* Appearance */
      border-bottom: 0; }
    .canvas__item--style--shaded {
      /* Display and box model */
      padding-top: 1.25rem;
      margin-bottom: 1.25rem;
      /* Appearance */
      background: whitesmoke;
      border-radius: 0.625rem; }
      .canvas__item--style--shaded:last-child {
        /* Display and box model */
        margin-bottom: 0; }
  .canvas__row {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; }
    .canvas__row--active .canvas-header {
      /* Appearance */
      background: #186ca6; }
    .canvas__row--inactive .canvas-header {
      /* Appearance */
      background: #E74C3C; }
  .canvas__section {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 1.25rem;
    background: #F9F9F9;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5;
    background: #F9F9F9;
    background: linear-gradient(45deg, white 25%, transparent 25%, transparent 50%, white 50%, white 75%, transparent 75%, transparent 0), #f9f9f9;
    background-position: auto auto;
    background-origin: padding-box;
    background-clip: border-box;
    background-size: 5px 5px; }

/*
 CANVAS-HEADER
*/
.canvas-header {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  height: 1.875rem;
  /* Appearance */
  background: #444444;
  /*
   * Positions blocks of items.
   *
   * @element col
   */ }
  .canvas-header__content {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: 0 0.9375rem; }
  .canvas-header__title-group {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center; }
  .canvas-header__title {
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    text-transform: uppercase;
    color: #ffffff; }
  .canvas-header__div {
    /* Display and box model */
    margin: 0 .25em;
    /* Appearance */
    color: rgba(255, 255, 255, 0.8); }
  .canvas-header__breadcrumb {
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.8); }
  .canvas-header__action-set {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    padding: 0 0.625rem;
    /* Appearance */
    border-right: solid 1px rgba(255, 255, 255, 0.25); }
    .canvas-header__action-set:last-child {
      /* Display and box model */
      padding-right: 0;
      /* Appearance */
      border-right: none; }
  .canvas-header__action {
    /* Display and box model */
    padding-right: 0.625rem;
    /* Appearance */
    font-size: 0.8125rem;
    color: #ffffff; }
    .canvas-header__action:last-child {
      /* Display and box model */
      padding-right: 0; }
  .canvas-header__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 100%;
    /*
     * Positions blocks of items at the start (left).
     * Ex. Dashboard icon is set to the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     * Ex. Dashboard icon is set to the end (right).
     *
     * @modifier end
     * @for col
     */
    /*
     * Used to extend a column by 2.
     *
     * @modifier long
     * @for col
     */ }
    .canvas-header__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .canvas-header__col--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end; }
    .canvas-header__col--long {
      /* Display and box model */
      -ms-flex: 3;
          flex: 3; }

/*
 CANVAS-PORTAL-HEADER
*/
.canvas-portal-header {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  /*
   * Positions blocks of items.
   *
   * @element portal-header-col
   */
  /*
   * Logo styling
   *
   * @element portal-header-logo
   */
  /*
   * @element portal-title-group
   */
  /*
   * @element portal-header-title
   */
  /*
   * Positions blocks of items.
   *
   * @element portal-header-subtitle
   */
  /*
   * Positions individual items within the nav.
   * Ex. Section element.
   *
   * @element item
   */ }
  .canvas-portal-header__content {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    width: 100%; }
  .canvas-portal-header__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 100%;
    /*
     * Positions blocks of items at the start (left).
     * Ex. Dashboard icon is set to the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     * Ex. Dashboard icon is set to the end (right).
     *
     * @modifier end
     * @for col
     */
    /*
     * Used to extend a column by 2.
     *
     * @modifier long
     * @for col
     */ }
    .canvas-portal-header__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .canvas-portal-header__col--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end;
      margin-right: 0.9375rem; }
    .canvas-portal-header__col--long {
      /* Display and box model */
      -ms-flex: 3;
          flex: 3; }
  .canvas-portal-header__logo {
    -ms-flex: 1 0 3.75rem;
        flex: 1 0 3.75rem;
    min-width: 3.75rem;
    max-width: 3.75rem;
    background: gray;
    width: 3.75rem;
    height: 3.75rem; }
  .canvas-portal-header__title-group {
    /* Display and box model */
    margin-left: 0.9375rem; }
  .canvas-portal-header__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Display and box model */
    max-width: 250px;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.6875rem;
    color: #444444;
    text-transform: uppercase; }
  .canvas-portal-header__subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Appearance */
    font-size: 1.0625rem;
    line-height: 1.2em;
    text-align: left;
    color: #444444;
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    transition: color .3s;
    max-width: 18.75rem;
    transition: .5s; }
  .canvas-portal-header__item {
    /* Display and box model */
    position: relative;
    display: -ms-flexbox;
    display: flex;
    margin-right: 0.9375rem;
    /**
     * `item` element that wrap icons menus
     * should have this modifier
     *
     * @modifier icon
     */ }
    .canvas-portal-header__item--icon {
      /* Display and box model */
      /* Center the icon vertically */
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          -ms-grid-row-align: center;
          align-items: center;
      height: 100%;
      /* Appearance */
      border-bottom: 0; }
      .canvas-portal-header__item--icon .button-icon {
        opacity: .5; }
      .canvas-portal-header__item--icon img {
        border-radius: 50%; }
    .canvas-portal-header__item:last-child {
      /* Display and box model */
      margin-right: 0; }

/*
 CANVAS-PORTAL-NAV
*/
.canvas-portal-nav__content {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.canvas-portal-nav__item {
  /* Display and box model */
  position: relative;
  -ms-flex: 1 0 16.666666667%;
      flex: 1 0 16.666666667%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  max-width: 16.666666667%;
  min-width: 16.666666667%;
  padding: .5em 1em;
  /* Appearance */
  border: dashed 1px #D5D5D5;
  border-left: 0; }

.canvas-portal-nav__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Appearance */
  font-size: 0.8125rem; }

/*------------------------------------*    CHECK-BOX
\*------------------------------------*/
/**
 * Set of styles for the checkbox element
 *
 *  <label class="check-box">
 *   <input type="checkbox" class="checkbox" id="check_3" hidden>
 *   <span for="check_3" class="check-box__style"></span>
 *  </label>
 *
 *
 * @block check-box
 */
.check-box {
  /* Checked */
  /**
   * Styles labels for check boxes
   *
   *
   * @element label
   */ }
  .check-box input[type="checkbox"] {
    display: none; }
  .check-box input[type="checkbox"] + .check-box__label {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    /* Appearance */
    cursor: pointer;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .check-box input[type="checkbox"]:checked + .check-box__label {
    transition: all 300ms ease; }
  .check-box input[type="checkbox"] + .check-box__label:before {
    /* Appearance */
    -ms-flex: 1 0 1.6875rem;
        flex: 1 0 1.6875rem;
    position: relative;
    display: inline-block;
    padding: 0;
    max-width: 1.6875rem;
    width: 1.6875rem;
    height: 1.6875rem;
    margin-right: 0.625rem;
    /* Appearance */
    content: '';
    border: 1px solid #444444;
    border-radius: 50%;
    transform-origin: 1.6875rem 1.6875rem;
    line-height: 1em; }
  .check-box input[type="checkbox"]:checked + .check-box__label:before {
    /* Display and box model */
    -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    position: absolute;
    /* Appearance */
    /* Display and box model */
    position: relative;
    display: inline-block;
    /** Appearance */
    font-family: "x-font";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    font-variant: normal;
    text-transform: none;
    line-height: 1px;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    content: "";
    background: #ffffff;
    color: #FF6800;
    font-size: 1.6875rem;
    border: none;
    line-height: 1em; }
  .check-box__label {
    /* Display and box model */
    -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    margin-bottom: 0;
    /* Appearance */
    font-size: 0.9375rem;
    text-transform: normal;
    color: #444444;
    /**
     * Aligns the value text right
     *
     * @modifier right
     * @property position
     * @for value
     */
    /**
     * Makes the value text bold
     *
     * @modifier bold
     * @property style
     * @for value
     */ }
    .check-box__label--position--right {
      /* Appearance */
      text-align: right; }
    .check-box__label--style--bold {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal; }
  .check-box--small {
    /**
     * Styles labels for check boxes
     *
     *
     * @element label
     */ }
    .check-box--small input[type="checkbox"] + .check-box__label:before {
      /* Display and box model */
      max-width: 1.2em;
      width: 1.2em;
      height: 1.2em; }
    .check-box--small input[type="checkbox"]:checked + .check-box__label:before {
      /* Display and box model */
      max-width: 1em;
      width: 1em;
      height: 1em;
      font-size: 1.2em;
      /* Appearance */
      color: #444444; }
    .check-box--small .check-box__label {
      /* Appearance */
      font-size: 0.9375rem;
      text-transform: normal;
      color: #444444;
      line-height: 1em; }

/*------------------------------------*  CARD-LIST
\*------------------------------------*/
/**
 * This controls the layout for groups of cards
 *
 *
 * @block card-list
 */
.card-list {
  /* Display and box model */
  max-width: 75rem;
  margin: 0 auto;
  margin-top: 15px;
  /**
   * Removes margin/padding from around card-list
   * Used when a card list is in sections.
   *
   * @modifier no-space
   */
  /**
   * Wraps the card-basic and controls the number
   * of cards in a row.
   *
   * @element item
   */
  /**
   * Media query for min-width 641px, medium screens
   */
  /**
   * Media query for min-width 1041px, large screens up
   */ }
  .card-list--no-space {
    /* Display and box model */
    padding: 0; }
    .card-list--no-space:last-child {
      margin-bottom: 0; }
  .card-list__item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    padding: 0.9375rem; }
  @media only screen and (min-width: 46.0625em) {
    .card-list {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      /**
     * Wraps the card block and controls the number
     * of cards in a row.
     *
     * Displays card 2 up
     *
     * @element item
     */ }
      .card-list__item {
        width: 50%;
        /**
       * Displays card 100% width
       * Used in cases when you want to display a
       * in a modal or alone.
       *
       * @modifier block
       * @for item
       */ }
        .card-list__item--block {
          width: 100%; }
          .card-list__item--block:last-child {
            padding-bottom: 0; } }
  @media only screen and (min-width: 65em) {
    .card-list {
      /**
     * Wraps the card block and controls the number
     * of cards in a row.
     *
     * Displays card 3 up
     *
     * @element item
     */ }
      .card-list__item {
        width: 33.333333%;
        /**
       * Displays card 4 up
       *
       * @modifier four
       */
        /**
       * Displays card 100% width
       * Used in cases when you want to display a
       * in a modal or alone.
       *
       * @modifier block
       * @for item
       */
        /**
       * Displays card 100% width
       * Used in cases when you want to display a
       * in a modal or alone.
       *
       * @modifier block
       * @for item
       */ }
        .card-list__item--four {
          width: 25%; }
        .card-list__item--two {
          width: 50%; }
        .card-list__item--block {
          width: 100%; }
          .card-list__item--block:last-child {
            padding-bottom: 0; } }

/*------------------------------------*  CARD-BASIC
\*------------------------------------*/
/**
 * This is the styling for cards
 *
 *
 * @block card-basic
 */
.card-basic {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  position: relative;
  padding-left: 0.75rem;
  /* Appearance */
  color: #444444;
  border: solid 1px #D5D5D5;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform .3s;
  /**
   * The currently selected item.
   *
   * @modifier selected
   */
  /**
   * Style for cards w/ no status.
   * Ex. Used for Settings cards.
   *
   * @modifier no-status
   */
  /**
   * Style for the action card.
   *
   * @modifier action
   */
  /**
   * Layout and style for the header within a card.
   * Primarily used w/ <header> tag.
   *
   * @element header
   */
  /**
   * Layout and style for titles within a card.
   & Primarily used in the header.
   *
   * @element title
   */
  /**
   * Layout for the content area of a card.
   *
   * @element content
   */
  /**
   * Styles descriptive copy in cards.
   * Used in Settings Cards
   *
   * @element description
   */
  /**
   * Layout and style for listed items in the content element.
   * Primarily used w/ <ul> tag for listing groups
   * labels and values.
   *
   * @element list
   */
  /**
   * Layout styles for list items.
   *
   * @element list-item
   */
  /**
   * Styling for labels
   *
   * @element label
   */
  /**
   * Styling for values
   *
   * @element value
   */
  /**
   * Styling for icons
   *
   * @element icon
   */
  /**
   * Layout and style for the footers within a card.
   * Primarily used w/ <footer> tag.
   *
   * @element footer
   */
  /**
   * Layout and style for the action elements within a footer.
   *
   * @element action
   */
  /**
   * Media query for min-width 641px, medium screens
   */
  /**
   * Media query for min-width 1041px, large screens up
   */ }
  .card-basic--selected {
    /* Appearance */
    border: solid 2px #186ca6; }
  .card-basic--no-status {
    /* Display and box model */
    padding-left: 0; }
  .card-basic--action {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    min-height: 11.1875rem;
    padding: 15px;
    text-transform: uppercase;
    text-align: center;
    color: #D5D5D5;
    border: dashed 2px #D5D5D5;
    box-shadow: none; }
  .card-basic__header {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-align: start;
        align-items: flex-start;
    padding: 15px;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5;
    /**
     * Removes bottom border
     * Used when a card had no content area
     * Ex. Address cards
     *
     * @modifier no-border
     * @for header
     */
    /**
     * INTERIM FIX - Adds margin to bottom
     * Wont be necessary when cards are refactored
     * Ex. Line cards on Sub Overview
     *
     * @modifier space-bottom
     * @for header
     */ }
    .card-basic__header--no-border {
      /* Appearance */
      border-bottom: none; }
    .card-basic__header--no-space {
      /* Display and box model */
      margin-bottom: 15px;
      padding: 1.875rem 0; }
  .card-basic__title {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    padding-right: .5em;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    line-height: 1.4em;
    word-break: break-word; }
  .card-basic__content {
    /* Display and box model */
    padding: 1.875rem 15px; }
  .card-basic__description {
    /* Appearance */
    font-size: 0.8125rem;
    line-height: 1.4em; }
  .card-basic__list {
    /* Appearance */
    font-size: 0.9375rem; }
  .card-basic__list-item {
    display: -ms-flexbox;
    display: flex;
    flex-flex: row wrap;
    -ms-flex-align: baseline;
        align-items: baseline; }
  .card-basic__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    margin-right: 1em;
    /**
     * Makes font-size large
     *
     * @modifier large
     * @property size
     * @for label
     */ }
    .card-basic__label--size--large {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal;
      font-size: 0.9375rem; }
  .card-basic__value {
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    word-break: break-word;
    /**
     * Styling for error values
     * Ex. Used on payments section to
     * show card alerts.
     *
     * @modifier error
     * @for value
     */ }
    .card-basic__value--error {
      /* Appearance */
      color: #E74C3C;
      text-transform: uppercase; }
  .card-basic__icon {
    /**
     * Makes font-size larger
     *
     * @modifier add
     * @property icon
     * @for icon
     */ }
    .card-basic__icon--icon--add:before {
      /* Appearance */
      /* Display and box model */
      position: relative;
      display: inline-block;
      /** Appearance */
      font-family: "x-font";
      font-style: normal;
      font-weight: normal;
      speak: none;
      text-decoration: inherit;
      text-align: center;
      text-transform: none;
      font-variant: normal;
      text-transform: none;
      line-height: 1px;
      -webkit-text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      content: '\62';
      font-size: 1.3125rem; }
  .card-basic__footer {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: end;
        align-items: flex-end;
    -ms-flex: 1;
        flex: 1;
    text-align: center; }
  .card-basic__action {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    -ms-flex-pack: center;
        justify-content: center;
    text-align: center;
    padding: 15px 0;
    border-left: solid 1px #D5D5D5;
    /* Appearance */
    border-top: solid 1px #D5D5D5;
    /**
     * Changes text color to green
     *
     * @modifier green
     * @property color
     * @for action
     */ }
    .card-basic__action:first-child {
      /* Appearance */
      border-left: none; }
    .card-basic__action--green {
      /* Appearance */
      color: #1a6f43; }
  @media only screen and (min-width: 46.0625em) {
    .card-basic {
      /**
     * Layout and style for titles within a card.
     & Primarily used in the header.
     *
     * @element title
     */ }
      .card-basic__title {
        /* Display and box model */
        font-size: 1rem; } }
  @media only screen and (min-width: 65em) {
    .card-basic {
      /* Controls hover state of the block element */
      /**
     * Layout and style for the add card.
     *
     * @modifier add
     */
      /**
     * Layout and style for the action elements within a footer.
     *
     * @element action
     */ }
      .card-basic:hover {
        transform: scale(1.025);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); }
      .card-basic--action {
        /* Controls hover state of the add card element */ }
        .card-basic--action:hover {
          color: #186ca6;
          border-color: currentColor;
          box-shadow: none; }
      .card-basic__action {
        /* Controls hover state of the action element */ }
        .card-basic__action:hover {
          background: rgba(21, 138, 202, 0.05); } }

/*------------------------------------*  CARD-EVENT
\*------------------------------------*/
/**
 * This is the styling for Event Cards
 *
 *
 * @block card-event
 */
.card-event {
  /* Display and box model */
  -ms-flex: 1;
      flex: 1;
  position: relative;
  /* Appearance */
  background: #ffffff;
  border: solid 1px #D5D5D5;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  /*
   * Container for card image
   *
   * @element poster
   */
  /**
   * Wraps header,description,footer of a card.
   *
   * @element content
   */
  /**
   * Layout and style for the header within a card.
   * Primarily used w/ <header> tag.
   *
   * @element header
   */
  /**
   * Positions items within a cards
   * content area.
   *
   * @element info
   */
  /**
   * Layout and style for titles within a card.
   & Primarily used in the header.
   *
   * @element title
   */
  /**
   * Wraps a set of meta info.
   *
   * @element meta-item
   */
  /**
   * Wraps a set of meta info.
   *
   * @element meta-item
   */
  /**
   * Style for copy within a card description.
   *
   * @element copy
   */
  /**
   * Layout and style for the footers within a card.
   * Primarily used w/ <footer> tag.
   *
   * @element footer
   */
  /**
   * Style for the action card.
   *
   * @modifier action
   */
  /**
   * Media query for min-width 320px, medium screens
   */
  /**
   * Media query for min-width 640px, medium screens up
   */ }
  .card-event__image {
    /* Display and box model */
    min-height: 9.375rem;
    /* Appearance */
    background-color: #F7F7F7;
    background-size: cover; }
  .card-event__content {
    /* Display and box model */
    padding: 15px; }
  .card-event__header {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 15px; }
  .card-event__info {
    /* Display and box model */
    display: block; }
    .card-event__info--copy {
      /* Display and box model */
      display: block;
      min-height: 3.125rem;
      /* Appearance */
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: wrap; }
  .card-event__title {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    padding-right: .5em;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    line-height: 1.4em;
    word-break: break-word; }
  .card-event__meta {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    min-height: 1.875rem;
    margin-right: 1.875rem;
    margin-bottom: 0.9375rem;
    /* Appearance */
    color: #444444; }
    .card-event__meta:last-child {
      margin-bottom: 0; }
  .card-event__meta-text {
    /* Appearance */
    color: #444444;
    font-size: 0.8125rem;
    line-height: 1.2em; }
  .card-event__copy {
    /* Display and box model */
    display: -webkit-box;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    line-height: 1.3em;
    /* Controls vertical height */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; }
  .card-event__footer {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex: 1;
        flex: 1;
    margin-top: 0.9375rem; }
  .card-event--action-item {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1; }
  @media only screen and (min-width: 20.0625em) {
    .card-event {
      /**
     * Wraps header,description,footer of a card.
     *
     * @element content
     */
      /**
     * Layout and style for the footers within a card.
     * Primarily used w/ <footer> tag.
     *
     * @element footer
     */ }
      .card-event__content {
        /* Display and box model */ }
      .card-event__footer {
        /* Display and box model */
        -ms-flex-pack: end;
            justify-content: flex-end; } }
  @media only screen and (min-width: 46.0625em) {
    .card-event {
      display: -ms-flexbox;
      display: flex;
      /*
     * Container for card image
     *
     * @element poster
     */
      /**
     * Positions items within a cards
     * content area.
     *
     * @element info
     */
      /**
     * Wraps a set of meta info.
     *
     * @element meta-item
     */
      /**
     * Wraps header,description,footer of a card.
     *
     * @element content
     */
      /**
     * Layout and style for titles within a card.
     & Primarily used in the header.
     *
     * @element title
     */
      /**
     * Layout and style for the footers within a card.
     * Primarily used w/ <footer> tag.
     *
     * @element footer
     */ }
      .card-event__image {
        /* Display and box model */
        -ms-flex: 1 0 250px;
            flex: 1 0 250px;
        max-width: 15.625rem;
        min-height: 9.375rem;
        /* Appearance */
        background: #F7F7F7 url("../img/thumbnail.png") 50% 50% no-repeat;
        background-size: cover; }
      .card-event__info {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 15px; }
      .card-event__meta {
        /* Display and box model */
        margin-bottom: 0; }
      .card-event__content {
        /* Display and box model */
        display: block;
        width: 100%;
        -ms-flex: 1;
            flex: 1; }
      .card-event__title {
        /* Display and box model */
        font-size: 1rem; }
      .card-event__footer {
        margin-top: 0; } }

/*------------------------------------*  CARD-RELATED-EVENT
\*------------------------------------*/
/**
 * This is the styling for Event Cards
 *
 *
 * @block card-related-event
 */
.card-related-event {
  /* Display and box model */
  -ms-flex: 1;
      flex: 1;
  position: relative;
  /* Appearance */
  background: #ffffff;
  border: solid 1px #D5D5D5;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  /*
   * Container for card image
   *
   * @element poster
   */
  /**
   * Wraps header,description,footer of a card.
   *
   * @element content
   */
  /**
   * Layout and style for the header within a card.
   * Primarily used w/ <header> tag.
   *
   * @element header
   */
  /**
   * Positions items within a cards
   * content area.
   *
   * @element info
   */
  /**
   * Layout and style for titles within a card.
   & Primarily used in the header.
   *
   * @element title
   */
  /**
   * Wraps a set of meta info.
   *
   * @element meta-item
   */
  /**
   * Wraps a set of meta info.
   *
   * @element meta-item
   */
  /**
   * Style for copy within a card description.
   *
   * @element copy
   */
  /**
   * Layout and style for the footers within a card.
   * Primarily used w/ <footer> tag.
   *
   * @element footer
   */
  /**
   * Style for the action card.
   *
   * @modifier action
   */
  /**
   * Media query for min-width 320px, medium screens
   */
  /**
   * Media query for min-width 640px, medium screens up
   */ }
  .card-related-event__image {
    /* Display and box model */
    min-height: 9.375rem;
    /* Appearance */
    background: #F7F7F7 url("../img/thumbnail.png") 50% 50% no-repeat;
    background-size: cover; }
  .card-related-event__content {
    /* Display and box model */
    padding: 15px; }
  .card-related-event__header {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 15px; }
  .card-related-event__info {
    /* Display and box model */
    display: block;
    margin-bottom: 15px; }
    .card-related-event__info--copy {
      /* Display and box model */
      display: block;
      max-height: 3.125rem;
      min-height: 3.125rem;
      /* Appearance */
      text-overflow: ellipsis;
      overflow: hidden; }
  .card-related-event__title {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    padding-right: .5em;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    line-height: 1.4em;
    word-break: break-word; }
  .card-related-event__meta {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    min-height: 1.875rem;
    margin-right: 1.875rem;
    margin-bottom: 0.9375rem;
    /* Appearance */
    color: #444444; }
  .card-related-event__meta-text {
    /* Appearance */
    color: #444444;
    font-size: 0.8125rem;
    line-height: 1.2em; }
  .card-related-event__copy {
    /* Display and box model */
    display: -webkit-box;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    line-height: 1.4em;
    color: #444444;
    text-shadow: none;
    /* Controls vertical height */
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical; }
  .card-related-event__footer {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex: 1;
        flex: 1; }
  .card-related-event--action-item {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1; }
  @media only screen and (min-width: 20.0625em) {
    .card-related-event {
      /**
     * Wraps header,description,footer of a card.
     *
     * @element content
     */
      /**
     * Layout and style for the footers within a card.
     * Primarily used w/ <footer> tag.
     *
     * @element footer
     */ }
      .card-related-event__content {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center; }
      .card-related-event__footer {
        /* Display and box model */
        -ms-flex-pack: end;
            justify-content: flex-end; } }
  @media only screen and (min-width: 46.0625em) {
    .card-related-event {
      display: -ms-flexbox;
      display: flex;
      /*
     * Container for card image
     *
     * @element poster
     */
      /**
     * Positions items within a cards
     * content area.
     *
     * @element info
     */
      /**
     * Wraps a set of meta info.
     *
     * @element meta-item
     */
      /**
     * Wraps header,description,footer of a card.
     *
     * @element content
     */
      /**
     * Layout and style for titles within a card.
     & Primarily used in the header.
     *
     * @element title
     */ }
      .card-related-event__image {
        /* Display and box model */
        -ms-flex: 1 0 125px;
            flex: 1 0 125px;
        max-width: 7.8125rem;
        min-height: 3.875rem;
        /* Appearance */
        background: #F7F7F7 url("../img/thumbnail.png") 50% 50% no-repeat;
        background-size: cover; }
      .card-related-event__info {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex; }
      .card-related-event__meta {
        /* Display and box model */
        margin-bottom: 0; }
      .card-related-event__content {
        /* Display and box model */
        display: block;
        width: 100%;
        -ms-flex: 1;
            flex: 1; }
      .card-related-event__title {
        /* Display and box model */
        font-size: 1rem; } }

/*------------------------------------*  CAROUSEL
\*------------------------------------*/
/**
 * This is the styling for Carousel component
 *
 *
 * @block carousel
 */
.carousel {
  /* Need to convert slick to custom name */ }

/*///// SLICK OVERRIDES /////*/
/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat; }

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: "←"; }
    [dir="rtl"] .slick-prev:before {
      content: "→"; }

.slick-next {
  right: -25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: "→"; }
    [dir="rtl"] .slick-next:before {
      content: "←"; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  /*Updated from Orig*/
  /* Display and box model */
  display: block;
  position: relative;
  bottom: 0;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  width: 100%;
  /* Appearance */
  list-style: none;
  text-align: center; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 0.625rem;
    width: 0.625rem;
    margin: 0 0.3125rem;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "slick";
        font-size: 0.375rem;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: black;
      opacity: 0.75; }

/*------------------------------------*    ACTION OPTIONS
\*------------------------------------*/
/**
 * Wraps page elements
 * Primarily uses <main> tag.
 *
 * @block container
 */
.container {
  max-width: 85.375rem auto;
  /* Display and box model */
  padding-bottom: 4.375rem;
  /*
   *
   * @modifier no-padding
   * @for container
   */ }
  .container--no-padding {
    /* Display and box model */
    padding-bottom: 0; }

/*------------------------------------*    CONTROL-BAR
\*------------------------------------*/
/**
 * Header and controls for list and table groups.
 *
 *
 * @block control-bar
 */
.control-bar {
  /* Display and box model */
  display: block;
  padding: 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  overflow: visible;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  height: 3.75rem;
  width: 100%;
  padding: 0 0.9375rem;
  /* Appearance */
  background: #ffffff;
  /**
   * Makes background transparent.
   * Ex. Used on Index level pages where bg is gray.
   *
   * @modifier transparent
   */
  /**
   * Adds border to bottom.
   *
   * @modifier border
   * @property style
   */
  /*
   * Positions blocks of items.
   *
   * @element col
   */
  /**
   *
   * @element icon
   */
  /**
   * Title styling for section-header
   *
   * @element title
   */
  /**
   * Styles meta text within the view controls.
   *
   * @element meta
   */
  /**
   * Styling for buttons within the view-controls
   *
   * @element action
   */
  /**
   * Media query for min-width 641px, medium screens
   */ }
  .control-bar--transparent {
    /* Appearance */
    background: transparent; }
  .control-bar--style--border {
    /* Appearance */
    border-bottom: solid 1px #444444; }
  .control-bar__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    /*
     * Positions blocks of items at the start (left).
     * Ex. Dashboard icon is set to the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     * Ex. Dashboard icon is set to the end (right).
     *
     * @modifier end
     * @for col
     */
    /*
     * Extend the flex to be 3x larger.
     *
     * @modifier long
     * @for col
     */ }
    .control-bar__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .control-bar__col--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end; }
    .control-bar__col--long {
      /* Display and box model */
      -ms-flex: 3;
          flex: 3; }
  .control-bar__icon {
    /* Display and box model */
    display: inline-block;
    margin-left: 0.625rem; }
  .control-bar__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    max-width: 12.5rem;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    font-size: 1.0625rem;
    line-height: 1.2em;
    text-align: left;
    /* Other */
    transition: color .3s;
    transition: .5s;
    /**
     * Adds space to the left of action element
     * Used when having a action next to a hint.
     *
     * @modifier large
     * @property size
     * @for title
     */ }
    .control-bar__title--size--large {
      /* Appearance */
      font-size: 1.1875rem;
      letter-spacing: .05em; }
  .control-bar__meta {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    margin-left: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    color: #444444;
    letter-spacing: .05em; }
  .control-bar__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Display and box model */
    padding-bottom: 0;
    margin-right: 0.3125rem; }
  .control-bar__action {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    /* Appearance */
    text-align: center;
    padding: 0 0.4375rem; }
    .control-bar__action:first-child {
      /* Display and box model */
      padding-left: 0; }
    .control-bar__action:last-child {
      /* Display and box model */
      padding-right: 0; }
  @media only screen and (min-width: 46.0625em) {
    .control-bar {
      /**
     * Styling for buttons within the view-controls
     *
     * @element action
     */
      /**
     *
     * @element icon
     */
      /**
     * Title styling for section-header
     *
     * @element title
     */ }
      .control-bar__action {
        /* Display and box model */
        position: relative; }
      .control-bar__icon {
        /* Display and box model */
        margin-left: 0; }
      .control-bar__title {
        /* Display and box model */
        max-width: 18.75rem; } }

/*------------------------------------*   DOC-REVIEW
\*------------------------------------*/
/**
 *
 * @block doc-review
 */
.doc-preview {
  /* Display and box model */
  -ms-flex: 1;
      flex: 1;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 1.875rem;
  margin-top: 0;
  /*
   * Wraps content for decision letter code
   *
   * @element letter
   */
  /*
   * Wraps content blocks
   *
   * @element block
   */
  /*
   * Header block that contains logo
   *
   * @element header
   */
  /*
   * Bottom block that contains signature
   *
   * @element footer
   */
  /*
   * Styles title copy
   *
   * @element footer
   */
  /*
   * Wraps and positions the logo.
   *
   * @element logo
   */
  /*
   * Styles copy text.
   *
   * @element container
   */
  /*
   * Used for large doc preview.
   *
   * @element container
   */
  /**
   * Media query for min-width 641px, medium screens up
   */
  /**
   * Media query for min-width 1041px, large screens up
   */
  /* Display and box model */
  margin-top: 1.875rem;
  max-width: 20rem; }
  .doc-preview__content {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 21.875rem;
    min-width: 15.625rem;
    margin: 0 auto;
    /* Appearance */
    border: solid 1px #D5D5D5;
    border-radius: 0.1875rem; }
  .doc-preview__letter {
    /* Display and box model */
    padding: 2.5rem; }
  .doc-preview__block {
    /* Display and box model */
    margin-bottom: 1.25rem; }
  .doc-preview__header {
    /* Display and box model */
    margin-bottom: 2.5rem; }
  .doc-preview__footer {
    /* Display and box model */
    margin-top: 1.25rem;
    max-width: 20rem; }
    .doc-preview__footer--pad-top {
      /* Display and box model */
      margin-top: 2.5rem; }
  .doc-preview__title {
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase; }
  .doc-preview__logo {
    /* Display and box model */
    margin: 0 auto;
    max-width: 100%;
    text-align: center; }
  .doc-preview__copy {
    /* Appearance */
    font-size: 0.9375rem;
    line-height: 1.4em; }
    .doc-preview__copy--style--bold {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal; }
  .doc-preview__container {
    /* Display and box model */
    display: block;
    max-width: 50rem;
    margin: 1.875rem auto;
    /* Appearance */
    border: solid 1px #F7F7F7;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25); }

/*///// WYSIWYG /////*/
.editor {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  background: white;
  /* Adjust button styles within button-group */
  /*
   * @element-icon
   */ }
  .editor__button {
    /* Display and box model */
    width: 100%;
    min-width: 2.1875rem;
    height: 2.1875rem;
    padding: 0;
    -webkit-appearance: none;
    /* Appearance */
    border-radius: 0.1875rem;
    box-sizing: border-box;
    border: solid 1px #444444;
    background: transparent;
    color: #444444;
    -webkit-color: none;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    /* Appearance */
    border-radius: 0;
    box-shadow: none; }
    .editor__button:first-child {
      /* Appearance */
      border-radius: 0.1875rem 0 0 0.1875rem;
      border-right-width: 0; }
    .editor__button:last-child {
      /* Appearance */
      border-radius: 0 0.1875rem 0.1875rem 0;
      border-left-width: 0; }
    .editor__button:hover {
      /* Appearance */
      background: white; }
  .editor__icon {
    /* Display and box model */
    position: relative;
    display: inline-block;
    width: 0.9375rem;
    height: 0.9375rem;
    /* Appearance */
    background-size: 100%;
    /*
     * align-center
     *
     * @modifier align-center
     */
    /*
     * align-justified
     *
     * @modifier align-justified
     */
    /*
     * align-left
     *
     * @modifier align-left
     */
    /*
     * align-right
     *
     * @modifier align-right
     */
    /*
     * list-unordered
     *
     * @modifier list-unordered
     */
    /*
     * list-number
     *
     * @modifier list-number
     */
    /*
     * bold
     *
     * @modifier bold
     */
    /*
     * italic
     *
     * @modifier italic
     */
    /*
     * strikethrough
     *
     * @modifier strikethrough
     */
    /*
     * link
     *
     * @modifier link
     */ }
    .editor__icon--align-center {
      background: url("../img/editor/align-center.svg") 0 0 no-repeat; }
      .editor__icon--align-center--is-active {
        /* Appearance */
        background: url("../img/editor/align-center-white.svg") 0 0 no-repeat; }
    .editor__icon--align-justified {
      background: url("../img/editor/align-center.svg") 0 0 no-repeat;
      width: 0.9375rem;
      height: 0.9375rem;
      background-size: 100%; }
      .editor__icon--align-justified--is-active {
        /* Appearance */
        background: url("../img/editor/align-center-white.svg") 0 0 no-repeat; }
    .editor__icon--align-left {
      background: url("../img/editor/align-left.svg") 0 0 no-repeat;
      width: 0.9375rem;
      height: 0.9375rem;
      background-size: 100%; }
      .editor__icon--align-left--is-active {
        /* Appearance */
        background: url("../img/editor/align-left-white.svg") 0 0 no-repeat; }
    .editor__icon--align-right {
      background: url("../img/editor/align-right.svg") 0 0 no-repeat;
      width: 0.9375rem;
      height: 0.9375rem;
      background-size: 100%; }
      .editor__icon--align-right--is-active {
        /* Appearance */
        background: url("../img/editor/align-right-white.svg") 0 0 no-repeat; }
    .editor__icon--list-unordered {
      background: url("../img/editor/list-unordered.svg") 0 0 no-repeat;
      width: 0.9375rem;
      height: 0.9375rem;
      background-size: 100%; }
      .editor__icon--list-unordered--is-active {
        /* Appearance */
        background: url("../img/editor/list-unordered-white.svg") 0 0 no-repeat; }
    .editor__icon--list-number {
      background: url("../img/editor/list-number.svg") 0 0 no-repeat;
      width: 0.9375rem;
      height: 0.9375rem;
      background-size: 100%; }
      .editor__icon--list-number--is-active {
        /* Appearance */
        background: url("../img/editor/list-number-white.svg") 0 0 no-repeat; }
    .editor__icon--bold {
      background: url("../img/editor/bold.svg") 0 0 no-repeat;
      width: 0.9375rem;
      height: 0.9375rem;
      background-size: 100%; }
      .editor__icon--bold--is-active {
        /* Appearance */
        background: url("../img/editor/bold-white.svg") 0 0 no-repeat; }
    .editor__icon--italic {
      background: url("../img/editor/italic.svg") 0 0 no-repeat;
      width: 0.9375rem;
      height: 0.9375rem;
      background-size: 100%; }
      .editor__icon--italic--is-active {
        /* Appearance */
        background: url("../img/editor/italic-white.svg") 0 0 no-repeat; }
    .editor__icon--strikethrough {
      background: url("../img/editor/strikethrough.svg") 0 0 no-repeat;
      width: 0.9375rem;
      height: 0.9375rem;
      background-size: 100%; }
      .editor__icon--strikethrough--is-active {
        /* Appearance */
        background: url("../img/editor/strikethrough-white.svg") 0 0 no-repeat; }
    .editor__icon--link {
      background: url("../img/editor/link.svg") 0 0 no-repeat;
      width: 0.9375rem;
      height: 0.9375rem;
      background-size: 100%; }
      .editor__icon--link:hover, .editor__icon--link--is-active {
        /* Appearance */
        background: url("../img/editor/link-white.svg") 0 0 no-repeat; }

/*------------------------------------*    EVENT-CALENDAR
\*------------------------------------*/
/**
 * The event calendar is a core component of the
 * events app experience. The event calendar can be used
 * in conjunction with the .event-calendar-list when a
 * multiple calendar layout is required.
 *
 * @block event-calendar
 */
.event-calendar {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 0.625rem;
  width: 100%;
  /* Appearance */
  background: #ffffff;
  border-radius: 0.1875rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  /*
   * Contains the title and buttons
   *
   * @element header
   */
  /*
   * Styles the title of calendar
   *
   * @element title
   */
  /*
   * Styles the button element in
   * a header
   *
   * @element button
   */
  /*
   * Wraps around tables element.
   *
   * @element container
   */
  /*
   *
   * @element table
   */
  /*
   *
   * @element table-head
   */
  /*
   *
   * @element table-header-cell
   */
  /*
   *
   * @element table-body
   */
  /*
   *
   * @element table-row
   */
  /*
   *
   * @element table-cell
   */
  /*
   *
   * @element weekday
   */
  /*
   *
   * @element day
   */
  /*
   * Modifies the calendar element to fit more intuitively
   * into the sidebar.
   *
   * @modifier sidebar
   */ }
  .event-calendar__header {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    margin-bottom: 15px; }
  .event-calendar__title {
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    color: #186ca6; }
  .event-calendar__button {
    /* Appearance */
    color: #D5D5D5;
    background: transparent;
    border: 0;
    -webkit-appearance: none; }
  .event-calendar__container {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center; }
  .event-calendar__table {
    display: table;
    width: 100%; }
  .event-calendar__table-head {
    /* Display and box model */
    display: table-header-group; }
  .event-calendar__table-header-cell {
    /* Display and box model */
    display: table-cell;
    padding: 0.625rem 0;
    /* Appearance */
    border-radius: 0.1875rem; }
  .event-calendar__table-body {
    display: table-row-group; }
  .event-calendar__table-row {
    /* Display and box model */
    display: table-row;
    /* Appearance */
    text-align: center; }
  .event-calendar__table-cell {
    /* Display and box model */
    display: table-cell;
    padding-right: 0.3125rem;
    padding-bottom: 0.3125rem;
    /* Removes the padding-right on 7th item */
    /* Appearance */
    cursor: pointer; }
    .event-calendar__table-cell:nth-child(7n) {
      padding-right: 0; }
  .event-calendar__weekday {
    /* Display and box model */
    padding: 0.5rem 0;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    border-radius: 0.1875rem; }
  .event-calendar__day {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    padding: 0.625rem 0;
    /* Appearance */
    font-size: 0.9375rem;
    border-radius: 0.1875rem;
    /*
     *
     * @modifier offday
     * @for day
     */
    /*
     *
     * @modifier event
     * @property badge
     * @for cell
     */
    /*
     *
     * @modifier my-event
     * @property badge
     * @for cell
     */
    /*
     *
     * @modifier marked
     * @property badge
     * @for cell
     */ }
    .event-calendar__day--offday {
      /* Appearance */
      color: #666666; }
    .event-calendar__day--badge--event {
      /* Appearance */
      background: #1A304B;
      color: #ffffff;
      font-weight: bold;
      border: 0;
      -webkit-appearance: none;
      width: 100%; }
      .event-calendar__day--badge--event .event-calendar--day {
        color: #ffffff; }
      .event-calendar__day--badge--event .event-calendar__day--offday {
        color: #ffffff; }
    .event-calendar__day--badge--my-event {
      /* Appearance */
      background: #186ca6;
      color: #ffffff;
      font-weight: bold;
      border: 0;
      -webkit-appearance: none;
      width: 100%; }
      .event-calendar__day--badge--my-event .event-calendar__day {
        color: #ffffff; }
      .event-calendar__day--badge--my-event .event-calendar__day--offday {
        color: #ffffff; }
    .event-calendar__day--badge--marked {
      /* Appearance */
      background: #fdb72b;
      color: #ffffff;
      font-weight: bold;
      border: 0;
      -webkit-appearance: none;
      width: 100%; }
      .event-calendar__day--badge--marked .event-calendar__day {
        color: #ffffff; }
      .event-calendar__day--badge--marked .event-calendar__day--offday {
        color: #ffffff; }
  .event-calendar--sidebar {
    /* Display and box model */
    max-width: 20rem;
    margin: 0 auto;
    /* Appearance */
    background: transparent;
    box-shadow: none; }
    .event-calendar--sidebar .event-calendar__day {
      /* Appearance */
      font-size: 0.8125rem; }
    .event-calendar--sidebar .event-calendar__title {
      /* Appearance */
      font-size: 0.9375rem; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .event-calendar {
      /* Display and box model */
      margin-bottom: 15px;
      /*
     * Modifies the calendar element to fit more intuitively
     * into the sidebar.
     *
     * @modifier sidebar
     */ }
      .event-calendar--sidebar {
        /* Display and box model */
        max-width: 95vw; } }
  @media only screen and (min-width: 46.0625em) {
    .event-calendar {
      /* Display and box model */
      padding: 0.9375rem; } }

/*------------------------------------*    EVENT-CALENDAR-LIST
\*------------------------------------*/
/**
 *
 * Use to wrap the event-calendar when a
 * multiple calendar layout is required.
 *
 * @block event-calendar-list
 */
.event-calendar-list {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  height: auto;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /*
   * Wraps a event-calendar for positioning in grid.
   *
   * @element item
   */ }
  .event-calendar-list__item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex-pack: center;
        justify-content: center; }
  @media only screen and (min-width: 46.0625em) {
    .event-calendar-list {
      /* Display and box model */
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      overflow: visible;
      list-style-type: none;
      /* 50% */ }
      .event-calendar-list > li, .event-calendar-list > div, .event-calendar-list > section {
        padding: 0 1rem 1rem;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        max-width: 50%; } }
  @media only screen and (min-width: 75em) {
    .event-calendar-list {
      /* Display and box model */
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      overflow: visible;
      list-style-type: none;
      /* 33% */ }
      .event-calendar-list > li, .event-calendar-list > div, .event-calendar-list > section {
        padding: 0 1rem 1rem;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
        max-width: 33.33333%; } }
  @media only screen and (min-width: 120em) {
    .event-calendar-list {
      /* Display and box model */
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      overflow: visible;
      list-style-type: none;
      /* 25% */ }
      .event-calendar-list > li, .event-calendar-list > div, .event-calendar-list > section {
        padding: 0 1rem 1rem;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
        max-width: 25%; } }

/*------------------------------------*    EVENT-CALENDAR-LIST
\*------------------------------------*/
/**
 *
 * Use to wrap the event-calendar when a
 * multiple calendar layout is required.
 *
 * @block event-calendar-list
 */
.event-calendar-list {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  height: auto;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /*
   * Wraps a event-calendar for positioning in grid.
   *
   * @element item
   */ }
  .event-calendar-list__item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex-pack: center;
        justify-content: center; }
  @media only screen and (min-width: 46.0625em) {
    .event-calendar-list {
      /* Display and box model */
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      overflow: visible;
      list-style-type: none;
      /* 50% */ }
      .event-calendar-list > li, .event-calendar-list > div, .event-calendar-list > section {
        padding: 0 1rem 1rem;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        max-width: 50%; } }
  @media only screen and (min-width: 75em) {
    .event-calendar-list {
      /* Display and box model */
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      overflow: visible;
      list-style-type: none;
      /* 33% */ }
      .event-calendar-list > li, .event-calendar-list > div, .event-calendar-list > section {
        padding: 0 1rem 1rem;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
        max-width: 33.33333%; } }
  @media only screen and (min-width: 120em) {
    .event-calendar-list {
      /* Display and box model */
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      overflow: visible;
      list-style-type: none;
      /* 25% */ }
      .event-calendar-list > li, .event-calendar-list > div, .event-calendar-list > section {
        padding: 0 1rem 1rem;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
        max-width: 25%; } }

/*------------------------------------*    EVENT-HEADER
\*------------------------------------*/
/**
 *
 * Header used in Events UI to display Searched and My Event result info.
 *
 * @block event-header
 */
.event-header {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  /*
   * Positions title and related items.
   *
   * @element title-group
   */
  /*
   * Styles title
   *
   * @element title
   */
  /*
   * Styles action
   *
   * @element action
   */ }
  .event-header__title-group {
    /* Display and box model */
    -ms-flex: 4;
        flex: 4;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
        align-items: flex-start;
    min-height: 2.1875rem; }
  .event-header__title {
    /* Appearance */
    font-size: 1.0625rem;
    color: #444444;
    /*
     * Styles title bold
     *
     * @modifier bold
     * @property style
     * @for title
     */ }
    .event-header__title--style--bold {
      /* Appearance */
      font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
      font-weight: normal;
      color: #444444; }
  .event-header__action {
    /* Display and box model */
    position: relative;
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-align: center;
        align-items: center;
    /* Appearance */
    text-align: right; }

/*------------------------------------*    EVENT-DETAILS
\*------------------------------------*/
/**
 * This is the layout styling for hte event details.
 *
 *
 * @block event-details
 */
.event-details {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  height: auto;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* Appearance */
  background: #ffffff;
  /*
   * @element info
   */
  /*
   * @element container
   */
  /*
   * @element content
   */ }
  .event-details__col {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; }
  .event-details__container {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /*
     * @modifier poster
     * @for container
     */ }
    .event-details__container--poster {
      /* Appearance */
      background: #186ca6 url("../img/_sp-events/sp-event-poster.png") 50% 50% no-repeat;
      background-size: cover;
      /*
       * @element content
       */ }
      .event-details__container--poster .event-details__content {
        /* Display and box model */
        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%); }
  .event-details__content {
    /* Display and box model */
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    height: 100vh;
    padding-bottom: 4.375rem; }
  @media only screen and (min-width: 46.0625em) {
    .event-details {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      height: auto;
      position: relative;
      overflow: hidden;
      backface-visibility: hidden;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -ms-flex-align: stretch;
          align-items: stretch;
      -ms-flex-pack: start;
          justify-content: flex-start;
      -ms-flex-order: 0;
          order: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      /*
     * @element info
     */ }
      .event-details__col {
        /* Display and box model */
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
        max-width: 50%; } }

  @media only screen and (max-width: 46.0625em) {
    .event-details__container--poster {
      height:100vh;
    }
  }

/*------------------------------------*    EVENT-DETAILS-HEADER
\*------------------------------------*/
/**
 *
 * @block event-details-header
 */
.event-details-header {
  /* Defined header height */
  /* Display and box model */
  position: relative;
  height: 3.75rem;
  margin: 0.9375rem 0.625rem;
  /*
   * Positions blocks of items.
   *
   * @element col
   */
  /*
   * @element brand
   */
  /*
   * @element logo
   */
  /*
   * @element title-group
   */
  /*
   * @element title-group
   */
  /*
   * @element title
   */
  /*
   * Turns fonts and rules to dark color.
   *
   * @modifier dark
   * @property text
   *
   */
  /*
   * Turns fonts and rules to white color.
   *
   * @modifier light
   * @property text
   *
   */
  /*
   * Positions individual items within the nav.
   * Ex. Section element.
   *
   * @element item
   */ }
  .event-details-header__content {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 3.75rem; }
  .event-details-header__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 100%;
    /*
     * Positions blocks of items at the start (left).
     * Ex. Dashboard icon is set to the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     * Ex. Dashboard icon is set to the end (right).
     *
     * @modifier end
     * @for col
     */
    /*
     * Used to extend a column by 2.
     *
     * @modifier long
     * @for col
     */ }
    .event-details-header__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .event-details-header__col--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end; }
    .event-details-header__col--long {
      /* Display and box model */
      -ms-flex: 3;
          flex: 3; }
  .event-details-header__brand {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center; }
  .event-details-header__logo {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    min-width: 3.75rem;
    max-width: 3.75rem;
    min-height: 3.75rem;
    max-height: 3.75rem; }
  .event-details-header__title-group {
    /* Display and box model */
    margin-left: 0.625rem; }
  .event-details-header__subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Display and box model */
    max-width: 250px;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.6875rem;
    color: currentColor;
    text-transform: uppercase; }
  .event-details-header__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    line-height: 1.2em;
    text-align: left;
    color: currentColor;
    transition: color .3s;
    max-width: 18.75rem;
    transition: .5s; }
  .event-details-header--text--dark {
    color: #444444; }
  .event-details-header--text--light {
    color: white; }
  .event-details-header__item {
    /* Display and box model */
    position: relative;
    display: -ms-flexbox;
    display: flex;
    margin-right: 0.9375rem;
    /**
     * `item` element that wrap icons menus
     * should have this modifier
     *
     * @modifier icon
     */ }
    .event-details-header__item--icon {
      /* Display and box model */
      /* Center the icon vertically */
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          -ms-grid-row-align: center;
          align-items: center;
      height: 100%;
      /* Appearance */
      border-bottom: 0; }
  @media only screen and (min-width: 46.0625em) {
    .event-details-header {
      /* Defined header height */
      /* Display and box model */
      margin: 1.875rem 1.25rem;
      height: 5rem;
      /*
    * @element logo
    */
      /*
     * @element title-group
     */
      /*
     * @element title-group
     */ }
      .event-details-header__content {
        /* Display and box model */
        height: 5rem; }
      .event-details-header__logo {
        /* Display and box model */
        min-width: 5rem;
        max-width: 5rem;
        min-height: 5rem;
        max-height: 5rem; }
      .event-details-header__subtitle {
        /* Display and box model */
        max-width: 18.75rem;
        /* Appearance */
        font-size: 0.8125rem; }
      .event-details-header__title {
        /* Appearance */
        font-size: 1.5rem;
        line-height: 1.2em; } }
  @media only screen and (min-width: 65em) {
    .event-details-header {
      /* Display and box model */
      margin: 1.875rem;
      /*
     * @element title-group
     */ }
      .event-details-header__title-group {
        /* Display and box model */
        margin-left: 1.25rem; } }
  @media only screen and (min-width: 120em) {
    .event-details-header {
      /* Display and box model */
      max-width: 800px;
      margin: 0 auto;
      margin-top: 3.75rem;
      margin-bottom: 3.75rem; } }

/*------------------------------------*    EVENT-DETAILS-INFO
    \*------------------------------------*/
/**
 * This is the layout styling for hte event details info.
 *
 *
 * @block event-details-info
 */
.event-details-info {
  /* Display and box model */
  margin: 0 0.9375rem;
  padding: 15px 0;
  /*///// COLOR LEVEL /////*/
  /*
   * Turns fonts and rules to dark color.
   *
   * @modifier dark
   * @property text
   *
   */
  /*
   * Turns fonts and rules to white color.
   *
   * @modifier light
   * @property text
   *
   */
  /*///// HEADER LEVEL /////*/
  /*
   * @element header
   */
  /*
   * @element datetime
   */
  /*
   * @element headline
   */
  /*
   * @element subhead
   */
  /*///// ITEM LEVEL /////*/
  /*
   * @element item
   */
  /*
   * @element item-group
   */
  /*
   * @element section-header
   */
  /*
   * @element section-title
   */
  /*
   * @element section-action
   */
  /*
   * @element cell
   */
  /*
   * @element title
   */
  /*
   * @element time
   */
  /*
   * @element copy
   */
  /*
   * @element list
   */
  /*///// SOCIAL LEVEL /////*/
  /*///// MEDIA-QUERIES /////*/ }
  .event-details-info--text--dark {
    color: #444444;
    border-color: #F7F7F7; }
    .event-details-info--text--dark .event-details-info__item {
      /* Appearance */
      border-bottom: solid 1px #D5D5D5; }
    .event-details-info--text--dark .event-list__figure {
      /* Appearance */
      color: #444444; }
    .event-details-info--text--dark .event-details-info__item-group--icon {
      /* Appearance */
      color: #444444; }
    .event-details-info--text--dark .event-details-info__cell--meta {
      /* Appearance */
      color: rgba(68, 68, 68, 0.7); }
    .event-details-info--text--dark .event-details-info__item--no-border {
      /* Appearance */
      border-bottom: 0;
      padding-bottom: 0; }
      .event-details-info--text--dark .event-details-info__item--no-border:last-child {
        /* Display and box model */
        padding-bottom: 1.25rem;
        /* Appearance */
        border-bottom: solid 1px rgba(255, 255, 255, 0.5); }
  .event-details-info--text--light {
    color: white;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); }
    .event-details-info--text--light .event-details-info__item {
      /* Appearance */
      border-bottom: solid 1px rgba(255, 255, 255, 0.5); }
    .event-details-info--text--light .event-details-info__item-title {
      /* Appearance */
      color: #ffffff; }
    .event-details-info--text--light .event-details-info__item--no-border {
      /* Appearance */
      border-bottom: 0;
      padding-bottom: 0; }
      .event-details-info--text--light .event-details-info__item--no-border:last-child {
        /* Display and box model */
        padding-bottom: 1.25rem;
        /* Appearance */
        border-bottom: solid 1px rgba(255, 255, 255, 0.5); }
  .event-details-info__datetime {
    /* Display and box model */
    display: block;
    margin-bottom: 0.4375rem;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: currentColor; }
  .event-details-info__headline {
    /* Display and box model */
    margin-bottom: 0.4375rem;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.875rem;
    color: currentColor;
    /*
     * @modifier small
     * @property size
     * @for headline
     */ }
    .event-details-info__headline--size--small {
      /* Appearance */
      font-size: 1.0625rem; }
  .event-details-info__subhead {
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.2em;
    color: currentColor; }
  .event-details-info__item {
    /* Display and box model */
    margin-top: 1.25rem;
    padding-bottom: 1.25rem;
    /*
     * Adds a disply flex to an item
     *
     * @modifier flex
     * @for item
     */
    /*
     * Removes border
     *
     * @modifier no-border
     * @for item
     */
    /*
     * Removes padding-top
     *
     * @modifier no-pad-top
     * @for item
     */ }
    .event-details-info__item:last-child {
      /* Display and box model */
      padding-bottom: 0;
      /* Appearance */
      border-bottom: none; }
    .event-details-info__item--flex {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center; }
    .event-details-info__item--no-border {
      /* Appearance */
      border-bottom: 0; }
    .event-details-info__item--no-pad-top {
      /* Appearance */
      margin-top: 0; }
  .event-details-info__item-group {
    -ms-flex: 1;
        flex: 1; }
    .event-details-info__item-group--long {
      /* Display and box model */
      -ms-flex: 3;
          flex: 3; }
    .event-details-info__item-group--icon {
      /* Display and box model */
      -ms-flex: 0 0 2.8125rem;
          flex: 0 0 2.8125rem; }
    .event-details-info__item-group--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column;
      -ms-flex-align: end;
          align-items: flex-end; }
  .event-details-info__item-header {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    margin-bottom: 0.9375rem; }
  .event-details-info__item-title {
    /* Display and box model */
    -ms-flex: 2;
        flex: 2;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.3125rem; }
  .event-details-info__item-action {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end; }
  .event-details-info__cell {
    /*
       * @modifier meta
       */
    /*
       * @modifier meta
       */
    /*
       * @modifier meta
       */ }
    .event-details-info__cell--flex {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      margin-bottom: 0.3125rem; }
    .event-details-info__cell--meta {
      /* Appearance */
      font-family: 'proxima-nova', Helvetica, Arial, San-serif;
      font-weight: normal;
      color: inherit; }
      .event-details-info__cell--meta .event-details-info__copy,
      .event-details-info__cell--meta .event-details-info__time,
      .event-details-info__cell--meta .icon {
        font-size: 0.6875rem;
        line-height: 1.2em; }
    .event-details-info__cell--pad-bottom {
      /* Display and box model */
      margin-bottom: 0.9375rem; }
  .event-details-info__title {
    /* Display and box model */
    margin-bottom: 0.625rem;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    line-height: 1.4em;
    color: currentColor; }
    .event-details-info__title--featured {
      /* Display and box model */
      margin-bottom: 0;
      /* Appearance */
      text-transform: uppercase; }
  .event-details-info__time {
    /* Display and box model */
    display: block;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.875rem;
    color: currentColor; }
  .event-details-info__copy {
    /* Display and box model */
    display: inline;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1.4em;
    color: currentColor; }
  .event-details-info__list {
    /* Appearance */
    color: currentColor;
    list-style-type: disc;
    list-style-position: inside; }
  .event-details-info__social-list {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    padding-right: 0.625rem; }
  .event-details-info__social-item {
    /* Display and box model */
    -ms-flex: 1 0 2.8125rem;
        flex: 1 0 2.8125rem;
    max-width: 2.8125rem;
    margin-right: 0.9375rem; }
  @media only screen and (min-width: 46.0625em) {
    .event-details-info {
      /* Display and box model */
      margin: 0 1.25rem; } }
  @media only screen and (min-width: 65em) {
    .event-details-info {
      /* Display and box model */
      margin: 0 1.875rem;
      /*
     * @element headline
     */ }
      .event-details-info__headline {
        /* Appearance */
        font-size: 2.8125rem;
        /*
       * @modifier small
       * @property size
       * @for headline
       */ }
        .event-details-info__headline--size--small {
          /* Appearance */
          font-size: 1.3125rem; } }
  @media only screen and (min-width: 120em) {
    .event-details-info {
      /* Display and box model */
      max-width: 800px;
      margin: 0 auto; } }

/*------------------------------------*    EVENT-SIDEBAR
\*------------------------------------*/
/**
 *
 * Sidebar used in Events portal UI
 * Ex. Events Filter Sidebar
 *
 * @block event-sidebar
 */
.event-sidebar {
  /*
   * Wraps containing elements
   * within a sidebar.
   *
   * @element container
   */ }
  .event-sidebar__container {
    /* Display and box model */
    width: 100%;
    padding: 0 1.875rem; }
  .event-sidebar__item {
    /* Appearance */
    background: transparent;
    border-top: solid 1px #D5D5D5; }
    .event-sidebar__item--no-border-top {
      /* Appearance */
      border-top: none; }
    .event-sidebar__item--is-active {
      /* Appearance */
      color: #186ca6; }
      .event-sidebar__item--is-active .icon {
        /* Appearance */
        color: #186ca6; }
      .event-sidebar__item--is-active .event-sidebar__title {
        /* Appearance */
        color: #186ca6; }
  .event-sidebar__title-group {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
     width: 100%;
     /* Appearance */
     background: transparent;
     -webkit-appearance: none;
     border: 0; }
  .event-sidebar__title {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: 0.9375rem 0;
    width: 100%;
    /* Appearance */
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    text-transform: uppercase;
    cursor: pointer; }
  @media only screen and (min-width: 46.0625em) {
    .event-sidebar {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      height: auto;
      position: relative;
      overflow: hidden;
      backface-visibility: hidden;
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
      max-width: 33.33333%;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -ms-flex-align: stretch;
          align-items: stretch;
      -ms-flex-pack: start;
          justify-content: flex-start;
      -ms-flex-order: 0;
          order: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      /* Appearance */
      border-left: solid 1px #D5D5D5;
      /*
     * Wraps containing elements
     * within a sidebar.
     *
     * @element container
     */ }
      .event-sidebar__container {
        /* Display and box model */
        width: 100%;
        padding: 0 0.9375rem; } }
  @media only screen and (min-width: 65em) {
    .event-sidebar {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      height: auto;
      position: relative;
      overflow: hidden;
      backface-visibility: hidden;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
      max-width: 25%;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -ms-flex-align: stretch;
          align-items: stretch;
      -ms-flex-pack: start;
          justify-content: flex-start;
      -ms-flex-order: 0;
          order: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-style: -ms-autohiding-scrollbar;
      /*
     * Wraps containing elements
     * within a sidebar.
     *
     * @element container
     */ }
      .event-sidebar__container {
        /* Display and box model */
        padding: 0 1.875rem; } }

/*------------------------------------*    FILTER BASIC
\*------------------------------------*/
/**
 * The filter pill. Rounded orange
 * pill containing a current specific filter/search-query.
 * It contains text describing the filter value,
 * and a button to clear this specific filter.
 *
 * @block filter-pill
 */
.filter-pill {
  /* Display and box model */
  padding: .5em;
  padding-right: 1em;
  margin: 0.2em 0;
  display: -ms-inline-flexbox;
  display: inline-flex;
  /* center children vertically */
  -ms-flex-align: center;
      align-items: center;
  /* Appearance */
  border-radius: 40px;
  background: #FF6800;
  color: #ffffff;
  /**
   * The filter-pill's text content
   * indicating the value of the selected filter.
   *
   * @element pill-text
   */
  /**
   * X button to clear a specific filter.
   * Should be inside the `filter-pill` element.
   *
   * @element pill-remove
   */
  /**
   * Give it a nice hover effect
   * on medium-up screens.
   */ }
  .filter-pill__text {
    /* Display and box model */
    /* Fill available space
    and show `...` if it doesn't
    fit. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-flex: 1;
        flex: 1;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem; }
  .filter-pill__remove {
    /* Display and box model */
    position: relative;
    display: inline-block;
    /** Appearance */
    font-family: "x-font";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    font-variant: normal;
    text-transform: none;
    line-height: 1px;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Separate a bit from the pill-text element */
    margin-right: .35em;
    /* Appearance */
    font-size: 0.8125rem;
    line-height: .75em;
    text-decoration: none;
    color: #ffffff; }
    .filter-pill__remove:before {
      content: ""; }
    .filter-pill__remove:hover {
      /* Appearance */
      color: #ffffff; }
  @media only screen and (min-width: 46.0625em) {
    .filter-pill {
      /* Appearance */
      transition: transform 0.2s ease-in-out; }
      .filter-pill:hover {
        /* Appearance */
        cursor: pointer;
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } }

/*------------------------------------*    FORM
\*------------------------------------*/
/**
 * Generic set of styles for form elements and structures
 *
 *
 * @block form
 */
.input-date {
  /* Display and box model */
  display: inline-block;
  outline: none;
  width: 100%;
  height: 2.8125rem;
  padding: 0;
  /* Appearance */
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
  background-color: white;
  border: solid 1px #444444;
  border-radius: 0.1875rem;
  transition: border box-shadow .3s;
  color: #444444;
  font-family: "proxima-nova-regular", helvetica, Arial, San-serif;
  font-size: 0.9375rem;
  font-weight: 100;
  letter-spacing: 0.00156rem;
  text-indent: 1em;
  text-indent: 2.4em;
  background: url(../img/icon-calendar.svg) 1em 50% no-repeat; }
  .input-date:focus {
    background-color: white;
    border: solid 1px #167ce3;
    border-color: #167ce3;
    animation: pulse-focus 1s ease-in-out infinite; }
  .input-date:focus, .input-date::-webkit-autofill {
    text-indent: 2.4em;
    background: url(../img/icon-calendar-selected.svg) 1em 50% no-repeat; }

/**
 * Basic forms. Mainly for layout.
 * Made up of content (containing the fields)
 * + footer (containing the buttons).
 *
 * Use a <form> tag.
 *
 * @block form-basic
 */
.form-basic {
  display: block;
  padding: 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  /*
   * Hide form-basic from view
   *
   * @modifier hidden
   */
  /*
   * Adds a border-tops.
   * Ex. Used in sidebar on X Builder.
   *
   * @modifier border-top
   */
  /**
   * The form's content. This will contain
   * the error messages and fields.
   *
   * @element content
   */
  /**
   * Wraps the input fields.
   * Used to separate inputs from list of errors.
   *
   * @element fields
   */
  /**
   * Contains the input blocks.
   * This element is *not* the input itself,
   * just used to position the input blocks.
   * You will need to include other input blocks
   * inside this element. Example: `form-input`
   *
   * @element input
   */
  /**
   * Wraps blocks columnized blocks.
   * Applies a display:flex on medium-up
   *
   * @element input-group
   */
  /**
   * Contains the submit and cancel buttons.
   * Sibling of the `content` element. Separated
   * by a horizontal line.
   *
   * @element footer
   */
  /**
   * Contains a button.
   * This is *not* the <button> element itself.
   *
   * @element button
   */
  /**
   * Standalone button horizontally centered.
   * Used for example for buttons that fill forms
   * with dummy data.
   *
   * @element action
   */
  /**
   * Used when displaying descriptive messages within a form
   *
   * @element message
   */
  /**
   * Medium up screen size.
   * In short:
   * - Buttons are floated left and right instead of
   * being on top of each other.
   * - Footer needs to look rounded like
   * the containing modal.
   */ }
  .form-basic--hidden {
    /* Display and box model */
    display: none; }
  .form-basic--border-top {
    /* Display and box model */
    padding-top: 1.875rem;
    /* Appearance */
    border-top: solid 1px #D5D5D5; }
  .form-basic__content {
    /* Use the modal-content mixin
    so it stays in sync with other modal
    content */
    /* Display and box model */
    padding: 15px 0;
    padding-top: 0;
    /* Appearance */
    background: #ffffff;
    /* Accounts for the difference in top padding
    due to the labels line-height */
    padding-bottom: 0;
    /**
     * Adds spacing to bottom.
     *
     * @modifier pad-bottom
     * @for content
     */
    /**
     * Removes white BG
     *
     * @modifier transparent
     * @for content
     */ }
    .form-basic__content:first-child {
      padding-top: 1.875rem; }
    .form-basic__content--pad-bottom {
      /* Display and box model */
      padding-bottom: 1.875rem; }
    .form-basic__content--transparent {
      /* Appearance */
      background: transparent; }
    .form-basic__content--no-pad-top:first-child {
      /* Appearance */
      padding-top: 0; }
    .form-basic__content--no-pad {
      /* Display and box model */
      padding: 0; }
      .form-basic__content--no-pad:first-child {
        /* Appearance */
        padding-top: 0; }
      .form-basic__content--no-pad .form-input {
        padding: 0; }
      .form-basic__content--no-pad .form-input__col {
        padding: 0; }
  .form-basic__fields {
    /* Display and box model */
    padding: 1.875rem 0;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5;
    /**
     * Adds a shaded background to field groups.
     *
     * @modifer shaded
     * @property style
     */ }
    .form-basic__fields:first-child {
      /* Display and box model */
      padding-top: 0;
      padding-bottom: 20px; }
    .form-basic__fields:last-child {
      /* Display and box model */
      padding-bottom: 0;
      /* Appearance */
      border-bottom: 0; }
    .form-basic__fields--style--shaded {
      /* Display and box model */
      padding-top: 1.25rem;
      margin-bottom: 1.25rem;
      /* Appearance */
      background: whitesmoke;
      border-radius: 0.625rem; }
      .form-basic__fields--style--shaded:last-child {
        /* Display and box model */
        margin-bottom: 0; }
  .form-basic__input {
    padding-bottom: 1.25rem;
    /**
     * Adds spacing to top.
     *
     * @modifier spacing-top
     * @for input
     */
    /**
     * Adds spacing to top.
     *
     * @modifier split
     * @for input-group
     */ }
    .form-basic__input:last-child {
      padding-bottom: 0; }
    .form-basic__input--spacing-top {
      /* Display and box model */
      margin-top: 2.8125rem; }
    .form-basic__input--split {
      /* Display and box model */
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;
      /* Appearance */
      border-bottom: solid 1px #D5D5D5; }
      .form-basic__input--split:first-child {
        /* Display and box model */
        padding-top: 0; }
      .form-basic__input--split:last-child {
        /* Display and box model */
        padding-bottom: 0;
        /* Appearance */
        border-bottom: 0; }
  .form-basic__input-group {
    /* Display and box model */
    padding: 0;
    padding-bottom: 1.25rem;
    width: 100%;
    /**
     * Adds spacing to top.
     *
     * @modifier split
     * @for input-group
     */
    /**
     * Adds border to top.
     *
     * @modifier border-top
     * @for input-group
     */
    /**
     * Adds spacing to top.
     *
     * @modifier sidebar
     * @for input-group
     */ }
    .form-basic__input-group--split {
      /* Display and box model */
      padding: 1.25rem 0;
      /* Appearance */
      border-bottom: solid 1px #D5D5D5; }
      .form-basic__input-group--split:first-child {
        /* Display and box model */
        padding-top: 0; }
      .form-basic__input-group--split:last-child {
        /* Display and box model */
        padding-bottom: 0;
        /* Appearance */
        border-bottom: 0; }
    .form-basic__input-group--border-top {
      /* Display and box model */
      padding-top: 1.25rem;
      /* Appearance */
      border-top: solid 1px #D5D5D5; }
    .form-basic__input-group--sidebar .form-input__col:first-child {
      /* Display and box model */
      margin-right: 0.625rem; }
    .form-basic__input-group--sidebar .form-input__col:last-child {
      /* Display and box model */
      margin-left: 0.625rem; }
  .form-basic__footer {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    padding: 1.25rem;
    /* Appearance */
    background: #F7F7F7;
    border-top: solid 1px #D5D5D5;
    /*
      * @element
      */ }
    .form-basic__footer--pad-top {
      /* Display and box model */
      margin-top: 1.875rem;
      /* Appearance */
      background: transparent;
      border-color: #D5D5D5; }
  .form-basic__button {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    padding: 0.3125rem 0;
    margin-left: 1.875rem;
    /* Appearance */
    text-align: left;
    /* The submit button
    should float to the right */ }
    .form-basic__button:first-child {
      /* Display and box model */
      margin-left: 0; }
    .form-basic__button:last-child {
      /* Appearance */
      text-align: right; }
  .form-basic__action {
    /* Appearance */
    text-align: center; }
  .form-basic__message {
    /* Display and box model */
    padding: 15px 0;
    /* Appearance */
    color: #444444;
    font-size: 0.8125rem;
    line-height: 1.4em; }
  @media only screen and (min-width: 46.0625em) {
    .form-basic {
      /**
     * Wraps blocks columnized blocks.
     * Applies a display:flex on medium-up
     *
     * @element input-group
     */
      /**
     * Footer expands to contain
     * buttons next to each other.
     */
      /**
     * Cancel button is now located to the left,
     * and Save button to the right.
     */ }
      .form-basic__input-group {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: end;
            align-items: flex-end; }
      .form-basic__footer {
        /* Display and box model */
        padding: 1.25rem;
        /* Appearance */
        /* Rounded borders because it's in a modal
      with rounded borders. May make more sense
      as a modifier, but given that currently there's
      no form footer outside modals, rounded borders
      as default seems reasonable. */
        border-radius: 0.1875rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0; }
      .form-basic__button {
        /* Cancels margin in mobile version */
        margin-right: 0;
        /* Cancels padding in mobile version */
        padding: 0;
        /* Cancels margin in mobile version */ }
        .form-basic__button:last-of-type {
          margin-left: 0; } }
  @media only screen and (min-width: 120em) {
    .form-basic {
      /* Display and box model */
      max-width: 800px;
      margin: 0 auto; } }

/*------------------------------------*    FORM-FOOTER
\*------------------------------------*/
/**
 * Container for label + input. Use this to wrap
 * inputs used in a form.
 *odal
 *
 * @block form-footer
 */
.form-footer {
  /* Display and box model */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  /* Appearance */
  background: #F7F7F7;
  border-top: solid 1px #D5D5D5;
  /*
   * @modifier blue
   * @property color
   */
  /*
   * @modifier pad-top
   */
  /*
   * Used when nav is also in use.
   *
   * @modifier stacked
   */
  /**
   * Wraps contents of form-footer.
   *
   * @element container
   */
  /*
   * Positions blocks of items.
   *
   * @element col
   */
  /**
   * Contains a button.
   * This is *not* the <button> element itself.
   *
   * @element button
   */ }
  .form-footer--color--blue {
    /* Appearance */
    background: rgba(26, 48, 75, 0.95); }
  .form-footer--pad-top {
    /* Display and box model */
    margin-top: 1.875rem;
    /* Appearance */
    background: transparent;
    border-color: #D5D5D5; }
  .form-footer--stacked {
    /* Display and box model */
    bottom: 5.375rem; }
  .form-footer__container {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    padding: 1.25rem; }
  .form-footer .button {
    margin-right: 0.9375rem; }
    .form-footer .button:last-child {
      margin-right: 0; }
  .form-footer__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 100%;
    /*
     * Positions blocks of items at the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     *
     * @modifier end
     * @for col
     */
    /*
     * Used to extend a column by 2.
     *
     * @modifier long
     * @for col
     */ }
    .form-footer__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start;
      margin-right: 0.9375rem; }
    .form-footer__col--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end; }
    .form-footer__col--long {
      /* Display and box model */
      -ms-flex: 2;
          flex: 2; }
  .form-footer__button {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    padding: 0.3125rem 0;
    margin-left: 0.9375rem;
    /* Appearance */
    text-align: left;
    /* The submit button
    should float to the right */ }
    .form-footer__button:first-child {
      /* Display and box model */
      margin-left: 0; }
    .form-footer__button:last-child {
      /* Appearance */
      text-align: right; }

/*------------------------------------*    FORM-INPUT
\*------------------------------------*/
/**
 * Container for label + input. Use this to wrap
 * inputs used in a form.
 *
 *
 * This block does *not* contain the input itself.
 * You will need to use another block for the input
 * (example: `text-field`)
 * Given that the input is another block, adding an error
 * modifier to this block will not affect the input. If you want
 * the input to error too, you will also need to apply the modifier
 * to the input block (example: `text-field--error`).
 *
 * @block form-input
 */
.form-input {
  /* Display and box model */
  -ms-flex: 1;
      flex: 1;
  padding: 0 1.25rem;
  /**
   * This positions the encompassed blocks.
   *
   * @element col
   */
  /**
   * Used to display icons and symbols alongside a input.
   *
   * @element figure
   */
  /**
   * The input's label. Use a `<label>` tag.
   *
   * @element label
   */
  /**
   * Indicates that an input is required.
   * Place this after the label. Make sure
   * to use an inline element like `<span>`
   *
   * @element required
   */
  /**
   * Postions the count helper element.
   * Add items to the right of input lable to
   * help empahsize or assist w/ input.
   *
   * Ex. Character counter.
   *
   * @element helper
   */
  /**
   * Floats next to the input-group row.
   *
   * Ex. Add/Remove Buttons
   *
   * @element icon
   */
  /**
   * Contains Action Items on Mobile
   *
   * @element action
   */
  /**
   * Aligns buttons in footer
   *
   * @element button
   */
  /**
   * Wraps the input element. Use a block element
   * such as `<div>`.
   *
   * @element input-container
   */
  /**
   * Wraps the input element in a sub-container. Use a block element
   * such as `<div>`.
   *
   * @element sub-container
   */
  /**
   * The form input is in error state.
   * Things are highlighted in red.
   *
   * @modifier error
   */
  /**
   * Media query for min-width 641px, medium screens
   */
  /**
     * Floats next to the input-group row.
     *
     * Ex. Add/Remove Buttons
     *
     * @element icon
     */ }
  .form-input__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    padding: 0 1.25rem;
    padding-bottom: 0.9375rem;
    /*
     * Adds padding to the top
     * Ex. when used in a form-input__col
     *
     */
    /**
     * Aligns center
     *
     * @modifier center
     * @for col
     */
    /**
     * Removes padding.
     *
     * @modifier no-pad
     * @for col
     */
    /**
     * Changes size to proportion of 2.
     *
     * @modifier medium
     * @property size
     * @for col
     */
    /**
     * Changes size to proportion of 3.
     *
     * @modifier large
     * @property size
     * @for col
     */ }
    .form-input__col:last-child {
      padding-bottom: 0; }
    .form-input__col--pad-top {
      /* Display and box model */
      margin-top: 1.25rem; }
    .form-input__col--center {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-pack: center;
          justify-content: center;
      padding: 0.625rem;
      /* Appearance */
      text-align: center; }
    .form-input__col--no-pad {
      /* Display and box model */
      padding: 0; }
    .form-input__col--size--medium {
      /* Display and box model */
      -ms-flex: 2;
          flex: 2; }
    .form-input__col--size--large {
      /* Display and box model */
      -ms-flex: 3;
          flex: 3; }
  .form-input__figure {
    /* Appearance */
    text-align: center; }
  .form-input__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    margin-bottom: .35em;
    /* Appearance */
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .form-input__required {
    /* Display and box model */
    margin-left: .35em;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #FF6800; }
  .form-input__helper {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    text-align: right;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #186ca6;
    font-size: 0.5625rem;
    text-transform: none;
    letter-spacing: normal;
    /**
     * Styles the helper text bold.
     *
     * @modifier important
     * @for helper
     */
    /**
     * Displays text red.
     * Use to show a characters are close to the limit.
     *
     * @modifier low
     * @for helper
     */ }
    .form-input__helper--important {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal; }
    .form-input__helper--low {
      color: #E74C3C; }
  .form-input__icon {
    /* Display and box model */
    display: none; }
  .form-input__footer {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between; }
  .form-input__input-container {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center; }
    .form-input__input-container--grouped .text-field {
      /* Display and box model */
      -ms-flex: 1;
          flex: 1;
      /* Appearance */
      border-radius: 0 0.1875rem 0.1875rem 0;
      border-left: none; }
    .form-input__input-container--button-group .text-field {
      /* Display and box model */
      -ms-flex: 1;
          flex: 1;
      /* Appearance */
      border-radius: 0.1875rem 0 0 0.1875rem;
      border-right: none; }
    .form-input__input-container--button-group .button {
      /* Display and box model */
      -ms-flex: 1;
          flex: 1;
      max-width: 2.1875rem;
      min-width: 2.1875rem;
      height: 2.1875rem;
      /* Appearance */
      box-shadow: none;
      border-radius: 0 0.1875rem 0.1875rem 0;
      border-left: none; }
    .form-input__input-container--button-group .icon {
      color: #ffffff; }
  .form-input__color-input {
    /* Display and box model */
    -ms-flex: 1 0 2.1875rem;
        flex: 1 0 2.1875rem;
    max-width: 2.1875rem; }
  .form-input__color {
    /* Display and box model */
    display: block;
    height: 2.1875rem;
    border: solid 1px #ccd2de;
    /* Appearance */
    border-radius: 0.1875rem 0 0 0.1875rem;
    background: #444444; }
  .form-input__sub-container {
    width: 100%; }
  .form-input--error .form-input__label {
    color: #E74C3C; }
  @media only screen and (min-width: 46.0625em) {
    .form-input {
      /**
     * Floats next to the input-group row.
     *
     * Ex. Add/Remove Buttons
     *
     * @element icon
     */
      /**
     * This positions the encompassed blocks.
     *
     * @element col
     */
      /**
     * Contains Action Items on Mobile
     *
     * @element action
     */ }
      .form-input__icon {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 1;
            flex: 1;
        max-width: 1.25rem; }
        .form-input__icon .button-icon {
          /* Appearance */
          text-align: center;
          font-size: 20px; }
          .form-input__icon .button-icon:before {
            /* Display and box model */
            margin-top: 0.1875rem; }
        .form-input__icon--left {
          -ms-flex-pack: start;
              justify-content: flex-start;
          margin-left: 1.25rem; }
        .form-input__icon--right {
          -ms-flex-pack: end;
              justify-content: flex-end;
          margin-right: 1.25rem; }
      .form-input__col {
        /* Display and box model */
        padding-bottom: 0; }
      .form-input__footer {
        /* Display and box model */
        display: none; } }
  .form-input__icon {
    /* Display and box model */
    padding-top: 2.1875rem; }

/*------------------------------------*    DASH REPORTS
\*------------------------------------*/
/**
 * Postions and styles elements relative to the dashboard;
 *
 *
 * @block dash-reports
 */
.dash-reports {
  /* Display and box model */
  display: block;
  margin-bottom: 1.875rem;
  /**
   * Wraps and positions items
   *
   * @element item
   */
  /**
   * Styles Title
   *
   * @element title
   */
  /**
   * Wraps Chart Object
   *
   * @element chart
   */
  /**
   * Wraps Details Items like Datetime/Actions
   *
   * @element details
   */
  /**
   * Media query for min-width 641px, medium screens and up
   */
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: start;
      align-items: flex-start;
  /**
     * Wraps and positions items
     *
     * @element item
     */
  /**
   * Media query for min-width 641px, medium screens and up
   */
  /* Display and box model */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /**
     * Wraps and positions items
     *
     * @element item
     */ }
  .dash-reports__item {
    /* Display and box model */
    margin: 15px; }
  .dash-reports__title {
    /* Display and box model */
    padding: 15px 0;
    /* Appearance */
    border-top: solid 0.1875rem #186ca6;
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: #444444;
    text-transform: uppercase; }
  .dash-reports__chart {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center; }
  .dash-reports__details {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-align: center;
        align-items: center;
    padding-top: 0.9375rem; }
    .dash-reports__details:last-child {
      -ms-flex-pack: end;
          justify-content: flex-end; }
  .dash-reports__item {
    /* Display and box model */
    width: 45%;
    margin: 15px; }
    .dash-reports__item:first-child {
      /* Display and box model */
      margin-left: 0; }
    .dash-reports__item:nth-of-type(2n) {
      /* Display and box model */
      margin-right: 0; }
  .dash-reports__item {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    width: 33%;
    margin: 0 15px; }
    .dash-reports__item:first-child {
      /* Display and box model */
      margin-left: 0; }
    .dash-reports__item:nth-of-type(2n) {
      /* Display and box model */
      margin-right: 15px; }
    .dash-reports__item:nth-of-type(3n) {
      /* Display and box model */
      margin-right: 0; }

/*------------------------------------*    DETAILS-LIST
\*------------------------------------*/
/**
 *
 *
 * @block details-list
 */
.details-list {
  /*///// ACTION STYLES /////*/ }
  .details-list__item {
    /* Display and box model */
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
    padding: 15px; }
    .details-list__item:nth-of-type(even) {
      background: rgba(21, 138, 202, 0.05); }
  .details-list__title {
    /* Display and box model */
    margin-bottom: 0.625rem;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444; }
    .details-list__title--no-pad-bottom {
      /* Display and box model */
      margin-bottom: 0; }
  .details-list__meta-list {
    /* Display and box model */ }
  .details-list__cell {
    /* Display and box model */
    padding: 0.3125rem 0; }
  .details-list__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Display and box model */
    margin-bottom: 0;
    margin-right: .35em;
    /* Appearance */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .details-list__value {
    /* Display and box model */
    max-width: 12.5rem;
    /* Appearance */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .details-list__action {
    /* Display and box model */
    display: block; }
  .details-list__action-group {
    /* Display and box model */
    position: absolute;
    background: rgba(59, 155, 220, 0.95);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: start;
        align-items: flex-start;
    /* Other */
    -webkit-backdrop-filter: blur(3px); }
    .details-list__action-group--hidden {
      display: none; }
  .details-list__action-item {
    /* Display and box model */
    padding: 20px; }
    .details-list__action-item:last-child {
      margin-bottom: 0; }
  .details-list__action-button {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    /* Appearance */
    color: white;
    cursor: pointer; }
    .details-list__action-button .icon {
      /* Display and box model */
      margin-right: .5em;
      /* Appearance */
      font-size: 1.25rem; }
  .details-list__action-label {
    /* Display and box model */
    padding-bottom: 0;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.6875rem;
    color: #ffffff;
    text-align: center;
    text-transform: uppercase; }
  @media only screen and (min-width: 46.0625em) {
    .details-list {
      /*///// ACTION STYLES /////*/ }
      .details-list__meta-list {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex; }
      .details-list__cell {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: baseline;
            align-items: baseline;
        padding-right: 0.9375rem; }
        .details-list__cell:nth-of-type(1) {
          /* Display and box model */
          padding-left: 0; }
      .details-list__action-item {
        /* Display and box model */
        padding: 0.625rem 0;
        margin: 0 0.9375rem;
        max-width: 5rem;
        min-width: 5rem;
        /* Appearance */
        background: #2381c1;
        border-radius: 0.1875rem; }
      .details-list__action-group {
        /* Display and box model */
        -ms-flex-direction: row;
            flex-direction: row;
        -ms-flex-align: center;
            -ms-grid-row-align: center;
            align-items: center; }
      .details-list__action-button {
        /* Display and box model */
        -ms-flex-direction: column;
            flex-direction: column; }
        .details-list__action-button .icon {
          /* Display and box model */
          margin-right: 0;
          padding-bottom: .35em; } }

/*------------------------------------*    ICON
\*------------------------------------*/
/**
 * Set of styles to positon and style messages through-out the system.
 *
 *
 * @block icon
 */
.icon {
  /* Display and box model */
  position: relative;
  display: inline-block;
  /** Appearance */
  font-family: "x-font";
  font-style: normal;
  font-weight: normal;
  speak: none;
  text-decoration: inherit;
  text-align: center;
  text-transform: none;
  font-variant: normal;
  text-transform: none;
  line-height: 1px;
  -webkit-text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Appearance */
  color: inherit;
  /*
   * Adds spacing for when a badge is the left
   * of a label
   *
   * @modifier left
   */
  /*
  * Location Circle Icon
  *
  * @element location-circle
  * @property icon
  */
  /*
  * Location Icon
  *
  * @element location
  * @property icon
  */
  /**
   * Help icon
   *
   * @modifier help
   * @property icon
   */
  /*
  * search Icon
  *
  * @element search
  * @property icon
  */
  /*
  * Grid Icon
  *
  * @element grid
  * @property icon
  */
  /*
  * List ALT Icon
  *
  * @element list-1
  * @property icon
  */
  /*
  * Arrow Right Icon
  *
  * @element arrow-left
  * @property icon
  */
  /*
  * Arrow Right Icon
  *
  * @element arrow-right
  * @property icon
  */
  /*
  * Arrow Up Icon
  *
  * @element arrow-up
  * @property icon
  */
  /*
  * Arrow Down Icon
  *
  * @element arrow-down
  * @property icon
  */
  /*
  * Arrow Solid Down Icon
  *
  * @element arrow-solid-down
  * @property icon
  */
  /*
  * Arrow Solid Left Icon
  *
  * @element arrow-solid-left
  * @property icon
  */
  /*
  * Arrow Solid Right Icon
  *
  * @element arrow-solid-right
  * @property icon
  */
  /*
  * Arrow Solid Up Icon
  *
  * @element arrow-solid-up
  * @property icon
  */
  /*
  * Clone Icon
  *
  * @element clone
  * @property icon
  */
  /*
  * Conditional Icon
  *
  * @element conditional
  * @property icon
  */
  /*
  * Play Icon
  *
  * @element play
  * @property icon
  */
  /*
  * Move Icon
  *
  * @element move
  * @property icon
  */
  /*
  * Settings Icon
  *
  * @element settings
  * @property icon
  */
  /*
  * Tools Icon
  *
  * @element tools
  * @property icon
  */
  /*
  * Note Icon
  *
  * @element note
  * @property icon
  */
  /*
  * Logout Icon
  *
  * @element note
  * @property logout
  */
  /*
  * Run Icon
  *
  * @element run
  * @property icon
  */
  /*
  * Trophy Icon
  *
  * @element trophy
  * @property icon
  */
  /*
  * Chat Icon
  *
  * @element Chat
  * @property icon
  */
  /*
  * user Icon
  *
  * @element user
  * @property icon
  */
  /*
  * profile Icon
  *
  * @element profile
  * @property icon
  */
  /*
  * Award Icon
  *
  * @element award
  * @property icon
  */
  /*
  * duplicate Icon
  *
  * @element duplicate
  * @property icon
  */
  /*
  * trash Icon
  *
  * @element trash
  * @property icon
  */
  /*
  * lock Icon
  *
  * @element lock
  * @property icon
  */
  /*
  * lock-2 Icon
  *
  * @element lock-2
  * @property icon
  */
  /*
  * meeting Icon
  *
  * @element meeting
  * @property icon
  */
  /*
  * thumbsup Icon
  *
  * @element thumbsup
  * @property icon
  */
  /*
  * edit Icon
  *
  * @element edit
  * @property icon
  */
  /*
  * View Icon
  *
  * @element view
  * @property icon
  */
  /*
  * Calendar Icon
  *
  * @element calendar
  * @property icon
  */
  /*
  * Warning Icon
  *
  * @element warning
  * @property icon
  */
  /*
  * Add Icon
  *
  * @element add
  * @property icon
  */
  /*
  * Add Knockout
  *
  * @element add-knockout
  * @property icon
  */
  /*
  * Add Remove
  *
  * @element remove
  * @property icon
  */
  /*
  * Activity Icon
  *
  * @element filter
  * @property icon
  */
  /*
  * Activity Icon
  *
  * @element activity
  * @property icon
  */
  /*
  * Back Icon
  *
  * @element back
  * @property icon
  */
  /*
  * Clock Icon
  *
  * @element clock
  * @property icon
  */
  /*
  * Close Icon
  *
  * @element close-knockout
  * @property icon
  */
  /*
  * Dashboard Icon
  *
  * @element dashboard
  * @property icon
  */
  /*
  * Graduation Cap Icon
  *
  * @element graduationcap
  * @property icon
  */
  /*
  * List Icon
  *
  * @element list
  * @property icon
  */
  /*
  * Calendar 2 Icon
  *
  * @element calendar-2
  * @property icon
  */
  /*
  * Briefcase Icon
  *
  * @element graduationcap
  * @property icon
  */
  /*
  * Clipboard Icon
  *
  * @element clipboard
  * @property icon
  */
  /*
  * Clipboard Icon
  *
  * @element clipboard-2
  * @property icon
  */
  /*
  * Horizontal ellipsis
  *
  * @element clipboard
  * @property icon
  */
  /*
  * Vertical ellipsis
  *
  * @element ellipsis-vert
  * @property icon
  */
  /*
  * Check Icon
  *
  * @element check
  * @property icon
  */
  /*
  * cash Icon
  *
  * @element cash
  * @property icon
  */
  /*
  * Dollarsign Icon
  *
  * @element dollarsign
  * @property icon
  */
  /*
  * Bookmark
  *
  * @modifier bookmark
  */
  /*///// SOCIAL VALUES /////*/
  /*
   * Facebook
   *
   * @modifier facebook
   * @property social
   */
  /*
   * Twitter
   *
   * @modifier twitter
   * @property social
   */
  /*
   * Google
   *
   * @modifier google
   * @property social
   */
  /*
   * Google-cal
   *
   * @modifier google-cal
   * @property social
   */
  /*
   * Windows
   *
   * @modifier windows
   * @property social
   */
  /*
   * Apple
   *
   * @modifier apple
   * @property social
   */
  /*///// SIZE VALUES /////*/
  /**
  * Matches inline font size.
  *
  * @modifier default
  * @property size
  * @for icon
  */
  /**
  * Use for tiny size
  *
  * @modifier tiny
  * @property size
  * @for icon
  */
  /**
  * Use for large size
  *
  * @modifier large
  * @property size
  * @for icon
  */
  /*///// COLOR VALUES /////*/
  /**
  * Makes icon red
  *
  * @modifier red
  * @property color
  * @for icon
  */
  /**
  * Makes icon blue
  *
  * @modifier blue
  * @property color
  * @for icon
  */
  /**
  * Makes icon green
  *
  * @modifier green
  * @property color
  * @for icon
  */
  /**
  * Makes icon orange
  *
  * @modifier orange
  * @property color
  * @for icon
  */
  /**
  * Makes icon white
  *
  * @modifier white
  * @property color
  * @for icon
  */ }
  .icon--left {
    /* Display and box model */
    margin-right: .35em; }
  .icon--location-circle:before {
    content: ""; }
  .icon--location:before {
    content: ""; }
  .icon--help:before {
    content: ""; }
  .icon--search:before {
    content: ""; }
  .icon--grid:before {
    content: ""; }
  .icon--list-1:before {
    content: ""; }
  .icon--arrow-left:before {
    content: ""; }
  .icon--arrow-right:before {
    content: ""; }
  .icon--arrow-up:before {
    content: ""; }
  .icon--arrow-down:before {
    content: ""; }
  .icon--arrow-solid-down:before {
    content: ""; }
  .icon--arrow-solid-left:before {
    content: ""; }
  .icon--arrow-solid-right:before {
    content: ""; }
  .icon--arrow-solid-up:before {
    content: ""; }
  .icon--clone:before {
    content: ""; }
  .icon--conditional:before {
    content: ""; }
  .icon--play:before {
    content: ""; }
  .icon--move:before {
    content: ""; }
  .icon--settings:before {
    content: ""; }
  .icon--tools:before {
    content: ""; }
  .icon--note:before {
    content: ""; }
  .icon--logout:before {
    content: ""; }
  .icon--run:before {
    content: ""; }
  .icon--trophy:before {
    content: ""; }
  .icon--chat:before {
    content: ""; }
  .icon--user:before {
    content: ""; }
  .icon--profile:before {
    content: ""; }
  .icon--award:before {
    content: ""; }
  .icon--duplicate:before {
    content: ""; }
  .icon--trash:before {
    content: ""; }
  .icon--lock:before {
    content: ""; }
  .icon--lock-2:before {
    content: ""; }
  .icon--meeting:before {
    content: ""; }
  .icon--thumbsup:before {
    content: ""; }
  .icon--edit:before {
    content: ""; }
  .icon--view:before {
    content: ""; }
  .icon--calendar:before {
    content: ""; }
  .icon--warning:before {
    content: ""; }
  .icon--add {
    /* Display and box model */
    margin-bottom: 0; }
    .icon--add:before {
      content: ""; }
  .icon--add-knockout {
    /* Display and box model */
    margin-bottom: 0; }
    .icon--add-knockout:before {
      content: ""; }
  .icon--remove {
    /* Display and box model */
    margin-bottom: 0; }
    .icon--remove:before {
      content: ""; }
  .icon--filter:before {
    content: ""; }
  .icon--activity:before {
    content: ""; }
  .icon--back:before {
    content: ""; }
  .icon--clock:before {
    content: ""; }
  .icon--close-knockout:before {
    content: ""; }
  .icon--dashboard:before {
    content: ""; }
  .icon--graduationcap:before {
    content: ""; }
  .icon--list:before {
    content: ""; }
  .icon--calendar-2:before {
    content: ""; }
  .icon--briefcase:before {
    content: ""; }
  .icon--clipboard:before {
    content: ""; }
  .icon--clipboard-2:before {
    content: ""; }
  .icon--ellipsis-horiz:before {
    content: ""; }
  .icon--ellipsis-vert:before {
    content: ""; }
  .icon--check:before {
    content: ""; }
  .icon--cash:before {
    content: ""; }
  .icon--dollarsign:before {
    content: ""; }
  .icon--bookmark:before {
    content: ""; }
  .icon--bookmark:hover:before {
    content: ""; }
  .icon--social--facebook {
    background: url("../img/social/icon-facebook.svg") 0 0 no-repeat;
    width: 2.8125rem;
    height: 2.8125rem;
    background-size: 100%; }
  .icon--social--twitter {
    background: url("../img/social/icon-twitter.svg") 0 0 no-repeat;
    width: 2.8125rem;
    height: 2.8125rem;
    background-size: 100%; }
  .icon--social--google {
    background: url("../img/social/icon-google.svg") 0 0 no-repeat;
    width: 2.8125rem;
    height: 2.8125rem;
    background-size: 100%; }
  .icon--social--google-cal {
    background: url("../img/social/icon-google-cal.svg") 0 0 no-repeat;
    width: 2.8125rem;
    height: 2.8125rem;
    background-size: 100%; }
  .icon--social--windows {
    background: url("../img/social/icon-windows.svg") 0 0 no-repeat;
    width: 2.8125rem;
    height: 2.8125rem;
    background-size: 100%; }
  .icon--social--apple {
    background: url("../img/social/icon-apple.svg") 0 0 no-repeat;
    width: 2.8125rem;
    height: 2.8125rem;
    background-size: 100%; }
  .icon--size--default {
    /* Appearance */
    font-size: inherit; }
  .icon--size--tiny {
    /* Appearance */
    font-size: 0.5625rem; }
  .icon--size--large {
    /* Appearance */
    font-size: 1.875rem; }
  .icon--color--red {
    /* Appearance */
    color: #E74C3C; }
  .icon--color--blue {
    /* Appearance */
    color: #186ca6; }
  .icon--color--green {
    /* Appearance */
    color: #1a6f43; }
  .icon--color--orange {
    /* Appearance */
    color: #FF6800; }
  .icon--color--white {
    /* Appearance */
    color: #ffffff; }

/*------------------------------------*    INPUT SWITCH
\*------------------------------------*/
/**
 * Native style switch
 *
 *
 * @block input-switch
 */
.input-switch {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  margin-bottom: .25em; }
  .input-switch label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    padding-bottom: 0;
    /* Appearance */
    text-align: left;
    cursor: pointer; }
  .input-switch input.switch {
    min-height: 1.875rem;
    font-size: 10px;
    position: relative;
    display: inline-block;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 53px;
    height: 30px;
    max-height: 1.875rem;
    line-height: 30px;
    border-radius: 15px;
    margin: 0;
    padding: 0;
    box-shadow: inset 0 0 0 2px #444444;
    cursor: pointer;
    border: none;
    background: #444444;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    transition: box-shadow .3s ease-in-out, padding .25s ease-in-out;
    transition-delay: .1s, 0s;
    /* Animations if supported */ }
    .input-switch input.switch:disabled {
      background: #444444; }
    .input-switch input.switch:checked {
      transition-delay: 0s, 0s;
      box-shadow: inset 0 0 0 17.14286px #1a6f43 !important;
      padding-left: 23px;
      background: #1a6f43;
      max-height: 1.875rem; }
    .input-switch input.switch.hit {
      animation: slide-off .35s ease both; }
    .input-switch input.switch.hit:checked {
      animation: slide-on  .35s ease both .05s; }
    .input-switch input.switch::before, .input-switch input.switch::after {
      content: ""; }
    .input-switch input.switch::after {
      /* Increases hit area */
      position: absolute;
      top: -8.66667px;
      left: -8.66667px;
      bottom: -8.66667px;
      right: -8.66667px; }
    .input-switch input.switch::before {
      display: inline-block;
      height: 26px;
      width: 26px;
      margin: 2px 0 0 2px;
      background-color: #ffffff;
      border-radius: 13px;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.35), 0 0 1px 1px rgba(0, 0, 0, 0.15);
      transition: all 0.1s ease 0.1s; }
    .input-switch input.switch:active::before {
      transition: all .1s ease .05s; }
    .input-switch input.switch.touch:hover::before {
      transition: all .0s ease .00s; }
    .input-switch input.switch:active::before, .input-switch input.switch.touch:hover::before {
      width: 34px; }
    .input-switch input.switch:active:checked::before, .input-switch input.switch.touch:hover:checked::before {
      margin-left: -6px; }

@-moz-document url-prefix() {
  .input-switch input.switch {
    width: 2.1875rem;
    /* Appearance */
    -moz-appearance: checkbox; } }

@keyframes slide-on {
  0% {
    padding-left: 0px; }
  60% {
    padding-left: 30px; }
  100% {
    padding-left: 28px; } }

@keyframes slide-off {
  0% {
    padding-left: 28px;
    text-indent: 0; }
  60% {
    padding-left: 0px;
    text-indent: -2px; }
  100% {
    padding-left: 0px;
    text-indent: 0; } }

/*------------------------------------*    LOADING HORIZONTAL
\*------------------------------------*/
/**
 * Horizontal loading animation. Used for example
 * below index tables when loading more records.
 *
 * This block needs 3 `item` elements as children.
 *
 * ```html
 * <div class="loading-horizontal">
 *   <div class="loading-horizontal__item"></div>
 *   <div class="loading-horizontal__item"></div>
 *   <div class="loading-horizontal__item"></div>
 * </div>
 * ```
 *
 * @block loading-horizontal
 */
.loading-horizontal {
  /**
   * Single dot that animates. Always have 3 of these.
   *
   * @element item
   */ }
  .loading-horizontal__item {
    /* Display and box model */
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 0.125rem;
    /* Appearance */
    background: #ffffff;
    border-radius: 100%;
    /* Other */
    animation: loading-horizontal__animation 2s ease-in-out infinite; }
    .loading-horizontal__item:nth-of-type(1) {
      animation-delay: 0.1s;
      background: #FF6800; }
    .loading-horizontal__item:nth-of-type(2) {
      animation-delay: 0.3s;
      transform: scale(1);
      background: #FF6800; }
    .loading-horizontal__item:nth-of-type(3) {
      animation-delay: 0.5s;
      transform: scale(0.9);
      background: #FF6800; }

@keyframes loading-horizontal__animation {
  0%, 100% {
    opacity: 1; }
  60% {
    opacity: 0; } }

/*------------------------------------*    MENU ACTION
\*------------------------------------*/
/**
 * Similar to Action Option element, but designed for menus.
 *
 *
 * @block menu-action
 */
.menu-action {
  /**
   * The links/buttons for the user to click on.
   * There can be more than one item.
   *
   * @element item
   */
  /**
   * The input's label. Use a `<label>` tag.
   *
   * @element label
   */ }
  .menu-action:first-child {
    /* Appearance */ }
    .menu-action:first-child .menu-action__item:first-child {
      /* Appearance */
      border-top: 0; }
  .menu-action__item {
    /* Display and box mode */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: 0.9375rem;
    /* Appearance */
    -webkit-appearance: none;
    cursor: pointer;
    background: #ffffff url(../img/icon-arrow-right.svg) 94% 50% no-repeat;
    background-size: 0.6875rem;
    border-top: solid 1px #D5D5D5;
    border-bottom: 0;
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #186ca6;
    font-size: 0.9375rem;
    text-align: left;
    text-decoration: none;
    /**
     * Removes Icon
     *
     * @modifier none
     * @property icon
     * @for item
     */
    /**
     * Replaces Chevron w/ Add
     *
     * @modifier add
     * @property icon
     * @for item
     */ }
    .menu-action__item--icon-none {
      /* Appearance */
      background: none; }
    .menu-action__item--icon-add {
      background: #ffffff url(../img/icon-add.svg) 94% 50% no-repeat;
      background-size: 1.1875rem; }
  .menu-action__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    padding-left: 0.625rem;
    padding-bottom: 0;
    /* Appearance */
    line-height: 1.6em; }

/*------------------------------------*    MENU HEADER
\*------------------------------------*/
/**
 * Footer for common components such as modals.
 *
 * Can contain a actions/buttons.
 *
 * @block menu-footer
 */
.menu-footer {
  /* Display and box model */
  padding: 1.25rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  /* Appearance */
  background: #F7F7F7;
  border-top: solid 1px #D5D5D5;
  text-align: center;
  color: #444444;
  text-align: center;
  /**
   *
   * @modifier no-pad
   */
  /**
   *
   * @modifier transparent
   * @property color
   */
  /**
   *
   * @modifier white
   * @property color
   */
  /**
   * This modifier is applied when the containing
   * block has rounded borders (example `modal-basic`).
   *
   * @modifier rounded
   */
  /**
   * Positions the action element in a menu-pane
   * Actions are located in the bottom of the menu.
   *
   * @element action-link
   */ }
  .menu-footer--no-pad {
    /* Display and box model */
    padding: 0; }
  .menu-footer--color--transparent {
    /* Appearance */
    background: transparent; }
  .menu-footer--color--white {
    /* Appearance */
    background: #ffffff; }
  .menu-footer--rounded {
    /* Appearance */
    border-radius: 0 0 5px 5px; }
  .menu-footer__action-link {
    /* Appearance */
    text-align: center;
    color: #186ca6; }
    .menu-footer__action-link:active, .menu-footer__action-link:visited {
      /* Appearance */
      color: #186ca6; }

/*------------------------------------*    MENU HEADER
\*------------------------------------*/
/**
 * Header for common components such as modals.
 *
 * Can contain a title, a back chevron (<), and a close button (x).
 *
 * @block menu-header
 */
.menu-header {
  /* Display and box model */
  padding: 0.9375rem 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  /* Appearance */
  background: #F7F7F7;
  border-bottom: solid 1px #D5D5D5;
  text-align: center;
  color: #444444;
  text-align: center;
  /**
   * This modifier is applied when the containing
   * block has rounded borders (example `modal-basic`).
   *
   * @modifier rounded
   */
  /**
   *
   * @modifier sidebar
   * @property style
   */
  /**
   * @element title
   */
  /* Mixin applied to buttons such as back (<) and close (x) */
  /**
   * (x) shaped button. Make sure to add
   * an `aria-label="close"` to the element.
   *
   * @element close
   */
  /**
   * Left facing chevron (<) back button.
   * Make sure you add `aria-label="Back"`
   * to the element.
   *
   * @element back
   */
  /**
   * Printer shaped button. Make sure to add
   * an `aria-label="print"` to the element.
   *
   * @element print
   */
  /**
   * Wrapper for Button Object
   *
   * @element button
   */
  /**
   * Media query for min-width 641px, medium screens
   */ }
  .menu-header--rounded {
    /* Appearance */
    border-radius: 5px 5px 0 0; }
  .menu-header--style--sidebar {
    /* Appearance */
    background: transparent;
    border-bottom: 0; }
    .menu-header--style--sidebar .menu-header__close {
      /* Display and box model */
      padding: 0;
      /* Appearance */
      font-size: 0.9375rem;
      color: #D5D5D5; }
  .menu-header__title {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    padding: 0 0.5rem;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    font-size: 1.0625rem;
    text-align: center;
    text-transform: uppercase; }
  .menu-header__close {
    padding: 0;
    border: none;
    -webkit-appearance: none;
    background: transparent;
    -webkit-color: none;
    font-size: inherit;
    /* Appearance */
    font-size: 1.1875rem;
    display: inline-block;
    color: #444444;
    cursor: pointer;
    /* Display and box model */
    padding-right: 0.9375rem; }
    .menu-header__close:before {
      /* Display and box model */
      position: relative;
      display: inline-block;
      /** Appearance */
      font-family: "x-font";
      font-style: normal;
      font-weight: normal;
      speak: none;
      text-decoration: inherit;
      text-align: center;
      text-transform: none;
      font-variant: normal;
      text-transform: none;
      line-height: 1px;
      -webkit-text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      content: ""; }
  .menu-header__back {
    padding: 0;
    border: none;
    -webkit-appearance: none;
    background: transparent;
    -webkit-color: none;
    font-size: inherit;
    /* Appearance */
    font-size: 1.1875rem;
    display: inline-block;
    color: #444444;
    cursor: pointer;
    /* Display and box model */
    padding-left: 0.9375rem; }
    .menu-header__back:before {
      /* Display and box model */
      position: relative;
      display: inline-block;
      /** Appearance */
      font-family: "x-font";
      font-style: normal;
      font-weight: normal;
      speak: none;
      text-decoration: inherit;
      text-align: center;
      text-transform: none;
      font-variant: normal;
      text-transform: none;
      line-height: 1px;
      -webkit-text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      display: block;
      content: ""; }
  .menu-header__print {
    padding: 0;
    border: none;
    -webkit-appearance: none;
    background: transparent;
    -webkit-color: none;
    font-size: inherit;
    /* Appearance */
    font-size: 1.1875rem;
    display: inline-block;
    color: #444444;
    cursor: pointer;
    /* Display and box model */
    padding-right: 0.9375rem;
    /*
     * When button is on the left
     */ }
    .menu-header__print:before {
      /* Display and box model */
      position: relative;
      display: inline-block;
      /** Appearance */
      font-family: "x-font";
      font-style: normal;
      font-weight: normal;
      speak: none;
      text-decoration: inherit;
      text-align: center;
      text-transform: none;
      font-variant: normal;
      text-transform: none;
      line-height: 1px;
      -webkit-text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      content: "";
      font-size: 1.3125rem; }
    .menu-header__print--left {
      /* Display and box model */
      padding-right: 0;
      padding-left: 0.9375rem; }
  .menu-header__button {
    padding: 0;
    border: none;
    -webkit-appearance: none;
    background: transparent;
    -webkit-color: none;
    font-size: inherit;
    /* Appearance */
    font-size: 1.1875rem;
    display: inline-block;
    color: #444444;
    cursor: pointer;
    /* Display and box model */
    padding-right: 0.9375rem;
    min-width: 2.1875rem;
    /*
     * When button is on the left
     */
    /*
     * Positons button element to start
     */
    /*
     * Positons button element to end
     */ }
    .menu-header__button--wide {
      min-width: 6.25rem; }
    .menu-header__button--left {
      /* Display and box model */
      padding-right: 0;
      padding-left: 0.9375rem; }
    .menu-header__button--flex-start {
      /* Display and box model */
      -ms-flex: 1;
          flex: 1;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .menu-header__button--flex-end {
      /* Display and box model */
      -ms-flex: 1;
          flex: 1;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end; }
  .menu-header__hide-from-desktop {
    /* Display and box model */
    display: none; }

/**
 * Navigation shown when we click on a title in the control nav.
 * This is *not* the menu pane, just the list of links.
 *
 * This block can later be extracted to be used by the filter nav.
 *
 * @block control-nav
 */
.menu-item {
  /* Display and box model */
  display: inline-block;
  width: 100%;
  /* Appearance */
  border: none;
  -webkit-appearance: none;
  background: transparent;
  -webkit-color: none;
  cursor: pointer;
  /**
   * The link element. You'll want to use an `<a>` tag.
   *
   * @element link
   */
  /**
   * Contains sub-menu elements
   *
   * @element sub-menu
   */
  /**
   * Styles labels within a menu-item
   *
   * @element label
   */ }
  .menu-item:first-child {
    padding-top: 0.9375rem; }
  .menu-item:last-child {
    padding-bottom: 0.9375rem; }
    .menu-item:last-child.menu-item__sub-menu-link {
      padding-bottom: 0;
      border-bottom: 0; }
  .menu-item__link {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    padding: 0.4375rem 0.9375rem;
    /* Appreance */
    font-size: 0.9375rem;
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    text-align: left;
    /**
     * Indicates the current link represents
     * the current page.
     *
     * @modifier active
     * @for link
     */
    /**
     * Disabled links. This only gives a disabled look,
     * disabling the link behavior should be done separately.
     *
     * @modifier disabled
     * @for link
     */ }
    .menu-item__link:hover {
      /* Appearance */
      background: rgba(21, 138, 202, 0.05); }
    .menu-item__link--active {
      /* Appearance */
      color: #444444; }
    .menu-item__link--disabled {
      /* Appearance */
      color: #D5D5D5;
      opacity: 0.5;
      cursor: default; }
    .menu-item__link .icon {
      /* Appearance */
      font-size: 1.0625rem; }
  .menu-item__sub-menu {
    /* Display and box model */
    margin: 0 1em;
    padding-bottom: 0 !important; }
    .menu-item__sub-menu .menu-item__link {
      /* Appearance */
      font-family: 'proxima-nova', Helvetica, Arial, San-serif;
      font-weight: normal; }
    .menu-item__sub-menu .menu-item:last-child {
      /* Display and box model */
      padding-bottom: 0; }
  .menu-item__label {
    /* Appearance */
    color: #444444; }

/**
 * Menu pane that contains things like the control bar's navigation,
 * or the filter pane. On medium and large screens,
 * it has an upward facing arrow that points to the button
 * that opened it. On small screens, it takes over the screen.
 *
 * This block cannot be used as HTML and CSS alone. Needs
 * javascript to be positioned correctly and have the correct dimensions.
 * Use the `menu-pane` component when using this.
 *
 * @block menu-pane
 */
.menu-pane {
  /* Display & box model */
  position: absolute;
  left: 0;
  width: 100%;
  /* Just to be in front of sibling elements
  (mainly for mobile screens) */
  z-index: 4;
  /* Appearance */
  font-weight: normal;
  font-size: 0.9375rem;
  /* Slide up on mobile */
  animation: menu-pane__slide-up 100ms ease-out;
  /* Hide the pane */
  /**
   * The menu pane content. Place other blocks
   * inside this element.
   *
   * @element content
   */
  /* ACTIVATION MODIFIERS
   *
   * Appending this class to the menu-pane will display
   * and position it.
  */
  /**
   *
   * @modifier alert
   * @property active
   */
  /**
   * Media query for sm - medium screens
   */
  /**
   * Media query for sm - medium screens
   */
  /**
   * Media query for min-width 641px, medium screens
   */ }
  .menu-pane--hidden {
    display: none; }
  .menu-pane__content {
    /* Display and box model */
    position: relative;
    padding-bottom: 0.625rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Appearance */
    -webkit-backdrop-filter: blur(0.1875rem);
    background: rgba(255, 255, 255, 0.95); }
  .menu-pane--active {
    /* Display and box model */
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: white; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .menu-pane {
      /* Display and box model */
      height: 100vh;
      /**
     * The menu pane content. Place other blocks
     * inside this element.
     *
     * @element content
     */ }
      .menu-pane__content {
        /* Display and box model */
        height: 100vh; } }
  @media only screen and (min-width: 46.0625em) {
    .menu-pane {
      /* Display and box model */
      min-width: 10.9375rem;
      max-width: 18.75rem;
      /* Popups up on medium and large screens */
      animation: menu-pane__popup 100ms ease-out;
      overflow: visible;
      /**
     *
     * @modifier medium
     * @property size
     */
      /**
     *
     * @modifier small
     * @property size
     */
      /**
     * The menu pane content. Place other blocks
     * inside this element.
     *
     * @element content
     */
      /* ACTIVATION MODIFIERS
     *
     * Appending this class to the menu-pane will display
     * and position it.
     *
     * SHOULD NOT BE USED FOR PRODUCTION
    */
      /**
     *
     * @modifier alert
     * @property active
     */
      /**
     * Contains the arrow above the menu pane
     * pointing to the button that opened it.
     *
     * Not existant on small screens.
     *
     * @element arrow-holder
     */ }
      .menu-pane--size--medium {
        /* Display and box model */
        min-width: 18.75rem; }
      .menu-pane--size--small {
        min-width: 12.5rem; }
      .menu-pane__content {
        /* Display and box model */ }
      .menu-pane--position--top-left {
        /* Display and box model */
        top: 2.5rem;
        left: auto;
        transform-origin: top left; }
      .menu-pane--position--top-right {
        /* Display and box model */
        top: 2.5rem;
        right: 0;
        left: auto;
        transform-origin: top right; }
      .menu-pane--position--options {
        /* Display and box model */
        top: 0;
        right: 0;
        left: auto; }
      .menu-pane--position--portal-top {
        /* Display and box model */
        top: 4.375rem;
        left: auto; }
      .menu-pane--position--sub-nav {
        /* Display and box model */
        bottom: 80px;
        right: 20px;
        left: auto;
        /* Controls where the object grows from*/
        transform-origin: bottom right; }
      .menu-pane__content {
        /* Display and box model */
        /* Remove padding */
        padding-bottom: 0;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
        border: solid 1px rgba(0, 0, 0, 0.15);
        border-radius: 0.375rem; }
      .menu-pane__arrow-holder {
        /* Display and box model */
        position: absolute;
        top: 0;
        width: 2.5rem;
        /* Trick to center the element */
        left: 50%;
        transform: translateX(-50%);
        /**
       * Upward facing arrow. Uses border css trick
       * to draw a triangle.
       */ }
        .menu-pane__arrow-holder:before {
          /* Display and box model */
          position: absolute;
          left: 0;
          top: -20px;
          content: '';
          display: block;
          width: 0;
          height: 0;
          /* Appearance */
          border-style: solid;
          border-width: 0 1.25rem 1.25rem;
          border-color: transparent transparent #F7F7F7; } }

@keyframes menu-pane__popup {
  0% {
    opacity: 0;
    transform: scale(0); }
  50% {
    transform: scale(0.6); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes menu-pane__slide-up {
  0% {
    transform: translateY(100%); }
  100% {
    transform: translateY(0); } }

/*------------------------------------*    MESSAGE
\*------------------------------------*/
/**
 * Set of styles to positon and style messages through-out the system.
 *
 *
 * @block message
 */
.message {
  /* Display and box model */
  padding: 1.875rem 0;
  margin: 0 1.25rem;
  /**
   * Adds sborder to bottom
   *
   * @modifier split
   */
  /**
   * Adds color
   *
   * @element blank-slate
   */
  /**
   * Adds space to the top
   *
   * @modifier pad-top
   */
  /**
   * Remvoes space from top
   * Ex. Used to remove space on error messages
   *
   * @modifier no-pad-top
   */
  /**
   * Adds header style
   *
   * @element header
   */
  /**
   * Adds footer style
   *
   * @element footer
   */
  /**
   * Used to position and display Action Items
   * such as buttons and links
   *
   * @element action
   */
  /**
   * @element link
   */
  /**
   * Blocks out groups of elements
   * Used to give helpful high-level info within message.
   *
   *
   * @element list
   */
  /**
   * Blocks out groups of elements
   *
   *
   * @element list-item
   */
  /**
   * Styles labels in Messages
   * Primarily used alongside values.
   *
   *
   * @element label
   */
  /**
   * Styles values in Messages
   * Primarily used alongside labels.
   *
   *
   * @element value
   */
  /**
   * Wraps element(s) and adds space below them.
   *
   *
   * @element block
   */
  /**
   * Styles Titles in a message.
   *
   *
   * @element title
   */
  /**
   * Styles copy in a message.
   *
   *
   * @element copy
   */
  /**
   * Container for inline errors that appear below
   * inputs.
   *
   * @element inline-error
   */
  /**
   * Used to display a row of icons
   *
   * @element icon-group
   */
  /**
   * Used to position and display icons witin
   * a message.
   *
   * @element icon
   */
  /**
   * Styles success block
   *
   * @element success
   */
  /**
   * Styles error block
   *
   * @element error
   */
  /**
   * Styles copy in a message.
   *
   *
   * @element number-list
   */
  /**
   * Styles items in a number list
   *
   *
   * @element number-list-item
   */
  /**
   * Adds a spacing to divide and split up segements
   * of information within a message.
   *
   *
   * @element divider
   */ }
  .message--split {
    /* Appearance */
    border-bottom: solid 1px #D5D5D5; }
  .message--blank-slate {
    /* Appearance */
    color: #D5D5D5; }
    .message--blank-slate .message__icon {
      /* Appearance */
      color: #D5D5D5; }
    .message--blank-slate .message__title {
      /* Appearance */
      color: #D5D5D5; }
    .message--blank-slate .message__copy {
      /* Appearance */
      color: #D5D5D5; }
    .message--blank-slate .message__list--border-top {
      /* Appearance */
      border-color: #D5D5D5; }
    .message--blank-slate .message__divider {
      border-color: #D5D5D5; }
    .message--blank-slate:hover .message__icon {
      /* Appearance */
      color: #186ca6; }
  .message--pad-top {
    /* Display and box model */
    margin-top: 0.9375rem; }
  .message--no-pad-top {
    /* Display and box model */
    padding-top: 0; }
  .message__header {
    /* Display and box model */
    margin-bottom: 0.625rem;
    /* 10px */ }
  .message__footer {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    max-width: 20rem;
    margin: 0 auto; }
    .message__footer .button {
      /* Display and box model */
      margin-right: 0.9375rem; }
      .message__footer .button:last-child {
        /* Display and box model */
        margin-right: 0; }
    .message__footer--pad-top {
      /* Display and box model */
      margin-top: 1.875rem; }
    .message__footer--login {
      /* Display and box model */
      -ms-flex-direction: column;
          flex-direction: column;
      -ms-flex-align: center;
          -ms-grid-row-align: center;
          align-items: center;
      -ms-flex-pack: center;
          justify-content: center;
      max-width: 100%;
      margin: 1.875rem;
      margin-bottom: 0;
      padding-bottom: 1.875rem; }
  .message__action {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    margin-top: 1.25rem; }
  .message__link {
    /* Appearance */
    text-decoration: underline;
    color: #186ca6; }
  .message__list {
    /* Display and box model */
    padding-bottom: 1.25rem;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5;
    /**
     * Removes the border-bottom
     *
     * @modifier no-border
     * @for list
     */
    /**
     * Removes the border-bottom
     *
     * @modifier no-border
     * @for list
     */
    /**
     * Adds space to the top
     *
     * @modifier pad-top
     * @for list
     */
    /**
     * Adds space to the bottom
     *
     * @modifier pad-bottom
     * @for list
     */ }
    .message__list--no-border {
      /* Display and box model */
      padding-bottom: 0;
      /* Appearance */
      border-bottom: 0; }
    .message__list--border-top {
      /* Display and box model */
      padding-top: 0.625rem;
      padding-bottom: 0;
      /* Appearance */
      border-top: solid 1px #D5D5D5;
      border-bottom: 0; }
    .message__list--pad-top {
      margin-top: 1.25rem; }
    .message__list--pad-bottom {
      margin-bottom: 1.25rem; }
  .message__list-item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: baseline;
        align-items: baseline;
    /* Appearance */
    line-height: 1em;
    /**
     * Vertically centers the key-item elements.
     *
     * @modifier middle
     * @property position
     * @for list-item
     */
    /**
     * Adds space to list-item.
     *
     * @modifier pad-bottom
     * @for list-item
     */ }
    .message__list-item--position--middle {
      /* Display and box model */
      -ms-flex-align: center;
          -ms-grid-row-align: center;
          align-items: center; }
    .message__list-item--pad-bottom {
      /* Display and box model */
      margin-bottom: 0.9375rem; }
      .message__list-item--pad-bottom:last-child {
        margin-bottom: 0; }
  .message__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Display and box model */
    -ms-flex: 1;
        flex: 1; }
  .message__value {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    /* Appearance */
    font-size: 0.8125rem;
    /**
     * Aligns the value text right
     *
     * @modifier right
     * @property position
     * @for value
     */
    /**
     * Makes the value text larger
     *
     * @modifier large
     * @property text
     * @for value
     */
    /**
     * Makes the value text bold
     *
     * @modifier bold
     * @property style
     * @for value
     */ }
    .message__value--position--right {
      /* Appearance */
      text-align: right; }
    .message__value--text--large {
      /* Appearance */
      font-size: 0.9375rem; }
    .message__value--style--bold {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal; }
  .message__block {
    margin-bottom: 1.875rem; }
  .message__title {
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    /* Display and box model */
    margin-bottom: 0.3125rem;
    /* Appearance */
    text-transform: uppercase;
    line-height: 1.2em;
    /**
     * Makes text larger.
     *
     * @modifier large
     * @property text
     * @for title
     */
    /**
     * Centers the text.
     *
     * @modifier center
     * @property text
     * @for title
     */
    /**
     * Aligns text right.
     *
     * @modifier Right
     * @property text
     * @for title
     */
    /**
     * Makes title text green
     *
     * @modifier green
     * @property color
     * @for title
     */
    /**
     * Makes title text red
     *
     * @modifier red
     * @property color
     * @for title
     */
    /**
     * Makes title text gray
     *
     * @modifier light-gray
     * @property color
     * @for title
     */
    /**
     * Adds space to top.
     *
     * @modifier pad-top
     * @for title
     */ }
    .message__title--text--large {
      /* Appearance */
      font-size: 1.4375rem; }
    .message__title--text--center {
      /* Appearance */
      text-align: center; }
    .message__title--text--right {
      /* Appearance */
      text-align: right; }
    .message__title--color--green {
      /* Appearance */
      color: #1a6f43; }
    .message__title--color--red {
      /* Appearance */
      color: #E74C3C; }
    .message__title--color--gray {
      /* Appearance */
      color: #D5D5D5; }
    .message__title--pad-top {
      /* Display and box model */
      margin-top: 0.9375rem; }
  .message__copy {
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    line-height: 1.4em;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    line-height: 1.4em;
    /**
     * Makes the text bold.
     *
     * @modifier bold
     * @property text
     * @for copy
     */
    /**
     * Centers text.
     *
     * @modifier center
     * @property text
     * @for copy
     */
    /**
     * Aligns text right.
     *
     * @modifier Right
     * @property text
     * @for copy
     */
    /**
     * Makes the text larger.
     *
     * @modifier large
     * @property text
     * @for copy
     */
    /**
     * Makes the text extra large.
     *
     * @modifier extra-large
     * @property text
     * @for copy
     */ }
    .message__copy--text--bold {
      /* Appearance */
      font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
      font-weight: normal; }
    .message__copy--text--center {
      /* Appearance */
      text-align: center; }
    .message__copy--text--right {
      /* Display and box model */
      float: right;
      /* Appearance */
      text-align: right; }
    .message__copy--text--large {
      /* Appearance */
      font-size: 1.0625rem; }
    .message__copy--text--extra-large {
      /* Appearance */
      font-size: 1.4375rem; }
  .message__inline-error {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.3125rem;
    padding: 0 1.25rem; }
    .message__inline-error .message__copy {
      /* Appearance */
      color: #E74C3C; }
  .message__icon-group {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    margin-top: 1.25rem; }
  .message__icon {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    padding-bottom: 1.875rem;
    /* Appearance */
    font-size: 2.8125rem;
    /**
     * Adds spacing to the right
     *
     * @modifier right
     * @for icon
     */
    /**
     * Colors icon green.
     *
     * @modifier green
     * @property color
     * @for icon
     */
    /**
     * Colors icon red.
     *
     * @modifier red
     * @property color
     * @for icon
     */
    /**
     * Makes title text gray
     *
     * @modifier light-gray
     * @property color
     * @for icon
     */
    /**
     * Icon size large.
     *
     * @modifier large
     * @property size
     * @for icon
     */
    /**
     * Displays check to icon element.
     *
     * @modifier check
     * @property icon
     * @for icon
     */
    /**
     * Displays warning to icon element.
     *
     * @modifier warning
     * @property icon
     * @for icon
     */ }
    .message__icon:last-child {
      /* Display and box model */
      margin-right: 0; }
    .message__icon:before {
      /* Display and box model */
      position: relative;
      display: inline-block;
      /** Appearance */
      font-family: "x-font";
      font-style: normal;
      font-weight: normal;
      speak: none;
      text-decoration: inherit;
      text-align: center;
      text-transform: none;
      font-variant: normal;
      text-transform: none;
      line-height: 1px;
      -webkit-text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      font-weight: normal;
      -webkit-font-smoothing: antialiased; }
    .message__icon--right {
      /* Display and box model */
      margin-right: .35em; }
    .message__icon--color--green {
      /* Appearance */
      color: #1a6f43; }
    .message__icon--color--red {
      /* Appearance */
      color: #E74C3C; }
    .message__icon--color--gray {
      /* Appearance */
      color: #D5D5D5; }
    .message__icon--size--large {
      /* Appearance */
      font-size: 3.75rem; }
    .message__icon--icon--check {
      /* Appearance */
      color: #1a6f43; }
      .message__icon--icon--check:before {
        content: ""; }
    .message__icon--icon--warning:before {
      content: ""; }
  .message__success {
    /* Display and box model */
    padding: 15px;
    /* Appearance */
    border-radius: 0.1875rem;
    background: rgba(77, 191, 124, 0.1); }
  .message__error {
    /* Display and box model */
    padding: 15px;
    /* Appearance */
    color: #E74C3C;
    border-radius: 0.1875rem;
    background: rgba(231, 76, 60, 0.1); }
    .message__error .message__copy {
      /* Appearance */
      color: #E74C3C; }
    .message__error .message__list--border-top {
      /* Appearance */
      border-color: #E74C3C; }
    .message__error .message__divider {
      border-color: red; }
  .message__number-list {
    /* Display and box model */
    margin-left: 1.375rem;
    /* Appearance */
    list-style-type: decimal; }
  .message__number-list-item {
    /* Display and box model */
    margin-bottom: 0.625rem;
    /* Appearance */
    font-size: 0.9375rem;
    line-height: 1.4em; }
  .message__divider {
    margin: 1.875rem 0; }

/*------------------------------------*    MODAL BASIC
\*------------------------------------*/
/**
 * Modal that overlays existing content on large screens,
 * and replaces existing content on small screens.
 *
 * For this modal to work correctly, make sure it is rendered
 * in a containter that fills up the entire window. The container
 * should have an either relative, absolute, or fixed position.
 *
 *
 * ```html
 * <div class="app">
 *   <div class="app__content">
 *     <!-- app content goes here -->
 *   </div>
 *   <div class="modal-basic">
 *     <!-- modal-basic block -->
 *     <section class="modal-basic modal-basic--active">
 *       <div class="modal-basic__overlay"></div>
 *       <div class="modal-basic__container">
           <div class="modal-basic__content">
 *          <!-- modal content -->
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 * </div>
 * ```
 *
 * @block modal-basic
 */
.modal-basic {
  /* Display and box model */
  visibility: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Appearance */
  opacity: 0;
  transition: -webkit-filter .2s ease-in-out;
  transition: filter .2s ease-in-out;
  transition: filter .2s ease-in-out, -webkit-filter .2s ease-in-out;
  transition-delay: .1s;
  /**
   * Used to position/style displayed Modal
   *
   * @modifier active
   */
  /**
   * Prevents bg from scrolling.
   * Should be applied to <body> tag when a
   * modal is active.
   *
   * @element lock
   */
  /**
   * Overlay stlying and positioning
   * Background overlay that's behind the container.
   *
   * @element overlay
   */
  /**
   * This is the visible part of the modal. The `modal-basic` is just
   * the modal container, whereas this element is what
   * holds the content.
   *
   * This is the visible part of the modal, any content (even headers)
   * should go here.
   *
   * @element container
   */
  /**
   * Wraps content
   *
   * @element content
   */
  /**
   * groups blocks of content
   *
   * @element block
   */
  /*
  * Use to block out groups of content in modals.
  *
  * @element wrapper
  */
  /**
   * Adds a rule
   *
   * @element rule
   */
  /*///// MODAL MODIFIERS /////*/
  /**
   * Used to position/style displayed Modal
   *
   * @modifier fullscreen
   */
  /**
   * Used to position/style display Dialog Modal
   *
   * @modifier dialog
   */
  /**
   * Used to position/style display Dialog Modal
   *
   * @modifier login
   */
  /**
   * Applied when previewing rendered builder results.
   *
   * @modifier preview
   */
  /* MEDIA QUERY Small Only */
  /* MEDIA QUERY MEDIUM UP */
  /* MEDIA QUERY LARGE UP */ }
  .modal-basic--active {
    /* Display and box model */
    visibility: visible;
    opacity: 1; }
    .modal-basic--active .modal-basic__overlay {
      /* Appearance */
      opacity: 1; }
      .modal-basic--active .modal-basic__overlay:after {
        display: inline-block;
        vertical-align: middle; }
    .modal-basic--active .modal-basic__container {
      /* Appearance */
      opacity: 1;
      /* Other */
      animation: modal-basic__animation-slide-up linear 0.3s; }
      .modal-basic--active .modal-basic__container:after {
        vertical-align: middle; }
  .modal-basic__lock {
    /* Display and box model */
    overflow: hidden; }
  .modal-basic__overlay {
    /* Display and box model */
    position: fixed;
    z-index: 101;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: inline-block;
    overflow: auto;
    height: 100%;
    /* Appearance */
    text-align: center;
    transition: opacity .3s ease-out;
    opacity: 0;
    background: rgba(26, 48, 75, 0.85);
    -webkit-overflow-scrolling: touch;
    -webkit-backdrop-filter: blur(0.1875rem);
    /* Fix iPad, iPhone glitches */
    -webkit-backface-visibility: hidden; }
    .modal-basic__overlay:after {
      /* Display and box model */
      margin-left: -0.05em;
      /* Appearance */
      content: ""; }
  .modal-basic__container {
    /* Display and box model */
    position: relative;
    z-index: 102;
    box-sizing: border-box;
    min-height: 100%;
    width: 100%;
    top: 0;
    margin: 0 auto;
    /* Appearance */
    color: #444444;
    background: transparent;
    background-clip: padding-box;
    opacity: 0;
    transition: .3s top ease-in-out; }
  .modal-basic__content {
    /* Appearance */
    text-align: left;
    background: #ffffff; }
    .modal-basic__content--flex {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column; }
  .modal-basic__col {
    -ms-flex: 1;
        flex: 1; }
    .modal-basic__col--long {
      -ms-flex: 3;
          flex: 3; }
  .modal-basic__wrapper {
    /* Display and box model */
    margin: 1.875rem 0;
    /**
   * Media query for min-width 641px, medium screens
   *
   * @modifier medium-up
   * @property query
   *
   */
    padding: 0 1.875rem;
    /* Display and box model */
    margin-top: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center; }
    .modal-basic__wrapper:last-child {
      margin-bottom: 1.875rem; }
  .modal-basic__rule {
    /* Display and box model */
    display: block;
    height: 1px;
    margin: 1.25rem;
    padding: 0;
    /* Appearance */
    border: 0;
    border-top: 1px solid #D5D5D5;
    /**
     * Removes margin-top
     *
     * @modifier no-pad-top
     * @for rule
     */ }
    .modal-basic__rule--no-pad-top {
      /* Display and box model */
      margin-top: 0; }
  .modal-basic__item {
    /* Display and box model */
    padding: 1.25rem 0;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5; }
    .modal-basic__item:first-child {
      /* Appearance */
      border-top: 0; }
    .modal-basic__item:last-child {
      /* Display and box model */
      padding-bottom: 0;
      /* Appearance */
      border-bottom: 0; }
  .modal-basic__row {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; }
  .modal-basic__inline-button {
    /* Display and box model */
    position: absolute;
    margin: 20px;
    right: 0; }
  .modal-basic--fullscreen {
    /* Form Footer */ }
    .modal-basic--fullscreen .menu-header {
      /* Display and box model */
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 103; }
    .modal-basic--fullscreen .modal-basic__content {
      /* Display and box model */
      max-width: 800px;
      margin: 0 auto;
      padding-top: 3.4375rem;
      padding-bottom: 5.625rem; }
    .modal-basic--fullscreen .modal-basic__overlay {
      /* Appearance */
      background: #ffffff; }
    .modal-basic--fullscreen .form-footer {
      z-index: 103; }
  .modal-basic--dialog .modal-basic__container {
    /* Display and box model */
    margin-top: 1.875rem;
    max-width: 90vw; }
  .modal-basic--dialog .modal-basic__content {
    /* Display and box model */
    height: auto;
    /* Appearance */
    border-radius: 0.5625rem; }
  .modal-basic--login .form-basic__input {
    padding-bottom: 0; }
    .modal-basic--login .form-basic__input:first-child input {
      border-bottom: 0;
      border-radius: 0.1875rem 0.1875rem 0 0; }
    .modal-basic--login .form-basic__input:last-child input {
      border-radius: 0 0 0.1875rem 0.1875rem; }
  .modal-basic--preview .modal-basic__overlay {
    /* Display and box model */
    overflow-y: hidden;
    /* Appearance */
    background: #444444;
    background: linear-gradient(-180deg, #5e5e5e 0%, #444444 100%); }
  .modal-basic--preview .modal-basic__container {
    /* Appearance */
    background: transparent; }
  .modal-basic--preview .modal-basic__content {
    /* Display and box model */
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: scroll;
    margin-top: 5.625rem;
    margin-bottom: 5.625rem;
    padding-top: 0;
    padding-bottom: 0;
    /* Appearance */
    background: transparent;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25), 0 0 30px rgba(0, 0, 0, 0.25);
    border-radius: 0.1875rem; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .modal-basic {
      /**
     * Wraps content
     *
     * @element content
     */
      /**
     * Used to position/style display Dialog Modal
     *
     * @modifier login
     */ }
      .modal-basic__content {
        /* Display and box model */
        height: calc(100vh - 140px); }
      .modal-basic--login .modal-basic__content {
        /* Display and box model */
        height: 100vh; } }
  @media only screen and (min-width: 46.0625em) {
    .modal-basic {
      /**
     * Used to position/style displayed Modal
     *
     * @modifier active
     */
      /**
     * Positions and styles the Modal block
     *
     * @element container
     */
      /**
     * Wraps content
     *
     * @element content
     */
      /**
     * Removes the ability to stretch textareas beyond frame.
     *
     */
      /**
     * Adapts various modal elements to support fullscreen menu.
     *
     * @modifier active
     */
      /**
     * Used to position/style displayed Modal
     *
     * @modifier dialog
     */
      /**
     * Applied when previewing rendered builder results.
     *
     * @modifier preview
     */
      /**
     * Used to position/style display Dialog Modal
     *
     * @modifier login
     */ }
      .modal-basic--active .modal-basic__container {
        /* Display and box model */
        transform: scale(1);
        margin-bottom: 3.75rem; }
      .modal-basic__container {
        /* Display and box model */
        top: 1.875rem;
        min-height: 0;
        max-width: 37.5rem;
        /* Appearance */
        transform: scale(0.95);
        border-radius: 0.3125rem;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
        /**
       * Centers Content vertically and horizontally
       *
       * @modifier center
       */ }
        .modal-basic__container--center {
          /* Display and box model */
          display: -ms-flexbox;
          display: flex;
          -ms-flex-direction: column;
              flex-direction: column;
          -ms-flex-pack: center;
              justify-content: center; }
      .modal-basic__content {
        /* Display and box model */
        height: auto; }
      .modal-basic textarea {
        /* Appearance */
        resize: none; }
      .modal-basic--fullscreen {
        /* Display and box model */
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        /* Appearance */
        background: #ffffff; }
        .modal-basic--fullscreen .modal-basic__container {
          /* Display and box model */
          top: 0;
          margin: 0 auto;
          max-width: 100%;
          min-height: 100%;
          /* Appearance */
          box-shadow: none; }
      .modal-basic--dialog .modal-basic__container {
        /* Display and box model */
        max-width: 25rem !important; }
      .modal-basic--preview .modal-basic__content {
        /* Display and box model */
        max-width: 88vw;
        max-height: 85vh; }
      .modal-basic--login .modal-basic__container {
        /* Display and box model */
        margin-top: 1.875rem;
        max-width: 37.5rem;
        /* Appearance */
        border: none; }
      .modal-basic--login .modal-basic__content {
        /* Appearance */
        border-radius: 0.5625rem; }
      .modal-basic--login .form-basic {
        max-width: 26.25rem;
        margin: 0 auto; }
      .modal-basic--login .form-basic__input {
        padding-bottom: 0; }
        .modal-basic--login .form-basic__input:first-child input {
          border-radius: 0.1875rem 0.1875rem 0 0; }
        .modal-basic--login .form-basic__input:last-child input {
          border-radius: 0 0 0.1875rem 0.1875rem; } }
  @media only screen and (min-width: 65em) {
    .modal-basic {
      /**
     * Wraps content
     *
     * @element content
     */ }
      .modal-basic__content--flex {
        /* Display and box model */
        -ms-flex-direction: row;
            flex-direction: row; } }

/**
 * Slide up animation for the modal.
 */
@keyframes modal-basic__animation-slide-up {
  0% {
    opacity: 0;
    top: 90rem; }
  100% {
    opacity: 1;
    top: inherit; } }

/*------------------------------------*    MODAL-LIST
\*------------------------------------*/
/**
 *
 * @block modal-list
 */
.modal-list {
  /* Display and box model */
  padding: 1.875rem;
  /*
     * @element item
     */
  /*
     * @element figure
     */
  /*
     * @element figure
     */
  /*
     * @element figure-label
     */
  /*
     * @element figure-label
     */
  /*
     * @element time
     */
  /*
     * @element copy
     */
  /*
     * @element action
     */
  /*
       * @element figure
       */ }
  .modal-list__item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5; }
    .modal-list__item:first-child {
      /* Display and box model */
      padding-top: 0;
      padding-bottom: 30px; }
    .modal-list__item:last-child {
      /* Display and box model */
      padding-bottom: 0;
      margin-bottom: 0;
      /* Appearance */
      border-bottom: 0; }
    .modal-list__item--disabled {
      /* Appearance */
      opacity: .5; }
  .modal-list__figure {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    margin-right: 0.8125rem;
    min-width: 2.8125rem;
    height: 2.8125rem;
    border-radius: 50%; }
    .modal-list__figure--icon {
      /* Appearance */
      color: red; }
    .modal-list__figure--symbol--decision {
      /* Appearance */
      background: url(../../img/_portal/icon-mail.png) 0 0 no-repeat;
      background-size: 100%; }
    .modal-list__figure--symbol--progress {
      /* Appearance */
      background: url(../../img/_portal/progress-ring.png) 0 0 no-repeat;
      background-size: 100%; }
  .modal-list__icon {
    /* Display and box model */
    position: relative;
    display: inline-block;
    /** Appearance */
    font-family: "x-font";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    font-variant: normal;
    text-transform: none;
    line-height: 1px;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Appearance */
    font-size: 1.625rem; }
    .modal-list__icon--symbol--error:before {
      content: "";
      color: #E74C3C; }
    .modal-list__icon--symbol--check:before {
      content: "";
      color: #1a6f43; }
    .modal-list__icon--symbol--progress {
      /* Appearance */
      background: url(../../img/_portal/progress-ring.png) 0 0 no-repeat;
      background-size: 100%; }
  .modal-list__figure-label {
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.6875rem;
    text-align: center;
    color: #444444; }
  .modal-list__link {
    /* Appearance */
    text-decoration: underline;
    color: #186ca6; }
  .modal-list__title {
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: #444444;
    text-transform: uppercase; }
  .modal-list__copy {
    /* Display and box model */
    padding-top: 0.4375rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    color: #444444;
    line-height: 1.4em;
    /*
       * Used when no copy is below
       *
       * @modifier no-pad-bottom
       */ }
    .modal-list__copy--color--red {
      /* Appearance */
      color: #E74C3C; }
    .modal-list__copy--style--important {
      /* Appearance */
      color: #E74C3C;
      text-transform: upppercase; }
    .modal-list__copy--text--large {
      /* Appearance */
      font-size: 0.9375rem; }
    .modal-list__copy--no-pad-top {
      /* Display and box model */
      padding-top: 0; }
  .modal-list__action {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    /* Appearance */
    text-align: right; }
  .modal-list__figure {
    min-width: 30px;
    height: 30px; }

/* NAV /////
 *
 * Main navigation for System
 *
 * @block nav
 */
.nav {
  /* Display and box model */
  height: 100%;
  /* show scrollbar when opened and
  larger than parent height. This is only
  applicable on small/medium screens. */
  overflow: auto;
  /* Appearance */
  font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
  font-weight: normal;
  box-shadow: 0 -0.5em 0.75em white;
  background: rgba(26, 48, 75, 0.95);
  /**
   * The section that contains the nav buttons.
   * This section is always visible - when the header
   * is open or closed.
   *
   * It also contains the main navigation on large screens.
   *
   * @element main
   */
  /**
   *
   * It uses extended the main navigation on small screens.
   *
   * @element mobile
   */
  /**
   *
   *
   * @element extended
   */
  /*
   * Positions blocks of items.
   *
   * @element col
   */
  /*
   * Positions individual items within the nav.
   * Ex. Section element.
   *
   * @element item
   */
  /**
   * The menu links. These are the outer links,
   * not the sub-links.
   *
   * @element link
   */
  /*
   * Styles section icons in the nav
   * Used for icons within link element
   *
   * @element icon
   */
  /*
   * Styles link element labels
   *
   * @element label
   */
  /* MEDIA QUERY MEDIUM UP */
  /* MEDIA QUERY LARGE UP */ }
  .nav__container {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 4.375rem;
    transition-property: height;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: initial;
    z-index: 2; }
  .nav__main {
    /* Display and box model */
    display: none; }
  .nav__mobile {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: justify;
        justify-content: space-between;
    height: 100%; }
  .nav__extended {
    /*
     * Hides extended element.
     *
     * @modifier hidden
     * @for col
     */ }
    .nav__extended .menu-pane {
      /* Display and box model */
      top: 0;
      left: 0;
      height: 100vh;
      z-index: 1; }
    .nav__extended--hidden {
      /* Display and box model */
      display: none; }
  .nav__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 100%;
    /*
     * Positions blocks of items at the start (left).
     * Ex. Dashboard icon is set to the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     * Ex. Dashboard icon is set to the end (right).
     *
     * @modifier end
     * @for col
     */
    /*
     * Used to extend a column by 2.
     *
     * @modifier long
     * @for col
     */ }
    .nav__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .nav__col--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end; }
    .nav__col--long {
      /* Display and box model */
      -ms-flex: 2;
          flex: 2; }
  .nav__item {
    /**
     * `item` element that wrap icons menus
     * should have this modifier
     *
     * @modifier icon
     */ }
    .nav__item--icon {
      /* Display and box model */
      /* Center the icon vertically */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center;
      height: 100%;
      margin: 0 0.625rem;
      /* Appearance */
      border-bottom: 0; }
  .nav__link {
    /* Display and box model */
    -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    /* Appearance */
    text-decoration: none;
    transition: .3s;
    /*
     * Adds selection state to nav item.
     * Use to display current section is be viewed
     * or hovered over.
     *
     * @modifier selected
     */
    /*
     * Removes hover/select state
     *
     * @modifier disabled
     */ }
    .nav__link--selected .nav__figure {
      /* Appearance */
      color: #186ca6; }
    .nav__link--disabled {
      opacity: .5; }
      .nav__link--disabled:hover {
        /* Appearance */
        cursor: no-drop;
        background: none;
        border-bottom: solid 3px #1A304B; }
  .nav__figure {
    /* Appearance */
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.875rem;
    transition: .3s; }
  .nav__label {
    /* Display and box model */
    display: none; }
  @media only screen and (min-width: 46.0625em) {
    .nav {
      /**
     *
     *
     * @element extended
     */
      /**
     * The section that contains the nav buttons.
     * This section is always visible - when the header
     * is open or closed.
     *
     * It also contains the main navigation on large screens.
     *
     * @element main
     */
      /*
     * Positions individual items within the nav.
     * Ex. Section elements
     *
     * @element item
     */
      /**
     * The menu links. These are the outer links,
     * not the sub-links.
     *
     * @element link
     */
      /*
     * Styles section icons in the nav
     * Used for icons within link element
     *
     * @element icon
     */
      /*
     * Styles section labels in the nav
     *
     * @element label
     */ }
      .nav__mobile {
        /* Display and box model */
        display: none;
        visibility: hidden; }
      .nav__extended .menu-pane {
        /* Display and box model */
        top: auto;
        left: auto;
        height: auto;
        z-index: 1; }
      .nav__main {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        /* center children vertically */
        -ms-flex-align: center;
            align-items: center;
        padding: 0 0.8125rem;
        height: 4.375rem; }
      .nav__item {
        /*
       * Adjust max-width
       * Used when there's a stand-alone icon w/ no label
       *
       * @modifier disabled
       */ }
        .nav__item--icon {
          max-width: 2.8125rem; }
          .nav__item--icon:last-child {
            margin-right: 0; }
      .nav__link {
        /* Display and box model */
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
        padding: 0.625rem 1.25rem;
        /* Appearance */
        border-bottom: solid 3px transparent; }
        .nav__link--selected, .nav__link:hover {
          /* Appearance */
          background: rgba(255, 255, 255, 0.1);
          border-bottom: solid 3px #186ca6; }
      .nav__figure {
        /* Display and box model */
        margin-bottom: 0.625rem;
        /* Appearance */
        font-size: 1.5rem; }
      .nav__label {
        /* Display and box model */
        display: block;
        /* Appearance */
        font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
        font-weight: normal;
        font-size: 0.6875rem;
        color: #ffffff;
        text-transform: uppercase; } }

/*------------------------------------*    NOTIFICATION
\*------------------------------------*/
/**
 * Set of styles to positon and style notifications through-out the system.
 *
 *
 * @block notification
 */
.notification {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%;
  padding: 15px 1.875rem;
  /*
   * Positions blocks of items.
   *
   * @element col
   */
  /**
   * Styles copy in a notification.
   *
   *
   * @element copy
   */
  /**
   * Used to position and display icons witin
   * a message.
   *
   * @element icon
   */
  /**
   * Styles success block
   *
   * @element success
   */
  /**
   * Styles error block
   *
   * @element error
   */ }
  .notification__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    /*
     * Positions blocks of items at the start (left).
     * Ex. Dashboard icon is set to the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     * Ex. Dashboard icon is set to the end (right).
     *
     * @modifier end
     * @for col
     */ }
    .notification__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .notification__col--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end; }
  .notification__copy {
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    /* Display and box model */
    margin-bottom: 0.3125rem;
    /* Appearance */
    text-transform: uppercase;
    line-height: 1.2em;
    /**
     * Makes text larger.
     *
     * @modifier large
     * @property text
     * @for title
     */
    /**
     * Centers the text.
     *
     * @modifier center
     * @property text
     * @for title
     */
    /**
     * Makes title text green
     *
     * @modifier green
     * @property color
     * @for title
     */
    /**
     * Makes title text red
     *
     * @modifier red
     * @property color
     * @for title
     */
    /**
     * Adds space to top.
     *
     * @modifier pad-top
     * @for title
     */ }
    .notification__copy--text--large {
      /* Appearance */
      font-size: 1.4375rem; }
    .notification__copy--text--center {
      /* Appearance */
      text-align: center; }
    .notification__copy--color--green {
      /* Appearance */
      color: #1a6f43; }
    .notification__copy--color--red {
      /* Appearance */
      color: #E74C3C; }
    .notification__copy--pad-top {
      /* Display and box model */
      margin-top: 0.9375rem; }
  .notification__icon {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    padding-top: 0.9375rem;
    padding-bottom: 1.875rem;
    margin-right: .35em;
    /* Appearance */
    font-size: 2.8125rem;
    /**
     * Colors icon green.
     *
     * @modifier green
     * @property color
     * @for icon
     */
    /**
     * Colors icon red.
     *
     * @modifier red
     * @property color
     * @for icon
     */
    /**
     * Icon size large.
     *
     * @modifier large
     * @property size
     * @for icon
     */
    /**
     * Displays check to icon element.
     *
     * @modifier check
     * @property icon
     * @for icon
     */
    /**
     * Displays warning to icon element.
     *
     * @modifier warning
     * @property icon
     * @for icon
     */ }
    .notification__icon:last-child {
      /* Display and box model */
      margin-right: 0; }
    .notification__icon:before {
      /* Display and box model */
      position: relative;
      display: inline-block;
      /** Appearance */
      font-family: "x-font";
      font-style: normal;
      font-weight: normal;
      speak: none;
      text-decoration: inherit;
      text-align: center;
      text-transform: none;
      font-variant: normal;
      text-transform: none;
      line-height: 1px;
      -webkit-text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      font-weight: normal;
      -webkit-font-smoothing: antialiased; }
    .notification__icon--color--green {
      /* Appearance */
      color: #1a6f43; }
    .notification__icon--color--red {
      /* Appearance */
      color: #E74C3C; }
    .notification__icon--size--large {
      /* Appearance */
      font-size: 3.75rem; }
    .notification__icon--icon--check {
      /* Appearance */
      color: #1a6f43; }
      .notification__icon--icon--check:before {
        content: ""; }
    .notification__icon--icon--warning:before {
      content: ""; }
  .notification--success {
    /* Display and box model */
    padding: 15px;
    /* Appearance */
    text-align: center;
    color: #1a6f43;
    border-radius: 0.1875rem;
    background: rgba(77, 191, 124, 0.25); }
  .notification--error {
    /* Display and box model */
    padding: 15px;
    /* Appearance */
    color: #E74C3C;
    border-radius: 0.1875rem;
    background: rgba(231, 76, 60, 0.1); }
    .notification--error .message__copy {
      /* Appearance */
      color: #E74C3C; }
    .notification--error .message__list--border-top {
      /* Appearance */
      border-color: #E74C3C; }
    .notification--error .message__divider {
      border-color: red; }

/*------------------------------------*    OVERLAY
\*------------------------------------*/
/**
 * Overlay stlying and positioning
 * Background overlay that's behind the container.
 *
 * Ex. Used when menus are triggered.
 *
 * @block overlay
 */
.overlay {
  /* Display and box model */
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  /* Appearance */
  text-align: center;
  transition: opacity .3s ease-out;
  opacity: 0;
  background: red;
  -webkit-overflow-scrolling: touch;
  /* Fix iPad, iPhone glitches */
  -webkit-backface-visibility: hidden;
  /**
   * Displays overlay
   *
   * @modifier active
   * @for overlay
   */ }
  .overlay:after {
    /* Display and box model */
    height: 100%;
    margin-left: -0.05em;
    /* Appearance */
    content: ""; }
  .overlay--active {
    /* Display and box model */
    display: inline-block;
    z-index: 1; }

/*------------------------------------*    PORTAL
\*------------------------------------*/
/**
 *
 * @block portal
 */
.portal {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  height: auto;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* Appearance */
  background: #F7F7F7;
  /*
   * @modifier transparent
   * @property theme
   */
  /*
   * Wraps scrollable area within portal.
   * Anything within the container will be scrollable.
   *
   * @element container
   */
  /*
   *
   * @element row
   */
  /*
   * Allows all contained content to
   * scroll on mobile.
   *
   * @element footer
   */ }
  .portal--theme--transparent {
    /* Appearance */
    background: transparent; }
  .portal__container {
    /* Display and box model */
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto; }
  .portal__row {
    /* Display and box model */
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto; }
  .portal__footer {
    /* Display and box model */
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    /* Appearance */
    background: #ffffff; }
  @media only screen and (min-width: 46.0625em) {
    .portal {
      /*
     * Allows all contained content to
     * scroll on mobile.
     *
     * @element row
     */
      /*
     * Allows all contained content to
     * scroll on mobile.
     *
     * @element footer
     */ }
      .portal__row {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        height: auto;
        position: relative;
        overflow: hidden;
        backface-visibility: hidden;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        -ms-flex-align: stretch;
            align-items: stretch;
        -ms-flex-pack: start;
            justify-content: flex-start;
        -ms-flex-order: 0;
            order: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar; }
      .portal__footer {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        height: auto;
        position: relative;
        overflow: hidden;
        backface-visibility: hidden;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        -ms-flex-align: stretch;
            align-items: stretch;
        -ms-flex-pack: start;
            justify-content: flex-start;
        -ms-flex-order: 0;
            order: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar; } }

/*------------------------------------*    PORTAL-BLOCK
\*------------------------------------*/
/**
 *
 * Groups items
 *
 * @block portal-block
 */
.portal-block {
  /* Display and box model */
  -ms-flex: 1;
      flex: 1;
  /* Appearance */
  border-right: solid 1px #D5D5D5;
  border-bottom: solid 1px #D5D5D5;
  /*
   * Removes borders
   *
   * @modifier borderless
   */
  /*
   * Removes border from right
   *
   * @modifier no-border-right
   */
  /*
   * Removes border from bottom
   *
   * @modifier no-border-bottom
   */
  /*
   * Adjust the portal block so an image can fill
   * the entire box.
   *
   * @modifier no-pad
   */
  /*
   * Adjust the portal block so an media can fill
   * the entire box.
   *
   * @modifier media
   */
  /*
   * @element content
   */
  /*
   * @element row
   */
  /*
   * @element header
   */
  /*
   * @element footer
   */
  /*
   * @element figure
   */
  /*
   * @element video
   */
  /*
   * @element copy
   */
  /*
   * @element title
   */
  /*
   * @element subtitle
   */
  /*
   * @element blockquote
   */
  /*
   * @element bullet-list
   */
  /*
   * @element bullet
   */
  /*
   * @element button
   */
  /*
   * @element link
   */ }
  .portal-block--borderless {
    /* Appearance */
    border-right: 0;
    border-bottom: 0; }
  .portal-block--no-border-right {
    /* Appearance */
    border-right: 0; }
  .portal-block--no-border-bottom {
    /* Appearance */
    border-bottom: 0; }
  .portal-block--no-pad {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    /* Appearance */
    border-right: 0; }
    .portal-block--no-pad .portal-block__content {
      overflow: hidden;
      padding: 0; }
  .portal-block--media {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    /* Appearance */
    border-right: 0;
    /* Appearance */ }
    .portal-block--media .portal-block__content {
      overflow: hidden;
      padding: 0; }
    .portal-block--media img,
    .portal-block--media video,
    .portal-block--media iframe,
    .portal-block--media embed {
      /* Display and box model */
      -ms-flex: 1;
          flex: 1;
      width: 100%;
      max-width: 100%; }
  .portal-block__content {
    /* Display and box model */
    display: block;
    padding: 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    padding: 1.875rem; }
  .portal-block__row {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    margin-bottom: 1.875rem;
    /*
     * Flows info horizontally within a block
     * Default is flex-direction: column;
     *
     * @modifier horizontal
     * @for row
     */ }
    .portal-block__row--horizontal {
      /* Display and box model */
      -ms-flex-direction: row;
          flex-direction: row; }
  .portal-block__header {
    margin-bottom: 1.875rem; }
    .portal-block__header.portal-block__copy {
      /* Appearance */
      text-transform: uppercase; }
  .portal-block__footer {
    /* Display and box model */
    -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    max-width: 100%;
    margin: 1.875rem 0;
    /*
     * Centers footer
     *
     * @modifier center
     * @for footer
     */ }
    .portal-block__footer--center {
      /* Display and box model */
      max-width: 20rem;
      margin: 1.875rem auto; }
  .portal-block__figure {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    margin: 0 auto;
    /* Appearance */
    text-align: center;
    /*
      * Full width image
      * @modifier full
      * @for figure
      */
    /*
     * Used when wanting to display an icon
     * Ex. Application Progress, App Decision icon, etc.
     * @modifier icon
     * @for figure
     */ }
    .portal-block__figure img {
      max-width: 100%; }
    .portal-block__figure--full img {
      /* Display and box model */
      width: 100%;
      height: auto; }
    .portal-block__figure--icon {
      /* Display and box model */
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
      -ms-flex-pack: center;
          justify-content: center;
      margin-bottom: 0.9375rem; }
      .portal-block__figure--icon img {
        max-width: 7.5rem; }
  .portal-block__video {
    /* Display and box model */
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 1.875rem;
    height: 0;
    overflow: hidden; }
    .portal-block__video iframe,
    .portal-block__video object,
    .portal-block__video embed {
      /* Display and box model */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .portal-block__copy {
    /* Display and box model */
    margin-bottom: 0.9375rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: #444444;
    line-height: 1.4em; }
    .portal-block__copy--no-pad-bottom {
      /* Display and box model */
      margin-bottom: 0; }
    .portal-block__copy--important {
      /* Display and box model */
      margin-top: 0;
      /* Appearance */
      text-transform: uppercase; }
  .portal-block__title {
    /* Display and box model */
    margin-bottom: 0.9375rem;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 30px;
    color: #444444;
    line-height: 1.4em; }
    .portal-block__title--no-pad-bottom {
      /* Display and box model */
      margin-bottom: 0; }
  .portal-block__subtitle {
    /* Display and box model */
    margin-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    color: #444444; }
  .portal-block__blockquote {
    /* Display and box model */
    margin: 3.75rem auto;
    max-width: 20rem;
    padding-left: 1.25rem;
    /* Appearance */
    font-family: Georgia, Serif;
    font-size: 1.625rem;
    font-style: italic;
    color: #444444;
    border-left: solid 3px #186ca6; }
    .portal-block__blockquote span {
      /* Display and box model */
      display: block;
      margin-top: 0.625rem;
      /* Appearance */
      text-align: right;
      font-size: 1.0625rem;
      line-height: 1.5em;
      text-transform: uppercase; }
  .portal-block__bullet-list {
    /* Display and box model */
    -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    /*
     * @modifier centered
     * @for bullet-list
     */
    /*
     * @modifier pad-top
     * @for bullet-list
     */ }
    .portal-block__bullet-list--centered {
      /* Display and box model */
      max-width: 12.5rem;
      margin: 0 auto; }
    .portal-block__bullet-list--pad-top {
      /* Display and box model */
      margin-top: 1.875rem; }
  .portal-block__bullet {
    /* Display and box model */
    margin-top: 0.9375rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 17px;
    color: #444444; }
  .portal-block__button {
    /* Display and box model */
    margin-bottom: 0.625rem; }
    .portal-block__button:last-child {
      margin-bottom: 0; }
  .portal-block__link {
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    color: #186ca6;
    text-align: center;
    text-decoration: underline; }
  @media only screen and (min-width: 46.0625em) {
    .portal-block {
      /*
     * @element blockquote
     */ }
      .portal-block__blockquote {
        /* Display and box model */
        max-width: 28.125rem;
        margin: 1.875rem auto;
        /* Appearance */
        font-size: 1.875rem; }
        .portal-block__blockquote span {
          /* Appearance */
          font-size: 1.3125rem; } }
  @media only screen and (min-width: 65em) {
    .portal-block {
      /*
     * @element aside
     */
      /*
     * @element content
     */ }
      .portal-block__aside {
        /* Display and box model */
        padding: 0 15px;
        height: auto; }
      .portal-block__container {
        /* Display and box model */
        padding: 1.875rem;
        overflow-y: scroll; } }
  @media only screen and (min-width: 90em) {
    .portal-block {
      /*
     * @element blockquote
     */ }
      .portal-block__blockquote {
        /* Display and box model */
        padding-left: 2.5rem;
        margin: 5.625rem auto;
        /* Appearance */
        font-size: 2.8125rem;
        border-left: solid 5px #186ca6; }
        .portal-block__blockquote span {
          /* Appearance */
          font-size: 1.4375rem; } }

/*------------------------------------*    PORTAL-HEADER
\*------------------------------------*/
/**
 *
 * @block portal-header
 */
.portal-header {
  /* Defined header height */
  /* Display and box model */
  position: relative;
  height: 3.75rem;
  /* Appearance */
  background: #ffffff;
  border-bottom: solid 1px #D5D5D5;
  /*
   * @modifier gray
   * @property theme
   */
  /*
   * Wraps all elements within portal header.
   *
   * @element content
   */
  /*
   * Positions blocks of items.
   *
   * @element col
   */
  /*
  * @element brand
  */
  /*
  * @element logo
  */
  /*
  * @element title-group
  */
  /*
  * @element title
  */
  /*
   * @element subtitle
   */
  /*
   * Positions individual items within the portal-header.
   * Ex. Section element.
   *
   * @element item
   */ }
  .portal-header--theme--gray {
    /* Appearance */
    background: #F7F7F7; }
  .portal-header__content {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 3.75rem; }
  .portal-header__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 100%;
    /*
     * Positions blocks of items at the start (left).
     * Ex. Dashboard icon is set to the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     * Ex. Dashboard icon is set to the end (right).
     *
     * @modifier end
     * @for col
     */
    /*
     * Used to extend a column by 2.
     *
     * @modifier long
     * @for col
     */ }
    .portal-header__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .portal-header__col--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end;
      margin-right: 0.9375rem; }
    .portal-header__col--long {
      /* Display and box model */
      -ms-flex: 3;
          flex: 3; }
  .portal-header__brand {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center; }
  .portal-header__logo {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    max-width: 100%;
    min-width: 3.75rem;
    min-height: 3.75rem;
    max-height: 3.75rem;
    /* Appearance */
    background: #444444;
    /*
     * Enforces square ratio
     *
     * @modifier sq
     * @for logo
     */ }
    .portal-header__logo--sq {
      /* Display and box model */
      min-width: 3.75rem;
      max-width: 3.75rem; }
  .portal-header__title-group {
    /* Display and box model */
    margin-left: 0.9375rem; }
  .portal-header__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Appearance */
    font-size: 1.0625rem;
    line-height: 1.2em;
    text-align: left;
    color: #444444;
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    transition: color .3s;
    max-width: 18.75rem;
    transition: .5s; }
  .portal-header__subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Display and box model */
    max-width: 250px;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.6875rem;
    color: #444444;
    text-transform: uppercase; }
  .portal-header__item {
    /* Display and box model */
    position: relative;
    display: -ms-flexbox;
    display: flex;
    margin-right: 0.9375rem;
    /**
     * `item` element that wrap icons menus
     * should have this modifier
     *
     * @modifier icon
     */ }
    .portal-header__item--icon {
      /* Display and box model */
      /* Center the icon vertically */
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          -ms-grid-row-align: center;
          align-items: center;
      height: 100%;
      /* Appearance */
      border-bottom: 0; }
    .portal-header__item:last-child {
      /* Display and box model */
      margin-right: 0; }
  @media only screen and (min-width: 46.0625em) {
    .portal-header {
      /* Defined header height */
      /* Display and box model */
      height: 5rem;
      /*
      * @element logo
      */
      /*
     * Positions blocks of items.
     *
     * @element col
     */
      /*
     * @element title-group
     */
      /*
     * @element title-group
     */
      /*
     * @element title-group
     */ }
      .portal-header__content {
        /* Display and box model */
        height: 5rem; }
      .portal-header__logo {
        /* Display and box model */
        max-width: 100%;
        min-width: 5rem;
        min-height: 5rem;
        max-height: 5rem;
        /*
         * Enforces square ratio
         *
         * @modifier sq
         * @for logo
         */ }
        .portal-header__logo--sq {
          /* Display and box model */
          min-width: 5rem;
          max-width: 5rem; }
      .portal-header__col {
        /*
       * Positions blocks of items to the end (right).
       * Ex. Dashboard icon is set to the end (right).
       *
       * @modifier end
       * @for col
       */ }
        .portal-header__col--end {
          /* Display and box model */
          margin-right: 1.25rem; }
      .portal-header__title-group {
        /* Display and box model */
        margin-left: 1.25rem; }
      .portal-header__subtitle {
        /* Appearance */
        font-family: 'proxima-nova', Helvetica, Arial, San-serif;
        font-weight: normal;
        font-size: 0.8125rem; }
      .portal-header__title {
        /* Appearance */
        font-size: 1.5rem;
        line-height: 1.2em;
        text-align: left;
        color: #444444;
        font-family: 'proxima-nova', Helvetica, Arial, San-serif;
        font-weight: normal;
        color: #444444;
        transition: color .3s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: .5s; } }

/*------------------------------------*    PORTAL-HERO
\*------------------------------------*/
/**
 *
 * @block portal-hero
 */
.portal-hero {
  /* Display and box model */
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  height: 15.625rem;
  padding: 3.75rem;
  /* Appearance */
  background: url("../img/_portal/hero.png") 50% 0 no-repeat;
  background-size: cover; }
  .portal-hero__label {
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.3125rem;
    color: #ffffff;
    text-transform: uppercase; }
  @media only screen and (min-width: 46.0625em) {
    .portal-hero__label {
      /* Appearance */
      font-size: 2.0625rem; } }

/*------------------------------------*    PORTAL-LIST
\*------------------------------------*/
/**
 *
 * @block portal-list
 */
.portal-list {
  /*
   * @element item
   */
  /*
   * @element figure
   */
  /*
   * @element icon
   */
  /*
   * @element figure-label
   */
  /*
   * @element figure-label
   */
  /*
   * @element time
   */
  /*
   * @element time
   */
  /*
   * @element action
   */ }
  .portal-list__item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    height: auto;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-order: 0;
        order: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -ms-flex-align: center;
        align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5; }
    .portal-list__item:first-child {
      /* Display and box model */
      padding-top: 0; }
    .portal-list__item:last-child {
      /* Display and box model */
      padding-bottom: 0;
      /* Appearance */
      border-bottom: 0; }
    .portal-list__item--disabled {
      /* Appearance */
      opacity: .5;
      pointer-events: none; }
      .portal-list__item--disabled:hover {
        /* Appearance */
        cursor: not-allowed; }
  .portal-list__figure {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    margin-right: 0.8125rem;
    min-width: 2.8125rem;
    min-height: 2.8125rem;
    border-radius: 50%; }
    .portal-list__figure--icon {
      /* Appearance */
      color: red; }
    .portal-list__figure--symbol--decision {
      /* Appearance */
      background: url("../img/_portal/icon-mail.png") 0 0 no-repeat;
      background-size: 100%; }
    .portal-list__figure--symbol--progress {
      /* Appearance */
      background: url("../img/_portal/progress-ring.png") 0 0 no-repeat;
      background-size: 100%; }
    .portal-list__figure--symbol--success {
      /* Appearance */
      background: url("../img/_portal/icon-success.png") 0 0 no-repeat;
      background-size: 100%; }
    .portal-list__figure--symbol--reject {
      /* Appearance */
      background: url("../img/_portal/icon-decline-letter.png") 0 0 no-repeat;
      background-size: 100%; }
    .portal-list__figure--symbol--other-in-progress {
      /* Appearance */
      background: url("../img/_portal/icon-app.png") 0 0 no-repeat;
      background-size: 100%; }
  .portal-list__icon {
    /* Display and box model */
    position: relative;
    display: inline-block;
    /** Appearance */
    font-family: "x-font";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    font-variant: normal;
    text-transform: none;
    line-height: 1px;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Appearance */
    font-size: 1.625rem; }
    .portal-list__icon--symbol--error:before {
      content: "";
      color: #E74C3C; }
    .portal-list__icon--symbol--check:before {
      content: "";
      color: #1a6f43; }
    .portal-list__icon--symbol--progress {
      /* Appearance */
      background: url("../img/_portal/progress-ring.png") 0 0 no-repeat;
      background-size: 100%; }
  .portal-list__figure-label {
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.6875rem;
    text-align: center;
    color: #444444; }
  .portal-list__link {
    /* Appearance */
    text-decoration: underline;
    color: #186ca6; }
  .portal-list__title {
    /* Display and box model */
    padding-bottom: 0.4375rem;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: #444444;
    text-transform: uppercase; }
  .portal-list__copy {
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    color: #444444;
    line-height: 1.4em; }
    .portal-list__copy--color--red {
      /* Appearance */
      color: #E74C3C; }
    .portal-list__copy--style--important {
      /* Appearance */
      color: #E74C3C;
      text-transform: upppercase; }
    .portal-list__copy--text--large {
      /* Appearance */
      font-size: 0.9375rem; }
  .portal-list__action {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    /* Appearance */
    text-align: right; }

/*------------------------------------*    PORTAL-nav
\*------------------------------------*/
/**
 *
 * @block portal-list
 */
.portal-nav {
  /* Appearance */
  background: #ffffff;
  border-bottom: solid 1px #D5D5D5;
  /*
   * @element item
   */
  /*
   * @element time
   */
  /*
   * @element button
   */ }
  .portal-nav__content {
    /* Display and box model */
    display: block;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center; }
  .portal-nav__item {
    /* Display and box model */
    position: relative;
    padding: 1.25rem;
    /* Appearance */
    cursor: pointer;
    -webkit-tap-highlight-color: #1A304B;
    transition: .3s;
    border-right: solid 1px #F7F7F7; }
    .portal-nav__item:last-child {
      border-right: 0; }
    .portal-nav__item:hover {
      /* Appearance */
      background: rgba(26, 48, 75, 0.8); }
      .portal-nav__item:hover .portal-nav__title {
        color: #ffffff; }
    .portal-nav__item--button {
      padding: 1.25rem;
      padding-top: 0; }
      .portal-nav__item--button:first-child {
        padding-top: 1.25rem; }
      .portal-nav__item--button:hover {
        /* Appearance */
        background: none; }
    .portal-nav__item--is-active {
      /* Appearance */
      background: #1A304B; }
      .portal-nav__item--is-active .portal-nav__title {
        color: #ffffff; }
  .portal-nav__title-group {
    /* Display and box model */ }
  .portal-nav__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Display and box model */
    max-width: 10rem;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: #444444;
    text-transform: uppercase; }
  .portal-nav__button {
    /* Display and box model */
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    padding: 0.3125rem;
    /* Appearance */
    color: #ffffff;
    background: rgba(26, 48, 75, 0.9);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
  @media only screen and (min-width: 46.0625em) {
    .portal-nav {
      /*
     * @element item
     */ }
      .portal-nav__content {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: start;
            justify-content: flex-start;
        -ms-flex-align: center;
            align-items: center; }
      .portal-nav__item {
        /* Display and box model */
        -ms-flex: 1 0 0;
            flex: 1 0 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        padding: 0.625rem;
        max-width: 15.625rem; } }

/*------------------------------------*    PROFILE BLOCK
\*------------------------------------*/
/**
 * This is the layout styling the account profile view within a menu.
 *
 *
 * @block profile-block
 */
.profile-block {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding-bottom: 15px;
  margin-bottom: 1.25rem;
  /* Appearance */
  border-bottom: solid 1px #D5D5D5;
  /**
   * Wraps the user image element.
   * Preferably a <figure> tag.
   *
   * @element figure
   */
  /**
   * Applied to img to make it a circle.
   *
   * @element img
   */
  /**
   * Wraps the avatar summary elements.
   *
   * @element summary
   */
  /**
   * Styles the title text in an summary element.
   *
   * @element title
   */
  /**
   * Styles the meta info in an summary element.
   *
   * @element meta
   */
  /**
   * Small button usually next to
   * other information inside a summary.
   *
   * @element action
   */
  /**
   * Media query for min-width 641px, medium screens up
   */ }
  .profile-block__figure {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    margin: 0 auto;
    padding-right: 15px;
    padding-bottom: 0;
    max-width: 3.75rem; }
  .profile-block__img {
    /* Appearance */
    border-radius: 50%; }
  .profile-block__summary {
    /* Display and box model */
    -ms-flex: 2;
        flex: 2; }
  .profile-block__title {
    /* Display and box model */
    margin-bottom: 0.375rem;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    line-height: 1em;
    text-transform: uppercase; }
  .profile-block__meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Display and box model */
    max-width: 12.5rem;
    margin-bottom: 0.3125rem;
    /* Appearance */
    font-size: 0.8125rem;
    color: #444444;
    line-height: 1em; }
  .profile-block__action {
    /* Appearance */
    text-transform: uppercase;
    font-size: 0.6875rem;
    text-decoration: none;
    color: #186ca6; }
    .profile-block__action--margin-top {
      /* Display and box model */
      margin-top: 0.625rem; }
  @media only screen and (min-width: 46.0625em) {
    .profile-block {
      /**
     * Styles the meta info in an summary element.
     *
     * @element meta
     */
      /**
     * Styles the title text in an summary element.
     *
     * @element title
     */ }
      .profile-block__meta {
        /* Appearance */
        color: #444444; }
      .profile-block__title {
        /* Appearance */
        color: #444444; } }

/*------------------------------------*    AVATAR-MENU
\*------------------------------------*/
/**
 * This is the layout styling the account profile view within a menu.
 *
 *
 * @block avatar-menu
 */
.avatar-menu {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 15px;
  /* Appearance */
  background: #f4f4f4;
  border-bottom: solid 1px #D5D5D5;
  margin-bottom: 0.9375rem;
  /**
   * Wraps the user image element.
   * Preferably a <figure> tag.
   *
   * @element figure
   */
  /**
   * Applied to img to make it a circle.
   *
   * @element img
   */
  /**
   * Wraps the avatar summary elements.
   *
   * @element summary
   */
  /**
   * Styles the title text in an summary element.
   *
   * @element title
   */
  /**
   * Styles the meta info in an summary element.
   *
   * @element meta
   */
  /**
   * Small button usually next to
   * other information inside a summary.
   *
   * @element action
   */
  /**
   * Media query for min-width 641px, medium screens up
   */
  /**
     * Styles the meta info in an summary element.
     *
     * @element meta
     */
  /**
     * Styles the title text in an summary element.
     *
     * @element title
     */ }
  .avatar-menu__figure {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    margin: 0 auto;
    padding-right: 15px;
    padding-bottom: 0;
    max-width: 3.75rem; }
  .avatar-menu__img {
    /* Appearance */
    border-radius: 50%; }
  .avatar-menu__summary {
    /* Display and box model */
    -ms-flex: 2;
        flex: 2; }
  .avatar-menu__title {
    /* Display and box model */
    margin-bottom: 0.375rem;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    line-height: 1em;
    text-transform: uppercase; }
  .avatar-menu__meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Display and box model */
    max-width: 12.5rem;
    /* Appearance */
    font-size: 0.8125rem;
    color: #444444;
    line-height: 1em; }
  .avatar-menu__action {
    /* Display and box model */
    margin-top: 0.625rem;
    /* Appearance */
    text-transform: uppercase;
    font-size: 0.6875rem;
    text-decoration: none;
    color: #186ca6; }
  .avatar-menu__meta {
    /* Appearance */
    color: #444444; }
  .avatar-menu__title {
    /* Appearance */
    color: #444444; }

/*------------------------------------*    EVENT-LIST
\*------------------------------------*/
/**
 *
 * @block event-list
 */
.event-list {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  height: auto;
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  overflow: visible;
  -ms-flex-flow: column nowrap;
      flex-flow: column nowrap;
  -ms-flex-align: stretch;
      align-items: stretch;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  align-items: stretch;
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-order: 0;
      order: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /*
   * @element item
   */
  /*
   * @element figure
   */
  /*
   * @element figure-label
   */
  /*
   * @element time
   */
  /*
   * @element time
   */
  /*
   * @element copy
   */
  /*
   * @element action
   */ }
  .event-list__item {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5;
    cursor: pointer; }
    .event-list__item:first-child {
      /* Display and box model */
      padding-top: 0; }
    .event-list__item:last-child {
      /* Display and box model */
      padding-bottom: 0;
      /* Appearance */
      border-bottom: 0; }
  .event-list__figure {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    margin-right: 0.9375rem;
    min-width: 1.6875rem;
    min-height: 1.6875rem;
    /*
     * @modifier calendar
     * @propery symbol
     * @for figure
     */
    /*
     * @modifier calendar-white
     * @propery symbol
     * @for figure
     */
    /*
     * @modifier calendar-check
     * @propery symbol
     * @for figure
     */
    /*
     * @modifier calendar-saved
     * @propery symbol
     * @for figure
     */
    /*
     * @modifier large
     * @propery size
     * @for figure
     */ }
    .event-list__figure--symbol--calendar {
      /* Appearance */
      background: url(../img/_portal/icon-cal.svg) 0 0 no-repeat;
      background-size: 100%; }
    .event-list__figure--symbol--calendar-white {
      /* Appearance */
      background: url(../img/_portal/icon-cal-white.svg) 0 0 no-repeat;
      background-size: 100%; }
    .event-list__figure--symbol--calendar-check {
      /* Appearance */
      background: url(../img/_portal/icon-cal-success.svg) 0 0 no-repeat;
      background-size: 100%; }
    .event-list__figure--symbol--calendar-saved {
      /* Appearance */
      background: url(../img/_portal/icon-cal-saved.svg) 0 0 no-repeat;
      background-size: 100%; }
    .event-list__figure--size--large {
      /* Display and box model */
      min-width: 1.875rem;
      min-height: 1.875rem;
      fill: inherit; }
      .event-list__figure--size--large .event-list__figure-label {
        font-size: 0.6875rem;
        padding-top: .75em;
        color: inherit; }
  .event-list__figure-label {
    /* Display and box model */
    padding-top: 0.625rem;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    color: #444444; }
  .event-list__time {
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    color: #444444; }
  .event-list__title {
    /* Display and box model */
    padding: 0.3125rem 0;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: #444444;
    /*
     * @modifier italic
     */
    /*
     * @modifier mark
     */ }
    .event-list__title--style--italic {
      /* Appearance */
      font-style: italic;
      color: #444444; }
    .event-list__title--style--mark {
      /* Appearance */
      font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
      font-weight: normal;
      padding: .25em; }
  .event-list__copy {
    /* Appearance */
    font-size: 0.8125rem;
    color: #444444; }
    .event-list__copy:hover {
      /* Appearance */
      color: #444444;
      text-decoration: underline; }
  .event-list__action {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    /* Appearance */
    text-align: right; }
  .event-list__action .button-icon {
    /* Appearance */
    font-size: 0.9375rem;
    color: #444444; }
  @media only screen and (min-width: 46.0625em) {
    .event-list {
      /*
     * @element figure-label
     */ }
      .event-list__figure-label {
        /* Display and box model */
        padding-top: 0.375rem;
        font-size: 0.6875rem; } }

/**
 * Used as a quick search field
 *
 * @block search-field
 */
.search-field {
  /* Display and box model */
  position: relative;
  display: inline-block;
  height: 2.1875rem;
  min-height: 2.1875rem;
  width: 100%;
  max-width: 18.75rem;
  padding: 0.5rem 0.75rem 0.5rem 2.1875rem;
  /* Appearance */
  background-color: #ffffff;
  color: #ffffff;
  border-radius: 35px;
  background: #ffffff url("../img/icn-search.svg") 0.75rem 50% no-repeat;
  background-size: 15px;
  font-size: 0.9375rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  color: #444444;
  box-shadow: none;
  border: solid 1px #666666;
  outline: none;
  font-family: "proxima-nova-regular", helvetica, Arial, San-serif;
  letter-spacing: 0.015rem;
  cursor: pointer;
  /*
  * Creates an Icon slide-out effect
  *
  * @modifier large
  * @property style
  */
  /*
  * Adjust height to the input.
  *
  * @modifier large
  * @property size
  */
  /*
  * Allows input to stretch
  *
  * @modifier flexible
  */ }
  .search-field ::-webkit-input-placeholder,
  .search-field input:-moz-placeholder {
    /* Appearance */
    color: #ffffff; }
  .search-field:hover {
    /* Display and box model */
    width: 100%;
    /* Appearance */
    background-color: #ffffff;
    background: #ffffff url("../img/icn-search-orange.svg") 0.75rem 50% no-repeat;
    background-size: 15px;
    text-indent: 0; }
  .search-field:focus, .search-field:active {
    /* Display and box model */
    width: 100%;
    /* Appearance */
    background: #ffffff url("../img/icn-search-orange.svg") 0.75rem 50% no-repeat;
    background-size: 15px;
    border-color: #186ca6;
    color: black;
    cursor: text;
    text-indent: 0; }
    .search-field:focus ::-webkit-input-placeholder,
    .search-field:focus input:-moz-placeholder, .search-field:active ::-webkit-input-placeholder,
    .search-field:active input:-moz-placeholder {
      /* Appearance */
      color: #444444; }
  .search-field--style--icon {
    /* Display and box model */
    width: 2.1875rem;
    height: 2.1875rem;
    padding: 0.5rem;
    /* Appearance */
    border-radius: 40px;
    background-color: #ffffff;
    background: #ffffff url("../img/icn-search.svg") 50% 47% no-repeat;
    background-size: 15px;
    border: solid 2px #666666;
    transition: .3s width;
    text-indent: 5em; }
    .search-field--style--icon:hover {
      /* Display and box model */
      padding: 0.5rem 0.75rem 0.5rem 2.0625rem;
      /* Appearance */
      color: #444444;
      border: solid 1px #666666; }
    .search-field--style--icon:focus, .search-field--style--icon:active {
      /* Display and box model */
      padding: 0.5rem 0.75rem 0.5rem 2.0625rem;
      /* Appearance */
      color: #444444;
      border-color: #186ca6;
      border-width: 2px; }
  .search-field--icon--right:hover {
    /* Display and box model */
    width: auto; }
  .search-field--icon--right:focus, .search-field--icon--right:active {
    /* Display and box model */
    width: auto; }
  .search-field--size--large {
    /* Display and box model */
    min-height: 2.1875rem;
    /* Appearance */
    background-size: 15px; }
  .search-field--flexible {
    /* Display and box model */
    max-width: 100%; }

input[type="search"] {
  /* Appearance */
  box-sizing: border-box; }

::-webkit-search-cancel-button {
  /* generate content after all "X" buttons */
  content: '';
  /* required for :after content to show */
  display: inline-block;
  position: relative;
  z-index: 100;
  /*
     * Setup dimensions for the custom icon.  Note that these dimensions seem to
     * affect positioning.
     */
  width: 1em;
  height: 1em;
  /*
     * Base64 encoded custom "X" icon
     * Natively 30x30, but downscaled for highres screens
     */
  background: #ffffff url("../img/icn-close.svg");
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;
  /* icon size */
  background-size: 1em;
  /* note: this positioning will need to be tweaked for iOS */
  background-position: top left;
  cursor: pointer; }

/**
 * Positions and styles the search results.
 *
 * @block search-result-bar
 */
.search-result {
  /*
    * Positions Search results bar.
    *
    * @element bar
    */
  /*
    * Positions Search results bar.
    *
    * @element bar-title
    */ }
  .search-result__bar {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    margin-top: 15px;
    margin-bottom: 1.875rem; }
  .search-result__bar-title {
    /* Appearance */
    color: #444444;
    font-size: 1.3125rem;
    /*
      * @modifier bold
      * for bar
      */ }
    .search-result__bar-title--style--bold {
      /* Appearance */
      color: #444444;
      font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
      font-weight: normal; }

/*------------------------------------*\
    SECTION HEADER
\*------------------------------------*/
/**
 * This is the styling for section headers / title bars.
 *
 *
 * @block section-header
 */
.section-header {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 15px;
  padding-top: 0;
  margin-top: 1.875rem;
  /* Appearance */
  line-height: 1.4em;
  /**
   * Wraps Title elements.
   * Used when an action is associated w/
   * a title.
   * Ex. Events Portal header
   *
   * @element title-group
   */
  /**
   * Title styling for section-header
   *
   * @element title
   */
  /**
   * Styling for subsequent info.
   * Positions info toward the end of title bar.
   *
   * @element caption
   */
  /**
   * Styling for buttons within the section-header
   * Positions them toward the end of title bar.
   *
   * @element action
   */
  /**
   *
   * @element action-item
   */
  /**
   * Styling for title-edit concepts.
   * Ex. Can be seen on Scorecard section of Decision.
   *
   * @element edit
   */
  /*///// MODIFIERS /////*/
  /**
   * Removes margin from top.
   * Primarily used for section headers that begin
   * a sequence of sections.
   * Ex. Settings & Config page
   *
   * @modifier no-pad-top
   */
  /**
   * Adds padding to the bottom
   *
   * @modifier pad-bottom
   */
  /**
   * Used when the header needs to be inline
   * Primarily used in mobile and modal situations.
   *
   * @modifier inline
   */
  /**
   * Adjust section header for Portal.
   *
   * @modifier border
   * @property style
   */
  /**
   * Encapsulates the section-header
   *
   * @modifier cap
   * @property style
   */
  /**
   * Adds border to bottom.
   *
   * @modifier border
   * @property style
   */
  /*///// DEPRECATED WILL BE REPLACED W/ ZF-ACCORDION /////*/
  /**
   * Used when the section header is in
   * a expanded state.
   *
   * @modifier expanded
   * @property state
   */
  /**
   * Used when the section header is in
   * a collapsed state.
   *
   * @modifier collapsed
   * @property state
   */
  /**
   * Media query for min-width 641px, medium screens
   */
  /**
   * Media query for min-width 1041px, large screens up
   */ }
  .section-header__title-group {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    height: 0.9375rem; }
  .section-header__title {
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    color: #444444;
    /**
     * Adds space to the left of action element
     * Used when having a action next to a hint.
     *
     * @modifier large
     * @for title
     */ }
    .section-header__title--size--large {
      /* Appearance */
      font-size: 1.1875rem;
      letter-spacing: .05em; }
  .section-header__caption {
    /* Appearance */
    font-size: 0.6875rem;
    line-height: 1.4em; }
  .section-header__action {
    /* Display and box model */
    position: relative;
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-align: center;
        align-items: center;
    /* Appearance */
    text-align: right; }
  .section-header__action-item {
    /* Display and box model */
    margin-right: 0.9375rem; }
    .section-header__action-item:last-child {
      /* Display and box model */
      margin-right: 0; }
      .section-header__action-item:last-child .button-icon {
        line-height: 1.04em; }
  .section-header__edit {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center; }
  .section-header--no-pad-top {
    /* Display and box model */
    margin-top: 0; }
  .section-header--pad-bottom {
    /* Display and box model */
    margin-bottom: 1.25rem; }
  .section-header--inline {
    /* Display and box model */
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0.625rem 1.25rem !important;
    /* Appearance */
    text-align: left;
    color: #444444;
    background: #F7F7F7;
    border-top: 0;
    border-radius: 0 !important; }
    .section-header--inline .section-header__title {
      /* Appearance */
      font-size: 0.8125rem; }
  .section-header--style--portal {
    /* Display and box model */
    height: 5rem;
    margin-top: 0;
    padding: 0 15px;
    /* Appearance */
    background: #ffffff;
    border-bottom: solid 1px #D5D5D5; }
    .section-header--style--portal .section-header__title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* Appearance */
      font-family: 'proxima-nova', Helvetica, Arial, San-serif;
      font-weight: normal;
      font-size: 1.5rem;
      line-height: 1.2em;
      text-align: left;
      color: #444444; }
    .section-header--style--portal .section-header__action {
      /* Display and box model */
      padding: 0 0.9375rem;
      line-height: 1.5em; }
      .section-header--style--portal .section-header__action:last-child {
        /* Display and box model */
        padding-right: 0; }
  .section-header--style--cap {
    /* Display and box model */
    padding: 0.625rem 15px;
    margin-top: 0.625rem;
    /* Appearance */
    background: #eaeaea;
    border-radius: 0.1875rem 0.1875rem 0.0625rem 0.0625rem; }
  .section-header--style--border {
    /* Appearance */
    border-bottom: solid 1px #D5D5D5; }
    .section-header--style--border .section-header__title {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal;
      font-size: 1.5rem;
      line-height: 1.2em;
      text-align: left;
      color: #444444; }
  .section-header--state--expanded {
    /* Display and box model */
    margin-top: 0;
    /*
     * Arrow Right Icon
     *
     * @element arrow-right
     * @property icon
     */ }
    .section-header--state--expanded .section-header__title:before {
      /* Display and box model */
      position: relative;
      display: inline-block;
      /** Appearance */
      font-family: "x-font";
      font-style: normal;
      font-weight: normal;
      speak: none;
      text-decoration: inherit;
      text-align: center;
      text-transform: none;
      font-variant: normal;
      text-transform: none;
      line-height: 1px;
      -webkit-text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      content: "";
      margin-right: .35em;
      font-size: 0.8125rem;
      color: #444444; }
  .section-header--state--collapsed {
    /* Display and box model */
    margin-top: 0;
    border-radius: 0.1875rem;
    /*
     * Arrow Right Icon
     *
     * @element arrow-right
     * @property icon
     */ }
    .section-header--state--collapsed .section-header__title:before {
      /* Display and box model */
      position: relative;
      display: inline-block;
      /** Appearance */
      font-family: "x-font";
      font-style: normal;
      font-weight: normal;
      speak: none;
      text-decoration: inherit;
      text-align: center;
      text-transform: none;
      font-variant: normal;
      text-transform: none;
      line-height: 1px;
      -webkit-text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      content: "";
      margin-right: .35em;
      font-size: 0.8125rem;
      color: #444444; }
  @media only screen and (min-width: 46.0625em) {
    .section-header {
      /* Display and box model */
      padding: 15px;
      /*///// MODIFIERS /////*/
      /**
     * Removes padding from top
     *
     * @modifier no-pad-top
     */
      /**
     * Encapsulates the section-header
     *
     * @modifier cap
     * @property style
     */
      /**
     * Adds border to bottom.
     *
     * @modifier border
     * @property style
     */ }
      .section-header--no-pad-top {
        /* Display and box model */
        padding-top: 0; }
      .section-header--style--cap {
        /* Display and box model */
        padding: 0.625rem 15px; }
      .section-header--style--border {
        /* Display and box model */
        padding: 0.625rem 15px; } }
  @media only screen and (min-width: 65em) {
    .section-header {
      /**
     * @element action
     */ }
      .section-header__action {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: end;
            justify-content: flex-end; } }

/*------------------------------------*    SELECT BASIC
\*------------------------------------*/
/**
 * Basic select styling. Overwrites the default browser select
 * styles. Apply this to native selects.
 *
 * @block select-basic
 */
.select-basic {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2.8125rem;
  font-size: 0.9375rem;
  /* Display and box model */
  display: inline-block;
  box-sizing: border-box;
  /* So that text doesn't overlap with arrow-down image (see appearance) */
  padding-right: 30px;
  /* this is a browse default,
  but foundation overwrites it to 100% */
  width: auto;
  /* Appearance */
  background: #ffffff url(../img/icn-arrow-down-sm.svg) calc(100% - 10px) 50% no-repeat;
  background-size: 0.9375rem;
  border: solid 1px #ccd2de;
  border-radius: 0.3125rem;
  text-indent: 1em;
  color: #444444;
  font-family: "proxima-nova-regular", helvetica, Arial, San-serif;
  letter-spacing: .03em;
  cursor: pointer;
  /* Clear browser defaults */
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  /* So that we don't inherit from parents.
  The select should not be multi-line, especially
  that its height is fixed */
  word-wrap: normal;
  outline: none;
  /* PROPERTY: SIZE */
  /**
   * Medium input
   *
   * @modifier medium
   * @property size
   */
  /**
   * Apply to get small sized select.
   *
   * @modifier small
   * @property size
   */
  /**
   * Apply to get extra small sized select.
   *
   * @modifier extra-small
   * @property size
   */
  /* OTHER MODIFIERS */
  /**
   * Fill the parent width.
   *
   * @modifier flexible
   */
  /**
   * For selects that need to shrink in size.
   *
   * @modifier mobile-button
   */
  /* OTHER MODIFIERS */
  /**
   * Input is in error state. Usually
   * due to validation for example empty
   * required fields.
   *
   * Using double selector for specificity
   * because it overrides the default styles.
   *
   * @modifier error
   */
  /**
   * Media query for min-width 1041px, large screens up
   *
   */ }
  .select-basic:focus, .select-basic:active {
    border: solid 1px #186ca6;
    border-color: #186ca6; }

@-moz-document url-prefix() {
  .select-basic {
    text-indent: 3px; } }
  .select-basic > option[value="default"] {
    /* Appearance */
    color: #D5D5D5; }
  .select-basic--size--medium {
    /* Display and box model */
    height: 2.1875rem;
    min-height: 2.1875rem;
    margin: 0;
    /* Appearance */
    font-size: 0.8125rem; }
  .select-basic--size--small {
    /* Display and box model */
    height: 1.6875rem;
    /* Appearance */
    font-size: 0.8125rem; }
  .select-basic--size--extra-small {
    /* Display and box model */
    height: 1.6875rem;
    /* Appearance */
    font-size: 0.6875rem; }
  .select-basic--flexible {
    /* Display and box model */
    width: 100%; }
  @media only screen and (min-width: 0em) and (max-width: 46rem) {
    .select-basic.select-basic--mobile-button {
      /* Display and box model */
      width: 1.875rem;
      height: 1.875rem;
      /* Appearance */
      background-position: 50% 50%;
      font-size: 0; } }
  .select-basic.select-basic--error {
    /* Appearance */
    border-color: #E74C3C;
    color: rgba(231, 76, 60, 0.7);
    background: #ffffff url(../img/icn-arrow-down-sm-red.svg) calc(100% - 10px) 50% no-repeat; }
  @media only screen and (min-width: 65em) {
    .select-basic {
      /* Display and box model */
      min-width: 7.8125rem;
      padding-right: 1.6875rem; } }

/*------------------------------------*    SELECT ACTION
\*------------------------------------*/
/**
 * Select styling. Overwrites the default browser select
 * styles. Apply this to table action selects.
 *
 * @block select-action
 */
.select-action {
  width: 2.1875rem;
  height: 2.1875rem;
  font-size: 0.9375rem;
  /* Clear browser defaults */
  -webkit-appearance: none;
  background: transparent url(../img/icon-elipsis.svg) 50% 50% no-repeat;
  background-size: 30px;
  /* Display and box model */
  display: inline-block;
  box-sizing: border-box;
  /* So that text doesn't overlap with arrow-down image (see appearance) */
  text-align: center;
  /* Appearance */
  border: none;
  color: #444444;
  font-family: "proxima-nova-regular", helvetica, Arial, San-serif;
  font-size: 0.9375rem;
  letter-spacing: .03em;
  cursor: pointer;
  /* So that we don't inherit from parents.
  The select should not be multi-line, especially
  that its height is fixed */
  word-wrap: normal; }

/*------------------------------------*    SETTINGS
\*------------------------------------*/
/**
 * These are settings UI sepcific styes.
 *
 *
 * @block settings
 */
.settings {
  /* Display and box model */
  margin: 1.875rem 0;
  /**
   * Media query for min-width 641px, medium screens
   *
   * @modifier medium-up
   * @property query
   *
   */
  padding: 0 1.875rem;
  /* Display and box model */
  margin-top: 0;
  /*
   * Display action buttons related to a
   * settings area.
   *
   * @element footer
   */
  /*
   *
   * @element footer-container
   */
  /*
   *
   * @element footer-button
   */
  /**
   * Media query for min-width 641px, medium screens and up
   */
  /* Display and box model */
  max-width: 83.5rem;
  margin: 0 auto;
  /*
     *
     * @element footer-container
     */ }
  .settings:last-child {
    margin-bottom: 1.875rem; }
  .settings__footer {
    /* Display and box model */
    padding: 1.25rem 0;
    margin-top: 0.9375rem; }
    .settings__footer--border-top {
      /* Appearance */
      border-top: solid 1px #444444; }
  .settings__footer-container {
    /* Display and box model */
    max-width: 37.5rem;
    margin: 0 auto; }
  .settings__footer-button {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    text-align: center;
    margin: 0 0.9375rem;
    margin-bottom: 0.9375rem; }
  .settings:first-child {
    margin-top: 0; }
  .settings__footer-container {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    max-width: 37.5rem;
    margin: 0 auto; }

/*------------------------------------*    STATUS-DOT
\*------------------------------------*/
/**
 * Displays circular status color dot before text.
 * Ex. Use with <i> tag.
 *
 * @block status-dot
 */
.status-dot {
  /* Display and box model */
  margin-right: .35em;
  /* Appearance */
  /* VALUE MODIFIERS */
  /**
   *
   * @modifier not-started
   * @for status-dot
   */
  /**
   *
   * @modifier in-progress
   * @for status-dot
   */
  /**
   *
   * @modifier past-due
   * @for status-dot
   */
  /**
   *
   * @modifier complete
   * @for status-dot
   */
  /**
   *
   * @modifier basic
   * @for status-dot
   */
  /**
   *
   * @modifier blue
   * @for status-dot
   */
  /**
   *
   * @modifier green
   * @for status-dot
   */
  /**
   *
   * @modifier yellow
   * @for status-dot
   */
  /**
   *
   * @modifier orange
   * @for status-dot
   */
  /**
   *
   * @modifier red
   * @for status-dot
   */ }
  .status-dot:before {
    content: "";
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%; }
  .status-dot--value--not-started {
    /* Appearance */ }
    .status-dot--value--not-started:before {
      background: #444444; }
  .status-dot--value--in-progress {
    /* Appearance */ }
    .status-dot--value--in-progress:before {
      background: #FF6800; }
  .status-dot--value--past-due {
    /* Appearance */ }
    .status-dot--value--past-due:before {
      background: #E74C3C; }
  .status-dot--value--complete {
    /* Appearance */ }
    .status-dot--value--complete:before {
      background: #1a6f43; }
  .status-dot--value--basic {
    /* Appearance */ }
    .status-dot--value--basic:before {
      background: #ffffff; }
  .status-dot--value--blue:before {
    background: #167ce3; }
  .status-dot--value--green:before {
    background: #1a6f43; }
  .status-dot--value--yellow:before {
    background: #fdb72b; }
  .status-dot--value--orange:before {
    background: #FF6800; }
  .status-dot--value--red:before {
    background: #E74C3C; }

/*------------------------------------*    STATUS RATING
\*------------------------------------*/
/**
 * Define rating style
 *
 * @block status-rating
 */
.status-rating {
  /* Display and box model */
  padding: .5em .75em;
  /* Appearance */
  font-size: 0.6875rem;
  color: #ffffff;
  border-radius: 0.4375rem;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  /**
   *
   * @modifier basic
   * @for status-rating
   */
  /**
   *
   * @modifier blue
   * @for status-rating
   */
  /**
   *
   * @modifier green
   * @for status-rating
   */
  /**
   *
   * @modifier yellow
   * @for status-rating
   */
  /**
   *
   * @modifier orange
   * @for status-rating
   */
  /**
   *
   * @modifier red
   * @for status-rating
   */
  /**
   * Media query for min-width 641px, medium screens and up
   */
  /* Display and box model */
  padding: .5em 1em;
  /**
   * Media query for min-width 1041px, medium screens and up
   */
  /* Display and box model */
  padding: .75em 1em;
  /* Appearance */
  font-size: 0.9375rem; }
  .status-rating--value--basic {
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    background: #ffffff;
    border: solid 1px #444444;
    box-shadow: none; }
  .status-rating--value--blue {
    background: #167ce3;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.25) 0%, rgba(22, 124, 227, 0.5) 100%); }
  .status-rating--value--green {
    background: #1a6f43;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.25) 0%, rgba(77, 191, 124, 0.5) 100%); }
  .status-rating--value--yellow {
    background: #fdb72b;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.25) 0%, rgba(253, 183, 43, 0.5) 100%); }
  .status-rating--value--orange {
    background: #FF6800;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.15) 0%, #ff6800 100%); }
  .status-rating--value--red {
    background: #E74C3C;
    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.25) 0%, rgba(231, 76, 60, 0.5) 100%); }

/*------------------------------------*    STUDENT PROFILE
\*------------------------------------*/
/**
 * Positions blocks for the Student Profile section
 *
 * @block student-profile
 */
.student-profile {
  /*
   * Positions blocks of items.
   *
   * @element content
   */
  /**
   * Media query for min-width 641px, medium screens up
   */
  /* Display and box model */
  display: -ms-flexbox;
  display: flex; }
  .student-profile__content {
    /* Display and box model */
    -ms-flex: 2;
        flex: 2;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    padding: 0; }

/*------------------------------------*  STUDENT INFO
\*------------------------------------*/
/**
 * Styles the elements that make up the Student Info block.
 * The Setudent info block displays the high-level student info
 * such as Name, Contact, Address, Stage, etc.
 *
 * @block student-info
 */
.student-info {
  /* Display and box model */
  height: 100vh;
  /* Appearance */
  background: #F7F7F7;
  /*
   * Wraps content within student info block
   *
   * @element container
   */
  /*
   * Hides Student Info Block
   * Use when toggling show and hide.
   *
   * @modifier hide
   */
  /*
   * Wraps and positions the <img> element.
   *
   * @element avatar
   */
  /*
   * Styles the <img> element.
   *
   * @element img
   */
  /*
   * Wraps the details
   * Currently hiding the details from mobile view.
   *
   * @element details
   */
  /*
  * Wraps the details
  * Currently hiding the details from mobile view.
  *
  * @element details
  */
  /*
   * Positions groups of content within the student-info block.
   *
   * @element cell
   */
  /*
   * Styles the students title group.
   *
   * @element title
   */
  /*
   * Styles the students name.
   *
   * @element name
   */
  /* Button element that is used to display
   * student name when minimized
   *
   * @element button
   */
  /*
   * Styles minimized button element title.
   *
   * @element button-title
   */
  /*
   * Action within minimized button element.
   *
   * @element button-action
   */
  /*
  * Styles the labels.
  *
  * @element label
  */
  /*
  * Styles the Values.
  *
  * @element value
  */
  /*
   * Positions the actions block.
   *
   * @element action
   */
  /**
  * Media query for sm-med
  */
  /**
  * Media query for min-width 641px, medium screens up
  */
  /* Button element that is used to display
     * student name when minimized
     *
     * @element button
     */
  /**
   * Media query for min-width 925px, large screens up
   */
  /*
     * Wraps content within student info block
     *
     * @element container
     */
  /*
     * Positions groups of content within the student-info block.
     *
     * @element cell
     */ }
  .student-info__container {
    /* Display and box model */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    padding-top: 0;
    padding-bottom: 5rem;
    /* Appearance */
    transition: 1s; }
  .student-info--hide {
    /* Display and box model */
    display: none;
    transform: translateY(100%); }
  .student-info__avatar {
    /* Appearance */
    text-align: center; }
  .student-info__img {
    /* Display and box model */
    max-width: 9.375rem;
    /* Appearance */
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    border-radius: 50%; }
  .student-info__basic {
    /* Display and box model */
    padding: 1.875rem; }
  .student-info__details {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    /* Appearance */
    padding: 0 1.875rem;
    padding-bottom: 2.8125rem; }
  .student-info__cell {
    /* Display and box model */
    -ms-flex: 1 0 auto;
        flex: 1 0 auto;
    margin-bottom: 15px; }
    .student-info__cell:last-child {
      margin-bottom: 0; }
  .student-info__title {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    height: 3.75rem;
    /* Appearance */
    background: #F7F7F7;
    border-bottom: solid 1px #D5D5D5;
    color: #444444; }
    .student-info__title .student-info__button-action {
      /* Appearance */
      color: #444444; }
      .student-info__title .student-info__button-action:before {
        /* Appearance */
        content: ""; }
  .student-info__name {
    /* Display and box model */
    padding: 0 1.875rem;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.3125rem;
    text-align: left; }
  .student-info__button {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    position: fixed;
    bottom: 4.8125rem;
    right: 0;
    height: 2.1875rem;
    width: 100%;
    /* Appearance */
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(0.1875rem);
    /*
     * Hides minimized button element
     *
     * @modifier hide
     * @for button
     */ }
    .student-info__button--hide {
      /* Display and box model */
      display: none; }
  .student-info__button-title {
    /* Display and box model */
    padding: 0 15px;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal; }
    .student-info__button-title:before {
      /* Display and box model */
      position: relative;
      display: inline-block;
      /** Appearance */
      font-family: "x-font";
      font-style: normal;
      font-weight: normal;
      speak: none;
      text-decoration: inherit;
      text-align: center;
      text-transform: none;
      font-variant: normal;
      text-transform: none;
      line-height: 1px;
      -webkit-text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      /* Display and box model */
      margin-right: .35em;
      /* Appearance */
      content: "";
      color: #444444; }
  .student-info__button-action {
    /* Display and box model */
    position: relative;
    display: inline-block;
    /** Appearance */
    font-family: "x-font";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    font-variant: normal;
    text-transform: none;
    line-height: 1px;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    padding: 0 1.875rem;
    /* Appearance */
    text-align: right; }
    .student-info__button-action:before {
      /* Appearance */
      content: "";
      font-size: 0.9375rem; }
  .student-info__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444; }
  .student-info__value {
    /* Appearance */
    font-size: 0.9375rem;
    font-weight: normal;
    text-transform: none; }
  .student-info__action {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
        flex: 1;
    padding: 0 1.875rem; }
  .student-info__button {
    /* Display and box model */
    max-width: 17.5rem;
    bottom: 5.375rem; }
  .student-info__container {
    /* Display and box model */
    position: relative;
    top: 0;
    -ms-flex: 1 0 20rem;
        flex: 1 0 20rem;
    width: 20rem; }
  .student-info__cell {
    /* Display and box model */
    margin-bottom: 1.25rem; }

/*------------------------------------*    TABLE
\*------------------------------------*/
/**
 * Generic Table layout
 * Can be used to display tabular data in conjunction w/ table-header.
 *
 * @block table
 */
.table {
  border-spacing: 0;
  width: 100%;
  font-family: "proxima-nova-regular", helvetica, Arial, San-serif;
  border-collapse: collapse;
  /* Display and box model */
  margin-top: 1.875rem;
  /**
   * Removes marging from top.
   *
   * @modifier no-space-top
   */
  /**
   * Adds zebra striping to rows
   * Used primarily on index level rows
   *
   * @modifier stripes
   */
  /**
   * Adds table-layout:fixed to table element
   * Used when the table has hide/show rows.
   * keeps columns from shifting
   *
   * @modifier fixed
   */
  /**
   * Displays information as a <tr>
   *
   * @element row
   */
  /**
   * @element cell
   * Displays information as a <td>
   */
  /**
   * Styles the label text
   *
   * @element label
   */
  /**
   * Styles the value text
   *
   * @element value
   */
  /**
   * Positions and styles icons
   *
   * @element figure
   */
  /**
   * Displays meta information corresponding to value.
   * Set below values.
   *
   * @element meta
   */
  /**
   * Media query for min-width 640px, small screen only
   */
  /**
     * Displays information as a <td>
     *
     * @element cell
     */
  /**
   * Media query for min-width 641px, medium screens and up
   */
  /**
   * Media query for min-width 1041px, large screens up
   */
  /**
   * Media query for print
   */ }
  .table--no-space-top {
    /* Display and box model */
    margin-top: 0; }
  .table--stripes .table__row {
    /* Appearance */
    transition: background .3s;
    border: none; }
    .table--stripes .table__row:nth-of-type(even) {
      background: rgba(21, 138, 202, 0.05); }
  .table--fixed {
    /* Display and box model */
    table-layout: fixed; }
  .table__row {
    /* Display and  box model */
    display: block;
    padding: 15px;
    /* Appearance */
    color: #444444;
    line-height: 1.4em;
    border-bottom: solid 1px #F7F7F7;
    cursor: pointer;
    /**
     * Styles the background color Light Blue.
     * Used in rows displaying segmented breakdowns.
     *
     * @modifier blue
     * @property color
     * @for row
     */
    /**
     * This adds bold and uppercase styling to text in a row.
     *
     * @modifier important
     * @for row
     */ }
    .table__row:first-child {
      /* Appearance */
      border-top: solid 1px #F7F7F7; }
    .table__row:last-child {
      /* Appearance */
      border-bottom: 0; }
    .table__row--color--blue {
      /* Appearance */
      background: rgba(21, 138, 202, 0.05); }
    .table__row--important {
      /* Display and box model */
      margin-right: .35em;
      /* Appearance */
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: uppercase; }
  .table__cell {
    /* Display and box model */
    margin-bottom: 15px;
    /**
     * Displays the empty cell.
     *
     * @modifier empty
     * @for cell
     */
    /**
     * Wraps around button element in cell
     * Used to house the show/hide button.
     *
     * @modifier action
     * @for cell
     */
    /**
     * @modifier center
     * @for cell
     */ }
    .table__cell:last-child {
      /* Display and box model */
      margin-bottom: 0; }
    .table__cell--empty {
      /* Display and box model */
      empty-cells: show; }
    .table__cell--action {
      /* Display and box model */
      margin-top: 0.625rem; }
    .table__cell--center {
      /* Appearance */
      text-align: center; }
  .table__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Appearance */
    text-align: left;
    font-size: 0.5625rem;
    line-height: 1em; }
  .table__value {
    /* Display and box model */
    display: block;
    /* Appearance */
    font-size: 0.8125rem;
    line-height: 1.2em;
    /**
     * @modifier important
     * @for value
     */
    /**
     * @modifier center
     * @for value
     */
    /**
     * @modifier bold
     * @property style
     * @for value
     */ }
    .table__value--important {
      /* Display and box model */
      margin-bottom: 0.625rem;
      /* Appearance */
      font-size: 0.9375rem;
      font-weight: 700;
      text-transform: uppercase; }
    .table__value--center {
      /* Appearance */
      text-align: center; }
    .table__value--style--bold {
      /* Appearance */
      font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
      font-weight: normal; }
  .table__figure {
    /* Display and box model */
    position: relative;
    display: inline-block;
    /** Appearance */
    font-family: "x-font";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    font-variant: normal;
    text-transform: none;
    line-height: 1px;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /**
     * Scales icon size up
     *
     * @modifier large
     * @property size
     * @for figure
     */
    /**
     * Refresh icon
     *
     * @modifier incoming
     * @property icon
     * @for figure
     */
    /**
     * Check icon
     *
     * @modifier complete
     * @property icon
     * @for figure
     */
    /**
     * In Progress icon
     *
     * @modifier in-progress
     * @property icon
     * @for figure
     */
    /**
     * Past Due icon
     *
     * @modifier past-due
     * @property icon
     * @for figure
     */
    /**
     * Empty Check icon
     *
     * @modifier not-started
     * @property icon
     * @for figure
     */
    /**
     * Warning icon
     *
     * @modifier warning
     * @property icon
     * @for figure
     */ }
    .table__figure--size--large {
      /* Appearance */
      font-size: 1.6875rem; }
    .table__figure--icon--refresh {
      /* Appearance */
      color: #186ca6; }
      .table__figure--icon--refresh:before {
        content: ""; }
    .table__figure--icon--complete {
      /* Appearance */
      color: #186ca6;
      font-size: 1.125rem; }
      .table__figure--icon--complete:before {
        content: ""; }
    .table__figure--icon--in-progress {
      /* Appearance */
      display: inline-block;
      padding: 0;
      width: 0.9375rem;
      height: 0.9375rem;
      /* Appearance */
      border: 1px solid #fdb72b;
      border-radius: 50%;
      transform-origin: 0.9375rem 0.9375rem;
      background: #fdb72b;
      /* Old browsers */
      background: linear-gradient(135deg, #fdb72b 0%, #fdb72b 51%, transparent 51%, transparent 100%); }
    .table__figure--icon--past-due {
      /* Appearance */
      display: inline-block;
      padding: 0;
      width: 0.9375rem;
      height: 0.9375rem;
      /* Appearance */
      background: #E74C3C;
      border: 1px solid #E74C3C;
      border-radius: 50%;
      transform-origin: 0.9375rem 0.9375rem; }
    .table__figure--icon--not-started {
      /* Appearance */
      display: inline-block;
      padding: 0;
      width: 0.9375rem;
      height: 0.9375rem;
      /* Appearance */
      border: 1px solid #444444;
      border-radius: 50%;
      transform-origin: 0.9375rem 0.9375rem; }
    .table__figure--icon--warning {
      /* Appearance */
      color: #E74C3C; }
      .table__figure--icon--warning:before {
        content: ""; }
  .table__meta {
    /* Display and box model */
    display: block;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.6875rem;
    font-style: italic;
    line-height: 1.2em; }
  .table__cell {
    /**
       * Positioning for status in table-cells
       *
       * @modifier status
       * @for cell
       */ }
    .table__cell--status {
      /* Display and box model */
      margin-bottom: 0.625rem; }
  @media only screen and (min-width: 46.0625em) {
    .table {
      /* Display and box model */
      display: table;
      /**
     * Displays information as a <tr>
     *
     * @element row
     */
      /**
     * Displays information as a <td>
     * This is positioned relative because
     * it contains the status-bar.
     *
     * @element cell
     */
      /**
     * Styles the label text
     *
     * @element label
     */
      /**
     * Styles the value text
     *
     * @element value
     */
      /**
     * Displays meta information corresponding to value.
     * Set below values.
     *
     * @element meta
     */ }
      .table__row {
        /* Display and box model */
        display: table-row;
        /* Appearance */
        border-top: 0; }
      .table__cell {
        /* Display and box model */
        position: relative;
        display: table-cell;
        padding: 15px;
        vertical-align: middle;
        /**
       * Lessens the padding on cells.
       *
       * @modifier less-pad
       * @for cell
       */
        /**
       * Aligns cell content to the right
       *
       * @modifier right
       * @for cell
       */
        /**
       * Wraps around button element in cell
       *
       * @modifier action
       * @for cell
       */ }
        .table__cell--less-pad {
          /* Appearance */
          padding: 15px 0.625rem; }
        .table__cell--right {
          /* Appearance */
          text-align: right; }
        .table__cell--action {
          /* Display and box model */
          margin-top: 0; }
      .table__label {
        /* Display and box model */
        display: none;
        /* Display and box model */
        padding: 0 1.875rem; }
      .table__value {
        /* Appearance */
        font-size: 0.9375rem;
        font-weight: normal;
        text-transform: none;
        /**
       * This adds bold and uppercase styling to text in a value.
       *
       * @modifier important
       * @for value
       */ }
        .table__value--important {
          /* Display and box model */
          margin-bottom: 0;
          /* Appearance */
          font-size: 0.8125rem; }
      .table__meta {
        /* Appearance */
        font-style: normal;
        text-transform: uppercase;
        color: #D5D5D5; } }
  @media only screen and (min-width: 65em) {
    .table {
      /**
     * Adds hover to rows
     * Used primarily on index level rows
     *
     * @modifier stripes
     */ }
      .table--stripes .table__row:hover {
        background: #fff3dc; } }
  @media print {
    .table {
      /* Display and box model */
      display: table;
      /* Appearance */
      line-height: 1em;
      /**
     * Displays information as a <tr>
     *
     * @element row
     */
      /**
     * Displays information as a <td>
     *
     * @element cell
     */
      /**
     * Styles the label text
     *
     * @element label
     */
      /**
     * Styles the value text
     *
     * @element value
     */ }
      .table__row {
        /* Display and box model */
        display: table-row;
        /* Appearance */
        border-top: 0;
        /**
       * Styles the background color Light Blue.
       * Used in rows displaying tax breakdowns.
       *
       * @modifier blue
       * @for row
       */ }
        .table__row--color--blue {
          background-color: rgba(21, 138, 202, 0.05); }
      .table__cell {
        /* Display and box model */
        display: table-cell;
        padding: 1em 0;
        /**
       * Alights cell content to the right
       *
       * @modifier right
       * @for cell
       */ }
        .table__cell--right {
          text-align: right; }
      .table__label {
        display: none;
        padding: 0; }
      .table__value {
        /* Appearance */
        font-weight: normal;
        text-transform: none;
        /**
       * This adds bold and uppercase styling to text in a value.
       *
       * @modifier important
       * @for value
       */ }
        .table__value--important {
          /* Display and box model */
          margin-bottom: 0;
          /* Appearance */
          font-size: 0.8125rem; } }

/*------------------------------------*    TABLE HEADER
\*------------------------------------*/
/**
 * Can be used to display index style table headers.
 *
 * @block table-header
 */
.table-header {
  /* Display and box model */
  display: table-row;
  /* Appearance */
  background: #ffffff;
  border-top: solid 1px #D5D5D5;
  border-bottom: solid 1px #D5D5D5;
  /**
   * Hides Table header from mobile
   *
   * @modifier hide-from-mobile
   */
  /**
   * Styles the background color blue.
   * Used in headers displaying tax breakdowns.
   *
   * @modifier blue
   * @property color
   */
  /**
   * Styles the background transparent.
   * Used in headers displaying transation history breakdowns.
   *
   * @modifier transparent
   * @property color
   */
  /**
   * Displays information as a <td>
   *
   * @element cell
   */
  /**
   * Styles the label text
   *
   * @element label
   */
  /**
   * Media query for min-width 641px, medium screens and up
   */
  /**
   * Media query for print
   */ }
  .table-header--hide-from-mobile {
    /* Display and box model */
    display: none; }
  .table-header--color--blue {
    background: rgba(7, 43, 63, 0.05);
    border-top: none;
    border-bottom: none; }
  .table-header--color--transparent {
    background: transparent;
    border-top: none; }
  .table-header__cell {
    /* Display and box model */
    display: table-cell;
    /* Appearance */
    text-decoration: none;
    /**
     * Adds a max width to shorten the element
     *
     * @modifier short
     * @property size
     * @for cell
     */
    /**
     * Alights cell content to the right
     *
     * @modifier right
     * @for cell
     */
    /**
     * @modifier center
     * @for cell
     */
    /**
     * Displays the empty cell.
     *
     * @modifier empty
     * @for cell
     */ }
    .table-header__cell--size--short {
      /* Display and box model */
      width: 6.25rem; }
    .table-header__cell--right {
      text-align: right; }
    .table-header__cell--center {
      /* Appearance */
      text-align: center; }
    .table-header__cell--empty {
      /* Display and box model */
      empty-cells: show; }
  .table-header__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    padding: 0.3125rem 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Appearance */
    line-height: 3em;
    /**
     * Lessens the padding on cells.
     *
     * @modifier less-pad
     * @for cell
     */
    /**
     * Make font-size smaller.
     * Use in tax breakdown tables.
     *
     * @modifier small
     * @property size
     * @for label
     */
    /**
     * Make font color white.
     * Use in tax breakdown tables.
     *
     * @modifier white
     * @property color
     * @for label
     */
    /**
     * Styles the table header label to show ascending arrow.
     *
     * @modifier ascending
     * @property direction
     * @for label
     */
    /**
     * Styles the table header label to show descending arrow.
     *
     * @modifier descending
     * @property direction
     * @for label
     */ }
    .table-header__label--less-pad {
      /* Appearance */
      padding: 0.625rem; }
    .table-header__label--size--small {
      font-size: 0.5625rem; }
    .table-header__label--color--white {
      color: #ffffff; }
    .table-header__label--direction--ascending {
      /* Appearance */
      color: #186ca6; }
      .table-header__label--direction--ascending:after {
        /* Display and box model */
        position: relative;
        display: inline-block;
        /** Appearance */
        font-family: "x-font";
        font-style: normal;
        font-weight: normal;
        speak: none;
        text-decoration: inherit;
        text-align: center;
        text-transform: none;
        font-variant: normal;
        text-transform: none;
        line-height: 1px;
        -webkit-text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        margin-left: .35em;
        content: ""; }
    .table-header__label--direction--descending {
      /* Appearance */
      color: #186ca6; }
      .table-header__label--direction--descending:after {
        /* Display and box model */
        position: relative;
        display: inline-block;
        /** Appearance */
        font-family: "x-font";
        font-style: normal;
        font-weight: normal;
        speak: none;
        text-decoration: inherit;
        text-align: center;
        text-transform: none;
        font-variant: normal;
        text-transform: none;
        line-height: 1px;
        -webkit-text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        margin-left: .35em;
        content: ""; }
  @media only screen and (min-width: 46.0625em) {
    .table-header {
      /**
     * Hides Table header from mobile
     *
     * @modifier hide
     */ }
      .table-header--hide-from-mobile {
        /* Display and box model */
        display: table-row; } }
  @media print {
    .table-header {
      /* Display and box model */
      display: table-row;
      /* Appearance */
      line-height: 1em;
      background: black;
      /**
     * Removes border top and bottom.
     *
     * @modifier blue
     * @property color
     */
      /**
     * Displays information as a <td>
     *
     * @element cell
     */
      /**
     * Styles the label text
     *
     * @element label
     */ }
      .table-header--color--blue {
        /* Appearance */
        border-top: none;
        border-bottom: none; }
      .table-header__cell {
        /* Display and box model */
        display: table-cell;
        padding: .5em 0;
        /**
       * Alights cell content to the right
       *
       * @modifier right
       * @for cell
       */
        /**
       * Displays the empty cell.
       *
       * @modifier empty
       * @for cell
       */ }
        .table-header__cell--right {
          /* Appearance */
          text-align: right; }
        .table-header__cell--empty {
          /* Display and box model */
          empty-cells: show; }
      .table-header__label {
        /* Display and box model */
        display: block;
        padding-bottom: 0.3125rem;
        /* Appearance */
        font-family: 'proxima-nova', Helvetica, Arial, San-serif;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 0.6875rem;
        color: #444444;
        /* Display and box model */
        padding: 0;
        /* Appearance */
        font-size: 0.5625rem;
        color: #ffffff; } }

/*------------------------------------*   TABLE-LIST
\*------------------------------------*/
/**
 *
 * @block table-list
 */
.table-list {
  /* Display and box model */
  margin: 0.9375rem; }

/*------------------------------------*   TABLE-LIST-ITEM
\*------------------------------------*/
/**
 *
 * @block table-list-item
 */
.table-list-item {
  /* Display and box model */
  margin-bottom: 0.625rem;
  /* Appearance */
  background: #ffffff;
  /*
   * @element col
   */
  /*
   * @element footer
   */
  /*
   * @element item
   */
  /*
   * @element copy
   */
  /*
   * Subtext that adds detail to value.
   *
   * @element meta
   */
  /*
   * @element label
   */
  /*
   * @element link
   */
  /*
   * @element action
   */
  /*
   * @element action-item
   */
  /*
   * Active state
   */
  /**
   * Media query for min-width 1024px, xlarge screens up
   */ }
  .table-list-item:last-child {
    /* Display and box model */
    margin-bottom: 0; }
  .table-list-item__block {
    /* Display and box model */
    display: block;
    padding: 1.25rem;
    /* Appearance */
    border: solid 1px #D5D5D5;
    border-radius: 0.3125rem;
    transition: .3s;
    /*
     * This manges elements that are hidden
     * below primary block.
     * Works simarily to accordion.
     *
     * @modifier sub
     * @for block
     */
    /*
     *
     * @modifier inactive
     * @property status
     * @for block
     */ }
    .table-list-item__block--sub {
      /* Display and box model */
      display: none;
      /* Appearance */
      background: rgba(21, 138, 202, 0.05);
      border-radius: 0;
      border-top: 0; }
      .table-list-item__block--sub:last-child {
        /* Appearance */
        border-radius: 0 0 0.3125rem 0.3125rem; }
    .table-list-item__block--status--inactive {
      /* Appearance */
      border-left: solid 10px #E74C3C; }
  .table-list-item__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: start;
        align-items: flex-start;
    padding: 0 0.9375rem;
    /*
     * Positions blocks of items at the start (left).
     * Ex. Dashboard icon is set to the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     *
     * @modifier end
     * @for col
     */
    /*
     * Extend the flex to be 3x larger.
     *
     * @modifier long
     * @for col
     */ }
    .table-list-item__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .table-list-item__col--end {
      /* Display and box model */
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center; }
    .table-list-item__col--long {
      /* Display and box model */
      -ms-flex: 3;
          flex: 3; }
  .table-list-item__footer {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    text-align: right;
    padding: 1.25rem;
    padding-top: 0; }
  .table-list-item__item {
    /* Display and box model */
    margin-bottom: 0.625rem; }
    .table-list-item__item--flex {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: baseline;
          align-items: baseline; }
  .table-list-item__copy {
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.8125rem;
    line-height: 1.4em;
    color: #444444;
    /*
     * Aligns text center
     *
     * @modifer center
     * @for copy
     */ }
    .table-list-item__copy--center {
      /* Appearance */
      text-align: center; }
  .table-list-item__meta {
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.6875rem;
    line-height: 1.4em;
    font-style: italic;
    color: #444444; }
  .table-list-item__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Display and box model */
    margin-right: .35em;
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    line-height: 1.2em; }
  .table-list-item__link {
    /* Appearance */
    color: #186ca6; }
  .table-list-item__action {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    text-align: center; }
  .table-list-item__action-item {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    margin: 0 0.625rem;
    /* Appearance */
    color: #444444; }
    .table-list-item__action-item:last-child {
      margin-right: 0; }
  .table-list-item.is-active .table-list-item__block:first-child {
    border-radius: 0.3125rem 0.3125rem 0 0; }
  .table-list-item.is-active .table-list-item__block--sub {
    display: block; }
  @media only screen and (min-width: 46.0625em) {
    .table-list-item {
      /*
    * @element action
    */
      /*
    * @element col
    */
      /*
     * Active state
     */ }
      .table-list-item__block {
        /* Display and box model */
        display: -ms-flexbox;
        display: flex;
        /*
       * This manges elements that are hidden
       * below primary block.
       * Works simarily to accordion.
       *
       * @modifier sub
       * @for block
       */ }
        .table-list-item__block--sub {
          /* Display and box model */
          display: none; }
      .table-list-item__action {
        /* Display and box model */
        -ms-flex-pack: end;
            justify-content: flex-end; }
      .table-list-item__col {
        /*
      * Positions blocks of items to the end (right).
      *
      * @modifier end
      * @for col
      */ }
        .table-list-item__col .table-list-item__item:last-child {
          /* Display and box model */
          margin-bottom: 0; }
        .table-list-item__col--end {
          /* Display and box model */
          -ms-flex-pack: end;
              justify-content: flex-end; }
      .table-list-item.is-active .table-list-item__block--sub {
        display: -ms-flexbox;
        display: flex; } }

/*------------------------------------*    TABLE STUDENT
\*------------------------------------*/
/**
 * Generic Table layout
 * Can be used to display tabular data in conjunction w/ table-header.
 *
 * @block table-student
 */
.table-student {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  /**
   * Positions table-student items.
   *
   * @element item
   */
  /**
   *
   * @element header
   */
  /**
   *
   * @element title
   */
  /**
   *
   * @element subheader
   */
  /**
   *
   * @element subtitle
   */
  /**
   *
   * @element profile
   */
  /**
   *
   * @element avatar
   */
  /**
   *
   * @element info
   */
  border-spacing: 0;
  width: 100%;
  font-family: "proxima-nova-regular", helvetica, Arial, San-serif;
  border-collapse: collapse;
  /**
   * Removes marging from top.
   *
   * @modifier no-space-top
   */
  /**
   * Adds zebra striping to rows
   * Used primarily on index level rows
   *
   * @modifier stripes
   */
  /**
   * Adds table-layout:fixed to table element
   * Used when the table has hide/show rows.
   * keeps columns from shifting
   *
   * @modifier fixed
   */
  /**
   * Displays information as a <tr>
   *
   * @element row
   */
  /**
   * @element cell
   * Displays information as a <td>
   */
  /**
   * Styles the label text
   *
   * @element label
   */
  /**
   * Styles the value text
   *
   * @element value
   */
  /**
   * Positions and styles icons
   *
   * @element figure
   */
  /**
   * Displays meta information corresponding to value.
   * Set below values.
   *
   * @element meta
   */
  /**
   * Media query for min-width 640px, small screen only
   */
  /**
     * Displays information as a <td>
     *
     * @element cell
     */
  /**
   * Media query for min-width 641px, medium screens and up
   */
  /* Display and box model */
  display: table;
  /**
     * Displays information as a <tr>
     *
     * @element row
     */
  /**
     * Displays information as a <td>
     * This is positioned relative because
     * it contains the status-bar.
     *
     * @element cell
     */
  /**
     *
     * @element profile
     */
  /**
     * Styles the label text
     *
     * @element label
     */
  /**
     * Styles the value text
     *
     * @element value
     */
  /**
     * Displays meta information corresponding to value.
     * Set below values.
     *
     * @element meta
     */
  /**
     *
     * @element avatar
     */
  /**
   * Media query for min-width 1041px, large screens up
   */
  /* Display and box model */
  -ms-flex-direction: row;
      flex-direction: row;
  /**
     * Adds hover to rows
     * Used primarily on index level rows
     *
     * @modifier stripes
     */
  /**
     *
     * @element profile
     */
  /**
     *
     * @element avatar
     */ }
  .table-student__item {
    /* Display and  box model */
    -ms-flex: 1;
        flex: 1; }
  .table-student__header {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center;
    /* Appearance */
    background: #F7F7F7; }
  .table-student__title {
    /* Display and box model */
    padding: 15px 0;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.5625rem;
    line-height: 1em;
    text-align: center;
    color: #444444;
    text-decoration: none;
    text-transform: uppercase; }
  .table-student__subheader {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    padding: 0.3125rem 0;
    /* Appearance */
    background: #444444; }
  .table-student__subtitle {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.5625rem;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase; }
  .table-student__profile {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    /* Appearance */
    text-align: left;
    line-height: 1em; }
  .table-student__avatar {
    /* Display and box model */
    -ms-flex: 1 0 3.125rem;
        flex: 1 0 3.125rem;
    max-width: 3.125rem;
    margin: 15px 0; }
    .table-student__avatar img {
      /* Appearance */
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
  .table-student__info {
    /* Display and box model */
    -ms-flex: 3;
        flex: 3;
    margin: 15px; }
  .table-student--no-space-top {
    /* Display and box model */
    margin-top: 0; }
  .table-student--stripes .table-student__row {
    /* Appearance */
    transition: background .3s;
    border: none; }
    .table-student--stripes .table-student__row:nth-of-type(even) {
      background: rgba(21, 138, 202, 0.05); }
  .table-student--fixed {
    /* Display and box model */
    table-layout: fixed; }
  .table-student__row {
    /* Display and  box model */
    display: block;
    padding: 15px;
    /* Appearance */
    color: #444444;
    line-height: 1.4em;
    border-bottom: solid 1px #F7F7F7;
    cursor: pointer;
    /**
     * Styles the background color Light Blue.
     * Used in rows displaying segmented breakdowns.
     *
     * @modifier blue
     * @property color
     * @for row
     */
    /**
     * This adds bold and uppercase styling to text in a row.
     *
     * @modifier important
     * @for row
     */ }
    .table-student__row:first-child {
      /* Appearance */
      border-top: solid 1px #F7F7F7; }
    .table-student__row:last-child {
      /* Appearance */
      border-bottom: 0; }
    .table-student__row--color--blue {
      /* Appearance */
      background: rgba(21, 138, 202, 0.05); }
    .table-student__row--important {
      /* Display and box model */
      margin-right: .35em;
      /* Appearance */
      font-size: 0.8125rem;
      font-weight: 700;
      text-transform: uppercase; }
  .table-student__cell {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    /* Display and box model */
    margin-bottom: 15px;
    /**
     * Displays the empty cell.
     *
     * @modifier empty
     * @for cell
     */
    /**
     * Wraps around button element in cell
     * Used to house the show/hide button.
     *
     * @modifier action
     * @for cell
     */ }
    .table-student__cell:last-child {
      /* Display and box model */
      margin-bottom: 0; }
    .table-student__cell--empty {
      /* Display and box model */
      empty-cells: show; }
    .table-student__cell--action {
      /* Display and box model */
      margin-top: 0.625rem; }
  .table-student__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    /* Appearance */
    text-align: left;
    font-size: 0.5625rem;
    line-height: 1em;
    -ms-flex: 1;
        flex: 1; }
  .table-student__value {
    /* Appearance */
    font-size: 0.8125rem;
    color: #444444;
    /**
     * @modifier bold
     * @property style
     * @for value
     */
    /**
     * @modifier small
     * @property size
     * @for value
     */ }
    .table-student__value--style--bold {
      /* Appearance */
      font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
      font-weight: normal;
      font-size: 0.9375rem;
      text-transform: uppercase; }
    .table-student__value--size--small {
      /* Appearance */
      font-size: 0.8125rem; }
  .table-student__figure {
    /* Display and box model */
    position: relative;
    display: inline-block;
    /** Appearance */
    font-family: "x-font";
    font-style: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-align: center;
    text-transform: none;
    font-variant: normal;
    text-transform: none;
    line-height: 1px;
    -webkit-text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Display and box model */
    margin-right: .35em;
    /**
     * Incoming call icon
     *
     * @modifier incoming
     * @property icon
     * @for figure
     */
    /**
     * Outgoing call icon
     *
     * @modifier outgoing
     * @property icon
     * @for figure
     */
    /**
     * Forward call icon
     *
     * @modifier forward
     * @property icon
     * @for figure
     */ }
    .table-student__figure--icon--incoming {
      /* Appearance */
      color: #fdb72b; }
    .table-student__figure--icon--outgoing {
      /* Appearance */
      color: #1a6f43; }
    .table-student__figure--icon--forward {
      /* Appearance */
      color: purple; }
  .table-student__meta {
    /* Display and box model */
    display: block;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.6875rem;
    font-style: italic;
    line-height: 1.2em; }
  .table-student__cell {
    /**
       * Positioning for status in table-cells
       *
       * @modifier status
       * @for cell
       */ }
    .table-student__cell--status {
      /* Display and box model */
      margin-bottom: 0.625rem; }
  .table-student__row {
    /* Display and box model */
    display: table-row;
    /* Appearance */
    border-top: 0; }
  .table-student__cell {
    /* Display and box model */
    position: relative;
    display: table-cell;
    vertical-align: middle;
    /* Appearance */
    border-right: solid 1px #F7F7F7;
    text-align: center;
    /**
       * Wraps around button element in cell
       *
       * @modifier action
       * @for cell
       */ }
    .table-student__cell:last-child {
      border-right: none; }
    .table-student__cell--action {
      /* Display and box model */
      margin-top: 0; }
  .table-student__profile {
    padding-left: 1em; }
  .table-student__label {
    /* Display and box model */
    display: none;
    /* Display and box model */
    padding: 0 1.875rem; }
  .table-student__value {
    /* Appearance */
    font-size: 1.0625rem;
    font-weight: normal;
    text-transform: none;
    /**
       * @modifier small
       * @property size
       * @for value
       */ }
    .table-student__value--size--small {
      /* Appearance */
      font-size: 0.8125rem; }
  .table-student__meta {
    /* Appearance */
    font-size: 0.5625rem;
    font-style: normal;
    text-transform: uppercase;
    color: #444444; }
  .table-student__avatar {
    /* Display and box model */
    display: none;
    padding-left: 15px; }
  .table-student--stripes .table-student__row:hover {
    background: #fff3dc; }
  .table-student__profile {
    padding-left: 0; }
  .table-student__avatar {
    /* Display and box model */
    display: block; }

/*------------------------------------*    TABLE STUDENT HEADER
\*------------------------------------*/
/**
 * Can be used to display index style table headers.
 *
 * @block table-student-header
 */
.table-student-header {
  /* Display and box model */
  display: table-row-group;
  /**
   * Hides Table header from mobile
   *
   * @modifier hide-from-mobile
   */
  /**
   * Styles the background color blue.
   * Used in headers displaying tax breakdowns.
   *
   * @modifier blue
   * @property color
   */
  /**
   * Styles the background transparent.
   * Used in headers displaying transation history breakdowns.
   *
   * @modifier transparent
   * @property color
   */
  /**
   * Displays information as a <td>
   *
   * @element group
   */
  /**
   * Displays information as a <td>
   *
   * @element cell
   */
  /**
   * Styles the label text
   *
   * @element label
   */
  /**
   * Media query for min-width 641px, medium screens and up
   */
  /**
     * Hides Table header from mobile
     *
     * @modifier hide
     */ }
  .table-student-header--hide-from-mobile {
    /* Display and box model */
    display: none; }
  .table-student-header--color--blue {
    background: rgba(7, 43, 63, 0.05);
    border-top: none;
    border-bottom: none; }
  .table-student-header--color--transparent {
    background: transparent;
    border-top: none; }
  .table-student-header__group {
    /* Display and box model */
    display: table-cell;
    table-layout: fixed; }
  .table-student-header__cell {
    /* Display and box model */
    display: table-cell;
    /* Appearance */
    background: #F7F7F7;
    border: solid 2px #ffffff;
    text-align: center;
    text-decoration: none;
    /**
     * Alights cell content to the right
     *
     * @modifier right
     * @for cell
     */
    /**
     * Displays the empty cell.
     *
     * @modifier empty
     * @for cell
     */ }
    .table-student-header__cell--right {
      text-align: right; }
    .table-student-header__cell--empty {
      /* Display and box model */
      empty-cells: show; }
  .table-student-header__label {
    /* Display and box model */
    display: block;
    padding-bottom: 0.3125rem;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.6875rem;
    color: #444444;
    padding: 15px;
    /* Appearance */
    line-height: 3em;
    /**
     * Lessens the padding on cells.
     *
     * @modifier less-pad
     * @for cell
     */
    /**
     * Make font-size smaller.
     * Use in tax breakdown tables.
     *
     * @modifier small
     * @property size
     * @for label
     */
    /**
     * Make font color white.
     * Use in tax breakdown tables.
     *
     * @modifier white
     * @property color
     * @for label
     */
    /**
     * Styles the table header label to show ascending arrow.
     *
     * @modifier ascending
     * @property direction
     * @for label
     */
    /**
     * Styles the table header label to show descending arrow.
     *
     * @modifier descending
     * @property direction
     * @for label
     */ }
    .table-student-header__label--less-pad {
      /* Appearance */
      padding: 0.625rem; }
    .table-student-header__label--size--small {
      font-size: 0.5625rem; }
    .table-student-header__label--color--white {
      color: #ffffff; }
    .table-student-header__label--direction--ascending {
      /* Appearance */
      color: #186ca6; }
      .table-student-header__label--direction--ascending:after {
        /* Display and box model */
        position: relative;
        display: inline-block;
        /** Appearance */
        font-family: "x-font";
        font-style: normal;
        font-weight: normal;
        speak: none;
        text-decoration: inherit;
        text-align: center;
        text-transform: none;
        font-variant: normal;
        text-transform: none;
        line-height: 1px;
        -webkit-text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        margin-left: .35em;
        content: ""; }
    .table-student-header__label--direction--descending {
      /* Appearance */
      color: #186ca6; }
      .table-student-header__label--direction--descending:after {
        /* Display and box model */
        position: relative;
        display: inline-block;
        /** Appearance */
        font-family: "x-font";
        font-style: normal;
        font-weight: normal;
        speak: none;
        text-decoration: inherit;
        text-align: center;
        text-transform: none;
        font-variant: normal;
        text-transform: none;
        line-height: 1px;
        -webkit-text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        margin-left: .35em;
        content: ""; }
  .table-student-header--hide-from-mobile {
    /* Display and box model */
    display: table-row; }

.tab {
  /* Display and box model */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  /* MEDIA QUERY MEDIUM UP */ }
  .tab__item {
    /* Display and box model */
    width: 100%;
    -ms-flex: 1;
        flex: 1;
    padding: 0.9375rem 0;
    padding-top: 1.25rem;
    /* Appearance */
    border-bottom: solid 1px #D5D5D5;
    cursor: pointer;
    transition: .3s; }
    .tab__item--selected {
      /* Appearance */
      background: rgba(21, 138, 202, 0.05);
      border-bottom: solid 2px #186ca6; }
      .tab__item--selected .tab__title {
        /* Appearance */
        color: #186ca6; }
    .tab__item:hover .tab__title {
      /* Appearance */
      color: #186ca6; }
  .tab__title {
    /* Appearance */
    font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    color: #1A304B;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase; }

/*///// ZF TABS OVERRIDE /////*/
.tabs {
  /* Appearance */
  border-bottom: solid 1px #444444; }
  .tabs .tab-item {
    /* Display and box model */
    /*
        We are using flexbox to align text
        vertically and horizontally.
        <button> elements (vertically) center text
        automatically, but <a> elements don't.
      */
    display: -ms-flexbox;
    display: flex;
    /* align horizontally */
    -ms-flex-pack: center;
        justify-content: center;
    /* align vertically */
    -ms-flex-align: center;
        align-items: center;
    padding: 0.9375rem 0;
    -webkit-appearance: none;
    /* Appearance */
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 0.9375rem;
    color: #444444;
    -webkit-color: none;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: solid 2px transparent;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    /*
        TODO: We need an alternative for focus
        if we want to disable this.
      */
    transition: 300ms;
    /**
       * @action :hover
       * Related to: cursor position
       *
       * This is applied automatically when a user
       * hovers their mouse.
       */ }
    .tabs .tab-item:first-child {
      /* Appearance */
      border-radius: 0.1875rem 0 0 0; }
    .tabs .tab-item:last-child {
      /* Appearance */
      border-radius: 0 0.1875rem 0 0; }
    .tabs .tab-item:hover {
      background: rgba(59, 155, 220, 0.25);
      color: #186ca6; }
    .tabs .tab-item.is-active {
      /* Appearance */
      background: transparent;
      border-bottom: solid 3px #186ca6;
      color: #186ca6;
      /**
         * @action :hover
         * Related to: cursor position
         *
         * This is applied automatically when a user
         * hovers their mouse.
         */ }
      .tabs .tab-item.is-active:hover {
        background: #ffffff;
        color: #186ca6; }

/**
 * Styles tables to look like a
 * view switcher.
 *
 * @modifier switcher
 * @property style
 * @for tabs
 */
.tabs--style--switcher .tabs {
  border-bottom: 0; }

.tabs--style--switcher .tab-item {
  /* Display and box model */
  /*
      We are using flexbox to align text
      vertically and horizontally.
      <button> elements (vertically) center text
      automatically, but <a> elements don't.
    */
  display: -ms-flexbox;
  display: flex;
  /* align horizontally */
  -ms-flex-pack: center;
      justify-content: center;
  /* align vertically */
  -ms-flex-align: center;
      align-items: center;
  /* Display and box model */
  height: 1.6875rem;
  padding: 0 1em;
  /*
  We use max width so that the button
  would fit in small containers
  */
  min-width: 5.625rem;
  width: auto;
  max-width: 5.3125rem;
  /* Appearance */
  font-size: 0.6875rem;
  padding: 0;
  -webkit-appearance: none;
  /* Appearance */
  border: solid 1px #444444;
  border-radius: 0;
  background: transparent;
  color: #444444;
  -webkit-color: none;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
  font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
  font-weight: normal;
  /*
      TODO: We need an alternative for focus
      if we want to disable this.
    */
  transition: 300ms;
  /**
     * @action :hover
     * Related to: cursor position
     *
     * This is applied automatically when a user
     * hovers their mouse.
     */ }
  .tabs--style--switcher .tab-item:hover {
    background: #444444;
    color: white; }
  .tabs--style--switcher .tab-item:first-child {
    /* Appearance */
    border-radius: 0.1875rem 0 0 0.1875rem;
    border-right-width: 0; }
  .tabs--style--switcher .tab-item:last-child {
    /* Appearance */
    border-radius: 0 0.1875rem 0.1875rem 0;
    border-left-width: 0; }
  .tabs--style--switcher .tab-item.is-active {
    /* Appearance */
    background: #186ca6;
    border: solid 1px #186ca6;
    color: #ffffff;
    /**
       * @action :hover
       * Related to: cursor position
       *
       * This is applied automatically when a user
       * hovers their mouse.
       */ }
    .tabs--style--switcher .tab-item.is-active:hover {
      background: #444444;
      color: white; }

/**
 * Makes button element 100% width.
 *
 * @modifier flexible
 */
.tabs--flexible .tab-item {
  /* Display and box model */
  width: 100%;
  max-width: 100%; }

.tabs {
  -ms-flex-flow: nowrap;
      flex-flow: nowrap; }

/**
 * Makes button element 100% width.
 *
 * @modifier flexible
 */
.tab-contents {
  /* Display and box model */
  padding: 0; }

/*------------------------------------*    TEXT-FIELD
\*------------------------------------*/
/**
 * Apply this on input elements. It does not necessarily need
 * to be a text input. Can be used on number, date, and text areas fields
 * for example.
 *
 * @block text-field
 */
.text-field {
  /* Display and box model */
  width: 100%;
  min-height: 2.8125rem;
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  /* FIXME: Margins shouldn't really be
  in block definitions */
  margin-left: auto;
  margin-right: auto;
  /* Appearance */
  font-size: 0.9375rem;
  /* probably only makes sense for text areas */
  line-height: 1.5625rem;
  font-family: "proxima-nova-regular", helvetica, Arial, San-serif;
  -webkit-appearance: none;
  box-shadow: none;
  border: solid 1px #ccd2de;
  border-radius: 5px;
  background: white;
  color: #444444;
  font-family: 'proxima-nova', Helvetica, Arial, San-serif;
  font-weight: normal;
  letter-spacing: 0.015rem;
  outline: none;
  /**
   * Medium input
   *
   * @modifier medium
   * @property size
   */
  /**
   * Smaller input
   *
   * @modifier small
   * @property size
   */
  /** TYPE MODIFIERS */
  /**
   * Adds date icon
   *
   * @modifier date
   * @property type
   */
  /** OPERATION MODIFIERS */
  /**
   * Use this when doing an async operation
   * on the input. Will show a loading animation.
   *
   * @modifier checking
   * @property operation
   */
  /**
   * Use this when a check has succeeded.
   *
   * @modifier success
   * @property operation
   */
  /**
   * Use this when an input is locked.
   *
   * @modifier locked
   * @property operation
   */
  /* OTHER MODIFIERS */
  /**
   * Input is in error state. Usually
   * due to validation for example empty
   * required fields.
   *
   * Using double selector for specificity
   * because it overrides the default styles.
   *
   * @modifier error
   */ }
  .text-field:focus, .text-field:active {
    background: white;
    border: solid 1px #186ca6;
    border-color: #186ca6; }
  .text-field--size--medium {
    /* Display and box model */
    height: 2.1875rem;
    min-height: 2.1875rem;
    margin: 0; }
  .text-field--size--small {
    /* Display and box model */
    height: 1.6875rem;
    min-height: 1.6875rem;
    max-width: 12.5rem;
    margin: 0; }
  .text-field--type--date {
    /* Display and box model */
    padding: 0.5rem 1.25rem;
    /* Appearance */
    background: #ffffff url(../img/icn-calendar.svg) 1em 0.99em no-repeat;
    background-size: 15px;
    text-indent: 1.6em;
    min-height: 2.9375rem;
    transition: border box-shadow;
    font-family: "proxima-nova-regular", helvetica, Arial, San-serif;
    font-size: 0.9375rem; }
    .text-field--type--date:focus {
      background: #ffffff url(../img/icn-calendar-highlighted.svg) 1em 0.99em no-repeat;
      background-size: 15px; }
  .text-field--operation--checking {
    /* Appearance */
    background: url(../img/loading_spinner.gif) 99% 48% no-repeat;
    background-size: 2.5rem; }
  .text-field--operation--success {
    /* Appearance */
    background: url(../img/icn-input-check.svg) 98% 48% no-repeat;
    background-size: 0.9375rem; }
  .text-field--operation--locked {
    /* Appearance */
    background: url(../img/icn-input-lock.svg) 95% 48% no-repeat;
    background-size: 0.8125rem;
    color: #F7F7F7;
    pointer-events: none; }
  .text-field.text-field--error {
    border-color: #E74C3C; }

/*------------------------------------*    TEXTAREA
\*------------------------------------*/
/**
 *
 * @block textarea
 */
.textarea {
  /* Appearance */
  resize: vertical;
  /* Display and box model */
  min-height: 6.25rem !important; }

/*------------------------------------*    VIEW CONTROL
\*------------------------------------*/
/**
 * Styling and positioning for View Control element.
 * The view controller contains items that alter the current
 * section being viewed.
 *
 *
 * @block view-control
 */
.view-control {
  /* Display and box model */
  display: block;
  padding: 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  overflow: visible;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  height: 3.75rem;
  width: 100%;
  padding: 0 0.9375rem;
  /* Appearance */
  background: #ffffff;
  line-height: 1.4em;
  /**
   * Makes background transparent.
   * Ex. Used on Index level pages where bg is gray.
   *
   * @modifier transparent
   */
  /**
   * Adds border to bottom.
   *
   * @modifier border
   * @property style
   */
  /**
   * Used when the header needs to be inline
   * Primarily used in mobile and modal situations.
   *
   * @modifier inline
   */
  /*
   * Positions blocks of items.
   *
   * @element col
   */
  /**
   *
   * @element icon
   */
  /**
   * Title styling for section-header
   *
   * @element title
   */
  /**
   * Styles the div for breadcrumbs
   *
   * @element div
   */
  /**
   * Styles meta text within the view controls.
   *
   * @element meta
   */
  /**
   * Styling for buttons within the view-controls
   *
   * @element action
   */
  /**
   * Wraps action items that have more then one element
   * Ex. Used for View Controller subnav to wrap title
   * and icon together.
   *
   * @element action-group
   */
  /**
   * Media query for min-width 641px, medium screens
   */
  /**
   * Media query for min-width 1041px, large screens up
   */ }
  .view-control--transparent {
    /* Appearance */
    background: transparent; }
  .view-control--style--border {
    /* Appearance */
    border-bottom: solid 1px #D5D5D5; }
  .view-control--inline {
    margin-top: 0;
    padding: 0.625rem 15px;
    /* Appearance */
    background: #D5D5D5;
    border-top: 0;
    border-radius: 0 !important; }
  .view-control__col {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    /*
     * Positions blocks of items at the start (left).
     * Ex. Dashboard icon is set to the start (left).
     *
     * @modifier start
     * @for col
     */
    /*
     * Positions blocks of items to the end (right).
     * Ex. Dashboard icon is set to the end (right).
     *
     * @modifier end
     * @for col
     */
    /*
     * Extend the flex to be 3x larger.
     *
     * @modifier long
     * @for col
     */ }
    .view-control__col--start {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: start;
          justify-content: flex-start; }
    .view-control__col--end {
      /* Display and box model */
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: end;
          justify-content: flex-end; }
    .view-control__col--long {
      /* Display and box model */
      -ms-flex: 3;
          flex: 3; }
  .view-control__icon {
    /* Display and box model */
    display: inline-block;
    margin-left: 0.625rem; }
  .view-control__title {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    /* Appearance */
    font-size: 1.0625rem;
    line-height: 1.2em;
    text-align: left;
    color: #444444;
    font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
    font-weight: normal;
    color: #444444;
    transition: color .3s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12.5rem;
    transition: .5s;
    /**
     * Styles Active control breadcrumb.
     *
     * @modifier active
     * @for title
     */
    /**
     * Adds space to the left of action element
     * Used when having a action next to a hint.
     *
     * @modifier large
     * @property size
     * @for title
     */ }
    .view-control__title--breadcrumb {
      /* Appearance */
      font-family: 'proxima-nova', Helvetica, Arial, San-serif;
      font-weight: normal;
      color: #444444; }
      .view-control__title--breadcrumb:nth-of-type(1) {
        max-width: 2.5rem; }
      .view-control__title--breadcrumb:hover {
        /* Appearance */
        color: #186ca6;
        text-decoration: underline;
        max-width: 15.625rem; }
    .view-control__title--size--large {
      /* Appearance */
      font-size: 1.1875rem;
      letter-spacing: .05em; }
  .view-control__div {
    /* Appearance */
    color: #D5D5D5;
    font-size: 1.5em; }
  .view-control__meta {
    /* Display and box model */
    -ms-flex: 1;
        flex: 1;
    /* Appearance */
    font-family: 'proxima-nova', Helvetica, Arial, San-serif;
    font-weight: normal;
    font-size: 1.0625rem;
    color: #444444;
    letter-spacing: .05em; }
  .view-control__action {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end;
    /* Appearance */
    font-size: 1.875rem;
    text-align: center;
    padding: 0 0.4375rem; }
    .view-control__action:first-child {
      /* Display and box model */
      padding-left: 0; }
    .view-control__action:last-child {
      /* Display and box model */
      padding-right: 0; }
  .view-control__action-group {
    /* Display and box model */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center; }
  @media only screen and (min-width: 46.0625em) {
    .view-control {
      /**
     * Title styling for section-header
     *
     * @element title
     */
      /**
     * Styling for buttons within the view-controls
     *
     * @element action
     */
      /**
     *
     * @element icon
     */
      /**
     * Title styling for section-header
     *
     * @element title
     */ }
      .view-control__title {
        /* Appearance */
        font-size: 1.1875rem; }
      .view-control__action {
        /* Display and box model */
        position: relative; }
      .view-control__icon {
        /* Display and box model */
        margin-left: 0; }
      .view-control__title {
        /* Display and box model */
        max-width: 18.75rem;
        /**
       * Styles Active control breadcrumb.
       *
       * @modifier active
       * @for title
       */ }
        .view-control__title--breadcrumb:first-child {
          max-width: 18.75rem; } }
  @media only screen and (min-width: 65em) {
    .view-control {
      /**
     * Title styling for section-header
     *
     * @element title
     */
      /**
     * Styling for buttons within the view-controls
     *
     * @element action
     */ }
      .view-control__title {
        /* Appearance */
        font-size: 1.4375rem; }
      .view-control__action {
        /* Display and box model */
        line-height: 1em; } }

/* Overrides Default SalesForce styling */
.asOfDateContainer {
  /* Display and box model */
  -ms-flex: 1 !important;
      flex: 1 !important;
  float: left !important;
  margin-top: 1.2em !important;
  /* Appearance */
  font-family: 'proxima-nova', Helvetica, Arial, San-serif;
  font-weight: normal;
  font-size: 0.6875rem !important; }

.asOfDate {
  /* Appearance */
  font-family: 'proxima-nova', Helvetica, Arial, San-serif;
  font-weight: normal;
  font-size: 0.8125rem !important;
  color: #444444 !important; }

.refreshButtonContainer {
  /* Display and box model */
  float: right !important; }

.refreshButton,
.uiButton,
.uiButton--default {
  /* Display and box model */
  /*
    We are using flexbox to align text
    vertically and horizontally.
    <button> elements (vertically) center text
    automatically, but <a> elements don't.
  */
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  /* Fixes display issue w/ Safari */
  display: -webkit-inline-box !important;
  /* align horizontally */
  -ms-flex-pack: center !important;
      justify-content: center !important;
  /* align vertically */
  -ms-flex-align: center !important;
      align-items: center !important;
  border-radius: 0.1875rem !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  /* Display and box model */
  min-width: 0 !important;
  max-width: none !important;
  height: 1.6875rem !important;
  width: auto !important;
  padding: 0 1em !important;
  /* Appearance */
  font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
  font-weight: normal;
  font-size: 0.5625rem !important;
  /* Appearance */
  border: solid 2px #186ca6 !important;
  background: transparent !important;
  color: #186ca6 !important;
  -webkit-color: none !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
  font-weight: normal;
  /*
    TODO: We need an alternative for focus
    if we want to disable this.
  */
  outline: none !important;
  transition: 300ms !important;
  /**
   * @action :hover
   * Related to: cursor position
   *
   * This is applied automatically when a user
   * hovers their mouse.
   */
  /**
   * @action `:active`
   *
   * This is applied automatically when a user
   * clicks on the button (or focuses + ENTER).
   */ }
  .refreshButton:hover,
  .uiButton:hover,
  .uiButton--default:hover {
    /* Appearance */
    background: #186ca6 !important;
    color: white !important; }
    .refreshButton:hover.label,
    .uiButton:hover.label,
    .uiButton--default:hover.label {
      /* Appearance */
      color: white !important; }
  .refreshButton:active,
  .uiButton:active,
  .uiButton--default:active {
    /* TODO: Add active state */ }

.uiButton--default .label {
  /* Appearance */
  color: #186ca6 !important; }
  .uiButton--default .label:hover {
    /* Appearance */
    color: #ffffff !important; }

/*------------------------------------*   UTILITIES
\*------------------------------------*/
/*
 * Adds horizonal padding.
 * @modifier horizontal-pad
 */
.horizontal-pad {
  /* Display and box model */
  padding: 0 0.9375rem; }

/*
 * Adds horizonal padding.
 * @modifier horizontal-pad-medium
 */
.horizontal-pad-medium {
  /* Display and box model */
  padding: 0 0.9375rem; }
  @media only screen and (min-width: 46.0625em) {
    .horizontal-pad-medium {
      /* Display and box model */
      padding: 0 1.875rem; } }

/*
 * Adds vertical padding.
 * @modifier vertical-pad
 */
.vertical-pad {
  /* Display and box model */
  padding: 0.9375rem 0; }

/*
 * Adds vertical padding.
 * @modifier vertical-pad-medium
 */
.vertical-pad-medium {
  /* Display and box model */
  padding: 1.875rem 0; }

/*
 * Adds padding.
 * @modifier pad
 */
.pad {
  /* Display and box model */
  padding: 0.9375rem; }

/*
 * Adds padding.
 * @modifier pad-medium
 */
.pad-medium {
  /* Display and box model */
  padding: 0.9375rem; }
  @media only screen and (min-width: 46.0625em) {
    .pad-medium {
      /* Display and box model */
      padding: 1.875rem; } }

/*
 * Adds padding to top.
 * @modifier pad-top
 */
.pad-top {
  /* Display and box model */
  padding-top: 0.9375rem; }

/*
 * Adds padding to top.
 * @modifier pad-top-medium
 */
.pad-top-medium {
  /* Display and box model */
  padding-top: 1.875rem; }

/*
 * Adds padding to bottom.
 * @modifier pad-bottom
 */
.pad-bottom {
  /* Display and box model */
  padding-bottom: 0.9375rem; }

/*
 * Adds padding to bottom.
 * @modifier pad-bottom-medium
 */
.pad-bottom-medium {
  /* Display and box model */
  padding-bottom: 1.875rem; }

/*
 * Adds margin to top.
 * @modifier margin-top
 */
.margin-top {
  /* Display and box model */
  margin-top: 0.9375rem; }

/*
 * Adds margin to bottom.
 * @modifier margin-bottom
 */
.margin-bottom {
  /* Display and box model */
  margin-bottom: 0.9375rem; }

/*///// TEXT STYLING /////*/
/*
 * Aligns text left
 * @modifier align-left
 */
.align-left {
  /* Display and box model */
  text-align: left; }

/*
 * Aligns text right
 * @modifier align-right
 */
.align-right {
  /* Display and box model */
  text-align: right; }

/*
 * Aligns text center
 * @modifier align-center
 */
.align-center {
  /* Display and box model */
  text-align: center; }

/*
 * Styles text semibold
 * @modifier text-semibold
 */
.text-semibold {
  /* Appearance */
  font-family: 'proxima-nova-semibold', Helvetica, Arial, San-serif;
  font-weight: normal; }

/*
 * Styles text bold
 * @modifier text-bold
 */
.text-bold {
  /* Appearance */
  font-family: 'proxima-nova-bold', Helvetica, Arial, San-serif;
  font-weight: normal; }

/*
 * Styles text italic
 * @modifier text-italic
 */
.text-italic {
  /* Appearance */
  font-style: italic; }

/*
 * Styles text uppercase
 * @modifier text-uppercase
 */
.text-uppercase {
  /* Appearance */
  text-transform: uppercase; }

/*
 * Change text size to extra-small
 * @modifier text-small
 */
.text-micro {
  /* Appearance */
  font-size: 0.5625rem;
  line-height: 1em; }

/*
 * Change text size to small
 * @modifier text-small
 */
.text-small {
  /* Appearance */
  font-size: 0.8125rem; }

/*
 * Change text size to medium
 * @modifier text-medium
 */
.text-medium {
  /* Appearance */
  font-size: 1.1875rem; }

/*
 * Change text size to large
 * @modifier text-large
 */
.text-large {
  /* Appearance */
  font-size: 1.625rem; }

/*
 * Colors text white
 * @modifier text-white
 */
.text-white {
  /* Appearance */
  color: #ffffff; }

/*
 * Colors text green
 * @modifier text-green
 */
.text-green {
  /* Appearance */
  color: #1a6f43; }

/*
 * Colors text red
 * @modifier text-red
 */
.text-red {
  /* Appearance */
  color: #E74C3C; }

/*
 * Adds hint fade to object from bottom
 * @modifier hint-fade-bottom
 */
.hint-fade-bottom {
  /* Appearance */
  box-shadow: 0 -20px 20px rgba(255, 255, 255, 0.9); }

/*
 * Adds hint fade to object from top
 * @modifier hint-fade-top
 */
.hint-fade-top {
  /* Appearance */
  box-shadow: 0 20px 20px rgba(255, 255, 255, 0.9); }

sup {
  top: 0; }

@media only screen and (min-width: 65em) {

  /*
   * Hides items from large screens and up.
   */
  .hide-from-large {
    /* Display and box model */
    display: none;
  }
}

.tx-forms .date-picker select,
.tx-forms .input-wrapper.picklist select,
.tx-forms input[type=text],
.tx-forms input[type=email],
.tx-forms input[type=date] {
  padding: 0.5rem 0.75rem;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.9375rem;
  line-height: 1.5625rem;
  -webkit-appearance: none;
  box-shadow: none;
  border: solid 1px #ccd2de;
  min-height: 2.8125rem;
  border-radius: 5px;
  background: white;
  color: #444444 !important;
  font-family: 'proxima-nova', Helvetica, Arial, San-serif;
  font-weight: normal;
  letter-spacing: 0.015rem;
  outline: none;
  box-shadow: 0;
}

.tx-forms .date-picker select,
.tx-forms .input-wrapper.picklist select {
  min-width: calc(30% - 0.5rem) !important;
  display:inline;
  margin-right: 25px;
  background: #ffffff url(../img/icn-arrow-down-sm.svg) calc(100% - 10px) 50% no-repeat;
  background-size: 0.9375rem;
}
 
.tx-forms input[type=text],
.tx-forms input[type=email],
.tx-forms input[type=date]
 {
  width: 100% !important;
  min-width: 100% !important;
}

.tx-forms label.preField {
  display: block;
  width: 100% !important;
  font-family: 'proxima-nova', Helvetica, Arial, San-serif;
  text-transform: uppercase !important;
  font-size: 0.6875rem !important;
  color: #444444 !important;
  margin-bottom: .35em;
  line-height: 1em;
  white-space: normal;
  overflow: hidden;
  letter-spacing: .01em;
}

.tx-forms .preField {
  min-width: 200px;
  padding-right: 5px;
}
.tx-forms .input-wrapper {
  margin-bottom: 15px;
}

label.requiredIcon:after {
  color: #ff0000;
}

label.requiredIcon:after {
  content: " *";
  color: #F00;
  font-size: 110%;
}

.tx-forms {
  overflow-x: hidden;
}
.tx-forms .form-title {
  font-size: 1.3125rem;
  font-weight: bold;
  margin: 18px 0 18px;
}
.tx-forms .input-wrapper.picklist select {
  width: 100%;
  padding:0 30px 0 10px !important;
  -webkit-padding-end: 30px !important;
  -webkit-padding-start: 10px !important;
}
.tx-forms options.default {
  color: #a9a9a9;
}
.tx-forms input::-moz-placeholder {
  color: #a9a9a9;
  opacity: 1
}

.tx-forms input::-ms-input-placeholder {
  color: #a9a9a9
}

.tx-forms input::-webkit-input-placeholder {
  color: #a9a9a9
}
.tx-forms .pair .form-input__col {
  padding: 0;
}

.tx-forms .pair .form-input__col:first-child {
  padding-right: 1.25rem;
}

.tx-forms .addressmap .form-input__col:first-child {
  padding-left: 0;
}

.tx-forms .addressmap .form-input__col:last-child {
  padding-right: 0;
}

.tx-forms .searchList {
  position: absolute;
  width: 100%;
  bottom: 2.8125rem;
  border: 1px solid #f7f4f4;
  background: #fff;
}

.tx-forms .searchList ul {
  height: 6.5rem;
  background: #fff;
  overflow: scroll;
  padding: 1rem 0 0 1rem;
}

.tx-forms .searchList ul li {
  min-height: 1.4rem;
}

.tx-forms .searchList ul li span {
  color: inherit;
  display: block;
  cursor: pointer;
  outline: none;
}

.tx-forms input.validationError.ng-invalid,
.tx-forms select.validationError.ng-invalid,
.tx-forms .validationError input.ng-invalid,
.tx-forms .validationError select {
  border-color: #ec908e;
}

.targetx-forms .formId-error{
    padding: 0 1.25rem;
}
.tx-forms .address-col-3 {
  padding-bottom: 1.25rem;
}
.tx-forms .no-form-id {
  padding: 1.25rem;
  line-height: 1.45rem;

}
.tx-forms .no-form-id h1 {
  font-size: 1.25rem;
  font-weight: bolder;
}

.tx-forms .no-form-id h3 {
  color: red;
}
.tx-forms .schoolFinder {
  position: relative;
}

@media only screen and (max-width: 600px) {

  .tx-forms .addressmap .form-input__col,
  .tx-forms .pair .form-input__col {
    padding: 0 0 1.25rem 0 !important;
  }

  .tx-forms .date-picker select,
  .tx-forms .input-wrapper.picklist select {
    margin-right: 10px;
  }

  .form-basic__input-group {
    padding-bottom: 0 !important;
  }

}