/* ==========================================================================
   Variables
========================================================================== */
/* Infinite rotate */
@keyframes infinite-rotate {
  to {
    transform: rotate(360deg); } }

.styleguide .ui.grid {
  width: 100%; }

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

.styleguide .sg-center > * {
  margin: 0 auto; }

.styleguide .sg-sidebar {
  display: none;
  padding-top: 140px;
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  border-right: 1px solid #d5d5d5;
  height: 100%;
  background: #f9f9f9; }
  @media screen and (min-width: 480px) {
    .styleguide .sg-sidebar {
      display: block; } }
  .styleguide .sg-sidebar ul {
    border-top: 1px solid #d5d5d5;
    margin: 0;
    padding: 0;
    list-style: none; }
    .styleguide .sg-sidebar ul li {
      margin: 0;
      padding: 0; }
      .styleguide .sg-sidebar ul li a {
        padding: 20px;
        display: block;
        width: 100%;
        border-bottom: 1px solid #d5d5d5;
        color: #666;
        font-size: 28px;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        font-family: 'Montserrat', sans-serif; }
        .styleguide .sg-sidebar ul li a:hover, .styleguide .sg-sidebar ul li a:active, .styleguide .sg-sidebar ul li a:focus {
          background: #e9e9e9; }

.styleguide .example-grid .column > div {
  background-color: #eeeeee;
  font-size: 16px;
  padding: 10px 15px; }

.styleguide {
  /* Colours */
  /* Primary */
  /* Secondary */
  /* Neutral */
  /* Functional Colours */ }
  .styleguide h1.sg-header {
    margin-top: 30px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase; }
  .styleguide .sg-sub-header {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    color: #555; }
  .styleguide .sg-section-header {
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    margin-bottom: 20px;
    color: #555; }
  .styleguide .pattern {
    margin: 0 0 3em;
    width: 100%;
    border: 1px solid #E5E5E5;
    border-radius: 3px; }
  .styleguide .pattern-head {
    background-color: #f5f2f0;
    font-size: 0.875rem;
    padding: 0.5em 10px;
    display: flex;
    justify-content: space-between; }
  .styleguide .pattern-detail {
    font-size: .875rem;
    color: #555;
    background-color: #FBF9F9;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
    padding: 0.5em 10px;
    width: 100%;
    overflow: hidden;
    display: block;
    border-bottom: 1px solid rgba(229, 229, 229, 0.5);
    border-color: rgba(229, 229, 229, 0.5);
    border-radius: 3px 3px 0px 0px; }
  .styleguide .pattern-example {
    padding: 10px;
    width: auto;
    overflow: hidden;
    font-size: .875rem; }
    .styleguide .pattern-example pre {
      max-height: 30em;
      overflow: auto; }
    .styleguide .pattern-example--dark {
      background-color: #ddd; }
  .styleguide .pattern-example--dark {
    background-color: #354657;
    color: #fff; }
    .styleguide .pattern-example--dark * {
      color: #fff; }
    .styleguide .pattern-example--dark .typo-grid__pattern-item {
      border-bottom: 1px solid #fff; }
    .styleguide .pattern-example--dark .typo-grid__pattern-item:last-child {
      border-bottom: none; }
  .styleguide .pattern-tabs {
    display: flex;
    border-top: 1px solid rgba(229, 229, 229, 0.5); }
    .styleguide .pattern-tabs > div {
      border-right: 1px solid rgba(229, 229, 229, 0.5);
      font-size: 0.875rem;
      padding: 5px 10px;
      cursor: pointer; }
      .styleguide .pattern-tabs > div.active {
        font-weight: 700; }
  .styleguide .pattern-help {
    font-size: .875rem;
    padding: 10px 10px;
    border-top: 1px solid rgba(229, 229, 229, 0.5); }
    .styleguide .pattern-help > div:not(.active) {
      display: none; }
    .styleguide .pattern-help pre {
      max-height: 30em;
      overflow: auto; }
    .styleguide .pattern-help .pattern-help-note {
      font-style: italic; }
    .styleguide .pattern-help code {
      color: #354657; }
  .styleguide .spacer {
    display: inline-block;
    width: 25px; }
  .styleguide .section-content {
    border-radius: 5px;
    width: 100%;
    background: #fff;
    padding: 40px; }
  .styleguide .pattern {
    margin: 0 0 3em;
    width: 100%;
    border: 1px solid #E5E5E5;
    border-radius: 3px; }
  .styleguide .pattern-example {
    padding: 20px;
    width: auto;
    overflow: hidden; }
    @media screen and (min-width: 768px) {
      .styleguide .pattern-example {
        padding: 20px; } }
    .styleguide .pattern-example--overflow {
      overflow: visible !important; }
  .styleguide .grid-wrapper .col-sm {
    background: #F4F8FD;
    text-align: center;
    margin-bottom: 15px;
    padding: 10px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .875rem; }
  @media screen and (min-width: 1024px) {
    .styleguide .grid-wrapper .row .col-sm:first-of-type {
      border-right: 15px #fff solid; } }
  .styleguide .table {
    font-size: .875rem; }
    .styleguide .table th, .styleguide .table td {
      padding: .75em .75em; }
    .styleguide .table code {
      color: #354657; }
  .styleguide .swatch {
    width: 100%;
    height: 100px;
    margin-bottom: 10px; }
  .styleguide .color-blue {
    background: #95C0F1; }
  .styleguide .color-blue-dark {
    background: #354657; }
  .styleguide .color-blue-strong {
    background: #5597E2; }
  .styleguide .color-blue-grey {
    background: #7F88A9; }
  .styleguide .color-blue-light {
    background: #F4F8FD; }
  .styleguide .color-yellow {
    background: #FECC2B; }
  .styleguide .color-green {
    background: #67b251; }
  .styleguide .color-purple {
    background: #A25EB5; }
  .styleguide .color-purple-light {
    background: #BD8BCA; }
  .styleguide .color-green-light {
    background: #81C28A; }
  .styleguide .color-black {
    background: #000000; }
  .styleguide .color-white {
    background: #FFFFFF; }
  .styleguide .color-grey {
    background: #D1D1D1; }
  .styleguide .color-grey-dark {
    background: #555555; }
  .styleguide .color-grey-light {
    background: #EEEEEE; }
  .styleguide .color-body {
    background: #FFFFFF; }
  .styleguide .color-brand {
    background: #A25EB5; }

/* Style Guide V2 */
.styleguide >
.side-nav + div {
  width: 100%;
  margin-left: 0;
  transition: .25s ease;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh; }

@media screen and (min-width: 768px) {
  .styleguide .side-nav + div {
    margin-left: 16rem;
    width: calc(100% - 256px); } }

.styleguide .container--expanded, .styleguide .side-nav + .container--expanded {
  width: 100%;
  margin-left: 0; }

.styleguide .pagination-container {
  min-height: 450px !important; }

.styleguide .side-nav .bx--btn, .styleguide button {
  font-family: IBM Plex Sans,ibm-plex-sans,Helvetica Neue,Arial,sans-serif; }

.styleguide .side-nav {
  font-size: .875rem;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-right: 2px solid #f4f7fb;
  width: 16rem;
  height: 100%;
  padding: 1rem 0;
  position: fixed;
  z-index: 7000;
  transition: 0.25s cubic-bezier(0.5, 0, 0.1, 1);
  overflow-y: auto; }
  @media screen and (min-width: 768px) {
  .styleguide .side-nav {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
      position: fixed;
      width: 17rem; } }

.styleguide .side-nav__closed {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  overflow: inherit; }

.styleguide .side-nav__closed--final {
  display: none; }

.styleguide .side-nav--items {
  overflow-y: auto;
  width: 100%; }

.styleguide .side-nav-click-to-close {
  display: block;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 500; }

@media screen and (min-width: 840px) {
  .styleguide .side-nav-click-to-close {
    display: none; } }

.styleguide .side-nav-click-to-close__closed {
  display: none; }

.styleguide .side-nav__logo {
  font-size: 1rem;
  display: inline-block;
  color: #152935;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
  margin: 1rem 1rem 1rem 20px;
  white-space: nowrap;
  padding: 0 1rem 0 0; }

.styleguide .side-nav__logo:hover {
  color: #3057d5; }

.styleguide .side-nav__logo:focus {
  text-decoration: underline;
  outline: none;
  color: #3057d5; }

.styleguide .side-nav__logo span {
  font-weight: 600; }

.styleguide .side-nav__search {
  margin: 0 1rem 2rem; }

.styleguide .side-nav__nav-items {
  width: 100%;
  padding: 0;
  list-style: none;
  margin-bottom: 1.25rem; }
  @media screen and (min-width: 768px) {
    .styleguide .side-nav__nav-items {
      margin-bottom: 2.5rem; } }

.styleguide .side-nav__nav-item a,
.styleguide .side-nav__nav-item button {
  font-size: 0.875rem;
  cursor: pointer;
  padding: .25rem 1rem;
  height: 2rem;
  color: #565656;
  font-weight: 600;
  letter-spacing: .01rem;
  background: transparent;
  line-height: 1.5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  text-decoration: none;
  border: none;
  border-left: 4px solid transparent; }

.styleguide .side-nav__nav-item a:focus,
.styleguide .side-nav__nav-item button:focus {
  color: #171717;
  text-decoration: underline;
  outline: none; }

.styleguide .side-nav__nav-item a:hover,
.styleguide .side-nav__nav-item button:hover {
  color: #171717;
  background: #f4f7fb; }

@media (max-width: 620px) {
  .styleguide .side-nav__nav-item a,
  .styleguide .side-nav__nav-item button {
    font-size: 1rem; } }

.styleguide .side-nav__nav-item--arrow {
  height: .625rem;
  width: .625rem;
  fill: #a4a4a4;
  transition: .3s; }

.styleguide .side-nav__nav-item--active > a {
  color: #171717;
  border-left: 4px solid #BD8BCA; }

.styleguide .side-nav__nav-item--open .side-nav__nav-item--arrow {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg); }

.styleguide .side-nav__sub-nav.side-nav__sub-nav--open {
  margin-top: 0;
  max-height: 100rem; }

.styleguide .side-nav__sub-nav {
  overflow: hidden;
  max-height: 0;
  transition: .3s;
  list-style: none;
  padding: 0; }

.styleguide .side-nav__sub-nav-item {
  border-left: 4px solid transparent;
  padding: 0 1.5rem; }

.styleguide .side-nav__sub-nav-item:hover {
  background: #f4f7fb; }

.styleguide .side-nav__sub-nav-item a {
  padding: .25rem .25rem .25rem 0;
  text-decoration: none; }

@media (max-width: 620px) {
  .styleguide .side-nav__sub-nav-item a {
    font-size: 1rem;
    padding-bottom: .75rem; } }

.styleguide .side-nav__sub-nav-item--active {
  border-left: 4px solid #BD8BCA; }

.styleguide .side-nav__sub-nav-item--active a {
  font-weight: 600;
  color: #171717; }

.styleguide .side-nav__links {
  width: 100%;
  padding: 0 1rem; }

.styleguide .side-nav__link {
  width: 100%;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  border-color: #3057d5;
  color: #3057d5; }

.styleguide .side-nav__link:focus, .styleguide .side-nav__link:hover {
  background: #3057d5; }

.styleguide .side-nav__link:focus {
  outline-color: #3057d5; }

.styleguide .side-nav-toggle-btn {
  position: fixed;
  top: 0;
  left: calc(256px - 2.3rem);
  width: 2.3rem;
  height: 2.3rem;
  background-color: #fff;
  border: 1px solid transparent;
  border-right: 2px solid #f4f7fb;
  margin: 0;
  padding: 0;
  cursor: pointer;
  z-index: 8000;
  border-radius: 0;
  transition: 0.25s cubic-bezier(0.5, 0, 0.1, 1); }

.styleguide .side-nav-toggle-btn:focus {
  outline: none;
  border: 1px solid #3057d5; }

.styleguide .side-nav-toggle-btn:hover {
  background: #3057d5;
  border-right: none; }

.styleguide .side-nav-toggle-btn:hover .line {
  background: #fff; }

.styleguide .side-nav-toggle-btn > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }

.styleguide .side-nav-toggle-btn > div:focus {
  outline: none; }

.styleguide .side-nav-toggle-btn > div .line {
  height: .0625rem;
  width: 1.25rem;
  cursor: pointer;
  display: block;
  margin: .125rem 0;
  background: #3057d5;
  will-change: all; }

.styleguide .side-nav-toggle-btn > div .line:nth-child(2) {
  opacity: 0; }

.styleguide .side-nav-toggle-btn > div .line:first-child {
  -webkit-transform: translateY(5px) rotate(45deg);
  transform: translateY(5px) rotate(45deg); }

.styleguide .side-nav-toggle-btn > div .line:nth-child(3) {
  -webkit-transform: translateY(-5px) rotate(-45deg);
  transform: translateY(-5px) rotate(-45deg); }

.styleguide .side-nav-toggle-btn--closed {
  left: 0;
  border-right: 0; }

.styleguide .side-nav-toggle-btn--closed > div .line:nth-child(2) {
  opacity: 1; }

.styleguide .side-nav-toggle-btn--closed > div .line, .styleguide .side-nav-toggle-btn--closed > div .line:first-child, .styleguide .side-nav-toggle-btn--closed > div .line:nth-child(3) {
  -webkit-transform: translateY(0) rotate(0);
  transform: translateY(0) rotate(0);
  transition: all .25s ease-in-out; }

.styleguide .section-header {
  padding-left: 3%;
  padding-right: 3%;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #EEEEEE;
  padding-bottom: 0;
  width: 100%;
  padding-bottom: 20px; }
  @media screen and (min-width: 768px) {
    .styleguide .section-header {
      padding-left: 3%;
      padding-right: 3%; } }

.styleguide .section-header__label {
  font-size: .875rem;
  color: #5a6872;
  margin: 4rem 0 1rem;
  white-space: nowrap; }
  @media screen and (min-width: 768px) {
    .styleguide .section-header__label {
      margin: 4rem 0 1rem; } }

.styleguide .section-header__title {
  font-size: 36px;
  color: #152935;
  font-weight: 800;
  margin: -1.15rem 0 0 -3px;
  line-height: 1.25;
  letter-spacing: 0;
  padding: 0;
  transition: 0.25s cubic-bezier(0.5, 0, 0.1, 1); }
  @media screen and (min-width: 768px) {
    .styleguide .section-header__title {
      font-size: 36px; } }

.styleguide .section-header__version {
  font-weight: 700; }

.styleguide .section-content {
  padding: 4rem 3%;
  width: 100%;
  margin-bottom: 7rem;
  max-width: 1400px;
  margin: 0 auto; }
@media screen and (min-width: 768px) {
  .styleguide .section-content {
    padding: 4rem 3%; } }

.styleguide .sg-icon-plate {
  position: relative;
  display: inline-block;
  margin: 25px 10px;
  width: 140px;
  vertical-align: top;
  text-align: left; }

.styleguide .sg-icon-wrapper {
  background: #F4F8FD;
  width: 140px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center; }

.styleguide .sg-icon-class {
  font-size: .875rem; }

.styleguide .sg-icon-plate > div:first-of-type {
  /* width: 32px;
  height: 32px; */ }

.swatch-grid {
  display: grid;
  grid-gap: 20px;
  margin-bottom: 80px;
  margin-top: 80px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr 1fr 1fr; }
  @media screen and (min-width: 1024px) {
    .swatch-grid {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-row: 1fr 1fr 1fr 1fr; } }
  .swatch-grid:first-child {
    margin-top: 0; }
  .swatch-grid__head {
    grid-area: 1 / 1 / 1 / -1; }
  .swatch-grid__pattern--group1 {
    order: 1; }
  .swatch-grid__pattern--group2 {
    order: 2; }
  .swatch-grid__pattern--group3 {
    order: 3; }
  .swatch-grid__pattern--group4 {
    order: 4; }
  @media screen and (min-width: 1024px) {
    .swatch-grid__pattern {
      order: initial; } }
  .swatch-grid__title {
    font-size: 22px;
    color: #354657;
    margin-bottom: 20px; }
  .swatch-grid__title-info {
    font-size: 16px;
    color: #354657;
    font-weight: 500; }
  .swatch-grid .pattern {
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.15); }
  .swatch-grid .pattern-example {
    padding: 0; }
  .swatch-grid .pattern-info {
    padding: 30px 20px; }
  .swatch-grid .pattern-info-name {
    font-size: 18px;
    font-weight: 800;
    color: #152935;
    margin-bottom: 10px; }
  .swatch-grid .pattern-info-class {
    font-size: 14px;
    font-weight: 700;
    color: #84909B;
    margin-bottom: 5px; }
  .swatch-grid .pattern-info-color-ref {
    font-size: 14px;
    font-weight: 700;
    color: #84909B;
    margin: 0; }
  .swatch-grid .swatch {
    margin-bottom: 0;
    min-height: 180px; }

.typo-grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  grid-template-rows: auto; }
  @media screen and (min-width: 1024px) {
    .typo-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto; } }
  .typo-grid:first-child {
    margin-top: 0; }
  .typo-grid__head {
    grid-area: 1 / 1 / 1 / -1; }
  .typo-grid__title {
    font-size: 22px;
    color: #354657;
    margin-bottom: 0; }
  .typo-grid__title-info {
    font-size: 16px;
    color: #354657;
    font-weight: 500; }
  .typo-grid__pattern {
    padding: 20px;
    margin-bottom: 0 !important;
    border: none !important;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.15); }
    @media screen and (min-width: 768px) {
      .typo-grid__pattern {
        padding: 40px; } }
    .typo-grid__pattern--group1 {
      order: 1; }
    .typo-grid__pattern--group2 {
      order: 2;
      background-color: #354657;
      color: #FFFFFF; }
      .typo-grid__pattern--group2 .typo-grid__pattern-info {
        color: #FFFFFF; }
      .typo-grid__pattern--group2 .typo-grid__pattern-item {
        border-color: #FFFFFF; }
    @media screen and (min-width: 1024px) {
      .typo-grid__pattern {
        order: initial; } }
    .typo-grid__pattern--hero .typo-grid__pattern-item {
      border-bottom: none;
      margin-bottom: 0;
      padding: 0; }
  .typo-grid__pattern-item {
    border-bottom: 1px solid #354657;
    margin-bottom: 25px;
    padding-bottom: 20px; }
    .typo-grid__pattern-item h1, .typo-grid__pattern-item h2, .typo-grid__pattern-item h3, .typo-grid__pattern-item h4, .typo-grid__pattern-item h5, .typo-grid__pattern-item h6 {
      margin-bottom: 10px; }
    .typo-grid__pattern-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0; }
  .typo-grid__pattern-info {
    font-size: 14px;
    font-weight: 500;
    color: #354657; }
  .typo-grid--desktop {
    display: none; }
    @media screen and (min-width: 768px) {
      .typo-grid--desktop {
        display: grid; } }
  .typo-grid--mobile {
    display: grid; }
    @media screen and (min-width: 768px) {
      .typo-grid--mobile {
        display: none; } }

.content-grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  grid-template-rows: auto; }
  @media screen and (min-width: 1024px) {
    .content-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto; } }
  .content-grid__head p {
    margin-bottom: 0; }
  @media screen and (min-width: 1024px) {
    .content-grid__head {
      grid-area: 1 / 1 / 1 / -1; } }
  @media screen and (min-width: 1024px) {
    .content-grid__head--half {
      grid-area: 1 / 1 / 1 / 1; } }
  @media screen and (min-width: 1024px) {
    .content-grid__head--half.content-grid__head--rhs {
      grid-area: 1 / 2 / 1 / -1; } }
  .content-grid__item {
    padding: 20px;
    margin-bottom: 0 !important;
    border: none !important;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-wrap: wrap; }
    @media screen and (min-width: 768px) {
      .content-grid__item {
        padding: 30px; } }
  .content-grid__item-foot {
    margin-top: auto;
    margin-bottom: 0; }
  .content-grid__title {
    font-size: 22px;
    color: #354657;
    margin-bottom: 0;
    margin-top: 60px; }
    @media screen and (min-width: 1024px) {
      .content-grid__title {
        margin-top: 80px; } }
  .content-grid__title-info {
    font-size: 16px;
    color: #354657;
    font-weight: 500; }
  .content-grid__item-content {
    width: 100%; }
  .content-grid__item-foot {
    padding-top: 20px; }
    .content-grid__item-foot p {
      margin-bottom: 0; }
  .content-grid__box {
    padding: 20px;
    border: 2px solid #D1D1D1;
    margin: 15px 0;
    width: 100%; }
  .content-grid--desktop {
    display: none; }
    @media screen and (min-width: 768px) {
      .content-grid--desktop {
        display: grid; } }
  .content-grid--mobile {
    display: grid; }
    @media screen and (min-width: 768px) {
      .content-grid--mobile {
        display: none; } }

.styleguide-item__title {
  font-size: 22px;
  color: #354657;
  margin-bottom: 10px;
  margin-top: 60px; }

.styleguide-item__info {
  font-size: 16px;
  color: #354657;
  font-weight: 500;
  margin-bottom: 35px; }

.icon-grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 30px);
  grid-auto-rows: 30px; }
  .icon-grid__wrap {
    display: flex; }
    .icon-grid__wrap .icon-grid {
      margin-right: 70px; }
  .icon-grid--2 {
    grid-template-columns: repeat(2, 30px); }
  .icon-grid--4 {
    grid-template-columns: repeat(4, 30px); }
  .icon-grid--11 {
    grid-template-columns: repeat(11, 30px); }

@media (max-width: 900px) {
  .side-nav {
    display: none !important; } }

.styleguide .pattern-wrapper:target {
  animation: fadeIt 2s ease-in-out; }

@keyframes fadeIt {
  0% {
    z-index: 100;
    position: relative;
    transform: scale(1);
    box-shadow: 0px 0px 0 1000px rgba(0, 0, 0, 0.5); }
  20% {
    transform: scale(1.025); }
  80% {
    transform: scale(1); }
  90% {
    box-shadow: 0px 0px 0 1000px rgba(0, 0, 0, 0.35); }
  100% {
    z-index: 100;
    position: relative;
    transform: scale(1);
    box-shadow: 0px 0px 0 1000px rgba(0, 0, 0, 0); } }

.styleguide .pattern-copy-link {
  background-image: url(/images/styleguide-copy-icon.svg);
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 26px;
  min-width: 24px;
  height: 24px;
  border: none;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s; }

.styleguide .pattern-copy-link__label:not(.active) {
  visibility: hidden;
  font-size: 0; }

.market-heading {
  display: flex;
  align-items: center; }

.order-details {
  overflow: visible; }