/* 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);
      }
    }

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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 #dddddd;
      border-bottom: 1px solid #dddddd;
    }

.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 #dddddd;
      border-top: 1px solid #dddddd;
    }

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

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

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

.styles__tooltipContainer___2FgdK .styles__darkTheme___1gOPZ .dTooltip-inner {
        background: #27343b;
        color: #ffffff;
      }

.styles__tooltipContainer___2FgdK .styles__darkTheme___1gOPZ .dTooltip-arrow {
        background: #27343b;
      }

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___1TjcN {
  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___310Wd {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___310Wd {
  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___3tnib {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__modalClass___30qQ1 {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
  padding: 32px
}

.styles__modalClass___30qQ1:focus {
  outline-width: 0;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: #2496ed;
  border-color: #2496ed;
}

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

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

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

.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: #2496ed;
}

.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: #066da5;
}

.styles__primary___3MhKY {/* stylelint-enable */
}

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

.styles__secondary___2l8lN:not(.styles__inverted___MX3NH) {
  background-color: #70c9a0;
  border-color: #70c9a0;
}

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

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

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

.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: #70c9a0;
}

.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: #00a2a1;
}

.styles__secondary___2l8lN {/* stylelint-enable */
}

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

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

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

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

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

.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: #f7d933;
}

.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: #ceaf00;
}

.styles__warn___3tWBu {/* stylelint-enable */
}

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

.styles__new___28c7_:not(.styles__inverted___MX3NH) {
  background-color: #007bff;
  border-color: #007bff;
}

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

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

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

.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: #007bff;
}

.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: #2496ed;
}

.styles__new___28c7_ {/* stylelint-enable */
}

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

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

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

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

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

.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: #e12b0c;
}

.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: #bf3b42;
}

.styles__panic___3QTsj {/* stylelint-enable */
}

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

.styles__dull___5FU0B:not(.styles__inverted___MX3NH) {
  background-color: #8f9ea8;
  border-color: #8f9ea8;
}

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

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

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

.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: #8f9ea8;
}

.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: #445d6e;
}

.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: #007bff
}

.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: #007bff;
}

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

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: #2496ed;
}

.styles__secondary___11gMY {
  fill: #70c9a0;
}

.styles__warn___3tokU {
  fill: #f7d933;
}

.styles__panic___2ngky {
  fill: #e12b0c;
}

.styles__dull___cV3u9 {
  fill: #8f9ea8;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___j5itR {
  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___odqcb {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___odqcb {
  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___1N0jX {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__hero___3OHn- {
  text-align: center;
  margin: 60px 0 40px;
}

.styles__hero___3OHn- .styles__title___micR5 {
    font-size: 38px;
    font-weight: bold;
  }

.styles__modalWrapper___2dPu2 {
  padding: 70px;
}

.styles__modal___1z-Sw {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 80px;
}

.styles__modal___1z-Sw .styles__modalTitle___1S99g {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }

.styles__modal___1z-Sw .styles__icon___8hmfd {
    margin: auto;
    width: 83px;
    height: 83px;
    margin-bottom: 24px;
  }

.styles__modal___1z-Sw p {
    margin-bottom: 60px;
  }

.styles__modal___1z-Sw .styles__buttons___1QQMq {
    margin: auto;
  }

.styles__content___1aJuq {
  border: 1px solid #e0e4e7;
  border-radius: 2px;
  padding: 56px;
  background: #ffffff;

  width: 740px;
  margin: auto auto 12px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.styles__buttons___1QQMq {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}

.styles__error___2HGML {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
  margin: 8px 8px 0 0;
  color: #bf3b42;
}

.styles__providerIcon___3i3yr {
  fill: #8f9ea8;
}

.styles__checkIcon___18dnG {
  position: absolute;
  left: -2px;
  top: 0;
  fill: #aae8d8;
}

.styles__checkIcon___18dnG > svg {
    width: 20px;
    height: 18px;
  }

.styles__feature___3Mmpp {
  position: relative;
  margin-bottom: 12px;
  text-align: left;
  padding-left: 24px;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___5LoXx {
  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___3uOxJ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3uOxJ {
  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___1STHQ {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__hero___3DVXj {
  text-align: center;
  margin: 60px 0 40px;
}

.styles__hero___3DVXj .styles__title___20L8u {
    font-size: 38px;
    font-weight: bold;
  }

.styles__content___3GJqi {
  border: 1px solid #e0e4e7;
  border-radius: 2px;
  padding: 56px;
  background: #ffffff;

  width: 740px;
  margin: auto auto 12px auto;
  margin-bottom: 140px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.styles__text___3jUfx {
  margin: 0 8px;
}

.styles__buttons___3drDF {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}

.styles__wide___3cbqK {
  padding-left: 48px;
  padding-right: 48px;
}

.styles__infoList___24h40 {
  margin-top: 40px;
  padding-left: 16px;
}

.styles__infoList___24h40 li {
    padding-left: 16px;
    margin-bottom: 40px;
  }

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___Vphmu {
  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___3PdYf {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3PdYf {
  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___37xGY {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__card___16ovJ {
  background: #fbfbfc;
  border: 1px solid #e1e2e6;
  border-radius: 2px;
  padding: 32px;
}

.styles__newDesign___1bl2t {
  background: #ffffff;
  margin-bottom: 12px;
}

.styles__newDesign___1bl2t .styles__title___2cl7H {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 24px;
  }

.styles__warn___3C1Xn {
  background: #fffbdd;
  border: 1px solid #ffe881;
  padding: 32px;
}

.styles__title___2cl7H {
  margin: 0;
  margin-bottom: 12px;
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
}

.styles__label___13A5g {
  display: inline-block;
  margin-left: 20px;
}

.styles__card___16ovJ.styles__disabled___9JZtT {
  opacity: 0.5;
  min-height: 200px;
}

.styles__defaultText___3Rw-A {
  text-align: center;
  font-style: italic;
  margin-top: 20px;
}

.styles__card___16ovJ.styles__shy___15ciY {
  padding: 16px;
}

.styles__card___16ovJ.styles__shy___15ciY .styles__title___2cl7H {
    margin-bottom: 20px;
    text-transform: uppercase;

    font-size: 14px;

    line-height: 20px;

    font-weight: 400;

    letter-spacing: normal;
  }

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___2FjBc {
  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___3I4xd {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3I4xd {
  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___353Tq {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__main___2b7eu {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 14px !important;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___2Yttp {
  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___2yMYt {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2yMYt {
  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___4Ytqd {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__alert___1gTLv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  border-radius: 4px;
  background-color: #cccccc;
  color: #ffffff;
  fill: #ffffff;

  margin-bottom: 24px;
}

.styles__message___2moqW {
  font-weight: 600;
}

.styles__closeIcon___ISA-k {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 26px;
  line-height: 44px;
  font-weight: 300;
  padding: 0 13px;
  cursor: pointer;
}

/* sizes */

.styles__alert___1gTLv.styles__medium___3Ly3I {
  min-height: 44px;
  padding: 10px 40px 10px 16px;
}

.styles__alert___1gTLv.styles__medium___3Ly3I .styles__message___2moqW {
    font-size: 14px;
    line-height: 24px;
  }

.styles__alert___1gTLv.styles__medium___3Ly3I .styles__description___3n-m6 {
    font-size: 12px;
    line-height: 18px;
  }

.styles__alert___1gTLv.styles__medium___3Ly3I .styles__icon___hyph8 {
    margin-right: 10px;
    height: 24px;
  }

.styles__alert___1gTLv.styles__large___3_rxu {
  padding: 16px 20px 16px 20px;
}

.styles__alert___1gTLv.styles__large___3_rxu > * {
    -ms-flex-item-align: center;
        align-self: center;
  }

.styles__alert___1gTLv.styles__large___3_rxu .styles__text___1mc0N {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }

.styles__alert___1gTLv.styles__large___3_rxu .styles__message___2moqW {
    font-size: 16px;
  }

.styles__alert___1gTLv.styles__large___3_rxu .styles__description___3n-m6 {
    font-size: 14px;
    line-height: 20px;
    margin-top: 4px;
  }

.styles__alert___1gTLv.styles__large___3_rxu > .styles__action___30BeG {
    /* actionPlacement="right" */

    -ms-flex-negative: 0;

        flex-shrink: 0;
  }

.styles__alert___1gTLv.styles__large___3_rxu .styles__icon___hyph8 {
    margin-right: 16px;

    width: 32px;
    height: 32px;
  }

.styles__alert___1gTLv.styles__large___3_rxu .styles__icon___hyph8 img,
    .styles__alert___1gTLv.styles__large___3_rxu .styles__icon___hyph8 svg {
      width: 32px;
      height: 32px;
    }

.styles__text___1mc0N > .styles__action___30BeG {
  /* actionPlacement="below" */

  margin-top: 4px;
}

/* alert types */

.styles__success___3rW0I {
  background-color: #54d1b0;
}

.styles__info___26JqH {
  background-color: #f3f9ff;
  color: #27343b;
  border: 1px solid rgb(204, 229, 255);
}

.styles__info___26JqH .styles__icon___hyph8 {
    fill: #576167;
  }

.styles__warning___r2wHs {
  background-color: #fef5c3;

  color: #d4611d;
  border: 1px solid #db7432;
}

.styles__warning___r2wHs .styles__icon___hyph8 {
    fill: #d4611d;
  }

.styles__warning___r2wHs .styles__text___1mc0N {
    /*
      the contrast of dark orange on light orange is low;
      bold the text to make it easier to read
    */
    font-weight: 600;
  }

.styles__danger___mgONa {
  background-color: #ff9d66;
}

.styles__error___TF6ai {
  background-color: rgba(248, 160, 154, .5);
  border: 1px solid #8c0607;
  color: #8c0607;
  fill: #8c0607;
}

.styles__error___TF6ai .styles__icon___hyph8 {
    fill: #8c0607;
  }

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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 #e7e8e9;
  }

.styles__blueBorder___3wfrJ img.styles__avatar___3Wzgz {
    border: 3px solid #6bc3f3;
  }

.styles__placeholder___1CvzL {
  padding: 3px;

  -webkit-box-sizing: content-box;

          box-sizing: content-box;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___dgX5O {
  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___3hvID {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3hvID {
  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___3C4bD {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__header___2DnGz {
  background-color: #ffffff;
  padding-top: 50px;
}

.styles__badge___1ISGd {
  margin-left: 12px;
}

.styles__infoSection___1UTm3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 0 auto;
  padding-top: 16px;
}

.styles__infoSectionCTA___32ouv {
  max-height: 130px;
}

.styles__photoWrapper___3q6TR {
  width: 160px;
  height: 160px;
}

.styles__photoWrapper___3q6TR {
  min-width: 160px;
  position: relative;
  bottom: 40px;
  overflow: hidden;
  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;
}

.styles__photoWrapper___3q6TR > * {
    width: 80px;
}

.styles__info___1Rd2O {
  color: #445d6e;
}

@media only screen and (max-width: 600px) {
  .styles__infoSection___1UTm3 {
    -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;
    padding-bottom: 32px;
  }
}

@media only screen and (min-width: 601px) {
  .styles__infoSection___1UTm3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    height: 176px;
    margin: 0 auto;
    padding-top: 16px;
  }

  .styles__info___1Rd2O {
    padding-left: 16px;
  }
}

.styles__photo___3Ysbi {
  width: 152px;
  height: 152px;
}

.styles__photo___3Ysbi {
  background-size: cover;
  background-position: 50%;
}

.styles__fallback___2uv23 {
  width: 80px;
  height: 80px;
}

.styles__name___14uxE {
  font-size: 22px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: 600;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.styles__name___14uxE > *:not(:first-child) {
    margin-left: 12px;
  }

.styles__editLink___3a5pj {
  margin-left: 8px;
}

.styles__description___2DIwK {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  margin: 8px 0 12px 0;
  max-height: 40px;
  overflow: hidden;
}

.styles__details___3dj2a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  color: #8f9ea8;
  margin-bottom: 8px;
}

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

.styles__detail___1k4W1 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 20px 4px 0;
}

.styles__detail___1k4W1 a {
    text-decoration: none;
  }

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

.styles__detailIcon___1Au6I {
  margin-right: 4px;
  fill: #8f9ea8;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3S3d1 {
  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___16Gya {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___16Gya {
  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___tzxuK {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__hero___2SWAu {
  text-align: center;
  margin: 60px 0 40px;
}

.styles__hero___2SWAu .styles__title___k5TPr {
    font-size: 38px;
    font-weight: bold;
  }

.styles__content___2ixAm {
  width: 740px;
  margin: auto;
  margin-bottom: 140px;
}

.styles__title___k5TPr {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0;
}

.styles__subTitle___28upZ {
  font-size: 18px;
  font-weight: 400;
  margin: 15px 0 2px;
}

.styles__steps___1nFth {
  padding-left: 20px;
}

.styles__steps___1nFth li {
    margin-bottom: 4px;
  }

.styles__warningTitle___2v0iy {
  font-size: 14px;
  margin-top: 0;
  color: #ef4a53;
  margin-left: 8px;
}

.styles__warningIcon___1_sDK {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 5px;
}

.styles__warningIcon___1_sDK svg {
    margin-bottom: -4px;
  }

.styles__boldText___3M-GF {
  font-weight: 700;
}

.styles__infoText___hF_PN {
  margin: 2px 0 15px;
  font-size: 14px;
  line-height: 20px;
}

.styles__convertButtons___21viS {
  text-align: right;
}

.styles__idInput___2JHdO {
  margin-top: 12px;
  margin-bottom: 32px;
}

.styles__errorMessage___39ttf {
  font-size: 13px;
  color: #ef4a53;
}

.styles__successMessage___30xoi {
  text-align: center;
  padding: 10px 0 20px;
}

.styles__successMessage___30xoi .styles__successTitle___1f6y2 {
    font-size: 18px;
    color: #70c9a0;
  }

.styles__boldItalic___15GQ4 {
  font-weight: 600;
  font-style: italic;
}

.styles__provider___3may5 {
  display: inline-block;
  text-align: center;
  margin-left: 12px;
  margin-right: 16px;
  color: #c0c9ce;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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 #2496ed;
  border-bottom: 1px solid #2496ed;
  border-left: 1px solid #2496ed;
  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 #2496ed;
  border-bottom: 1.5px solid #2496ed;
  border-left: 1.5px solid #2496ed;
  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 #2496ed;
  border-bottom: 2.25px solid #2496ed;
  border-left: 2.25px solid #2496ed;
  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 #2496ed;
  border-bottom: 3px solid #2496ed;
  border-left: 3px solid #2496ed;
  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 #2496ed;
  border-bottom: 5px solid #2496ed;
  border-left: 5px solid #2496ed;
  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 #2496ed;
  border-bottom: 7.5px solid #2496ed;
  border-left: 7.5px solid #2496ed;
  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: #2496ed;
  border-bottom-color: #2496ed;
  border-left-color: #2496ed;
}

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

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___1wCCf {
  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___-zFes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___-zFes {
  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___gD6d_ {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__breadcrumbs___3YifC {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__breadcrumb___6kv6E {
  position: relative;
  color: rgba(37, 67, 86, .7);
  padding: 11px 11px 11px 22px;
}

.styles__breadcrumbLink___NJ94S {
  text-decoration: none
}

.styles__breadcrumbLink___NJ94S:hover {
  color: #2496ed;
}

/* First breadcrumb does not need as much left padding */

.styles__breadcrumb___6kv6E:first-child {
  padding: 11px 5.5px 11px 11px;
}

.styles__breadcrumb___6kv6E:last-child {
  color: #2496ed;
}

/* Arrow background */

.styles__breadcrumb___6kv6E::after {
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -21px;
  left: 100%;
  z-index: 3;
}

/* Arrow border */

.styles__breadcrumb___6kv6E::before {
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-left: 10px solid rgba(187, 187, 187, .3);
  position: absolute;
  top: 50%;
  margin-top: -21px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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.
*/

.utilities__wrapped___1Xpt6 {
  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 utilities__fadein___3Y4Qv {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes utilities__fadein___3Y4Qv {
  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 utilities__load8___19xxG {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___167h5 {
  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___C-8sR {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___C-8sR {
  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___yTJKR {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__container___Gjy1X {
}

.styles__contextNav___2av_F {
  height: 42px;
  background: white;
  border-bottom: 1px solid #e0e4e7;
}

.styles__breadcrumbs___2AXNW {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: #2496ed;
}

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

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___2aeUn {
  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___1WPex {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1WPex {
  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___27EYe {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__chip___3ZtYi {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #f1f4f6;
  border-radius: 2px;
  color: #81939f;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 12px;
  line-height: 12px;
  padding: 6px 10px;
}

.styles__clickable___1fzXr {
  cursor: pointer;
  text-decoration: none
}

.styles__clickable___1fzXr:hover {
  opacity: 0.7;
}

.styles__withIcon___2uxjQ {
  background-color: #e0e4e7;
  color: #445d6e;
  font-size: 13px;
  line-height: 13px;
  padding: 10px 12px;
}

.styles__icon___3K8bU {
  width: 13px;
  height: 13px;
}

.styles__icon___3K8bU {
  margin-right: 10px;
  fill: #445d6e;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3fGdU {
  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___2FBXh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2FBXh {
  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___2WGan {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__pullCount___2MIKx {
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #445d6e;
  fill: #445d6e;
  font-weight: bold;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__pullText___24t9w {
  font-weight: normal;
  margin-left: 4px;
  margin-right: 8px;
}

.styles__pullNum___2TXDx {
  margin-left: 4px;
}

.styles__icon___2Jvs1 {
  font-size: 20px;
}

.styles__tiny___-Pb2p {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: 600;
}

.styles__tiny___-Pb2p .styles__icon___2Jvs1 {
    font-size: 14px;
  }

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3-YTs {
  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___1uFK5 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1uFK5 {
  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___A_wdT {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* hide the ALT text in certain browsers (firefox) */

.styles__hideAltText___IyemE {
  color: transparent;
}

/*
 * Make sure there is no flash between when the image calls onLoad() and the
 * loaded styles are applied
 */

.styles__hideFadeInFlash___29bQM {
  opacity: 0;
}

.styles__fadeInImage___dfisB {
  -webkit-animation: styles__fadein___1uFK5 0.6s;
          animation: styles__fadein___1uFK5 0.6s;
}

.styles__img___1KBGq {
  /*
    The img this component renders is wrapped in a span. If that span is
    positioned with specific dimensions, we want the image to match them.
  */
  width: 100%;
  height: auto;
}

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

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___1AmST {
  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___iiiiH {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___iiiiH {
  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___OnVhH {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* The minimal set of changes to properly display formatted markdown
   A lot of these styles are based on https://github.com/sindresorhus/github-markdown-css/blob/gh-pages/github-markdown.css
*/

.dMarkdown {
    -webkit-text-size-adjust: 100%;
       -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
            text-size-adjust: 100%;
    line-height: 1.5;
    color: #244357;
    font-size: 14px;
    word-wrap: break-word;
  }

.dMarkdown * {
      word-wrap: break-word;
    }

.dMarkdown h1, .dMarkdown h2 {
      padding-bottom: 5px;
      border-bottom: 1px solid #eaecef;
    }

.dMarkdown .button {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: relative;
      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;
      text-decoration: none;
      overflow: hidden;
      -webkit-transition: background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s 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.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      padding: 0 10px;
      margin: 10px 0;
      min-width: 88px;
      line-height: 32px;
      min-height: 32px;
      border-width: 2px;
      border-radius: 3px;
      font-size: 14px;
      color: #354a5b
    }

.dMarkdown .button:hover {
  border-color: #8f9ea8;
  color: #8f9ea8;
}

.dMarkdown .darkblue-btn {
      background-color: #2496ed;
      border-color: #2496ed;
      color: #ffffff
    }

.dMarkdown .darkblue-btn:hover {
  border-color: #1798de;
  background-color: #1798de;
  color: #ffffff;
}

.dMarkdown pre {
      word-wrap: normal;
      padding: 16px;
      overflow: auto;
      font-size: 85%;
      line-height: 1.45;
      background-color: #fbfbfc;
      border: 1px solid ##e4e7ea;
      border-radius: 3px;
    }

.dMarkdown code {
      padding: 0.1em 0.4em;
      background-color: #f5f5f5;
      font-size: 0.95em;
      border-radius: 1px;
    }

.dMarkdown a {
      text-decoration: none;
      color: #0f6c9e;
    }

.dMarkdown a:hover {
      text-decoration: underline;
    }

.dMarkdown pre > code {
      padding: 0;
      margin: 0;
      font-size: 100%;
      line-height: 1.75;
      word-break: normal;
      white-space: pre;
      background: transparent;
      border: 0;
    }

.dMarkdown p {
      line-height: 1.75;
    }

.dMarkdown li {
      margin-top: 16px;
    }

.dMarkdown table {
      display: block;
      width: 100%;
      overflow: auto;
      margin-top: 0;
      margin-bottom: 16px;
      border-spacing: 0;
      border-collapse: collapse;
    }

.dMarkdown td, .dMarkdown th {
      padding: 0;
    }

.dMarkdown table th {
      font-weight: 600;
    }

.dMarkdown table th, .dMarkdown table td {
      padding: 6px 13px;
      border: 1px solid #dfe2e5;
    }

.dMarkdown table tr {
      background-color: #ffffff;
      border-top: 1px solid #c6cbd1;
    }

.dMarkdown table tr:nth-child(2n) {
      background-color: #f6f8fa;
    }

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___1eZx5 {
  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___2F_Rt {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2F_Rt {
  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___2tqlk {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__code___1W7rB {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #27343b;
  border-radius: 2px;
  height: 44px;
}

.styles__lightCode___11ONt {
  background-color: #f1f4f6;
}

.styles__copyable___2FDeL {
  cursor: pointer;
}

.styles__darkInput___tirFS {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;

  unicode-bidi: embed;
  border: none;
  border-radius: 2px;

  padding: 4px 0 4px 12px;
  background-color: #27343b;

  width: 100%;
  overflow-x: auto;
  color: #ffffff;
}

.styles__lightInput___3wuJL {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;

  unicode-bidi: embed;
  border: none;
  border-radius: 2px;

  padding: 5px 12px;
  background-color: #f1f4f6;

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  -webkit-box-flex: 1;
      -ms-flex: auto 1 1;
          flex: auto 1 1;
}

.styles__button___3F4OV {
  color: white;
  border-radius: 0;
}

.styles__lightCode___11ONt .styles__button___3F4OV {
    color: #007bff;
  }

.styles__small___3HwIa {
  height: 28px;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___10kvQ {
  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___1F0Xz {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1F0Xz {
  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___1OydJ {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__pullCommand___1e-gY {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #8f9ea8;
  margin-bottom: 12px;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___2LpXv {
  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___1mgJ8 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1mgJ8 {
  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___30kuZ {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.Select-control {
    border-radius: 2px;
    border-color: #e0e4e7 !important;
  }

.is-disabled .Select-control {
    cursor: not-allowed;
  }

.Select-menu-outer {
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    border: 1px solid #e0e4e7;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
  }

.Select-option {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: #ffffff;
    cursor: pointer;
    display: block;
    padding: 8px 10px
  }

.Select-option:last-child {
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}

.Select-option.is-focused {
  background: #f7f7f8;
}

/* Error text is hidden by default */

.styles__errorText___1k_sp {
  display: none;
  color: #e12b0c;
  font-size: 12px;
  line-height: 12px;
  height: 12px;
  margin-top: 4px;
}

.styles__visible___kJi7_ {
  display: block;
}

/* same gray as textField floatingLabelColor */

.styles__sectionHeader___O2fp- {
  color: #6a7c94;
  font-size: 10px;
  margin-bottom: 8px;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3-dvy {
  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___1go7f {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1go7f {
  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___3Prs6 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__options___34s_R {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.styles__optionsRadio___eafJS {
  margin: 12px 0;
}

.styles__dropdown___wJQKi {
  margin-bottom: 16px;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3p08Y {
  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___K7qtP {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___K7qtP {
  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___2sDMF {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__starCount___PjVah {
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #445d6e;
  fill: #445d6e;
  font-weight: bold;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__clickable___wgil_ {
  cursor: pointer;
}

.styles__spinner___2PHNs {
  background-color: #ffffff;
}

.styles__starNum___2YkOL {
  background: #ffffff;
  margin-left: 4px;
}

.styles__icon___4_It0 {
  font-size: 22px;
}

.styles__tiny___3oFmP {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: 600;
}

.styles__tiny___3oFmP .styles__icon___4_It0 {
    font-size: 22px;
  }

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3RTTD {
  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___oWz4B {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___oWz4B {
  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___iCvYG {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__logo___1_hKw {
  width: 120px;
  height: 120px;
}

.styles__logo___1_hKw {
  border-radius: 2px;
}

@media only screen and (min-width: 601px) {
  .styles__header___2pQKr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-bottom: 16px;
  }
}

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

.styles__productInfoSection___1pJeX {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media only screen and (max-width: 600px) {
  .styles__productInfoSection___1pJeX {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
    .styles__productInfoSection___1pJeX .styles__productInfo___3pzZk {
      margin-left: 0;
    }
}

.styles__productInfo___3pzZk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: 24px;
}

.styles__productInfo___3pzZk > div {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 100%;
          flex: 1 0 100%;
}

.styles__productNameLine___2QJsS {
  margin: 0 0 8px 0;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__productNameLine___2QJsS h1 {
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: normal;
    margin: 0;
  }

.styles__productNameLine___2QJsS > .styles__profileLink___22_gC,
  .styles__productNameLine___2QJsS > .styles__productNameBadge___333h6 {
    margin-left: 12px;
  }

.styles__productNameLine___2QJsS .styles__productNameStar___UV_cC {
    /* less spacing than other items in this container because StarCount has intrinsic padding */
    margin-left: 4px;
  }

.styles__publisherName___7j1AT {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  margin-bottom: 8px;
}

.styles__productDescription___2vi1Q {
  margin-bottom: 8px;
}

.styles__fallbackElement___Fl-e7 {
  width: 120px;
  height: 120px;
}

.styles__fallbackElement___Fl-e7 {
  fill: #8f9ea8;/* This element *sometimes* appears in a flex layout. If it does, it
    shouldn't shrink. */
  -ms-flex-preferred-size: 120px;
      flex-basis: 120px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.styles__planName___3IpD_ {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: 600;
}

.styles__pullCommand___2WJ-i {
  width: 375px;
}

@media only screen and (max-width: 600px) {
  .styles__pullCommand___2WJ-i {
    margin: 20px 0;
  }
}

.styles__profileLink___22_gC {
  text-decoration: none;
  color: #2496ed;
  cursor: pointer;
}

.styles__profileLink___22_gC:hover {
  color: #1798de;
}

.styles__profileLink___22_gC {
  font-weight: 600;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___1l-EO {
  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___1JKcg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1JKcg {
  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___1Xoj7 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__stats___1FWIQ {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 28px;
  margin-bottom: 20px;
}

.styles__stats___1FWIQ div:first-child {
    margin-right: 20px;
  }

.styles__chip___OyzWo {
  margin: 0 10px 16px 0;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___1fbnu {
  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___JxeiB {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___JxeiB {
  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___vnyM6 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Backgrounds and Layout */

.styles__fullWhiteBackground___3DkEY {
  background: #ffffff;
  border-bottom: solid 1px #e0e4e7;
}

.styles__header___1VKQQ {
  margin-bottom: 24px;
}

@media only screen and (min-width: 601px) {
  .styles__splitSections___3jvin {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .styles__splitSections___3jvin > * {
    lost-column-cycle: 2;
  }
  .styles__splitSections___3jvin > *:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(66.6% - 4px);
    max-width: calc(66.6% - 4px);
    width: calc(66.6% - 4px);
  }
  .styles__splitSections___3jvin > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__splitSections___3jvin > *:nth-child(1):last-child {
    margin-right: 0;
  }
  .styles__splitSections___3jvin > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__splitSections___3jvin > *:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(33.3% - 8px);
    max-width: calc(33.3% - 8px);
    width: calc(33.3% - 8px);
  }
  .styles__splitSections___3jvin > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__splitSections___3jvin > *:nth-child(2):last-child {
    margin-right: 0;
  }
  .styles__splitSections___3jvin > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__rightBorder___2bUo6 {
    border-right: solid 1px #e0e4e7;
    padding-right: 12px;
  }
}

@media only screen and (max-width: 600px) {
  .styles__rightBorder___2bUo6 {
    padding-left: 12px;
    padding-bottom: 12px;
  }
}

.styles__descriptionSection___323uc {
  padding-top: 48px;
}

.styles__topPadding___1_WPS {
  padding-top: 48px;
}

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

@media (min-width: 600px) {

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

.styles__loading___1fwXk {
  -webkit-box-flex: 1;
      -ms-flex: 1 auto;
          flex: 1 auto;
  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;
  padding-top: 32px;
}

/* Versions and Subscriptions */

.styles__versionsAndSubscriptions___3RDVm {
  padding-left: 20px;

  /* Make sure children can take up all vertical space */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media only screen and (max-width: 600px) {
  .styles__versionsAndSubscriptions___3RDVm {
    padding: 12px;
  }
}

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

.styles__link___3FnJc {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #8f9ea8;
  margin-right: 24px;
}

.styles__flexRow___1cucl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__shield___RX-L9 {
  fill: #00b6b5;
  margin-right: 8px;
}

.styles__pullCommand___lFodR {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #8f9ea8;
  margin-bottom: 12px;
}

.styles__pullCode___1LdAt {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  background-color: #27343b;
  color: #ffffff;
  padding: 8px 12px;
  white-space: nowrap;
  overflow-x: auto;
  width: 100%;
  height: 44px;
}

/* Description */

.styles__description___2kl0t {
  margin-bottom: 32px;
}

.styles__productDescription___Dg5sR > *:first-child {
    margin-top: 0;
  }

.styles__productDescription___Dg5sR > *:last-child {
    margin-bottom: 0;
  }

/* Do not let a child img element stretch outside of the parent's bounds */

.styles__productDescription___Dg5sR img {
    max-width: 100%;
  }

/* Screenshots */

.styles__screenshots___1rDji {
  margin-bottom: 32px;
}

.styles__screenshot___3Ozy2 {
  width: 100%;
  margin-bottom: 16px;
}

.styles__fallbackElementScreenshot___1CjKn {

  font-size: 14px;

  line-height: 20px;

  font-weight: 400;

  letter-spacing: normal;
  background-color: #e0e4e7;
  color: #8f9ea8;
  padding: 48px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 2px;
  font-style: italic;
}

/* Links */

.styles__partnerLinks___10m5i {
  text-decoration: underline;
  color: #8f9ea8
}

.styles__partnerLinks___10m5i > a {
  display: block;
  margin-bottom: 16px;
}

.styles__sectionTitle___2NTQJ {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  margin-bottom: 16px;
}

/* Tabs + Ratings */

.styles__tabsWrapper___dovD0 {
  margin-bottom: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.styles__tabContent___2U0ZX {
  padding-bottom: 60px;
}

@media only screen and (max-width: 600px) {
  .styles__tabContent___2U0ZX {
    padding-bottom: 0;
  }
}

.styles__tabWidth___3cKM- {
  width: 100%
}

.styles__tabWidth___3cKM-:hover {
  cursor: pointer;
}

.styles__ratingTitle___E6hma {
  display: inline-block;
}

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

.styles__tab___3jGIJ {
  min-width: 100px;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  color: #445d6e
}

.styles__tab___3jGIJ:hover {
  color: #2496ed;
}

.styles__selected___2QocU {
  font-weight: 600;
  color: #2496ed;
  border-bottom: 2px solid #2496ed;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___2qeZ3 {
  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___3lzLL {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3lzLL {
  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___1ALt6 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

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

.styles__page___24Abd {
  text-decoration: none;
  color: inherit;
}

.styles__page___24Abd:visited {
  color: inherit;
}

.styles__page___24Abd {
  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;
  border-radius: 2px;
  color: #8f9ea8;
  background-color: #e0e4e7;
  font-size: 12px;
  margin-right: 4px;
  cursor: pointer;
}

.styles__page___24Abd:last-child {
  margin-right: 0;
}

.styles__page___24Abd:first-child:not(.styles__chevron___13BO3) {
  margin-left: 56px;
}

.styles__page___24Abd:last-child:not(.styles__chevron___13BO3) {
  margin-right: 56px;
}

.styles__chevron___13BO3 {
  fill: #8f9ea8;
}

.styles__firstPage___2aaoC > svg {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.styles__nextPage___MEbmC > svg {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.styles__previousPage___1dunb > svg {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.styles__currentPage___1MBl0 {
  background-color: #2496ed;
  color: #ffffff;
}

.styles__paginationCentered___3JgJW {
  list-style: none;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.styles__limitedText___HDSWL {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  margin-top: 0;
  margin-left: 32px;
  margin-right: 32px;
  font-style: italic;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___2nNba {
  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___StwJI {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___StwJI {
  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___KpCCq {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__container___1hTq9 {
  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___1hTq9:not(.styles__withBorder___3ZCOx) {/* This isn't ideal - most components shouldn't have external margins.
      It's to preserve existing behaviour after a refactor. */
  margin: 16px 0;
}

.styles__withBorder___3ZCOx {
  border: 1px dotted #90a0ac;

  padding: 16px 0;
}

.styles__title___1c5lz {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: 600;
  margin: 0 0;
}

.styles__subtitle___LAFLH {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  margin-top: 12px;
  color: #7d94a5;
}

.styles__icon___SLQhj {
  width: 56px;
  height: 56px;
}

.styles__icon___SLQhj {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  fill: #8f9ea8;
  border: 1px solid rgba(143, 158, 168, .2);
  border-radius: 50%;
  margin-bottom: 12px;
}

.styles__cta___2oH9L {
  margin-top: 12px;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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.
*/

.CheckboxIcons__wrapped___AsajT {
  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 CheckboxIcons__fadein___3qdCI {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes CheckboxIcons__fadein___3qdCI {
  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 CheckboxIcons__load8___1_nZK {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.CheckboxIcons__fill___38jjR {
  fill: #ffffff;
}

/*
    Ideally we'd set this in the `classes` prop of the theme, per

    https://v1.material-ui.com/customization/themes/#properties
    https://v1.material-ui.com/api/checkbox/#css-api

    ...but `classes` doesn't seem to have any effect when specified as a
    default prop there, so for the moment I'm just setting a `classes` prop
    whenever I use a disable-able Checkbox -MH
  */

.CheckboxIcons__disabled___2nOnI .CheckboxIcons__fill___38jjR {
    fill: #e0e4e7;
  }

/* SearchInput styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___29Z7P {
  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___Dn3Ve {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___Dn3Ve {
  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___2DTL0 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__search___2b26x {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #e0e4e7;
  background-color: #ffffff;
}

.styles__search___2b26x.styles__disabled___uZpyQ {
  cursor: not-allowed;
}

.styles__iconWrapper___3jGqi,
.styles__clearIconWrapper___30uOG {
  width: 18px;
  height: 18px;
}

.styles__iconWrapper___3jGqi {
  margin-left: 10px;
}

.styles__iconWrapper___3jGqi .styles__icon___1PIgZ {
    fill: #8f9ea8;
    width: 18px;
    height: 18px;
  }

.styles__clearIconWrapper___30uOG {
  margin-top: 2px;
  margin-right: 6px;
}

.styles__clearIconWrapper___30uOG .styles__icon___1PIgZ {
    fill: #8f9ea8;
    width: 8px;
    height: 8px;
  }

.styles__iconWrapper___3jGqi.styles__disabled___uZpyQ .styles__icon___1PIgZ,
.styles__clearIconWrapper___30uOG.styles__disabled___uZpyQ .styles__icon___1PIgZ {
  fill: #c0c9ce;
}

.styles__clearIconWrapper___30uOG:hover {
  cursor: pointer;
}

.styles__clearIconWrapper___30uOG:hover .styles__icon___1PIgZ {
    fill: #445d6e;
  }

.styles__clearIconWrapper___30uOG:hover.styles__disabled___uZpyQ {
  cursor: inherit;
}

.styles__clearIconWrapper___30uOG:hover.styles__disabled___uZpyQ .styles__icon___1PIgZ {
    fill: #c0c9ce;
  }

.styles__clearIconWrapper___30uOG:focus.styles__disabled___uZpyQ {
  outline: none;
}

.styles__hideClear___Df5xd {
  visibility: hidden;
}

.styles__field___140_5 {
  width: 100%;
  height: 100%;
  margin: 0 8px 0 6px;
  border: none;
  background-color: transparent;
  color: #445d6e;

  /* must explicitly set for FF otherwise it assumes 152px which is too wide */
  min-width: 100px;
}

.styles__field___140_5:focus {
  outline: none;
}

.styles__field___140_5.styles__disabled___uZpyQ {
  cursor: not-allowed;
  color: #c0c9ce;
}

/* ActionBar styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3Yau3 {
  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___152m9 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___152m9 {
  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___2E2p- {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Shared repotags component variables/mixins */

/**
 * NOTE: The 'components/common/Checkbox' component comes from MaterialUI. At some
 *  deeply-nested layer, Mui adds a right margin of 24px. The only way I've found
 *  to cut this out, so that the hit area for the checkbox actually maps to the
 *  visible area of the checkbox is by wrapping the checkbox in a div and setting
 *  its overflow to be hidden, and its size to be the visible size of the checkbox.
 */

/* space between ActionBar and TagList */

/**
 * TAG LIST
 */

/* horizontal (left/right) padding on content part of TagListItem */

/* vertical space between each TagListItem */

/* x-offset, y-offset, and blur radius for shadow on TagListItem hover */

/**
 * NOTE: These variables establish a flexbox-based grid system used through the
 *  tag list and into the image list within it. Seemed easier than also using
 *  CSS grid (i.e. grid to layout the TagItem, and flexbox to layout the ImageHeader
 *  and ImageListItem).
 */

/* checkbox */

/* image digest */

/* image architecture */

/* image OS */

/* size */

/* critical count */

/* major count */

/* minor count */

/**
 * IMAGE LIST
 */

/*
gutter between two columns where first column is right-aligned and second
 column is left-aligned
*/

/* vertical, between items */

/* min width for official images */

/* stylelint-disable function-calc-no-unspaced-operator, indentation */

/* stylelint-enable function-calc-no-unspaced-operator, indentation */

/* min width when vulnerabilities not shown (i.e. community images) */

.styles__bar___30vw8 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  min-width: 491px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-items: stretch;
  height: 36px;
  margin-right: 6px;
  margin-bottom: 12px;
  padding: 0;
}

.styles__actionButton___32bM9 {
  margin: 0;
}

.styles__selectAction___33C1X {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 40px;
  font-size: 12px !important;
}

.styles__selectAction___33C1X .styles__checkboxMask___HP6nl {
    width: 15px;
    height: 15px;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }

.styles__selectAction___33C1X .styles__checkbox___ddU_- {
    opacity: 0.4;
  }

.styles__selectAction___33C1X .styles__checkbox___ddU_-.styles__checked___rwqkS {
    opacity: 1;
  }

.styles__selectAction___33C1X .styles__checkboxIcon___163-9 {
    width: 15px;
    height: 15px;
  }

.styles__actionMenu___3L9Ct {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 150px;
}

.styles__filter___7Cc6R {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 200px;
  height: 100%;
  margin-right: auto;
}

.styles__filter___7Cc6R .styles__filterWrapper___3oa7u {
    height: 100%;
    background-color: #fbfbfc;
  }

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

.styles__sort___INa5b .styles__sortLabel___U4C7k {
    margin-right: 6px;
  }

.styles__sort___INa5b .styles__sortWrapper___1Mbkm {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
    width: 165px;
  }

.styles__bar___30vw8:hover .styles__checkbox___ddU_- {
    opacity: 1;
  }

/* ImageList styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___1xpXS {
  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___2Srj- {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2Srj- {
  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___ZJ-Ft {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Shared repotags component variables/mixins */

/**
 * NOTE: The 'components/common/Checkbox' component comes from MaterialUI. At some
 *  deeply-nested layer, Mui adds a right margin of 24px. The only way I've found
 *  to cut this out, so that the hit area for the checkbox actually maps to the
 *  visible area of the checkbox is by wrapping the checkbox in a div and setting
 *  its overflow to be hidden, and its size to be the visible size of the checkbox.
 */

/* space between ActionBar and TagList */

/**
 * TAG LIST
 */

/* horizontal (left/right) padding on content part of TagListItem */

/* vertical space between each TagListItem */

/* x-offset, y-offset, and blur radius for shadow on TagListItem hover */

/**
 * NOTE: These variables establish a flexbox-based grid system used through the
 *  tag list and into the image list within it. Seemed easier than also using
 *  CSS grid (i.e. grid to layout the TagItem, and flexbox to layout the ImageHeader
 *  and ImageListItem).
 */

/* checkbox */

/* image digest */

/* image architecture */

/* image OS */

/* size */

/* critical count */

/* major count */

/* minor count */

/**
 * IMAGE LIST
 */

/*
gutter between two columns where first column is right-aligned and second
 column is left-aligned
*/

/* vertical, between items */

/* min width for official images */

/* stylelint-disable function-calc-no-unspaced-operator, indentation */

/* stylelint-enable function-calc-no-unspaced-operator, indentation */

/* min width when vulnerabilities not shown (i.e. community images) */

.styles__list___3WICb {
  margin-left: 0;
}

.styles__noScanning___rSGoi .styles__vulnsColumn___1gghP,
  .styles__noScanResults___3Lmow .styles__vulnsColumn___1gghP {
    display: none;
  }

.styles__noScanning___rSGoi .styles__lastScannedColumn___3zcIo {
    display: none;
  }

/* ImageHeader styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3P8FJ {
  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___2pQfO {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2pQfO {
  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___2__Tx {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Shared repotags component variables/mixins */

/**
 * NOTE: The 'components/common/Checkbox' component comes from MaterialUI. At some
 *  deeply-nested layer, Mui adds a right margin of 24px. The only way I've found
 *  to cut this out, so that the hit area for the checkbox actually maps to the
 *  visible area of the checkbox is by wrapping the checkbox in a div and setting
 *  its overflow to be hidden, and its size to be the visible size of the checkbox.
 */

/* space between ActionBar and TagList */

/**
 * TAG LIST
 */

/* horizontal (left/right) padding on content part of TagListItem */

/* vertical space between each TagListItem */

/* x-offset, y-offset, and blur radius for shadow on TagListItem hover */

/**
 * NOTE: These variables establish a flexbox-based grid system used through the
 *  tag list and into the image list within it. Seemed easier than also using
 *  CSS grid (i.e. grid to layout the TagItem, and flexbox to layout the ImageHeader
 *  and ImageListItem).
 */

/* checkbox */

/* image digest */

/* image architecture */

/* image OS */

/* size */

/* critical count */

/* major count */

/* minor count */

/**
 * IMAGE LIST
 */

/*
gutter between two columns where first column is right-aligned and second
 column is left-aligned
*/

/* vertical, between items */

/* min width for official images */

/* stylelint-disable function-calc-no-unspaced-operator, indentation */

/* stylelint-enable function-calc-no-unspaced-operator, indentation */

/* min width when vulnerabilities not shown (i.e. community images) */

.styles__row___1ZBWY {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 0 1px 0;
  padding: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  color: #8f9ea8;
  padding-top: 13px;
}

.styles__row___1ZBWY > div {
    text-transform: uppercase;
  }

.styles__digestItem___Afw1S {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 2px;
  margin: 0;
  padding-left: 0;
  /* for left alignment with 'info' block in tag item */
  width: 100px;
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
}

.styles__osArchItem___299hZ {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 2px;
  margin: 0;
  width: 80px;
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
  margin-left: 38px;
}

.styles__lastPulledItem___1ytb8 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 2px;
  margin: 0;
  width: 80px;
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
}

.styles__osItem___3bJMn {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 2px;
  margin: 0;
  width: 80px;
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
  margin-left: 38px;
}

.styles__sizeItem___2Eidb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 2px;
  margin: 0;
  width: 80px;
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
  text-align: right;
}

.styles__vulns___36nKL {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  -webkit-box-flex: 0;

      -ms-flex: 0 0 auto;

          flex: 0 0 auto;

  padding: 2px;

  margin: 0;

  width: 80px;

  -webkit-box-flex: 1.25;

      -ms-flex-positive: 1.25;

          flex-grow: 1.25;

  text-align: right;

  padding-right: 20px;
}

.styles__lastScanned___2ZfEO {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  -webkit-box-flex: 0;

      -ms-flex: 0 0 auto;

          flex: 0 0 auto;

  padding: 2px;

  margin: 0;

  width: 80px;

  -webkit-box-flex: 1.25;

      -ms-flex-positive: 1.25;

          flex-grow: 1.25;
}

/* ImageListItem styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___1SlvX {
  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___1RmZx {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1RmZx {
  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___cJpfI {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Shared repotags component variables/mixins */

/**
 * NOTE: The 'components/common/Checkbox' component comes from MaterialUI. At some
 *  deeply-nested layer, Mui adds a right margin of 24px. The only way I've found
 *  to cut this out, so that the hit area for the checkbox actually maps to the
 *  visible area of the checkbox is by wrapping the checkbox in a div and setting
 *  its overflow to be hidden, and its size to be the visible size of the checkbox.
 */

/* space between ActionBar and TagList */

/**
 * TAG LIST
 */

/* horizontal (left/right) padding on content part of TagListItem */

/* vertical space between each TagListItem */

/* x-offset, y-offset, and blur radius for shadow on TagListItem hover */

/**
 * NOTE: These variables establish a flexbox-based grid system used through the
 *  tag list and into the image list within it. Seemed easier than also using
 *  CSS grid (i.e. grid to layout the TagItem, and flexbox to layout the ImageHeader
 *  and ImageListItem).
 */

/* checkbox */

/* image digest */

/* image architecture */

/* image OS */

/* size */

/* critical count */

/* major count */

/* minor count */

/**
 * IMAGE LIST
 */

/*
gutter between two columns where first column is right-aligned and second
 column is left-aligned
*/

/* vertical, between items */

/* min width for official images */

/* stylelint-disable function-calc-no-unspaced-operator, indentation */

/* stylelint-enable function-calc-no-unspaced-operator, indentation */

/* min width when vulnerabilities not shown (i.e. community images) */

.styles__row___1i_Jk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 0 1px 0;
  padding: 0;
}

/*
WARNING: Whatever style gets defined here (i.e. as the second style in this
 file) gets completely ignored by PostCSS for some unknown reason!? So this
 unused style must be here, otherwise the next thing gets ignored... Maybe it's
 something with the 'repotags-imagelist-row' mixin? But then there would be
 a similar issue in ../ImageHeader/styles.css, but there isn't...
*/

.styles__foo___2hZSg {
  width: 0;
}

.styles__row___1i_Jk:last-child {
  margin-bottom: 0;
}

.styles__clickable___FBojG:hover {
  background-color: #f2f8ff;
  cursor: pointer;
}

.styles__digestItem___28pBb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 2px;
  margin: 0;
  padding-left: 0;
  /* for left alignment with 'info' block in tag item */
  width: 100px;
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
}

.styles__osArchItem___3i494 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 2px;
  margin: 0;
  width: 80px;
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
  margin-left: 38px;
}

.styles__lastPulledItem___3rPZ8 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 2px;
  margin: 0;
  width: 80px;
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
}

.styles__sizeItem___2meSu {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 2px;
  margin: 0;
  width: 80px;
  -webkit-box-flex: 1.25;
      -ms-flex-positive: 1.25;
          flex-grow: 1.25;
  text-align: right;
}

.styles__vulns___2ks2R {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  -webkit-box-flex: 0;

      -ms-flex: 0 0 auto;

          flex: 0 0 auto;

  padding: 2px;

  margin: 0;

  width: 80px;

  -webkit-box-flex: 1.25;

      -ms-flex-positive: 1.25;

          flex-grow: 1.25;

  text-align: right;

  padding-right: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.styles__lastScanned___1DfFi {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  -webkit-box-flex: 0;

      -ms-flex: 0 0 auto;

          flex: 0 0 auto;

  padding: 2px;

  margin: 0;

  width: 80px;

  -webkit-box-flex: 1.25;

      -ms-flex-positive: 1.25;

          flex-grow: 1.25;
}

.styles__scanLoadingSpinner___1xyWe {
  margin-left: 16px;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___2vPFr {
  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___3QYkf {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3QYkf {
  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___1N8bi {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__vulnBadges___3SAV3 {
  display: block;
  font-size: 12px;

  /*
    these properties make it so that if there isn't space to show all the badges,
    they disappear (by wrapping into hidden overflow space) in order of lowest
    to highest severity
  */
  height: 20px;
  white-space: normal;
  overflow: hidden;
}

.styles__link___uEo5W {
  text-decoration: none;
  display: inline-block;
}

.styles__badge___gekMQ {
  width: 50px;
  height: 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 4px;
  border-radius: 3px;
  color: #ffffff;
  white-space: pre;
}

.styles__badge___gekMQ > strong {
    font-weight: 600;
    margin-right: 4px;
  }

.styles__badge___gekMQ + .styles__badge___gekMQ {
    margin-left: 4px;
  }

.styles__high___3v0hr {
  background-color: #a611a0;
}

.styles__medium___2UGDz {
  background-color: #6243a3;
}

.styles__low___1uWgW {
  background-color: #768491;
}

/* ImageListToggle styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___24nD- {
  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___3o9n6 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3o9n6 {
  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___iagqY {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Shared repotags component variables/mixins */

/**
 * NOTE: The 'components/common/Checkbox' component comes from MaterialUI. At some
 *  deeply-nested layer, Mui adds a right margin of 24px. The only way I've found
 *  to cut this out, so that the hit area for the checkbox actually maps to the
 *  visible area of the checkbox is by wrapping the checkbox in a div and setting
 *  its overflow to be hidden, and its size to be the visible size of the checkbox.
 */

/* space between ActionBar and TagList */

/**
 * TAG LIST
 */

/* horizontal (left/right) padding on content part of TagListItem */

/* vertical space between each TagListItem */

/* x-offset, y-offset, and blur radius for shadow on TagListItem hover */

/**
 * NOTE: These variables establish a flexbox-based grid system used through the
 *  tag list and into the image list within it. Seemed easier than also using
 *  CSS grid (i.e. grid to layout the TagItem, and flexbox to layout the ImageHeader
 *  and ImageListItem).
 */

/* checkbox */

/* image digest */

/* image architecture */

/* image OS */

/* size */

/* critical count */

/* major count */

/* minor count */

/**
 * IMAGE LIST
 */

/*
gutter between two columns where first column is right-aligned and second
 column is left-aligned
*/

/* vertical, between items */

/* min width for official images */

/* stylelint-disable function-calc-no-unspaced-operator, indentation */

/* stylelint-enable function-calc-no-unspaced-operator, indentation */

/* min width when vulnerabilities not shown (i.e. community images) */

.styles__container___1BbKS {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 4px;
}

.styles__label___3bSdU {
  color: #007bff;
  cursor: pointer;
}

/* TagListItem styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___duOWx {
  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___3Dctp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3Dctp {
  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___2ucCT {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Shared repotags component variables/mixins */

/**
 * NOTE: The 'components/common/Checkbox' component comes from MaterialUI. At some
 *  deeply-nested layer, Mui adds a right margin of 24px. The only way I've found
 *  to cut this out, so that the hit area for the checkbox actually maps to the
 *  visible area of the checkbox is by wrapping the checkbox in a div and setting
 *  its overflow to be hidden, and its size to be the visible size of the checkbox.
 */

/* space between ActionBar and TagList */

/**
 * TAG LIST
 */

/* horizontal (left/right) padding on content part of TagListItem */

/* vertical space between each TagListItem */

/* x-offset, y-offset, and blur radius for shadow on TagListItem hover */

/**
 * NOTE: These variables establish a flexbox-based grid system used through the
 *  tag list and into the image list within it. Seemed easier than also using
 *  CSS grid (i.e. grid to layout the TagItem, and flexbox to layout the ImageHeader
 *  and ImageListItem).
 */

/* checkbox */

/* image digest */

/* image architecture */

/* image OS */

/* size */

/* critical count */

/* major count */

/* minor count */

/**
 * IMAGE LIST
 */

/*
gutter between two columns where first column is right-aligned and second
 column is left-aligned
*/

/* vertical, between items */

/* min width for official images */

/* stylelint-disable function-calc-no-unspaced-operator, indentation */

/* stylelint-enable function-calc-no-unspaced-operator, indentation */

/* min width when vulnerabilities not shown (i.e. community images) */

.styles__item___QCZAb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin: 0 0 17px 0;
}

.styles__action___1WC5I {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 40px;
}

.styles__action___1WC5I .styles__checkboxMask___1a2ld {
    width: 15px;
    height: 15px;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }

.styles__action___1WC5I .styles__checkbox___2m0S8 {
    opacity: 0.4;
  }

.styles__action___1WC5I .styles__checkbox___2m0S8.styles__checked___3Hi13 {
    opacity: 1;
  }

.styles__action___1WC5I .styles__checkboxIcon___2xF68 {
    width: 15px;
    height: 15px;
  }

.styles__content___2QoOZ.styles__withActions___kGlFx {
  /* Prettier disagrees with stylelint */

  /* prettier-ignore */
  width: calc(100% - 46px);
}

.styles__content___2QoOZ {
  position: relative;
  width: 100%;
}

.styles__content___2QoOZ .styles__tagStatus___2OWfd {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
  }

.styles__content___2QoOZ .styles__statusLabel___2gWD1 {
    min-width: 110px;
    line-height: 19px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: #5a6774;
    background: #b9c2c9;
  }

.styles__content___2QoOZ .styles__header___PN5tQ {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

.styles__content___2QoOZ .styles__header___PN5tQ .styles__info___1M9bO {
      width: 100%;
      margin-left: 0;
    }

.styles__content___2QoOZ .styles__header___PN5tQ .styles__info___1M9bO .styles__imageType___2plk2 {
        color: #94a1aa;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        margin-bottom: 4px;
      }

.styles__content___2QoOZ .styles__header___PN5tQ .styles__info___1M9bO .styles__tagUpdated___fMu1F {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        font-size: 12px;
      }

.styles__content___2QoOZ .styles__header___PN5tQ .styles__info___1M9bO .styles__tagUpdated___fMu1F .styles__tagWhen___23m9u {
          font-weight: 600;
        }

/* tag header row */

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

.styles__title_name___29g-4 {
  -webkit-box-flex: 1;
      -ms-flex: auto 0 1;
          flex: auto 0 1;

  white-space: 'nowrap';
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.styles__title_criticalVulnerabilityFound___2EK6D {
  -webkit-box-flex: 1;
      -ms-flex: auto 0 0px;
          flex: auto 0 0;

  margin-left: 12px;
}

.styles__title_copyPullCommandWrapper___xTm5w {
  margin-left: auto;
  -webkit-box-flex: 285px;
      -ms-flex: 285px 0 0px;
          flex: 285px 0 0;
  height: 28px;
  position: relative;
}

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

  .styles__title_copyPullCommandWrapper___xTm5w {
    display: none;
  }
}

.styles__copyPullCommand___3OBBd {
  /*
    Hack: Pull this out of the document flow to fix bad Chrome's bad
    text selection logic: https://docker.atlassian.net/browse/HUB-5591
  */
  position: absolute;
  width: 100%;
  right: 0;
  top: 0;
}

.styles__copyPullCommandCodeBlock___Lw649 {
  height: 28px;
}

/* Selection checkboxes */

.styles__item___QCZAb.styles__checked___3Hi13 .styles__checkbox___2m0S8, .styles__item___QCZAb:hover .styles__checkbox___2m0S8 {
    opacity: 1;
  }

/* TagList styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___37O6a {
  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___3ErmZ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3ErmZ {
  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___2zjnM {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Shared repotags component variables/mixins */

/**
 * NOTE: The 'components/common/Checkbox' component comes from MaterialUI. At some
 *  deeply-nested layer, Mui adds a right margin of 24px. The only way I've found
 *  to cut this out, so that the hit area for the checkbox actually maps to the
 *  visible area of the checkbox is by wrapping the checkbox in a div and setting
 *  its overflow to be hidden, and its size to be the visible size of the checkbox.
 */

/* space between ActionBar and TagList */

/**
 * TAG LIST
 */

/* horizontal (left/right) padding on content part of TagListItem */

/* vertical space between each TagListItem */

/* x-offset, y-offset, and blur radius for shadow on TagListItem hover */

/**
 * NOTE: These variables establish a flexbox-based grid system used through the
 *  tag list and into the image list within it. Seemed easier than also using
 *  CSS grid (i.e. grid to layout the TagItem, and flexbox to layout the ImageHeader
 *  and ImageListItem).
 */

/* checkbox */

/* image digest */

/* image architecture */

/* image OS */

/* size */

/* critical count */

/* major count */

/* minor count */

/**
 * IMAGE LIST
 */

/*
gutter between two columns where first column is right-aligned and second
 column is left-aligned
*/

/* vertical, between items */

/* min width for official images */

/* stylelint-disable function-calc-no-unspaced-operator, indentation */

/* stylelint-enable function-calc-no-unspaced-operator, indentation */

/* min width when vulnerabilities not shown (i.e. community images) */

.styles__list___2R_27 {
  min-width: 497px;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___MgMIH {
  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___3wqaP {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3wqaP {
  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___1LqPq {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__modal___3Vmsz {
  background: #ffffff;
  position: relative;
  height: 100%; /* essential in pinning header and footer, scrolling children */
  max-height: 80%;
  padding: 0;
}

.styles__closeModal___3RNgB {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

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

.styles__closeIcon___2G11t {
  fill: #8f9ea8;
}

.styles__title___3Kw8C {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
}

.styles__header___2OyTC {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 64px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e0e4e7;
}

.styles__children___1Kufp {
  height: calc(100% - 139px);
  overflow-y: auto;
  padding: 24px;
}

.styles__footer___32uXG {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-line-pack: center;
      align-content: center;
  height: 75px;
  border-top: 1px solid #e0e4e7;
  padding: 12px 20px;
}

/* DeleteTagsModal styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___2wEVz {
  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___3OJAs {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3OJAs {
  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___2cjJc {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__children___2HISC p:first-child {
    margin-top: 0;
  }

.styles__children___2HISC p:last-child {
    margin-bottom: 0;
  }

.styles__ctas___1g1v2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.styles__center___F78gu {
  height: 100%;
  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;
}

.styles__warning___3bqy5 {
  color: #e12b0c;
}

.styles__message___qlofm {
  margin: 24px 0;
}

.styles__table___UI-0_ {
  margin: 0;
  padding: 0 10px 15px 10px;
  background-color: #fafafb;
}

.styles__table___UI-0_ .styles__tableHeader___1Q8Az {
    list-style: none;
    line-height: 20px;
    padding: 10px 14px;
    border-bottom: 1px solid #e7e8e9;
    margin: 0 0 15px;
  }

.styles__table___UI-0_ .styles__tableCell___1FHND {
    line-height: 19px;
    padding: 5px 0;
    margin: 0 0 0 34px;
  }

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

.styles__iconWrapper___2omlE {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 8px 0 0;
}

/* RepoTagsView styles */

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___MmEUj {
  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___3BA4c {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3BA4c {
  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___1Dm5D {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

/* Shared repotags component variables/mixins */

/**
 * NOTE: The 'components/common/Checkbox' component comes from MaterialUI. At some
 *  deeply-nested layer, Mui adds a right margin of 24px. The only way I've found
 *  to cut this out, so that the hit area for the checkbox actually maps to the
 *  visible area of the checkbox is by wrapping the checkbox in a div and setting
 *  its overflow to be hidden, and its size to be the visible size of the checkbox.
 */

/* space between ActionBar and TagList */

/**
 * TAG LIST
 */

/* horizontal (left/right) padding on content part of TagListItem */

/* vertical space between each TagListItem */

/* x-offset, y-offset, and blur radius for shadow on TagListItem hover */

/**
 * NOTE: These variables establish a flexbox-based grid system used through the
 *  tag list and into the image list within it. Seemed easier than also using
 *  CSS grid (i.e. grid to layout the TagItem, and flexbox to layout the ImageHeader
 *  and ImageListItem).
 */

/* checkbox */

/* image digest */

/* image architecture */

/* image OS */

/* size */

/* critical count */

/* major count */

/* minor count */

/**
 * IMAGE LIST
 */

/*
gutter between two columns where first column is right-aligned and second
 column is left-aligned
*/

/* vertical, between items */

/* min width for official images */

/* stylelint-disable function-calc-no-unspaced-operator, indentation */

/* stylelint-enable function-calc-no-unspaced-operator, indentation */

/* min width when vulnerabilities not shown (i.e. community images) */

.styles__container___3mA0P {
  width: 100%;
  overflow-x: auto;
}

.styles__loader___iJm2t {
  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;
  padding: 32px;
}

.styles__emptyCard___y3Y_C {
  min-width: 491px;
  background: #ffffff;
  border: solid 1px #e0e4e7;
  padding: 32px;
  margin-right: 6px;
  margin-bottom: 12px;
  border-radius: 2px;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: #022044;
  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: #254356;
}

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

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: #022144;
  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: 600;
}

.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: 800;
  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;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: #2496ed;
  -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;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: #445d6e;
  background-color: #ffffff;
}

.styles__input___3r96R:focus + .styles__icon___vcs6b {
      fill: #445d6e;
}

.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: #8f9ea8;
  text-align: left;
  padding: 12px;
}

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

.styles__match___2ccXF {
  color: #2496ed;
  font-weight: 600;
}

.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 #7d94a5;
          box-shadow: 0 2px 3px #7d94a5;
  padding: 3.6px;
  color: #244357;
  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;
  }
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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 #fbfbfc;
  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: #f7f7f8;
}

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

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

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: 600;
    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: #e12b0c;
}

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

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: #d4611d;
  background-color: #fef5c3;
  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: #f9e3ae;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: 600;
    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;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___32d5f {
  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___DS2oh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___DS2oh {
  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___5AS7u {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__footerWrapper___1V-kz {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  margin-top: 20px;
  color: #8f9ea8;
}

.styles__contentWrapper___3tvh8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 24px 0 40px;
}

.styles__contentWrapper___3tvh8 a {
    text-decoration: none;
    margin-left: 4px
  }

.styles__contentWrapper___3tvh8 a:hover {
  color: #445d6e;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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: #fafafb;
}

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

.styles__grey___MVUF_ {
  background: #eff1f3;
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3qaVB {
  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___2i4cY {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___2i4cY {
  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___2ROC4 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

.styles__signupFormParent___1hGJ4 {
  font-family: 'Open Sans', sans-serif;
}

.styles__titleHeader___xRiPH {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 80px 0;
}

.styles__titleSubHeader___13XDf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 12px
}

.styles__titleSubHeader___13XDf.styles__noTitleHeader___2IjoX {
  margin-top: 38px;
}

.styles__titleSubHeader___13XDf.styles__verification___1obpt {
  text-align: center;
  margin-right: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 0 20px;
  margin-top: 60px;
}

.styles__titleSubHeader___13XDf.styles__dockerEnvelope___3A1a1 {
  margin-bottom: 40px;
}

.styles__titleSubHeader___13XDf .styles__titleWrapper___6XqC7 {
    width: 378px;
}

.styles__titleSubHeader___13XDf .styles__verificationWrapper___ieJgf {
    width: 100%;
}

.styles__titleSubHeader___13XDf .styles__mainTitle___3_abT {
    font-weight: 700;
    font-size: 22px;
    color: #27343b;
    margin-bottom: 5px;
}

.styles__titleSubHeader___13XDf .styles__subTitle___3uNk2 {
    line-height: 20px;
    font-size: 14px;
    color: #697a89;
}

.styles__titleSubHeader___13XDf .styles__subTitle___3uNk2 a {
      color: #007bff;
      cursor: pointer;
    }

.styles__titleSubHeader___13XDf .styles__verifyFooter___2qqIl {
    margin: 140px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

.styles__titleSubHeader___13XDf .styles__verifyFooter___2qqIl a {
      color: #007bff;
      cursor: pointer;
      text-decoration: none;
    }

.styles__titleSubHeader___13XDf .styles__signIn___2zRWn {
    color: #007bff;
    font-weight: 700;
    cursor: pointer;
}

.styles__formWrapper___3qIad {
  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;
  -ms-flex-line-pack: center;
      align-content: center;
  margin-left: 20px;
}

.styles__formWrapper___3qIad .styles__fieldBorder___gmEkW {
    height: 0;
    border: 0.5px solid #b7bbbe;
    width: 378px;
    margin-bottom: 15px;
  }

.styles__formWrapper___3qIad .styles__fieldBorderError___3QDM6 {
    height: 0;
    border: 0.5px solid #c82828;
    width: 378px;
    margin-bottom: 9px;
  }

.styles__formWrapper___3qIad .styles__fieldBorderError___3QDM6:last-child {
    margin-bottom: 0;
  }

.styles__formWrapper___3qIad .styles__inputAddOn___HHxg5 {
    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: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

.styles__formWrapper___3qIad .styles__errorIcon___1iBj7 {
    border: none;
    background-color: #fafafb;
    height: 36px;
    width: 25px;
    padding: 10px;
    font-size: 12px;
    position: relative;
    right: 40px;
  }

.styles__formField___2drTx {
  border: none;
  width: 378px;
  height: 36px;
  background-color: #fafafb;
  font-size: 14px;
  color: #27343b;
  padding: 7.5px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.styles__lowercase___3Ifj0 {
  text-transform: lowercase;
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  text-transform: none;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  text-transform: none;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  text-transform: none;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  text-transform: none;
}

::-ms-input-placeholder {
  /* Recent browsers */
  text-transform: none;
}

::placeholder {
  /* Recent browsers */
  text-transform: none;
}

input:focus,
input:invalid,
select:focus,
textarea:focus,
button:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}

.styles__responsiveInputResult___3A_-k {
  margin-bottom: 8px;
  font-size: 12px;
  width: 378px;
}

.styles__responsiveInputResult___3A_-k .styles__errorText___2ZytQ {
    padding-left: 7.5px;
    color: #c82828;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

.styles__responsiveInputResult___3A_-k .styles__responsiveInputResult___3A_-k:last-child {
    margin-bottom: 0;
  }

.styles__responsiveInputResult___3A_-k .styles__password___3q9gx {
    margin-bottom: 0;
  }

.styles__inputResult___1L6-8 {
  margin-left: 10px;
  font-size: 12px;
  width: 300px;
  -ms-flex-item-align: center;
      align-self: center;
}

.styles__errorText___2ZytQ {
  color: #c82828;
}

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

.styles__signUpButton___jEpn5 {
  background-color: #007bff;
  border-radius: 4px;
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  width: 378px;
  height: 36px;
  cursor: pointer;
  margin: 0 5px 5px 0;
  border: none;
  outline: none;
}

.styles__formParent___B8OHZ {
  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__formParent___B8OHZ .styles__signUpForm___1b9XS {
    background: #ffffff;
    -webkit-box-shadow: 0 1px 2px #c2c2c2;
            box-shadow: 0 1px 2px #c2c2c2;
    min-width: 470px;
    min-height: 540px;
    padding: 60px 0 100px;
    margin: 0 30px
  }

.styles__formParent___B8OHZ .styles__signUpForm___1b9XS.styles__noTitleHeader___2IjoX {
  padding: 0;
}

.styles__formParent___B8OHZ .styles__googleTerms___2m_su {
    margin-top: 10px;
  }

.styles__formParent___B8OHZ .styles__tos___2ReIR {
    width: 378px;
    color: #70787d;
    font-size: 11px;
    margin-top: 7px;
    margin-bottom: 24px;
  }

.styles__formParent___B8OHZ .styles__tos___2ReIR a {
      color: #70787d;
      cursor: pointer;
    }

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

.styles__login___1cm5d {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: 'Open Sans', sans-serif;
}

.styles__login___1cm5d a {
    font-weight: 500;
    cursor: pointer;
    color: #007bff;
    text-decoration: none;
  }

.styles__login___1cm5d.styles__verification___1obpt {
  margin: 32px 0;
}

.styles__recaptchaParent___1MCeA {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 473px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin-top: 8px;
  margin-bottom: 12px;
}

.styles__recaptchaWrapper___3l6It {
  transform: scale(0.65);
  -webkit-transform: scale(0.65);
}

.styles__errorMessage___XzWOy {
  color: #c82828;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  right: 41px;
}

.styles__errorList___34hHL {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 0 0 15px 300px;
  width: 378px;
  color: #c82828;
  font-size: 11px;
}

.styles__errorList___34hHL .styles__errorMessage___XzWOy {
    margin: 5px 0 0 14px;
  }

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

.styles__termsOfService___1hzv2 {
  width: 460px;
  margin-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #697a89;
  font-size: 12px;
  font-family: 'Open Sans', sans-serif;
}

.styles__termsOfService___1hzv2 .styles__euta___1F07X {
    margin-bottom: 5px;
    width: 370px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
  }

.styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1 {
      width: 14px;
      height: 14px;
      padding: 0;
      margin-right: 12px
    }

.styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1.styles__isSafari___3A6P0 {
  overflow: visible;
}

.styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1 .styles__checkboxSize___3P8N9 {
        width: 14px;
        height: 14px;
}

.styles__centeredError___3q2KE {
  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;
  margin-top: 8px;
}

@media only screen and (max-width: 960px) {
  .styles__formField___2drTx {
    width: 300px;
    font-size: 14px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }

  .styles__titleHeader___xRiPH {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 50px 0;
  }

  .styles__titleSubHeader___13XDf {
    -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;
    margin-right: 0;
  }

    .styles__titleSubHeader___13XDf .styles__titleWrapper___6XqC7 {
      width: 300px;
    }

  .styles__formWrapper___3qIad {
    margin-left: 50px;
  }

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

    .styles__formWrapper___3qIad .styles__fieldBorder___gmEkW {
      border: 0.5px solid #b7bbbe;
      width: 300px;
    }

    .styles__formWrapper___3qIad .styles__fieldBorderError___3QDM6 {
      border: 0.5px solid #c82828;
      width: 300px;
      margin-bottom: 6px;
    }

  .styles__signUpButton___jEpn5 {
    width: 300px;
    margin-right: 10px;
  }

  .styles__formParent___B8OHZ {
    z-index: 99;
    top: 20px;
  }

    .styles__formParent___B8OHZ .styles__tos___2ReIR {
      width: 305px;
      margin-top: 7px;
      margin-bottom: 24px;
    }

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

  .styles__errorMessage___XzWOy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0 40px 12px 0;
  }

  .styles__termsOfService___1hzv2 {
    margin-left: 80px;
    width: 300px;
    color: #697a89;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
  }

    .styles__termsOfService___1hzv2 .styles__euta___1F07X {
      margin-bottom: 5px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      cursor: pointer;
    }

      .styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1 {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: 14px;
        height: 14px;
        padding: 0;
        margin-right: 14px;
      }

        .styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1 .styles__checkboxSize___3P8N9 {
          width: 14px;
          height: 14px;
        }

  .styles__recaptchaWrapper___3l6It {
    margin: 10px 7px 10px 0;
    transform: scale(1);
    -webkit-transform: scale(1);
  }

  .styles__errorList___34hHL {
    width: 250px;
    font-size: 12px;
    margin: 0 0 10px 10px;
  }

  .styles__inputResult___1L6-8 {
    display: none;
  }
}

.styles__userInfoParent___2Agr0 {
  font-family: 'Open Sans', sans-serif;
}

.styles__userInfoHeader___1Bfle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 80px 0;
}

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

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P {
    width: 470px;
    min-height: 540px;
    background: #ffffff;
    -webkit-box-shadow: 0 1px 2px #c2c2c2;
            box-shadow: 0 1px 2px #c2c2c2;
    padding: 60px 20px 45px;
  }

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM {
      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__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__header___2_RvZ {
        color: #27343b;
        font-weight: 600;
        font-size: 22px;
        font-family: Helvetica Neue, 'Open Sans', sans-serif;
        width: 378px;
      }

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__explanatoryText___1WVmy {
        font-family: Helvetica Neue, 'Open Sans', sans-serif;
        color: #27343b;
        font-size: 21px;
        width: 378px;
        margin-bottom: 29px;
      }

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoFormField___1FzJB {
        border: none;
        height: 36px;
        background-color: #fafafb;
        font-size: 14px;
        color: #27343b;
        padding: 7px;
        width: 378px;
        -webkit-appearance: none;
      }

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__stateProvinceField___1mEV7 {
        border: none;
        height: 30px;
        background-color: none;
        font-size: 14px;
        color: #27343b;
        padding: 7px;
        width: 378px;
        margin-bottom: 20px;
      }

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW {
        border: 0.5px solid #b7bbbe;
        width: 378px;
        margin-bottom: 15px
      }

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW:last-child {
  margin-bottom: 20px;
}

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorderError___3QDM6 {
        height: 0;
        border: 0.5px solid #c82828;
        width: 378px;
        margin-bottom: 9px;
      }

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM select:required:invalid {
        color: #898f93;
        font-size: 14px;
      }

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM option[value=''][disabled] {
        display: none;
      }

.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoSignUpButton___1TqsV {
        background-color: #007bff;
        border-radius: 4px;
        color: #ffffff;
        font-weight: bold;
        font-size: 14px;
        text-align: center;
        width: 378px;
        height: 30px;
        cursor: pointer;
        border: none;
        outline: none;
        margin: 22px 0;
      }

@media only screen and (max-width: 960px) {
  .styles__userInfoHeader___1Bfle {
    margin: 60px 0;
  }

  .styles__userInfoBody___30hSB {
    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;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

    .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P {
      width: 470px;
    }
        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoFormField___1FzJB {
          width: 378px;
          height: 40px;
        }

        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__stateProvinceField___1mEV7 {
          width: 378px;
        }

        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW {
          width: 378px;
        }

        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__role___T34X8 {
          font-size: 12px;
        }

      .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__userInfoSignUpButton___1TqsV {
        width: 378px;
      }
}

@media only screen and (max-width: 600px) {
  .styles__userInfoHeader___1Bfle {
    margin: 60px 0;
  }

  .styles__userInfoBody___30hSB {
    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;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

    .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P {
      width: 300px;
    }
        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__header___2_RvZ {
          width: 250px;
        }
        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__explanatoryText___1WVmy {
          width: 250px;
          font-size: 15px;
        }
        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoFormField___1FzJB {
          width: 250px;
          height: 40px;
        }
        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__role___T34X8 {
          font-size: 12px;
        }
        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__stateProvinceField___1mEV7 {
          width: 250px;
        }
        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW {
          width: 250px;
        }
        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorderError___3QDM6 {
          width: 250px;
        }
        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoSignUpButton___1TqsV {
          width: 250px;
        }

      .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__responsiveInputResult___3A_-k {
        width: 250px;
      }

      .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__requiredFields___3q9jV {
        font-size: 14px;
        font-style: italic;
        margin: 10px;
      }
    .styles__titleSubHeader___13XDf .styles__verificationTitle___BxpmF {
      font-size: 18px;
    }

  .styles__titleSubHeader___13XDf.styles__verification___1obpt {
    padding: 0 40px;
  }
}

.styles__eye___3havL {
  cursor: pointer;
}

.styles__loading___3Uu6q {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: #f7f7f8;
  height: 100%;
  padding: 64px 0;
}

.styles__modal___1TNb8 {
  margin-top: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.styles__modal___1TNb8 .styles__modalButton___avgS0 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 12px 0;
  }

.styles__modal___1TNb8 .styles__modalButton___avgS0 button {
      margin: 12px 0;
    }

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3fcu6 {
  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___3eO2_ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___3eO2_ {
  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___3mXXk {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

@font-face {
    font-family: 'tt-commons-regular-font';
    src:
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.eot?#iefix') format('embedded-opentype'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff2') format('woff2'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff') format('woff'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.ttf') format('truetype'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.svg#ttcommonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

.styles__pageContent___3-Nev {
  position: relative;
  padding: 35px 80px 200px;
  background-color: #2496ed;
  font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important;
  overflow: hidden;
}

.styles__pageContent___3-Nev .styles__background___3slTZ {
    position: absolute;
    width: calc(100% + 160px);
    left: -80px;
    right: -80px;
    top: 9%;
    height: 100%;
    background-position: left center;
    background-size: cover;
    background-image: url(1b0e25299f7fafbe3f26.svg);
  }

.styles__pageContent___3-Nev .styles__wrapper___2UH_l {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
  }

.styles__pageContent___3-Nev .styles__flexRow___3BQVT {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

.styles__pageContent___3-Nev .styles__iconWrapper___BhN9S {
    margin-bottom: 6px;
  }

.styles__pageContent___3-Nev .styles__titleWrapper___25MWq {
    margin: 66px 66px 0 0;
  }

.styles__pageContent___3-Nev .styles__titleWrapper___25MWq .styles__title___3C-x5 {
      margin: 0 0 18px 0;
      font-size: 50px;
      font-weight: 700;
      line-height: 1;
      color: #ffffff;
    }

.styles__pageContent___3-Nev .styles__titleWrapper___25MWq .styles__subtitle___1c9wk {
      font-size: 30px;
      color: #ffffff;
      margin: 0;
    }

.styles__pageContent___3-Nev .styles__summary___3YC-u {
    margin-top: 10%;
    color: #404d59;
    font-size: 24px;
    max-width: 520px;
  }

.styles__pageContent___3-Nev .styles__summary___3YC-u .styles__title___3C-x5 {
      font-size: 30px;
      font-weight: 600;
      margin-bottom: 40px;
    }

.styles__pageContent___3-Nev .styles__summary___3YC-u p {
      margin-bottom: 35px;
    }

.styles__link___13uho {
  color: #007bff;
  text-decoration: none
}

.styles__link___13uho:hover {
  text-decoration: underline;
}

@media (min-width: 2000px) {
    .styles__pageContent___3-Nev .styles__background___3slTZ {
      top: 18%;
    }
}

@media (max-width: 1200px) {
      .styles__pageContent___3-Nev .styles__titleWrapper___25MWq .styles__title___3C-x5 {
        font-size: 40px;
      }

      .styles__pageContent___3-Nev .styles__titleWrapper___25MWq .styles__subtitle___1c9wk {
        font-size: 25px;
      }
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___2Q1Uf {
  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___1a15h {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1a15h {
  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___2TkFi {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

@font-face {
    font-family: 'tt-commons-regular-font';
    src:
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.eot?#iefix') format('embedded-opentype'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff2') format('woff2'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff') format('woff'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.ttf') format('truetype'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.svg#ttcommonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

.styles__pageContent___PGWOb {
  position: relative;
  padding: 35px 80px 200px;
  background-color: #2496ed;
  font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important;
  overflow: hidden;
}

.styles__pageContent___PGWOb .styles__background___2NiQe {
    position: absolute;
    width: calc(100% + 160px);
    left: -80px;
    right: -80px;
    top: 9%;
    height: 100%;
    background-position: left center;
    background-size: cover;
    background-image: url(ea86ee1deef24b8c076c.svg);
  }

.styles__pageContent___PGWOb .styles__wrapper___g-zUb {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
  }

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

.styles__pageContent___PGWOb .styles__iconWrapper___3132o {
    margin-bottom: 6px;
  }

.styles__pageContent___PGWOb .styles__titleWrapper___1c8Ue {
    margin: 66px 66px 0 0;
  }

.styles__pageContent___PGWOb .styles__titleWrapper___1c8Ue .styles__title___1-0vN {
      margin: 0 0 18px 0;
      font-size: 50px;
      font-weight: 700;
      line-height: 1;
      color: #ffffff;
    }

.styles__pageContent___PGWOb .styles__titleWrapper___1c8Ue .styles__subtitle___18BLN {
      font-size: 30px;
      color: #ffffff;
      margin: 0;
    }

.styles__pageContent___PGWOb .styles__summary___3U_sB {
    margin-top: 10%;
    color: #404d59;
    font-size: 24px;
    max-width: 520px;
  }

.styles__pageContent___PGWOb .styles__summary___3U_sB .styles__title___1-0vN {
      font-size: 30px;
      font-weight: 600;
      margin-bottom: 40px;
    }

.styles__pageContent___PGWOb .styles__summary___3U_sB p {
      margin-bottom: 35px;
    }

.styles__link___1aY4s {
  color: #007bff;
  text-decoration: none
}

.styles__link___1aY4s:hover {
  text-decoration: underline;
}

@media (min-width: 2000px) {
    .styles__pageContent___PGWOb .styles__background___2NiQe {
      top: 18%;
    }
}

@media (max-width: 1200px) {
      .styles__pageContent___PGWOb .styles__titleWrapper___1c8Ue .styles__title___1-0vN {
        font-size: 40px;
      }

      .styles__pageContent___PGWOb .styles__titleWrapper___1c8Ue .styles__subtitle___18BLN {
        font-size: 25px;
      }
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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___3EM5t {
  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___1l9mh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes styles__fadein___1l9mh {
  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___3fDYt {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

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

@font-face {
    font-family: 'tt-commons-regular-font';
    src:
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.eot?#iefix') format('embedded-opentype'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff2') format('woff2'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff') format('woff'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.ttf') format('truetype'),
      url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.svg#ttcommonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

.styles__pageContent___1-Gjn {
  position: relative;
  padding: 35px 80px 200px;
  background-color: #2496ed;
  font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important;
  overflow: hidden;
}

.styles__pageContent___1-Gjn .styles__background___18xsL {
    position: absolute;
    width: calc(100% + 160px);
    left: -80px;
    right: -80px;
    top: 40%;
    height: 100%;
    background: url(82f6bc044741022e93d8.svg) no-repeat center top;
    background-size: cover;
  }

.styles__pageContent___1-Gjn .styles__wrapper___2CfOC {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
  }

.styles__pageContent___1-Gjn .styles__flexRow___27eU4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

.styles__pageContent___1-Gjn .styles__iconWrapper___3zi93 {
    margin-bottom: 6px;
  }

.styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA {
    margin: 66px 66px 0 0;
  }

.styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA .styles__title___WP-i6 {
      margin: 0 0 18px 0;
      font-size: 50px;
      font-weight: 700;
      line-height: 1;
      color: #ffffff;
    }

.styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA .styles__subtitle___TtMiq {
      font-size: 30px;
      color: #ffffff;
      margin: 0;
    }

.styles__pageContent___1-Gjn .styles__summary___2pH14 {
    margin-top: 10%;
    color: #404d59;
    font-size: 24px;
    max-width: 520px;
  }

.styles__pageContent___1-Gjn .styles__summary___2pH14 .styles__title___WP-i6 {
      font-size: 30px;
      font-weight: 600;
      margin-bottom: 40px;
    }

.styles__pageContent___1-Gjn .styles__summary___2pH14 p {
      margin-bottom: 35px;
    }

.styles__link___jLh39 {
  color: #007bff;
  text-decoration: none
}

.styles__link___jLh39:hover {
  text-decoration: underline;
}

@media (min-width: 2000px) {
    .styles__pageContent___1-Gjn .styles__background___18xsL {
      top: 600px;
    }
}

@media (max-width: 1200px) {

    .styles__pageContent___1-Gjn .styles__background___18xsL {
      background-position: -15vw top;
    }

      .styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA .styles__title___WP-i6 {
        font-size: 40px;
      }

      .styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA .styles__subtitle___TtMiq {
        font-size: 25px;
      }
}

@media (max-width: 1023px) {

    .styles__pageContent___1-Gjn .styles__flexRow___27eU4 {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }

      .styles__pageContent___1-Gjn .styles__flexRow___27eU4 .styles__titleWrapper___1fNPA {
        margin-bottom: 40px;
      }
}

@media (max-width: 768px) {

    .styles__pageContent___1-Gjn .styles__background___18xsL {
      background-image: unset;
      background-color: #2496ed;
    }

    .styles__pageContent___1-Gjn .styles__summary___2pH14 {
      padding: 0;
      max-width: 100%;
      color: #ffffff;
    }

    .styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA {
      margin-right: 0;
    }

    .styles__pageContent___1-Gjn img {
      display: block;
      position: relative;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
    }
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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;
    }
}

/* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */

/* a.k.a. docker red */

/* a.k.a. docker blue */

/* a.k.a. docker green */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Dictionary
----------------------------------------------------------------------------- */

/* Purples - lightest to darkest */

/* Blues - lightest to darkest */

/* Greens - lightest to darkest */

/* Reds - lightest to darkest */

/* Yellows - lightest to darkest */

/* Grays - lightest to darkest */

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

/* -base background colors */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* -- 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%;

    /* 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 #e0e4e7;
    margin: 1em 0;
    padding: 0;
  }

code {
    font-family: 'Ubuntu 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: #27343b;
    font-weight: 600;
}

.boldContent {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    font-weight: 600;
}

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

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

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