: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 mixins only */
/*
 * Advanced tables modules
 * Supplements basic tables in _core.less
 */
/*
Big Data

Stylesheet: tables

Classes: table-bigdata

For use in the Product Guide.

Markup:
<table class="table table-bigdata">
  <thead>
    <tr>
      <td>Contract</td>
      <td>Last</td>
      <td>Time (GMT)</td>
      <td>% Change</td>
      <td>Volume</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">
        <i class="sprite sprite-chart"></i>Mar14
      </a></td>
      <td>100.83</td>
      <td class="small">3/20/2014<br>6:19&nbsp;PM</td>
      <td>0.260</td>
      <td>214.600</td>
    </tr>
    <tr class="is-selected">
      <td><a href="#">
        <i class="sprite sprite-chart-selected"></i>Jul14
      </a></td>
      <td>92.53</td>
      <td class="small">3/20/2014<br>6:19&nbsp;PM</td>
      <td>0.260</td>
      <td>214.600</td>
    </tr>
  </tbody>
</table>

Styleguide Tables.Special.Big-Data
*/
.table-bigdata {
  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;
  line-height: 1.5;
  text-transform: uppercase
}
.table-bigdata a {
  font-weight: 400;
}
.table-bigdata small,
  .table-bigdata .small {
  font-size: 1rem;
  font-weight: 400;
  line-height: (20/14);
}
.table-bigdata > thead {
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
}
.table-bigdata > thead > tr > th,
      .table-bigdata > thead > tr > td {
  padding: 0;
  border-bottom: 0;
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  line-height: 2;
  text-transform: uppercase;
  vertical-align: bottom;
}
.table-bigdata > thead a {
  color: #000;
}
.table-bigdata > tbody > tr > th {
  padding: 0 0 1em;
  border: 0;
  color: #000;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.7224;
  text-transform: uppercase;
  vertical-align: bottom;
}
.table-bigdata > tbody > tr > td {
  padding: 0.875em 0.3em;
  border-top: 1px solid hsl(150, 1.1%, 63.9%);
}
.table-bigdata > tbody > tr > td:first-child {
  padding-left: 0;
}
.table-bigdata > tbody > tr > td[colspan] {
  width: auto;
}
.table-bigdata > tbody > tr.table-bigdata-detail > td {
  padding: 0;
  border-top: 0;
}
.table-bigdata > tbody > tr:first-child > th,
      .table-bigdata > tbody > tr:first-child > td {
  border-top: 0;
}
.table-bigdata > tbody > tr.is-selected > th, .table-bigdata > tbody > tr.is-selected > td, .table-bigdata > tbody > tr.is-selected > th a, .table-bigdata > tbody > tr.is-selected > td a {
  color: #000;
  font-weight: 700;
}
.table-bigdata tbody + tbody {
  border-top: 1px solid hsl(150, 1.1%, 63.9%);
}
.table-bigdata > tfoot > tr > td {
  font-weight: 700;
}
.table-bigdata .sprite {
  margin-right: 0.8em;
  vertical-align: -0.25em;
}
@media screen and (min-width: 480px) {
  .table-bigdata {
    font-size: 1.5rem;
  }
  .table-bigdata > tbody > tr > td:last-child {
    width: 1%;
    /* pushes final column to the right */
    padding-right: 0;
  }
  .table-bigdata > tbody > tr > td {
    /* Setting explicit widths fixes chrome bug when colspan is used */
    /* These widths exactly set for Product Data pages 5-col table: */
  }
  .table-bigdata > tbody > tr > td:nth-child(1):nth-last-child(5) {
    width: 34%;
  }
  .table-bigdata > tbody > tr > td:nth-child(2):nth-last-child(4) {
    width: 24%;
  }
  .table-bigdata > tbody > tr > td:nth-child(3):nth-last-child(3) {
    width: 20%;
  }
  .table-bigdata > tbody > tr > td:nth-child(4):nth-last-child(2) {
    width: 15%;
  }
  .table-bigdata > tbody > tr > td:nth-child(5):nth-last-child(1) {
    width: 7%;
  }
}
/* TODO document or deprecate */
.table-borderless {
  border: 0
}
.table-borderless > tbody > tr, .table-borderless > thead > tr, .table-borderless > tfoot > tr {
  border: 0;
}
.table-borderless > tbody > tr > td,
      .table-borderless > tbody > tr > th,
      .table-borderless > thead > tr > td,
      .table-borderless > thead > tr > th,
      .table-borderless > tfoot > tr > td,
      .table-borderless > tfoot > tr > th {
  padding: 0.3125em;
  border: 0;
}
.table-borderless > tbody > tr th, .table-borderless > thead > tr th, .table-borderless > tfoot > tr th {
  text-transform: uppercase;
}
/*
Compact

Stylesheet: tables

Classes: table-compact

Markup:
<table class="table table-compact">
  <thead>
    <tr>
      <td>thead</td>
      <td>three</td>
      <td>blind</td>
      <td>mice</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>March 2014</th>
      <td>123</td>
      <td>59,323</td>
      <td>0</td>
    </tr>
    <tr>
      <th>June 2014</th>
      <td>321</td>
      <td>10,001</td>
      <td>12</td>
    </tr>
  </tbody>
</table>

Styleguide Tables.Compact
*/
.table-compact > thead > tr > th,
      .table-compact > thead > tr > td,
      .table-compact > tbody > tr > th,
      .table-compact > tbody > tr > td,
      .table-compact > tfoot > tr > th,
      .table-compact > tfoot > tr > td {
  padding: 0.14286em;
}
.table-compact > tbody > tr > th {
  text-transform: uppercase;
}
/*
Mobile Layout

Stylesheet: tables

Classes: table-mobile

To make a table restructure itself vertically for narrow screens, add the
table-mobile class. *This also requires the addition of data-label to each
cell in the table body.*

Markup:
<table class="table table-mobile">
  <thead>
    <tr>
      <td>Date</td>
      <td>Name</td>
      <td>ID</td>
      <td>value</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th data-label="Date">March 2014</th>
      <td data-label="Name">Foo</td>
      <td data-label="ID">123</td>
      <td data-label="value">59,323</td>
    </tr>
    <tr>
      <th data-label="Date">June 2014</th>
      <td data-label="Name">Bar</td>
      <td data-label="ID">321</td>
      <td data-label="value">10,001</td>
    </tr>
    <tr>
      <th data-label="Date">July 2014</th>
      <td data-label="Name">Baz</td>
      <td data-label="ID">241</td>
      <td data-label="value">11,222</td>
    </tr>
  </tbody>
  </tbody>
  <tfoot>
    <th>tfoot</th>
    <td>444</td>
    <td>69,324</td>
    <td>12</td>
    </tr>
  </tfoot>
</table>

Styleguide Tables.Mobile
*/
@media screen and (max-width: 767px) {
  table.table-mobile,
    table.table-mobile thead,
    table.table-mobile tbody,
    table.table-mobile th,
    table.table-mobile tr,
    table.table-mobile td {
    display: block;
  }
  table.table-mobile th,
    table.table-mobile tr,
    table.table-mobile td {
    min-height: 2.15em;
    text-align: left;
  }
  table.table-mobile > thead,
    table.table-mobile > tfoot {
    display: none;
  }
  table.table-mobile > tbody > tr {
    border-bottom: 1px solid hsl(150, 1.1%, 63.9%);
  }
  table.table-mobile > tbody > tr:last-child {
    border-bottom: 0;
  }
  table.table-mobile > tbody > tr > td,
      table.table-mobile > tbody > tr > th,
      table.table-mobile > tbody > tr > td:first-child,
      table.table-mobile > tbody > tr > th:first-child {
    position: relative;
    padding-left: 50%;
    border: 0;
  }
  table.table-mobile > tbody > tr > td::before, table.table-mobile > tbody > tr > th::before, table.table-mobile > tbody > tr > td:first-child::before, table.table-mobile > tbody > tr > th:first-child::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    content: attr(data-label);
    width: 48%;
    overflow: hidden;
    white-space: nowrap;
  }
  table.table-mobile.table-data > tbody > tr > td::before,
      table.table-mobile.table-data > tbody > tr > th::before {
    top: 0.85em;
  }
}
/*
Partitioned Columns

Stylesheet: tables

Classes: table-partitioned-2col table-partitioned-3col

Use table-partitioned-* classes to add vertical borders between groups
of columns.

Using `<th>` cells in the left column shifts the grouping to the right.

Markup:
<table class="table {{modifier_class}}">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
    <td>Six</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
    <td>Six</td>
  </tr>
</table>

table-partitioned-2col - partition every two columns
table-partitioned-3col - partition every three columns

Markup2:
<table class="table table-partitioned-2col">
  <tr>
    <th>Numbers:</th>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
    <td>Six</td>
  </tr>
  <tr>
    <th>Numerals:</th>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td>Five</td>
    <td>Six</td>
  </tr>
</table>

Styleguide Tables.Partitioned
*/
.table-partitioned-2col td:nth-of-type(2n),
.table-partitioned-3col td:nth-of-type(3n) {
  border-right: 1px solid hsl(150, 1.1%, 63.9%)
}
.table-partitioned-2col td:nth-of-type(2n):last-child, .table-partitioned-3col td:nth-of-type(3n):last-child {
  border-right: 0;
}
/*
Custom Partitioning

Stylesheet: tables

Classes: table-partitioned

If you need more specific control, add the `table-partitioned` class
to individual cells to add a border to their right side.

Markup:
<table class="table">
  <tr>
    <td class="table-partitioned">One</td>
    <td>Two</td>
    <td>Three</td>
    <td>Four</td>
    <td class="table-partitioned">Five</td>
    <td>Six</td>
  </tr>
</table>

Styleguide Tables.Partitioned.Custom
*/
.table-partitioned {
  border-right: 1px solid hsl(150, 1.1%, 63.9%);
}
/*
Responsive tables

Wrap your tables in `.table-responsive` and we'll make them mobile friendly
by enabling horizontal scrolling. Only applies <768px. Everything above that
will display normally.

DEPRECATED: use table-mobile instead
*/
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 1.2375em;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    border: 1px solid hsl(150, 1.1%, 63.9%)

    /* Tighten up spacing */
  }
  .table-responsive > .table {
    margin-bottom: 0;
    /* Ensure the content doesn't wrap */
  }
  .table-responsive > .table > thead > tr > th,
          .table-responsive > .table > thead > tr > td,
          .table-responsive > .table > tbody > tr > th,
          .table-responsive > .table > tbody > tr > td,
          .table-responsive > .table > tfoot > tr > th,
          .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }
  .table-responsive {
    /* Special overrides for the bordered tables */
  }
  .table-responsive > .table-bordered {
    border: 0;
    /* Nuke the appropriate borders so that the parent can handle them */
  }
  .table-responsive > .table-bordered > thead > tr > th:first-child,
          .table-responsive > .table-bordered > thead > tr > td:first-child,
          .table-responsive > .table-bordered > tbody > tr > th:first-child,
          .table-responsive > .table-bordered > tbody > tr > td:first-child,
          .table-responsive > .table-bordered > tfoot > tr > th:first-child,
          .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;
  }
  .table-responsive > .table-bordered > thead > tr > th:last-child,
          .table-responsive > .table-bordered > thead > tr > td:last-child,
          .table-responsive > .table-bordered > tbody > tr > th:last-child,
          .table-responsive > .table-bordered > tbody > tr > td:last-child,
          .table-responsive > .table-bordered > tfoot > tr > th:last-child,
          .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;
  }
  .table-responsive > .table-bordered {
    /* * Only nuke the last row's bottom-border in `tbody` and `tfoot` since
       * chances are there will be only one `tr` in a `thead` and that would
       * remove the border altogether. */
  }
  .table-responsive > .table-bordered > tbody > tr:last-child > th,
          .table-responsive > .table-bordered > tbody > tr:last-child > td,
          .table-responsive > .table-bordered > tfoot > tr:last-child > th,
          .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;
  }
}
/*
Sorting

Stylesheet: tables

Classes: table-sort table-sort-asc table-sort-desc

Use on user-sortable tables to indicate feedback to the user.

Markup:
<table class="table">
  <thead>
    <td class="table-sort">Sortable column</td>
    <td class="table-sort table-sort-asc">Sorted ascending</td>
    <td class="table-sort table-sort-desc">Sorted descending</td>
  </thead>
  <tbody>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tbody>
</table>

Styleguide Tables.Sorting
*/
.table-sort {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.table-sort-asc,
.table-sort-desc {
  position: relative
}
.table-sort-asc::after, .table-sort-desc::after {
  position: absolute;
  top: 50%;
  right: 1em;
  content: '';
  margin-top: -0.3125em;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.table-sort-asc::after {
  border-bottom: 5px solid #000;
}
.table-sort-desc::after {
  border-top: 5px solid #000;
}
.table-align-right {
  /* prettier-ignore */
}
td.table-align-right.table-sort, .table-align-right td.table-sort {
  padding-right: 2em;
}
/*
Special Tables

Stylesheet: tables

Special table types. These are designed for very specific purposes, and should
generally not be used elsewhere.

Styleguide Tables.Special
*/
/*
Trading Hours

Stylesheet: tables

Classes: trading-hours

For use in Product Specs. This is a three-column table with a specific layout:

Markup:
<table class="trading-hours">
  <thead>
    <tr>
      <td>City</td>
      <td>Trading</td>
      <td>Pre-open</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>New York</th>
      <td>9:00 PM-2:20 PM *<br>12:00-14:20</td>
      <td>7:30 PM<br>19:30</td>
    </tr>
    <tr>
      <th>London</th>
      <td>1:00 AM-6:20 PM<br>01:00-18:20</td>
      <td>11:30 PM<br>19:30</td>
    </tr>
    <tr>
      <th>Singapore</th>
      <td>9:00 AM-2:20 AM *<br>09:00-02:20</td>
      <td>7:30 AM<br>07:30</td>
    </tr>
  </tbody>
</table>

Styleguide Tables.Special.Trading-Hours
*/
/* TODO: VERIFY postcss conversion correct; look at lint errors below */
.trading-hours {
  width: 100%;
  margin-bottom: 2em
}
.trading-hours > thead > tr > th,
    .trading-hours > thead > tr > td {
  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;
  padding-bottom: 0.75em;
  color: #000;
}
.trading-hours > thead > tr > th:last-child, .trading-hours > thead > tr > td:last-child {
  width: 4.9em;
}
.trading-hours > tbody > tr > th,
    .trading-hours > tbody > tr > td {
  padding-bottom: 1.125em;
  border-top: 0;
  vertical-align: top;
}
.trading-hours > tbody > tr > th {
  width: 47.61%;
  padding-right: 3.22%;
  color: #000;
  font-size: 1.5rem;
  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;
}
.trading-hours > tbody > tr > td:nth-child(2) {
  padding-right: 6%;
  padding-left: 1260px * 0.006;
}
.trading-hours > tbody > tr:last-child {
  > th,
      > td {
        padding-bottom: 0;
  }
}
/*
Helpers

Stylesheet: tables

Various helper classes for fine-grained control

Styleguide Tables.Helpers
*/
/*
Preheading rows

Stylesheet: tables

Classes: table-preheading

Useful in conjunction with [partitioned columns](#kssref-tables-partitioned).

Markup:
<table class="table table-partitioned-3col">
  <thead>
    <tr class="table-preheading">
      <th colspan="3">Q1</td>
      <th colspan="3">Q2</td>
      <th colspan="3">Q3</td>
      <th colspan="3">Q4</td>
    </tr>
    <tr>
      <td>Jan</td><td>Feb</td><td>Mar</td>
      <td>Apr</td><td>May</td><td>Jun</td>
      <td>Jul</td><td>Aug</td><td>Sep</td>
      <td>Oct</td><td>Nov</td><td>Dec</td>
    </tr>
  </thead>
</table>

Styleguide Tables.Helpers.Preheading
*/
table tr.table-preheading {
  color: hsl(150, 1.1%, 63.9%);
}
table tr.table-preheading > td,
    table tr.table-preheading > th {
  text-align: center;
}
/*
Subheadings

Stylesheet: tables

Classes: table-subheading table-master-footer

Use multiple `<tbody>` elements to group the sections of the table logically.
Apply the `table-subheading` class to the first row of each tbody.

Sometimes, a grand totals row is necessary after several subheading sections.
Use the `table-master-footer` class to set it apart.

Markup:
<table class="table">
  <tbody>
    <tr class="table-subheading">
      <td colspan="4">English</td>
    </tr>
    <tr>
      <th>Numbers</th> <td>One</td> <td>Two</td> <td>Three</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="table-subheading">
      <td colspan="4">Spanish</td>
    </tr>
    <tr>
      <th>Numeros</th> <td>Uno</td> <td>Dos</td> <td>Tres</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="table-master-footer">
      <td>Values</td> <td>1</td> <td>2</td> <td>3</td>
    </tr>
  </tfoot>
</table>

Styleguide Tables.Helpers.Subheadings
*/
table tr.table-subheading > td,
    table tr.table-subheading > th {
  padding-top: 1.4286em;
  border-top: 0;
  border-bottom: 4px solid hsl(150, 2.3%, 82.7%);
  color: #000;
  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: 700;
  text-transform: uppercase;
}
table {
  /* MISSING DOCS - table-subfooter */
}
table tr.table-subfooter > td,
    table tr.table-subfooter > th {
  text-transform: uppercase;
  font-weight: 700;
}
table tr.table-master-footer > td,
    table tr.table-master-footer > th {
  padding-top: 1.4286em;
  border-top: 0;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
}
/*
MISSING DOCS - table-repeated-header table-heading-date
*/
table {
  /* Header row repeated inside each tbody */
}
table tr.table-repeated-header {
  color: #000;
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
}
table tr.table-repeated-header > th {
  padding-bottom: 1.4286em;
  font-weight: 400;
  text-transform: uppercase;
}
table .table-heading-date {
  text-transform: uppercase;
}
/*
Using Rowspans

Stylesheet: tables

Classes: table-no-first-cell

Left padding is removed from the first cell in each row. This causes an misalignment of the second column when the first cell of a preceeding row has a `rowspan`. To correct this, add `table-no-first-cell` to the row without a cell in the first column.

Markup:
<table class="table">
  <tr>
    <td rowspan="2">Colspan</td>
    <td>Content one</td>
  </tr>
  <tr class="table-no-first-cell">
    <td>Content two</td>
  </tr>
</table>

Styleguide Tables.Helpers.Rowspan
*/
table tr.table-no-first-cell > td:first-child,
    table tr.table-no-first-cell > th:first-child {
  padding-left: 0.5712em;
}
.table-layout-header-col th:first-child {
  width: 33%;
}
/*
Fixed Layout

Stylesheet: tables

Classes: table-layout-fixed

Use `table-layout-fixed` to force all columns of the table to be equal widths. Be judicious with this, but it can be helpful to make a table appear more centered if the browser gives too much space to a column with wide content.

Markup:
<table class="table table-layout-fixed">
  <tr>
    <td>01</td>
    <td>02</td>
    <td>Column with veeeeeeeeeeeeeeery wide content</td>
  </tr>
</table>

Styleguide Tables.Helpers.Fixed
*/
.table-layout-fixed {
  table-layout: fixed
}
.table-layout-fixed td,
  .table-layout-fixed th {
  overflow: hidden;
}
/*
Force wordbreaking

Stylesheet: tables

Classes: table-wordbreak

Add to a table or an individual cell to force long words or numbers to wrap.

Markup:
<table class="table table-wordbreak">
  <tr><td>The longest English word is pneumonoultramicroscopicsilicovolcanoconiosis</td></tr>
</table>

Wrapper: narrow

Styleguide Tables.Helpers.Wordbreak
*/
.table-wordbreak {
  word-break: break-all;
}
/*
Market Data

Stylesheet: tables

Classes: market-data market-data-date market-data-chart

Markup:
<table class="market-data">
  <thead>
    <tr>
      <td>Futures</td>
      <td>Code</td>
      <td>Month</td>
      <td>Last</td>
      <td>Change</td>
      <td>Intraday</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><a href="#">Brent</a></th>
      <td>B</td>
      <td class="market-data-date">Jun 14</td>
      <td>1861.25</td>
      <td>+2.00</td>
      <td class="market-data-chart"><img src="../images/docs/sparkline.png"/></td>
    </tr>
    <tr>
      <th><a href="#">WTI</a></th>
      <td>B</td>
      <td class="market-data-date">Jun 14</td>
      <td>1861.25</td>
      <td>+2.00</td>
      <td class="market-data-chart"><img src="../images/docs/sparkline.png"/></td>
    </tr>
    <tr>
      <th><a href="#">Russel 2000</a></th>
      <td>RU</td>
      <td class="market-data-date">Jun 14</td>
      <td>1861.25</td>
      <td>+2.00</td>
      <td class="market-data-chart"><img src="../images/docs/sparkline.png"/></td>
    </tr>
    <tr>
      <th><a href="#">Gas oil</a></th>
      <td>GO</td>
      <td class="market-data-date">Jun 14</td>
      <td>1861.25</td>
      <td>+2.00</td>
      <td class="market-data-chart"><img src="../images/docs/sparkline.png"/></td>
    </tr>
  </tbody>
</table>

Styleguide Tables.Special.Market-Data
*/
.market-data {
  width: 100%;
  margin-bottom: 1.5652rem;
  border-bottom: 1px solid hsl(150, 2.3%, 82.7%);
  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: 700
}
.panel-body .market-data {
  width: calc(100% + 2em);
  max-width: none;
  max-width: initial;
  margin-right: -1em;
  margin-left: -1em;
}
.market-data {
  /* & a {
    text-transform: uppercase;
  } */
}
.market-data > thead {
  color: hsl(200, 3.4%, 34.9%);
  background-color: hsl(0, 0%, 96.5%);
}
.market-data > thead > tr > th,
      .market-data > thead > tr > td {
  padding: 0.7em 1em 0.5em;
  font-size: 0.8125rem;
  text-transform: uppercase;
}
.market-data > thead > tr, .market-data > tbody > tr {
  border-top: 1px solid hsl(150, 2.3%, 82.7%);
  border-left: 1px solid transparent;
}
.market-data > thead > tr > th,
      .market-data > thead > tr > td,
      .market-data > tbody > tr > th,
      .market-data > tbody > tr > td {
  line-height: 1.65;
  vertical-align: top;
}
.market-data > tbody > tr > th,
      .market-data > tbody > tr > td {
  padding: 0.85714em 1em;
}
.market-data > tbody > tr:hover,
      .market-data > tbody > tr.is-active {
  border: 1px solid #71c5e8;
}
.market-data > tbody > tr td.market-data-chart {
  padding: 0.5em 1em 0.2em;
  vertical-align: middle;
}
.market-data > tbody > tr {}
.market-data {
  /* prettier-ignore */
}
.market-data.inverse, .market-data.table-inverse, .inverse .market-data {
  color: #fff;
}
.market-data-date {
  color: hsl(200, 3.4%, 34.9%);
  font-size: 0.875em;
  font-weight: 400;
}
@media (max-width: 767px) {
  .market-data > thead > tr > td,
        .market-data > thead > tr > th,
        .market-data > tbody > tr > td,
        .market-data > tbody > tr > th,
        .market-data > tfoot > tr > td,
        .market-data > tfoot > tr > th {
    padding-right: 0.2em;
    padding-left: 0.2em;
  }
}
.market-data-tile-bleed > thead > tr > td:first-child, .market-data-tile-bleed > thead > tr > th:first-child, .market-data-tile-bleed > tbody > tr > td:first-child, .market-data-tile-bleed > tbody > tr > th:first-child, .market-data-tile-bleed > tfoot > tr > td:first-child, .market-data-tile-bleed > tfoot > tr > th:first-child {
  padding-left: 1em;
}
.market-data-tile-bleed > thead > tr > td:last-child, .market-data-tile-bleed > thead > tr > th:last-child, .market-data-tile-bleed > tbody > tr > td:last-child, .market-data-tile-bleed > tbody > tr > th:last-child, .market-data-tile-bleed > tfoot > tr > td:last-child, .market-data-tile-bleed > tfoot > tr > th:last-child {
  padding-right: 1em;
}
@media (min-width: 980px) {
  .market-data-tile-bleed > thead > tr > td:first-child, .market-data-tile-bleed > thead > tr > th:first-child, .market-data-tile-bleed > tbody > tr > td:first-child, .market-data-tile-bleed > tbody > tr > th:first-child, .market-data-tile-bleed > tfoot > tr > td:first-child, .market-data-tile-bleed > tfoot > tr > th:first-child {
    padding-left: 0.8em;
  }
  .market-data-tile-bleed > thead > tr > td:last-child, .market-data-tile-bleed > thead > tr > th:last-child, .market-data-tile-bleed > tbody > tr > td:last-child, .market-data-tile-bleed > tbody > tr > th:last-child, .market-data-tile-bleed > tfoot > tr > td:last-child, .market-data-tile-bleed > tfoot > tr > th:last-child {
    padding-right: 0.8em;
  }
}
/* TODO document or deprecate */
.markets-table {
  width: 100%
}
.markets-table th {
  width: 33%;
  background-color: hsl(180, 2.7%, 92.7%);
}
.markets-table > thead {
  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: 700;
  text-transform: uppercase;
  margin: 0 0 0.4em;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  margin: 0;
  color: hsl(200, 3.4%, 34.9%);
}
.markets-table > thead > tr > th,
      .markets-table > thead > tr > td {
  padding: 0.5em 1em;
  font-weight: 700;
}
.markets-table > tbody > tr {
  border-top: 2px solid hsl(150, 2.3%, 82.7%);
}
.markets-table > tbody > tr:first-child {
  border-color: hsl(200, 3.4%, 34.9%);
}
.markets-table > tbody > tr > th {
  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: 700;
  text-transform: uppercase;
  margin: 0 0 0.4em;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  margin: 0;
  color: hsl(200, 3.4%, 34.9%);
  font-size: 1.25rem;
}
.markets-table > tbody > tr > th,
      .markets-table > tbody > tr > td {
  padding: 0.5em 1em;
}
.markets-table > tbody > tr {}
.markets-table > tfoot > tr > th,
      .markets-table > tfoot > tr > td {
  padding: 1em 0;
}
.markets-table > tfoot > tr > th.markets-table-disclaimer, .markets-table > tfoot > tr > td.markets-table-disclaimer {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.1;
  color: hsl(150, 1.1%, 63.9%);
  line-height: 2;
  text-transform: none;
  text-align: left;
}
.markets-table > tfoot > tr > th.markets-table-key, .markets-table > tfoot > tr > td.markets-table-key {
  color: hsl(345, 6.1%, 12.9%);
  font-size: 0.625em;
  font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
}
.markets-table > tfoot > tr .markets-table-disclaimer {
  padding-right: 1em;
  padding-left: 1em;
}
.asset-class {
  display: inline-block;
  margin: 0 1em;
  vertical-align: top;
}
@media (max-width: 767px) {
  .markets-table {
    display: block
  }
  .markets-table > thead,
    .markets-table > tbody,
    .markets-table > tfoot {
    display: block;
  }
  .markets-table > thead > tr, .markets-table > tbody > tr, .markets-table > tfoot > tr {
    display: block;
  }
  .markets-table > thead > tr > th,
        .markets-table > thead > tr > td,
        .markets-table > tbody > tr > th,
        .markets-table > tbody > tr > td,
        .markets-table > tfoot > tr > th,
        .markets-table > tfoot > tr > td {
    display: block;
    width: 100%;
  }
  .markets-table > thead > tr > td, .markets-table > tbody > tr > td, .markets-table > tfoot > tr > td {
    padding-top: 0.5em;
  }
  .markets-table > tbody > tr > th,
        .markets-table > tbody > tr > td,
        .markets-table > tfoot > tr > th,
        .markets-table > tfoot > tr > td {
    font-weight: 400;
  }
  .markets-table > tfoot {
    border-top: 2px solid hsl(150, 2.3%, 82.7%);
  }

  .asset-class {
    margin: 0 0.5em;
  }
}
@media (min-width: 768px) {
  .markets-table > thead > tr > th,
        .markets-table > thead > tr > td {
    padding: 1rem;
  }
  .markets-table > tbody > tr > th {
    padding: 1.4em 1rem;
  }
  .markets-table > tbody > tr > td {
    padding: 1rem;
  }
  .markets-table > tfoot > tr .markets-table-disclaimer {
    padding-right: 0;
    padding-left: 0;
  }
}