/* A modified version of "rc-tooltip/assets/bootstrap_white.css";
* that has been altered to use the `dTooltip` prefix instead of
* the default `rc-tooltip` so that it does not conflict with the
* rc-tooltip-* global styles from the `rc-slider` component. The
* `dTooltip` prefix has been set in the <Tooltip> component render
* method as `prefixCls`
*/
.bootstrap_white__tooltipContainer___111Zb {

    @-webkit-keyframes bootstrap_white__dTooltipZoomIn___58YUP {
      0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
      }
      100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
      }
    }

    @-webkit-keyframes bootstrap_white__dTooltipZoomOut___WHmh3 {
      0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
      }
      100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
      }
    }
  }
.bootstrap_white__tooltipContainer___111Zb .dTooltip {
      position: absolute;
      z-index: 1070;
      display: block;
      visibility: visible;
      line-height: 1.5;
      font-size: 12px;
      background-color: rgba(0, 0, 0, .05);
      padding: 1px;
      opacity: 0.9;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-hidden {
      display: none;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-inner {
      padding: 8px 10px;
      color: #333333;
      text-align: left;
      text-decoration: none;
      background-color: #ffffff;
      border-radius: 3px;
      min-height: 34px;
      border: 1px solid #b1b1b1;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-arrow,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-arrow-inner {
      position: absolute;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-top .dTooltip-arrow,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topLeft .dTooltip-arrow,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topRight .dTooltip-arrow {
      bottom: -5px;
      margin-left: -6px;
      border-width: 6px 6px 0;
      border-top-color: #b1b1b1;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-top .dTooltip-arrow-inner,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topLeft .dTooltip-arrow-inner,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topRight .dTooltip-arrow-inner {
      bottom: 1px;
      margin-left: -6px;
      border-width: 6px 6px 0;
      border-top-color: #ffffff;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-top .dTooltip-arrow {
      left: 50%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topLeft .dTooltip-arrow {
      left: 15%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topRight .dTooltip-arrow {
      right: 15%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-right .dTooltip-arrow,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightTop .dTooltip-arrow,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightBottom .dTooltip-arrow {
      left: -5px;
      margin-top: -6px;
      border-width: 6px 6px 6px 0;
      border-right-color: #b1b1b1;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-right .dTooltip-arrow-inner,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightTop .dTooltip-arrow-inner,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightBottom .dTooltip-arrow-inner {
      left: 1px;
      margin-top: -6px;
      border-width: 6px 6px 6px 0;
      border-right-color: #ffffff;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-right .dTooltip-arrow {
      top: 50%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightTop .dTooltip-arrow {
      top: 15%;
      margin-top: 0;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightBottom .dTooltip-arrow {
      bottom: 15%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-left .dTooltip-arrow,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftTop .dTooltip-arrow,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftBottom .dTooltip-arrow {
      right: -5px;
      margin-top: -6px;
      border-width: 6px 0 6px 6px;
      border-left-color: #b1b1b1;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-left .dTooltip-arrow-inner,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftTop .dTooltip-arrow-inner,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftBottom .dTooltip-arrow-inner {
      right: 1px;
      margin-top: -6px;
      border-width: 6px 0 6px 6px;
      border-left-color: #ffffff;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-left .dTooltip-arrow {
      top: 50%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftTop .dTooltip-arrow {
      top: 15%;
      margin-top: 0;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftBottom .dTooltip-arrow {
      bottom: 15%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottom .dTooltip-arrow,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomLeft .dTooltip-arrow,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomRight .dTooltip-arrow {
      top: -5px;
      margin-left: -6px;
      border-width: 0 6px 6px;
      border-bottom-color: #b1b1b1;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottom .dTooltip-arrow-inner,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomLeft .dTooltip-arrow-inner,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomRight .dTooltip-arrow-inner {
      top: 1px;
      margin-left: -6px;
      border-width: 0 6px 6px;
      border-bottom-color: #ffffff;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottom .dTooltip-arrow {
      left: 50%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomLeft .dTooltip-arrow {
      left: 15%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomRight .dTooltip-arrow {
      right: 15%;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip.dTooltip-zoom-enter,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip.dTooltip-zoom-leave {
      display: block;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-enter,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-appear {
      opacity: 0;
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
      animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-leave {
      -webkit-animation-duration: 0.3s;
      animation-duration: 0.3s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
      animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
      -webkit-animation-play-state: paused;
      animation-play-state: paused;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-enter.dTooltip-zoom-enter-active,
    .bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-appear.dTooltip-zoom-appear-active {
      -webkit-animation-name: dTooltipZoomIn;
      animation-name: dTooltipZoomIn;
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
.bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-leave.dTooltip-zoom-leave-active {
      -webkit-animation-name: dTooltipZoomOut;
      animation-name: dTooltipZoomOut;
      -webkit-animation-play-state: running;
      animation-play-state: running;
    }
@keyframes bootstrap_white__dTooltipZoomIn___58YUP {
      0% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
      }
      100% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
      }
    }
@keyframes bootstrap_white__dTooltipZoomOut___WHmh3 {
      0% {
        opacity: 1;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
      }
      100% {
        opacity: 0;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0);
      }
    }

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___3r6Lb {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___1K_NY {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1K_NY {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

/* Overrides specific to Docker */

.styles__tooltipContainer___2FgdK .dTooltip {
      opacity: 1;
    }

.styles__tooltipContainer___2FgdK .dTooltip-inner {
      border: 0 none;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
              box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
      -webkit-transform: none;
              transform: none;
      padding: 12px;
      max-width: 480px;
    }

.styles__tooltipContainer___2FgdK .dTooltip-arrow {
  width: 11px;
  height: 11px;
}

.styles__tooltipContainer___2FgdK .dTooltip-arrow {
  background: #ffffff;
      -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
  z-index: 999;
}

.styles__tooltipContainer___2FgdK .dTooltip-inner * {
      word-wrap: break-word;
    }

/* placement of arrows */

.styles__tooltipContainer___2FgdK .dTooltip-placement-top .dTooltip-arrow,
    .styles__tooltipContainer___2FgdK .dTooltip-placement-topLeft .dTooltip-arrow,
    .styles__tooltipContainer___2FgdK .dTooltip-placement-topRight .dTooltip-arrow {
      border-left: 0 none;
      border-top: 0 none;
      background: #ffffff;
      border-right: 1px solid #e1e2e6;
      border-bottom: 1px solid #e1e2e6;
    }

.styles__tooltipContainer___2FgdK .dTooltip-placement-bottom .dTooltip-arrow,
    .styles__tooltipContainer___2FgdK .dTooltip-placement-bottomLeft .dTooltip-arrow,
    .styles__tooltipContainer___2FgdK .dTooltip-placement-bottomRight .dTooltip-arrow {
      border-right: 0 none;
      border-bottom: 0 none;
      border-left: 1px solid #e1e2e6;
      border-top: 1px solid #e1e2e6;
    }

.styles__tooltipContainer___2FgdK .dTooltip-placement-left .dTooltip-arrow {
      border-left: 0 none;
      border-bottom: 0 none;
      background: #ffffff;
      border-right: 1px solid #e1e2e6;
      border-top: 1px solid #e1e2e6;
    }

.styles__tooltipContainer___2FgdK .dTooltip-placement-right .dTooltip-arrow {
      border-right: 0 none;
      border-top: 0 none;
      border-left: 1px solid #e1e2e6;
      border-bottom: 1px solid #e1e2e6;
    }

.styles__tooltipContainer___2FgdK .styles__small___2w3xj .dTooltip-inner {
        min-height: 0;
        padding: 4px 8px;
      }

.styles__tooltipContainer___2FgdK .styles__darkTheme___1gOPZ .dTooltip-inner {
        background: #393f49;
        color: #ffffff;
      }

.styles__tooltipContainer___2FgdK .styles__darkTheme___1gOPZ .dTooltip-arrow {
        background: #393f49;
      }

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___3y4fw {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___3v7Mf {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3v7Mf {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

.styles__container___1uMTK {
  margin: 48px auto 0;

  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-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__container___1uMTK h2 {
    font-weight: 600;
    font-size: 38px;

    margin-top: 20px;
    margin-bottom: 20px;
  }

.styles__whale___2jfiR {
  width: 250px;
}

.styles__explanation___1s3BB {
  font-size: 18px;
  color: #70787d;
  text-align: center;
  max-width: 500px;
}

.styles__sessionId___2gqKM {
  font-size: 14px;
  color: #70787d;
  text-align: center;
  max-width: 500px;

  margin-top: 16px;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___1agHr {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___1T76Y {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1T76Y {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

.styles__wrapper___EX-Nj {
  background: #00084d;
  text-align: center;
  color: #ffffff;
  font-weight: 600;
  min-height: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between
}

.styles__wrapper___EX-Nj.styles__secondary___2o0LW {
  background: #393f49;
}

.styles__text___3a6LX {
  font-size: 13px;
  margin: 10px 40px;
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
}

.styles__close___XHEiQ {
  margin-right: 20px;
  font-size: 16px;
  cursor: pointer;
}

.styles__icon___1Zq5X {
  margin-right: 8px;
}

.styles__bannerLinkText___3DcEK {
  margin-left: 4px;
}

@media only screen and (max-width: 960px) {
  .styles__wrapper___EX-Nj {
    z-index: 100;
  }
  .styles__text___3a6LX {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .styles__icon___1Zq5X {
    margin: 0;
  }
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___34bT- {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___2_JtC {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2_JtC {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

.dicon {
  width: 24px;
  height: 24px;
}

/*
lib/constants/sizes
**************/

.styles__supertiny___piMs- {
  width: 8px;
  height: 8px;
}

.styles__tiny___16fk0 {
  width: 12px;
  height: 12px;
}

.styles__small___3FOEa {
  width: 18px;
  height: 18px;
}

.styles__regular___2wAxR {
  width: 24px;
  height: 24px;
}

.styles__large___2556i {
  width: 40px;
  height: 40px;
}

.styles__xlarge___5Q5Wk {
  width: 60px;
  height: 60px;
}

/*
lib/constants/variants
**************/

.styles__primary___2D4qw {
  fill: #086dd7;
}

.styles__secondary___11gMY {
  fill: #88d5c0;
}

.styles__warn___3tokU {
  fill: #fbb552;
}

.styles__panic___2ngky {
  fill: #d52536;
}

.styles__dull___cV3u9 {
  fill: #8993a5;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___2hpxa {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___2VEtj {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2VEtj {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

@-webkit-keyframes styles__load8___-yOxU {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes styles__load8___-yOxU {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.styles__footerWrapper___1Rljn {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  background-color: #00084d;
  color: #ffffff;
}

.styles__contentWrapper___1L_-i {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.styles__section___XuuIR {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 40px 0;
}

@media only screen and (max-width: 1200px) {
  .styles__section___XuuIR {
    padding-left: 12px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.styles__linksMap___3rFFr {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 80%;
}

@media only screen and (max-width: 600px) {
  .styles__linksMap___3rFFr {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
}

.styles__column___1cl5g {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 150px;
}

.styles__column___1cl5g a:not(:last-child) {
    margin-bottom: 12px;
  }

@media only screen and (min-width: 601px) {

  .styles__column___1cl5g:not(:last-child) {
    margin-right: 80px;
  }
}

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

  .styles__column___1cl5g:not(:last-child) {
    margin-bottom: 24px;
  }
}

@media only screen and (max-width: 1200px) {
  .styles__column___1cl5g:first-child {
    display: none;
  }
  .styles__column___1cl5g {
    min-width: 100px;
  }
}

@media only screen and (max-width: 960px) {
  .styles__column___1cl5g:first-child {
    display: none;
  }
  .styles__column___1cl5g {
    min-width: 50px;
  }
}

.styles__column___1cl5g a,
.styles__links___2sWbh a {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  text-decoration: none;
  opacity: 0.6;
  cursor: pointer
}

.styles__column___1cl5g a:hover, .styles__links___2sWbh a:hover {
  opacity: 1;
}

.styles__links___2sWbh a:not(:last-child) {
  margin-right: 32px;
}

.styles__copyright___11bRD {
  font-weight: 500;
}

.styles__copyright___11bRD a {
    text-decoration: none;
  }

.styles__listTitle___R9nW5 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 700;
  margin-bottom: 12px
}

.styles__listTitle___R9nW5.styles__social___3RJzg {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.styles__subTitle___1dG4B {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 800;
  margin: 16px 0;
}

.styles__socialLinks___2Dlcm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 250px;
}

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

  .styles__socialLinks___2Dlcm {
    margin-top: 20px;
  }
}

.styles__icon___32Su8 {
  fill: white;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___215ah {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___23HMS {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___23HMS {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

/* Header */

.styles__headerWrapper___O0ot8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 64px;
  background-color: #1c90ed;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__headerWrapper___O0ot8 .styles__header___XehzL {
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
    padding: 0 12px;
    position: relative;
    z-index: 999;
  }

.styles__headerWrapper___O0ot8 .styles__publisherCenterHeader___34yU6 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

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

  .styles__headerWrapper___O0ot8.styles__hasSearch___1e9v- {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100px;
  }

  .styles__headerWrapper___O0ot8 .styles__search___1gdRG {
      width: 300px;
      margin: 12px 0;
  }
}

.styles__headerWrapper___O0ot8.styles__publishFlow___2CIMp {
  min-width: 1295px;
}

.styles__headerWrapper___O0ot8 > * {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.styles__headerWrapper___O0ot8 .styles__headerLogo___2ZFL4 {
    text-align: center;
    text-decoration: none;
    margin: 19px 16px 15px 0;
}

.styles__headerWrapper___O0ot8 .styles__headerLogo___2ZFL4 > svg {
      min-width: 140px;
    }

.styles__headerWrapper___O0ot8 .styles__logoLink___1D6_2 {
    cursor: pointer;
}

.styles__headerWrapper___O0ot8 .styles__logoLink___1D6_2:hover {
  opacity: 0.85;
}

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

  .styles__headerWrapper___O0ot8 .styles__headerLogo___2ZFL4 {
      max-width: 36px;
      min-width: 36px;
      overflow-x: hidden;
  }
}

.styles__headerWrapper___O0ot8 .styles__avatar___2_sB5 {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.styles__headerWrapper___O0ot8 .styles__accountDropdown___3gNBy {
    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;
}

.styles__headerWrapper___O0ot8 .styles__accountDropdown___3gNBy ul {
      margin-top: 4px !important;
      width: 190px;
      right: 0;
      top: 40px;
    }

.styles__headerWrapper___O0ot8 .styles__accountDropdown___3gNBy ul li {
        line-height: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.styles__transparent___2xk7k {
  padding-top: 20px;
  background-color: transparent;
  position: relative;
  z-index: 1;
}

.styles__expandable___3EG8G {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 4px;
  opacity: 0.7
}

.styles__expandable___3EG8G:hover {
  opacity: 1;
}

.styles__expandable___3EG8G > svg {
    fill: white;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___1QRXx {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___jfw3l {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___jfw3l {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

.styles__supertiny___24LbU {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  position: relative;
}

.styles__supertiny___24LbU::after {
  content: '';
  position: absolute;
  left: calc(50% - 9px);
  top: calc(50% - 9px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border-top: 1px solid transparent;
  border-right: 1px solid #086dd7;
  border-bottom: 1px solid #086dd7;
  border-left: 1px solid #086dd7;
  font-size: 10px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: styles__load8___3gOcW 1.1s infinite linear;
          animation: styles__load8___3gOcW 1.1s infinite linear;
}

.styles__tiny___1FP-w {
  width: 27px;
  height: 27px;
  margin: 0 auto;
  position: relative;
}

.styles__tiny___1FP-w::after {
  content: '';
  position: absolute;
  left: calc(50% - 13.5px);
  top: calc(50% - 13.5px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border-top: 1.5px solid transparent;
  border-right: 1.5px solid #086dd7;
  border-bottom: 1.5px solid #086dd7;
  border-left: 1.5px solid #086dd7;
  font-size: 10px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: styles__load8___3gOcW 1.1s infinite linear;
          animation: styles__load8___3gOcW 1.1s infinite linear;
}

.styles__small___2paN8 {
  width: 40.5px;
  height: 40.5px;
  margin: 0 auto;
  position: relative;
}

.styles__small___2paN8::after {
  content: '';
  position: absolute;
  left: calc(50% - 20.25px);
  top: calc(50% - 20.25px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-top: 2.25px solid transparent;
  border-right: 2.25px solid #086dd7;
  border-bottom: 2.25px solid #086dd7;
  border-left: 2.25px solid #086dd7;
  font-size: 10px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: styles__load8___3gOcW 1.1s infinite linear;
          animation: styles__load8___3gOcW 1.1s infinite linear;
}

.styles__regular___DPl72 {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  position: relative;
}

.styles__regular___DPl72::after {
  content: '';
  position: absolute;
  left: calc(50% - 27px);
  top: calc(50% - 27px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-top: 3px solid transparent;
  border-right: 3px solid #086dd7;
  border-bottom: 3px solid #086dd7;
  border-left: 3px solid #086dd7;
  font-size: 10px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: styles__load8___3gOcW 1.1s infinite linear;
          animation: styles__load8___3gOcW 1.1s infinite linear;
}

.styles__large___vefXs {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  position: relative;
}

.styles__large___vefXs::after {
  content: '';
  position: absolute;
  left: calc(50% - 45px);
  top: calc(50% - 45px);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border-top: 5px solid transparent;
  border-right: 5px solid #086dd7;
  border-bottom: 5px solid #086dd7;
  border-left: 5px solid #086dd7;
  font-size: 10px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: styles__load8___3gOcW 1.1s infinite linear;
          animation: styles__load8___3gOcW 1.1s infinite linear;
}

.styles__xlarge___2mMq6 {
  width: 135px;
  height: 135px;
  margin: 0 auto;
  position: relative;
}

.styles__xlarge___2mMq6::after {
  content: '';
  position: absolute;
  left: calc(50% - 67.5px);
  top: calc(50% - 67.5px);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border-top: 7.5px solid transparent;
  border-right: 7.5px solid #086dd7;
  border-bottom: 7.5px solid #086dd7;
  border-left: 7.5px solid #086dd7;
  font-size: 10px;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-animation: styles__load8___3gOcW 1.1s infinite linear;
          animation: styles__load8___3gOcW 1.1s infinite linear;
}

.styles__overlay-primary___tfKbC::after {
  border-right-color: #086dd7;
  border-bottom-color: #086dd7;
  border-left-color: #086dd7;
}

.styles__overlay-white___rW1TF::after {
  border-right-color: #f9f9fa;
  border-bottom-color: #f9f9fa;
  border-left-color: #f9f9fa;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___38sD6 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___2QkBS {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2QkBS {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

.styles__searchForm___2IJ7y {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;

  padding: 2px 0;
  min-width: 210px;
  margin-right: 20px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

@media only screen and (max-width: 600px) {
  .styles__searchForm___2IJ7y {
    width: 300px;
    margin: 12px 0;
  }
}

.styles__root___UEcP2 {
  position: relative;
}

.styles__inputRoot___3WlMs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.styles__icon___vcs6b,
.styles__loading___4atZC {
  fill: #ffffff;
  position: absolute;

  top: 50%;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
}

.styles__input___3r96R {
  background-color: rgba(255, 255, 255, .2);
  border: 0;
  border-radius: 2px;
  padding: 8px 12px;
  color: #ffffff;

  text-indent: 24px
}

.styles__input___3r96R:focus {
  color: #505968;
  background-color: #ffffff;
}

.styles__input___3r96R:focus + .styles__icon___vcs6b {
      fill: #505968;
}

.styles__menu___3svVW {
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
          box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
  background: #ffffff;
  position: absolute;
  top: 0;
  z-index: 999;
  width: 100%;
  padding: 0;
  max-height: none;
}

.styles__groupHeader___1bUGm {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  cursor: default;
  color: #8993a5;
  text-align: left;
  padding: 12px;
}

.styles__option___327Kl {
  color: #505968;
  padding: 8px 20px;
  cursor: pointer;
  text-align: left;
}

.styles__match___2ccXF {
  color: #086dd7;
  font-weight: 500;
}

.styles__isOneCharSearchMsg___3lqC8 {
  position: absolute;
  width: auto;
  max-width: 364px;
  height: 24px;
  top: 100%;
  -webkit-transform: translateY(-11px);
          transform: translateY(-11px);
  background: #ffffff;
  font-size: 12px;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 3px #8993a5;
          box-shadow: 0 2px 3px #8993a5;
  padding: 3.6px;
  color: #393f49;
  z-index: 1;
  -webkit-animation: styles__fadein___2QkBS 0.5s;
          animation: styles__fadein___2QkBS 0.5s;
}

.styles__triangle___sOVpX {
  position: absolute;
  bottom: 100%;
  -webkit-transform: translateY(75%);
          transform: translateY(75%);
  z-index: 2;
  left: 9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffffff;
}

@keyframes styles__fadein___2QkBS {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___3An3R {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___3MJaY {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3MJaY {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

/* stylelint-disable block-no-empty */

.dbutton {
}

/* stylelint-enable */

.styles__button___349c4 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  outline: 0;
  display: inline-block;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-style: solid;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  font-style: inherit;
  -webkit-font-feature-settings: inherit;
          font-feature-settings: inherit;
  font-variant: inherit;
  font-family: inherit;
  text-decoration: none;
  overflow: hidden;
  -webkit-transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

  padding: 0 15px;
  margin: 6px 6px;
  min-width: 88px;
  line-height: 32px;
  min-height: 32px;
  border-width: 2px;
  border-radius: 3px;
  font-size: 14px;
  color: white;
  cursor: pointer
}

.styles__button___349c4::first-letter {
  text-transform: uppercase;
}

.styles__button___349c4:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.styles__button___349c4 .dicon {
  fill: white;
  position: relative;
  top: 4px;
}

.styles__icon___32G-S {
  min-width: auto;
}

.styles__iconLeft___17zOQ .dicon, .styles__iconRight___hvX_a .dicon {
    position: absolute;
  }

.styles__iconLeft___17zOQ::before {
  content: ' ';
  display: inline-block;
  margin-right: 8px;
  width: 24px;
}

.styles__iconLeft___17zOQ .dicon {
    left: 6px;
}

.styles__iconRight___hvX_a::after {
  content: ' ';
  display: inline-block;
  margin-right: 8px;
  width: 24px;
}

.styles__iconRight___hvX_a .dicon {
    right: 6px;
}

.styles__primary___3MhKY {
  /* stylelint-disable function-whitespace-after */
}

.styles__primary___3MhKY:not(.styles__inverted___MX3NH) {
  background-color: #086dd7;
  border-color: #086dd7;
}

.styles__primary___3MhKY:not(.styles__inverted___MX3NH):hover {
  background-color: #0055bd;
  border-color: #0055bd;
}

.styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__text___1kh-4,
    .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 {
  color: #086dd7;
}

.styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover {
  color: #0055bd;
}

.styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon,
    .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon,
    .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon {
  fill: #086dd7;
}

.styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon,
    .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon,
    .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon {
  fill: #0055bd;
}

.styles__primary___3MhKY {/* stylelint-enable */
}

.styles__secondary___2l8lN {
  /* stylelint-disable function-whitespace-after */
}

.styles__secondary___2l8lN:not(.styles__inverted___MX3NH) {
  background-color: #88d5c0;
  border-color: #88d5c0;
}

.styles__secondary___2l8lN:not(.styles__inverted___MX3NH):hover {
  background-color: #3ba08d;
  border-color: #3ba08d;
}

.styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__text___1kh-4,
    .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 {
  color: #88d5c0;
}

.styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover {
  color: #3ba08d;
}

.styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon,
    .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon,
    .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon {
  fill: #88d5c0;
}

.styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon,
    .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon,
    .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon {
  fill: #3ba08d;
}

.styles__secondary___2l8lN {/* stylelint-enable */
}

.styles__warn___3tWBu {
  /* stylelint-disable function-whitespace-after */
}

.styles__warn___3tWBu:not(.styles__inverted___MX3NH) {
  background-color: #fbb552;
  border-color: #fbb552;
}

.styles__warn___3tWBu:not(.styles__inverted___MX3NH):hover {
  background-color: #dd7805;
  border-color: #dd7805;
}

.styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__text___1kh-4,
    .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 {
  color: #fbb552;
}

.styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover {
  color: #dd7805;
}

.styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon,
    .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon,
    .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon {
  fill: #fbb552;
}

.styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon,
    .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon,
    .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon {
  fill: #dd7805;
}

.styles__warn___3tWBu {/* stylelint-enable */
}

.styles__new___28c7_ {
  /* stylelint-disable function-whitespace-after */
}

.styles__new___28c7_:not(.styles__inverted___MX3NH) {
  background-color: #086dd7;
  border-color: #086dd7;
}

.styles__new___28c7_:not(.styles__inverted___MX3NH):hover {
  background-color: #0055bd;
  border-color: #0055bd;
}

.styles__new___28c7_:not(.styles__inverted___MX3NH).styles__text___1kh-4,
    .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 {
  color: #086dd7;
}

.styles__new___28c7_:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover {
  color: #0055bd;
}

.styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon,
    .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon,
    .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon {
  fill: #086dd7;
}

.styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon,
    .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon,
    .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon {
  fill: #0055bd;
}

.styles__new___28c7_ {/* stylelint-enable */
}

.styles__panic___3QTsj {
  /* stylelint-disable function-whitespace-after */
}

.styles__panic___3QTsj:not(.styles__inverted___MX3NH) {
  background-color: #d52536;
  border-color: #d52536;
}

.styles__panic___3QTsj:not(.styles__inverted___MX3NH):hover {
  background-color: #e25d68;
  border-color: #e25d68;
}

.styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__text___1kh-4,
    .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 {
  color: #d52536;
}

.styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover {
  color: #e25d68;
}

.styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon,
    .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon,
    .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon {
  fill: #d52536;
}

.styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon,
    .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon,
    .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon {
  fill: #e25d68;
}

.styles__panic___3QTsj {/* stylelint-enable */
}

.styles__dull___5FU0B {
  /* stylelint-disable function-whitespace-after */
}

.styles__dull___5FU0B:not(.styles__inverted___MX3NH) {
  background-color: #8993a5;
  border-color: #8993a5;
}

.styles__dull___5FU0B:not(.styles__inverted___MX3NH):hover {
  background-color: #505968;
  border-color: #505968;
}

.styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__text___1kh-4,
    .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 {
  color: #8993a5;
}

.styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover {
  color: #505968;
}

.styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon,
    .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon,
    .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon {
  fill: #8993a5;
}

.styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon,
    .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon,
    .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon {
  fill: #505968;
}

.styles__dull___5FU0B {/* stylelint-enable */
}

.styles__icon___32G-S,
  .styles__icon___32G-S:hover,
  .styles__text___1kh-4,
  .styles__text___1kh-4:hover,
  .styles__outlined___XFGp7,
  .styles__outlined___XFGp7:hover {
  background: none !important;
}

.styles__text___1kh-4,
  .styles__text___1kh-4:hover,
  .styles__icon___32G-S,
  .styles__icon___32G-S:hover {
  border: none !important;
}

.styles__inverted___MX3NH {
  border-color: white;
  background-color: white;
  color: #1c90ed
}

.styles__inverted___MX3NH:hover {
  background-color: rgba(255, 255, 255, .85);
  border-color: rgba(255, 255, 255, .85);
}

.styles__inverted___MX3NH.styles__outlined___XFGp7 .dicon, .styles__inverted___MX3NH.styles__text___1kh-4 .dicon {
  fill: white;
}

.styles__inverted___MX3NH.styles__outlined___XFGp7,
  .styles__inverted___MX3NH.styles__text___1kh-4 {
  color: white;
}

.styles__inverted___MX3NH.styles__text___1kh-4:hover {
  color: rgba(255, 255, 255, .85);
}

.styles__inverted___MX3NH.styles__outlined___XFGp7:hover {
  color: #1c90ed;
}

.styles__fullWidth___1IydQ {
  width: 100%;
}

.styles__skinny___3loaZ {
  /* Adjust for the skinnier border by adding more padding inside so the size is the same */
  padding: 1px 11px;
  border-width: 1px;
  font-weight: 600;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___13EAi {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___2VB7z {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2VB7z {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

/* stylelint-disable block-no-empty */

.dmenu {
  position: relative;
}

/* stylelint-enable */

.styles__container___2Og-W {
  display: inline-block;
  position: relative
}

.styles__container___2Og-W:not(.styles__opened___TQtir) .styles__backdrop___K-tpd {
  display: none !important;
}

.styles__opened___TQtir .styles__backdrop___K-tpd {
  position: fixed;
  background: transparent;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;

  /* Must be smaller than the magic carpet */
  z-index: 797;
}

.styles__menu___1qzbH {
  list-style: none;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  position: absolute;
  z-index: 798;
  background: white;
  border: 1px solid #f9f9fa;
  border-radius: 2px;
  padding: 8px 0;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
  width: 100%;
  min-width: 96px;
}

.styles__item___3pNSl {
  cursor: pointer;
  line-height: 2.4;
  padding: 0 20px
}

.styles__item___3pNSl:hover {
  background: #f9f9fa;
}

.styles__item___3pNSl.styles__disabled___1xuIl {
  color: #c4c8d1;
  pointer-events: none;
}

.styles__bottomBorder___3xOjs {
  border-bottom: 1px solid #e1e2e6;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___1HuoN {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___2Djn_ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2Djn_ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

@-webkit-keyframes styles__load8___2MM-e {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes styles__load8___2MM-e {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*
Top Nav:
- default avatar: white fingerprint
- personalized avatar: blue border

(1) Org list (2) Community Header Profile (3) Publisher Header Profile:
- personalized avatar: grey border
- the default avatar (i.e., the fingerprint): no border and is a blue fingerprint
*/

.styles__container___1-c9A {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

img.styles__avatar___3Wzgz {

  border-radius: 50%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

.styles__default___3Uxzu img.styles__avatar___3Wzgz {
    border: none;
    padding: 3px;
  }

.styles__greyBorder___3U4Fh img.styles__avatar___3Wzgz {
    border: 3px solid #e1e2e6;
  }

.styles__blueBorder___3wfrJ img.styles__avatar___3Wzgz {
    border: 3px solid #8bc7f5;
  }

.styles__placeholder___1CvzL {
  padding: 3px;

  -webkit-box-sizing: content-box;

          box-sizing: content-box;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___2NO2h {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___1LKF6 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1LKF6 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

.styles__accountMenu___20Ni2 {
  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;
}

.styles__accountMenu___20Ni2 ul {
    width: 190px;
    right: 0;
    top: 40px;
  }

.styles__accountMenu___20Ni2 ul li {
      line-height: 3;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.styles__accountMenuDropdown___a5Xjp {
  margin-left: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
}

.styles__expandable___1LbfJ {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0.7
}

.styles__expandable___1LbfJ:hover {
  opacity: 1;
}

.styles__expandable___1LbfJ .styles__username___gFFU4 {
    font-size: 14px;
    color: #ffffff;
    background-color: transparent;
    border: none;
    outline: none;
    overflow: hidden;
    font-weight: 500;
    min-width: 50px;
    max-width: 140px;
    text-overflow: ellipsis;
    padding-left: 8px;
}

.styles__expandable___1LbfJ .styles__avatar___171WY {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.styles__expandable___1LbfJ > svg {
    fill: #ffffff;
}

.styles__logout___1hE_u {
  color: #d52536;
}

@media only screen and (max-width: 960px) {
  .styles__avatar___171WY {
    display: none;
  }
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___29x9_ {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___3T03P {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3T03P {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

.styles__upgradeButton___235jO {
  color: #b85504;
  background-color: #fff4dc;
  border-radius: 4px;
  border: 2px solid #ffffff;
  padding: 4px 16px;
  font-weight: 700;
  line-height: 22px;
  cursor: pointer;
  height: 34px;
  min-width: 100px
}

.styles__upgradeButton___235jO:hover {
  background-color: #fce1a9;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___f82C3 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___3KO2C {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3KO2C {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

.styles__nav___1VPb7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 770px
}

.styles__nav___1VPb7.styles__loggedOut___3IZqw {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.styles__nav___1VPb7 .styles__navItem___CteOt {
    font-weight: 500;
    font-size: 14px;
    margin: 0 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    line-height: 35px;
}

.styles__nav___1VPb7 .styles__navItem___CteOt:hover {
  opacity: 0.8;
}

.styles__nav___1VPb7 .styles__navDropdown___qwR8E {
    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;
}

.styles__nav___1VPb7 .styles__navDropdown___qwR8E ul {
      width: 190px;
      right: 0;
      top: 40px;
    }

.styles__nav___1VPb7 .styles__navDropdown___qwR8E ul li {
        line-height: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.styles__nav___1VPb7 .styles__expandable___2P41L {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-right: 4px;
}

.styles__nav___1VPb7 .styles__expandable___2P41L > svg {
      fill: #ffffff;
    }

.styles__nav___1VPb7 .styles__menu___3vmYm {
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
            box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    background: #ffffff;
    position: absolute;
    overflow: auto;
    z-index: 999;
    max-width: 364px;
}

.styles__nav___1VPb7 .styles__signUpButton___yf-Wn {
    width: 180px;
    height: 36px;
    border: 2px solid #ffffff;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border-radius: 6px;
}

.styles__nav___1VPb7 .styles__signUpButton___yf-Wn:hover {
  background-color: #ffffff !important;
}

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

  .styles__nav___1VPb7 .styles__navItem___CteOt {
      margin: 0 6px;
  }
}

.styles__publisherCenterNavigation___1tHoW {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.styles__alignRight___383AP {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: auto;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___2J6e5 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___1vDsq {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1vDsq {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

/* flexbox sticky footer */

/* https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */

.styles__app___1o1RI {
  /* In development: make the app visible once css has loaded */
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  min-height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column
}

.styles__app___1o1RI.styles__noScroll___2cLFq {
  overflow-y: hidden;
  height: 100vh;
}

.styles__main___1pg40 {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 auto;
          flex: 1 auto;
  min-height: calc(100vh - 64px);
}

.styles__white___NRcyJ {
  background: #ffffff;
}

.styles__offWhite___YQoVI {
  background: #f9f9fa;
}

.styles__flexRow___2FYq7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.styles__grey___MVUF_ {
  background: #efeff2;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___1wT3O {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___2sXAU {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2sXAU {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

.styles__wrapper___2rXVf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.styles__img___yzf6i {
  margin: 32px 0 24px;
}

.styles__text___3mS6Z {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  text-align: center
}

.styles__text___3mS6Z a {
  text-decoration: none;
  cursor: pointer;
  color: #086dd7;
}

.styles__text___3mS6Z > div {
  padding-bottom: 12px;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles__wrapped___eIxo3 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes styles__fadein___3zJlU {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3zJlU {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

.styles__main___ReGd7 {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  overflow: hidden;
  left: 0;
  top: 0;
}

.styles__center___2YI_N {
  position: absolute !important;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media only screen and (min-width: 601px) {
  .styles__showTopnav___3qrNl {
    top: 64px;
  }

    .styles__showTopnav___3qrNl .styles__center___2YI_N {
      margin-top: -64px;
    }
}

@media only screen and (max-width: 600px) {
  .styles__showTopnav___3qrNl {
    top: 100px;
  }

    .styles__showTopnav___3qrNl .styles__center___2YI_N {
      margin-top: -100px;
    }
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.global__wrapped___1QO90 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@-webkit-keyframes global__fadein___1lfBH {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes global__fadein___1lfBH {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

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

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

html, body {
    min-height: 100%;
    font-size: 14px;

    /* https://goo.gl/WilEUt */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

body {
    overflow-x: hidden;
  }

h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 1em;
    margin-top: 1em;
  }

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #e1e2e6;
    margin: 1em 0;
    padding: 0;
  }

code {
    font-family: 'Roboto Mono', consolas, monaco, monospace;
  }

a {
    color: inherit;
  }

/* Helpers */

.wrapped {
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
  }

@media (min-width: 600px) {

  .wrapped {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.wrapped {
    -webkit-box-flex: 1;
        -ms-flex: 1 auto;
            flex: 1 auto;
}

a.unstyled {
    text-decoration: none;
    color: inherit;
}

a.unstyled:visited {
  color: inherit;
}

.headline {
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
}

.title {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.subhead {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 24px;
}

.pageTitle {
    font-size: 24px;
    line-height: 32px;
    color: #393f49;
    font-weight: 600;
}

.boldContent {
    font-size: 14px;
    line-height: 20px;
    color: #393f49;
    font-weight: 500;
}

.content {
    font-size: 14px;
    line-height: 20px;
    color: #393f49;
}

.tertiaryContent {
    font-size: 12px;
    line-height: 16px;
    color: #393f49;
}

.hidden {
    display: none !important;
}

.flexCentered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.Select-menu-outer {
    z-index: 5 !important;
}