:root {
  /* Characters */

  /* Colors */ /* deprecated */ /* orange */ /* #5bc0de; */ /* #231f20 */ /* #3c444f */ /* #565a5c */ /* #a2a4a3 */ /* #d2d4d3 */ /* #eceded */ /* #f6f6f6 */

  /* Scaffolding */ /* darken --brand-blue */

  /* Sprites */
  /* stylelint-disable unit-blacklist */
  /* stylelint-enable unit-blacklist */

  /* Typography */
  /* $font-family-sans-serif: "Trade Gothic W01", Helvetica, Arial, sans-serif; */
  /* $font-family-condensed: "Trade Gothic W01 Condensed", Helvetica, Arial, */
  /* sans-serif; */
  /* Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. */ /* 60/16/100 */ /* 40/16/100 */

  /* Footers */

  /* Components */

  /* Tables */

  /* Forms */ /* deprecated */ /* deprecated */

  /* Datepicker */

  /* Dropdowns */

  /* Z-index master list */

  /* Grid system */

  /* Container sizes */
  /* TODO: convert to rem */

  /* Navbar */

  /* Basics of a navbar */ /* was floor()ed */

  /* Navbar links */

  /* Navbar brand label */

  /* Navbar toggle */

  /* Inverted navbar */
  /* Reset inverted navbar basics */

  /* Inverted navbar links */

  /* Inverted navbar brand label */

  /* Inverted navbar toggle */

  /* Navs */

  /* Tabs */

  /* Flyout */

  /*--nav-flyout-opacity: 70%;*/

  /* Categories */

  /* Pagination */

  /* Pager */

  /* Form states and alerts */

  /* Tooltips */

  /* Labels */

  /* Modals */

  /* Alerts */

  /* Panels */

  /* Wells */

  /* Badges */

  /* Carousel */

  /* Close */

  /* Code */

  /* Type */

  /* Margins */

  /* Lists */
  /* Lists */

  /* Medium editor */

  /* Calendar */

  /* Miscellaneous */

  /* Navdrawer (deprecated) */
}
/* TODO: convert to em */
/* Extra small screen / phone */
/* Small screen / tablet */
/* Medium screen / desktop */
/* Large screen / wide desktop */
/* --retina:    ~"only screen and (-webkit-min-device-pixel-ratio: 2)",
            ~"only screen and (min-device-pixel-ratio: 2)",
            ~"only screen and (min-resolution: 2dppx)"; */
/* hack to target ie9/10. Avoid using if possible */
/* remove default button styles */
/*
 Typographical styles

 This is the master list of font sizes & styles. Use these
 in other modules by @apply-ing them.
*/
/* TODO: Convert most of these to simple mixins */
/*
Sprites

Classes: sprite-*

<p class="alert alert-info">
Be sure to put a brief descriptive text inside sprite and logo elements, for accessibility on screen readers. A title attribute may also be added to provide tooltip text on mouse hover: `<i class="sprite-close" title="close">close</i>.`
</p>

Markup:
<i class="{{modifier_class}}"></i>

sprite-search - search
sprite-print - print
sprite-email  - email
sprite-download - download
sprite-file-pdf - pdf file
sprite-file-doc - doc file
sprite-file-excel - excel file
sprite-plus - plus
sprite-minus - minus
sprite-plus-faded - faded plus
sprite-minus-faded - faded minus
sprite-menu - menu (click to toggle `is-open` class)
sprite-close - close (add `inverse` class for white version)
sprite-close-main - large close
sprite-play-sm - small play icon
sprite-play - play icon
sprite-play-lg  - large play icon
sprite-play-xl  - xl play icon
sprite-featured - star
sprite-edit - edit
sprite-draggable - indicate draggable item
sprite-gear - settings gear

Wrapper: gray

Weight: 13

Styleguide Sprites
*/
/* stylelint-disable unit-blacklist */
.sprite,
[class*="sprite-"] {
  display: inline-block;
  overflow: hidden;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite,
[class*="sprite-"] {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
/* heads up: these three sprites are replicated in typography.css for item-* classes */
.sprite-file-pdf {
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -548px -307px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-file-pdf {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-file-doc {
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -576px -307px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-file-doc {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-file-excel {
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -603px -307px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-file-excel {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-menu,
.sprite-menu-animated {
  position: relative;
  display: inline-block;
  width: 1.5em;
  height: 0.15em;
  background: #fff;
  -webkit-transition: background-color 0.3s
    ease-out;
  transition: background-color 0.3s
    ease-out;
  overflow: visible;
  vertical-align: middle;
  margin: 0.5em 0
}
.sprite-menu::before,
  .sprite-menu::after,
  .sprite-menu-animated::before,
  .sprite-menu-animated::after {
  position: absolute;
  content: "";
  right: 0;
  left: 0;
  background-color: #fff;
  height: 0.15em;
  -webkit-transition: all 0.3s
      ease-out;
  transition: all 0.3s
      ease-out;
}
.sprite-menu::before, .sprite-menu-animated::before {
  top: -0.5em;
}
.sprite-menu::after, .sprite-menu-animated::after {
  bottom: -0.5em;
}
.sprite-menu.is-open, .sprite-menu-animated.is-open {
  background-color: rgba(255, 255, 255, 0);
}
.sprite-menu.is-open::before, .sprite-menu-animated.is-open::before {
  -webkit-transform: translateY(0.5em) rotate(45deg);
          transform: translateY(0.5em) rotate(45deg);
}
.sprite-menu.is-open::after, .sprite-menu-animated.is-open::after {
  -webkit-transform: translateY(-0.5em) rotate(135deg);
          transform: translateY(-0.5em) rotate(135deg);
}
.sprite-print {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -546px -340px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-print {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-email {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -582px -340px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-email {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-download {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -618px -340px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-download {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-search {
  display: inline-block;
  overflow: hidden;
  width: 21px;
  height: 21px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -12px -179px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-search {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-close {
  display: inline-block;
  position: relative;
  width: 1.125em;
  height: 1.125em;
  vertical-align: text-bottom;
  text-indent: -10000px
}
.sprite-close::after {
  display: block;
  position: absolute;
  content: "\00D7";
  top: 0;
  right: 0;
  left: 0;
  font-size: 1.125em;
  color: hsl(200, 3.4%, 34.9%);
  font-style: normal;
  text-indent: 0;
  line-height: 1;
  text-align: center;
}
.sprite-close {
  .inverse &:after, &.inverse:after {
    color: #fff;
  }
}
.sprite-market-open,
.sprite-market-closed {
  width: 12px;
  height: 12px;
  border-radius: 10px;
  background-image: none;
  margin-right: 5px;
  vertical-align: baseline;
}
.sprite-market-open {
  background-color: #00c300;
}
.sprite-market-closed {
  background-color: hsl(200, 3.4%, 34.9%);
}
.sprite-play-sm {
  display: inline-block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -352px -125px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-play-sm {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-play {
  display: inline-block;
  overflow: hidden;
  width: 64px;
  height: 64px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -390px -93px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-play {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-play-lg {
  display: inline-block;
  overflow: hidden;
  width: 104px;
  height: 104px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -458px -56px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-play-lg {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-play-xl {
  display: inline-block;
  overflow: hidden;
  width: 140px;
  height: 140px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -569px -20px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-play-xl {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-instagram {
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -146px -148px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-instagram {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-instagram {
  .inverse &,
  &.inverse {
    background-position-y: -120px;
  }
}
.sprite-linkedin {
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -174px -148px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-linkedin {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-linkedin {
  .inverse &,
  &.inverse {
    background-position-y: -120px;
  }
}
.sprite-facebook {
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -202px -148px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-facebook {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-facebook {
  .inverse &,
  &.inverse {
    background-position-y: -120px;
  }
}
.sprite-twitter {
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -232px -148px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-twitter {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-twitter {
  .inverse &,
  &.inverse {
    background-position-y: -120px;
  }
}
.sprite-twitter-lg {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -13px ;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-twitter-lg {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-linkedin-lg {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -54px -129px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-linkedin-lg {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-facebook-lg {
  display: inline-block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -97px -129px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-facebook-lg {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-featured {
  width: 14px;
  height: 14px;
  background-position: -160px -135px;
  background-image: url(../images/sprites-1x.png);
  vertical-align: text-bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-featured {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.sprite-edit {
  width: 14px;
  height: 14px;
  background-position: -178px -136px;
  background-image: url(../images/sprites-1x.png);
  vertical-align: text-bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-edit {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.sprite-draggable {
  width: 7px;
  height: 15px;
  background-position: -198px -136px;
  background-image: url(../images/sprites-1x.png);
  vertical-align: text-bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-draggable {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.sprite-plus-faded {
  display: inline-block;
  overflow: hidden;
  width: 34px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -528px -264px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-plus-faded {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-minus-faded {
  display: inline-block;
  overflow: hidden;
  width: 34px;
  height: 34px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -567px -264px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-minus-faded {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-plus-faded-cropped {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -538px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-plus-faded-cropped {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-minus-faded-cropped {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -577px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-minus-faded-cropped {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-plus-light-cropped {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -394px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-plus-light-cropped {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-minus-light-cropped {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -433px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .sprite-minus-light-cropped {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.sprite-gear {
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 50 50'%3E%3Cg%3E%3Cpath d=' M 22.055 1.863 L 20.974 8.714 C 19.328 9.12 17.758 9.728 16.346 10.577 L 10.697 6.55 L 6.611 10.637 L 10.577 16.286 C 9.721 17.706 9.067 19.261 8.654 20.913 L 1.863 22.055 L 1.863 27.825 L 8.654 29.026 C 9.067 30.679 9.721 32.234 10.577 33.654 L 6.55 39.303 L 10.637 43.389 L 16.286 39.423 C 17.698 40.272 19.268 40.88 20.913 41.286 L 22.055 48.137 L 27.825 48.137 L 29.087 41.286 C 30.724 40.873 32.249 40.219 33.654 39.363 L 39.363 43.389 L 43.45 39.303 L 39.363 33.654 C 40.204 32.249 40.88 30.717 41.286 29.087 L 48.137 27.825 L 48.137 22.055 L 41.286 20.913 C 40.88 19.283 40.204 17.751 39.363 16.346 L 43.389 10.637 L 39.303 6.55 L 33.654 10.637 C 32.249 9.788 30.672 9.127 29.026 8.714 L 27.825 1.863 L 22.055 1.863 Z M 24.748 14.349 C 18.855 14.349 14.045 19.159 14.045 25.052 C 14.045 30.946 18.855 35.756 24.748 35.756 C 30.642 35.756 35.451 30.946 35.451 25.052 C 35.451 19.159 30.642 14.349 24.748 14.349 Z ' fill-rule='evenodd' style='fill: hsl%28200%2C 3.4%25%2C 34.9%25%29'/%3E%3C/g%3E%3C/svg%3E");
}
/*
Alignment

Classes: sprite-middle sprite-bottom

The default vertical alignment of sprites is on the baseline of the text. Adjust this using these classes.

Markup:
<p><i class="sprite-print {{modifier_class}}"></i> Print</p>

sprite-middle - middle alignment
sprite-bottom - bottom alignment
sprite-baseline - baseline alignment
sprite-textbottom - bottom of text

Weight: 20

Styleguide Sprites.Alignment
*/
.sprite-middle {
  vertical-align: middle !important;
}
.sprite-baseline {
  vertical-align: baseline !important;
}
.sprite-bottom {
  vertical-align: bottom !important;
}
.sprite-textbottom {
  vertical-align: text-bottom !important;
}
/* stylelint-enable unit-blacklist */
/* TODO reference only */
/*
 * Advanced lists & navs modules
 * Supplements basic lists and navs in _core.less
 */
/*
Action List

Stylesheet: lists

Classes: actionlist

List of actionable items, floated to the right.

Place immediately before a `secondary-header` to place the actions inline with the header. The margin of a preceeding element can affect their alignment; wrap the both the actionlist and the header in a `<div>` to prevent this.

Markup:
<ul class="actionlist">
  <li>
    <button class="btn btn-link">
      <i class="sprite sprite-excel"></i>Export to Excel
    </button>
  </li>
  <li>
    <button class="btn btn-link">
      <i class="sprite sprite-print"></i>Print
    </button>
  </li>
  <li>
    27-Feb-2014
  </li>
</ul>

Markup2:
<div>
  <ul class="actionlist">
    <li>
      <button class="btn btn-link">
        <i class="sprite sprite-excel"></i>Export to Excel
      </button>
    </li>
    <li>
      <button class="btn btn-link">
        <i class="sprite sprite-print"></i>Print
      </button>
    </li>
    <li>
      27-Feb-2014
    </li>
  </ul>
  <p class="secondary-header">header</p>
</div>

Styleguide Lists.Special.Action
*/
.actionlist {
  margin-top: 0;
  margin-bottom: 0.375em;
  color: hsl(214.7, 13.7%, 27.3%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;

  float: right;
  margin-bottom: 0.3125rem;
  padding-left: 0;
  line-height: 1;
  list-style: none
}
.actionlist > li {
  display: inline-block;
  margin-bottom: 0;
  padding-right: 0.3125em;
  padding-left: 0.3125em;
}
.actionlist > li:last-child,
    .actionlist > li:last-child > .btn-link {
  padding-right: 0;
}
.actionlist [class*="sprite-"] {
  margin: 0 0.4em;
  vertical-align: -0.4em;
}
.actionlist + input {
  clear: right;
  /* firefox bug */
}
/*
Category List

Stylesheet: lists

Classes: categories

This supports draggable/sortable (`categories-sortable`) and an edit button.

Markup:
<ul class="categories">
  <li>
    <div class="listing-title">End of Day</div>
    <div class="listing-description">View Settlement Reports for All Markets</div>
  </li>
  <li>
    <div class="listing-title">Volumes and OI</div>
    <div class="listing-description">Daily and Historical Volume and Open Interest</div>
  </li>
  <li class="is-active">
    <div class="listing-title">Indices</div>
    <div class="listing-description">View Indices Reports</div>
  </li>
</ul>

Markup2:
<ul class="categories categories-sortable" style="max-width: 300px;">
  <li>
    <div class="listing-title">End of Day</div>
    <div class="listing-description">View Settlement Reports for All Markets</div>
    <button class="categories-edit">edit</button>
  </li>
  <li>
    <div class="listing-title">Volumes and OI</div>
    <div class="listing-description">Daily and Historical Volume and Open Interest</div>
    <button class="categories-edit">edit</button>
  </li>
  <li>
    <div class="listing-title">Indices</div>
    <div class="listing-description">View Indices Reports</div>
    <button class="categories-edit">edit</button>
  </li>
</ul>

Styleguide Lists.Special.Categories
*/
.categories {
  padding-left: 0;
  list-style: none
}
.categories > li {
  position: relative;
  padding: 0.9em 1.125rem;
  border-bottom: 2px solid hsl(150, 2.3%, 82.7%);
  background-color: hsl(180, 2.7%, 92.7%);
  cursor: pointer;
}
.categories > li .categories-edit {
  width: 14px;
  height: 14px;
  background-position: -178px -136px;
  background-image: url(../images/sprites-1x.png);
  vertical-align: text-bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .categories > li .categories-edit {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.categories > li .categories-edit {
  /* sprite-edit */
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -7px;
  overflow: hidden;
  border: 0;
  background-color: transparent;
  text-indent: -1000em;
}
.categories > li.divider {
  min-height: 2em;
  padding: 0;
  background-color: hsl(180, 2.7%, 92.7%);
}
.categories > li.divider:hover {
  background-color: hsl(180, 2.7%, 92.7%);
}
.categories > li.is-active {
  outline: 2px #00b5e2 solid;
  outline-offset: -2px;
  /* overlap border of previous item */
}
.categories > li.is-active:not(:first-child) {
  /* stylelint-disable unit-whitelist */
  margin-top: -2px;
  padding-top: calc(0.9em + 2px);
  /* stylelint-enable unit-whitelist */
}
.dropdown-menu.categories > li {
  padding: 0;
}
.dropdown-menu.categories > li > a {
  padding: 1.125rem 1.25em;
}
.categories-title {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " 'Change `categories-title` to `listing-title`';
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
}
.categories-description {
      @nest .cms & {
        border: 2px solid magenta !important;
        color: magenta !important;

        &::after {
          content: "Deprecated styles. " 'Change `categories-description` to `listing-description`';
          display: block;
          font-size: 1rem;
          font-weight: bold;
          line-height: 1;
        }
      }
}
.categories-sortable > li {
  padding-left: 1.25em;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.categories-sortable > li::before {
  width: 7px;
  height: 15px;
  background-position: -198px -136px;
  background-image: url(../images/sprites-1x.png);
  vertical-align: text-bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .categories-sortable > li::before {
    background-image: url(../images/sprites-2x.png);
    background-size: 487px 172px;
  }
}
.categories-sortable > li::before {
  /* sprite-draggable */
  position: absolute;
  top: 50%;
  left: 0;
  content: '';
  display: block;
  margin-top: -7px;
  overflow: hidden;
  cursor: move;
  text-indent: -1000em;
}
/*
Threaded List

Stylesheet: lists

Classes: threaded-list threaded-list-body threaded-list-toggle

<p class="alert alert-success">Badges are included in lists.css as well as extended.css. You do not need to include both style sheets in order to use badges in a threaded list.</p>

Markup:
<ul class="threaded-list">
  <li>
    <header>
      <div class="badge badge-success"></div>
      <h4>Resolved: NYSE issue disseminating trades and quotes in symbol range HO&ndash;JNZ</h4>
      <time>19:05 ET 25 Jan 2012</time>
    </header>
    <div class="threaded-list-body">
      <dl class="metadatalist">
        <dt>Services impacted</dt>
        <dd>Market Data, trading</dd>
        <dt>Market</dt>
        <dd>NYSE</dd>
        <dt>Category</dt>
        <dd>General</dd>
      </dl>
      <p>The NYSE has published all final transactions for symbols in the alphabetic range HO through JNZ resolved as of 7:05:00 p.m. ET.</p>
    </div>
    <button class="threaded-list-toggle">Additional messaging</button>
    <ul class="threaded-list collapse">
      <li>
        <header>
          <div class="badge badge-warning"></div>
          <h4>NYSE issue disseminating trades and quotes in symbol range HO&ndash;JNZ</h4>
          <time>15:36 ET 25 Jan 2012</time>
        </header>
        <div class="threaded-list-body">
          <p>The NYSE is currently experiencing an issue publishing trade and quote information in the alphabetic symbol range HO through JNZ. Trade a quote information for symbols outside this range is up-to-date and being disseminated normally, and all other NYSE trading systems are functioning normally.</p>
          <p>Repairs are underway; an update will follow shortly.</p>
        </div>
      </li>
      <li>
        <header class="threaded-list-header-no-badge">
          <h4>NYSE issue disseminating trades and quotes in symbol range HO&ndash;JNZ</h4>
          <time>15:36 ET 25 Jan 2012</time>
        </header>
        <div class="threaded-list-body">
          <p>The NYSE is currently experiencing an issue publishing trade and quote information in the alphabetic symbol range HO through JNZ. Trade a quote information for symbols outside this range is up-to-date and being disseminated normally, and all other NYSE trading systems are functioning normally.</p>
          <p>Repairs are underway; an update will follow shortly.</p>
        </div>
      </li>
    </ul>
  </li>
</ul>

Styleguide Lists.Special.Threaded
*/
.threaded-list {
  margin-bottom: 4rem;
  padding-left: 0
}
.threaded-list > li {
  padding-left: 2.2em;
  list-style: none;
}
.threaded-list > li > .threaded-list {
  padding-left: (2.2em / 2);
}
.threaded-list > li > .threaded-list > li {
  list-style: none;
}
.threaded-list > li > .threaded-list-header,
    .threaded-list > li > header {
  margin-bottom: 1rem;
}
.threaded-list > li > .threaded-list-header.threaded-list-header-no-badge, .threaded-list > li > header.threaded-list-header-no-badge {
  padding-left: 0;
}
.threaded-list > li > .threaded-list-header > .badge:empty, .threaded-list > li > header > .badge:empty {
  float: left;
  margin-top: 0.125em;
  margin-left: -var(--threaded-list-indent-size);
}
.threaded-list > li > .threaded-list-header > h3,
      .threaded-list > li > .threaded-list-header > h4,
      .threaded-list > li > .threaded-list-header > h5,
      .threaded-list > li > .threaded-list-header > h6,
      .threaded-list > li > header > h3,
      .threaded-list > li > header > h4,
      .threaded-list > li > header > h5,
      .threaded-list > li > header > h6 {
  margin-top: 0;
  margin-bottom: 0.375em;
  color: hsl(345, 6.1%, 12.9%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.75;
  margin-bottom: 0;
  font-size: 1rem;
}
.threaded-list > li > .threaded-list-header > time, .threaded-list > li > header > time {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.1;
  color: hsl(150, 1.1%, 63.9%);
  color: hsl(150, 1.1%, 63.9%);
  font-style: italic;
}
.threaded-list > li > .threaded-list-body p:last-child {
  margin-bottom: 0;
}
.threaded-list > li > .threaded-list-toggle {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  margin-bottom: 2em;
  padding-left: 2em;
  border: 0;
  color: #00b5e2;
  background-color: transparent;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: bold;
}
.threaded-list > li > .threaded-list-toggle::before {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -394px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .threaded-list > li > .threaded-list-toggle::before {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.threaded-list > li > .threaded-list-toggle::before {
  position: absolute;
  top: 0.125em;
  left: 0;
  content: "";
  display: block;
}
.threaded-list > li > .threaded-list-toggle.is-expanded::before {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -433px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .threaded-list > li > .threaded-list-toggle.is-expanded::before {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.threaded-list > li > .threaded-list-toggle:empty::after {
  content: "additional messaging";
  color: #00b5e2;
}
.threaded-list > li + li {
  margin-top: 2.5em;
}
/*
Market List

Stylesheet: lists

Classes: market-list

Markup:
<ul class="market-list">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Sit amet</a></li>
</ul>

Styleguide Lists.Special.Market
*/
.market-list {
  padding-left: 0
}
.market-list > li {
  position: relative;
  margin-bottom: 0.625em;
  padding-left: 0.9em;
  list-style: none;
}
.market-list > li::before {
  position: absolute;
  left: 0;
  content: '/';
  display: block;
  color: hsl(200, 3.4%, 34.9%);
  font-weight: 400;
}
.market-list.inverse > li::before {
  color: #fff;
}
/*
Big Numbers

Stylesheet: lists

Classes: big-numbers

Markup:
<ol class="big-numbers">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Styleguide Lists.Special.Big-Numbers
*/
ol.big-numbers {
  margin-left: 0;
  padding-top: 0.3em;
  padding-left: 0;
  counter-reset: big-numbers
}
ol.big-numbers > li {
  position: relative;
  margin: 0 0 1em 1.5em;
  padding: 0.2em 0.1em;
  list-style: none;
}
ol.big-numbers > li::before {
  position: absolute;
  top: -0.3em;
  left: -0.7em;
  content: counter(big-numbers);
  width: 1.35em;
  color: #000;
  font-size: 222%;
  counter-increment: big-numbers;
  font-weight: 700;
}
/*
Product list

Markup:
<ul class="product-list">
  <li>Brent Crude</li>
  <li>Wheat</li>
  <li>Other stuff</li>
</ul>

Styleguide Lists.Special.Product
*/
.product-list {
  list-style: none
}
.product-list > li {
  margin-top: 0;
  margin-bottom: 0.375em;
  color: hsl(214.7, 13.7%, 27.3%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 1.4em;
  line-height: 1.4;
}
.product-list > li:last-child {
  margin-bottom: 0;
}
.product-list > li {}
.landing-highlight .product-list:last-child {
  margin-bottom: 0;
}
.section-header + .product-list {
  margin-top: -0.625em;
}
/*
Search Results

Stylesheet: lists

Classes: search-results search-results-title search-results-url search-results-related

Used on the search results page.

You can also change the icon to match various file types using `item-*` classes. Use `search-results-action` for a highlighted link to a file.

Markup:
<ul class="search-results">
  <li>
    <h3 class="search-results-title">
      <a href="#">Default icon (webpage)</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
    <p class="search-results-url">
      <a href="#">http://www.example.com</a>
    </p>
  </li>
  <li class="search-results-related">
  <time class="search-results-date">2:22pm, 22 July 2018</time>
    <h3 class="search-results-title">
      <a href="#">Related link</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
    <p class="search-results-url">
      <a href="#">http://www.example.com</a>
    </p>
  </li>
</ul>

Markup2:
<ul class="search-results">
  <li class="item-pdf">
    <h3 class="search-results-title">
      <a href="#">Pdf link</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
    <p class="search-results-url">
      <a href="#">http://www.example.com</a>
    </p>
  </li>
  <li class="item-doc">
    <h3 class="search-results-title">
      <a href="#">Word Document</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
  </li>
  <li class="item-excel">
    <h3 class="search-results-title">
      <a href="#">Spreadsheet</a>
    </h3>
    <p>Lorem ipsum dolor sit amet</p>
  </li>
</ul>

Styleguide Lists.Special.Search-Results
*/
.search-results {
  margin-top: 1rem;
  padding-left: 0
}
.search-results p {
  margin-bottom: 0.3125rem;
}
.search-results > li {
  position: relative;
  margin-bottom: 2.5rem;
  list-style: none;
}
.search-results > li.search-results-related {
  padding-left: 2.5em;
}
.search-results > li strong {
  color: #000;
}
.search-results-date {
  float: right;
  margin-top: 0.45rem;
}
.search-results-title {
  margin-top: 0;
  margin-bottom: 0.6667em;
  color: hsl(345, 6.1%, 12.9%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1.8125rem;
  font-weight: 700;
  line-height: 1.05;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0.5rem
}
.search-results-title a {
  color: inherit;
}
.search-results-title a:hover {
  color: #00b5e2;
}
.search-results-title a::after {
  content: "";
  margin-left: 0.5em;
  vertical-align: text-bottom;
}
.item-pdf > .search-results-title > a::after {
  /* sprite-pdf */
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -548px -307px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .item-pdf > .search-results-title > a::after {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.item-doc > .search-results-title > a::after {
  /* sprite-doc */
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -576px -307px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .item-doc > .search-results-title > a::after {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.item-excel > .search-results-title > a::after {
  /* sprite-excel */
  display: inline-block;
  overflow: hidden;
  width: 20px;
  height: 24px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -603px -307px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .item-excel > .search-results-title > a::after {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.search-results-url > a {
  color: #2235f9;
}
.search-results-url > a:hover {
  color: #00b5e2;
}
.search-results-action {
  text-transform: uppercase;
}
/* TODO: document or deprecate */
.icon-list {
  padding-left: 0;
  list-style: none
}
.icon-list > li {
  display: inline-block;
}
.icon-list > li + li {
  margin-left: 0.6em;
}
.icon-list > li > a > i {
  position: relative;
  -webkit-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
}
.icon-list > li > a > i:hover {
  opacity: 0.8;
}
/* this only works inside of a "content-container" such as `landing-section` */
@media screen and (min-width: 1200px) {
  .icon-list-container {
    position: relative;
  }

  .icon-list {
    position: absolute;
    left: -4em
  }

  .icon-list > li {
    display: block;
  }

  .icon-list > li + li {
    margin-top: 0.6em;
    margin-left: 0;
  }

  .icon-list-right {
    right: -4em;
    left: auto;
  }
}
/*
Grid List

Markup:
<ul class="grid-list">
  <li><a href="#">Product<br>Specs</a></li>
  <li><a href="#">Hours</a></li>
  <li><a href="#">Holidays</a></li>
  <li><a href="#">Expiry<br>Calendar</a></li>
  <li><a href="#">Fees</a></li>
  <li><a href="#">Margins</a></li>
  <li><a href="#">Subscriptions</a></li>
  <li><a href="#">Instant<br>Messaging</a></li>
  <li><a href="#">System<br>Alerts</a></li>
</ul>

Styleguide Lists.Grid-List
*/
.grid-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 1.5652rem;
  padding-left: 0;
  list-style: none
}
.grid-list::before {
  content: "";
  display: block;
}
.grid-list > li {
  margin-bottom: 0.8rem;
}
.grid-list > li > a {
  display: block;
  height: 100%;
  padding: 0.4rem 2rem 0.4rem 0.8rem;
  border-left: 1px solid currentColor;
  color: hsl(175, 2%, 50%);
  font-weight: bold;
}
.grid-list > li > a:hover {
  color: hsl(345, 6.1%, 12.9%);
  text-decoration: none;
}
@supports (display: grid) {
  .grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 0.8rem;
  }
  .grid-list > li {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 980px) {
  .grid-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 1rem;
  }
  .grid-list > li > a {
    padding: 0.8rem 4rem 0.8rem 1.25rem;
  }
}
/*
Resources

Markup:
<ul class="resources-list">
  <li><a href="#">Product Specs</a></li>
  <li><a href="#">Hours</a></li>
  <li><a href="#">Holidays</a></li>
  <li><a href="#">Expiry Calendar</a></li>
  <li><a href="#">Fees</a></li>
</ul>

Styleguide Lists.Special.Resources
*/
.resources-list {
  list-style: none;
  padding-left: 0
}
.resources-list > li > a {
  color: hsl(345, 6.1%, 12.9%);
}
/*
Secondary Tabs

Stylesheet: lists

Classes: nav nav-tabs-secondary nav-aside

Markup:
<ul class="nav nav-tabs-secondary">
  <li><a href="#"> Tab one</a></li>
  <li class="is-active"><a href="#"> Active tab</a></li>
  <li><a href="#"> Tab three</a></li>
  <li class="is-disabled"><a href="#"> Disabled tab</a></li>
  <li class="nav-aside">Aside</li>
</ul>

Styleguide Navs.Tabs-Secondary
*/
.nav-tabs-secondary {
  margin-bottom: 1.25em;
  background-color: hsl(150, 2.3%, 82.7%);
  text-transform: uppercase
}
.nav-tabs-secondary > li {
  float: left;
  font-size: 0.875rem;
}
.nav-tabs-secondary > li a {
  padding: 0.35em 1.35em;
  color: hsl(200, 3.4%, 34.9%);
  font-weight: 700;
}
.nav-tabs-secondary > li a:hover {
  color: #000;
  text-decoration: none;
}
.nav-tabs-secondary > li.active a,
      .nav-tabs-secondary > li.active a:hover,
      .nav-tabs-secondary > li.active a:focus,
      .nav-tabs-secondary > li.is-active a,
      .nav-tabs-secondary > li.is-active a:hover,
      .nav-tabs-secondary > li.is-active a:focus {
  color: #fff;
  background-color: #000;
  font-weight: 400;
}
.nav-tabs-secondary > li.disabled a,
      .nav-tabs-secondary > li.disabled a:hover,
      .nav-tabs-secondary > li.is-disabled a,
      .nav-tabs-secondary > li.is-disabled a:hover {
  color: hsl(150, 1.1%, 63.9%);
  background-color: hsl(150, 2.3%, 82.7%);
}
.nav-tabs-secondary > li.nav-aside {
  padding: 0.3em 1em;
  color: #000;
}
/*
Links

Stylesheet: lists

Classes: nav nav-links nav-aside nav-links label

Include an optional `nav-links-label` to add a label to the list.

Markup:
<ul class="nav nav-links {{modifier_class}}">
  <li class="nav-links-label">Related links</li>
  <li><a href="#"> Link one</a></li>
  <li class="is-active"><a href="#"> Active Link</a></li>
  <li><a href="#"> Link three</a></li>
  <li class="is-disabled"><a href="#"> Disabled Link</a></li>
  <li class="nav-aside">Aside</li>
</ul>

nav-links-compact - Add to save space when you have a lot of tabs

Styleguide Navs.Tabs-Links
*/
.nav-links {
  margin-bottom: 0.8em;
  text-transform: capitalize
}
.nav-links > li {
  float: left;
  margin-right: 1em;
  font-size: 0.8125rem;
}
.nav-links > li > a {
  margin-right: 1em;
  margin-bottom: 0.5em;
  padding: 0 0 0.75em;
  border-color: transparent;
  border-style: solid;
  border-width: 0 0 2px 0;
  font-weight: 400;
}
.nav-links > li > a:hover {
  color: #00b5e2;
  background-color: transparent;
  text-decoration: none;
}
.nav-links > li::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '|';
}
.nav-links > li:last-child::after {
  content: '';
}
.nav-links > li.active > a,
    .nav-links > li.is-active > a {
  border-bottom-color: #000;
  color: #000;
}
.nav-links > li.nav-links-label {
  color: #000;
  font-weight: 800;
  text-transform: uppercase;
}
.nav-links > li.nav-links-label::after {
  position: static;
  content: ':';
}
.nav-links-compact > li {
  margin-right: 0.625em;
}
.nav-links-compact > li > a {
  margin-right: 0.625em;
}
/*
Categories

Stylesheet: lists

Classes: nav nav-categories nav-categories-label

Markup:
<ul class="nav nav-categories">
  <li class="nav-categories-label">Category</li>
  <li><a href="#">Featured</a></li>
  <li class="is-active"><a href="#">Energy</a></li>
  <li><a href="#">Agriculture</a></li>
  <li><a href="#">Financials</a></li>
  <li><a href="#">Ferrous Metals</a></li>
</ul>

Styleguide Navs.Categories
*/
.nav-categories {
  margin-bottom: 1rem;
  padding-left: 0;
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol"
}
.nav-categories > li {
  display: inline-block;
  vertical-align: middle;
  list-style: none;
}
.nav-categories > li.nav-categories-label {
  margin-top: 0;
  margin-bottom: 0.6667em;
  color: hsl(345, 6.1%, 12.9%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1.8125rem;
  font-weight: 700;
  line-height: 1.05;
  text-transform: none;
  margin-bottom: 0;
  padding-right: 1em;
  color: hsl(345, 6.1%, 12.9%);
  font-size: 1.25rem;
  text-transform: none;
}
.nav-categories > li.nav-categories-label::before {
  content: "";
}
.nav-categories > li.nav-categories-label {}
@media (max-width: 767px) {
  .nav-categories > li.nav-categories-label {
    display: block;
  }
}
.nav-categories > li > a {
  padding: 0.5em 0 0.4em;
  color: hsl(345, 6.1%, 12.9%);
}
.nav-categories > li:not(:last-child) a {
  margin-right: 1em;
}
.nav-categories > li.active,
    .nav-categories > li.active a,
    .nav-categories > li.is-active,
    .nav-categories > li.is-active a {
  color: #000;
}
.nav-categories > li > a:hover {
  background-color: transparent;
}
.nav-categories > li.nav-aside::before {
  display: none;
}
.nav-categories > li.nav-aside::before a {
  margin-right: 0;
  margin-left: 1em;
  color: hsl(200, 3.4%, 34.9%);
}
.nav-categories > .nav-categories-control > a {
  padding-right: 1em;
  color: hsl(150, 1.1%, 63.9%);
}
.nav-categories > .nav-categories-control > a:focus {
  text-decoration: none;
}
.nav-categories > .nav-categories-control > a::after {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -538px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .nav-categories > .nav-categories-control > a::after {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.nav-categories > .nav-categories-control > a::after {
  /* sprite-plus-faded-cropped */
  position: absolute;
  top: 0.8em;
  right: 0;
  content: "";
  display: block;
  opacity: 0.5;
}
.nav-categories > .nav-categories-control.is-open > a::after {
  display: inline-block;
  overflow: hidden;
  width: 13px;
  height: 13px;
  background-image: url(../images/sprites2-1x.png);
  background-repeat: no-repeat;
  background-position: -577px -275px;
  text-indent: -10000px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 2dppx) {
  .nav-categories > .nav-categories-control.is-open > a::after {
    background-image: url(../images/sprites2-2x.png);
    background-size: 720px 720px;
  }
}
.nav-categories > .nav-categories-control.is-open > a::after {
  /* sprite-minus-faded-cropped */
}
.nav-categories > .nav-aside {
  padding: 0;
  /* match calculated line height of .nav-categories-label */
  line-height: 1.785;
}
.nav-categories + .nav-categories {
  padding-top: 0.625em;
  border-top: 1px dotted hsl(150, 1.1%, 63.9%);
}
@media (max-width: 767px) {
  .nav-categories > li {
    min-width: 30%;
  }
  .nav-categories > li.nav-categories-label {
    margin-bottom: 0.5em;
  }
  .nav-categories > li > a {
    margin-right: 0;
  }
  .nav-categories > .nav-categories-control {
    display: block;
  }
  .nav-categories > .nav-categories-control > a {
    display: inline-block;
  }
}
@media (min-width: 768px) {
  .nav-categories-control {
    float: right;
  }
}
/* intercontinentalexchange homepage nav - TODO: DELETE? */
.nav-landing-page {
  margin-left: -0.9em;
  font-size: 1.275rem;
  line-height: 1;
  text-align: center
}
.nav-landing-page > li > a:hover {
  background: transparent;
}
.nav-landing-page > li .sprite {
  vertical-align: top;
}
.nav-landing-page {
  .nav-landing-page-search {
    border-left: 1px solid rgba(255, 255, 255, 0.5);
  }
}
@media screen and (min-width: 768px) {
  .nav-landing-page {
    float: left;
    margin: 0 54.18px 2.5rem 0;
    font-size: 1rem;
    text-align: left;
  }
  .nav-landing-page > li {
    float: left;
  }
  .nav-landing-page > li > a {
    padding: 0.3125em 0.625em;
  }
  .nav-landing-page > li:first-child > a {
    padding-left: 0;
  }
  .nav-landing-page > li:last-child > a {
    padding-right: 0;
  }
}
@media screen and (min-width: 980px) {
  .nav-landing-page {
    font-size: 1.125rem;
    > li {
      > a {
        padding: 0.3em 1.1em;
      }
    }
  }
}
@media screen and (min-width: 1200px) {
  .nav-landing-page {
    font-size: 1.375rem;
  }
}
/*
Description Lists

Stylesheet: lists

Classes: dl

Markup:
<dl class="dl {{modifier_class}}">
  <dt>One</dt>
  <dd>Un</dd>
  <dt>Two</dt>
  <dd>Deux</dd>
  <dt>Three</dt>
  <dd>Troi</dd>
</dl>

dl-horizontal - Horizontal alignment

Styleguide Lists.Description-Lists
*/
.dl {
  font-size: 0.875em
}
.dl > dt {
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
  margin-bottom: 0.275em;
  color: #000;
  line-height: 1;
}
.dl > dd {
  margin-bottom: 1.875em;
  line-height: 1.714;
}
@media screen and (min-width: 480px), print {
  .dl-horizontal dt {
    float: left;
    clear: left;
    width: 10em;
    line-height: 1.35;
    text-overflow: ellipsis;
    text-align: right;
  }
  .dl-horizontal dd {
    margin-left: 180px;
  }
}
/*
Metadata

Stylesheet: lists

Classes: metadatalist

Markup:
<dl class="metadatalist {{modifier_class}}">
  <dt>One</dt>
  <dd>Un</dd>
  <dt>Two</dt>
  <dd>Deux</dd>
  <dt>Three</dt>
  <dd>Troi</dd>
</dl>

metadatalist-stacked - Stack list items vertically

Styleguide Lists.Description-Lists.Metadata
*/
.metadatalist {
  text-transform: uppercase
}
.metadatalist dt,
  .metadatalist dd {
  display: inline;
}
.metadatalist dt {
  margin-right: 0.5em;
  font-weight: 700;
}
.metadatalist dt:first-child::before {
  content: "";
}
.metadatalist dt::after {
  content: ":";
}
.metadatalist dd {
  padding-right: 0.625em;
  font-weight: 400;
}
.metadatalist dd + dt {
  margin-left: 1em;
}
.metadatalist li {
  display: inline;
  padding: 0.3333em 0.6667em;
  border-right: 1px solid hsl(150, 1.1%, 63.9%);
}
.metadatalist li:first-child {
  padding-left: 0;
}
.metadatalist li:last-child {
  border-right: 0;
}
.metadatalist-stacked dt::before {
  content: "";
  display: block;
}
.metadatalist-stacked dd {
  text-transform: none;
}
.metadatalist-stacked dd + dt {
  margin-left: 0;
}
@supports (display: grid) {
  .metadatalist-stacked {
    display: grid;
    grid-gap: 0.3125rem;
    grid-template-columns: -webkit-max-content auto;
    grid-template-columns: max-content auto
  }
  .metadatalist-stacked dt {
    grid-column: 1 / 2;
    text-align: right;
  }
  .metadatalist-stacked dd {
    grid-column: 2 / 3;
  }
}
/*
Split

Stylesheet: lists

Classes: dl-split

This will put the term on the left and the definition on the right. Use a container such as a grid column to constrain the overall width if necessary.

Markup:
<dl class="dl-split">
  <dt>One</dt>
  <dd>Un</dd>
  <dt>Two</dt>
  <dd>Deux</dd>
  <dt>Three</dt>
  <dd>Troi</dd>
</dl>

Styleguide Lists.Description-Lists.Split
*/
.dl-split dt {
  margin-top: 0;
  margin-bottom: 0.375em;
  color: hsl(345, 6.1%, 12.9%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.125rem;
  line-height: 1.75;
  margin-bottom: 0.75em;
  color: #000;
  font-weight: 700;
}
.dl-split dd {
  margin-bottom: 0.75em;
}
@media screen and (min-width: 480px), print {
  .dl-split dt {
    float: left;
    clear: left;
    max-width: 85%;
    text-align: left;
  }
  .dl-split dd {
    line-height: 1.3;
    text-align: right;
  }
  .dl-split dd::after {
    clear: left;
    content: "";
    display: block;
    margin-bottom: -0.625em;
  }
}
/*
Listing

Classes: listing-title listing-description

Stylesheet: Lists

These are primarily for use in [Category Lists](section-lists.html#kssref-lists-special-categories).

Markup:
<h4 class="listing-title">End of Day</h4>
<div class="listing-description">View Settlement Reports for All Markets</div>

Styleguide Typography.Lists
*/
.listing-title {
  margin-top: 0;
  margin-bottom: 0.375em;
  color: hsl(214.7, 13.7%, 27.3%);
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.3;

  margin-bottom: 0.3em;
  color: hsl(200, 3.4%, 34.9%);
}
.listing-description {
  color: hsl(150, 1.1%, 63.9%);
  font-size: 0.75rem;
  font-style: italic;
}
/*
Badges

Stylesheet: extended

Highlight new or unread items with `badge`.

Markup:
<a href="#">Inbox <span class="badge">42</span></a>

Styleguide: Components.Badges
*/
.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-style: normal;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  background-color: hsl(150, 1.1%, 63.9%);
  border: 0;
  border-radius: 10px
}
.badge:empty {
  display: none;
}
.btn .badge {
  position: relative;
  top: -1px;
}
.btn-xs .badge {
  top: 0;
  padding: 1px 5px;
}
a.badge:hover,
  a.badge:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
/*
Contextual Badges

Use empty badges with contextual classes for color and meaningful icons:

Markup:
<i class="badge {{modifier_class}}"></i>

badge-success - green
badge-info    - blue
badge-warning - yellow
badge-danger  - red

Styleguide Components.Badges.Contextual
*/
.badge-info:empty, .badge-success:empty, .badge-warning:empty, .badge-danger:empty {
  display: inline-block;
  padding: 0.2143em 0.5714em;
}
.badge-info {
  background-color: #71c5e8;
}
.badge-info::before {
  content: 'i ';
}
.badge-success {
  background-color: #00c300
}
.badge-success::before {
  content: "\2713";
}
.badge-success:empty {
  padding-right: 0.3571em;
  padding-left: 0.3571em;
}
.badge-warning {
  background-color: #f26407;
}
.badge-warning::before {
  content: '! ';
}
.badge-danger {
  background-color: #c9001a;
}
.badge-danger::before {
  content: '! ';
}
/* required in conjunction w/ threaded-list */
.legend {
  padding: 1em;
}
.legend-items {
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}
@media screen and (min-width: 480px), print {
  .legend-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: 70ch
  }
  .legend-items > li {
    -webkit-box-flex: 50%;
        -ms-flex: 50%;
            flex: 50%;
  }
}