@charset "UTF-8";
ul li::marker {
  color: #007b94;
}

.custom-version__wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 1.5rem;
  padding-right: 3rem;
  -webkit-transition: padding-right 400ms cubic-bezier(0, 0.4, 0.4, 1);
  transition: padding-right 400ms cubic-bezier(0, 0.4, 0.4, 1);
}
.spark-header--collapsed .custom-version__wrapper, .spark-header--condensed .custom-version__wrapper {
  padding-right: 2rem;
}

.spark-header.spark-header--visible.spark-header--extra-styles .spark-menu > .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item > .spark-menu__list,
.spark-header.spark-header--visible.spark-header--extra-styles .spark-menu > .spark-menu__list > .spark-menu__list-item > .spark-menu__list {
  width: 21rem;
}

.spark-component-resource-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 2rem;
}
@media (max-width: 543px) {
  .spark-component-resource-links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.component-resource {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.component-resource:first-child {
  margin-right: 2rem;
}
@media (max-width: 543px) {
  .component-resource:first-child {
    margin-bottom: 1rem;
  }
}
.component-resource a {
  font-size: 1.0833333333rem;
  line-height: 1.08333333rem;
}
.component-resource img,
.component-resource [class^=spark-icon] {
  margin-right: 0.5rem;
}
.component-resource [class^=spark-icon] {
  color: #007b94;
}
@media (max-width: 543px) {
  .component-resource [class^=spark-icon] {
    padding: 0 0.33333333rem;
  }
}
.component-resource img {
  display: inline;
  width: 2rem;
}

#markdown-toc {
  display: none !important;
}

#content {
  margin-left: 0;
  margin-right: 0;
  padding-top: 5rem;
  padding-bottom: 3rem;
  position: relative;
}
#content.landing-page {
  padding-bottom: 0;
}
@media (max-width: 543px) {
  #content {
    padding-top: 4rem;
  }
}
.spark-header-condensed #content {
  padding-top: 4rem;
}
#content .content__main {
  padding-left: 2rem;
  padding-right: 2rem;
  margin-right: -1rem;
}
@media (max-width: 543px) {
  #content .content__main {
    padding-left: 0;
    padding-right: 0;
  }
}
#content .content__sidebar {
  padding-top: 3rem;
  padding-left: 3rem;
  padding-right: 0;
}
#content .content__body {
  margin-top: 2rem;
}

.toc-hover--header {
  position: relative;
}
.toc-hover--header .toc-hover--anchor {
  display: none;
  float: left;
  margin-left: -1.6rem;
  margin-right: 1rem;
  margin-top: -1.5rem;
  padding-right: 2rem;
  position: absolute;
  top: 1.5rem;
}
.toc-hover--header .toc-hover--anchor:hover {
  cursor: pointer;
  display: block;
}
.toc-hover--header:hover {
  cursor: pointer;
}
.toc-hover--header:hover .toc-hover--anchor {
  display: block;
}

.container code:not(.live-code) {
  background-color: #f6f6f7;
  border-radius: 0.5rem;
  color: #404247;
  font-family: "Roboto Mono", monospace;
  font-weight: 400;
  font-size: 1.0833333333rem;
  padding: 0.25rem 1rem;
  word-break: break-word;
}

.highlight .live-example pre {
  background-color: #f6f6f7;
  border-radius: 1rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #404247;
  font-family: "Roboto Mono", monospace;
  font-weight: 400;
  padding: 2rem;
}
.highlight .live-example {
  padding: 0 !important;
}
.highlight .live-example[data-expand-code=false] {
  overflow-y: hidden;
}
.highlight .live-example[data-expand-code=false] pre {
  max-height: 12rem;
  overflow-y: auto;
  white-space: pre;
}
.highlight .live-example[data-expand-code=true] {
  overflow: hidden;
}
.highlight .live-example[data-expand-code=true] pre {
  max-height: none;
  overflow-y: auto;
  white-space: pre;
}

.expand-code-wrapper {
  padding-right: 0;
}
.expand-code-wrapper > .highlight {
  margin-bottom: 1rem;
}
.expand-code-wrapper .spark-tabs__panels + .spark-btn-group {
  padding-left: 2rem;
  padding-right: 2rem;
}
.expand-code-wrapper .highlight + .spark-btn-group {
  padding-left: 0;
  padding-right: 0;
}

.iframeOutput {
  overflow: scroll;
  width: 100%;
}

.new-tab {
  float: right;
}

.full-width-image {
  max-width: 100%;
}

.responsive-image {
  width: 100%;
}

video.responsive-image {
  display: block;
}

.image-width-70 {
  width: 70%;
}

.image-width-80 {
  width: 80%;
}

.image-width-90 {
  width: 90%;
}

@media (max-width: 543px) {
  .responsive-image--lte-xs {
    width: 100%;
  }
}
@media (max-width: 795px) {
  .responsive-image--lte-sm {
    width: 100%;
  }
}
@media (max-width: 1047px) {
  .responsive-image--lte-md {
    width: 100%;
  }
}
.data-vis__row,
.form-templates__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media (max-width: 1047px) {
  .data-vis__item:nth-child(-n+2),
.form-templates__item:nth-child(-n+2) {
    margin-bottom: 2rem;
  }
}
@media (max-width: 543px) {
  .data-vis__item:not(:last-child),
.form-templates__item:not(:last-child) {
    margin-bottom: 2rem;
  }
}

@media (min-width: 1048px) and (max-width: 1170px) {
  .data-vis__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .data-vis__item:nth-child(-n+2) {
    margin-bottom: 2rem;
  }
}

@media (min-width: 796px) {
  .form-templates__item {
    min-width: 24rem;
  }
}
@media (min-width: 1224px) {
  .form-templates__item {
    min-width: 22.08333333rem;
  }
}

.data-vis__item-inner,
.form-templates__item-inner {
  text-align: center;
}

.messages-intro__row-border {
  padding-bottom: 1rem;
}
.messages-intro__row-border::before {
  background: #e1e2e5;
  content: "";
  display: block;
  height: 1px;
  margin: 0 1rem;
  width: 100%;
}
.messages-intro__row-border--last {
  margin-bottom: 4rem;
  position: relative;
}
.messages-intro__row-border--last::after {
  background: #e1e2e5;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  margin: 0 1rem;
  position: absolute;
  width: 100%;
}

.messages-intro__label--check i,
.messages-intro__label--cross i {
  margin-right: 0.5rem;
  vertical-align: baseline;
}

.messages-intro__label--check {
  color: #008247;
}

.messages-intro__label--cross {
  color: #d13630;
}

.messages-intro__hidden-label {
  color: #404247;
}

.spark-header--extra-styles {
  z-index: 900 !important;
}

.spark-skip-nav {
  z-index: 1001 !important;
}

#spark-button-page .spark-btn:not(.spark-pull-right):not([class*=spark-btn-combo]),
#spark-button-page .spark-btn--icon {
  margin-right: 1rem;
}

@media (min-width: 796px) {
  img.video-swap-loaded {
    display: none;
  }
}
.filter-categories-examples li:first-child {
  margin-top: 0;
}

h1 .spark-badge,
h2 .spark-badge,
h3 .spark-badge {
  position: relative;
  top: -0.5rem;
}

h3 .spark-badge--sm {
  position: relative;
  top: -0.25rem;
}

.regular-text-weight {
  font-weight: 400;
}

@media (min-width: 544px) {
  .katana-docs-panel > .spark-panel__content {
    padding: 3rem;
  }
}

@media (min-width: 796px) {
  .katana-docs-primary-message-types > div {
    min-width: 20rem;
  }
}
@media (min-width: 796px) and (max-width: 1119px) {
  .katana-docs-primary-message-types > div:nth-child(-n+2) {
    margin-bottom: 2rem;
  }
}

@media (min-width: 544px) {
  .katana-docs-tabs__nav {
    padding-top: 1rem;
  }
}

@media (min-width: 544px) {
  .katana-docs-tabs__list {
    padding-left: 3rem;
  }
}

@media (min-width: 544px) {
  .katana-docs-tabs__list::after {
    left: 3rem;
    width: calc(100% - 3rem);
  }
}

@media (min-width: 544px) {
  .katana-docs-tabs__panel {
    padding: 3rem;
  }
}

@media (max-width: 375px) {
  #spark-time-selector-page .spark-time-range-slider__input-divider {
    display: none;
  }
  #spark-time-selector-page .spark-time-range-slider .spark-time {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
  #spark-time-selector-page .spark-time-range-slider .spark-time:nth-child(2) {
    margin-bottom: 1rem;
  }
}
.landing-hero {
  background: linear-gradient(45deg, #003543, #002530);
  padding: 2rem 3rem 6rem;
}
@media (max-width: 543px) {
  .landing-hero {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.landing-hero .row {
  margin-left: auto;
  margin-right: auto;
  max-width: 1368px;
  padding-left: 1rem;
  padding-right: 1rem;
}
.landing-hero h1,
.landing-hero p {
  margin-left: auto;
  margin-right: auto;
  max-width: 1368px;
  color: #fff;
}

.landing-content {
  margin: -4rem auto 0;
  max-width: 1440px;
  padding-left: 3rem;
  padding-right: 3rem;
}
@media (max-width: 543px) {
  .landing-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.landing-content > .spark-panel:not(:last-child) {
  margin-bottom: 2rem;
}

.landing-page--content-list {
  margin-left: -2rem;
  margin-right: -2rem;
}
@media (min-width: 796px) {
  .landing-page--content-list .content-list__inner-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.landing-page--content-list .content-list__inner-wrapper:not(:last-child) {
  border-bottom: 1px solid #e1e2e5;
}
.landing-page--content-list .content-list__inner-wrapper:first-of-type {
  border-bottom: 2px solid #e1e2e5;
}
.landing-page--content-list .content-list__inner-wrapper:first-of-type dt,
.landing-page--content-list .content-list__inner-wrapper:first-of-type dd {
  color: #6d7178;
  font-weight: 700;
  text-transform: uppercase;
}
@media (max-width: 795px) {
  .landing-page--content-list .content-list__inner-wrapper:first-of-type dt,
.landing-page--content-list .content-list__inner-wrapper:first-of-type dd {
    display: none;
  }
}
.landing-page--content-list dt {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
}
@media (max-width: 795px) {
  .landing-page--content-list dt {
    font-size: 1.66666667rem;
  }
}
@media (min-width: 796px) and (max-width: 1047px) {
  .landing-page--content-list dt {
    width: 18rem;
  }
}
@media (min-width: 796px) {
  .landing-page--content-list dt {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-bottom: 1rem;
  }
}
@media (min-width: 1048px) {
  .landing-page--content-list dt {
    width: 24rem;
  }
}
.landing-page--content-list dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  padding-bottom: 1rem;
  padding-top: 1rem;
}
@media (max-width: 795px) {
  .landing-page--content-list dd {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.landing-page--content-list .component__description {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  padding-right: 2rem;
}
@media (max-width: 795px) {
  .landing-page--content-list .component__description {
    padding-bottom: 1rem;
    padding-right: 0;
  }
}
.landing-page--content-list .asset-availability {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (min-width: 796px) {
  .landing-page--content-list .asset-availability {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    text-align: center;
    width: 20rem;
  }
}
.landing-page--content-list .asset-availability .spark-icon {
  vertical-align: baseline;
}
.landing-page--content-list .asset-availability .spark-icon-arrows-update {
  color: #a75f00;
}
.landing-page--content-list .asset-availability .spark-icon-check {
  color: #008247;
}
.landing-page--content-list .asset-availability__html {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}
@media (min-width: 796px) {
  .landing-page--content-list .asset-availability__html {
    width: 10rem;
  }
}
.landing-page--content-list .asset-availability__react {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}
@media (min-width: 796px) {
  .landing-page--content-list .asset-availability__react {
    width: 10rem;
  }
}
.landing-page--content-list .asset-availability__label {
  font-size: 1.0833333333rem;
}
.landing-page--content-list .asset-availability__label.spark-tooltip {
  color: #898e97;
}
.landing-page--content-list .asset-availability__label--in-progress {
  color: #a75f00;
}
.landing-page--content-list .asset-availability__label--unavailable {
  color: #898e97;
}
@media (min-width: 796px) {
  .landing-page--content-list .asset-availability__label--available,
.landing-page--content-list .asset-availability__label--in-progress,
.landing-page--content-list .asset-availability__label--unavailable {
    display: none;
  }
}

@media (max-width: 795px) {
  #code-available--html.active,
#code-unavailable--html.active,
#code-in-progress--html.active,
#code-available--react.active,
#code-unavailable--react.active,
#code-in-progress--react.active {
    display: none;
  }
}

.page--home .landing-hero {
  padding: 4rem 5rem 8rem;
}
@media (max-width: 543px) {
  .page--home .landing-hero {
    padding: 2rem 2rem 6rem;
  }
}
.page--home .landing-hero span,
.page--home .landing-hero a.spark-btn {
  color: #bceaf8;
}
.page--home .landing-hero a.spark-btn:hover {
  color: #85d8ee;
}
.page--home .landing-hero a.spark-btn:focus, .page--home .landing-hero a.spark-btn:focus:hover:active {
  border-color: #bceaf8;
}
.page--home .landing-hero a.spark-btn:active, .page--home .landing-hero a.spark-btn:active:focus .page--home .landing-hero a.spark-btn:active:hover {
  color: #60bdd6;
}
@media (min-width: 544px) {
  .page--home .landing-hero p,
.page--home .whats-new__section-subtitle {
    font-size: 1.66666667rem;
  }
}
.page--home .landing-content {
  padding-left: 5rem;
  padding-right: 5rem;
}
@media (max-width: 543px) {
  .page--home .landing-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 796px) {
  .page--home .hero-banner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
.page--home .featured-sections {
  margin-bottom: 4rem;
}
.page--home .featured-sections .spark-panel,
.page--home .featured-sections .spark-panel__content {
  height: 100%;
}
.page--home .featured-sections .spark-panel__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.page--home .featured-sections .spark-panel__content::after {
  display: none;
}
.page--home .featured-sections ul {
  margin-left: 0;
}
.page--home .featured-sections li {
  line-height: 3rem;
  list-style: none;
  margin: 0;
}
.page--home .featured-sections .foundation-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 2rem;
}
.page--home .featured-sections .foundation-icon svg {
  vertical-align: -1px;
}
.page--home .edl-assets {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 795px) {
  .page--home .edl-assets {
    margin-bottom: 2rem;
  }
}
.page--home .edl-assets > div {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.page--home .edl-assets > div img {
  height: 4rem;
  margin-bottom: 0.5rem;
}
.page--home .featured-sections__link {
  line-height: 0;
}
.page--home .whats-new {
  margin-bottom: 5rem;
  overflow: hidden;
}
@media (max-width: 795px) {
  .page--home .whats-new {
    overflow: visible;
  }
}
.page--home .whats-new .whats-new__carousel-wrapper {
  margin-left: -6rem;
  margin-right: -6rem;
  padding: 0 2.25rem;
}
@media (max-width: 795px) {
  .page--home .whats-new .whats-new__carousel-wrapper {
    margin-left: -5rem;
    margin-right: -5rem;
    padding: 0;
  }
}
.page--home .whats-new .spark-carousel__container-mask {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.page--home .whats-new .spark-carousel__panel {
  width: 23rem;
}
.page--home .whats-new .spark-carousel__item:first-child .spark-carousel__panel {
  margin-left: 5rem;
}
.page--home .whats-new .spark-carousel__item:last-child .spark-carousel__panel {
  margin-right: 5rem;
}
.page--home .whats-new .spark-carousel__item--content img {
  background: #fff;
  border: 1px solid rgba(109, 113, 120, 0.21);
  padding: 6px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 1.5rem;
  -webkit-transform: rotate(-23deg) translate3d(0, 0, 0);
          transform: rotate(-23deg) translate3d(0, 0, 0);
  width: 12rem;
}
.page--home .whats-new .spark-carousel__item--content h3,
.page--home .whats-new .spark-carousel__item--content p {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: antialiased;
}
.page--home .whats-new .spark-carousel__item--content p {
  color: #898e97;
}
.page--home .whats-new .spark-carousel__controls .spark-carousel__back {
  left: 5rem;
}
.page--home .whats-new .spark-carousel__controls .spark-carousel__forward {
  right: 5rem;
}
.page--home figure {
  position: relative;
  z-index: 1;
}
@media (max-width: 795px) {
  .page--home figure {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.page--home blockquote {
  margin-bottom: 1rem;
  margin-left: 0;
  position: relative;
}
@media (min-width: 796px) {
  .page--home blockquote {
    margin-bottom: 2rem;
  }
}
.page--home blockquote p.quotation {
  display: inline;
  font-size: 1.66666667rem;
  font-style: normal;
  padding-left: 0;
  position: relative;
  quotes: "“" "”" "‘" "’";
}
@media (min-width: 796px) {
  .page--home blockquote p.quotation {
    font-size: 2.08333333rem;
    line-height: 3rem;
  }
}
.page--home blockquote p.quotation::before, .page--home blockquote p.quotation::after {
  color: #e1e2e5;
  display: inline;
  font-size: 6.33333333rem;
  height: 6.33333333rem;
  line-height: 1;
  position: absolute;
}
.page--home blockquote p.quotation::before {
  content: open-quote;
  left: -2.25rem;
  top: -1.5rem;
}
.page--home blockquote p.quotation::after {
  content: close-quote;
  padding-top: 0.75rem;
}
@media (min-width: 796px) {
  .page--home blockquote p.quotation::after {
    padding-top: 1.5rem;
  }
}
.page--home blockquote + figcaption {
  font-size: 1.33333333rem;
  line-height: 2rem;
}
@media (min-width: 796px) {
  .page--home blockquote + figcaption {
    font-size: 1.66666667rem;
  }
}

/*
.landing-page {
  .website-notice {
    border: 0;
    background: $white;
  }

  .hero {
    overflow: hidden;
    padding: 5rem;
    position: relative;

    .hero__copy__container {
      @include media-breakpoint-up(lg) {
        margin-bottom: 6rem;
      }
    }

    .hero__copy,
    .hero__imagery {
      &.ready {
        display: block;
      }
    }

    .ready {
      &.hero__imagery,
      .hero__copy__cta,
      .hero__copy__description,
      .hero__copy__title,
      .hero__copy__version {
        animation-fill-mode: both;
        animation-iteration-count: 1;
        animation-name: heroContentSlideUp;
        animation-timing-function: $spark-ease-out;
        opacity: 0;
        transform: translateY(8rem);
      }

      &.hero__imagery {
        animation-duration: 800ms;
      }

      .hero__copy__cta,
      .hero__copy__description,
      .hero__copy__title,
      .hero__copy__version {
        animation-duration: 667ms;
      }

      .hero__copy__cta {
        animation-delay: 200ms;
      }

      .hero__copy__description,
      .hero__copy__title {
        animation-delay: 100ms;
      }
    }

    .hero__copy {
      display: none;

      // Remove extra spacing around inline elements
      line-height: 0;

      @include media-breakpoint-up(md) {
        padding-right: 1rem;
      }

      @include media-breakpoint-down(sm) {
        margin-bottom: 5rem;
        text-align: center;
      }
    }

    .hero__copy__version {
      color: map-get($gray-color-steps, 900);
    }

    .hero__copy__title {
      color: $blue;
      margin-bottom: 0;

      @include media-breakpoint-only(xs) {
        margin-bottom: 1rem;
      }
    }

    .hero__copy__description {
      color: map-get($gray-color-steps, 900);
    }

    .hero__imagery__container {
      @include media-breakpoint-up(lg) {
        z-index: 101;
      }
    }

    .hero__imagery {
      display: none;

      @include media-breakpoint-up(md) {
        padding-left: 1rem;
      }

      @include media-breakpoint-only(sm) {
        margin-left: auto;
        margin-right: auto;
        max-width: 80%;
      }

      img {
        display: block;
        max-width: 100%;
      }

      video {
        display: block;
        width: 100%;
      }
    }

    .hero__imagery--video {
      background: $white;
      border-radius: 0.25rem;
      box-shadow: 0 3px 12px 0 rgba($black, 0.23);
      padding: 2rem;
    }

    .animated-background {
      animation: heroBackgroundSlide 180s linear infinite;
      backface-visibility: visible;
      background-image: url('../../../sabre-spark.s3.amazonaws.com/site_assets/images/homepage/masthead-components.png'), linear-gradient(to bottom, #f0f2f4 0%, #e8ebee 48%, #d8dee5 100%);
      background-position: 0 0;
      background-repeat: repeat-x;
      bottom: 0;
      height: 100%;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;

      // Value that accounts for really wide viewports
      width: 5502px;
      z-index: -1;
    }
  }

  // What's New?
  .whats-new {
    @include media-breakpoint-up(lg) {
      margin-top: -8rem
    }

    &__section {
      background: linear-gradient(to bottom, rgba($black, 0.1) 0, rgba($black, 0) 1rem);
      background-color: $white;
      border-bottom: 1px solid map-get($gray-color-steps, 400);
      position: relative;

      &:nth-child(2) {
        .whats-new__tracker-dot {
          opacity: 0;
        }
      }

      &--intro {
        background: transparent;
        background-color: $white;
        z-index: 100;

        .whats-new__section-wrapper {
          display: block;
          max-width: 100%;

          @include media-breakpoint-up(lg) {
            padding-top: 6rem;
          }
        }
      }

      &.scrolled-to {
        .whats-new__section-content {
          opacity: 1;
        }

        .whats-new__section-imagery {
          opacity: 1;
          transform: translateX(0);
        }
      }

      &.hide-dot {
        .whats-new__tracker-dot {
          transform: scale(2);
          opacity: 0;
        }
      }
    }

    &__section-wrapper {
      display: flex;
      margin: 0 auto;
      max-width: 1440px;
      position: relative;
      width: 100%;
    }

    &__section-content {
      flex: 1 0 auto;
      opacity: 0;
      transition-delay: 0ms;
      transition-duration: 1000ms;
      transition-property: opacity;
      transition-timing-function: $ease-in-out-quint;
    }

    &__section-title {
      margin-bottom: 0;
    }

    &__section-subtitle {
      color: map-get($gray-color-steps, 800);
      font-family: $body__font-family;
    }

    &__section-imagery {
      flex: 1 1 auto;
      max-width: 45rem;
      opacity: 0;
      text-align: center;
      transform: translateX(100%);
      transition-delay: 100ms;
      transition-duration: 1000ms;
      transition-property: opacity, transform;
      transition-timing-function: $ease-in-out-quint;

      .video-swap-loaded {
        display: none;
      }

      img, video {
        height: auto;
        max-width: 100%;
      }
    }

    &__tracker {
      overflow: hidden;
      position: relative;
      -webkit-overflow-scrolling: touch;

      .whats-new__section {
        .whats-new__section-wrapper {
          &::before {
            background-color: map-get($gray-color-steps, 300);
            content: '';
            display: block;
            height: calc(100% + 1px);
            position: absolute;
            top: -1px;
            width: 2px;
          }
        }
      }
    }

    &__tracker-wrapper {
      margin: 0 auto;
      max-width: 1440px;
      position: relative;
      // transform: translate3d(0,0,0);
      width: 100%;
    }

    &__tracker-dot {
      background-color: $white;
      border-color: map-get($gray-color-steps, 300);
      border-style: solid;
      border-radius: 50%;
      display: block;
      opacity: 1;
      transition-duration: 250ms;
      transition-delay: 100ms, 0ms;
      transition-property: opacity, transform;
      position: absolute;
    }

    &__tracker-timeline {
      background-color: map-get($blue-color-steps, 500);
      bottom: 100%;
      box-sizing: content-box;
      overflow: visible !important;
      padding-top: 2rem;
      position: absolute;
      transform: translate3d(0,0,0);
      z-index: 5;

      i {
        background-color: $blue;
        border: 1px solid map-get($blue-color-steps, 400);
        border-radius: 50%;
        bottom: -2px;
        content: '';
        display: block;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
      }

      &.fixed {
        bottom: 50%;
        position: fixed;
      }
    }
  }

  // Feature list
  .features {
    background-color: $white;
    position: relative;
    z-index: 100;

    &__wrapper {
      margin: 0 auto;
    }

    &__item {
      padding: 3rem;
      position: relative;
      text-align: center;

      h3 {
        color: $white;
      }

      p {
        color: #b8cbe5;
      }

      &:last-child {
        &::after {
          display: none;
        }
      }
    }

    &__item--intuitive {
      background-color: #4a5767;
    }

    &__item--engaging {
      background-color: #37414d;
    }

    &__item--personalized {
      background-color: #242b33;
    }

    &__icon {
      margin: 1rem auto;
    }
  }

  // Quote at the bottom of the page
  .quote {
    background-image: url('https://sabre-spark.s3.amazonaws.com/site_assets/images/homepage/homepage-footer-background.svg');
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e4e4e4;
    position: relative;
    z-index: 100;

    &__copy {
      text-align: center;
    }
  }
}

@include media-breakpoint-up(md) {
  .landing-page {
    .quote {
      &__copy-wrapper {
        margin: 0 auto;
        max-width: 60rem;
      }

      &__copy {
        padding: 6rem 1rem;

        p {
          @include fontsize(delta);
          line-height: 3rem;
        }
      }

      &__copy-attribution {
        @include fontsize(49);
        line-height: 5rem;
        margin-bottom: 0;
        margin-top: 2rem;
      }
    }

    // What's New?
    .whats-new {

      &__section-wrapper {
        padding: 3rem;
      }

      &__section-content {
        flex: 1 1 auto;

        h1, h2, h3, h4, h5, h6, ul, ol, p {
          max-width: 40rem;
        }

        .spark-btn {
          margin-top: 1rem;
        }
      }

      &__sm-content {
        display: none;
      }

      &__section-subtitle {
        @include fontsize(epsilon);
        line-height: 2rem;
        margin-bottom: 2rem;
      }

      &__tracker {
        .whats-new__section-wrapper {
          padding-left: 11rem;

          &::before {
            border-right: 1px solid map-get($gray-color-steps, 400);
            left: calc(6.5rem - 1px);
          }
        }
      }

      &__tracker-dot {
        border-width: 3px;
        height: 3rem;
        left: 5rem;
        top: 5rem;
        width: 3rem;
      }

      &__tracker-timeline {
        bottom: calc(100% - 8rem);
        height: 8rem;
        left: calc(6.5rem - 4px);
        width: .6666666667rem;

        i {
          height: 3rem;
          width: 3rem;
        }

        &.fixed {
          bottom: calc(50% - 8rem + 1px);
        }
      }
    }

    .features {
      &__item {
        padding: 6rem 4rem;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .landing-page {
    .whats-new {
      &__section-content {
        flex: 1 0 auto;
      }

      &__section-subtitle {
        @include fontsize(epsilon);
      }

      &__tracker {
        .whats-new__tracker-wrapper,
        .whats-new__section-wrapper {
          padding-left: 14rem;

          &::before {
            left: calc(9.5rem - 1px);
          }
        }
      }

      &__tracker-dot {
        left: 8rem;
      }

      &__tracker-timeline {
        left: calc(9.5rem - 4px);
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  .landing-page {
    .whats-new {
      &__tracker {
        .whats-new__section-wrapper {
          padding-left: 18rem;

          &::before {
            left: calc(13.5rem - 1px);
          }
        }
      }

      &__tracker-dot {
        left: 12rem;
      }

      &__tracker-timeline {
        left: calc(13.5rem - 4px);
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .landing-page {
    .quote {
      &__copy {
        padding: 3rem;

        p {
          @include fontsize(epsilon);
        }
      }

      &__copy-attribution {
        @include fontsize(31);
        line-height: 3rem;
        margin-bottom: 0;
        margin-top: 1rem;
      }
    }

    .whats-new {
      &__section-wrapper {
        max-width: 40rem;
        padding: 2rem 4rem;
        text-align: center;
      }

      &__section-content {
        flex: 1;
        width: 100%;

        img {
          display: block;
          height: auto;
          margin: 1rem auto;
          max-width: 100%;
        }
      }

      &__section-subtitle {
        @include fontsize(epsilon);
        line-height: 2rem;
        margin-bottom: 1rem;
      }

      &__section-imagery {
        display: none;
      }

      &__tracker {
        .whats-new__section-wrapper {
          &::before {
            left: calc(2rem - 1px);
          }
        }
      }

      &__tracker-wrapper {
        max-width: 40rem;
      }

      &__tracker-dot {
        border-width: 2px;
        height: 2rem;
        left: 1rem;
        top: 2rem;
        width: 2rem;
      }

      &__tracker-timeline {
        bottom: calc(100% - 4rem);
        height: 4rem;
        left: calc(2rem - 3px);
        width: .5rem;

        i {
          height: 2rem;
          width: 2rem;
        }

        &.fixed {
          bottom: calc(50% - 4rem + 1px);
        }
      }
    }
  }
}
*/
/********************************/
/***** GETTING STARTED PAGE *****/
/********************************/
/*
* Background styling based off `spark-splash-screen`
* Removed portions that were causing defects, like bottom angle and gradient
* Set a minimum height that should cause a need for scrolling.
*/
#demo-scroll-background {
  background-color: #e50000;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  min-height: 1500px;
  height: 175%;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}

#demo-scroll-background > * {
  position: relative;
  z-index: 5;
}

.shortbody {
  height: 300px !important;
  min-height: 300px !important;
}

.edl-resources-wrapper {
  margin-bottom: 4rem;
}

.edl-resource {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 1047px) {
  .edl-resource:not(:last-child) {
    margin-bottom: 3.5rem;
  }
}
.edl-resource > div {
  margin-bottom: 2rem;
  padding-top: 1rem;
}
.edl-resource h2 {
  text-align: center;
}

.edl-resource__image {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  border-radius: 50%;
  border: 1px solid rgba(109, 113, 120, 0.21);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 18rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto 2rem;
  width: 18rem;
}
.edl-resource__image img {
  display: block;
  height: 9.66666667rem;
  width: 11.33333333rem;
}

@media (min-width: 796px) {
  .additional-information-wrapper {
    margin-bottom: 3rem;
  }
}

@media (max-width: 795px) {
  .additional-information:not(:last-child) {
    margin-bottom: 2rem;
  }
}
@media (min-width: 796px) and (max-width: 1047px) {
  .additional-information:nth-child(-n+2) {
    margin-bottom: 2rem;
  }
}
.additional-information span {
  color: #121315;
  display: block;
  font-size: 1.6666666667rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
}

.banner-image-wrapper img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 75rem;
}

/*
.spark-btn--lg.spark-btn--images {
  font-size: 11rem;
  height: 15rem;
  width: 15rem;
  border: 3px solid #780000;
  border-bottom: 6px solid #780000;

  img{
    height: 6rem;
    margin-top: calc((100% - (11rem - 6rem)) / 2);
  }
  &::before{
    box-shadow: none !important;
  }
  &::after {
    transform: translate(-5%, -8%) rotate(-24deg);
  }

  &.active,
  &:active,
  &.active:hover,
  &:active:hover {
    &::after {
      transform: translate(-70%, -8%) rotate(-24deg);
    }
  }

  &.hover,
  &:hover {
    &::after {
      transform: translate(-10%, -8%) rotate(-24deg);
    }
  }
}

.spark-btn--md.spark-btn--images{
  font-size: 2rem;
  height: 6.75rem;
  width: 6rem;
  border: 2px solid #780000;
  border-bottom: 3px solid #780000;

  img{
    height: 3rem;
    margin-left: -1.5rem;
  }
  &::after {
    transform: translate(-21%, -8%) rotate(-24deg);
  }

  &.active,
  &:active,
  &.active:hover,
  &:active:hover {
    &::after {
      transform: translate(-70%, -8%) rotate(-24deg);
    }
  }

  &.hover,
  &:hover {
    &::after {
      transform: translate(-24%, -8%) rotate(-24deg);
    }
  }
}

.spark-image-icons{
  max-height: 18rem;
}

.border-wrapper .spark-btn{
  box-shadow: 0 0 0 9px #fff, 0 0 0 10px #ccc;
  border-radius: 50%;
  transition: all 0.5s ease-in;
}
*/
.color-guide__color-block-list {
  border-radius: 3px;
  overflow: hidden;
  padding-top: 0;
}
.color-guide__color-block-list .color-guide__color-block {
  font-weight: 500;
  background-color: transparent;
  border-radius: 0;
  margin: 0;
  padding: 2rem 1rem;
}

.color-guide__color-block {
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 50%;
  height: 0;
}
.color-guide__color-block h4 {
  color: white;
  white-space: nowrap;
}
.color-guide__color-block p {
  color: white;
  white-space: nowrap;
}

.color-guide__color-block.color-guide__color-block--sm,
.color-guide__color-block--sm {
  min-height: 25rem;
}

.color-guide__color-block.color-guide__color-block--md,
.color-guide__color-block--md {
  min-height: 15rem;
}

.color_guide__gray-color-scales li {
  min-height: 10rem;
}

.color-guide__color-block--text {
  border: solid thin #ccc;
  background: none;
}

.gray-color-scales {
  display: block;
  width: 100%;
}

.line-gradient__gradient { /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
  background: -webkit-gradient(linear, left top, right top, from(#eee), to(#222));
  background: linear-gradient(to right, #eee, #222);
  width: 100%;
  height: 4rem;
}

.color-guide__color-block-triple-stack .row {
  margin-left: 0;
  margin-right: 0;
}
.color-guide__color-block-triple-stack [class*=color-guide__color-block-triple-stack--] {
  background: black;
  color: white;
  font-weight: 500;
  padding: 1rem;
}
.color-guide__color-block-triple-stack .color-guide__color-block-triple-stack--main {
  border-radius: 3px 3px 0 0;
}
.color-guide__color-block-triple-stack .color-guide__color-block-triple-stack--secondary {
  border-radius: 0 0 0 3px;
}
.color-guide__color-block-triple-stack .color-guide__color-block-triple-stack--secondary:last-child {
  border-radius: 0 0 3px 0;
}

.color-guide__contrast-block {
  color: #fff;
}
.color-guide__contrast-block .contrast-block__heading {
  color: #fff;
}

.icon-container div[class*=col-] {
  margin-bottom: 2rem;
}

.designer-resource-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.designer-resource-cards .card {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.designer-resource-cards .card .card__body {
  min-height: 8rem;
}
@media (max-width: 1799px) {
  .designer-resource-cards .card .card__body {
    min-height: 13rem;
  }
}
@media (min-width: 796px) and (max-width: 1047px) {
  .designer-resource-cards .card .card__body {
    min-height: 17rem;
  }
}
@media (max-width: 795px) {
  .designer-resource-cards .card {
    margin-bottom: 2rem;
  }
  .designer-resource-cards .card .card__body {
    min-height: 8rem;
  }
}
.designer-resource-cards .card .spark-btn {
  font-weight: 700;
}
.designer-resource-cards .card .spark-btn i {
  font-weight: 700;
  margin-top: -3px;
  padding-right: 4px;
}

.ui-index {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.ui-index__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui-index__panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui-index__panel [data-href] {
  cursor: pointer;
}
.ui-index__panel .ui-index__link {
  min-height: 16px;
  position: inherit;
}
.ui-index__panel .spark-panel__masthead .spark-numerals {
  font-size: 1.6666666667rem;
  left: 36px;
  left: 3rem;
  padding-right: 3rem;
}
@media (min-width: 1800px) {
  .ui-index__panel .spark-panel__masthead .spark-numerals {
    font-size: 1.8333333333rem;
  }
}
.ui-index__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.ui-index__body {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
}

.design-index-panel {
  height: 31rem;
}
.design-index-panel .spark-panel__content {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 15rem;
  -webkit-box-shadow: inset 0 100px 46px -6px rgba(0, 0, 0, 0.3);
          box-shadow: inset 0 100px 46px -6px rgba(0, 0, 0, 0.3);
}
.design-index-panel .design-index__heading {
  margin-top: -1rem;
  display: block;
  position: absolute;
  text-align: left;
  color: #fff;
  cursor: pointer;
  padding-right: 1rem;
}
.design-index-panel .design-index__body {
  margin-top: 15rem;
}
@media (min-width: 1048px) and (max-width: 1799px) {
  .design-index-panel {
    height: 38rem;
  }
}
@media (min-width: 796px) and (max-width: 1047px) {
  .design-index-panel {
    height: 35rem;
  }
}
@media (min-width: 544px) and (max-width: 795px) {
  .design-index-panel {
    height: 33rem;
  }
}
@media (max-width: 543px) {
  .design-index-panel {
    height: 33rem;
  }
}

.app-icon-container {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.app-icon-container .icon-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.app-icon-container .app-icon-double-size {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
.app-icon-container .app-icon--256 {
  background: url("../../../sabre-spark.s3.amazonaws.com/site_assets/images/resources/designer_resources/app-icon--256.png") center center no-repeat;
  background-size: 100%;
  max-width: 256px;
  max-height: 256px;
  min-width: 256px;
  min-height: 256px;
}
.app-icon-container .app-icon--144 {
  background: url("../../../sabre-spark.s3.amazonaws.com/site_assets/images/resources/designer_resources/app-icon--144.png") center center no-repeat;
  background-size: 100%;
  max-width: 144px;
  max-height: 144px;
  min-width: 144px;
  min-height: 144px;
}
.app-icon-container .app-icon--128 {
  background: url("../../../sabre-spark.s3.amazonaws.com/site_assets/images/resources/designer_resources/app-icon--128.png") center center no-repeat;
  background-size: 100%;
  max-width: 128px;
  max-height: 128px;
  min-width: 128px;
  min-height: 128px;
}
.app-icon-container .app-icon--48 {
  background: url("../../../sabre-spark.s3.amazonaws.com/site_assets/images/resources/designer_resources/app-icon--48.png") center center no-repeat;
  background-size: 100%;
  max-width: 48px;
  max-height: 48px;
  min-width: 48px;
  min-height: 48px;
}
.app-icon-container .app-icon--32 {
  background: url("../../../sabre-spark.s3.amazonaws.com/site_assets/images/resources/designer_resources/app-icon--32.png") center center no-repeat;
  background-size: 100%;
  max-width: 32px;
  max-height: 32px;
  min-width: 32px;
  min-height: 32px;
}
.app-icon-container .app-icon--16 {
  background: url("../../../sabre-spark.s3.amazonaws.com/site_assets/images/resources/designer_resources/app-icon--16.png") center center no-repeat;
  background-size: 100%;
  max-width: 16px;
  max-height: 16px;
  min-width: 16px;
  min-height: 16px;
}

.anatomy-image {
  max-width: 75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
}

.spark-panel__charts {
  line-height: 4rem;
}
.spark-panel__charts th,
.spark-panel__charts td {
  text-align: center;
}

.layout-example-col {
  background-color: #23826F;
  border: 1px solid #fff;
}

.divisibilty .divisibilty__row {
  border: 0.125rem solid #fff;
  height: 3.4rem;
  margin: 0;
}
.divisibilty .divisibilty__col {
  height: 3.3rem;
}

.alignment .alignment__row {
  margin: 0;
}
.alignment .alignment__col {
  height: 17rem;
  padding: 0;
}

.blue-text {
  color: #99cce5;
}

.dark-blue-text {
  color: #639ABB;
}

.finger__container {
  height: 204px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.finger__container .layout-example-col {
  background-color: #8fbbb2;
}
.finger__container .finger {
  width: 100%;
}

.gutters {
  position: relative;
}
.gutters .col-xs-3 {
  background: #F689AD;
  border-left: 1rem solid #99cce5;
  border-right: 1rem solid #99cce5;
  -webkit-box-shadow: 0 0 0 1px #fff;
          box-shadow: 0 0 0 1px #fff;
  height: 7rem;
  padding: 0;
}
.gutters .col-xs-3.white-border--left {
  border-left-color: #fff;
}
.gutters .col-xs-3.white-border--right {
  border-right-color: #fff;
}
.gutters .brackets::before, .gutters .brackets::after {
  border-style: solid;
  content: "";
  height: 1rem;
  position: absolute;
}
.gutters .brackets::before {
  border-color: #639ABB;
  border-width: 0.125rem 0.125rem 0 0.125rem;
  left: -2.1rem;
  top: -1rem;
  width: 2rem;
}
.gutters .brackets::after {
  border-color: #F689AD;
  border-width: 0 0.125rem 0.125rem 0.125rem;
  bottom: -1rem;
  left: -0.1rem;
  width: 100%;
}

.image-container img {
  width: 100%;
}

.color-guide--key-points dt {
  font-size: 1.6666666667rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  color: #121315;
}
.color-guide--key-points .spark-panel {
  height: 100%;
}
.color-guide--key-points .spark-panel__content {
  padding: 2rem;
}

.color-guide__color-block.color-guide__background--white {
  border: 0.4rem solid #121315;
}
.color-guide__color-block.color-guide__background--white h4,
.color-guide__color-block.color-guide__background--white p {
  color: #121315;
}

.color-guide__usage-guidelines .summary-label {
  font-size: 2.0833333333rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
}

.color-guide__color-block--example {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
.color-guide__color-block--example dt {
  font-size: 1.6666666667rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  color: #121315;
  margin-top: auto;
}
.color-guide__color-block--example dd:first-of-type {
  left: 0;
  position: absolute;
  top: 0;
}
.color-guide__color-block--example dd:last-of-type {
  margin-bottom: auto;
}

.color-guide__color-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-weight: 700;
}
.color-guide__color-list [class*="-60"],
.color-guide__color-list [class*="-70"],
.color-guide__color-list [class*="-80"],
.color-guide__color-list [class*="-90"],
.color-guide__color-list [class*="-100"],
.color-guide__color-list [class*=background--katana-black] {
  color: #fff;
}
.color-guide__color-list ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
  padding: 0;
  width: 20%;
}
.color-guide__color-list ul:last-of-type li {
  margin-right: 0;
}
.color-guide__color-list li {
  color: #121315;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style: none;
  margin: 0 1rem 0 0;
  padding: 0.5rem 1rem;
}
.color-guide__color-list li:first-child {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.color-guide__color-list li:last-child {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.color-guide__color-list .color-guide__color-list--color-label {
  font-size: 2.08333333rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  color: #fff;
  padding: 2rem 1rem;
}

.color-guide--other-example {
  border-radius: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 12rem;
  padding: 2rem;
}

.color-guide--other-example--large-font-label {
  font-size: 2.08333333rem;
  font-weight: 700;
  line-height: 2.5rem;
}

.color-guide--other-example--background-label {
  font-size: 1.08333333rem;
  -webkit-box-flex: 4;
      -ms-flex-positive: 4;
          flex-grow: 4;
}

.color-guide--accessible-examples .color-guide--accessible-example {
  overflow-x: scroll;
  padding-right: 0.25rem;
}
.color-guide--accessible-examples .color-guide--accessible-example .row {
  max-width: 834px;
  min-width: 834px;
}
.color-guide--accessible-examples .color-guide--accessible-example ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
}
.color-guide--accessible-examples .color-guide--accessible-examples--rules li {
  display: list-item;
}
.color-guide--accessible-examples ul {
  margin-bottom: 0;
}
.color-guide--accessible-examples li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.color-guide--accessible-examples li div {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 5rem;
  width: 5rem;
}
.color-guide--accessible-examples [class*=spark-icon-] {
  color: #fff;
  font-size: 2rem;
  margin-left: 0.25rem;
  margin-right: 0.5rem;
  margin-top: -0.25rem;
}
.color-guide--accessible-examples [class*=spark-icon-]::before {
  border-radius: 50%;
  color: #50c680;
}
.color-guide--accessible-examples .passes {
  padding-top: 1rem;
}
.color-guide--accessible-examples .passes::after {
  background-color: #008247;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.color-guide--accessible-examples .passes p {
  white-space: nowrap;
}
.color-guide--accessible-examples .passes [class*=spark-icon-]::before {
  color: #008247;
}
.color-guide--accessible-examples .passes + .passes p,
.color-guide--accessible-examples .passes + .fails p {
  margin-left: 0.5rem;
}
.color-guide--accessible-examples .passes + .passes::after,
.color-guide--accessible-examples .passes + .fails::after {
  left: 1.5rem;
  width: calc(100% - 1rem);
}
.color-guide--accessible-examples .fails {
  padding-top: 1rem;
}
.color-guide--accessible-examples .fails::after {
  background-color: #d13630;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: 0;
  width: calc(100% - 0.5rem);
}
.color-guide--accessible-examples .fails [class*=spark-icon-]::before {
  color: #d13630;
}
.color-guide--accessible-examples .color-guide__background--white {
  border: 1px solid #adb1b8;
}

.color-guide__color-block p {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 1.66666667rem;
  margin-bottom: 0;
  margin-top: auto;
}

.color-guide__color-block p + p {
  margin-top: 0;
  margin-bottom: auto;
}

.color-guide__color-block .color-guide__color-block--example__label {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 2.08333333rem;
}

@media (min-width: 544px) {
  .color-guide__color-block--example {
    min-height: 17rem;
  }
}
@media (max-width: 1170px) {
  .color-guide__color-list .color-guide__color-list--color-label {
    font-size: 1.66666667rem;
  }
}
@media (min-width: 1048px) {
  .color-guide__color-block {
    max-width: 16rem;
    padding: 8rem;
    margin: 0 auto;
  }
}
@media (max-width: 1047px) {
  .color-guide__usage-guidelines {
    margin-left: 0;
  }
  .color-guide__usage-guidelines li {
    list-style: none;
  }
  .color-guide__usage-guidelines li .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}
@media (max-width: 845px) {
  .color-guide__color-block p {
    font-size: 1.66666667rem;
  }
  .color-guide__color-block .color-guide__color-block--example__label {
    font-size: 1.66666667rem;
  }
}
@media (max-width: 795px) {
  #primary-colors {
    font-size: 2.08333333rem;
    line-height: 3rem;
  }
  .color-guide__color-block--example dd:first-of-type {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    position: relative;
  }
  .color-guide__color-block {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    border-radius: 4rem;
    height: auto;
    padding: 2rem;
    width: auto;
  }
}
.color-guide--data-vis--list li {
  list-style: none;
  margin: 0;
  text-align: center;
}

.color-guide__background--sabre-red {
  background-color: #e50000;
}

.color-guide__background--katana-black {
  background-color: #121315;
}

.color-guide__color--katana-black {
  color: #121315;
}

.color-guide__background--white {
  background-color: #fff;
}

[class*="-60"],
[class*="-70"],
[class*="-80"],
[class*="-90"],
[class*="-100"],
[class*=background--katana-black] {
  color: #fff;
}

.color-guide__background--blue-10 {
  background-color: #e9f9ff;
}

.color-guide__color--blue-10 {
  color: #e9f9ff;
}

.color-guide__background--blue-20 {
  background-color: #bceaf8;
}

.color-guide__color--blue-20 {
  color: #bceaf8;
}

.color-guide__background--blue-30 {
  background-color: #85d8ee;
}

.color-guide__color--blue-30 {
  color: #85d8ee;
}

.color-guide__background--blue-40 {
  background-color: #60bdd6;
}

.color-guide__color--blue-40 {
  color: #60bdd6;
}

.color-guide__background--blue-50 {
  background-color: #309ab5;
}

.color-guide__color--blue-50 {
  color: #309ab5;
}

.color-guide__background--blue-60 {
  background-color: #007b94;
}

.color-guide__color--blue-60 {
  color: #007b94;
}

.color-guide__background--blue-70 {
  background-color: #006074;
}

.color-guide__color--blue-70 {
  color: #006074;
}

.color-guide__background--blue-80 {
  background-color: #00495a;
}

.color-guide__color--blue-80 {
  color: #00495a;
}

.color-guide__background--blue-90 {
  background-color: #003543;
}

.color-guide__color--blue-90 {
  color: #003543;
}

.color-guide__background--blue-100 {
  background-color: #002530;
}

.color-guide__color--blue-100 {
  color: #002530;
}

.color-guide__background--green-10 {
  background-color: #dcffe6;
}

.color-guide__color--green-10 {
  color: #dcffe6;
}

.color-guide__background--green-20 {
  background-color: #92f7b6;
}

.color-guide__color--green-20 {
  color: #92f7b6;
}

.color-guide__background--green-30 {
  background-color: #68e398;
}

.color-guide__color--green-30 {
  color: #68e398;
}

.color-guide__background--green-40 {
  background-color: #50c680;
}

.color-guide__color--green-40 {
  color: #50c680;
}

.color-guide__background--green-50 {
  background-color: #2ba160;
}

.color-guide__color--green-50 {
  color: #2ba160;
}

.color-guide__background--green-60 {
  background-color: #008247;
}

.color-guide__color--green-60 {
  color: #008247;
}

.color-guide__background--green-70 {
  background-color: #006539;
}

.color-guide__color--green-70 {
  color: #006539;
}

.color-guide__background--green-80 {
  background-color: #004d2b;
}

.color-guide__color--green-80 {
  color: #004d2b;
}

.color-guide__background--green-90 {
  background-color: #003920;
}

.color-guide__color--green-90 {
  color: #003920;
}

.color-guide__background--green-100 {
  background-color: #002815;
}

.color-guide__color--green-100 {
  color: #002815;
}

.color-guide__background--yellow-10 {
  background-color: #fff7d4;
}

.color-guide__color--yellow-10 {
  color: #fff7d4;
}

.color-guide__background--yellow-20 {
  background-color: #f9e466;
}

.color-guide__color--yellow-20 {
  color: #f9e466;
}

.color-guide__background--yellow-30 {
  background-color: #e7cc00;
}

.color-guide__color--yellow-30 {
  color: #e7cc00;
}

.color-guide__background--yellow-40 {
  background-color: #d1ad00;
}

.color-guide__color--yellow-40 {
  color: #d1ad00;
}

.color-guide__background--yellow-50 {
  background-color: #b98500;
}

.color-guide__color--yellow-50 {
  color: #b98500;
}

.color-guide__background--yellow-60 {
  background-color: #a75f00;
}

.color-guide__color--yellow-60 {
  color: #a75f00;
}

.color-guide__background--yellow-70 {
  background-color: #943c00;
}

.color-guide__color--yellow-70 {
  color: #943c00;
}

.color-guide__background--yellow-80 {
  background-color: #7c2200;
}

.color-guide__color--yellow-80 {
  color: #7c2200;
}

.color-guide__background--yellow-90 {
  background-color: #611200;
}

.color-guide__color--yellow-90 {
  color: #611200;
}

.color-guide__background--yellow-100 {
  background-color: #470a00;
}

.color-guide__color--yellow-100 {
  color: #470a00;
}

.color-guide__background--red-10 {
  background-color: #fff4f1;
}

.color-guide__color--red-10 {
  color: #fff4f1;
}

.color-guide__background--red-20 {
  background-color: #ffdad3;
}

.color-guide__color--red-20 {
  color: #ffdad3;
}

.color-guide__background--red-30 {
  background-color: #ffbcb0;
}

.color-guide__color--red-30 {
  color: #ffbcb0;
}

.color-guide__background--red-40 {
  background-color: #fd9484;
}

.color-guide__color--red-40 {
  color: #fd9484;
}

.color-guide__background--red-50 {
  background-color: #f35a4b;
}

.color-guide__color--red-50 {
  color: #f35a4b;
}

.color-guide__background--red-60 {
  background-color: #d13630;
}

.color-guide__color--red-60 {
  color: #d13630;
}

.color-guide__background--red-70 {
  background-color: #ad1717;
}

.color-guide__color--red-70 {
  color: #ad1717;
}

.color-guide__background--red-80 {
  background-color: #8b0000;
}

.color-guide__color--red-80 {
  color: #8b0000;
}

.color-guide__background--red-90 {
  background-color: #690000;
}

.color-guide__color--red-90 {
  color: #690000;
}

.color-guide__background--red-100 {
  background-color: #4d0000;
}

.color-guide__color--red-100 {
  color: #4d0000;
}

.color-guide__background--gray-10 {
  background-color: #f6f6f7;
}

.color-guide__color--gray-10 {
  color: #f6f6f7;
}

.color-guide__background--gray-20 {
  background-color: #e1e2e5;
}

.color-guide__color--gray-20 {
  color: #e1e2e5;
}

.color-guide__background--gray-30 {
  background-color: #caccd1;
}

.color-guide__color--gray-30 {
  color: #caccd1;
}

.color-guide__background--gray-40 {
  background-color: #adb1b8;
}

.color-guide__color--gray-40 {
  color: #adb1b8;
}

.color-guide__background--gray-50 {
  background-color: #898e97;
}

.color-guide__color--gray-50 {
  color: #898e97;
}

.color-guide__background--gray-60 {
  background-color: #6d7178;
}

.color-guide__color--gray-60 {
  color: #6d7178;
}

.color-guide__background--gray-70 {
  background-color: #54575d;
}

.color-guide__color--gray-70 {
  color: #54575d;
}

.color-guide__background--gray-80 {
  background-color: #404247;
}

.color-guide__color--gray-80 {
  color: #404247;
}

.color-guide__background--gray-90 {
  background-color: #2e3034;
}

.color-guide__color--gray-90 {
  color: #2e3034;
}

.color-guide__background--gray-100 {
  background-color: #202224;
}

.color-guide__color--gray-100 {
  color: #202224;
}

.layout-guidelines__reasons .spark-panel {
  height: calc(100% - 4rem);
}
.layout-guidelines__reasons .spark-panel__content {
  height: 100%;
  padding: 0;
}
.layout-guidelines__reasons ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  margin: 0;
}
.layout-guidelines__reasons li:first-child {
  padding-top: 2.5rem;
}
.layout-guidelines__reasons li {
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  border-bottom: 1px solid #e1e2e5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  list-style: none;
  margin: 0;
  padding: 2rem;
}
.layout-guidelines__reasons li:last-child {
  border-bottom: 0;
}
.layout-guidelines__reasons svg {
  margin-right: 2rem;
  min-width: 38px;
}

.layout-guidelines__conversion-chart .spark-table__scroll {
  margin-bottom: 0;
}

.layout-guidelines__applying-units .image-container {
  max-width: 12rem;
  margin: 0 auto;
}

@media (max-width: 1047px) {
  .layout-guidelines__reasons li:first-child {
    padding-top: 2rem;
  }
  .layout-guidelines__reasons .spark-panel {
    height: auto;
  }
}
@media (max-width: 795px) {
  .layout-guidelines__conversion-chart .spark-table__scroll {
    border-radius: 1rem;
    -webkit-box-shadow: 0 1px 12px 0 rgba(18, 19, 21, 0.08);
            box-shadow: 0 1px 12px 0 rgba(18, 19, 21, 0.08);
  }
}
@media (min-width: 796px) {
  .ai-card {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.ai-card__image {
  display: block;
  -ms-flex-preferred-size: 8rem;
      flex-basis: 8rem;
  margin-bottom: 2rem;
}
@media (min-width: 796px) {
  .ai-card__image {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-bottom: 0;
  }
}
.ai-card__image img {
  border-radius: 1rem;
  -webkit-box-shadow: 0 0 0 1px #e1e2e5;
          box-shadow: 0 0 0 1px #e1e2e5;
  display: block;
  margin: 0 auto;
  width: 8rem;
}
.ai-card__details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
@media (max-width: 1047px) {
  .ai-card__details {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (min-width: 796px) {
  .ai-card__details {
    padding-left: 2rem;
  }
}
@media (max-width: 1047px) {
  .ai-card__description {
    margin-bottom: 2rem;
  }
}
@media (min-width: 1048px) {
  .ai-card__description {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    padding-right: 1rem;
    width: 100%;
  }
}
@media (min-width: 1440px) {
  .ai-card__description {
    padding-right: 0;
  }
}

.color-splash {
  background-image: linear-gradient(225deg, #002530 0%, #003543 100%);
}

.data-viz-guiding-principles {
  border-radius: 1rem;
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 2rem;
}
@media (min-width: 544px) {
  .data-viz-guiding-principles {
    margin-left: -3rem;
    margin-right: -3rem;
  }
}
.data-viz-guiding-principles p {
  color: #bceaf8;
}

.data-viz-guiding-principles__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.principle-marker {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-bottom: 1rem;
  padding-right: 2rem;
}
.principle-marker span {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  border-radius: 50%;
  color: #007b94;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 2.0833333333rem;
  height: 4rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  width: 4rem;
}

.principle-title h3 {
  color: #fff;
}

@media (min-width: 1048px) {
  .data-viz-recommendations {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
.data-viz-recommendations .spark-panel:nth-child(-n+2) {
  margin-bottom: 2rem;
}
@media (max-width: 1047px) {
  .data-viz-recommendations .spark-panel:nth-child(n+2) {
    margin-bottom: 2rem;
  }
}
@media (min-width: 1048px) {
  .data-viz-recommendations .spark-panel {
    -ms-flex-preferred-size: calc(50% - 1rem);
        flex-basis: calc(50% - 1rem);
  }
}
@media (min-width: 1048px) {
  .data-viz-recommendations .spark-panel:nth-child(2n) {
    margin-left: 2rem;
  }
}
@media (min-width: 544px) {
  .data-viz-recommendations .spark-panel__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.data-viz-recommendations .recommendation-text {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
@media (min-width: 544px) {
  .data-viz-recommendations .recommendation-text {
    padding-right: 2rem;
  }
}
.data-viz-recommendations .recommendation-icon {
  display: none;
}
@media (min-width: 544px) {
  .data-viz-recommendations .recommendation-icon {
    display: block;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

.data-viz-palette {
  margin-bottom: 4rem;
  overflow-x: scroll;
}

.palette-header {
  -ms-flex-preferred-size: 12rem;
      flex-basis: 12rem;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 2rem;
}

.palette-header__color-block {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 12rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 12rem;
}

.palette-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-top: 2rem;
  position: relative;
}
.palette-content::before {
  border-radius: 1rem;
  content: "";
  height: 1rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.palette-content ul {
  background-image: linear-gradient(225deg, #e1e2e5 0%, #f6f6f7 100%);
  border-radius: 1rem;
  margin: 0 1rem 0 0;
  width: 6.33333333rem;
}
.palette-content ul:last-child {
  margin-right: 0;
}
.palette-content li {
  font-size: 1.0833333333rem;
  line-height: 3rem;
  list-style: none;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}
.palette-content li:first-child {
  border-radius: 1rem 1rem 0 0;
}
.palette-content li:last-child {
  border-radius: 0 0 1rem 1rem;
}
.palette-content .display-color--black {
  color: #121315;
}
.palette-content .display-color--white {
  color: #fff;
}
.palette-content .display-background--transparent {
  background-color: transparent;
  color: #121315;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 2.0833333333rem;
  line-height: 3rem;
}

.palette-header__color-block p {
  margin: 0;
  text-align: center;
}
.palette-header__color-block p:nth-child(1) {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 2.0833333333rem;
  line-height: 3rem;
}
.palette-header__color-block p:nth-child(2) {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 1.6666666667rem;
  line-height: 2rem;
  text-transform: uppercase;
}
.palette-header__color-block p:nth-child(3) {
  font-size: 1.0833333333rem;
}

.data-viz-palette__sequential,
.data-viz-palette__multi-hue-sequential,
.data-viz-palette__divergent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.data-viz-palette__sequential--teal .palette-content::before {
  background: -webkit-gradient(linear, left top, right top, from(rgb(188, 234, 248)), color-stop(12%, rgb(142, 217, 238)), color-stop(24%, rgb(105, 195, 219)), color-stop(36%, rgb(66, 167, 193)), color-stop(48%, rgb(25, 139, 165)), color-stop(60%, rgb(2, 113, 136)), color-stop(72%, rgb(0, 91, 110)), color-stop(84%, rgb(0, 71, 87)), to(rgb(0, 53, 67)));
  background: linear-gradient(90deg, rgb(188, 234, 248) 0%, rgb(142, 217, 238) 12%, rgb(105, 195, 219) 24%, rgb(66, 167, 193) 36%, rgb(25, 139, 165) 48%, rgb(2, 113, 136) 60%, rgb(0, 91, 110) 72%, rgb(0, 71, 87) 84%, rgb(0, 53, 67) 100%);
}
.data-viz-palette__sequential--purple .palette-content::before {
  background: -webkit-gradient(linear, left top, right top, from(rgb(229, 223, 248)), color-stop(12%, rgb(211, 200, 243)), color-stop(24%, rgb(190, 174, 238)), color-stop(36%, rgb(169, 145, 231)), color-stop(48%, rgb(145, 110, 222)), color-stop(60%, rgb(121, 76, 205)), color-stop(72%, rgb(99, 54, 177)), color-stop(84%, rgb(78, 40, 143)), to(rgb(59, 29, 111)));
  background: linear-gradient(90deg, rgb(229, 223, 248) 0%, rgb(211, 200, 243) 12%, rgb(190, 174, 238) 24%, rgb(169, 145, 231) 36%, rgb(145, 110, 222) 48%, rgb(121, 76, 205) 60%, rgb(99, 54, 177) 72%, rgb(78, 40, 143) 84%, rgb(59, 29, 111) 100%);
}
.data-viz-palette__sequential--blue .palette-content::before {
  background: -webkit-gradient(linear, left top, right top, from(rgb(206, 229, 255)), color-stop(12%, rgb(169, 210, 255)), color-stop(24%, rgb(126, 187, 255)), color-stop(36%, rgb(79, 161, 254)), color-stop(48%, rgb(43, 130, 236)), color-stop(60%, rgb(18, 100, 204)), color-stop(72%, rgb(2, 79, 170)), color-stop(84%, rgb(0, 61, 136)), to(rgb(0, 46, 105)));
  background: linear-gradient(90deg, rgb(206, 229, 255) 0%, rgb(169, 210, 255) 12%, rgb(126, 187, 255) 24%, rgb(79, 161, 254) 36%, rgb(43, 130, 236) 48%, rgb(18, 100, 204) 60%, rgb(2, 79, 170) 72%, rgb(0, 61, 136) 84%, rgb(0, 46, 105) 100%);
}
.data-viz-palette__sequential .palette-header__color-block {
  color: #fff;
}
.data-viz-palette__sequential .palette-header__color-block--teal {
  background-color: #007b94;
}
.data-viz-palette__sequential .palette-header__color-block--purple {
  background-color: #8256d8;
}
.data-viz-palette__sequential .palette-header__color-block--blue {
  background-color: #1d6edb;
}

.data-viz-palette__multi-hue-sequential--viridis .palette-content::before {
  background: -webkit-gradient(linear, left top, right top, from(rgb(76, 0, 87)), color-stop(10%, rgb(71, 33, 116)), color-stop(20%, rgb(67, 64, 135)), color-stop(30%, rgb(64, 92, 142)), color-stop(40%, rgb(65, 118, 143)), color-stop(50%, rgb(71, 143, 140)), color-stop(60%, rgb(82, 167, 128)), color-stop(70%, rgb(106, 190, 102)), color-stop(80%, rgb(144, 209, 53)), color-stop(90%, rgb(195, 222, 26)), to(rgb(252, 230, 64)));
  background: linear-gradient(90deg, rgb(76, 0, 87) 0%, rgb(71, 33, 116) 10%, rgb(67, 64, 135) 20%, rgb(64, 92, 142) 30%, rgb(65, 118, 143) 40%, rgb(71, 143, 140) 50%, rgb(82, 167, 128) 60%, rgb(106, 190, 102) 70%, rgb(144, 209, 53) 80%, rgb(195, 222, 26) 90%, rgb(252, 230, 64) 100%);
}
.data-viz-palette__multi-hue-sequential--inferno .palette-content::before {
  background: -webkit-gradient(linear, left top, right top, from(rgb(0, 0, 4)), color-stop(10%, rgb(30, 9, 67)), color-stop(20%, rgb(62, 12, 102)), color-stop(30%, rgb(98, 21, 109)), color-stop(40%, rgb(136, 39, 101)), color-stop(50%, rgb(172, 61, 80)), color-stop(60%, rgb(202, 88, 48)), color-stop(70%, rgb(225, 125, 17)), color-stop(80%, rgb(237, 169, 3)), color-stop(90%, rgb(244, 214, 47)), to(rgb(252, 254, 163)));
  background: linear-gradient(90deg, rgb(0, 0, 4) 0%, rgb(30, 9, 67) 10%, rgb(62, 12, 102) 20%, rgb(98, 21, 109) 30%, rgb(136, 39, 101) 40%, rgb(172, 61, 80) 50%, rgb(202, 88, 48) 60%, rgb(225, 125, 17) 70%, rgb(237, 169, 3) 80%, rgb(244, 214, 47) 90%, rgb(252, 254, 163) 100%);
}
.data-viz-palette__multi-hue-sequential .palette-header__color-block {
  color: #121315;
}
.data-viz-palette__multi-hue-sequential .palette-header__color-block--viridis {
  background: url("https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/data_visualization/katana__viridis-palette.svg") no-repeat 50% 50%;
}
.data-viz-palette__multi-hue-sequential .palette-header__color-block--inferno {
  background: url("https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/data_visualization/katana__inferno-palette.svg") no-repeat 50% 50%;
}

.data-viz-palette__divergent--red-blue .palette-content::before {
  background: -webkit-gradient(linear, left top, right top, from(rgb(105, 0, 0)), color-stop(10%, rgb(173, 30, 28)), color-stop(20%, rgb(233, 89, 76)), color-stop(30%, rgb(252, 150, 136)), color-stop(40%, rgb(253, 211, 204)), color-stop(50%, rgb(241, 239, 242)), color-stop(60%, rgb(197, 224, 254)), color-stop(70%, rgb(120, 184, 255)), color-stop(80%, rgb(56, 144, 243)), color-stop(90%, rgb(12, 93, 187)), to(rgb(0, 46, 105)));
  background: linear-gradient(90deg, rgb(105, 0, 0) 0%, rgb(173, 30, 28) 10%, rgb(233, 89, 76) 20%, rgb(252, 150, 136) 30%, rgb(253, 211, 204) 40%, rgb(241, 239, 242) 50%, rgb(197, 224, 254) 60%, rgb(120, 184, 255) 70%, rgb(56, 144, 243) 80%, rgb(12, 93, 187) 90%, rgb(0, 46, 105) 100%);
}
.data-viz-palette__divergent--red-yellow-blue .palette-content::before {
  background: -webkit-gradient(linear, left top, right top, from(rgb(139, 0, 0)), color-stop(10%, rgb(200, 56, 40)), color-stop(20%, rgb(228, 117, 48)), color-stop(30%, rgb(248, 171, 68)), color-stop(40%, rgb(249, 222, 122)), color-stop(50%, rgb(246, 241, 203)), color-stop(60%, rgb(207, 229, 248)), color-stop(70%, rgb(163, 207, 255)), color-stop(80%, rgb(108, 174, 249)), color-stop(90%, rgb(44, 120, 217)), to(rgb(0, 63, 139)));
  background: linear-gradient(90deg, rgb(139, 0, 0) 0%, rgb(200, 56, 40) 10%, rgb(228, 117, 48) 20%, rgb(248, 171, 68) 30%, rgb(249, 222, 122) 40%, rgb(246, 241, 203) 50%, rgb(207, 229, 248) 60%, rgb(163, 207, 255) 70%, rgb(108, 174, 249) 80%, rgb(44, 120, 217) 90%, rgb(0, 63, 139) 100%);
}
.data-viz-palette__divergent--purple-teal .palette-content::before {
  background: -webkit-gradient(linear, left top, right top, from(rgb(59, 29, 111)), color-stop(10%, rgb(107, 64, 183)), color-stop(20%, rgb(155, 126, 224)), color-stop(30%, rgb(188, 170, 237)), color-stop(40%, rgb(224, 217, 246)), color-stop(50%, rgb(234, 240, 247)), color-stop(60%, rgb(182, 229, 242)), color-stop(70%, rgb(103, 191, 214)), color-stop(80%, rgb(48, 150, 176)), color-stop(90%, rgb(11, 104, 124)), to(rgb(0, 53, 67)));
  background: linear-gradient(90deg, rgb(59, 29, 111) 0%, rgb(107, 64, 183) 10%, rgb(155, 126, 224) 20%, rgb(188, 170, 237) 30%, rgb(224, 217, 246) 40%, rgb(234, 240, 247) 50%, rgb(182, 229, 242) 60%, rgb(103, 191, 214) 70%, rgb(48, 150, 176) 80%, rgb(11, 104, 124) 90%, rgb(0, 53, 67) 100%);
}
.data-viz-palette__divergent .palette-header__color-block {
  color: #121315;
}
.data-viz-palette__divergent .palette-header__color-block p:nth-child(1) {
  line-height: 1;
}
.data-viz-palette__divergent .palette-header__color-block--red-blue {
  background: url("https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/data_visualization/katana__red-blue-palette.svg") no-repeat 50% 50%;
}
.data-viz-palette__divergent .palette-header__color-block--red-yellow-blue {
  background: url("https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/data_visualization/katana__red-yellow-blue-palette.svg") no-repeat 50% 50%;
}
.data-viz-palette__divergent .palette-header__color-block--purple-teal {
  background: url("https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/data_visualization/katana__purple-teal-palette.svg") no-repeat 50% 50%;
}

.data-viz-palette__qualitative .palette-content {
  padding-top: 0;
}
.data-viz-palette__qualitative .palette-content::before {
  display: none;
}
.data-viz-palette__qualitative .palette-content ul {
  background-image: none;
}
.data-viz-palette__qualitative .palette-content li:nth-child(2) {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.component-options .wrap {
  line-height: 2rem;
  min-width: 30rem;
}

.display-background--7ebbff {
  background-color: #7ebbff;
}

.display-background--2b82ec {
  background-color: #2b82ec;
}

.display-background--024faa {
  background-color: #024faa;
}

.display-background--90c5ff {
  background-color: #90c5ff;
}

.display-background--469bfc {
  background-color: #469bfc;
}

.display-background--176ad3 {
  background-color: #176ad3;
}

.display-background--00479c {
  background-color: #00479c;
}

.display-background--9eccff {
  background-color: #9eccff;
}

.display-background--60abff {
  background-color: #60abff;
}

.display-background--2b82ec {
  background-color: #2b82ec;
}

.display-background--0b5cc0 {
  background-color: #0b5cc0;
}

.display-background--004291 {
  background-color: #004291;
}

.display-background--b1d6ff {
  background-color: #b1d6ff;
}

.display-background--7bb9ff {
  background-color: #7bb9ff;
}

.display-background--4097fa {
  background-color: #4097fa;
}

.display-background--1b6ed8 {
  background-color: #1b6ed8;
}

.display-background--0350ac {
  background-color: #0350ac;
}

.display-background--003a81 {
  background-color: #003a81;
}

.display-background--b7d9ff {
  background-color: #b7d9ff;
}

.display-background--89c1ff {
  background-color: #89c1ff;
}

.display-background--54a5fe {
  background-color: #54a5fe;
}

.display-background--2b82ec {
  background-color: #2b82ec;
}

.display-background--1061c8 {
  background-color: #1061c8;
}

.display-background--014aa1 {
  background-color: #014aa1;
}

.display-background--00387c {
  background-color: #00387c;
}

.display-background--c0deff {
  background-color: #c0deff;
}

.display-background--97c9ff {
  background-color: #97c9ff;
}

.display-background--67afff {
  background-color: #67afff;
}

.display-background--3a92f7 {
  background-color: #3a92f7;
}

.display-background--1d71db {
  background-color: #1d71db;
}

.display-background--0657b8 {
  background-color: #0657b8;
}

.display-background--004393 {
  background-color: #004393;
}

.display-background--003373 {
  background-color: #003373;
}

.display-background--cee5ff {
  background-color: #cee5ff;
}

.display-background--a9d2ff {
  background-color: #a9d2ff;
}

.display-background--7ebbff {
  background-color: #7ebbff;
}

.display-background--4fa1fe {
  background-color: #4fa1fe;
}

.display-background--2b82ec {
  background-color: #2b82ec;
}

.display-background--1264cc {
  background-color: #1264cc;
}

.display-background--024faa {
  background-color: #024faa;
}

.display-background--003d88 {
  background-color: #003d88;
}

.display-background--002e69 {
  background-color: #002e69;
}

.display-background--69c3db {
  background-color: #69c3db;
}

.display-background--198ba5 {
  background-color: #198ba5;
}

.display-background--005b6e {
  background-color: #005b6e;
}

.display-background--77cde4 {
  background-color: #77cde4;
}

.display-background--3aa1bc {
  background-color: #3aa1bc;
}

.display-background--04768e {
  background-color: #04768e;
}

.display-background--005265 {
  background-color: #005265;
}

.display-background--83d4ea {
  background-color: #83d4ea;
}

.display-background--51b2cb {
  background-color: #51b2cb;
}

.display-background--198ba5 {
  background-color: #198ba5;
}

.display-background--00697e {
  background-color: #00697e;
}

.display-background--004c5d {
  background-color: #004c5d;
}

.display-background--97ddf0 {
  background-color: #97ddf0;
}

.display-background--66c1d9 {
  background-color: #66c1d9;
}

.display-background--339db7 {
  background-color: #339db7;
}

.display-background--077a92 {
  background-color: #077a92;
}

.display-background--005c70 {
  background-color: #005c70;
}

.display-background--004353 {
  background-color: #004353;
}

.display-background--9ee0f2 {
  background-color: #9ee0f2;
}

.display-background--71c9e1 {
  background-color: #71c9e1;
}

.display-background--47abc5 {
  background-color: #47abc5;
}

.display-background--198ba5 {
  background-color: #198ba5;
}

.display-background--016e85 {
  background-color: #016e85;
}

.display-background--005668 {
  background-color: #005668;
}

.display-background--004050 {
  background-color: #004050;
}

.display-background--ade5f5 {
  background-color: #ade5f5;
}

.display-background--80d2e8 {
  background-color: #80d2e8;
}

.display-background--5ab9d2 {
  background-color: #5ab9d2;
}

.display-background--309ab5 {
  background-color: #309ab5;
}

.display-background--0a7e97 {
  background-color: #0a7e97;
}

.display-background--00657a {
  background-color: #00657a;
}

.display-background--004f61 {
  background-color: #004f61;
}

.display-background--003c4b {
  background-color: #003c4b;
}

.display-background--bceaf8 {
  background-color: #bceaf8;
}

.display-background--8ed9ee {
  background-color: #8ed9ee;
}

.display-background--69c3db {
  background-color: #69c3db;
}

.display-background--42a7c1 {
  background-color: #42a7c1;
}

.display-background--198ba5 {
  background-color: #198ba5;
}

.display-background--027188 {
  background-color: #027188;
}

.display-background--005b6e {
  background-color: #005b6e;
}

.display-background--004757 {
  background-color: #004757;
}

.display-background--003543 {
  background-color: #003543;
}

.display-background--beaeee {
  background-color: #beaeee;
}

.display-background--916ede {
  background-color: #916ede;
}

.display-background--6336b1 {
  background-color: #6336b1;
}

.display-background--c7b9f0 {
  background-color: #c7b9f0;
}

.display-background--a48ae6 {
  background-color: #a48ae6;
}

.display-background--7d51d1 {
  background-color: #7d51d1;
}

.display-background--5a30a4 {
  background-color: #5a30a4;
}

.display-background--cdc1f2 {
  background-color: #cdc1f2;
}

.display-background--b19cea {
  background-color: #b19cea;
}

.display-background--916ede {
  background-color: #916ede;
}

.display-background--7142c4 {
  background-color: #7142c4;
}

.display-background--532c99 {
  background-color: #532c99;
}

.display-background--d7cdf4 {
  background-color: #d7cdf4;
}

.display-background--bdaced {
  background-color: #bdaced;
}

.display-background--a185e5 {
  background-color: #a185e5;
}

.display-background--8157d4 {
  background-color: #8157d4;
}

.display-background--6537b4 {
  background-color: #6537b4;
}

.display-background--4a2689 {
  background-color: #4a2689;
}

.display-background--dad1f5 {
  background-color: #dad1f5;
}

.display-background--c3b5ef {
  background-color: #c3b5ef;
}

.display-background--ab94e8 {
  background-color: #ab94e8;
}

.display-background--916ede {
  background-color: #916ede;
}

.display-background--7648ca {
  background-color: #7648ca;
}

.display-background--5e32a9 {
  background-color: #5e32a9;
}

.display-background--472483 {
  background-color: #472483;
}

.display-background--dfd8f7 {
  background-color: #dfd8f7;
}

.display-background--ccbff1 {
  background-color: #ccbff1;
}

.display-background--b6a3eb {
  background-color: #b6a3eb;
}

.display-background--9f82e4 {
  background-color: #9f82e4;
}

.display-background--855cd7 {
  background-color: #855cd7;
}

.display-background--6d3fc0 {
  background-color: #6d3fc0;
}

.display-background--572e9e {
  background-color: #572e9e;
}

.display-background--42227c {
  background-color: #42227c;
}

.display-background--e5dff8 {
  background-color: #e5dff8;
}

.display-background--d3c8f3 {
  background-color: #d3c8f3;
}

.display-background--beaeee {
  background-color: #beaeee;
}

.display-background--a991e7 {
  background-color: #a991e7;
}

.display-background--916ede {
  background-color: #916ede;
}

.display-background--794ccd {
  background-color: #794ccd;
}

.display-background--6336b1 {
  background-color: #6336b1;
}

.display-background--4e288f {
  background-color: #4e288f;
}

.display-background--3b1d6f {
  background-color: #3b1d6f;
}

.display-background--4c0057 {
  background-color: #4c0057;
}

.display-background--478f8c {
  background-color: #478f8c;
}

.display-background--fce640 {
  background-color: #fce640;
}

.display-background--4c0057 {
  background-color: #4c0057;
}

.display-background--40648f {
  background-color: #40648f;
}

.display-background--60b671 {
  background-color: #60b671;
}

.display-background--fce640 {
  background-color: #fce640;
}

.display-background--4c0057 {
  background-color: #4c0057;
}

.display-background--414e8c {
  background-color: #414e8c;
}

.display-background--478f8c {
  background-color: #478f8c;
}

.display-background--7bc851 {
  background-color: #7bc851;
}

.display-background--fce640 {
  background-color: #fce640;
}

.display-background--4c0057 {
  background-color: #4c0057;
}

.display-background--434087 {
  background-color: #434087;
}

.display-background--41768f {
  background-color: #41768f;
}

.display-background--52a780 {
  background-color: #52a780;
}

.display-background--90d135 {
  background-color: #90d135;
}

.display-background--fce640 {
  background-color: #fce640;
}

.display-background--4c0057 {
  background-color: #4c0057;
}

.display-background--443582 {
  background-color: #443582;
}

.display-background--40648f {
  background-color: #40648f;
}

.display-background--478f8c {
  background-color: #478f8c;
}

.display-background--60b671 {
  background-color: #60b671;
}

.display-background--a0d625 {
  background-color: #a0d625;
}

.display-background--fce640 {
  background-color: #fce640;
}

.display-background--4c0057 {
  background-color: #4c0057;
}

.display-background--452d7d {
  background-color: #452d7d;
}

.display-background--41568d {
  background-color: #41568d;
}

.display-background--427b8f {
  background-color: #427b8f;
}

.display-background--4d9e86 {
  background-color: #4d9e86;
}

.display-background--6dc062 {
  background-color: #6dc062;
}

.display-background--a9d91f {
  background-color: #a9d91f;
}

.display-background--fce640 {
  background-color: #fce640;
}

.display-background--4c0057 {
  background-color: #4c0057;
}

.display-background--46297a {
  background-color: #46297a;
}

.display-background--414e8c {
  background-color: #414e8c;
}

.display-background--416f8f {
  background-color: #416f8f;
}

.display-background--478f8c {
  background-color: #478f8c;
}

.display-background--57ad7b {
  background-color: #57ad7b;
}

.display-background--7bc851 {
  background-color: #7bc851;
}

.display-background--b6dc1a {
  background-color: #b6dc1a;
}

.display-background--fce640 {
  background-color: #fce640;
}

.display-background--4c0057 {
  background-color: #4c0057;
}

.display-background--462477 {
  background-color: #462477;
}

.display-background--424589 {
  background-color: #424589;
}

.display-background--40638f {
  background-color: #40638f;
}

.display-background--43808f {
  background-color: #43808f;
}

.display-background--4c9b87 {
  background-color: #4c9b87;
}

.display-background--5fb573 {
  background-color: #5fb573;
}

.display-background--83cc46 {
  background-color: #83cc46;
}

.display-background--b9dc19 {
  background-color: #b9dc19;
}

.display-background--fce640 {
  background-color: #fce640;
}

.display-background--4c0057 {
  background-color: #4c0057;
}

.display-background--472174 {
  background-color: #472174;
}

.display-background--434087 {
  background-color: #434087;
}

.display-background--405c8e {
  background-color: #405c8e;
}

.display-background--41768f {
  background-color: #41768f;
}

.display-background--478f8c {
  background-color: #478f8c;
}

.display-background--52a780 {
  background-color: #52a780;
}

.display-background--6abe66 {
  background-color: #6abe66;
}

.display-background--90d135 {
  background-color: #90d135;
}

.display-background--c3de1a {
  background-color: #c3de1a;
}

.display-background--fce640 {
  background-color: #fce640;
}

.display-background--000004 {
  background-color: #000004;
}

.display-background--ac3d50 {
  background-color: #ac3d50;
}

.display-background--fcfea3 {
  background-color: #fcfea3;
}

.display-background--000004 {
  background-color: #000004;
}

.display-background--6e1a6c {
  background-color: #6e1a6c;
}

.display-background--da701a {
  background-color: #da701a;
}

.display-background--fcfea3 {
  background-color: #fcfea3;
}

.display-background--000004 {
  background-color: #000004;
}

.display-background--500f6c {
  background-color: #500f6c;
}

.display-background--ac3d50 {
  background-color: #ac3d50;
}

.display-background--e89306 {
  background-color: #e89306;
}

.display-background--fcfea3 {
  background-color: #fcfea3;
}

.display-background--000004 {
  background-color: #000004;
}

.display-background--3e0c66 {
  background-color: #3e0c66;
}

.display-background--882765 {
  background-color: #882765;
}

.display-background--ca5830 {
  background-color: #ca5830;
}

.display-background--eda903 {
  background-color: #eda903;
}

.display-background--fcfea3 {
  background-color: #fcfea3;
}

.display-background--000004 {
  background-color: #000004;
}

.display-background--330b5e {
  background-color: #330b5e;
}

.display-background--6e1a6c {
  background-color: #6e1a6c;
}

.display-background--ac3d50 {
  background-color: #ac3d50;
}

.display-background--da701a {
  background-color: #da701a;
}

.display-background--efb808 {
  background-color: #efb808;
}

.display-background--fcfea3 {
  background-color: #fcfea3;
}

.display-background--000004 {
  background-color: #000004;
}

.display-background--2b0b55 {
  background-color: #2b0b55;
}

.display-background--5b126d {
  background-color: #5b126d;
}

.display-background--8f2b62 {
  background-color: #8f2b62;
}

.display-background--bf4c3d {
  background-color: #bf4c3d;
}

.display-background--e2810e {
  background-color: #e2810e;
}

.display-background--f0c00e {
  background-color: #f0c00e;
}

.display-background--fcfea3 {
  background-color: #fcfea3;
}

.display-background--000004 {
  background-color: #000004;
}

.display-background--260a4f {
  background-color: #260a4f;
}

.display-background--500f6c {
  background-color: #500f6c;
}

.display-background--7e2269 {
  background-color: #7e2269;
}

.display-background--ac3d50 {
  background-color: #ac3d50;
}

.display-background--d16127 {
  background-color: #d16127;
}

.display-background--e89306 {
  background-color: #e89306;
}

.display-background--f2cb1b {
  background-color: #f2cb1b;
}

.display-background--fcfea3 {
  background-color: #fcfea3;
}

.display-background--000004 {
  background-color: #000004;
}

.display-background--210a48 {
  background-color: #210a48;
}

.display-background--450d69 {
  background-color: #450d69;
}

.display-background--6d1a6c {
  background-color: #6d1a6c;
}

.display-background--972f5e {
  background-color: #972f5e;
}

.display-background--bc4a40 {
  background-color: #bc4a40;
}

.display-background--d96d1c {
  background-color: #d96d1c;
}

.display-background--ea9b04 {
  background-color: #ea9b04;
}

.display-background--f2cd1f {
  background-color: #f2cd1f;
}

.display-background--fcfea3 {
  background-color: #fcfea3;
}

.display-background--000004 {
  background-color: #000004;
}

.display-background--1e0943 {
  background-color: #1e0943;
}

.display-background--3e0c66 {
  background-color: #3e0c66;
}

.display-background--62156d {
  background-color: #62156d;
}

.display-background--882765 {
  background-color: #882765;
}

.display-background--ac3d50 {
  background-color: #ac3d50;
}

.display-background--ca5830 {
  background-color: #ca5830;
}

.display-background--e17d11 {
  background-color: #e17d11;
}

.display-background--eda903 {
  background-color: #eda903;
}

.display-background--f4d62f {
  background-color: #f4d62f;
}

.display-background--fcfea3 {
  background-color: #fcfea3;
}

.display-background--f77768 {
  background-color: #f77768;
}

.display-background--f1eff2 {
  background-color: #f1eff2;
}

.display-background--56a5fd {
  background-color: #56a5fd;
}

.display-background--d53f37 {
  background-color: #d53f37;
}

.display-background--fda99d {
  background-color: #fda99d;
}

.display-background--8fc4ff {
  background-color: #8fc4ff;
}

.display-background--227ade {
  background-color: #227ade;
}

.display-background--d53f37 {
  background-color: #d53f37;
}

.display-background--fda99d {
  background-color: #fda99d;
}

.display-background--f1eff2 {
  background-color: #f1eff2;
}

.display-background--8fc4ff {
  background-color: #8fc4ff;
}

.display-background--227ade {
  background-color: #227ade;
}

.display-background--c8332d {
  background-color: #c8332d;
}

.display-background--f87f70 {
  background-color: #f87f70;
}

.display-background--feccc4 {
  background-color: #feccc4;
}

.display-background--add4ff {
  background-color: #add4ff;
}

.display-background--52a3fd {
  background-color: #52a3fd;
}

.display-background--1063c3 {
  background-color: #1063c3;
}

.display-background--c8332d {
  background-color: #c8332d;
}

.display-background--f87f70 {
  background-color: #f87f70;
}

.display-background--feccc4 {
  background-color: #feccc4;
}

.display-background--eeeff4 {
  background-color: #eeeff4;
}

.display-background--add4ff {
  background-color: #add4ff;
}

.display-background--52a3fd {
  background-color: #52a3fd;
}

.display-background--1063c3 {
  background-color: #1063c3;
}

.display-background--a61a18 {
  background-color: #a61a18;
}

.display-background--e55246 {
  background-color: #e55246;
}

.display-background--fb9081 {
  background-color: #fb9081;
}

.display-background--fdcec6 {
  background-color: #fdcec6;
}

.display-background--cce3fd {
  background-color: #cce3fd;
}

.display-background--7fbcff {
  background-color: #7fbcff;
}

.display-background--3e95f6 {
  background-color: #3e95f6;
}

.display-background--0753ad {
  background-color: #0753ad;
}

.display-background--a61a18 {
  background-color: #a61a18;
}

.display-background--e55246 {
  background-color: #e55246;
}

.display-background--fb9081 {
  background-color: #fb9081;
}

.display-background--fdcec6 {
  background-color: #fdcec6;
}

.display-background--f3eef0 {
  background-color: #f3eef0;
}

.display-background--cce3fd {
  background-color: #cce3fd;
}

.display-background--7fbcff {
  background-color: #7fbcff;
}

.display-background--3e95f6 {
  background-color: #3e95f6;
}

.display-background--0753ad {
  background-color: #0753ad;
}

.display-background--690000 {
  background-color: #690000;
}

.display-background--ad1e1c {
  background-color: #ad1e1c;
}

.display-background--e9594c {
  background-color: #e9594c;
}

.display-background--fc9688 {
  background-color: #fc9688;
}

.display-background--fdd3cc {
  background-color: #fdd3cc;
}

.display-background--c5e0fe {
  background-color: #c5e0fe;
}

.display-background--78b8ff {
  background-color: #78b8ff;
}

.display-background--3890f3 {
  background-color: #3890f3;
}

.display-background--0c5dbb {
  background-color: #0c5dbb;
}

.display-background--002e69 {
  background-color: #002e69;
}

.display-background--690000 {
  background-color: #690000;
}

.display-background--ad1e1c {
  background-color: #ad1e1c;
}

.display-background--e9594c {
  background-color: #e9594c;
}

.display-background--fc9688 {
  background-color: #fc9688;
}

.display-background--fdd3cc {
  background-color: #fdd3cc;
}

.display-background--f1eff2 {
  background-color: #f1eff2;
}

.display-background--c5e0fe {
  background-color: #c5e0fe;
}

.display-background--78b8ff {
  background-color: #78b8ff;
}

.display-background--3890f3 {
  background-color: #3890f3;
}

.display-background--0c5dbb {
  background-color: #0c5dbb;
}

.display-background--002e69 {
  background-color: #002e69;
}

.display-background--f09037 {
  background-color: #f09037;
}

.display-background--f6f1cb {
  background-color: #f6f1cb;
}

.display-background--8bc1fe {
  background-color: #8bc1fe;
}

.display-background--dc5d2e {
  background-color: #dc5d2e;
}

.display-background--f9bc50 {
  background-color: #f9bc50;
}

.display-background--b1d6ff {
  background-color: #b1d6ff;
}

.display-background--4f97ef {
  background-color: #4f97ef;
}

.display-background--dc5d2e {
  background-color: #dc5d2e;
}

.display-background--f9bc50 {
  background-color: #f9bc50;
}

.display-background--f6f1cb {
  background-color: #f6f1cb;
}

.display-background--b1d6ff {
  background-color: #b1d6ff;
}

.display-background--4f97ef {
  background-color: #4f97ef;
}

.display-background--d6502d {
  background-color: #d6502d;
}

.display-background--f29739 {
  background-color: #f29739;
}

.display-background--f9d870 {
  background-color: #f9d870;
}

.display-background--c1defd {
  background-color: #c1defd;
}

.display-background--87bffe {
  background-color: #87bffe;
}

.display-background--337ede {
  background-color: #337ede;
}

.display-background--d6502d {
  background-color: #d6502d;
}

.display-background--f29739 {
  background-color: #f29739;
}

.display-background--f9d870 {
  background-color: #f9d870;
}

.display-background--f3f1d2 {
  background-color: #f3f1d2;
}

.display-background--c1defd {
  background-color: #c1defd;
}

.display-background--87bffe {
  background-color: #87bffe;
}

.display-background--337ede {
  background-color: #337ede;
}

.display-background--c43225 {
  background-color: #c43225;
}

.display-background--e26f30 {
  background-color: #e26f30;
}

.display-background--f7a641 {
  background-color: #f7a641;
}

.display-background--f9d972 {
  background-color: #f9d972;
}

.display-background--d4e6f5 {
  background-color: #d4e6f5;
}

.display-background--a8d1ff {
  background-color: #a8d1ff;
}

.display-background--73b2fb {
  background-color: #73b2fb;
}

.display-background--216cce {
  background-color: #216cce;
}

.display-background--c43225 {
  background-color: #c43225;
}

.display-background--e26f30 {
  background-color: #e26f30;
}

.display-background--f7a641 {
  background-color: #f7a641;
}

.display-background--f9d972 {
  background-color: #f9d972;
}

.display-background--f7f1c4 {
  background-color: #f7f1c4;
}

.display-background--d4e6f5 {
  background-color: #d4e6f5;
}

.display-background--a8d1ff {
  background-color: #a8d1ff;
}

.display-background--73b2fb {
  background-color: #73b2fb;
}

.display-background--216cce {
  background-color: #216cce;
}

.display-background--8b0000 {
  background-color: #8b0000;
}

.display-background--c83828 {
  background-color: #c83828;
}

.display-background--e47530 {
  background-color: #e47530;
}

.display-background--f8ab44 {
  background-color: #f8ab44;
}

.display-background--f9de7a {
  background-color: #f9de7a;
}

.display-background--cfe5f8 {
  background-color: #cfe5f8;
}

.display-background--a3cfff {
  background-color: #a3cfff;
}

.display-background--6caef9 {
  background-color: #6caef9;
}

.display-background--2c78d9 {
  background-color: #2c78d9;
}

.display-background--003f8b {
  background-color: #003f8b;
}

.display-background--8b0000 {
  background-color: #8b0000;
}

.display-background--c83828 {
  background-color: #c83828;
}

.display-background--e47530 {
  background-color: #e47530;
}

.display-background--f8ab44 {
  background-color: #f8ab44;
}

.display-background--f9de7a {
  background-color: #f9de7a;
}

.display-background--f6f1cb {
  background-color: #f6f1cb;
}

.display-background--cfe5f8 {
  background-color: #cfe5f8;
}

.display-background--a3cfff {
  background-color: #a3cfff;
}

.display-background--6caef9 {
  background-color: #6caef9;
}

.display-background--2c78d9 {
  background-color: #2c78d9;
}

.display-background--003f8b {
  background-color: #003f8b;
}

.display-background--ac95e8 {
  background-color: #ac95e8;
}

.display-background--eaf0f7 {
  background-color: #eaf0f7;
}

.display-background--49abc5 {
  background-color: #49abc5;
}

.display-background--8965d3 {
  background-color: #8965d3;
}

.display-background--c7b8f0 {
  background-color: #c7b8f0;
}

.display-background--7ecbe0 {
  background-color: #7ecbe0;
}

.display-background--1d829a {
  background-color: #1d829a;
}

.display-background--8965d3 {
  background-color: #8965d3;
}

.display-background--c7b8f0 {
  background-color: #c7b8f0;
}

.display-background--eaf0f7 {
  background-color: #eaf0f7;
}

.display-background--7ecbe0 {
  background-color: #7ecbe0;
}

.display-background--1d829a {
  background-color: #1d829a;
}

.display-background--7f58cb {
  background-color: #7f58cb;
}

.display-background--b09be9 {
  background-color: #b09be9;
}

.display-background--dcd4f5 {
  background-color: #dcd4f5;
}

.display-background--9cd9eb {
  background-color: #9cd9eb;
}

.display-background--45a9c2 {
  background-color: #45a9c2;
}

.display-background--0e6d82 {
  background-color: #0e6d82;
}

.display-background--7f58cb {
  background-color: #7f58cb;
}

.display-background--b09be9 {
  background-color: #b09be9;
}

.display-background--dcd4f5 {
  background-color: #dcd4f5;
}

.display-background--e7f1f7 {
  background-color: #e7f1f7;
}

.display-background--9cd9eb {
  background-color: #9cd9eb;
}

.display-background--45a9c2 {
  background-color: #45a9c2;
}

.display-background--0e6d82 {
  background-color: #0e6d82;
}

.display-background--653bb1 {
  background-color: #653bb1;
}

.display-background--9778dd {
  background-color: #9778dd;
}

.display-background--b8a6ec {
  background-color: #b8a6ec;
}

.display-background--ddd5f5 {
  background-color: #ddd5f5;
}

.display-background--bee7f4 {
  background-color: #bee7f4;
}

.display-background--6fc3da {
  background-color: #6fc3da;
}

.display-background--359bb4 {
  background-color: #359bb4;
}

.display-background--065e71 {
  background-color: #065e71;
}

.display-background--653bb1 {
  background-color: #653bb1;
}

.display-background--9778dd {
  background-color: #9778dd;
}

.display-background--b8a6ec {
  background-color: #b8a6ec;
}

.display-background--ddd5f5 {
  background-color: #ddd5f5;
}

.display-background--ebeff7 {
  background-color: #ebeff7;
}

.display-background--bee7f4 {
  background-color: #bee7f4;
}

.display-background--6fc3da {
  background-color: #6fc3da;
}

.display-background--359bb4 {
  background-color: #359bb4;
}

.display-background--065e71 {
  background-color: #065e71;
}

.display-background--3b1d6f {
  background-color: #3b1d6f;
}

.display-background--6b40b7 {
  background-color: #6b40b7;
}

.display-background--9b7ee0 {
  background-color: #9b7ee0;
}

.display-background--bcaaed {
  background-color: #bcaaed;
}

.display-background--e0d9f6 {
  background-color: #e0d9f6;
}

.display-background--b6e5f2 {
  background-color: #b6e5f2;
}

.display-background--67bfd6 {
  background-color: #67bfd6;
}

.display-background--3096b0 {
  background-color: #3096b0;
}

.display-background--0b687c {
  background-color: #0b687c;
}

.display-background--003543 {
  background-color: #003543;
}

.display-background--3b1d6f {
  background-color: #3b1d6f;
}

.display-background--6b40b7 {
  background-color: #6b40b7;
}

.display-background--9b7ee0 {
  background-color: #9b7ee0;
}

.display-background--bcaaed {
  background-color: #bcaaed;
}

.display-background--e0d9f6 {
  background-color: #e0d9f6;
}

.display-background--eaf0f7 {
  background-color: #eaf0f7;
}

.display-background--b6e5f2 {
  background-color: #b6e5f2;
}

.display-background--67bfd6 {
  background-color: #67bfd6;
}

.display-background--3096b0 {
  background-color: #3096b0;
}

.display-background--0b687c {
  background-color: #0b687c;
}

.display-background--003543 {
  background-color: #003543;
}

.display-background--1d6edb {
  background-color: #1d6edb;
}

.display-background--cc861e {
  background-color: #cc861e;
}

.display-background--2ba160 {
  background-color: #2ba160;
}

.display-background--d13630 {
  background-color: #d13630;
}

.display-background--8256d8 {
  background-color: #8256d8;
}

.display-background--744e45 {
  background-color: #744e45;
}

.display-background--e369b9 {
  background-color: #e369b9;
}

.display-background--6d7178 {
  background-color: #6d7178;
}

.display-background--309ab5 {
  background-color: #309ab5;
}

.display-background--607a1f {
  background-color: #607a1f;
}

.display-background--72b5ff {
  background-color: #72b5ff;
}

.display-background--efc85c {
  background-color: #efc85c;
}

.display-background--68e398 {
  background-color: #68e398;
}

.display-background--fd9484 {
  background-color: #fd9484;
}

.display-background--b8a6ec {
  background-color: #b8a6ec;
}

.display-background--b99279 {
  background-color: #b99279;
}

.display-background--ffb6e2 {
  background-color: #ffb6e2;
}

.display-background--adb1b8 {
  background-color: #adb1b8;
}

.display-background--85d8ee {
  background-color: #85d8ee;
}

.display-background--9dbb60 {
  background-color: #9dbb60;
}

@media (min-width: 696px) {
  .resource-cards--designer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.resource-cards--designer .card {
  border-radius: 1rem;
  border: 1px solid rgba(109, 113, 120, 0.21);
  margin-bottom: 2rem;
  padding: 2rem;
}
@media (min-width: 796px) and (max-width: 960px) {
  .resource-cards--designer .card {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}
@media (min-width: 696px) and (max-width: 796px), (min-width: 960px) {
  .resource-cards--designer .card {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    width: calc(50% - 1rem);
  }
}
@media (min-width: 796px) and (max-width: 960px), (min-width: 1248px) {
  .resource-cards--designer .card__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.resource-cards--designer .card-image {
  margin-bottom: 1rem;
}
@media (min-width: 796px) and (max-width: 960px), (min-width: 1248px) {
  .resource-cards--designer .card-image {
    -ms-flex-preferred-size: 7rem;
        flex-basis: 7rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
@media (min-width: 1404px) {
  .resource-cards--designer .card-image {
    -ms-flex-preferred-size: 10rem;
        flex-basis: 10rem;
  }
}
.resource-cards--designer .card-image img {
  display: block;
  margin: 0 auto;
  max-width: 7rem;
}
@media (min-width: 1404px) {
  .resource-cards--designer .card-image img {
    max-width: 10rem;
  }
}
.resource-cards--designer .card-description {
  text-align: center;
}
@media (min-width: 796px) and (max-width: 960px), (min-width: 1248px) {
  .resource-cards--designer .card-description {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding-left: 2rem;
    text-align: left;
  }
}
.resource-cards--designer .card-description ul {
  margin-left: 0;
}
.resource-cards--designer .card-description li {
  list-style: none;
  margin: 0;
}

.training-videos-container {
  margin-bottom: 3rem;
}

@media (min-width: 796px) {
  .training-card {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.training-card__image {
  display: block;
  -ms-flex-preferred-size: 10rem;
      flex-basis: 10rem;
  margin-bottom: 2rem;
}
@media (min-width: 796px) {
  .training-card__image {
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-bottom: 0;
  }
}
@media (min-width: 1048px) {
  .training-card__image {
    -ms-flex-preferred-size: 12rem;
        flex-basis: 12rem;
  }
}
.training-card__image img {
  border-radius: 1rem;
  -webkit-box-shadow: 0 0 0 1px #e1e2e5;
          box-shadow: 0 0 0 1px #e1e2e5;
  display: block;
  margin: 0 auto;
  width: 10rem;
}
@media (min-width: 1048px) {
  .training-card__image img {
    width: 12rem;
  }
}
.training-card__details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-negative: 1;
      flex-shrink: 1;
}
@media (max-width: 1047px) {
  .training-card__details {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (min-width: 796px) {
  .training-card__details {
    padding-left: 2rem;
  }
}
@media (max-width: 1047px) {
  .training-card__description {
    margin-bottom: 2rem;
  }
}
@media (min-width: 1048px) {
  .training-card__description {
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    padding-right: 1rem;
    width: 100%;
  }
}
@media (min-width: 1440px) {
  .training-card__description {
    padding-right: 0;
  }
}
.training-card__download {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 1047px) {
  .training-card__download {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
@media (min-width: 1048px) {
  .training-card__download {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-preferred-size: auto;
        flex-basis: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 1440px) {
  .training-card__download {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

.training-videos-carousel-wrapper {
  margin-bottom: 3rem;
}
@media (max-width: 543px) {
  .training-videos-carousel-wrapper {
    margin-left: -2rem;
    margin-right: -2rem;
  }
}
@media (min-width: 544px) and (max-width: 795px) {
  .training-videos-carousel-wrapper {
    margin-left: -3rem;
    margin-right: -3rem;
  }
}
.training-videos-carousel-wrapper .spark-carousel__container-mask {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
.training-videos-carousel-wrapper .spark-carousel__item {
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.training-videos-carousel-wrapper .spark-carousel__item:hover .image-wrapper::before {
  background-color: rgba(18, 19, 21, 0.12);
}
.training-videos-carousel-wrapper .spark-carousel__item:focus .spark-carousel__item--content::before {
  display: none;
}
.training-videos-carousel-wrapper .spark-carousel__item:focus .image-wrapper::before {
  -webkit-box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #309ab5;
          box-shadow: inset 0 0 0 2px #fff, 0 0 0 3px #309ab5;
}
.training-videos-carousel-wrapper .spark-carousel__item.selected .spark-carousel__panel {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.training-videos-carousel-wrapper .spark-carousel__item:first-child .spark-carousel__panel {
  margin-left: 0.25rem;
}
.training-videos-carousel-wrapper .spark-carousel__item:last-child .spark-carousel__panel {
  margin-right: 0.25rem;
}
.training-videos-carousel-wrapper .spark-carousel__item:focus .spark-carousel__item--content.spark-carousel__panel:hover,
.training-videos-carousel-wrapper .spark-carousel__item.selected .spark-carousel__item--content.spark-carousel__panel:hover,
.training-videos-carousel-wrapper .spark-carousel__item.selected:focus .spark-carousel__item--content.spark-carousel__panel:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.training-videos-carousel-wrapper .spark-carousel__panel {
  -webkit-box-shadow: none;
          box-shadow: none;
  padding: 0 !important;
  width: 20rem;
}
.training-videos-carousel-wrapper .spark-carousel__item--content {
  text-align: left;
}
.training-videos-carousel-wrapper .spark-carousel__item--content img {
  border-radius: 1rem;
  margin-bottom: 1rem;
}
.training-videos-carousel-wrapper .spark-carousel__item--content h3 {
  padding: 0 0.5rem 0.5rem;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: antialiased;
}
.training-videos-carousel-wrapper .spark-carousel__item--content .image-wrapper {
  position: relative;
}
.training-videos-carousel-wrapper .spark-carousel__item--content .image-wrapper::before {
  border-radius: 1rem;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: background-color 250ms cubic-bezier(0, 0.4, 0.4, 1);
  transition: background-color 250ms cubic-bezier(0, 0.4, 0.4, 1);
  width: 100%;
}
@media (max-width: 795px) {
  .training-videos-carousel-wrapper .spark-carousel__controls {
    display: none;
  }
}

@media (min-width: 544px) {
  .view-all-videos {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.external-link-image,
.training-video {
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  position: relative;
}
@media (max-width: 795px) {
  .external-link-image:last-child,
.training-video:last-child {
    margin-bottom: 0;
  }
}
.external-link-image img,
.training-video img {
  display: block;
  max-width: 100%;
}

.external-link-image a {
  display: block;
}
.external-link-image img {
  width: 100%;
}

.showcase__featured img {
  border-radius: 1rem;
}

.showcase-nominations-panel {
  background: #f6f6f7;
  border-radius: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 2rem;
  text-align: center;
}
@media (min-width: 1048px) {
  .showcase-nominations-panel {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.showcase-nominations-panel__image {
  display: inline-block;
  margin: 0 auto 1rem;
  padding: 0.5rem 2rem;
}
@media (min-width: 1048px) {
  .showcase-nominations-panel__image {
    -ms-flex-preferred-size: 12rem;
        flex-basis: 12rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-bottom: 0;
  }
}
.showcase-nominations-panel__image img {
  display: block;
  margin: 0 auto;
  width: 8rem;
}
.showcase-nominations-panel__description {
  text-align: left;
}
@media (min-width: 1048px) {
  .showcase-nominations-panel__description {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding-left: 2rem;
  }
}

.spark-sample-screens img {
  border-radius: 1rem;
  -webkit-box-shadow: 0 0 0 1px #e1e2e5;
          box-shadow: 0 0 0 1px #e1e2e5;
  display: block;
  margin: 0 auto 2rem;
}
.spark-sample-screens p {
  text-align: center;
}

@media (min-width: 544px) {
  .community-resource {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.community-resource__image {
  margin-bottom: 2rem;
}
@media (min-width: 544px) {
  .community-resource__image {
    -ms-flex-preferred-size: 7rem;
        flex-basis: 7rem;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-bottom: 0;
  }
}
.community-resource__image img {
  display: block;
  width: 7rem;
}
@media (min-width: 544px) {
  .community-resource__description {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding-left: 2rem;
  }
}
.community-resource li:last-child {
  margin-bottom: 0;
}

.office-hours {
  min-height: 29rem;
  position: relative;
}
.office-hours .office-hours__hero {
  border-radius: 1rem;
  height: 29rem;
  margin-bottom: 3rem;
  overflow: hidden;
}
.office-hours .office-hours__hero img {
  max-width: 100%;
  min-width: 84rem;
}
.office-hours h2 {
  line-height: 1 !important;
  color: #fff;
}
.office-hours p {
  margin-bottom: 1rem;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
}
.office-hours .office-hours__card {
  color: #fff;
  left: 4rem;
  position: absolute;
  top: 3rem;
}
.office-hours .office-hours__list {
  margin-bottom: 1rem;
  margin-left: 0;
}
.office-hours .office-hours__list li {
  list-style: none;
  margin: 0;
}

/**
 * Syntax highlighting styles
 */
.highlight {
  width: 100%;
}

.highlight .hll {
  background-color: #222;
}

.highlight .c {
  color: #7f9f7f;
}

.highlight .err {
  color: #e37170;
  background-color: #3d3535;
}

.highlight .g {
  color: #7f9f7f;
}

.highlight .k {
  color: #e20000;
}

.highlight .l {
  color: #ccc;
}

.highlight .n {
  color: #dcdccc;
}

.highlight .o {
  color: #777;
}

.highlight .x {
  color: #ccc;
}

.highlight .p {
  color: #41706f;
}

.highlight .c1,
.highlight .cm,
.highlight .cp {
  color: #666;
}

.highlight .cs {
  color: #cd0000;
  font-weight: 700;
}

.highlight .gd {
  color: #cd0000;
}

.highlight .ge {
  color: #ccc;
  font-style: italic;
}

.highlight .gr {
  color: red;
}

.highlight .gh {
  color: #dcdccc;
  font-weight: 700;
}

.highlight .gi {
  color: #00cd00;
}

.highlight .go {
  color: gray;
}

.highlight .gp {
  color: #dcdccc;
  font-weight: 700;
}

.highlight .gs {
  color: #ccc;
  font-weight: 700;
}

.highlight .gu {
  color: purple;
  font-weight: 700;
}

.highlight .gt {
  color: #0040d0;
}

.highlight .kc {
  color: #dca3a3;
}

.highlight .kd {
  color: #2d86b3;
}

.highlight .kn {
  color: #dfaf8f;
  font-weight: 700;
}

.highlight .kp {
  color: #cdcf99;
}

.highlight .kr {
  color: #cdcd00;
}

.highlight .kt {
  color: #00cd00;
}

.highlight .ld {
  color: #cc7025;
}

.highlight .m {
  color: #2eab92;
}

.highlight .s {
  color: #aa5b1a;
}

.highlight .na {
  color: #207866;
}

.highlight .nc {
  color: #2d86b3;
}

.highlight .nd,
.highlight .no {
  color: #ccc;
}

.highlight .ni {
  color: #c28182;
}

.highlight .ne {
  color: #c3bf9f;
  font-weight: 700;
}

.highlight .nf {
  color: #2d86b3;
}

.highlight .nl {
  color: #555;
}

.highlight .nn {
  color: #8fbede;
}

.highlight .nx,
.highlight .py {
  color: #555;
}

.highlight .nt {
  color: #267399;
}

.highlight .nb {
  color: #2d86b3;
}

.highlight .nv {
  color: #dcdccc;
}

.highlight .ow {
  color: #f0efd0;
}

.highlight .w {
  color: #ccc;
}

.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo {
  color: #8cd0d3;
}

.highlight .s1,
.highlight .s2,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sr,
.highlight .ss,
.highlight .sx {
  color: #cc7025;
}

.highlight .bp,
.highlight .vc {
  color: #efef8f;
}

.highlight .vg {
  color: #dcdccc;
}

.highlight .vi {
  color: #ffffc7;
}

.highlight .il {
  color: #8cd0d3;
}
/*.modular-scale {
	 &__row {
		margin: 4rem 0;
	}
}*/
.typography-examples__details {
  color: #6d7178;
}

.typography-examples__container .breakpoint-size {
  color: #121315;
}

.typography-examples__row {
  padding: 1rem 0;
}

hr {
  height: 0;
  margin: 0.75rem 0;
}

.typography-font-list-roboto-condensed {
  font-family: "Roboto Condensed", sans-serif;
}

.typography-font-list-roboto {
  font-family: Roboto, sans-serif;
}

.typography-font-list__example {
  font-size: 8rem;
  line-height: 8rem;
}

.typography-font-list {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  font-size: 1.66666667rem;
  line-height: 2rem;
}
.typography-font-list p {
  font-size: 1.66666667rem;
  line-height: 2rem;
}
.typography-font-list li {
  list-style: none;
}
.typography-font-list .spark-panel {
  height: 100%;
}
.typography-font-list .spark-panel__content {
  color: #121315;
}

.typography-examples__row:first-of-type {
  border-bottom-width: 2px;
}
.typography-examples__row:first-of-type .breakpoint-size {
  font-family: Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.66666667rem;
  line-height: 1;
}

.typography-examples__row {
  border-bottom: 1px solid #e1e2e5;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.typography-examples__info {
  margin-left: -1rem;
}

.typography-examples__colors-sample {
  margin-left: 1.5rem;
  margin-right: 0.5rem;
}
.typography-examples__colors-sample::before {
  background-color: inherit;
  border-radius: 50%;
  content: "";
  height: 1rem;
  left: -1rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1rem;
}

.typography-examples__colors [class*=color-guide] {
  position: relative;
}

.typography-display-label {
  font-size: 1.333333333rem;
}

.color-guide__color--blue-60 {
  color: #007b94;
}

.color-guide__color--gray-80 {
  color: #404247;
}

.color-guide__color--katana-black {
  color: #121315;
}

.color-guide__background--blue-60 {
  background-color: #007b94;
}

.color-guide__background--gray-80 {
  background-color: #404247;
}

.color-guide__background--katana-black {
  background-color: #121315;
}

.toc-hover--header span {
  margin: 0 1rem;
}

.katana-docs-image-radius {
  border-radius: 1rem;
}

.katana-docs-image-box-shadow {
  -webkit-box-shadow: 0 0 0 1px #e1e2e5;
          box-shadow: 0 0 0 1px #e1e2e5;
}

.katana-docs-image-border {
  border: 1px solid #e1e2e5;
}

.katana-docs-image-panel-shadow {
  -webkit-box-shadow: 0 1px 12px 0 rgba(18, 19, 21, 0.08);
          box-shadow: 0 1px 12px 0 rgba(18, 19, 21, 0.08);
}

.katana-docs-circular-image {
  border: 1px solid rgba(109, 113, 120, 0.21);
  padding: 6px;
  background-color: #fff;
  border-radius: 50%;
}
.katana-docs-circular-image--angled {
  -webkit-transform: rotate(-23deg) translate3d(0, 0, 0);
          transform: rotate(-23deg) translate3d(0, 0, 0);
}

.im-katana-hr {
  background-color: #e1e2e5;
  border: 0;
  height: 1px;
  margin: 10rem 0;
  padding: 0;
}

.page--katana #content {
  padding-top: 6rem;
  margin: 0 auto;
}
.page--katana .im-katana--get-more p,
.page--katana .im-katana--same-code p {
  margin: 0 auto;
  max-width: 780px;
}
.page--katana .im-katana-content {
  margin-bottom: auto;
  margin-top: auto;
}
.page--katana .im-katana-showcase-1 {
  padding-right: 3.33333333rem;
}
.page--katana .im-katana-showcase-2 {
  padding-left: 1.66666667rem;
  padding-right: 1.66666667rem;
}
.page--katana .im-katana-showcase-3 {
  padding-left: 3.33333333rem;
}
.page--katana .landing-hero {
  background-image: url(../../../sabre-spark.s3.amazonaws.com/site_assets/im-katana/katana_iphone_mockup.png);
  background-position: calc(50% - 14rem) 2rem;
  background-repeat: no-repeat;
  background-size: auto calc(100% - 2rem);
  height: 30rem;
  padding-top: 0;
  position: relative;
  z-index: 50;
}
.page--katana .landing-content {
  margin-top: -5rem;
}
.page--katana .im-katana-resources-link {
  font-size: 1.66666667rem;
}
.page--katana .im-katana-accessiblity .spark-panel__content {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.page--katana .im-katana-accessiblity svg {
  display: inline-block;
}
.page--katana .im-katana-accessiblity ul {
  display: inline-block;
  vertical-align: baseline;
}
.page--katana .im-katana-accessiblity li {
  list-style: none;
  margin: 0 0 0 1rem;
  padding-left: 2rem;
  position: relative;
}
.page--katana .im-katana-accessiblity .spark-icon {
  color: #008247;
  left: 0;
  position: absolute;
  top: 0.25rem;
}
.page--katana h1 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #121315;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin-left: 50%;
  max-width: 366px;
}
.page--katana h1 span {
  color: #007b94;
}
.page--katana h2 {
  padding-top: 4rem;
  text-align: center;
}

@media (max-width: 736px) {
  .page--katana .landing-hero {
    background-image: none;
    height: auto;
  }
  .page--katana h1 {
    margin-left: 0;
    max-width: 100%;
    padding-bottom: 0;
    padding-left: 1rem;
    padding-right: 2rem;
    text-align: center;
  }
}
@media (max-width: 543px) {
  .page--katana .im-katana-accessiblity ul {
    padding-top: 2rem;
    margin-left: 0;
  }
  .page--katana .im-katana-accessiblity .spark-panel__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (max-width: 1047px) {
  .im-katana-content {
    text-align: center;
  }
}
@media (max-width: 795px) {
  .page--katana .im-katana-hr {
    margin: 6rem 0;
  }
  .page--katana .im-katana-resources-link {
    font-size: 1.33333333rem;
  }
  .page--katana .im-katana-showcase-1,
.page--katana .im-katana-showcase-2,
.page--katana .im-katana-showcase-3 {
    padding: 0;
  }
}
/*
* Styling for examples found on Introduction to Error Handling
*/
[class^=example--invalid-format--],
[class^=example--reenter-data--] {
  display: none;
}

.is-visible {
  display: block;
}

.spark-table tbody {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}