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

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

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

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

/* https://css-tricks.com/snippets/css/turn-off-number-input-spinners/ */

input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    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___3z8Wn {
  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___1GqK9 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

.styles__hero___R7U6C .styles__title___1xasD {
    font-size: 38px;
    font-weight: bold;
    text-transform: capitalize;
  }

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

.styles__title___1xasD {
  font-size: 16px;
  margin-top: 0;
}

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

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

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

.styles__converOrgCards___2KTFi .styles__card___1rg8K {
    margin-top: 20px;
    margin-bottom: 12px;
  }

.styles__boldText___tAQ_L {
  font-weight: 700;
}

.styles__infoText___2AX_o {
  margin-top: 32px;
  font-size: 14px;
  line-height: 20px;
}

.styles__convertButtons___u4bl5 {
  text-align: right;
}

.styles__convertButtons___u4bl5 .styles__link___Te21G {
    text-decoration: none;
    cursor: pointer;
    margin: 0;
  }

.styles__convertButtons___u4bl5 .styles__link___Te21G a {
      text-decoration: none;
    }

.styles__convertButtons___u4bl5 .styles__margin____CDA1 {
    margin-right: 12px;
  }

.styles__idInput___W4WZs {
  margin-bottom: 32px;
}

.styles__input___39MvC {
  width: 256px;
  margin-right: 18px;
}

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

.styles__errorMessage___F9QGY p {
    margin: 0 0 3px;
    line-height: 1.5;
  }

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

.styles__modalWrapper___3Qo9d {
  padding: 70px;
}

.styles__modal___12EjE {
  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___12EjE .styles__modalTitle___jbqMv {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }

.styles__modal___12EjE .styles__icon___WrfFk {
    margin: auto;
    width: 83px;
    height: 83px;
    margin-bottom: 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___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;
}

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

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

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

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

.styles__link___db2lA {
  color: #2496ed;
  text-decoration: none;
}

.styles__title___1cRmP {
  color: #27343b;
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
}

.styles__content___BIBGt {
  color: #26323f;
  margin-bottom: 35px;
  line-height: 1.5;
}

.styles__buttonRow___3_wep {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.styles__buttonRow___3_wep button {
    margin: 0 0 0 12px;
  }

.styles__tooltipMultiLineContent___p6xV- {
  font-weight: bold;
}

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

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

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

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

.styles__main___EBGP1 svg {
    fill: #82949e;
    margin-right: 4px;
  }

.styles__display___31YnN {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  color: #82949e;
  line-height: 12px;
  float: left;
}

.styles__dateDisplay___dTlPO {
  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___2GfAH {
  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___19Jjy {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__notActive___1bRUe td {
    color: #90a0ac
  }

.styles__notActive___1bRUe td.styles__description___1pcVB::before {
  display: none;
}

.styles__accessTokenAction___1BuKV {
  cursor: pointer;
}

.styles__description___1pcVB {
  position: relative;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20em
}

.styles__description___1pcVB::before {
  content: ' ';
  position: absolute;
  left: 0;
  top: calc(50% - 4px);
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #54d1b0;
}

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

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

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

.styles__inputField___3NFmU {
  width: 100%;
  border: none;
  border-bottom: 1px solid #b7bbbe;
  background: #fafafb;
  height: 30px;
  line-height: 29px;
  color: #27343b;
  padding: 0 6px;
  font-size: 14px
}

.styles__inputField___3NFmU.styles__error___2QHQ1 {
  border-bottom-color: #c82828;
}

.styles__inputField___3NFmU:focus {
  border-bottom-color: #007bff;
}

select.styles__inputField___3NFmU {
  border-radius: 0;
  -webkit-appearance: none;
}

.styles__inputField___3NFmU::-webkit-input-placeholder {
  color: #2f373c;
}

.styles__inputField___3NFmU::-moz-placeholder {
  color: #2f373c;
}

.styles__inputField___3NFmU::-ms-input-placeholder {
  color: #2f373c;
}

.styles__inputField___3NFmU::placeholder {
  color: #2f373c;
}

.styles__errorMessage___atHyx {
  color: #c82828;
  font-size: 12px;
  margin: 9px 6px;
}

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

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

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

.styles__form___2cmlc {
  min-height: 380px;
  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__fieldsWrapper___9gmLA {
  margin-top: 10px;
}

.styles__tokenLabelField___DkfkI {
  min-height: 80px;
}

.styles__tokenScopeField___39Dvj {
  min-height: 60px;
}

.styles__fieldLabel___2kXJO {
  color: #70787d;
  font-size: 12px;
  padding: 0 0 0 6px;
  line-height: 1.5;
}

.styles__fieldLabel___2kXJO .styles__requiredFieldAsterisk___Hb_xC {
    color: #e12b0c;
  }

.styles__buttonRow___155Hi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 20px;
}

.styles__scopeError___s2pKr {
  color: #c82828;
  font-size: 12px;
  margin: 7px 6px;
}

.styles__cta___SdMeC {
  padding: 18px;
  border-radius: 3px;
  background-color: #f2f3f5;
  margin: 6px 0 10px;
}

.styles__cta___SdMeC .styles__ctaTitle___2nB_v {
    color: #26323f;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 8px;
  }

.styles__cta___SdMeC .styles__ctaTitle___2nB_v .styles__proFeature___sUY4s {
      background-color: #2496ed;
      padding: 0 6px;
      border-radius: 6px;
      color: white;
      font-size: 11px;
      height: 20px;
      display: inline-block;
      margin-left: 5px;
    }

.styles__cta___SdMeC .styles__ctaActions___3uM_r {
    margin-top: 12px;
  }

.styles__cta___SdMeC .styles__ctaActions___3uM_r button {
      margin: 0 20px 0 0;
    }

.styles__cta___SdMeC .styles__ctaActions___3uM_r .styles__link___1dWoj {
      color: #007bff;
      font-weight: 600;
      text-decoration: none;
    }

.styles__patDescription___12-4B {
  padding: 0 6px;
  margin: 2px 0;
  max-width: 400px;
  color: #5a6774;
  font-size: 12px;
  line-height: 1.5;
}

/* 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___28vQ2 {
  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___2Z-di {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__resultLabel___3nkRJ {
  text-transform: uppercase;
  color: #6f777c;
  margin-top: 15px;
  line-height: 19px;
}

.styles__resultValue___17C8p {
  margin-top: 5px;
  margin-bottom: 10px;
  word-wrap: break-word;
}

.styles__copyCommand___29Vyb textarea:focus,
  .styles__copyCommand___29Vyb input:focus {
    outline: none;
  }

.styles__resultHowToUse___FLQmn {
  margin: 15px 0;
}

.styles__resultHowToUse___FLQmn p {
    margin: 5px 0;
  }

.styles__code___2UI1T {
  background-color: #f3f4f4;
  display: inline-block;
  padding: 5px 10px;
  font-family: 'Courier New', Courier, monospace;
}

.styles__warningBox___1lDNe {
  margin: 20px 0 10px;
  height: 80px;
  background: #fafafb;
}

.styles__warningBox___1lDNe .styles__yellowBar___1x728 {
    position: absolute;
    width: 4px;
    height: 80px;
    background: #f7d933;
    margin-right: 10px;
  }

.styles__warningBox___1lDNe .styles__warningMessage___VN4Yw {
    padding: 25px;
    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;
  }

.styles__warningBox___1lDNe .styles__warningMessage___VN4Yw .styles__warningText___1o1Tw {
      margin: 20px;
    }

.styles__warningBox___1lDNe .styles__secretLabel___3zEX_ {
    color: #27343b;
    font-size: 14px;
    margin-left: 20px;
    font-weight: 600;
  }

.styles__buttonRow___2vmtO {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 20px;
}

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

.styles__addAccessTokenWrapper___1gIC8 {
  min-height: 500px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.styles__title___1PNda {
  font-size: 22px;
  font-weight: 600;
  color: #27343b;
  margin: 0 0 8px 0;
}

.styles__subtitle___3q_4r {
  font-size: 14px;
  color: #27343b;
  margin: 0 0 10px 0;
}

.styles__link___py1Yc {
  color: #2496ed;
  text-decoration: 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___3gFss {
  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___mn22M {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__subtext___1efQN {
  margin: 8px 0 28px;
}

.styles__buttonRow___3YFZG {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 50px;
}

.styles__removeMarginFromButton___3s_YW button:last-child {
  margin: 6px 0;
}

.styles__title___32P2X {
  font-size: 22px;
  font-weight: 600;
  color: #27343b;
  margin: 0 0 12px 0;
}

.styles__title___32P2X > svg {
    top: 7px;
    position: relative;
  }

.styles__tokensTable___3vRS2 {
  margin: 10px 0;
  background-color: #fafafb;
  width: 100%;
}

.styles__tokensTable___3vRS2 th {
    font-weight: 500;
    text-align: left;
    border-bottom: 1px solid #e0e4e7;
    text-transform: uppercase;
  }

.styles__tokensTable___3vRS2 td,
  .styles__tokensTable___3vRS2 th {
    padding: 6px 14px;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }

.styles__tokensTable___3vRS2 .styles__tokenLabel___t-huO {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 340px;
  }

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

.styles__title___2lQwm {
  font-size: 22px;
  font-weight: 600;
  color: #27343b;
  margin: 0 0 8px 0;
}

.styles__subtitle___3FxdT {
  font-size: 14px;
  color: #27343b;
  margin: 0 0 10px 0;
}

.styles__form___3X6fA {
  min-height: 380px;
  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__tokenLabelField___VmOWl {
  height: 80px;
  margin-top: 15px;
}

.styles__fieldLabel___3KArx {
  color: #70787d;
  font-size: 12px;
  padding: 0 0 0 6px;
  line-height: 1.5;
}

.styles__fieldLabel___3KArx .styles__requiredFieldAsterisk___3wP-P {
    color: #e12b0c;
  }

.styles__tokeScope___2bJwS {
  padding: 0 6px;
  display: inline-block;
  line-height: 30px;
}

.styles__buttonRow___2dLNU {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 20px;
}

.styles__editAccessTokenDescriptionHeader___F0oeY {
  font-size: 12px;
  color: #70787d;
  margin-top: 38px;
  margin-bottom: 6px;
}

.styles__editAccessTokenFormHeader___2YU8O {
  color: #27343b;
  font-size: 14px;
  line-height: 19px;
  text-transform: uppercase;
}

.styles__editAccessTokenFormHeader___2YU8O .styles__editAccessTokenInfo___2MDw2 {
    margin-top: 4px;
    color: #27343b;
    text-transform: none;
    font-weight: 600;
  }

.styles__editAccessTokenGrid___17V0e {
  display: grid;
  grid-template-columns: 35% 50%;
  grid-gap: 24px;
  margin: 24px 6px;
}

.styles__editDeleteButton___3MS1C:hover {
  background-color: #bf3b42 !important;
  color: #ffffff !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___3kTIS {
  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___1AgWf {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__tokensCardBody___3tH9c {
  position: relative;
}

.styles__loading___2SU72 {
  min-height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 999;
}

.styles__twoFactor___3GZtI {
  text-align: center;
  margin: 0 auto;
  width: 511px;
}

.styles__twoFactor___3GZtI button {
    margin-top: 20px;
  }

.styles__twoFactor___3GZtI .styles__twoFactorDescription___2rUs4 {
    line-height: 19px;
  }

.styles__twoFactor___3GZtI .styles__twoFactorDescription___2rUs4 .styles__subheader___2KtG8 {
      font-weight: 600;
    }

.styles__mfaCliWarning___2Z_W9 {
  margin-bottom: 16px;
}

.styles__pagination___2EBIz > ul {
  margin-bottom: 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___3WyGl {
  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___2EuGM {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

/* module account */

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

.styles__accessTokenRetrievalError___3hy1n > :first-child {
    margin-right: 12px;
  }

.styles__settingsInfoSection___bXtOi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 1000px;
}

.styles__header___3xtHy {
  background-color: #ffffff;
}

.styles__title___2vJL9 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 24px;
  line-height: 16px;
}

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

.styles__buttonWrapper___3yYjO {
  text-align: right;
}

.styles__promoCode___2yNYv {
  text-align: center;
  width: 100%;
}

.styles__promoCodeInfoCard___8kCpn {
  background-color: #d1eefd;
  border-color: #a3ddfc;
  color: color-curious-blue;
  margin-bottom: 20px;
}

.styles__loadingCard___1jGER {
  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;
  min-height: 200px;
}

.styles__largeLoadingCard___3P4Ck {
  min-height: 400px;
}

.styles__promoCodeWrapper___g4el_ {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 52px;
  top: -1px;
}

/* account nav and cards */

.styles__saveBtn___2aMYc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
}

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

.styles__recoveryCode___3iUl5 {
  margin-right: 40px;
}

.styles__recoveryCode___3iUl5 .styles__recoveryCodeBtn___1Ml2H {
    width: 190px;
    height: 33px;
    margin: 25px 0;
    border-radius: 4px;
    text-align: center;
  }

.styles__disableBtn___2_ptg {
  color: #e12b0c;
  width: 180px;
  height: 33px;
  border: 1px solid #e12b0c;
  border-radius: 4px;
  font-weight: 800;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 25px 0
}

.styles__disableBtn___2_ptg:hover {
  border: 1px solid #e12b0c;
}

.styles__saveBtnWithTokens___3000W {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-left: 20px;
}

.styles__saveBtnWithTokens___3000W button {
    margin: 0;
  }

.styles__saveBtnWithTokens___3000W .styles__twoButtons___3QXW- button:nth-child(1) {
  margin-right: 18px;
}

.styles__invertedPanicButton___1UwII:hover {
  background-color: #871907 !important;
  color: #ffffff !important;
  border-color: #871907 !important;
}

.styles__invertedRegularButton___mHBd9:hover {
  background-color: #2596ec !important;
  color: #ffffff !important;
  border-color: #2596ec !important;
}

.styles__apiCodeBlock___1ueuA {
  word-wrap: break-word;
}

/* cloud providers card */

.styles__cloudProviderRow___1XRgL {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}

.styles__cloudProviderRow___1XRgL > * {
  lost-column-cycle: 6;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(20.8125% - 9.5px);
  max-width: calc(20.8125% - 9.5px);
  width: calc(20.8125% - 9.5px);
}

.styles__cloudProviderRow___1XRgL > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(41.625% - 7px);
  max-width: calc(41.625% - 7px);
  width: calc(41.625% - 7px);
}

.styles__cloudProviderRow___1XRgL > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(8.325% - 11px);
  max-width: calc(8.325% - 11px);
  width: calc(8.325% - 11px);
}

.styles__cloudProviderRow___1XRgL > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(3):last-child {
  margin-right: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(4) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(8.325% - 11px);
  max-width: calc(8.325% - 11px);
  width: calc(8.325% - 11px);
}

.styles__cloudProviderRow___1XRgL > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(4):last-child {
  margin-right: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(4):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(5) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(14.985% - 10.2px);
  max-width: calc(14.985% - 10.2px);
  width: calc(14.985% - 10.2px);
}

.styles__cloudProviderRow___1XRgL > *:nth-child(5):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(5):last-child {
  margin-right: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(5):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(6) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(14.1525% - 10.3px);
  max-width: calc(14.1525% - 10.3px);
  width: calc(14.1525% - 10.3px);
}

.styles__cloudProviderRow___1XRgL > *:nth-child(6):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(6):last-child {
  margin-right: 0;
}

.styles__cloudProviderRow___1XRgL > *:nth-child(6):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__cloudProviderRow___1XRgL {
  border-top: 1px solid #e0e4e7;
  border-bottom: 1px solid #e0e4e7;
  margin-top: -1px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__cloudProviderRow___1XRgL .styles__noMargin___1PRY_ {
    margin: 0;
}

/* Fix overflow issue in safari */

.styles__cloudProviderRow___1XRgL > * {
    -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
}

.styles__linkedProviderName___1oUMk {
  font-weight: 700;
  color: #254356;
}

.styles__providerName___1LKLS {
  font-weight: 700;
  color: #c0c9ce;
}

/* source providers card? */

.styles__info___Mf8Pk {
  margin-bottom: 20px;
  background-color: #f7f7f8;
  padding: 16px;
  border-radius: 3px;
}

/* access tokens */

.styles__accessTokensView___2HU4q {
  lost-container: column
}

.styles__accessTokensView___2HU4q > *:nth-child(1) {
  width: 100%;
  height: calc(33.3% - 8px);
  margin-bottom: 12px;
}

.styles__accessTokensView___2HU4q > *:nth-child(1):last-child {
  margin-bottom: 0;
}

.styles__accessTokensView___2HU4q > *:nth-child(2) {
  width: 100%;
  height: calc(33.3% - 8px);
  margin-bottom: 12px;
}

.styles__accessTokensView___2HU4q > *:nth-child(2):last-child {
  margin-bottom: 0;
}

.styles__accessTokensView___2HU4q > *:nth-child(3) {
  width: 100%;
  height: calc(33.3% - 8px);
  margin-bottom: 12px;
}

.styles__accessTokensView___2HU4q > *:nth-child(3):last-child {
  margin-bottom: 0;
}

.styles__accessTokensView___2HU4q .styles__expandible___1DROc {
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}

.styles__accessTokensView___2HU4q .styles__collapsed___2emq7 {
    max-height: 392px !important;
}

.styles__accessTokensView___2HU4q .styles__expanded___1j39H {
    max-height: 1960px !important;
}

.styles__showMoreOrLess___29woZ {
  text-align: center;
}

.styles__showMoreOrLess___29woZ .styles__link___1Z6Ki {
    text-decoration: none;
    cursor: pointer;
  }

.styles__showMoreOrLess___29woZ .styles__link___1Z6Ki span,
    .styles__showMoreOrLess___29woZ .styles__link___1Z6Ki svg {
      vertical-align: middle;
    }

.styles__showMoreOrLess___29woZ .styles__icon___2LPZd {
    -webkit-transition: rotate 0.5s ease-in-out;
    transition: rotate 0.5s ease-in-out;
  }

.styles__showMoreOrLess___29woZ .styles__rotateIcon___3GnjZ {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

/* notifications email, slack and announcements */

.styles__notifications___KlYYL .styles__emailRadiogroup___9c30p {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }

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

/* billing card */

.styles__billing___3JvVM {
  margin-left: 16px;
}

/* plans */

.styles__planDetails___32ZoM {
  height: 180px;
}

.styles__planDetails___32ZoM .styles__planContent___1bwbx {
    margin: 0 80px;
  }

.styles__planDetails___32ZoM .styles__icon___2LPZd {
    fill: #8f9ea8;
    margin-right: 8px;
  }

.styles__planDetails___32ZoM .styles__nodeCost___1E8bm,
  .styles__planDetails___32ZoM .styles__privateReposAvailable___FG0n6 {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    margin-bottom: 4px;
  }

.styles__planDetails___32ZoM .styles__privateReposUsed___RaWTm {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    color: #00cbca;
    margin-bottom: 4px;
  }

.styles__planDetails___32ZoM .styles__bigNumber___9IHG4 {
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: normal;
    color: #254356;
    margin-right: 12px;
  }

.styles__planDetails___32ZoM .styles__priceText___2UQBz {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: normal;
    color: #254356;
    margin-bottom: 4px;
  }

.styles__planDetails___32ZoM .styles__priceText___2UQBz .styles__bigNumber___9IHG4 {
      margin-right: 8px;
      margin-left: 8px;
    }

.styles__planDetails___32ZoM .styles__usageDescription___2yDLD {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

.styles__planDetails___32ZoM .styles__usageText___36wz8 {
    -ms-flex-item-align: center;
        align-self: center;
  }

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 > * {
  lost-column-cycle: 2;
}

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(58.275% - 5px);
  max-width: calc(58.275% - 5px);
  width: calc(58.275% - 5px);
}

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(41.625% - 7px);
  max-width: calc(41.625% - 7px);
  width: calc(41.625% - 7px);
}

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__planDetails___32ZoM .styles__splitPanels___fLr01 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.styles__planDetails___32ZoM button {
    margin: 0;
  }

.styles__planDetails___32ZoM .styles__planButton___2f5-u {
    margin-top: 20px;
  }

/* coupon codes */

.styles__couponCodes___1SYqn {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}

.styles__couponCodes___1SYqn > * {
  lost-column-cycle: 3;
}

.styles__couponCodes___1SYqn > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__couponCodes___1SYqn > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__couponCodes___1SYqn > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__couponCodes___1SYqn > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__couponCodes___1SYqn > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(8.325% - 11px);
  max-width: calc(8.325% - 11px);
  width: calc(8.325% - 11px);
}

.styles__couponCodes___1SYqn > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__couponCodes___1SYqn > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__couponCodes___1SYqn > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__couponCodes___1SYqn > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(41.625% - 7px);
  max-width: calc(41.625% - 7px);
  width: calc(41.625% - 7px);
}

.styles__couponCodes___1SYqn > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__couponCodes___1SYqn > *:nth-child(3):last-child {
  margin-right: 0;
}

.styles__couponCodes___1SYqn > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__couponCodes___1SYqn .styles__button___3YzDk {
    min-width: 40px;
    margin: 0 0 0 16px;
    padding: 0;
}

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

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

.styles__couponCodesTitle___1MUQb .styles__infoTooltip___ZeCPC {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-left: 16px;
  }

/* quotas */

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
  }

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > * {
  lost-column-cycle: 2;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul {
      list-style: none;
      padding: 0;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul::before,
  .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul::after {
  content: ' ';
  display: table;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul::after {
  clear: both;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul {
  padding-left: 16px;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin: 0 -4px 12px -4px;
}

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 li .styles__quotaField___1o2OA:first-child {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
      }

.styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 li > * {
  margin: 0 4px;
}

/* delete account card */

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

.styles__deleteAccount___xwjfE > div > p {
      color: #ef4a53;
    }

.styles__deleteAccount___xwjfE button {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 200px;
            flex: 0 0 200px;
  }

.styles__accessTokensTable___2vyN7 {
  margin-top: 32px;
  min-height: 220px
}

.styles__accessTokensTable___2vyN7 > * {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.styles__accessTokensTable___2vyN7 > * > * {
  lost-column-cycle: 6;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(4.1625% - 11.5px);
  max-width: calc(4.1625% - 11.5px);
  width: calc(4.1625% - 11.5px);
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(37.4625% - 7.5px);
  max-width: calc(37.4625% - 7.5px);
  width: calc(37.4625% - 7.5px);
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(22.89375% - 9.25px);
  max-width: calc(22.89375% - 9.25px);
  width: calc(22.89375% - 9.25px);
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(3):last-child {
  margin-right: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(4) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(22.89375% - 9.25px);
  max-width: calc(22.89375% - 9.25px);
  width: calc(22.89375% - 9.25px);
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(4):last-child {
  margin-right: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(4):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(5) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(8.325% - 11px);
  max-width: calc(8.325% - 11px);
  width: calc(8.325% - 11px);
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(5):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(5):last-child {
  margin-right: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(5):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(6) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(8.325% - 11px);
  max-width: calc(8.325% - 11px);
  width: calc(8.325% - 11px);
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(6):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(6):last-child {
  margin-right: 0;
}

.styles__accessTokensTable___2vyN7 > * > *:nth-child(6):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__accessTokensTable___2vyN7 > * {
  margin: 12px 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__accessTokensTable___2vyN7 .styles__accessTokensHeader___36xVp {
    color: #6f777c;
    font-weight: 500;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.styles__accessTokensTable___2vyN7 .styles__selectAction___2z9fs {
    -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__accessTokensTable___2vyN7 .styles__selectAction___2z9fs .styles__checkboxParent___2KYcT {
      width: 14px;
      height: 14px;
    }

.styles__accessTokensTable___2vyN7 .styles__selectAction___2z9fs .styles__checkbox___3PCLo {
      opacity: 0.5;
    }

.styles__accessTokensTable___2vyN7 .styles__selectAction___2z9fs .styles__checkbox___3PCLo.styles__checked___3QE5b {
      opacity: 1;
    }

.styles__accessTokensTable___2vyN7 .styles__selectAction___2z9fs .styles__checkboxIcon___DPpa2 {
      width: 14px;
      height: 14px;
    }

/* cloudProviderError */

.styles__errorField___3UN91 {
  display: none;
  color: #ef4a53
}

.styles__errorField___3UN91.styles__visible___3SM1Y {
  display: block;
}

.styles__errorField___3UN91 > * {
  vertical-align: middle;
}

.styles__errorField___3UN91 .styles__errorText___1He5s {
    margin-left: 8px;
}

/* convert account to organization */

.styles__convertAccount___2FPQE {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}

.styles__convertAccount___2FPQE > * {
  lost-column-cycle: 2;
}

.styles__convertAccount___2FPQE > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(70.7625% - 3.5px);
  max-width: calc(70.7625% - 3.5px);
  width: calc(70.7625% - 3.5px);
}

.styles__convertAccount___2FPQE > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__convertAccount___2FPQE > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__convertAccount___2FPQE > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__convertAccount___2FPQE > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(29.1375% - 8.5px);
  max-width: calc(29.1375% - 8.5px);
  width: calc(29.1375% - 8.5px);
}

.styles__convertAccount___2FPQE > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__convertAccount___2FPQE > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__convertAccount___2FPQE > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

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

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

.styles__convertAccount___2FPQE .styles__semiBold___tTCB4 {
    font-weight: 600;
}

.styles__convertAccount___2FPQE .styles__button___3YzDk {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    height: 48px;
}

.styles__successMessage___3-KSU {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 12px;
  color: #00cbca;
}

.styles__successMessage___3-KSU .styles__successIcon___CDYfx {
    height: 18px;
    width: 18px;
    vertical-align: bottom;
    margin-right: 4px;
  }

.styles__accountSwitcher___1NuN- {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-bottom: 20px;
}

.styles__accountSwitcher___1NuN- span {
    margin-right: 12px;
  }

.styles__twoFactor___3lBio {
  text-align: center;
  margin: 0 auto;
  width: 511px;
}

.styles__twoFactor___3lBio .styles__twoFactorDescription___tOabJ {
    line-height: 19px;
  }

.styles__twoFactor___3lBio .styles__twoFactorDescription___tOabJ .styles__subheader___2lMEq {
      font-weight: 600;
    }

.styles__warning___2kpbG {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 12px 0;
}

.styles__warning___2kpbG .styles__emphasis___3j6lY {
    margin-left: 10px;
    color: #e12b0c;
  }

.styles__twoFactorLoading___LGOTC {
  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;
  min-height: 125px;
}

.styles__link___1Z6Ki {
  text-decoration: none;
  cursor: pointer;
  color: #2596ec;
}

.styles__link___1Z6Ki a {
    text-decoration: none;
  }

.styles__disableModal___AT__3 {
  max-width: 460px !important;
  max-height: 490px !important;
}

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

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

.styles__hr___f3Azn {
  -ms-flex-item-align: start;
      align-self: flex-start;
  -webkit-box-flex: 99;
      -ms-flex-positive: 99;
          flex-grow: 99;
}

.styles__horizontalLine___2zK8g {
  height: 1px;
  border: 0;
  border-top: 1px solid #e0e4e7;
  margin: 0 35px;
}

.styles__failureModal___1e9lj {
  border-top: 8px solid #e12b0c;
}

@media (max-width: 1200px) {
  .styles__convertAccount___2FPQE {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .styles__convertAccount___2FPQE > * {
    lost-column-cycle: 2;
  }
  .styles__convertAccount___2FPQE > *:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 99.9%;
    max-width: 99.9%;
    width: 99.9%;
  }
  .styles__convertAccount___2FPQE > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__convertAccount___2FPQE > *:nth-child(1):last-child {
    margin-right: 0;
  }
  .styles__convertAccount___2FPQE > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__convertAccount___2FPQE > *:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 99.9%;
    max-width: 99.9%;
    width: 99.9%;
  }
  .styles__convertAccount___2FPQE > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__convertAccount___2FPQE > *:nth-child(2):last-child {
    margin-right: 0;
  }
  .styles__convertAccount___2FPQE > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__convertAccount___2FPQE {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

@media (min-width: 601px) and (max-width: 960px) {
  .styles__twoFactor___3lBio {
    max-width: 600px;
  }
    .styles__twoFactor___3lBio .styles__twoFactorDescription___tOabJ {
      min-height: 57px;
    }
}

.styles__twoFactorMagicCarpet___1tvrL {
  background-color: #ffffff;
  padding: 32px;
  overflow-y: auto;
  width: 98% !important;
  height: 98vh !important;
  outline: none;
}

@media (max-width: 820px) {
  .styles__twoFactor___3lBio {
    width: 820px;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
    .styles__twoFactor___3lBio .styles__twoFactorDescription___tOabJ {
      min-height: 57px;
    }
}

.styles__marginSpacing___2TKQG {
  margin-top: 40px;
}

.styles__accessTitle___2ifCq {
  font-size: 18px;
}

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

.changePasswordAndAccountInformation__wrapped___3Q-g- {
  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 changePasswordAndAccountInformation__fadein___2Kzku {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.changePasswordAndAccountInformation__inputField___aScoZ:not(:first-child) {
  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.
*/

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

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

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

.ChangePasswordForm__forgotPassword___2VVDz {
  margin-top: 20px;
}

.ChangePasswordForm__alertMessage___3QXvL {
  margin-bottom: 20px;
}

.style__link___3weRl {
  text-decoration: none;
  cursor: pointer;
}
  .style__link___3weRl a {
    text-decoration: none;
  }

.styles__link___LQ3gY {
  text-decoration: none;
  cursor: pointer;
}
  .styles__link___LQ3gY a {
    text-decoration: none;
  }

.style__loading___36WMv {
  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___3ErrV {
  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___3hU_B {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__repoUsage___1GVBC {
  font-size: 14px;
  line-height: 20px;
  color: #27343b;
  padding-bottom: 20px;
}

.styles__warn___3UyH6 {
  color: #bf3b42;
}

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

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

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

.styles__inputField___3cY98 {
  min-height: 62px;
}

.styles__repoName___2HTWC {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

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

.styles__namespace___LXJx- {
  margin-top: 6px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.styles__repoNameInput___32bZF {
  padding-left: 16px;
  width: 100%;
}

.styles__repoUsage___cRFYx {
  font-size: 14px;
  line-height: 20px;
  color: #27343b;
  padding-bottom: 20px;
}

.styles__warn___25Ywv {
  color: #bf3b42;
}

.styles__privacy___TNUzt {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.styles__privacy___TNUzt > * {
  lost-column-cycle: 2;
}

.styles__privacy___TNUzt > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__privacy___TNUzt > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__privacy___TNUzt > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__privacy___TNUzt > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__privacy___TNUzt > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__privacy___TNUzt > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__privacy___TNUzt > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__privacy___TNUzt > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__privacy___TNUzt {
  padding-bottom: 12px;
}

.styles__privacyLabel___BirfX {
  margin-top: -8px;
}

.styles__privacyIcon___5Qb1L {
  margin: 0 6px 2px;
}

.styles__privacyLabelNameAndIcon___H8u9X {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.styles__privacyLabelName___2CDAf {
  font-size: 14px;
  line-height: 20px;
  color: #27343b;
  font-weight: 600;
}

.styles__privacyLabelDescription___2UMT4 {
  font-size: 14px;
  line-height: 20px;
  color: #27343b;
  padding-top: 4px;
}

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

.styles__sourceProvider___2CDLW {
  cursor: pointer;
  margin: 0 4px;
  border-radius: 4px;
}

.styles__selected___GxcSl {
  opacity: 1;
  border: 1px solid #e0e4e7;
}

.styles__privacyOption___2MR4i {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40%;
          flex: 1 1 40%;
  margin: 0 !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___2SB7q {
  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___3KMbl {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__submitRow___2UcLW {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 12px 0;
}

.styles__submitRow___2UcLW.styles__alignLeft___2tnZ2 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.styles__submitRow___2UcLW.styles__alignLeft___2tnZ2 .styles__submit___uPnTl {
    margin-left: 0;
  }

.styles__submitError___2-dpR {
  -ms-flex-item-align: center;
      align-self: center;
  font-style: italic;
  color: #e12b0c;
}

.styles__currentStatus___22kAO {
  -ms-flex-item-align: center;
      align-self: center;
  margin: 0 20px;
}

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

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

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

/*
@francisco 2017/03/20
NOTE: This should be moved to @docker/core or @docker/css
cloud shouldn't set/mutate any global classnames
*/

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

.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--multi .Select-value {
    background-color: #e0e4e7;
    border-radius: 2px;
    border: none;
    color: #445d6e;
    display: inline-block;
    font-size: 12px;
    line-height: 1.4;
    margin-left: 5px;
    margin-top: 5px;
    vertical-align: top;
  }

.Select--multi a.Select-value-label {
    color: #445d6e;
    cursor: pointer;
    text-decoration: none;
  }

.Select--multi .Select-value-icon {
    cursor: pointer;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    border-right: none;
    padding: 3px 0 1px 5px;
  }

.Select--multi .Select-value-icon:hover, .Select--multi .Select-value-icon:focus {
    background-color: #e0e4e7;
    color: #445d6e;
  }

.Select--multi .Select-value-icon:active {
    background-color: #445d6e;
  }

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

.styles__errorText___1hHbe {
  display: none;
  color: #ef4a53;
  font-size: 12px;
  height: 16px;
  margin-top: 4px
}

.styles__errorText___1hHbe.styles__visible___1iv5a {
  display: block;
}

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

@keyframes styles__fadein___3CAQF {
  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.
*/

.styles__labelFieldContainer___3uc8S {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.styles__labelFieldContainer___3uc8S > * {
  lost-column-cycle: 2;
}

.styles__labelFieldContainer___3uc8S > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(24.975% - 9px);
  max-width: calc(24.975% - 9px);
  width: calc(24.975% - 9px);
}

.styles__labelFieldContainer___3uc8S > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__labelFieldContainer___3uc8S > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__labelFieldContainer___3uc8S > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__labelFieldContainer___3uc8S > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(74.925% - 3px);
  max-width: calc(74.925% - 3px);
  width: calc(74.925% - 3px);
}

.styles__labelFieldContainer___3uc8S > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__labelFieldContainer___3uc8S > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__labelFieldContainer___3uc8S > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__labelFieldContainer___3uc8S {
  margin: 0 20px 20px 20px;
}

.styles__alignCenter___Gb712 {
  -ms-flex-item-align: center;
      align-self: center;
}

.styles__alignTop___1J-AJ {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.styles__label___1-81p {
  color: #8f9ea8;
  -ms-flex-item-align: start;
      align-self: flex-start;
  text-transform: uppercase;
}

.styles__label___1-81p.styles__disabled___16jPl,
.styles__field___3Lbwx.styles__disabled___16jPl {
  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___YOqVS {
  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___1tUev {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__statusMessage___16Uy8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 63px;
  background: #fafafb;
  border-left: 4px solid;
  padding: 20px 14px;
}

.styles__error___33Lj_ {
  border-color: #e12b0c;
  fill: #e12b0c;
}

.styles__success___bNvZe {
  border-color: #00a000;
  fill: #00a000;
}

.styles__warning___2ZHD2 {
  border-color: #cccc00;
  fill: #cccc00;
}

.styles__default___FdpiS {
  border-color: #cccccc;
}

.styles__content___RFYzG {
  margin-left: 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___3bkDo {
  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___3uKDR {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

/* billing */

.styles__billingDates___2uMjP {
  display: inline-block;
  width: 100%;
}

.styles__billingRow___1sb_a {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.styles__billingRow___1sb_a > * {
  lost-column-cycle: 2;
}

.styles__billingRow___1sb_a > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__billingRow___1sb_a > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__billingRow___1sb_a > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__billingRow___1sb_a > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__billingRow___1sb_a > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__billingRow___1sb_a > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__billingRow___1sb_a > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__billingRow___1sb_a > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__billingRow___1sb_a {
  min-height: 64px;
}

.styles__billingRowCVVExpiration___2ecGn {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.styles__billingRowCVVExpiration___2ecGn > * {
  lost-column-cycle: 2;
}

.styles__billingRowCVVExpiration___2ecGn > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.3% - 8px);
  max-width: calc(33.3% - 8px);
  width: calc(33.3% - 8px);
}

.styles__billingRowCVVExpiration___2ecGn > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__billingRowCVVExpiration___2ecGn > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__billingRowCVVExpiration___2ecGn > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__billingRowCVVExpiration___2ecGn > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(66.6% - 4px);
  max-width: calc(66.6% - 4px);
  width: calc(66.6% - 4px);
}

.styles__billingRowCVVExpiration___2ecGn > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__billingRowCVVExpiration___2ecGn > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__billingRowCVVExpiration___2ecGn > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__billingZipCountry___9AVV7 {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.styles__billingZipCountry___9AVV7 > * {
  lost-column-cycle: 3;
}

.styles__billingZipCountry___9AVV7 > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(16.65% - 10px);
  max-width: calc(16.65% - 10px);
  width: calc(16.65% - 10px);
}

.styles__billingZipCountry___9AVV7 > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__billingZipCountry___9AVV7 > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__billingZipCountry___9AVV7 > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__billingZipCountry___9AVV7 > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__billingZipCountry___9AVV7 > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__billingZipCountry___9AVV7 > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__billingZipCountry___9AVV7 > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__billingZipCountry___9AVV7 > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(33.3% - 8px);
  max-width: calc(33.3% - 8px);
  width: calc(33.3% - 8px);
}

.styles__billingZipCountry___9AVV7 > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__billingZipCountry___9AVV7 > *:nth-child(3):last-child {
  margin-right: 0;
}

.styles__billingZipCountry___9AVV7 > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__billingZipCountry___9AVV7 {
  min-height: 64px;
}

.styles__billingFormContent___19OqW {
  margin: 0 20px;
}

.styles__billingHeader___sHFJa {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: bolder;
  color: #c0c9ce;
  padding-bottom: 16px;
}

.styles__billingOrgHeader___2Zaos {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: bolder;
  color: #c0c9ce;
  margin-top: -20px;
}

.styles__billingNote___1mHf7 {
  margin: 4px 0 20px;
}

.styles__billingHeaderInner___2o525 {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: bolder;
  color: #c0c9ce;
  padding: 32px 16px 16px 0;
}

.styles__billingCountry___1SWv8 {
  margin-top: 4px;
}

.styles__billingExpiration___2D92O {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.styles__billingExpiration___2D92O > * {
  lost-column-cycle: 2;
}

.styles__billingExpiration___2D92O > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__billingExpiration___2D92O > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__billingExpiration___2D92O > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__billingExpiration___2D92O > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__billingExpiration___2D92O > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__billingExpiration___2D92O > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__billingExpiration___2D92O > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__billingExpiration___2D92O > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__billingExpiration___2D92O {
  margin-top: 8px;
}

.styles__billingFooter___2jQQl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 40px;
}

@-webkit-keyframes styles__progress___1htcx {
  from {
    width: 137px;
  }
  to {
    width: 275px;
  }
}

@keyframes styles__progress___1htcx {
  from {
    width: 137px;
  }
  to {
    width: 275px;
  }
}

.styles__billingProgressBar___108un {
  width: 275px;
  border-bottom: solid 2px #e0e4e7;
}

.styles__billingProgressBar___108un > * {
    width: 275px;
    -webkit-animation-name: styles__progress___1htcx;
            animation-name: styles__progress___1htcx;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    position: absolute;
    border-bottom: solid 2px #2496ed;
  }

/* end billing */

.styles__card___4ah4I {
  height: 100%;
}

.styles__descriptionText___37-J9 {
  margin-bottom: 16px;
}

.styles__modalBottom___1RTuy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 12px;
  margin-right: 0;
}

.styles__errorMsg___9ln3A {
  -ms-flex-item-align: center;
      align-self: center;
  color: #ef4a53;
}

.styles__errorMsg___9ln3A svg {
    margin-bottom: -4px;
    margin-right: 8px;
  }

.styles__buttonRow___Z8jiQ {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 50px;
}

.styles__copyAccess___4iChj {
  margin-top: 20px;
}

.styles__removeMarginFromButton___2eBum button:last-child {
  margin: 6px 0;
}

.styles__alignFirstButtonLeft___9ppyL {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between
}

.styles__alignFirstButtonLeft___9ppyL button:nth-child(1) {
  margin: 6px 0;
}

.styles__alignFirstButtonLeft___9ppyL button:nth-child(2) {
  margin-left: 50%;
}

.styles__alignFirstButtonLeft___9ppyL button:last-child {
  margin: 6px 0;
}

.styles__editDeleteButton___2Qh19:hover {
  background-color: #bf3b42 !important;
  color: #ffffff !important;
}

.styles__planSelectionForm___1awnM {
  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__icon___1x7bF {
  fill: #8f9ea8;
  margin-right: 8px;
}

.styles__useCreditCard___2oVJH {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
}

.styles__useCreditCard___2oVJH .styles__title___12Bqt {
    margin-bottom: 8px;
  }

.styles__useCreditCard___2oVJH .styles__icon___1x7bF {
    margin-bottom: -3px;
  }

.styles__useCreditCard___2oVJH .styles__creditCard___2ck6h {
    font-size: 14px;
  }

.styles__useCreditCard___2oVJH .styles__expires___swovo {
    color: #445d6e;
  }

.styles__error___2tumD {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 350px;
  color: #ef4a53
}

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

.styles__error___2tumD > svg {
    margin-right: 8px;
}

.styles__use___2AK4b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  color: #254356;
}

.styles__expires___swovo {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  color: #c0c9ce;
}

.styles__changeBillingInfo___2NeC8 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  color: #8f9ea8;
}

.styles__planSelector___2zuEr {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}

.styles__planSelector___2zuEr > * {
  lost-column-cycle: 2;
}

.styles__planSelector___2zuEr > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(58.275% - 5px);
  max-width: calc(58.275% - 5px);
  width: calc(58.275% - 5px);
}

.styles__planSelector___2zuEr > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__planSelector___2zuEr > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__planSelector___2zuEr > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__planSelector___2zuEr > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(41.625% - 7px);
  max-width: calc(41.625% - 7px);
  width: calc(41.625% - 7px);
}

.styles__planSelector___2zuEr > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__planSelector___2zuEr > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__planSelector___2zuEr > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__planSelector___2zuEr {
  margin: space-sm;
  height: 386px;
}

.styles__planSelector___2zuEr .styles__planDetails___awb6Y {
    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;
    background-color: #f7f7f8;
    padding: 16px;
    text-align: center;
    color: #8f9ea8;
    border-radius: 2px;
    border-color: transparent;
}

.styles__planSelector___2zuEr .styles__planDetails___awb6Y > p {
      margin: 0 0 12px 0;
    }

.styles__planSelector___2zuEr .styles__priceText___1RP7B {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: normal;
    color: #2496ed;
    margin-bottom: 20px;
}

.styles__planSelector___2zuEr .styles__price___1RDYc {
    font-size: 38px;
    line-height: 44px;
    font-weight: 700;
    color: #2496ed;
}

.styles__planSelector___2zuEr .styles__checkboxes___10FhI {
    height: 80px;
}

.styles__planSelector___2zuEr .styles__planSlider___2SQBO {
    width: 90%;
}

.styles__accessTokenForm___3z5lT {
  min-height: 400px;
  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__accessTokenForm___3z5lT .styles__secretLabel___2rCRd {
    color: #27343b;
    font-size: 14px;
    margin-left: 20px;
  }

.styles__removeAPIKeyRowSubmitting___3jdmt {
  opacity: 0.5;
  pointer-events: none;
}

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

.styles__accessTokenAction___2ix8- {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  fill: #8f9ea8;
  margin-right: 12px
}

.styles__accessTokenAction___2ix8- :hover {
  fill: #2596ec;
}

.styles__editAccessTokenDescriptionHeader___247EA {
  font-size: 12px;
  color: #70787d;
  margin-top: 38px;
  margin-bottom: 6px;
}

.styles__editAccessTokenFormHeader___o9x_U {
  color: #6f777c;
  font-size: 14px;
  line-height: 19px;
  text-transform: uppercase;
}

.styles__editAccessTokenFormHeader___o9x_U .styles__editAccessTokenInfo___VUd4E {
    margin-top: 4px;
    color: #27343b;
    text-transform: none;
  }

.styles__editAccessTokenGrid___YuQSA {
  display: grid;
  grid-template-columns: 35% 50%;
  grid-gap: 24px;
  margin: 24px 0;
}

.styles__emailNotificationForm___3OU-L .styles__radioGroup___3DdjY, .styles__slackNotificationLevelForm___ITGpu .styles__radioGroup___3DdjY {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 -20px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: top;
        -ms-flex-align: top;
            align-items: top
  }

.styles__emailNotificationForm___3OU-L .styles__radioGroup___3DdjY > *, .styles__slackNotificationLevelForm___ITGpu .styles__radioGroup___3DdjY > * {
  display: block;
  margin: 0 20px;
  white-space: nowrap;
}

.styles__notificationMessage___1fCXN {
  /* @mixin tertiary; */
  margin-top: 24px;
}

.styles__notificationMessage___1fCXN svg {
    fill: #8f9ea8;
    width: 18px;
    margin-bottom: -8px;
    margin-right: 4px;
  }

.styles__slackNotificationLevelForm___ITGpu {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.styles__slackNotificationLevelForm___ITGpu > * {
  lost-column-cycle: 2;
}

.styles__slackNotificationLevelForm___ITGpu > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(83.25% - 2px);
  max-width: calc(83.25% - 2px);
  width: calc(83.25% - 2px);
}

.styles__slackNotificationLevelForm___ITGpu > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__slackNotificationLevelForm___ITGpu > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__slackNotificationLevelForm___ITGpu > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__slackNotificationLevelForm___ITGpu > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(16.65% - 10px);
  max-width: calc(16.65% - 10px);
  width: calc(16.65% - 10px);
}

.styles__slackNotificationLevelForm___ITGpu > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__slackNotificationLevelForm___ITGpu > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__slackNotificationLevelForm___ITGpu > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__slackNotificationLevelForm___ITGpu {
  margin-top: 20px;
}

.styles__emailNotificationForm___3OU-L .styles__address___1PjLX {
  margin-bottom: 16px;
}

.styles__slackNotificationForm___2Y_kG.styles__slackNotificationFormDeleting___e2uf_ {
  opacity: 0.5;
  pointer-events: none;
}

.styles__slackNotificationsCreateForm___2mnlQ {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 -16px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__slackNotificationsCreateForm___2mnlQ .styles__inputContainer___26Vq5 {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }

.styles__slackNotificationsCreateForm___2mnlQ > * {
  display: block;
  margin: 0 8px;
  white-space: nowrap;
}

.styles__slackNotificationsCreateForm___2mnlQ .styles__deleteIcon___2EvW1 {
    cursor: pointer;
    fill: #8f9ea8;
}

.styles__slackNotificationsCreateForm___2mnlQ .styles__deleteIcon___2EvW1:hover {
  fill: #ef4a53;
}

.styles__slackNotificationsCreateForm___2mnlQ .styles__deleteIcon___2EvW1 svg {
      position: relative;
      top: 12px;
}

.styles__slackNotificationsCreateForm___2mnlQ .styles__slackCreateBtn___3Hh9G {
    position: relative;
    top: 10px;
}

.styles__successMessage___2lAKE {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  color: #00cbca;
}

.styles__successMessage___2lAKE .styles__iconWrapper___1gIMb {
    margin-right: 8px;
  }

.styles__emailError___dIk87 {
  margin-bottom: 20px;
}

.styles__azureCertificateDownloadButton___2dhfl .styles__buttonLabel___1YhkP {
    margin-left: 8px;
  }

.styles__link___3HDQ7 {
  text-decoration: none;
  cursor: pointer;
  color: #2596ec;
}

.styles__link___3HDQ7 a {
    text-decoration: none;
  }

.styles__accessForm___jX64t {
  min-height: 250px;
}

.styles__newAccessTokenModalBody___1dgvF {
  max-width: 590px;
  margin: 0 auto;
}

.styles__addAccessTokenSubheader___1kIvw {
  margin-bottom: 40px;
}

.styles__resultDescription___2rZc8 {
  text-transform: uppercase;
  color: #6f777c;
  margin-top: 30px;
  line-height: 19px;
}

.styles__resultToken___1ke4F {
  margin-top: 6px;
  margin-bottom: 30px;
  word-wrap: break-word;
}

.styles__copyCommand___EfxHl textarea:focus,
  .styles__copyCommand___EfxHl input:focus {
    outline: none;
  }

.styles__resultExample____4FpP {
  margin: 15px 0;
}

.styles__resultExample____4FpP .styles__firstCommand___2xMrV {
    margin: 5px 0;
  }

.styles__warningBox___Q_VWk {
  margin: 15px 0;
  height: 80px;
  background: #fafafb;
}

.styles__warningBox___Q_VWk .styles__yellowBar___3fx8Y {
    position: absolute;
    width: 4px;
    height: 80px;
    background: #f7d933;
    margin-right: 10px;
  }

.styles__warningBox___Q_VWk .styles__warningMessage___3B9YO {
    padding: 25px;
    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;
  }

.styles__warningBox___Q_VWk .styles__warningMessage___3B9YO .styles__warningText___BjoxI {
      margin: 20px;
    }

.styles__warningBox___Q_VWk .styles__secretLabel___2rCRd {
    color: #27343b;
    font-size: 14px;
    margin-left: 20px;
  }

@media (max-width: 960px) {
  .styles__accessForm___jX64t {
    max-width: 600px;
  }
}

@media (max-width: 600px) {
  .styles__accessForm___jX64t {
    max-width: 500px;
    padding: 16px;
  }
  .styles__warningBox___Q_VWk {
    height: 100px;
    margin-right: 16px;
  }
    .styles__warningBox___Q_VWk .styles__yellowBar___3fx8Y {
      height: 100px;
    }
    .styles__warningBox___Q_VWk .styles__secretLabel___2rCRd {
      margin-right: 20px;
    }
  .styles__alignFirstButtonLeft___9ppyL {
    -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;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center
  }
  .styles__alignFirstButtonLeft___9ppyL button:nth-child(2) {
    margin-left: 10px;
  }
}

@media (max-width: 480px) {
  .styles__accessForm___jX64t {
    max-width: 325px;
    padding: 16px;
  }
  .styles__warningBox___Q_VWk {
    margin-right: 16px;
    height: 150px;
  }
    .styles__warningBox___Q_VWk .styles__yellowBar___3fx8Y {
      height: 150px;
    }
}

.styles__button___2q1Wr button {
    margin: 6px 0 !important;
  }

.styles__selectAction___1oiOf {
  -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___1oiOf .styles__checkboxParent___2sFLM {
    width: 14px;
    height: 14px;
  }

.styles__selectAction___1oiOf .styles__checkbox___3gMGf {
    opacity: 0.5;
  }

.styles__selectAction___1oiOf .styles__checkbox___3gMGf.styles__checked___5y3ax {
    opacity: 1;
  }

.styles__selectAction___1oiOf .styles__checkboxIcon___c1eXp {
    width: 14px;
    height: 14px;
  }

.styles__asterisk___3Pzj_ {
  color: #e12b0c;
}

.styles__code___2haxq {
  background-color: #f3f4f4;
  display: inline-block;
  padding: 5px 10px;
  font-family: 'Courier New', Courier, monospace;
}

.SourceProviders__orgSuggestionAlert___a88BV {
  margin-bottom: 20px;
}

.SourceProviders__providerKey___25q3W {
  word-wrap: break-word;
}

.SourceProviders__addCredentials___1eJo6 {
  color: #82949e;
}

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

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

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

.ReactModal__Overlay {
    opacity: 0;
  }

.ReactModal__Overlay--after-open {
    opacity: 1;
    -webkit-transition: opacity 250ms ease-out;
    transition: opacity 250ms ease-out;
  }

.styles__magicCarpet___3aR2B {
  background-color: #ffffff;
  -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;
  overflow-y: auto;
}

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

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

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

.styles__close___1UKjm {
  width: 20px;
  height: 20px;
}

.styles__close___1UKjm {
  -ms-flex-item-align: start;
      align-self: flex-start;
  cursor: pointer;
}

/* Must be greater than FullscreenLoading's zindex so close can be pressed */

.styles__aboveLoading___J4oLZ {
  z-index: 1000;
}

.styles__icon___1XVIx {
  margin-right: 12px;
}

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

.styles__subscription___uw59t {
  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___kjjSM {
  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___rwTTE {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

@font-face {
  font-family: 'Inconsolata';
  src: url(https://fonts.gstatic.com/s/inconsolata/v18/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2);
}

.styles__parent___302JG {
  background: #ffffff;
}

.styles__wrapper___VB3ki {
  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;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
}

.styles__wrapper___VB3ki .styles__bottomContent___2ESix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: 800px;
    -ms-flex-item-align: center;
        align-self: center;
  }

.styles__wrapper___VB3ki .styles__header___1WOs0 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 56px;
  }

.styles__navigator___2A6eu {
  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;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 15vh;
}

.styles__navigator___2A6eu .styles__previousStep___2iOLk button {
      border: 0;
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      margin-right: 20px;
      font-weight: 600;
      color: #007bff;
      background-color: #ffffff;
      border-color: #ffffff
    }

.styles__navigator___2A6eu .styles__previousStep___2iOLk button:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}

.styles__navigator___2A6eu .styles__nextStepButton___3gbPg button {
      background-color: #007bff;
      border-color: #007bff
    }

.styles__navigator___2A6eu .styles__nextStepButton___3gbPg button:hover {
  background-color: #066da5;
  border-color: #066da5;
}

.styles__navigator___2A6eu.styles__recoveryCodeOnly___m32fN {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.styles__twoFactorParent___1onFP {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-height: 1000px;
  width: 100%;
}

.styles__twoFactorParent___1onFP .styles__content___Zxb57 {
    color: #27343b;
    max-width: 800px;
    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: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__userType___3HWri {
      text-align: left;
      margin-bottom: 10px;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__instructionHeader___2ju28 {
      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: start;
          -ms-flex-align: start;
              align-items: flex-start;
      max-width: 700px
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__instructionHeader___2ju28.styles__longerSubTitle___3QhI3 {
  margin-bottom: 25px;
}

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__title___LAPb5 {
      font-size: 22px;
      font-weight: 600;
      margin: 30px 0 9px;
      max-width: 700px;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      max-width: 470px;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk .styles__subTitleLink___25C1x {
        color: #007bff;
        text-decoration: none
      }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk .styles__subTitleLink___25C1x:hover {
  color: #445d6e;
}

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y {
      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;
      background: #ffffff;
      -webkit-box-shadow: 2px 3px 10px rgba(0, 0, 0, .1);
              box-shadow: 2px 3px 10px rgba(0, 0, 0, .1);
      border-radius: 6px;
      width: 700px;
      padding: 25px 0;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__contextSubText___3mhqB {
        font-size: 36px;
        font-family: 'Inconsolata', sans-serif;
        text-align: center
      }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__contextSubText___3mhqB.styles__textCode___6lbip {
  padding: 80px 0;
}

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx .styles__optionsButton___1yD9g {
          border: 1px solid #007bff;
          color: #007bff;
        }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx .styles__optionsButton___1yD9g button {
            width: 85px;
          }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__qrLayout___2VnBe {
        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;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y textarea {
        min-width: 600px;
        border: none;
        overflow: auto;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        resize: none;
        text-align: center;
      }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__helpLink___2SZzs {
      margin: 30px 0;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__formField___1w8_j {
      border-bottom: 1px solid #b7bbbe;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      width: 460px;
      height: 30px;
      background-color: #fafafb;
      font-size: 14px;
      color: #27343b;
      padding: 7.5px;
      outline: none;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subHeader___3SJ-u {
      font-size: 18px;
      margin-top: 30px;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__text___vLbBO {
      width: 460px;
      margin: 12px 0;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__sixDigitCodeError___2gnm6 {
      padding: 7.5px;
      font-size: 12px;
      color: #e12b0c;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__wrapper___VB3ki {
      display: grid;
      max-width: 375px;
    }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__wrapper___VB3ki .styles__img___1sYA- {
        height: 140px;
        width: 230px;
        grid-column: 2;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 3;
        justify-self: center;
        margin-bottom: 20px;
      }

.styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__wrapper___VB3ki .styles__text___vLbBO {
        font-weight: 600;
        grid-column-start: 2;
        padding: 0 10px 3px;
      }

.styles__twoFactorParent___1onFP.styles__recoveryCodeOnly___m32fN {
  -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__subTitleLink___25C1x {
  color: #007bff;
  text-decoration: none;
  cursor: pointer
}

.styles__subTitleLink___25C1x:hover {
  color: #066da5;
}

.styles__link___1WoXB {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  color: #6bc3f3;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  margin: 20px 0;
}

.styles__cursor___1fUAc {
  cursor: pointer;
}

.styles__tab___Ja-_A {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin: 30px 0 30px 2px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media (max-width: 600px) {
    .styles__twoFactorParent___1onFP .styles__content___Zxb57 {
      max-width: 400px;
    }

      .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__title___LAPb5 {
        max-width: 400px;
      }

      .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk {
        max-width: 400px;
      }

      .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subsequentSteps___3p4sg {
        max-width: 400px;
        padding: 0 30px;
      }
          .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subsequentSteps___3p4sg .styles__instruction___3_0yq .styles__command___1994B {
            max-width: 250px;
          }
}

.styles__typeCodePlan___2hZqD {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  margin-right: 19px;
  padding-bottom: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #27343b
}

.styles__typeCodePlan___2hZqD:hover {
  border: none;
  outline: none;
}

.styles__typeCodePlan___2hZqD.styles__typeSelected___1hTGb {
  border-bottom: 2px solid #6bc3f3;
  padding-bottom: 8px;
  font-weight: 600;
}

.styles__text___vLbBO {
  font-size: 14px;
}

.styles__warningBox___3-kSY {
  margin-top: 30px;
  width: 700px;
  height: 115px;
  background: #fafafb;
}

.styles__warningBox___3-kSY .styles__yellowBar___3mTR6 {
    position: absolute;
    width: 4px;
    height: 115px;
    background: #f7d933;
    margin-right: 10px;
  }

.styles__warningBox___3-kSY .styles__warningMessage___1XRbm {
    padding: 25px;
    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;
  }

.styles__warningBox___3-kSY .styles__warningMessage___1XRbm .styles__warningText___1Ff-v {
      margin-left: 20px;
      width: 450px;
    }

.styles__subTitleAccessToken___2gCSc {
  margin: 12px 0 20px;
  max-width: 470px;
}

.styles__subTitleAccessToken___2gCSc button {
    margin: 0 !important;
  }

.styles__warnUser___28hwF {
  max-width: 700px;
  margin: 0 24px;
  border-top: 8px solid #e12b0c
}

.styles__warnUser___28hwF.styles__yellowWarning___A4C1D {
  border-top: 8px solid #f7d933;
}

.styles__warnUser___28hwF .styles__header___1WOs0 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

.styles__warnUser___28hwF .styles__text___vLbBO {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 40px 0;
}

.styles__warnUser___28hwF .styles__text___vLbBO.styles__recoveryCode___3iaWr {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.styles__warnUser___28hwF .styles__text___vLbBO > :first-child {
      margin-right: 20px;
}

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

@media (max-width: 1200px) {
  .styles__navigator___2A6eu {
    margin-top: 16px;
  }
    .styles__twoFactorParent___1onFP .styles__stepNavigator___3ryV_ {
      display: none;
    }
}

@media (max-height: 600px) {
  .styles__navigator___2A6eu {
    margin-top: 16px;
  }
}

@media (max-width: 745px) {
    .styles__twoFactorParent___1onFP .styles__content___Zxb57 {
      width: 100%;
    }

      .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__instructionHeader___2ju28 {
        width: 100%;
      }

      .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__title___LAPb5 {
        width: 80%;
      }

      .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk {
        width: 100%;
      }

      .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__text___vLbBO {
        max-width: 100%;
      }

      .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__formField___1w8_j {
        max-width: 100%;
      }

      .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y {
        width: 100%;
      }

        .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y textarea {
          min-width: 70%;
          max-width: 90%;
          overflow: hidden;
        }

        .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__contextSubText___3mhqB.styles__textCode___6lbip {
    padding: 0;
    width: 80%;
    word-wrap: break-word;
  }

        .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx {
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
        }

          .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx button {
            width: 60px;
          }

  .styles__warningBox___3-kSY {
    margin: 30px 0;
    width: 100%;
    height: auto;
  }

    .styles__warningBox___3-kSY .styles__yellowBar___3mTR6 {
      display: none;
    }

    .styles__warningBox___3-kSY .styles__warningMessage___1XRbm {
      padding: 15px;
    }

      .styles__warningBox___3-kSY .styles__warningMessage___1XRbm .styles__warningText___1Ff-v {
        margin-left: 20px;
        width: 100%;
      }
}

.styles__maxWidth___29-TP {
  width: 100%;
}

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

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

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

.styles__parent___d0A-y {
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.styles__wrapper___34aJ1 {
  width: 700px;
}

.styles__header___2eY7G {
  font-size: 22px;
  font-family: 'Open Sans', sans-serif;
  color: #27343b;
  margin-bottom: 12px;
  font-weight: 600;
}

.styles__text___HF_LK {
  color: #27343b;
  width: 470px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.styles__subtext___24JSa {
  width: 335px;
}

.styles__images___3gPtB {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 48px 0;
}

.styles__images___3gPtB .styles__image___1IGty {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-right: 36px;
  }

.styles__imageBackground___38V_H {
  background: #fafafb;
  border: 0.5px solid #e9ebee;
  width: 335px;
  height: 230px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: 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;
}

.styles__imagePlaceholder___19XIU {
  width: 80%;
  display: block;
  height: auto;
}

.styles__links___Fnib8 {
  color: #007bff;
  text-decoration: none
}

.styles__links___Fnib8:hover {
  color: #445d6e;
}

.styles__linebreak___3DFL9 {
  margin-top: 12px;
}

@media (max-width: 740px) {
  .styles__images___3gPtB {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 48px 0 0 0;
  }

  .styles__subtext___24JSa {
    margin: 20px 0;
    width: calc(100% - 20px);
  }

  .styles__text___HF_LK {
    width: calc(100% - 20px);
  }

  .styles__imageBackground___38V_H {
    margin-left: 0;
    margin-bottom: 0;
    width: calc(100% - 32px);
    height: calc(100% - 16px);
  }

  .styles__wrapper___34aJ1 {
    width: 100%;
  }
}

.styles__maxWidth___1DtSG {
  max-width: 100%;
}

/* 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___2-Uni {
  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___2krg5 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__parent___3ksA7 {
  margin-top: 30px;
}

.styles__title___1iJYG {
  font-size: 14px;
  color: #27343b;
  text-transform: uppercase;
}

.styles__stepBox___fA8xL {
  min-height: 200px;
  margin-top: 20px;
}

.styles__stepBox___fA8xL .styles__steps___1RJMl {
    display: grid;
    grid-template-columns: 40px 250px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 15px;
  }

.styles__stepBox___fA8xL .styles__steps___1RJMl .styles__currentStep___3ULeP {
      height: 22px;
      width: 22px;
      text-align: center;
      margin-right: 15px;
      background: #007bff;
      color: #ffffff;
      font-weight: 600;
      border: 1px solid #ffffff;
      border-radius: 50%;
      -webkit-transition: border 0.4s, background-color 0.4s;
      transition: border 0.4s, background-color 0.4s;
    }

.styles__stepBox___fA8xL .styles__steps___1RJMl .styles__futureStep___1o-Kh {
      border: 1px solid #b7bbbe;
      color: #b7bbbe;
      height: 22px;
      width: 22px;
      text-align: center;
      margin-right: 15px;
      border-radius: 50%;
    }

.styles__stepBox___fA8xL .styles__steps___1RJMl .styles__stepDescription___2gwUa {
      font-size: 14px;
      color: #b7bbbe;
    }

.styles__stepBox___fA8xL .styles__steps___1RJMl .styles__stepDescriptionCurrent___1wDI6 {
      font-size: 14px;
      font-weight: 600;
      color: #007bff;
    }

.styles__stepBox___fA8xL .styles__steps___1RJMl .styles__completed___1KPqn {
      height: 18px;
      width: 18px;
      margin: 0 2px;
      background: #11a661;
      border: 1px solid #11a661;
      border-radius: 50%;
      -webkit-transition: border 1s, background-color 1s;
      transition: border 1s, background-color 1s;
    }

.styles__stepBox___fA8xL .styles__steps___1RJMl .styles__completed___1KPqn svg {
        display: block;
        margin: 4px;
      }

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

.styles__italicize___9uGzk {
  font-style: italic;
}

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

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

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

.styles__modal___2H0Mt {
  height: 490px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 30px;
}

.styles__dockerIcon___Vp7e3 {
  margin: 30px 0;
}

.styles__header___3UtiU {
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 48px;
}

.styles__formField___2w75l {
  border: none;
  outline: none;
  width: 350px;
  height: 30px;
  background-color: #fafafb;
  font-size: 14px;
  color: #6f777c;
  padding: 7.5px;
}

.styles__fieldBorder___19oV5 {
  height: 0;
  border: 0.5px solid #b7bbbe;
  width: 350px;
  margin-bottom: 6px;
}

.styles__fieldBorderError___2J_4v {
  height: 0;
  border: 0.5px solid #e12b0c;
  width: 350px;
  margin-bottom: 6px;
}

.styles__disableButton___3W0Vq {
  width: 230px;
}

.styles__error___3diD6 {
  color: #e12b0c;
  font-size: 13px;
  width: 350px;
  height: 75px;
}

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

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

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

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

.dtab {
  text-transform: uppercase;
}

/* stylelint-enable */

/* vertical tab */

button.dvtab {
  text-align: left;
  text-transform: inherit;
  font-weight: normal;
  font-size: 14px;
  line-height: 44px;
  color: #27343b !important;
  border-bottom: none !important;
  border-left: 5px solid transparent !important;
  margin: 2px 0
}

button.dvtab:hover {
  border: none !important;
  border-bottom: none !important;
  border-left: 5px solid transparent !important;
  background-color: rgba(107, 195, 243, 0.05098) !important;
}

/* vertical selected state */

button.styles__vselected___j6bFe {
  border-left: 5px solid #007bff !important
}

button.styles__vselected___j6bFe,
  button.styles__vselected___j6bFe:hover {
  border-left: 5px solid #007bff !important;
  background-color: rgba(107, 195, 243, 0.05098) !important;
}

/* We need to override default button styles */

.styles__tab___2xYWx.dbutton,
  .styles__tab___2xYWx.dbutton:hover {
  border: none;
  background: none;
}

.styles__addBorder___2DCcx.dbutton,
  .styles__addBorder___2DCcx.dbutton:hover {
  border-bottom: 2px solid;
}

.styles__noBorder___1wz2V.dbutton,
  .styles__noBorder___1wz2V.dbutton:hover {
  border-bottom: 2px solid transparent;
}

.styles__tab___2xYWx {
  line-height: 44px;
  min-width: 100px;
  margin: 0;
  padding-left: 24px;
  padding-right: 12px;
  border-radius: 0;
  color: #c0c9ce;
  cursor: pointer
}

.styles__tab___2xYWx:hover {
  color: #8f9ea8;
}

.styles__tab___2xYWx.styles__selected___2xzLj,
  .styles__tab___2xYWx.styles__selected___2xzLj:hover {
  color: #2496ed;
  border-bottom-color: #2496ed;
}

.styles__icon___1-iHs.styles__tab___2xYWx.dbutton {
  border-bottom-color: transparent;
  padding: 0;
  min-width: auto;
  width: 60px;
}

.styles__icon___1-iHs.styles__tab___2xYWx .dicon {
  fill: #a3ddfc;
}

.styles__icon___1-iHs.styles__tab___2xYWx.styles__selected___2xzLj .dicon {
  fill: #2496ed;
}

.styles__tabLabelNew___2rwMz {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: #ffffff;
  padding: 0 4px;
  margin: 1px;
  background-color: #0162cc;
  border-radius: 4px;
  display: inline-block;
}

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

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

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

.styles__offerCard___7ujUa {
  border: 1px solid #e79a5c;
  border-radius: 6px;
  margin-bottom: 20px;
  padding: 24px 32px;
  background-color: #fef5c3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #26323f;
}

.styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

.styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW {
      margin-left: 30px;
      max-width: 750px;
      line-height: 1.5;
    }

.styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__offerTitle___Hu6f5 {
        font-size: 17px;
        font-weight: 600;
      }

.styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__offerText___2IZZ4 {
        margin-top: 3px;
      }

.styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__offerText___2IZZ4 > span > span {
          font-weight: 600;
        }

.styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__offerText___2IZZ4 .styles__link___1MPVF {
          font-size: 14px;
          line-height: 18px;
          font-weight: 600;
          color: #0073ec;
          cursor: pointer;
        }

.styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__faqLink___pFJxV {
        color: #007bff;
        font-weight: 500;
      }

.styles__offerCard___7ujUa .styles__planName___3xFo2 {
    text-transform: capitalize;
  }

.styles__offerCard___7ujUa button {
    min-width: 150px;
    min-height: 30px;
    line-height: 30px;
    border: 0;
    margin-left: 20px;
  }

.styles__rocketEmoji___2pAIg {
  -ms-flex-item-align: center;
      align-self: center;
  font-size: 48px;
}

/* 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___2jCnJ {
  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___2pS-W {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__progress___FtPjd {
  position: relative;
  height: 13px;
  background-color: #e9ebee;
  border-radius: 4px;
}

.styles__progress___FtPjd .styles__bg___300oY {
    content: ' ';
    height: 13px;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(53.65%, #54d1b0), to(#43b899));
    background: linear-gradient(180deg, #54d1b0 53.65%, #43b899 100%);
  }

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

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

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

.styles__notificationBanner___2fIAl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #e9f9f5;
  padding: 18px 24px;
}

.styles__notificationBanner___2fIAl .styles__notificationMessage___3yDtw {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    color: #094539;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    max-width: 595px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-right: 30px;
  }

.styles__notificationBanner___2fIAl .styles__notificationMessage___3yDtw .styles__icon___2ZB7a {
      min-width: 20px;
      width: 20px;
      height: 20px;
      margin-right: 24px;
      fill: #094539;
    }

.styles__notificationBanner___2fIAl .styles__notificationMessage___3yDtw .styles__icon___2ZB7a svg {
        height: 100%;
        width: 100%;
      }

.styles__notificationBanner___2fIAl .styles__buttonWrapper___UdGWZ button {
    min-height: 30px;
    line-height: 30px;
    padding: 0 16px;
    margin: 0;
    border: 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___3SRrj {
  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___1QzOh {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__container___3Zwyd {
  background: #d9ebfa;
  border-color: #b8deff;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
}

.styles__container___3Zwyd a {
    font-weight: 600;
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
  }

.styles__rocketEmoji___-MNrQ {
  -ms-flex-item-align: center;
      align-self: center;
  font-size: 48px;
  font-size: 3rem;

  -webkit-box-flex: 0;

      -ms-flex: 0 0 auto;

          flex: 0 0 auto;
  margin-right: 28px; /* matches Card's padding */
}

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

  color: #26323f;
}

.styles__promoTitle___3F_jy {
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  margin-bottom: 4px;
}

.styles__promoBody___38OGj {
  font-size: 14px;
  line-height: 1.5;
}

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

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

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

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

.PlanPromoIfAvailable__planName___2SXRk {
  text-transform: capitalize;
}

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

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

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

.styles__planHeader___1MKBg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 12px;
}

.styles__planHeader___1MKBg .styles__planName___2AOuU {
    font-size: 22px;
    line-height: 30px;
    font-weight: bold;
    color: #27343b;
  }

.styles__changePlanButton___-05Jq button {
    min-height: 30px;
    line-height: 30px;
    padding: 0 16px;
    margin: 0;
    border: none;
  }

.styles__planFeatures___274Cy {
  margin-bottom: 27px;
  font-size: 18px;
  line-height: 25px;
  min-height: 60px;
}

.styles__planFeatures___274Cy .styles__planFeature___39kc3 {
    margin-bottom: 8px;
    color: #26323f;
  }

.styles__usage___3vX-F {
  width: 65%;
  font-size: 18px;
  line-height: 25px;
}

.styles__usage___3vX-F .styles__usageType___1NOXF {
    margin: 25px 0 8px;
    color: #26323f;
  }

.styles__usage___3vX-F .styles__progressWrapper___2ksjC {
    position: relative;
  }

.styles__usage___3vX-F .styles__progressWrapper___2ksjC .styles__usageBar___2TYf8 {
      margin: 8px 0;
    }

.styles__usage___3vX-F .styles__progressWrapper___2ksjC .styles__viewMembers___1T6Cg {
      position: absolute;
      top: -2px;
      right: -120px;
    }

.styles__usage___3vX-F .styles__usageDetails___rWwOK {
    color: #43b899;
  }

.styles__subscriptionPrice___3Ab9W {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 18px;
  font-weight: 600;
  line-height: 25px;
  color: #26323f;
  margin-top: 25px;
}

.styles__planDetails___3vT8J {
  margin-bottom: 12px;
}

.styles__exp___1hHI6 {
  font-size: 14px;
  line-height: 21px;
  color: #5a6672;
  margin: 0 0 2px;
}

.styles__extraSeats___Vyvbr {
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.styles__price___3Cj_R {
  font-weight: 600;
}

.styles__price___3Cj_R .styles__asterisk___14xY8 {
    font-size: 16px;
    vertical-align: text-bottom;
  }

.styles__actions___2ygGz {
  margin-top: 10px;
  color: #768491;
}

.styles__capitalize___3G5c6 {
  text-transform: capitalize;
}

.styles__planUpdateInfo___zHCji {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 15px;
  background-color: #eee6fc;
  padding: 18px 24px;
}

.styles__planUpdateInfo___zHCji .styles__updateMessage___3ooIr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    color: #4e2d8f;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    max-width: 460px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

.styles__planUpdateInfo___zHCji .styles__updateMessage___3ooIr .styles__icon___3eDbq {
      margin-right: 24px;
      fill: #6243a3;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

.styles__total___2kzIn {
  text-align: right;
}

.styles__total___2kzIn .styles__totalPrice___35usj {
    font-size: 22px;
    line-height: 33px;
    color: #5a6774;
    font-weight: 600;
  }

.styles__total___2kzIn .styles__totalPrice___35usj span {
      color: #26323f;
      margin-left: 10px;
    }

.styles__total___2kzIn .styles__nextPayment___24zPV {
    font-size: 18px;
    line-height: 1.5;
    color: #5a6774;
    font-weight: 600;
    margin-bottom: 4px;
  }

.styles__total___2kzIn .styles__nextPayment___24zPV span {
      color: #26323f;
    }

.styles__specialPlanInfo___1MjaL {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 15px;
  background-color: #e9f9f5;
  padding: 18px 24px;
}

.styles__specialPlanInfo___1MjaL .styles__addSeatsMessage___2jocD {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    color: #094539;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    max-width: 595px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

.styles__specialPlanInfo___1MjaL .styles__addSeatsMessage___2jocD .styles__icon___3eDbq {
      margin-right: 24px;
      fill: #094539;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

.styles__link___3RP30 {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: #0073ec;
  cursor: pointer;
  text-decoration: none
}

.styles__link___3RP30:hover {
  text-decoration: underline;
}

.styles__usageTitle___35fsA {
  font-size: 18px;
  font-weight: 600;
  color: #26323f;
  margin: 25px 0 10px;
}

.styles__viewTokens___1z-H4 {
  position: absolute;
  top: -2px;
  right: -110px
}

.styles__viewTokens___1z-H4.styles__unlimited___6ARlH {
  top: 5px;
  right: 215px;
}

.styles__billingFooter___gyx9A {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 10px 28px;
}

.styles__billingFooter___gyx9A .styles__footnote___3TgRo {
    font-size: 13px;
    line-height: 28px;
  }

.styles__billingNotificationWrapper___2Z-Z6 {
  margin-top: 15px;
}

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

.styles__table___3agUw {
  margin-bottom: 32px;
}

.styles__table___3agUw .styles__row___1Y39e {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 64px;
    border-bottom: 1px solid #e7e8e9;
    padding: 0 20px;
    line-height: 20px;
  }

.styles__table___3agUw .styles__row___1Y39e > div {
      padding-right: 8px;
    }

.styles__table___3agUw .styles__row___1Y39e div:nth-of-type(1) {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 15%;
              flex: 0 0 15%;
    }

.styles__table___3agUw .styles__row___1Y39e div:nth-of-type(2) {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 40%;
              flex: 0 0 40%;
    }

.styles__table___3agUw .styles__row___1Y39e div:nth-of-type(3) {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 15%;
              flex: 0 0 15%;
    }

.styles__table___3agUw .styles__row___1Y39e div:nth-of-type(4) {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 13%;
              flex: 0 0 13%;
    }

.styles__table___3agUw .styles__row___1Y39e div:nth-of-type(5) {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 17%;
              flex: 0 0 17%;
      text-align: right;
    }

.styles__table___3agUw .styles__head___2RRLj {
    min-height: 50px;
    color: #8f9ea8;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }

.styles__table___3agUw .styles__head___2RRLj > div {
      padding-bottom: 8px;
    }

.styles__table___3agUw .styles__tableContentWrapper___2ARaz {
    position: relative;
  }

.styles__table___3agUw .styles__tableContentWrapper___2ARaz .styles__tableContent___1KXpV {
      min-height: 150px;
    }

.styles__table___3agUw .styles__tableContentWrapper___2ARaz .styles__tableContent___1KXpV .styles__invoicesListWrapper___2XzmN {
        margin-bottom: 32px;
      }

.styles__table___3agUw .styles__tableContentWrapper___2ARaz .styles__tableContent___1KXpV .styles__emptyState___1me5D {
        padding: 50px 0;
        text-align: center;
        color: #47515e;
      }

.styles__table___3agUw .styles__refreshAndDownloadAction___MU_WN {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    fill: #8f9ea8;
    margin-right: 12px;
  }

.styles__table___3agUw .styles__updateAndDownloadActionMenu___2xjwZ {
    min-width: 150px;
    vertical-align: middle;
  }

.styles__table___3agUw .styles__downloadButton___153lP {
    min-width: 110px;
  }

.styles__loading___36Mh_ {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.50196);
  height: 100%;
  padding: 50px 0;
}

.styles__iconWrapper___114Ir {
  display: inline-block;
  margin-top: 6px;
  margin-left: 6px;
  fill: #8f9ea8
}

.styles__iconWrapper___114Ir.styles__action___3Kmd7 {
  cursor: pointer;
}

.styles__iconWrapper___114Ir.styles__action___3Kmd7:hover {
  fill: #007bff;
}

.styles__iconWrapper___114Ir.styles__success___1HYLF {
  fill: #54d1b0;
}

.styles__iconWrapper___114Ir.styles__failure___2xNJH {
  fill: #8c0607;
}

.styles__iconWrapper___114Ir .styles__fileLoader___1HaX5 {
    width: 24px;
    height: 24px;
}

.styles__modal___1XYxe {
  background: #ffffff;
  max-width: 750px;
  margin: 20px;
}

.styles__modal___1XYxe .styles__subtitle___34vyu {
    margin-bottom: 32px;
  }

.styles__modal___1XYxe .styles__buttons___1sFWh {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    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___Mawog {
  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___tQCqX {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

@media only screen and (min-width: 601px) {
  .styles__row___2YoOt {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .styles__row___2YoOt > * {
    lost-column-cycle: 2;
  }
  .styles__row___2YoOt > *:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(49.95% - 6px);
    max-width: calc(49.95% - 6px);
    width: calc(49.95% - 6px);
  }
  .styles__row___2YoOt > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__row___2YoOt > *:nth-child(1):last-child {
    margin-right: 0;
  }
  .styles__row___2YoOt > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__row___2YoOt > *:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(49.95% - 6px);
    max-width: calc(49.95% - 6px);
    width: calc(49.95% - 6px);
  }
  .styles__row___2YoOt > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__row___2YoOt > *:nth-child(2):last-child {
    margin-right: 0;
  }
  .styles__row___2YoOt > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__row___2YoOt {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .styles__postalRow___2E5hi {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .styles__postalRow___2E5hi > * {
    lost-column-cycle: 3;
  }

  .styles__postalRow___2E5hi > *:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(33.3% - 8px);
    max-width: calc(33.3% - 8px);
    width: calc(33.3% - 8px);
  }

  .styles__postalRow___2E5hi > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

  .styles__postalRow___2E5hi > *:nth-child(1):last-child {
    margin-right: 0;
  }

  .styles__postalRow___2E5hi > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__postalRow___2E5hi > *: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__postalRow___2E5hi > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

  .styles__postalRow___2E5hi > *:nth-child(2):last-child {
    margin-right: 0;
  }

  .styles__postalRow___2E5hi > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__postalRow___2E5hi > *:nth-child(3) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(33.3% - 8px);
    max-width: calc(33.3% - 8px);
    width: calc(33.3% - 8px);
  }

  .styles__postalRow___2E5hi > *:nth-child(3):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

  .styles__postalRow___2E5hi > *:nth-child(3):last-child {
    margin-right: 0;
  }

  .styles__postalRow___2E5hi > *:nth-child(3):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__postalRow___2E5hi {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.styles__error___3we6r {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  height: 16px;
  color: #e12b0c;
  margin: 0 40px;
}

.styles__select___kHB3_ {
  margin-bottom: 12px;
}

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

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

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

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

@media only screen and (min-width: 601px) {
  .styles__row___3sz4A {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .styles__row___3sz4A > * {
    lost-column-cycle: 2;
  }
  .styles__row___3sz4A > *:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(49.95% - 6px);
    max-width: calc(49.95% - 6px);
    width: calc(49.95% - 6px);
  }
  .styles__row___3sz4A > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__row___3sz4A > *:nth-child(1):last-child {
    margin-right: 0;
  }
  .styles__row___3sz4A > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__row___3sz4A > *:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(49.95% - 6px);
    max-width: calc(49.95% - 6px);
    width: calc(49.95% - 6px);
  }
  .styles__row___3sz4A > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__row___3sz4A > *:nth-child(2):last-child {
    margin-right: 0;
  }
  .styles__row___3sz4A > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__row___3sz4A {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.styles__fullRow___1VOud {
  width: 100%;
}

.styles__title___lt_Yn {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #445d6e;
  font-weight: bold;
}

.styles__submit___1DN0L {
  cursor: pointer;
  margin-left: 0;
}

.styles__successMessage___3t-aD {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  color: #00cbca;
}

.styles__successMessage___3t-aD .styles__successIcon___20n1V {
    height: 18px;
    width: 18px;
    vertical-align: bottom;
    margin-right: 4px;
  }

.styles__updateError___3g00s {
  margin-bottom: 20px;
}

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

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

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

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

.styles__icon___-_xEN {
  margin-right: 12px;
}

.styles__content___txUvx {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: 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___1AjV5 {
  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___IDRV_ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__expiration___1uPcB .styles__title___pzNOK {
    margin-top: -22px;
    padding: 4px;
    color: #8f9ea8;
  }

.styles__expiration___1uPcB .styles__dates___2ldkU {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

.styles__expiration___1uPcB .styles__dates___2ldkU > * {
  lost-column-cycle: 2;
}

.styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__expiration___1uPcB .styles__dates___2ldkU {
  margin-bottom: 8px;
}

.styles__expirationErr___1kLax > div {
  border-color: #e12b0c !important;
}

.styles__dateErr___1_DFF {
  color: #e12b0c;
  font-size: 12px;
  margin: 0 4px;
}

/* 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___1LIKo {
  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___W-6ox {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__form___3RqCj {
  padding: 12px;
}

@media only screen and (max-width: 600px) {
  .styles__row___2TiJd,
  .styles__cardRow___WnG58,
  .styles__postalRow___3faee,
  .styles__submitRow___1ijnF {
    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 (min-width: 601px) {
  .styles__row___2TiJd {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .styles__row___2TiJd > * {
    lost-column-cycle: 2;
  }
  .styles__row___2TiJd > *:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(49.95% - 6px);
    max-width: calc(49.95% - 6px);
    width: calc(49.95% - 6px);
  }
  .styles__row___2TiJd > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__row___2TiJd > *:nth-child(1):last-child {
    margin-right: 0;
  }
  .styles__row___2TiJd > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__row___2TiJd > *:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(49.95% - 6px);
    max-width: calc(49.95% - 6px);
    width: calc(49.95% - 6px);
  }
  .styles__row___2TiJd > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__row___2TiJd > *:nth-child(2):last-child {
    margin-right: 0;
  }
  .styles__row___2TiJd > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__cardRow___WnG58 {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .styles__cardRow___WnG58 > * {
    lost-column-cycle: 3;
  }

  .styles__cardRow___WnG58 > *:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(49.95% - 6px);
    max-width: calc(49.95% - 6px);
    width: calc(49.95% - 6px);
  }

  .styles__cardRow___WnG58 > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

  .styles__cardRow___WnG58 > *:nth-child(1):last-child {
    margin-right: 0;
  }

  .styles__cardRow___WnG58 > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__cardRow___WnG58 > *:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(16.65% - 10px);
    max-width: calc(16.65% - 10px);
    width: calc(16.65% - 10px);
  }

  .styles__cardRow___WnG58 > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

  .styles__cardRow___WnG58 > *:nth-child(2):last-child {
    margin-right: 0;
  }

  .styles__cardRow___WnG58 > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__cardRow___WnG58 > *:nth-child(3) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(33.3% - 8px);
    max-width: calc(33.3% - 8px);
    width: calc(33.3% - 8px);
  }

  .styles__cardRow___WnG58 > *:nth-child(3):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

  .styles__cardRow___WnG58 > *:nth-child(3):last-child {
    margin-right: 0;
  }

  .styles__cardRow___WnG58 > *:nth-child(3):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__cardRow___WnG58 {
    margin-top: 16px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .styles__postalRow___3faee {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }

  .styles__postalRow___3faee > * {
    lost-column-cycle: 3;
  }

  .styles__postalRow___3faee > *:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(33.3% - 8px);
    max-width: calc(33.3% - 8px);
    width: calc(33.3% - 8px);
  }

  .styles__postalRow___3faee > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

  .styles__postalRow___3faee > *:nth-child(1):last-child {
    margin-right: 0;
  }

  .styles__postalRow___3faee > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__postalRow___3faee > *:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(16.65% - 10px);
    max-width: calc(16.65% - 10px);
    width: calc(16.65% - 10px);
  }

  .styles__postalRow___3faee > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

  .styles__postalRow___3faee > *:nth-child(2):last-child {
    margin-right: 0;
  }

  .styles__postalRow___3faee > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__postalRow___3faee > *:nth-child(3) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(49.95% - 6px);
    max-width: calc(49.95% - 6px);
    width: calc(49.95% - 6px);
  }

  .styles__postalRow___3faee > *:nth-child(3):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

  .styles__postalRow___3faee > *:nth-child(3):last-child {
    margin-right: 0;
  }

  .styles__postalRow___3faee > *:nth-child(3):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

  .styles__postalRow___3faee {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
}

.styles__title___35H6q {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #445d6e;
  font-weight: bold;
}

.styles__error___1sRio {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: bold;
  color: #e12b0c;
}

.styles__submit___15ZR5 {
  margin: 20px 20px 0 0;
}

.styles__warning___2X-13 {
  color: #e12b0c;
  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 16px;
}

.styles__warning___2X-13 .styles__icon___1Bzuj {
    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;
  }

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

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

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

.styles__title___20S5M {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #445d6e;
  font-weight: bold;
}

.styles__updateCardRow___Fzw4j {
  margin-bottom: 16px;
}

.styles__paymentMethods___3fvOf {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 16px 0;
}

.styles__paymentMethod___2uUeJ {
  position: relative;
  margin-right: 16px;
}

.styles__card___1Osgb {
  min-width: 200px;
  height: 104px;
}

.styles__deletePaymentMethod___24lgA {
  position: absolute;
  top: 0;
  right: 6px;
  cursor: pointer;
}

.styles__option___2TqJJ {
  display: inline-block;
  text-decoration: underline;
  cursor: pointer;
}

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

.styles__prompt___32P44 {
  margin-bottom: 16px;
}

.styles__splitForms___1xQT6 {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}

.styles__splitForms___1xQT6 > * {
  lost-column-cycle: 2;
}

.styles__splitForms___1xQT6 > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__splitForms___1xQT6 > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__splitForms___1xQT6 > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__splitForms___1xQT6 > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__splitForms___1xQT6 > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__splitForms___1xQT6 > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__splitForms___1xQT6 > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__splitForms___1xQT6 > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__splitForms___1xQT6 > div:first-child {
    border-right: 1px solid #c0c9ce;
}

.styles__submit___1fUB_ {
  cursor: pointer;
  margin: 8px 16px;
}

.styles__error___Lqz6P {
  color: #e12b0c;
  padding-top: 12px;
}

.styles__noCreditCardsOnFile___JK0mH {
  padding-top: 0;
  padding-bottom: 16px;
}

.styles__subText___1XOMV {
  color: #27343b;
}

.styles__loading___321Au {
  height: 550px;
  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;
}

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

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

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

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

.styles__ctaView___G-jZk {
  margin: 0 auto 140px;
  padding: 0 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 840px;
}

.styles__ctaView___G-jZk .styles__ctaImage___2kJjk {
    width: 420px;
  }

.styles__ctaView___G-jZk .styles__ctaImage___2kJjk img {
      width: 100%;
    }

.styles__ctaView___G-jZk .styles__ctaContent___33lW7 {
    padding: 50px 0 0 20px;
    max-width: 390px;
  }

.styles__ctaView___G-jZk .styles__ctaContent___33lW7 .styles__ctaTitle___3V1sD {
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 12px;
      font-size: 20px;
    }

.styles__ctaView___G-jZk .styles__ctaContent___33lW7 .styles__ctaDescription___1ilZE {
      margin-bottom: 35px;
      line-height: 1.5;
    }

.styles__ctaView___G-jZk .styles__ctaContent___33lW7 button {
      margin: 0;
      height: 30px;
      line-height: 28px;
    }

.styles__ctaView___G-jZk .styles__ctaContent___33lW7 .styles__link___2n7wt {
      font-size: 14px;
      font-weight: 700;
      line-height: 30px;
      color: #007bff;
      margin-left: 30px;
      text-decoration: none;
      white-space: nowrap
    }

.styles__ctaView___G-jZk .styles__ctaContent___33lW7 .styles__link___2n7wt:hover {
  text-decoration: underline;
}

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

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

.styles__icon___3XEjb {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #71cfff;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTUgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi43NzI1NSA4Ljk5OTg1SDYuMjk5NzFDNi43OTc0MiA4Ljk5OTg1IDcuMTk5NzMgOS40MDMwNiA3LjE5OTczIDkuODk5ODdWMTQuNTM0OUwxMS42Mjc4IDguOTk5ODVIOC4wOTk3NEM3LjYwMjkzIDguOTk5ODUgNy4xOTk3MyA4LjU5NjY1IDcuMTk5NzMgOC4wOTk4NFYzLjQ2NTY3TDIuNzcyNTUgOC45OTk4NVpNNi4yOTk2OCAxOEM2LjIwMDY4IDE4IDYuMDk5ODggMTcuOTgzOCA2LjAwMTc3IDE3Ljk0ODdDNS42NDE3NyAxNy44MjI3IDUuMzk5NjYgMTcuNDgyNSA1LjM5OTY2IDE3LjFWMTAuNzk5OUgwLjg5OTU5MkMwLjU1Mzk4NyAxMC43OTk5IDAuMjM4OTgyIDEwLjYwMSAwLjA4ODY3OTIgMTAuMjg5NkMtMC4wNjA3MjMyIDkuOTc4MTcgLTAuMDE5MzIyNiA5LjYwOTE3IDAuMTk3NTgxIDkuMzM3MzZMNy4zOTc3IDAuMzM3MjE3QzcuNjM2MiAwLjAzOTMxMjMgOC4wMzc2MSAtMC4wNzU4ODk1IDguMzk3NjEgMC4wNTEwMTI1QzguNzU4NTIgMC4xNzcwMTUgOC45OTk3MiAwLjUxNzIyIDguOTk5NzIgMC44OTk3MjZWNy4xOTk4M0gxMy40OTk4QzEzLjg0NjMgNy4xOTk4MyAxNC4xNjEzIDcuMzk4NzMgMTQuMzExNiA3LjcxMDE0QzE0LjQ2MSA4LjAyMTU0IDE0LjQxODcgOC4zOTE0NSAxNC4yMDI3IDguNjYyMzVMNy4wMDI1OSAxNy42NjI1QzYuODI4ODkgMTcuODgwMyA2LjU2Nzg4IDE4IDYuMjk5NjggMThaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-size: 18px 18px;
  background-repeat: no-repeat;
  background-position: center;
}

.styles__repoCreate___2HTux {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMy4xMzA0MyAxNC4wODdIMS41NjUyMlYxLjU2NTI1SDMuMTMwNDNWMTQuMDg3Wk0xMC4xNzM5IDE0LjA4N0g0LjY5NTY1VjEuNTY1MjJINy4wNDM0OFY4LjYwODdMOSA3LjA0MzQ4TDEwLjk1NjUgOC42MDg3VjEuNTY1MjJIMTIuNTIxN1YxMC4xNzM5SDE0LjA4N1YwLjc4MjYwOUMxNC4wODcgMC4zNTA2MDkgMTMuNzM2MyAwIDEzLjMwNDMgMEgwLjc4MjYwOUMwLjM1MDYwOSAwIDAgMC4zNTA2MDkgMCAwLjc4MjYwOVYxNC44Njk2QzAgMTUuMzAxNiAwLjM1MDYwOSAxNS42NTIyIDAuNzgyNjA5IDE1LjY1MjJIMTAuMTczOVYxNC4wODdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE4IDE0LjA4N0gxNS42NTIyVjExLjczOTFIMTQuMDg3VjE0LjA4N0gxMS43MzkxVjE1LjY1MjJIMTQuMDg3VjE4SDE1LjY1MjJWMTUuNjUyMkgxOFYxNC4wODdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-color: #54d1b0;
}

.styles__repoDelete___12pcl {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMy4wNzUwOCAxMy44Mzc5SDEuNTM3NTRWMS41Mzc1NEgzLjA3NTA4VjEzLjgzNzlaTTEwLjc2MjggMTMuODM3OUg0LjYxMjYzVjEuNTM3NTRINi45MTg5NFY4LjQ1NjQ4TDguODQwODYgNi45MTg5NEwxMC43NjI4IDguNDU2NDhWMS41Mzc1NEgxMi4zMDAzVjEwLjc2MjhIMTMuODM3OVYwLjc2ODc3MUMxMy44Mzc5IDAuMzQ0NDA5IDEzLjQ5MzUgMCAxMy4wNjkxIDBIMC43Njg3NzFDMC4zNDQ0MDkgMCAwIDAuMzQ0NDA5IDAgMC43Njg3NzFWMTQuNjA2NkMwIDE1LjAzMSAwLjM0NDQwOSAxNS4zNzU0IDAuNzY4NzcxIDE1LjM3NTRIMTAuNzYyOFYxMy44Mzc5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOCAxMy4zODczTDE2LjkxMjkgMTIuMzAwM0wxNS4xNTAxIDE0LjA2MzFMMTMuMzg3MyAxMi4zMDAzTDEyLjMwMDMgMTMuMzg3M0wxNC4wNjMxIDE1LjE1MDFMMTIuMzAwMyAxNi45MTI5TDEzLjM4NzMgMThMMTUuMTUwMSAxNi4yMzcyTDE2LjkxMjkgMThMMTggMTYuOTEyOUwxNi4yMzcyIDE1LjE1MDFMMTggMTMuMzg3M1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
  background-color: #ee635f;
}

.styles__repoImagePush___3Vw9Y {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS41MDAwNiAxNy4xQzUuMzA5NjEgMTcuMSAxLjkwMDA1IDEzLjY5MDUgMS45MDAwNSA5LjUwMDAyQzEuOTAwMDUgNS4zMDk1NyA1LjMwOTYxIDEuOTAwMDIgOS41MDAwNiAxLjkwMDAyQzEzLjY5MDUgMS45MDAwMiAxNy4xMDAxIDUuMzA5NTcgMTcuMTAwMSA5LjUwMDAyQzE3LjEwMDEgMTMuNjkwNSAxMy42OTA1IDE3LjEgOS41MDAwNiAxNy4xWk05LjUgMEM0LjI2MTcgMCAwIDQuMjYxNyAwIDkuNUMwIDE0LjczODMgNC4yNjE3IDE5IDkuNSAxOUMxNC43MzgzIDE5IDE5IDE0LjczODMgMTkgOS41QzE5IDQuMjYxNyAxNC43MzgzIDAgOS41IDBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNzUgOC4yNzE2NEw2LjA5MzMgOS42MTQ5NEw4LjI3MTY1IDcuNDM2NTlWMTUuNTkzM0gxMC4xNzE2VjcuNDM2NTlMMTIuMzUgOS42MTQ5NEwxMy42OTMzIDguMjcxNjRMOS4yMjE2NSAzLjc5OTk5TDQuNzUgOC4yNzE2NFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
  background-color: #71cfff;
}

.styles__repoTagPush___k9iHQ {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTMuMjcwOCA1LjU5Mjg3TDUuODk4MjkgMTIuOTY1NEwxLjc4IDguODQ3MUw5LjE1MjUyIDEuNDc0NThIMTMuMjcwOFY1LjU5Mjg3Wk0xNC43NDUyIDUuODk4MDFWMC43MzcyNTJDMTQuNzQ1MiAwLjMzMDI4OSAxNC40MTQ5IDAgMTQuMDA4IDBIOC44NDcyQzguNjUxODMgMCA4LjQ2MzgzIDAuMDc4MTQ4NyA4LjMyNTk3IDAuMjE2MDE1TDAuMjE2MTk5IDguMzI1NzhDLTAuMDcyMDY2NCA4LjYxNDA1IC0wLjA3MjA2NjQgOS4wNzk5OSAwLjIxNjE5OSA5LjM2ODI2TDUuMzc2OTYgMTQuNTI5QzUuNTIwNzMgMTQuNjcyOCA1LjcwOTQ2IDE0Ljc0NSA1Ljg5ODIgMTQuNzQ1QzYuMDg2OTMgMTQuNzQ1IDYuMjc1NjcgMTQuNjcyOCA2LjQxOTQzIDE0LjUyOUwxNC41MjkyIDYuNDE5MjVDMTQuNjY3OCA2LjI4MTM4IDE0Ljc0NTIgNi4wOTMzOCAxNC43NDUyIDUuODk4MDFaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjA1ODcgNS4xNjA3N0MxMS44NzI3IDUuMTYwNzcgMTIuNTMzMiA0LjUwMDE5IDEyLjUzMzIgMy42ODYyNkMxMi41MzMyIDIuODcxNiAxMS44NzI3IDIuMjExNzYgMTEuMDU4NyAyLjIxMTc2QzEwLjI0NDEgMi4yMTE3NiA5LjU4NDIzIDIuODcxNiA5LjU4NDIzIDMuNjg2MjZDOS41ODQyMyA0LjUwMDE5IDEwLjI0NDEgNS4xNjA3NyAxMS4wNTg3IDUuMTYwNzdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3LjI2MTkgMTQuNTI5MUwxMy43OTE3IDExLjA1ODhMMTAuMzIxNCAxNC41MjkxTDExLjM2MzkgMTUuNTcxNkwxMy4wNTQ0IDEzLjg4MVYxOC4wMDAxSDE0LjUyODlWMTMuODgxTDE2LjIxOTQgMTUuNTcxNkwxNy4yNjE5IDE0LjUyOTFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-color: #54d1b0;
}

.styles__repoTagDelete___2qcU4 {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTMuODM4MSA1LjgzMTg5TDYuMTUwNCAxMy41MTk2TDEuODU2MDUgOS4yMjUyNEw5LjU0Mzc2IDEuNTM3NTRIMTMuODM4MVY1LjgzMTg5Wk0xNS4zNzU2IDYuMTUwMTdWMC43Njg3NzFDMTUuMzc1NiAwLjM0NDQwOSAxNS4wMzEyIDAgMTQuNjA2OCAwSDkuMjI1NDRDOS4wMjE3MiAwIDguODI2NDUgMC4wODE0ODk3IDguNjgxOTIgMC4yMjUyNUwwLjIyNTQ0MiA4LjY4MTczQy0wLjA3NTE0NzMgOC45ODIzMiAtMC4wNzUxNDczIDkuNDY4MTggMC4yMjU0NDIgOS43Njg3N0w1LjYwNjg0IDE1LjE1MDJDNS43NTY3NSAxNS4zMDAxIDUuOTUzNTUgMTUuMzc1NCA2LjE1MDM2IDE1LjM3NTRDNi4zNDcxNiAxNS4zNzU0IDYuNTQzOTcgMTUuMzAwMSA2LjY5Mzg4IDE1LjE1MDJMMTUuMTUwNCA2LjY5MzY5QzE1LjI5NDkgNi41NDk5MyAxNS4zNzU2IDYuMzUzODkgMTUuMzc1NiA2LjE1MDE3WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS41MzE2IDUuMzgxMzlDMTIuMzgwMyA1LjM4MTM5IDEzLjA2OTEgNC42OTE4IDEzLjA2OTEgMy44NDM4NUMxMy4wNjkxIDIuOTk0MzUgMTIuMzgwMyAyLjMwNjMgMTEuNTMxNiAyLjMwNjNDMTAuNjgxMyAyLjMwNjMgOS45OTQwMiAyLjk5NDM1IDkuOTk0MDIgMy44NDM4NUM5Ljk5NDAyIDQuNjkxOCAxMC42ODEzIDUuMzgxMzkgMTEuNTMxNiA1LjM4MTM5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOCAxMy4zODc0TDE2LjkxMjkgMTIuMzAwM0wxNS4xNTAxIDE0LjA2MzFMMTMuMzg3MyAxMi4zMDAzTDEyLjMwMDMgMTMuMzg3NEwxNC4wNjMxIDE1LjE1MDJMMTIuMzAwMyAxNi45MTI5TDEzLjM4NzMgMThMMTUuMTUwMSAxNi4yMzcyTDE2LjkxMjkgMThMMTggMTYuOTEyOUwxNi4yMzcyIDE1LjE1MDJMMTggMTMuMzg3NFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
  background-color: #ee635f;
}

.styles__repoChangePrivacyPrivate___27Y1P {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS45MDAwNSAxNy4xVjEwLjQ1SDExLjQwMDFMMTEuNDAyIDE3LjFIMS45MDAwNVpNMy44MDAxMSA0Ljc1MDA1QzMuODAwMTEgMy4xNzg3NSA1LjA3ODgxIDEuOTAwMDUgNi42NTAxMSAxLjkwMDA1QzguMjIxNDEgMS45MDAwNSA5LjUwMDExIDMuMTc4NzUgOS41MDAxMSA0Ljc1MDA1VjguNTUwMDVIMy44MDAxMVY0Ljc1MDA1Wk0xMS40IDguNTVWNC43NUMxMS40IDIuMTMwODUgOS4yNjkxNSAwIDYuNjUgMEM0LjAzMDg1IDAgMS45IDIuMTMwODUgMS45IDQuNzVWOC41NUMwLjg1MjE1IDguNTUgMCA5LjQwMTIgMCAxMC40NVYxNy4xQzAgMTguMTQ3OSAwLjg1MjE1IDE5IDEuOSAxOUgxMS40QzEyLjQ0NzkgMTkgMTMuMyAxOC4xNDc5IDEzLjMgMTcuMVYxMC40NUMxMy4zIDkuNDAxMiAxMi40NDc5IDguNTUgMTEuNCA4LjU1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
  background-color: #6243a3;
}

.styles__repoChangePrivacyPublic___FMCPf {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS45MDAwNSAxNy4wOTk5VjEwLjQ0OTlIMTEuNDAwMUwxMS40MDIgMTcuMDk5OUgxLjkwMDA1Wk0xMS40IDguNTVIMy44VjQuNzVDMy44IDMuMTc4NyA1LjA3ODcgMS45IDYuNjUgMS45QzguMjIxMyAxLjkgOS41IDMuMTc4NyA5LjUgNC43NVY1LjdIMTEuNFY0Ljc1QzExLjQgMi4xMzA4NSA5LjI2OTE1IDAgNi42NSAwQzQuMDMwODUgMCAxLjkgMi4xMzA4NSAxLjkgNC43NVY4LjU1QzAuODUyMTUgOC41NSAwIDkuNDAxMiAwIDEwLjQ1VjE3LjFDMCAxOC4xNDc5IDAuODUyMTUgMTkgMS45IDE5SDExLjRDMTIuNDQ3OSAxOSAxMy4zIDE4LjE0NzkgMTMuMyAxNy4xVjEwLjQ1QzEzLjMgOS40MDEyIDEyLjQ0NzkgOC41NSAxMS40IDguNTVaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTc1IDEyLjM0OTlDNS4zODg0IDEyLjM0OTkgNC43NSAxMi45ODgzIDQuNzUgMTMuNzc0OUM0Ljc1IDE0LjU2MTUgNS4zODg0IDE1LjE5OTkgNi4xNzUgMTUuMTk5OUM2Ljk2MTYgMTUuMTk5OSA3LjYgMTQuNTYxNSA3LjYgMTMuNzc0OUM3LjYgMTIuOTg4MyA2Ljk2MTYgMTIuMzQ5OSA2LjE3NSAxMi4zNDk5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
  background-color: #987ece;
}

.styles__orgCreate___XW_ce {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuMyAxNi4yQzE0LjgwNDEgMTYuMiAxNC40IDE1Ljc5NTkgMTQuNCAxNS4zQzE0LjQgMTQuODA0MSAxNC44MDQxIDE0LjQgMTUuMyAxNC40QzE1Ljc5NTkgMTQuNCAxNi4yIDE0LjgwNDEgMTYuMiAxNS4zQzE2LjIgMTUuNzk1OSAxNS43OTU5IDE2LjIgMTUuMyAxNi4yWk05IDE2LjJDOC41MDQxIDE2LjIgOC4xIDE1Ljc5NTkgOC4xIDE1LjNDOC4xIDE0LjgwNDEgOC41MDQxIDE0LjQgOSAxNC40QzkuNDk1OSAxNC40IDkuOSAxNC44MDQxIDkuOSAxNS4zQzkuOSAxNS43OTU5IDkuNDk1OSAxNi4yIDkgMTYuMlpNMi43IDE2LjJDMi4yMDQxIDE2LjIgMS44IDE1Ljc5NTkgMS44IDE1LjNDMS44IDE0LjgwNDEgMi4yMDQxIDE0LjQgMi43IDE0LjRDMy4xOTU5IDE0LjQgMy42IDE0LjgwNDEgMy42IDE1LjNDMy42IDE1Ljc5NTkgMy4xOTU5IDE2LjIgMi43IDE2LjJaTTcuNjUgMy4xNUM3LjY1IDIuNDA1NyA4LjI1NTcgMS44IDkgMS44QzkuNzQ0MyAxLjggMTAuMzUgMi40MDU3IDEwLjM1IDMuMTVDMTAuMzUgMy44OTQzIDkuNzQ0MyA0LjUgOSA0LjVDOC4yNTU3IDQuNSA3LjY1IDMuODk0MyA3LjY1IDMuMTVaTTE2LjIgMTIuNzY1NlYxMC44QzE2LjIgOS4zMTE0IDE0Ljk4ODYgOC4xIDEzLjUgOC4xSDkuOVY2LjE1MzNDMTEuMTk2IDUuNzYyNyAxMi4xNSA0LjU3MiAxMi4xNSAzLjE1QzEyLjE1IDEuNDEzIDEwLjczNyAwIDkgMEM3LjI2MyAwIDUuODUgMS40MTMgNS44NSAzLjE1QzUuODUgNC41NzIgNi44MDQgNS43NjI3IDguMSA2LjE1MzNWOC4xSDQuNUMzLjAxMTQgOC4xIDEuOCA5LjMxMTQgMS44IDEwLjhWMTIuNzY1NkMwLjc1NDIgMTMuMTM5MSAwIDE0LjEyODIgMCAxNS4zQzAgMTYuNzg4NiAxLjIxMTQgMTggMi43IDE4QzQuMTg4NiAxOCA1LjQgMTYuNzg4NiA1LjQgMTUuM0M1LjQgMTQuMTI4MiA0LjY0NTggMTMuMTM5MSAzLjYgMTIuNzY1NlYxMC44QzMuNiAxMC4zMDQxIDQuMDA0MSA5LjkgNC41IDkuOUg4LjFWMTIuNzY1NkM3LjA1NDIgMTMuMTM5MSA2LjMgMTQuMTI4MiA2LjMgMTUuM0M2LjMgMTYuNzg4NiA3LjUxMTQgMTggOSAxOEMxMC40ODg2IDE4IDExLjcgMTYuNzg4NiAxMS43IDE1LjNDMTEuNyAxNC4xMjgyIDEwLjk0NTggMTMuMTM5MSA5LjkgMTIuNzY1NlY5LjlIMTMuNUMxMy45OTU5IDkuOSAxNC40IDEwLjMwNDEgMTQuNCAxMC44VjEyLjc2NTZDMTMuMzU0MiAxMy4xMzkxIDEyLjYgMTQuMTI4MiAxMi42IDE1LjNDMTIuNiAxNi43ODg2IDEzLjgxMTQgMTggMTUuMyAxOEMxNi43ODg2IDE4IDE4IDE2Ljc4ODYgMTggMTUuM0MxOCAxNC4xMjgyIDE3LjI0NTggMTMuMTM5MSAxNi4yIDEyLjc2NTZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-color: #54d1b0;
}

.styles__orgTeamCreate___2-meZ {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi44NTcxNSAxMi44NTcxSDYuMDAwMDFDNS41MjY4NyAxMi44NTcxIDUuMTQyODcgMTMuMjQxMSA1LjE0Mjg3IDEzLjcxNDNWMTYuMjg1N0gzLjQyODU4VjEzLjcxNDNDMy40Mjg1OCAxMy4yNDExIDMuMDQ0NTggMTIuODU3MSAyLjU3MTQ0IDEyLjg1NzFIMS43MTQyOVYxMkMxLjcxNDI5IDEwLjU4MjMgMi44NjgwMSA5LjQyODU3IDQuMjg1NzIgOS40Mjg1N0M1LjcwMzQ0IDkuNDI4NTcgNi44NTcxNSAxMC41ODIzIDYuODU3MTUgMTJWMTIuODU3MVpNNC4yODU3MyA0LjcxNDI4QzQuNzU4MDIgNC43MTQyOCA1LjE0Mjg3IDUuMDk5MTQgNS4xNDI4NyA1LjU3MTQyQzUuMTQyODcgNi4wNDM3MSA0Ljc1ODAyIDYuNDI4NTcgNC4yODU3MyA2LjQyODU3QzMuODEzNDUgNi40Mjg1NyAzLjQyODU5IDYuMDQzNzEgMy40Mjg1OSA1LjU3MTQyQzMuNDI4NTkgNS4wOTkxNCAzLjgxMzQ1IDQuNzE0MjggNC4yODU3MyA0LjcxNDI4Wk04LjU3MTQzIDEyQzguNTcxNDMgMTAuMDI0MyA3LjIxOTcxIDguMzczNDMgNS4zOTgyOSA3Ljg3ODg2QzYuMjU4IDcuNDYzMTQgNi44NTcxNCA2LjU4OTcxIDYuODU3MTQgNS41NzE0M0M2Ljg1NzE0IDQuMTUzNzEgNS43MDM0MyAzIDQuMjg1NzEgM0MyLjg2OCAzIDEuNzE0MjkgNC4xNTM3MSAxLjcxNDI5IDUuNTcxNDNDMS43MTQyOSA2LjU4OTcxIDIuMzEzNDMgNy40NjMxNCAzLjE3MzE0IDcuODc4ODZDMS4zNTE3MSA4LjM3MzQzIDAgMTAuMDI0MyAwIDEyVjEzLjcxNDNDMCAxNC4xODc0IDAuMzg0IDE0LjU3MTQgMC44NTcxNDMgMTQuNTcxNEgxLjcxNDI5VjE3LjE0MjlDMS43MTQyOSAxNy42MTYgMi4wOTgyOSAxOCAyLjU3MTQzIDE4SDZDNi40NzMxNCAxOCA2Ljg1NzE0IDE3LjYxNiA2Ljg1NzE0IDE3LjE0MjlWMTQuNTcxNEg3LjcxNDI5QzguMTg3NDMgMTQuNTcxNCA4LjU3MTQzIDE0LjE4NzQgOC41NzE0MyAxMy43MTQzVjEyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC4yODU1IDE2LjI4NTdDMTAuMjg1NSAxNS4zMzk0IDExLjA1NDMgMTQuNTcxNCAxMS45OTk3IDE0LjU3MTRDMTIuOTQ1MiAxNC41NzE0IDEzLjcxNCAxNS4zMzk0IDEzLjcxNCAxNi4yODU3SDEwLjI4NTVaTTExLjk5OTggMTAuMjg1N0MxMi40NzIxIDEwLjI4NTcgMTIuODU2OSAxMC42NzA1IDEyLjg1NjkgMTEuMTQyOEMxMi44NTY5IDExLjYxNTEgMTIuNDcyMSAxMiAxMS45OTk4IDEyQzExLjUyNzUgMTIgMTEuMTQyNiAxMS42MTUxIDExLjE0MjYgMTEuMTQyOEMxMS4xNDI2IDEwLjY3MDUgMTEuNTI3NSAxMC4yODU3IDExLjk5OTggMTAuMjg1N1pNMTMuNTAzMyAxMy4yMTk3QzE0LjE0NyAxMi43NTE3IDE0LjU3MTMgMTEuOTk4MyAxNC41NzEzIDExLjE0MjhDMTQuNTcxMyA5LjcyNTEzIDEzLjQxNzYgOC41NzE0MSAxMS45OTk5IDguNTcxNDFDMTAuNTgyMSA4LjU3MTQxIDkuNDI4NDMgOS43MjUxMyA5LjQyODQzIDExLjE0MjhDOS40Mjg0MyAxMS45OTgzIDkuODUyNzIgMTIuNzUxNyAxMC40OTY0IDEzLjIxOTdDOS4zNjA3MiAxMy43Nzg2IDguNTcxMjkgMTQuOTM3NCA4LjU3MTI5IDE2LjI4NTdWMTcuMTQyOEM4LjU3MTI5IDE3LjYxNiA4Ljk1NTI5IDE4IDkuNDI4NDMgMThIMTQuNTcxM0MxNS4wNDQ0IDE4IDE1LjQyODQgMTcuNjE2IDE1LjQyODQgMTcuMTQyOFYxNi4yODU3QzE1LjQyODQgMTQuOTM3NCAxNC42MzkgMTMuNzc4NiAxMy41MDMzIDEzLjIxOTdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE4IDIuNTcxNDNIMTUuNDI4NVYwSDEzLjcxNDNWMi41NzE0M0gxMS4xNDI4VjQuMjg1NzFIMTMuNzE0M1Y2Ljg1NzE0SDE1LjQyODVWNC4yODU3MUgxOFYyLjU3MTQzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
  background-color: #54d1b0;
}

.styles__orgTeamDelete___3jXL0 {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi42MzM4IDEzLjAyNDZINS44MDQ1N0M1LjM0Njg0IDEzLjAyNDYgNC45NzUzNSAxMy4zOTYxIDQuOTc1MzUgMTMuODUzOVYxNi4zNDE1SDMuMzE2OVYxMy44NTM5QzMuMzE2OSAxMy4zOTYxIDIuOTQ1NDEgMTMuMDI0NiAyLjQ4NzY3IDEzLjAyNDZIMS42NTg0NVYxMi4xOTU0QzEuNjU4NDUgMTAuODIzOSAyLjc3NDU4IDkuNzA3NzMgNC4xNDYxMiA5LjcwNzczQzUuNTE3NjYgOS43MDc3MyA2LjYzMzggMTAuODIzOSA2LjYzMzggMTIuMTk1NFYxMy4wMjQ2Wk00LjE0NjEyIDUuMTQ3QzQuNjAzMDIgNS4xNDcgNC45NzUzNSA1LjUxOTMzIDQuOTc1MzUgNS45NzYyM0M0Ljk3NTM1IDYuNDMzMTMgNC42MDMwMiA2LjgwNTQ1IDQuMTQ2MTIgNi44MDU0NUMzLjY4OTIyIDYuODA1NDUgMy4zMTY4OSA2LjQzMzEzIDMuMzE2ODkgNS45NzYyM0MzLjMxNjg5IDUuNTE5MzMgMy42ODkyMiA1LjE0NyA0LjE0NjEyIDUuMTQ3Wk04LjI5MjI2IDEyLjE5NTRDOC4yOTIyNiAxMC4yODQxIDYuOTg0NTcgOC42ODY5NyA1LjIyMjQ2IDguMjA4NTFDNi4wNTQxOCA3LjgwNjMzIDYuNjMzOCA2Ljk2MTM1IDYuNjMzOCA1Ljk3NjIzQzYuNjMzOCA0LjYwNDY5IDUuNTE3NjcgMy40ODg1NiA0LjE0NjEzIDMuNDg4NTZDMi43NzQ1OSAzLjQ4ODU2IDEuNjU4NDUgNC42MDQ2OSAxLjY1ODQ1IDUuOTc2MjNDMS42NTg0NSA2Ljk2MTM1IDIuMjM4MDggNy44MDYzMyAzLjA2OTc5IDguMjA4NTFDMS4zMDc2OSA4LjY4Njk3IDAgMTAuMjg0MSAwIDEyLjE5NTRWMTMuODUzOUMwIDE0LjMxMTYgMC4zNzE0OTMgMTQuNjgzMSAwLjgyOTIyNiAxNC42ODMxSDEuNjU4NDVWMTcuMTcwOEMxLjY1ODQ1IDE3LjYyODUgMi4wMjk5NCAxOCAyLjQ4NzY4IDE4SDUuODA0NThDNi4yNjIzMSAxOCA2LjYzMzggMTcuNjI4NSA2LjYzMzggMTcuMTcwOFYxNC42ODMxSDcuNDYzMDNDNy45MjA3NiAxNC42ODMxIDguMjkyMjYgMTQuMzExNiA4LjI5MjI2IDEzLjg1MzlWMTIuMTk1NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS45NTA3NCAxNi4zNDE2QzkuOTUwNzQgMTUuNDI2MSAxMC42OTQ2IDE0LjY4MzEgMTEuNjA5MiAxNC42ODMxQzEyLjUyMzggMTQuNjgzMSAxMy4yNjc2IDE1LjQyNjEgMTMuMjY3NiAxNi4zNDE2SDkuOTUwNzRaTTExLjYwOTIgMTAuNTM3QzEyLjA2NjEgMTAuNTM3IDEyLjQzODQgMTAuOTA5MyAxMi40Mzg0IDExLjM2NjJDMTIuNDM4NCAxMS44MjMxIDEyLjA2NjEgMTIuMTk1NCAxMS42MDkyIDEyLjE5NTRDMTEuMTUyMyAxMi4xOTU0IDEwLjc4IDExLjgyMzEgMTAuNzggMTEuMzY2MkMxMC43OCAxMC45MDkzIDExLjE1MjMgMTAuNTM3IDExLjYwOTIgMTAuNTM3Wk0xMy4wNjM2IDEzLjM3NTRDMTMuNjg2MyAxMi45MjI3IDE0LjA5NjggMTIuMTkzOCAxNC4wOTY4IDExLjM2NjJDMTQuMDk2OCA5Ljk5NDY4IDEyLjk4MDcgOC44Nzg1NCAxMS42MDkxIDguODc4NTRDMTAuMjM3NiA4Ljg3ODU0IDkuMTIxNDYgOS45OTQ2OCA5LjEyMTQ2IDExLjM2NjJDOS4xMjE0NiAxMi4xOTM4IDkuNTMxOTMgMTIuOTIyNyAxMC4xNTQ3IDEzLjM3NTRDOS4wNTU5NSAxMy45MTYxIDguMjkyMjQgMTUuMDM3MiA4LjI5MjI0IDE2LjM0MTZWMTcuMTcwOEM4LjI5MjI0IDE3LjYyODUgOC42NjM3MyAxOCA5LjEyMTQ2IDE4SDE0LjA5NjhDMTQuNTU0NSAxOCAxNC45MjYgMTcuNjI4NSAxNC45MjYgMTcuMTcwOFYxNi4zNDE2QzE0LjkyNiAxNS4wMzcyIDE0LjE2MjMgMTMuOTE2MSAxMy4wNjM2IDEzLjM3NTRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3Ljk5OTkgMS4xNzI1MkwxNi44Mjc0IDBMMTQuOTI2IDEuOTAxNDFMMTMuMDI0NiAwTDExLjg1MjEgMS4xNzI1MkwxMy43NTM1IDMuMDczOTRMMTEuODUyMSA0Ljk3NTM1TDEzLjAyNDYgNi4xNDc4OEwxNC45MjYgNC4yNDY0NkwxNi44Mjc0IDYuMTQ3ODhMMTcuOTk5OSA0Ljk3NTM1TDE2LjA5ODUgMy4wNzM5NEwxNy45OTk5IDEuMTcyNTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-color: #ee635f;
}

.styles__orgMemberInvite___24OA5 {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi41NDU1NCA2LjU0NTY2QzUuNjQzMSA2LjU0NTY2IDQuOTA5MiA3LjI3ODc0IDQuOTA5MiA4LjE4MTk5QzQuOTA5MiA5LjA4NDQzIDUuNjQzMSA5LjgxODMzIDYuNTQ1NTQgOS44MTgzM0M3LjQ0Nzk3IDkuODE4MzMgOC4xODE4NyA5LjA4NDQzIDguMTgxODcgOC4xODE5OUM4LjE4MTg3IDcuMjc4NzQgNy40NDc5NyA2LjU0NTY2IDYuNTQ1NTQgNi41NDU2NlpNNi41NDU2MiAxMS40NTQ3QzQuNzQwNzQgMTEuNDU0NyAzLjI3Mjk1IDkuOTg2ODggMy4yNzI5NSA4LjE4MkMzLjI3Mjk1IDYuMzc3MTIgNC43NDA3NCA0LjkwOTMzIDYuNTQ1NjIgNC45MDkzM0M4LjM1MDQ5IDQuOTA5MzMgOS44MTgyOCA2LjM3NzEyIDkuODE4MjggOC4xODJDOS44MTgyOCA5Ljk4Njg4IDguMzUwNDkgMTEuNDU0NyA2LjU0NTYyIDExLjQ1NDdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzY2MzcgMTYuMzYzN0gxMS4zMjVDMTAuODM1OCAxNC44ODQ0IDkuMDA2MzMgMTMuOTA5MiA2LjU0NTI4IDEzLjkwOTJDNC4wODQyNCAxMy45MDkyIDIuMjU1NjMgMTQuODg0NCAxLjc2NjM3IDE2LjM2MzdaTTEzLjA5MDcgMThIMFYxNy4xODE4QzAgMTQuMjkxMiAyLjY5MTc3IDEyLjI3MjggNi41NDUzNCAxMi4yNzI4QzEwLjM5OTcgMTIuMjcyOCAxMy4wOTA3IDE0LjI5MTIgMTMuMDkwNyAxNy4xODE4VjE4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC43MjcyIDEuNzY4ODhMMTguMTg4IDAuMDM4NDUzOEMxOC4xMjU5IDAuMDIyOTA4NyAxOC4wNjYxIDAgMTcuOTk5OSAwSDExLjQ1NDVDMTEuMzg4MyAwIDExLjMyODUgMC4wMjI5MDg3IDExLjI2NjQgMC4wMzg0NTM4TDE0LjcyNzIgMS43Njg4OFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuMDAxNiAzLjAwMzczQzE0LjkxNTcgMy4wNDcwOSAxNC44MjA4IDMuMDY4MzYgMTQuNzI3NiAzLjA2ODM2QzE0LjYzMzUgMy4wNjgzNiAxNC41Mzk0IDMuMDQ3MDkgMTQuNDUyNiAzLjAwMzczTDEwLjYzNjcgMS4wOTU3NlY0LjkwOTI0QzEwLjYzNjcgNS4zNjE2OSAxMS4wMDI0IDUuNzI3NDEgMTEuNDU0OSA1LjcyNzQxSDE4LjAwMDJDMTguNDUxOCA1LjcyNzQxIDE4LjgxODQgNS4zNjE2OSAxOC44MTg0IDQuOTA5MjRWMS4wOTU3NkwxNS4wMDE2IDMuMDAzNzNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-color: #54d1b0;
}

.styles__orgMemberJoin___2ow-C {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTcgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMjMyOCAxNy4xNzU2QzEzLjc3MTUgMTcuMTc1NiAxMy4zOTU2IDE2Ljc5OTYgMTMuMzk1NiAxNi4zMzgzQzEzLjM5NTYgMTUuODc3IDEzLjc3MTUgMTUuNTAxMSAxNC4yMzI4IDE1LjUwMTFDMTQuNjk0MSAxNS41MDExIDE1LjA3IDE1Ljg3NyAxNS4wNyAxNi4zMzgzQzE1LjA3IDE2Ljc5OTYgMTQuNjk0MSAxNy4xNzU2IDE0LjIzMjggMTcuMTc1Nk04LjM3MjEgMTcuMTc1NkM3LjkxMDc5IDE3LjE3NTYgNy41MzQ4OSAxNi43OTk2IDcuNTM0ODkgMTYuMzM4M0M3LjUzNDg5IDE1Ljg3NyA3LjkxMDc5IDE1LjUwMTEgOC4zNzIxIDE1LjUwMTFDOC44MzM0IDE1LjUwMTEgOS4yMDkzMSAxNS44NzcgOS4yMDkzMSAxNi4zMzgzQzkuMjA5MzEgMTYuNzk5NiA4LjgzMzQgMTcuMTc1NiA4LjM3MjEgMTcuMTc1Nk0yLjUxMTgzIDE3LjE3NTZDMi4wNTA1MyAxNy4xNzU2IDEuNjc0NjIgMTYuNzk5NiAxLjY3NDYyIDE2LjMzODNDMS42NzQ2MiAxNS44NzcgMi4wNTA1MyAxNS41MDExIDIuNTExODMgMTUuNTAxMUMyLjk3MzEzIDE1LjUwMTEgMy4zNDkwNCAxNS44NzcgMy4zNDkwNCAxNi4zMzgzQzMuMzQ5MDQgMTYuNzk5NiAyLjk3MzEzIDE3LjE3NTYgMi41MTE4MyAxNy4xNzU2TTguMjUzMjYgNy4xMjkwNEg4LjQ5MTAzQzkuMjE4NTYgNy4xMjkwNCA5Ljg4ODMzIDcuNDQ2MzQgMTAuMzUxMyA3Ljk2NjI1SDYuMzkyOThDNi44NTU5NiA3LjQ0NjM0IDcuNTI1NzIgNy4xMjkwNCA4LjI1MzI2IDcuMTI5MDRNOC4zNzIxIDIuNTI0MzhDOC44MzM0IDIuNTI0MzggOS4yMDkzMSAyLjkwMDI5IDkuMjA5MzEgMy4zNjE1OUM5LjIwOTMxIDMuODIyOSA4LjgzMzQgNC4xOTg4IDguMzcyMSA0LjE5ODhDNy45MTA3OSA0LjE5ODggNy41MzQ4OSAzLjgyMjkgNy41MzQ4OSAzLjM2MTU5QzcuNTM0ODkgMi45MDAyOSA3LjkxMDc5IDIuNTI0MzggOC4zNzIxIDIuNTI0MzhNMTUuMDY5OCAxMy45ODE2VjExLjMxNTFIOS4yMDkzVjkuNjQwNjdIMTIuODAyNkwxMi41MzEzIDguNTkzMzJDMTIuMTQwNCA3LjA4Mzg0IDEwLjk1NDkgNS45NTk0NiA5LjQ5OTgxIDUuNTkzNkMxMC4zMTY5IDUuMTc4MzUgMTAuODgzNyA0LjMzOTQ2IDEwLjg4MzcgMy4zNjE2QzEwLjg4MzcgMS45NzY4NiA5Ljc1Njg0IDAuODQ5OTc2IDguMzcyMDkgMC44NDk5NzZDNi45ODczNSAwLjg0OTk3NiA1Ljg2MDQ2IDEuOTc2ODYgNS44NjA0NiAzLjM2MTZDNS44NjA0NiA0LjMzOTQ2IDYuNDI3MjYgNS4xNzgzNSA3LjI0NDM3IDUuNTkzNkM1Ljc4OTMgNS45NTk0NiA0LjYwMzgxIDcuMDgzODQgNC4yMTI4NCA4LjU5MzMyTDMuOTQxNTggOS42NDA2N0g3LjUzNDg4VjExLjMxNTFIMS42NzQ0MlYxMy45ODE2QzAuNzAxNTgxIDE0LjMyODIgMCAxNS4yNDgzIDAgMTYuMzM4M0MwIDE3LjcyMzEgMS4xMjY4OCAxOC44NSAyLjUxMTYzIDE4Ljg1QzMuODk2MzcgMTguODUgNS4wMjMyNiAxNy43MjMxIDUuMDIzMjYgMTYuMzM4M0M1LjAyMzI2IDE1LjI0ODMgNC4zMjE2NyAxNC4zMjgyIDMuMzQ4ODQgMTMuOTgxNlYxMi45ODk1SDcuNTM0ODhWMTMuOTgxNkM2LjU2MjA1IDE0LjMyODIgNS44NjA0NiAxNS4yNDgzIDUuODYwNDYgMTYuMzM4M0M1Ljg2MDQ2IDE3LjcyMzEgNi45ODczNSAxOC44NSA4LjM3MjA5IDE4Ljg1QzkuNzU2ODQgMTguODUgMTAuODgzNyAxNy43MjMxIDEwLjg4MzcgMTYuMzM4M0MxMC44ODM3IDE1LjI0ODMgMTAuMTgyMSAxNC4zMjgyIDkuMjA5MyAxMy45ODE2VjEyLjk4OTVIMTMuMzk1M1YxMy45ODE2QzEyLjQyMjUgMTQuMzI4MiAxMS43MjA5IDE1LjI0ODMgMTEuNzIwOSAxNi4zMzgzQzExLjcyMDkgMTcuNzIzMSAxMi44NDc4IDE4Ljg1IDE0LjIzMjYgMTguODVDMTUuNjE3MyAxOC44NSAxNi43NDQyIDE3LjcyMzEgMTYuNzQ0MiAxNi4zMzgzQzE2Ljc0NDIgMTUuMjQ4MyAxNi4wNDI2IDE0LjMyODIgMTUuMDY5OCAxMy45ODE2IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-color: #54d1b0;
}

.styles__orgMemberRemove___T7YFz {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTcgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMjMyOCAxNy4xNzU2QzEzLjc3MTUgMTcuMTc1NiAxMy4zOTU2IDE2Ljc5OTYgMTMuMzk1NiAxNi4zMzgzQzEzLjM5NTYgMTUuODc3IDEzLjc3MTUgMTUuNTAxMSAxNC4yMzI4IDE1LjUwMTFDMTQuNjk0MSAxNS41MDExIDE1LjA3IDE1Ljg3NyAxNS4wNyAxNi4zMzgzQzE1LjA3IDE2Ljc5OTYgMTQuNjk0MSAxNy4xNzU2IDE0LjIzMjggMTcuMTc1NlpNOC4zNzIxIDE3LjE3NTZDNy45MTA3OSAxNy4xNzU2IDcuNTM0ODkgMTYuNzk5NiA3LjUzNDg5IDE2LjMzODNDNy41MzQ4OSAxNS44NzcgNy45MTA3OSAxNS41MDExIDguMzcyMSAxNS41MDExQzguODMzNCAxNS41MDExIDkuMjA5MzEgMTUuODc3IDkuMjA5MzEgMTYuMzM4M0M5LjIwOTMxIDE2Ljc5OTYgOC44MzM0IDE3LjE3NTYgOC4zNzIxIDE3LjE3NTZaTTIuNTExODMgMTcuMTc1NkMyLjA1MDUzIDE3LjE3NTYgMS42NzQ2MiAxNi43OTk2IDEuNjc0NjIgMTYuMzM4M0MxLjY3NDYyIDE1Ljg3NyAyLjA1MDUzIDE1LjUwMTEgMi41MTE4MyAxNS41MDExQzIuOTczMTMgMTUuNTAxMSAzLjM0OTA0IDE1Ljg3NyAzLjM0OTA0IDE2LjMzODNDMy4zNDkwNCAxNi43OTk2IDIuOTczMTMgMTcuMTc1NiAyLjUxMTgzIDE3LjE3NTZaTTguMjUzMjYgNy4xMjkwNEg4LjQ5MTAzQzkuMjE4NTYgNy4xMjkwNCA5Ljg4ODMzIDcuNDQ2MzQgMTAuMzUxMyA3Ljk2NjI1SDYuMzkyOThDNi44NTU5NiA3LjQ0NjM0IDcuNTI1NzIgNy4xMjkwNCA4LjI1MzI2IDcuMTI5MDRaTTguMzcyMSAyLjUyNDM4QzguODMzNCAyLjUyNDM4IDkuMjA5MzEgMi45MDAyOSA5LjIwOTMxIDMuMzYxNTlDOS4yMDkzMSAzLjgyMjkgOC44MzM0IDQuMTk4OCA4LjM3MjEgNC4xOTg4QzcuOTEwNzkgNC4xOTg4IDcuNTM0ODkgMy44MjI5IDcuNTM0ODkgMy4zNjE1OUM3LjUzNDg5IDIuOTAwMjkgNy45MTA3OSAyLjUyNDM4IDguMzcyMSAyLjUyNDM4Wk0xNS4wNjk4IDEzLjk4MTZWMTEuMzE1MUg5LjIwOTNWOS42NDA2N0gxMi44MDI2TDEyLjUzMTMgOC41OTMzMkMxMi4xNDA0IDcuMDgzODQgMTAuOTU0OSA1Ljk1OTQ2IDkuNDk5ODEgNS41OTM2QzEwLjMxNjkgNS4xNzgzNSAxMC44ODM3IDQuMzM5NDYgMTAuODgzNyAzLjM2MTZDMTAuODgzNyAxLjk3Njg2IDkuNzU2ODQgMC44NDk5NzYgOC4zNzIwOSAwLjg0OTk3NkM2Ljk4NzM1IDAuODQ5OTc2IDUuODYwNDYgMS45NzY4NiA1Ljg2MDQ2IDMuMzYxNkM1Ljg2MDQ2IDQuMzM5NDYgNi40MjcyNiA1LjE3ODM1IDcuMjQ0MzcgNS41OTM2QzUuNzg5MyA1Ljk1OTQ2IDQuNjAzODEgNy4wODM4NCA0LjIxMjg0IDguNTkzMzJMMy45NDE1OCA5LjY0MDY3SDcuNTM0ODhWMTEuMzE1MUgxLjY3NDQyVjEzLjk4MTZDMC43MDE1ODEgMTQuMzI4MiAwIDE1LjI0ODMgMCAxNi4zMzgzQzAgMTcuNzIzMSAxLjEyNjg4IDE4Ljg1IDIuNTExNjMgMTguODVDMy44OTYzNyAxOC44NSA1LjAyMzI2IDE3LjcyMzEgNS4wMjMyNiAxNi4zMzgzQzUuMDIzMjYgMTUuMjQ4MyA0LjMyMTY3IDE0LjMyODIgMy4zNDg4NCAxMy45ODE2VjEyLjk4OTVINy41MzQ4OFYxMy45ODE2QzYuNTYyMDUgMTQuMzI4MiA1Ljg2MDQ2IDE1LjI0ODMgNS44NjA0NiAxNi4zMzgzQzUuODYwNDYgMTcuNzIzMSA2Ljk4NzM1IDE4Ljg1IDguMzcyMDkgMTguODVDOS43NTY4NCAxOC44NSAxMC44ODM3IDE3LjcyMzEgMTAuODgzNyAxNi4zMzgzQzEwLjg4MzcgMTUuMjQ4MyAxMC4xODIxIDE0LjMyODIgOS4yMDkzIDEzLjk4MTZWMTIuOTg5NUgxMy4zOTUzVjEzLjk4MTZDMTIuNDIyNSAxNC4zMjgyIDExLjcyMDkgMTUuMjQ4MyAxMS43MjA5IDE2LjMzODNDMTEuNzIwOSAxNy43MjMxIDEyLjg0NzggMTguODUgMTQuMjMyNiAxOC44NUMxNS42MTczIDE4Ljg1IDE2Ljc0NDIgMTcuNzIzMSAxNi43NDQyIDE2LjMzODNDMTYuNzQ0MiAxNS4yNDgzIDE2LjA0MjYgMTQuMzI4MiAxNS4wNjk4IDEzLjk4MTZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTcgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMjMyOCAxNy4xNzU2QzEzLjc3MTUgMTcuMTc1NiAxMy4zOTU2IDE2Ljc5OTYgMTMuMzk1NiAxNi4zMzgzQzEzLjM5NTYgMTUuODc3IDEzLjc3MTUgMTUuNTAxMSAxNC4yMzI4IDE1LjUwMTFDMTQuNjk0MSAxNS41MDExIDE1LjA3IDE1Ljg3NyAxNS4wNyAxNi4zMzgzQzE1LjA3IDE2Ljc5OTYgMTQuNjk0MSAxNy4xNzU2IDE0LjIzMjggMTcuMTc1NlpNOC4zNzIxIDE3LjE3NTZDNy45MTA3OSAxNy4xNzU2IDcuNTM0ODkgMTYuNzk5NiA3LjUzNDg5IDE2LjMzODNDNy41MzQ4OSAxNS44NzcgNy45MTA3OSAxNS41MDExIDguMzcyMSAxNS41MDExQzguODMzNCAxNS41MDExIDkuMjA5MzEgMTUuODc3IDkuMjA5MzEgMTYuMzM4M0M5LjIwOTMxIDE2Ljc5OTYgOC44MzM0IDE3LjE3NTYgOC4zNzIxIDE3LjE3NTZaTTIuNTExODMgMTcuMTc1NkMyLjA1MDUzIDE3LjE3NTYgMS42NzQ2MiAxNi43OTk2IDEuNjc0NjIgMTYuMzM4M0MxLjY3NDYyIDE1Ljg3NyAyLjA1MDUzIDE1LjUwMTEgMi41MTE4MyAxNS41MDExQzIuOTczMTMgMTUuNTAxMSAzLjM0OTA0IDE1Ljg3NyAzLjM0OTA0IDE2LjMzODNDMy4zNDkwNCAxNi43OTk2IDIuOTczMTMgMTcuMTc1NiAyLjUxMTgzIDE3LjE3NTZaTTguMjUzMjYgNy4xMjkwNEg4LjQ5MTAzQzkuMjE4NTYgNy4xMjkwNCA5Ljg4ODMzIDcuNDQ2MzQgMTAuMzUxMyA3Ljk2NjI1SDYuMzkyOThDNi44NTU5NiA3LjQ0NjM0IDcuNTI1NzIgNy4xMjkwNCA4LjI1MzI2IDcuMTI5MDRaTTguMzcyMSAyLjUyNDM4QzguODMzNCAyLjUyNDM4IDkuMjA5MzEgMi45MDAyOSA5LjIwOTMxIDMuMzYxNTlDOS4yMDkzMSAzLjgyMjkgOC44MzM0IDQuMTk4OCA4LjM3MjEgNC4xOTg4QzcuOTEwNzkgNC4xOTg4IDcuNTM0ODkgMy44MjI5IDcuNTM0ODkgMy4zNjE1OUM3LjUzNDg5IDIuOTAwMjkgNy45MTA3OSAyLjUyNDM4IDguMzcyMSAyLjUyNDM4Wk0xNS4wNjk4IDEzLjk4MTZWMTEuMzE1MUg5LjIwOTNWOS42NDA2N0gxMi44MDI2TDEyLjUzMTMgOC41OTMzMkMxMi4xNDA0IDcuMDgzODQgMTAuOTU0OSA1Ljk1OTQ2IDkuNDk5ODEgNS41OTM2QzEwLjMxNjkgNS4xNzgzNSAxMC44ODM3IDQuMzM5NDYgMTAuODgzNyAzLjM2MTZDMTAuODgzNyAxLjk3Njg2IDkuNzU2ODQgMC44NDk5NzYgOC4zNzIwOSAwLjg0OTk3NkM2Ljk4NzM1IDAuODQ5OTc2IDUuODYwNDYgMS45NzY4NiA1Ljg2MDQ2IDMuMzYxNkM1Ljg2MDQ2IDQuMzM5NDYgNi40MjcyNiA1LjE3ODM1IDcuMjQ0MzcgNS41OTM2QzUuNzg5MyA1Ljk1OTQ2IDQuNjAzODEgNy4wODM4NCA0LjIxMjg0IDguNTkzMzJMMy45NDE1OCA5LjY0MDY3SDcuNTM0ODhWMTEuMzE1MUgxLjY3NDQyVjEzLjk4MTZDMC43MDE1ODEgMTQuMzI4MiAwIDE1LjI0ODMgMCAxNi4zMzgzQzAgMTcuNzIzMSAxLjEyNjg4IDE4Ljg1IDIuNTExNjMgMTguODVDMy44OTYzNyAxOC44NSA1LjAyMzI2IDE3LjcyMzEgNS4wMjMyNiAxNi4zMzgzQzUuMDIzMjYgMTUuMjQ4MyA0LjMyMTY3IDE0LjMyODIgMy4zNDg4NCAxMy45ODE2VjEyLjk4OTVINy41MzQ4OFYxMy45ODE2QzYuNTYyMDUgMTQuMzI4MiA1Ljg2MDQ2IDE1LjI0ODMgNS44NjA0NiAxNi4zMzgzQzUuODYwNDYgMTcuNzIzMSA2Ljk4NzM1IDE4Ljg1IDguMzcyMDkgMTguODVDOS43NTY4NCAxOC44NSAxMC44ODM3IDE3LjcyMzEgMTAuODgzNyAxNi4zMzgzQzEwLjg4MzcgMTUuMjQ4MyAxMC4xODIxIDE0LjMyODIgOS4yMDkzIDEzLjk4MTZWMTIuOTg5NUgxMy4zOTUzVjEzLjk4MTZDMTIuNDIyNSAxNC4zMjgyIDExLjcyMDkgMTUuMjQ4MyAxMS43MjA5IDE2LjMzODNDMTEuNzIwOSAxNy43MjMxIDEyLjg0NzggMTguODUgMTQuMjMyNiAxOC44NUMxNS42MTczIDE4Ljg1IDE2Ljc0NDIgMTcuNzIzMSAxNi43NDQyIDE2LjMzODNDMTYuNzQ0MiAxNS4yNDgzIDE2LjA0MjYgMTQuMzI4MiAxNS4wNjk4IDEzLjk4MTZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-color: #ee635f;
}

.styles__orgTeamMemberAdd___33Y5_ {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNy4yMDAyMSA1LjM5OTk5QzYuMjA3NTEgNS4zOTk5OSA1LjQwMDIxIDYuMjA2MzkgNS40MDAyMSA3LjE5OTk5QzUuNDAwMjEgOC4xOTI2OSA2LjIwNzUxIDguOTk5OTkgNy4yMDAyMSA4Ljk5OTk5QzguMTkyOTEgOC45OTk5OSA5LjAwMDIxIDguMTkyNjkgOS4wMDAyMSA3LjE5OTk5QzkuMDAwMjEgNi4yMDYzOSA4LjE5MjkxIDUuMzk5OTkgNy4yMDAyMSA1LjM5OTk5Wk03LjIwMDEgMTAuOEM1LjIxNDcgMTAuOCAzLjYwMDEgOS4xODU0MSAzLjYwMDEgNy4yMDAwMUMzLjYwMDEgNS4yMTQ2MSA1LjIxNDcgMy42MDAwMSA3LjIwMDEgMy42MDAwMUM5LjE4NTUgMy42MDAwMSAxMC44MDAxIDUuMjE0NjEgMTAuODAwMSA3LjIwMDAxQzEwLjgwMDEgOS4xODU0MSA5LjE4NTUgMTAuOCA3LjIwMDEgMTAuOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS45NDMwNSAxNi4ySDEyLjQ1NzhDMTEuOTE5NiAxNC41NzI4IDkuOTA3MTUgMTMuNSA3LjE5OTk1IDEzLjVDNC40OTI3NSAxMy41IDIuNDgxMjUgMTQuNTcyOCAxLjk0MzA1IDE2LjJaTTE0LjQgMThIMFYxNy4xQzAgMTMuOTIwMyAyLjk2MSAxMS43IDcuMiAxMS43QzExLjQzOTkgMTEuNyAxNC40IDEzLjkyMDMgMTQuNCAxNy4xVjE4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS44MDAxIDIuN0gxNy4xMDAxVjBIMTUuMzAwMVYyLjdIMTIuNjAwMVY0LjVIMTUuMzAwMVY3LjJIMTcuMTAwMVY0LjVIMTkuODAwMVYyLjdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
  background-color: #54d1b0;
}

.styles__orgTeamMemberRemove___eAHEK {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi45NjQ2OSA1LjgxMTc3QzYuMDA0NDMgNS44MTE3NyA1LjIyMzUxIDYuNTkxODEgNS4yMjM1MSA3LjU1Mjk0QzUuMjIzNTEgOC41MTMyIDYuMDA0NDMgOS4yOTQxMiA2Ljk2NDY5IDkuMjk0MTJDNy45MjQ5NCA5LjI5NDEyIDguNzA1ODYgOC41MTMyIDguNzA1ODYgNy41NTI5NEM4LjcwNTg2IDYuNTkxODEgNy45MjQ5NCA1LjgxMTc3IDYuOTY0NjkgNS44MTE3N1pNNi45NjQ3NyAxMS4wMzUzQzUuMDQ0MjYgMTEuMDM1MyAzLjQ4MjQyIDkuNDczNDUgMy40ODI0MiA3LjU1Mjk0QzMuNDgyNDIgNS42MzI0MiA1LjA0NDI2IDQuMDcwNTkgNi45NjQ3NyA0LjA3MDU5QzguODg1MjkgNC4wNzA1OSAxMC40NDcxIDUuNjMyNDIgMTAuNDQ3MSA3LjU1Mjk0QzEwLjQ0NzEgOS40NzM0NSA4Ljg4NTI5IDExLjAzNTMgNi45NjQ3NyAxMS4wMzUzWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjg3OTUyIDE2LjI1ODhIMTIuMDUwNkMxMS41MyAxNC42ODQ4IDkuNTgzMzQgMTMuNjQ3MSA2Ljk2NDYyIDEzLjY0NzFDNC4zNDU4OSAxMy42NDcxIDIuNDAwMTMgMTQuNjg0OCAxLjg3OTUyIDE2LjI1ODhaTTEzLjkyOTQgMThIMFYxNy4xMjk0QzAgMTQuMDUzNiAyLjg2NDIzIDExLjkwNTkgNi45NjQ3IDExLjkwNTlDMTEuMDY2IDExLjkwNTkgMTMuOTI5NCAxNC4wNTM2IDEzLjkyOTQgMTcuMTI5NFYxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguODk3OSAxLjIzMTAxTDE3LjY2NjkgMEwxNS42NzA2IDEuOTk2MjZMMTMuNjc0NCAwTDEyLjQ0MzQgMS4yMzEwMUwxNC40Mzk2IDMuMjI3MjdMMTIuNDQzNCA1LjIyMzUyTDEzLjY3NDQgNi40NTQ1M0wxNS42NzA2IDQuNDU4MjhMMTcuNjY2OSA2LjQ1NDUzTDE4Ljg5NzkgNS4yMjM1MkwxNi45MDE2IDMuMjI3MjdMMTguODk3OSAxLjIzMTAxWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi45NjQ2OSA1LjgxMTc3QzYuMDA0NDMgNS44MTE3NyA1LjIyMzUxIDYuNTkxODEgNS4yMjM1MSA3LjU1Mjk0QzUuMjIzNTEgOC41MTMyIDYuMDA0NDMgOS4yOTQxMiA2Ljk2NDY5IDkuMjk0MTJDNy45MjQ5NCA5LjI5NDEyIDguNzA1ODYgOC41MTMyIDguNzA1ODYgNy41NTI5NEM4LjcwNTg2IDYuNTkxODEgNy45MjQ5NCA1LjgxMTc3IDYuOTY0NjkgNS44MTE3N1pNNi45NjQ3NyAxMS4wMzUzQzUuMDQ0MjYgMTEuMDM1MyAzLjQ4MjQyIDkuNDczNDUgMy40ODI0MiA3LjU1Mjk0QzMuNDgyNDIgNS42MzI0MiA1LjA0NDI2IDQuMDcwNTkgNi45NjQ3NyA0LjA3MDU5QzguODg1MjkgNC4wNzA1OSAxMC40NDcxIDUuNjMyNDIgMTAuNDQ3MSA3LjU1Mjk0QzEwLjQ0NzEgOS40NzM0NSA4Ljg4NTI5IDExLjAzNTMgNi45NjQ3NyAxMS4wMzUzWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjg3OTUyIDE2LjI1ODhIMTIuMDUwNkMxMS41MyAxNC42ODQ4IDkuNTgzMzQgMTMuNjQ3MSA2Ljk2NDYyIDEzLjY0NzFDNC4zNDU4OSAxMy42NDcxIDIuNDAwMTMgMTQuNjg0OCAxLjg3OTUyIDE2LjI1ODhaTTEzLjkyOTQgMThIMFYxNy4xMjk0QzAgMTQuMDUzNiAyLjg2NDIzIDExLjkwNTkgNi45NjQ3IDExLjkwNTlDMTEuMDY2IDExLjkwNTkgMTMuOTI5NCAxNC4wNTM2IDEzLjkyOTQgMTcuMTI5NFYxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguODk3OSAxLjIzMTAxTDE3LjY2NjkgMEwxNS42NzA2IDEuOTk2MjZMMTMuNjc0NCAwTDEyLjQ0MzQgMS4yMzEwMUwxNC40Mzk2IDMuMjI3MjdMMTIuNDQzNCA1LjIyMzUyTDEzLjY3NDQgNi40NTQ1M0wxNS42NzA2IDQuNDU4MjhMMTcuNjY2OSA2LjQ1NDUzTDE4Ljg5NzkgNS4yMjM1MkwxNi45MDE2IDMuMjI3MjdMMTguODk3OSAxLjIzMTAxWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==);
  background-color: #ee635f;
}

.styles__orgSettingsUpdate___13py2,
.styles__orgRegistryAccessEnabled___BAdz0,
.styles__orgRegistryAccessDisabled___pSI3F,
.styles__orgRegistryAccessRegistryAdded___3YD0E,
.styles__orgRegistryAccessRegistryRemoved___zBDwv,
.styles__orgRegistryAccessRegistryUpdated___8BzSB {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTE3LjE0MDEgMTAuOTQwNEMxNy4xODAxIDEwLjY0MDQgMTcuMjAwMSAxMC4zMzA0IDE3LjIwMDEgMTAuMDAwNEMxNy4yMDAxIDkuNjgwMzkgMTcuMTgwMSA5LjM2MDM5IDE3LjEzMDEgOS4wNjAzOUwxOS4xNjAxIDcuNDgwMzlDMTkuMzQwMSA3LjM0MDM5IDE5LjM5MDEgNy4wNzAzOSAxOS4yODAxIDYuODcwMzlMMTcuMzYwMSAzLjU1MDM5QzE3LjI0MDEgMy4zMzAzOSAxNi45OTAxIDMuMjYwMzkgMTYuNzcwMSAzLjMzMDM5TDE0LjM4MDEgNC4yOTAzOUMxMy44ODAxIDMuOTEwMzkgMTMuMzUwMSAzLjU5MDM5IDEyLjc2MDEgMy4zNTAzOUwxMi40MDAxIDAuODEwMzlDMTIuMzYwMSAwLjU3MDM5IDEyLjE2MDEgMC40MDAzOTEgMTEuOTIwMSAwLjQwMDM5MUg4LjA4MDExQzcuODQwMTEgMC40MDAzOTEgNy42NTAxMSAwLjU3MDM5IDcuNjEwMTEgMC44MTAzOUw3LjI1MDExIDMuMzUwMzlDNi42NjAxMSAzLjU5MDM5IDYuMTIwMTEgMy45MjAzOSA1LjYzMDExIDQuMjkwMzlMMy4yNDAxMSAzLjMzMDM5QzMuMDIwMTEgMy4yNTAzOSAyLjc3MDExIDMuMzMwMzkgMi42NTAxMSAzLjU1MDM5TDAuNzQwMTEgNi44NzAzOUMwLjYyMDExIDcuMDgwMzkgMC42NjAxMSA3LjM0MDM5IDAuODYwMTEgNy40ODAzOUwyLjg5MDExIDkuMDYwMzlDMi44NDAxMSA5LjM2MDM5IDIuODAwMTEgOS42OTAzOSAyLjgwMDExIDEwLjAwMDRDMi44MDAxMSAxMC4zMTA0IDIuODIwMTEgMTAuNjQwNCAyLjg3MDExIDEwLjk0MDRMMC44NDAxMSAxMi41MjA0QzAuNjYwMTEgMTIuNjYwNCAwLjYxMDExIDEyLjkzMDQgMC43MjAxMSAxMy4xMzA0TDIuNjQwMTEgMTYuNDUwNEMyLjc2MDExIDE2LjY3MDQgMy4wMTAxMSAxNi43NDA0IDMuMjMwMTEgMTYuNjcwNEw1LjYyMDExIDE1LjcxMDRDNi4xMjAxMSAxNi4wOTA0IDYuNjUwMTEgMTYuNDEwNCA3LjI0MDExIDE2LjY1MDRMNy42MDAxMSAxOS4xOTA0QzcuNjUwMTEgMTkuNDMwNCA3Ljg0MDExIDE5LjYwMDQgOC4wODAxMSAxOS42MDA0SDExLjkyMDFDMTIuMTYwMSAxOS42MDA0IDEyLjM2MDEgMTkuNDMwNCAxMi4zOTAxIDE5LjE5MDRMMTIuNzUwMSAxNi42NTA0QzEzLjM0MDEgMTYuNDEwNCAxMy44ODAxIDE2LjA5MDQgMTQuMzcwMSAxNS43MTA0TDE2Ljc2MDEgMTYuNjcwNEMxNi45ODAxIDE2Ljc1MDQgMTcuMjMwMSAxNi42NzA0IDE3LjM1MDEgMTYuNDUwNEwxOS4yNzAxIDEzLjEzMDRDMTkuMzkwMSAxMi45MTA0IDE5LjM0MDEgMTIuNjYwNCAxOS4xNTAxIDEyLjUyMDRMMTcuMTQwMSAxMC45NDA0Wk0xMC4wMDAxIDEzLjYwMDRDOC4wMjAxMSAxMy42MDA0IDYuNDAwMTEgMTEuOTgwNCA2LjQwMDExIDEwLjAwMDRDNi40MDAxMSA4LjAyMDM5IDguMDIwMTEgNi40MDAzOSAxMC4wMDAxIDYuNDAwMzlDMTEuOTgwMSA2LjQwMDM5IDEzLjYwMDEgOC4wMjAzOSAxMy42MDAxIDEwLjAwMDRDMTMuNjAwMSAxMS45ODA0IDExLjk4MDEgMTMuNjAwNCAxMC4wMDAxIDEzLjYwMDRaIgogICAgZmlsbD0id2hpdGUiIC8+Cjwvc3ZnPg==);
  background-color: #71cfff;
}

.styles__noAction___V5bOl {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTcuMTQyOSAxLjcxNDI5SDE0LjU3MTRWMEgxMi44NTcxVjUuMTQyODZIMTQuNTcxNFYzLjQyODU3SDE3LjE0MjlWMTYuMjg1N0gxLjcxNDI5VjMuNDI4NTdIMy40Mjg1N1YxLjcxNDI5SDEuNzE0MjlDMC43NjggMS43MTQyOSAwIDIuNDgyMjkgMCAzLjQyODU3VjE2LjI4NTdDMCAxNy4yMzIgMC43NjggMTggMS43MTQyOSAxOEgxNy4xNDI5QzE4LjA4OTEgMTggMTguODU3MSAxNy4yMzIgMTguODU3MSAxNi4yODU3VjMuNDI4NTdDMTguODU3MSAyLjQ4MjI5IDE4LjA4OTEgMS43MTQyOSAxNy4xNDI5IDEuNzE0MjlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUuOTk5OTMgMy40Mjg1N0gxMS45OTk5VjEuNzE0MjlINS45OTk5M1YwSDQuMjg1NjRWNS4xNDI4Nkg1Ljk5OTkzVjMuNDI4NTdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuODU3MjggNi44NTcwOUgzLjQyODcxVjEwLjI4NTdINi44NTcyOFY2Ljg1NzA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS4xNDI0IDYuODU3MDlINy43MTM4N1YxMC4yODU3SDExLjE0MjRWNi44NTcwOVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuMDAwNSAxMC4yODU3SDE1LjQyOTFWNi44NTcwOUgxMi4wMDA1VjEwLjI4NTdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNDI4NzEgMTQuNTcxNUg2Ljg1NzI4VjExLjE0MjlIMy40Mjg3MVYxNC41NzE1WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjcxMzg3IDE0LjU3MTVIMTEuMTQyNFYxMS4xNDI5SDcuNzEzODdWMTQuNTcxNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
  background-color: #d7dade;
}

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

.styles__action___PhCVL {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  min-height: 80px;
  margin: 10px 0;
}

.styles__action___PhCVL .styles__actionTail___zS5aJ {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    left: 18px;
    top: 0;
    padding: 48px 0 0
  }

.styles__action___PhCVL .styles__actionTail___zS5aJ::after {
  display: inline-block;
  content: '';
  width: 2px;
  height: 100%;
  background-color: #f2f3f5;
}

.styles__action___PhCVL.styles__lastItem___16guE {
  padding-bottom: 50px;
}

.styles__action___PhCVL.styles__lastItem___16guE .styles__actionTail___zS5aJ::after {
      display: none;
}

.styles__action___PhCVL .styles__actionIcon___RT5mC {
    padding-right: 30px;
}

.styles__action___PhCVL .styles__actionContent___3hN73 .styles__actor___UDsY3 {
      font-weight: 600;
      font-size: 14px;
    }

.styles__action___PhCVL .styles__actionContent___3hN73 .styles__description___3SmOm {
      font-size: 14px;
    }

.styles__action___PhCVL .styles__actionContent___3hN73 .styles__description___3SmOm span {
        font-weight: 600;
      }

.styles__action___PhCVL .styles__actionContent___3hN73 .styles__date___xAg4B {
      margin-top: 2px;
      font-size: 12px;
      color: #5a6774;
    }

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

.styles__dropdown___3805q {
  width: 220px;
  margin-right: 20px;
}

@charset "UTF-8";
/* stylelint-disable */
.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
  border-color: #ccc;
  border-style: solid;
  border-width: 3px 3px 0 0;
  content: "";
  display: block;
  height: 9px;
  position: absolute;
  top: 6px;
  width: 9px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  margin-left: -4px;
  position: absolute;
  width: 0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
  border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  border-top: none;
  border-bottom-color: #f0f0f0;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  top: 0;
}
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
  bottom: 0;
  margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
  border-bottom: none;
  border-top-color: #fff;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
  bottom: 0;
}
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}
.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
  width: 100%;
}
.react-datepicker {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 12.8px;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative;
}
.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time, .react-datepicker--time-only .react-datepicker__time-box {
  border-bottom-left-radius: 4.8px;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 4.8px;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__triangle {
  position: absolute;
  left: 50px;
}
.react-datepicker-popper {
  z-index: 1;
}
.react-datepicker-popper[data-placement^=bottom] {
  padding-top: 10px;
}
.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
  left: auto;
  right: 50px;
}
.react-datepicker-popper[data-placement^=top] {
  padding-bottom: 10px;
}
.react-datepicker-popper[data-placement^=right] {
  padding-left: 8px;
}
.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}
.react-datepicker-popper[data-placement^=left] {
  padding-right: 8px;
}
.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
  left: 42px;
  right: auto;
}
.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 4.8px;
  border-top-left-radius: 0.3rem;
  padding: 8px 0;
  position: relative;
}
.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
  border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
  border-top-right-radius: 4.8px;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px;
}
.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 15.104px;
  font-size: 0.944rem;
}
.react-datepicker-time__header {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.react-datepicker__navigation {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 2px;
  padding: 0;
  border: none;
  z-index: 1;
  height: 32px;
  width: 32px;
  text-indent: -999em;
  overflow: hidden;
}
.react-datepicker__navigation--previous {
  left: 2px;
}
.react-datepicker__navigation--next {
  right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 85px;
}
.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__navigation--years-previous {
  top: 4px;
}
.react-datepicker__navigation--years-upcoming {
  top: -4px;
}
.react-datepicker__navigation:hover *::before {
  border-color: #a6a6a6;
}
.react-datepicker__navigation-icon {
  position: relative;
  top: -1px;
  font-size: 20px;
  width: 0;
}
.react-datepicker__navigation-icon--next {
  left: -2px;
}
.react-datepicker__navigation-icon--next::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  left: -7px;
}
.react-datepicker__navigation-icon--previous {
  right: -2px;
}
.react-datepicker__navigation-icon--previous::before {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
  right: -7px;
}
.react-datepicker__month-container {
  float: left;
}
.react-datepicker__year {
  margin: 6.4px;
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__year-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
  display: inline-block;
  width: 64px;
  width: 4rem;
  margin: 2px;
}
.react-datepicker__month {
  margin: 6.4px;
  margin: 0.4rem;
  text-align: center;
}
.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 64px;
  width: 4rem;
  margin: 2px;
}
.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left;
}
.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button, .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
  -moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block;
}
.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px;
}
.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -72px;
  top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white;
  border-bottom-right-radius: 4.8px;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center;
  border-bottom-right-radius: 4.8px;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + 0.85rem);
  overflow-y: scroll;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent;
}
.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 27.2px;
  width: 1.7rem;
  line-height: 27.2px;
  line-height: 1.7rem;
  text-align: center;
  margin: 2.656px;
  margin: 0.166rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day-names, .react-datepicker__week {
  white-space: nowrap;
}
.react-datepicker__day-names {
  margin-bottom: -8px;
}
.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 27.2px;
  width: 1.7rem;
  line-height: 27.2px;
  line-height: 1.7rem;
  text-align: center;
  margin: 2.656px;
  margin: 0.166rem;
}
.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range, .react-datepicker__quarter--selected, .react-datepicker__quarter--in-selecting-range, .react-datepicker__quarter--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover, .react-datepicker__quarter--selected:hover, .react-datepicker__quarter--in-selecting-range:hover, .react-datepicker__quarter--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__month--disabled, .react-datepicker__quarter--disabled {
  color: #ccc;
  pointer-events: none;
}
.react-datepicker__month--disabled:hover, .react-datepicker__quarter--disabled:hover {
  cursor: default;
  background-color: transparent;
}
.react-datepicker__day, .react-datepicker__month-text, .react-datepicker__quarter-text, .react-datepicker__year-text {
  cursor: pointer;
}
.react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0;
}
.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today {
  font-weight: bold;
}
.react-datepicker__day--highlighted, .react-datepicker__month-text--highlighted, .react-datepicker__quarter-text--highlighted, .react-datepicker__year-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff;
}
.react-datepicker__day--highlighted:hover, .react-datepicker__month-text--highlighted:hover, .react-datepicker__quarter-text--highlighted:hover, .react-datepicker__year-text--highlighted:hover {
  background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1, .react-datepicker__month-text--highlighted-custom-1, .react-datepicker__quarter-text--highlighted-custom-1, .react-datepicker__year-text--highlighted-custom-1 {
  color: magenta;
}
.react-datepicker__day--highlighted-custom-2, .react-datepicker__month-text--highlighted-custom-2, .react-datepicker__quarter-text--highlighted-custom-2, .react-datepicker__year-text--highlighted-custom-2 {
  color: green;
}
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff;
}
.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover, .react-datepicker__month-text--selected:hover, .react-datepicker__month-text--in-selecting-range:hover, .react-datepicker__month-text--in-range:hover, .react-datepicker__quarter-text--selected:hover, .react-datepicker__quarter-text--in-selecting-range:hover, .react-datepicker__quarter-text--in-range:hover, .react-datepicker__year-text--selected:hover, .react-datepicker__year-text--in-selecting-range:hover, .react-datepicker__year-text--in-range:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2579ba;
  color: #fff;
}
.react-datepicker__day--keyboard-selected:hover, .react-datepicker__month-text--keyboard-selected:hover, .react-datepicker__quarter-text--keyboard-selected:hover, .react-datepicker__year-text--keyboard-selected:hover {
  background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range), .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range):not(.react-datepicker__month-text--in-range):not(.react-datepicker__quarter-text--in-range):not(.react-datepicker__year-text--in-range) {
  background-color: rgba(33, 107, 165, .5);
}
.react-datepicker-cssmodules__react-datepicker__month--selecting-range___Bpx6w .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),
.react-datepicker-cssmodules__react-datepicker__month--selecting-range___Bpx6w .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),
.react-datepicker-cssmodules__react-datepicker__month--selecting-range___Bpx6w .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range),
.react-datepicker-cssmodules__react-datepicker__month--selecting-range___Bpx6w .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__month-text--in-selecting-range):not(.react-datepicker__quarter-text--in-selecting-range):not(.react-datepicker__year-text--in-selecting-range) {
  background-color: #f0f0f0;
  color: #000;
}
.react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled {
  cursor: default;
  color: #ccc;
}
.react-datepicker__day--disabled:hover, .react-datepicker__month-text--disabled:hover, .react-datepicker__quarter-text--disabled:hover, .react-datepicker__year-text--disabled:hover {
  background-color: transparent;
}
.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover, .react-datepicker__quarter-text.react-datepicker__month--selected:hover, .react-datepicker__quarter-text.react-datepicker__month--in-range:hover, .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover, .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
  background-color: #216ba5;
}
.react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover {
  background-color: #f0f0f0;
}
.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
.react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem;
  position: relative;
}
.react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover {
  cursor: pointer;
}
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  right: -16px;
  top: 0;
}
.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae;
}
.react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover {
  cursor: pointer;
}
.react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll;
}
.react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 4.8px;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 4.8px;
  border-top-right-radius: 0.3rem;
}
.react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 4.8px;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 4.8px;
  border-bottom-right-radius: 0.3rem;
}
.react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover {
  background-color: #ccc;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3;
}
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3;
}
.react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px;
}
.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0 6px 0 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "×";
}
.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left;
}
.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .8);
  left: 0;
  top: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name {
  width: 48px;
  width: 3rem;
  line-height: 48px;
  line-height: 3rem;
}
@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem;
  }
}
.react-datepicker__portal .react-datepicker__current-month, .react-datepicker__portal .react-datepicker-time__header {
  font-size: 23.04px;
  font-size: 1.44rem;
}
/* stylelint-enable */

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

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

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

.styles__disabled___2c2Kz {
  cursor: not-allowed;
}

.styles__dateInput___1Ii7i {
  border: 1px solid #e9ebee;
  color: #26323f;
  padding: 5px 8px;
}

.styles__datePickerContainer___20CCS .react-datepicker__input-container > .react-datepicker-ignore-onclickoutside,
    .styles__datePickerContainer___20CCS .react-datepicker__input-container > .react-datepicker-ignore-onclickoutside:focus {
      border-radius: 0;
      border: 1px solid #007bff;
      outline: none;
    }

.styles__datePickerContainer___20CCS .react-datepicker__header {
      background-color: #ffffff;
      border-bottom: none;
    }

.styles__datePickerContainer___20CCS .react-datepicker__day-name {
      color: #5a6774;
    }

.styles__datePickerContainer___20CCS .react-datepicker__month {
      margin-top: 0;
    }

.styles__datePickerContainer___20CCS .react-datepicker__current-month {
      text-transform: uppercase;
      color: #5a6774;
      font-weight: 500;
      font-size: 12px;
      margin-bottom: 8px;
      padding-top: 6px;
    }

.styles__datePickerContainer___20CCS .react-datepicker__triangle {
      display: none;
    }

.styles__datePickerContainer___20CCS .react-datepicker__navigation {
      border: 5px solid transparent;
      top: 17px;
      height: 8px;
    }

.styles__datePickerContainer___20CCS .react-datepicker__navigation--previous {
      border-right-color: #5a6774;
    }

.styles__datePickerContainer___20CCS .react-datepicker__navigation--next {
      border-left-color: #5a6774;
    }

.styles__datePickerContainer___20CCS .react-datepicker__day {
      border-radius: 50%;
      outline: none
    }

.styles__datePickerContainer___20CCS .react-datepicker__day.react-datepicker__day--selected {
  background-color: #007bff;
}

.styles__datePickerContainer___20CCS .react-datepicker__day:hover {
  border-radius: 50%;
}

.styles__datePickerContainer___20CCS .react-datepicker__day--in-range {
      background-color: #c4f0ff;
      color: #26323f;
    }

.styles__datePickerContainer___20CCS .react-datepicker__day--range-start {
      background-color: #007bff;
      color: #ffffff;
    }

.styles__datePickerContainer___20CCS .react-datepicker__day--range-start.react-datepicker__day--in-selecting-range,
    .styles__datePickerContainer___20CCS .react-datepicker__day--range-end.react-datepicker__day--in-selecting-range {
      background-color: #c4f0ff;
      color: #26323f;
    }

.styles__datePickerContainer___20CCS .react-datepicker__day--in-selecting-range {
      background-color: #c4f0ff;
    }

.styles__datePickerContainer___20CCS .react-datepicker__day--selecting-range-start.react-datepicker__day--in-selecting-range,
    .styles__datePickerContainer___20CCS .react-datepicker__day--selecting-range-end.react-datepicker__day--in-selecting-range {
      background-color: #007bff;
      color: #ffffff;
    }

.styles__datePickerContainer___20CCS .react-datepicker__day--range-start.react-datepicker__day--range-end,
    .styles__datePickerContainer___20CCS .react-datepicker__day--range-end {
      background-color: #007bff;
      color: #ffffff;
    }

.styles__calendar___2qZcr {
  border-radius: 0;
  border: 1px solid #e9ebee;
}

.styles__datePickerWrapper___1N9NT {
  position: relative
}

.styles__datePickerWrapper___1N9NT::after {
  position: absolute;
  top: 8px;
  left: 7px;
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS4wNDc2IDEuOTA0NzZIMTYuMTkwNVYwSDE0LjI4NTdWNS43MTQyOUgxNi4xOTA1VjMuODA5NTJIMTkuMDQ3NlYxOC4wOTUySDEuOTA0NzZWMy44MDk1MkgzLjgwOTUyVjEuOTA0NzZIMS45MDQ3NkMwLjg1MzMzMyAxLjkwNDc2IDAgMi43NTgxIDAgMy44MDk1MlYxOC4wOTUyQzAgMTkuMTQ2NyAwLjg1MzMzMyAyMCAxLjkwNDc2IDIwSDE5LjA0NzZDMjAuMDk5IDIwIDIwLjk1MjQgMTkuMTQ2NyAyMC45NTI0IDE4LjA5NTJWMy44MDk1MkMyMC45NTI0IDIuNzU4MSAyMC4wOTkgMS45MDQ3NiAxOS4wNDc2IDEuOTA0NzZaIiBmaWxsPSIjNzU3NTc1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi42NjY3MiAzLjgwOTUySDEzLjMzMzRWMS45MDQ3Nkg2LjY2NjcyVjBINC43NjE5NlY1LjcxNDI5SDYuNjY2NzJWMy44MDk1MloiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjYxOTA5IDcuNjE5MDJIMy44MDk1N1YxMS40Mjg1SDcuNjE5MDlWNy42MTkwMloiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi4zODA5IDcuNjE5MDJIOC41NzE0MVYxMS40Mjg1SDEyLjM4MDlWNy42MTkwMloiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4zMzM0IDExLjQyODVIMTcuMTQyOVY3LjYxOTAySDEzLjMzMzRWMTEuNDI4NVoiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjgwOTU3IDE2LjE5MDVINy42MTkwOVYxMi4zODFIMy44MDk1N1YxNi4xOTA1WiIgZmlsbD0iIzc1NzU3NSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNTcxNDEgMTYuMTkwNUgxMi4zODA5VjEyLjM4MUg4LjU3MTQxVjE2LjE5MDVaIiBmaWxsPSIjNzU3NTc1Ii8+Cjwvc3ZnPgoK);
}

.styles__dateInputField___2Qdnv {
  height: 36px;
  width: 140px;
  padding-left: 36px;
  cursor: pointer;
  caret-color: transparent;
}

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

.styles__calendarFilterWrapper___39kPY {
  position: relative;
  display: inline-block;
}

.styles__selectedDateRange___1RTeg {
  font-weight: 600;
  border-bottom: 1px solid #90a0ac;
  padding: 8px 25px 8px 12px;
  width: 340px;
  position: relative;
  cursor: pointer
}

.styles__selectedDateRange___1RTeg::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 16px;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #999999;
  -webkit-transition: border-top-color 0.3s;
  transition: border-top-color 0.3s;
}

.styles__selectedDateRange___1RTeg:hover::after {
  border-top-color: #5a6774;
}

.styles__calendarFilterDropdown___1dy2V {
  display: inline-block;
  padding: 10px;
  background-color: #fafafb;
  -webkit-box-shadow: 0 2px 5px 0 #d4d4d4;
          box-shadow: 0 2px 5px 0 #d4d4d4;
  z-index: 999;
  position: absolute;
  min-width: 485px;
  right: 0;
}

.styles__dateRangeDropdown___2av8K {
  height: 30px;
  width: 260px;
  margin-bottom: 15px;
}

.styles__dateRangeDropdown___2av8K .Select-control {
      height: 28px;
    }

.styles__dateRangeDropdown___2av8K .Select-control .Select-multi-value-wrapper {
        height: 28px;
      }

.styles__dateRangeDropdown___2av8K .Select-control .Select-multi-value-wrapper .Select-value {
          line-height: 30px;
        }

.styles__dateRangeDropdown___2av8K .Select-menu-outer .Select-option {
      padding: 6px 10px;
    }

.styles__calendarWrapper___3JhBF .react-datepicker__month-container {
      border-right: 1px solid #e9ebee;
    }

.styles__calendarWrapper___3JhBF .react-datepicker__month-container ~ .react-datepicker__month-container {
      border-right: none;
    }

.styles__calendarWrapper___3JhBF .react-datepicker__current-month {
      font-size: 13px;
    }

.styles__calendarWrapper___3JhBF .react-datepicker__day-name,
    .styles__calendarWrapper___3JhBF .react-datepicker__day {
      font-size: 13px;
      width: 26px;
      line-height: 26px;
    }

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

.styles__scrollButton___1VSUY {
  height: 58px;
  width: 58px;
  border-radius: 50%;
  -webkit-box-shadow:
    0 -1px 2px rgba(11, 33, 74, .05),
    0 2px 3px rgba(11, 33, 74, .15);
          box-shadow:
    0 -1px 2px rgba(11, 33, 74, .05),
    0 2px 3px rgba(11, 33, 74, .15);
  -webkit-transition: -webkit-box-shadow 0.3s;
  transition: -webkit-box-shadow 0.3s;
  transition: box-shadow 0.3s;
  transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
  cursor: pointer;
  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;
  background-color: #ffffff;
}

.styles__scrollButton___1VSUY img {
    width: 28px;
    height: 18px;
  }

.styles__scrollButton___1VSUY:hover {
  -webkit-box-shadow:
      0 -1px 2px rgba(11, 33, 74, .2),
      0 2px 3px rgba(11, 33, 74, .3);
          box-shadow:
      0 -1px 2px rgba(11, 33, 74, .2),
      0 2px 3px rgba(11, 33, 74, .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 */

.styles__card___2jLPy {
  min-height: 540px;
  padding-bottom: 60px;
}

.styles__activiesList___1jsgy {
  position: relative;
  margin: 40px 0 0 20px;
}

.styles__activiesList___1jsgy > div > div {
    display: block;
  }

.styles__filters___1jC5Y {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.styles__initialDataLoader___QsAxY {
  padding-top: 150px;
  text-align: center;
}

.styles__moreDataLoader___2QtJO {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 10px;
  text-align: center;
}

.styles__noData___3y5oi {
  max-width: 400px;
  margin: 0 auto;
  padding-top: 130px;
  text-align: center;
}

.styles__noData___3y5oi .styles__icon___u88fI {
    width: 63px;
    height: 63px;
    margin: 0 auto;
    padding: 18px;
    background-color: #f2f3f5;
    border-radius: 50%;
  }

.styles__noData___3y5oi .styles__icon___u88fI img {
      height: 30px;
      width: 30px;
    }

.styles__noData___3y5oi .styles__desc___9Guz0 {
    margin-top: 12px;
    font-size: 18px;
    color: #768491;
  }

.styles__showMore___3HISb {
  text-align: center;
  color: #007bff;
  cursor: pointer;
  padding-top: 30px;
}

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

.styles__noAction___3KRxs .styles__iconWrapper___2zYTl {
    padding-right: 30px;
  }

.styles__noAction___3KRxs .styles__text___2Qz5f {
    color: #90a0ac;
    size: 14px;
  }

.styles__scrollUpButton___2o8NS {
  position: absolute;
  bottom: -30px;
  right: 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___3Q6rd {
  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___1PLoD {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__header___3oh7G {
  background-color: #ffffff;
}

.styles__tabsSection___2Gs_c {
  background-color: #ffffff;
  border-bottom: solid 1px #e0e4e7;
  margin-top: -20px;
  margin-bottom: 32px;
}

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

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

.styles__tabsSection___2Gs_c .styles__tab___1cDnv:hover {
  color: #2496ed;
}

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

.styles__tabContent___2fB3Z {
  margin-top: 24px;
  margin-bottom: 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___308Vt {
  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___1Mmf1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__dropzone___3DLaZ {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #8f9ea8;
  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;
  min-height: 200px;
  text-align: center;
  border: dashed 2px #c0c9ce;
  border-radius: 4px
}

.styles__dropzone___3DLaZ > * {
  margin-bottom: 8px;
}

.styles__active___1MAad {
  background-color: #f7f7f8;
  border: solid 2px #2496ed;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.styles__reject___23aor {
  background-color: #f7f7f8;
  border: solid 2px #e12b0c;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.styles__importText___1VpBa {
  font-weight: 600;
  color: #17191e;
}

.styles__successText___3XWOs {
  font-weight: 600;
  color: #17222f;
}

.styles__dragText___3ihrN {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  margin-bottom: 16px;
  margin-bottom: 1rem;
}

.styles__error___2xR5i {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #e12b0c;
}

.styles__button___3hUVz {
  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___1H2Xu {
  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___1rMBK {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__repoRow___1vo4h {
  margin-top: 16px;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  margin-right: 16px;
  overflow: hidden;
}

.styles__repoRow___1vo4h svg + span {
    margin-left: 4px;
  }

.styles__repoRow___1vo4h:hover {
  -webkit-box-shadow: 0 1px 6px 0 #c0c0c0;
          box-shadow: 0 1px 6px 0 #c0c0c0;
}

.styles__repoRow___1vo4h .styles__reponame___18yGM {
    font-weight: 700;
}

.styles__repoCard___2bqxx {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__repoCard___2bqxx .styles__name___2W8lT {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

.styles__repoCard___2bqxx .styles__updatedAt___-D5cR {
    font-size: 12px;
    line-height: 16px;
    color: #27343b;
    color: #70787d;
  }

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

.styles__repoCard___2bqxx .styles__right___3IqHY div {
      width: 75px;
    }

.styles__repoCard___2bqxx .styles__right___3IqHY svg.styles__nonMuiIcon___2DOhY {
  width: 18px;
  height: 18px;
}

.styles__repoCard___2bqxx .styles__right___3IqHY svg.styles__nonMuiIcon___2DOhY {
  fill: #5a6774;
}

.styles__repoCard___2bqxx .styles__right___3IqHY span {
      font-size: 12px;
      line-height: 16px;
      color: #27343b;
      font-weight: 600;
      font-size: 14px;
      color: #5a6774;
    }

.styles__repoCard___2bqxx .styles__right___3IqHY .styles__starCount___1A7RN {
      border: 0;
      background: #ffffff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

.styles__repoCard___2bqxx .styles__right___3IqHY .styles__starCount___1A7RN span {
        padding: 0;
      }

.styles__repoCard___2bqxx .styles__right___3IqHY .styles__repoStatus___3NpwZ {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: 100px;
    }

.styles__repoCard___2bqxx .styles__right___3IqHY .styles__scanStatus___7FLOQ {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      width: 130px;
    }

.styles__repoCard___2bqxx .styles__right___3IqHY .styles__disabled___iwA1d span {
        color: #a5b1ba;
      }

.styles__repoCard___2bqxx .styles__right___3IqHY .styles__disabled___iwA1d svg {
        fill: #a5b1ba;
      }

@media only screen and (max-width: 600px) {
    .styles__right___3IqHY .styles__starCount___1A7RN {
      width: 0;
      visibility: hidden;
    }
    .styles__right___3IqHY .styles__repoStatus___3NpwZ {
      width: 0;
      visibility: hidden;
    }
    .styles__right___3IqHY .styles__pullCount___2TpFZ {
      width: 0;
      visibility: hidden;
    }
}

@media only screen and (max-width: 480px) {
  .styles__right___3IqHY {
    width: 0;
    visibility: hidden;
  }
}

/* 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___33-KE {
  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___jbmIk {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__link___2VnqT {
  cursor: pointer;
  color: #2496ed;
}

.styles__title___1pH-7 {
  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__title___1pH-7 .styles__searchInput___2TRjx {
    width: 238px;
    height: 36px;
  }

.styles__repoInfoCard___39Xi3 {
  padding: 20px;
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.styles__repoInfoCard___39Xi3 img {
    height: 50px;
    margin-right: 32px;
  }

.styles__loading___LaoxC {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 48px 0;
}

.styles__items___23Bxs {
  margin-bottom: 32px;
}

/* 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___2dtVO {
  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___T-7oT {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

.styles__title___2c5y0 button {
    margin: 0;
    padding: 0 12px;
    border-radius: 4px;
  }

.styles__title___2c5y0 .styles__searchInput___1IPMk {
    width: 238px;
    height: 36px;
  }

.styles__pagination___aBXcI {
  margin-top: 32px;
}

.styles__teamCardLink___2mZBK {
  margin-bottom: 10px;
  text-decoration: none;
  display: block;
}

.styles__listItem___1KbLd {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}

.styles__listItem___1KbLd > * {
  lost-column-cycle: 3;
}

.styles__listItem___1KbLd > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(24.975% - 9px);
  max-width: calc(24.975% - 9px);
  width: calc(24.975% - 9px);
}

.styles__listItem___1KbLd > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__listItem___1KbLd > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__listItem___1KbLd > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__listItem___1KbLd > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__listItem___1KbLd > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__listItem___1KbLd > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__listItem___1KbLd > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__listItem___1KbLd > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(24.975% - 9px);
  max-width: calc(24.975% - 9px);
  width: calc(24.975% - 9px);
}

.styles__listItem___1KbLd > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__listItem___1KbLd > *:nth-child(3):last-child {
  margin-right: 0;
}

.styles__listItem___1KbLd > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__listItem___1KbLd .styles__action___MTdU4 {
    height: 20px;
    margin: 0;
    padding: 0;
    line-height: 20px;
    min-height: 20px;
}

.styles__listItem___1KbLd .styles__action___MTdU4 svg {
      top: 0;
      width: 20px !important;
      height: 20px !important;
    }

.styles__listItem___1KbLd .styles__name___3o4KL {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.styles__listHeader___2Xbfq {

  font-size: 14px;

  line-height: 20px;

  color: #27343b;

  font-weight: 600;

  padding-left: 24px;

  text-transform: uppercase;

  color: #f7f8f9;

  white-space: nowrap;
  padding: 0 28px;
}

.styles__listHeader___2Xbfq div {
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 12px;
    color: #8f9ea8;
  }

.styles__loading___2Q7Re {
  padding: 48px 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___jQMFK {
  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___1IbVH {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__header___nJA4f {
  background-color: #ffffff;
  padding-top: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid #e0e4e7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__header___nJA4f .styles__title___1PTT_ {
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: normal;
    font-weight: bold;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

.styles__header___nJA4f .styles__descriptionIcon___2imfT {
    position: relative;
    top: 5px;
    right: 7px;
  }

.styles__header___nJA4f .styles__noDescription___1uva9 {
    color: #c0c9ce;
    font-style: italic;
    cursor: pointer;
  }

.styles__header___nJA4f .styles__noDescription___1uva9 a {
      text-decoration: none;
    }

.styles__tabsSection___2J_ZQ {
  background-color: #ffffff;
  border-bottom: solid 1px #e0e4e7;
  margin-top: -20px;
}

.styles__tabsSection___2J_ZQ .styles__tabs___2k-8d {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

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

.styles__tabsSection___2J_ZQ .styles__tab___2hfCp:hover {
  color: #2496ed;
}

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

.styles__content___2zlo3 {
  margin-top: 24px;
  margin-bottom: 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___sYdjI {
  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___jKhvM {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__wrapper___3QOs7 {
  max-width: 100%;
  margin: 12px 0;
}

.styles__cardContainer___3bKm6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.styles__icon___24bmT {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.styles__cardBody___1IISh {
  margin-left: 16px;
}

.styles__cardText___GKzBQ {
  font-size: 14px;
  line-height: 20px;
  color: #27343b;
}

.styles__cardLink___299SW {
  color: #254356;
  display: block;
  font-size: 12px;
  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.
*/

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

@keyframes styles__fadein___3HVmx {
  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.
*/

.styles__main___2fYQv.styles__notRunning_fill___3ibKG {/* stylelint-disable declaration-colon-space-before */
  fill : #1aaaf8;/* stylelint-enable */
}

.styles__main___2fYQv.styles__failed_fill___2-kSX {/* stylelint-disable declaration-colon-space-before */
  fill : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__deployed_fill___3Egmg {/* stylelint-disable declaration-colon-space-before */
  fill : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__partlyRunning_fill___3p-DF {/* stylelint-disable declaration-colon-space-before */
  fill : #f7d933;/* stylelint-enable */
}

.styles__main___2fYQv.styles__canceled_fill___2UUhV {/* stylelint-disable declaration-colon-space-before */
  fill : #b6bec7;/* stylelint-enable */
}

.styles__main___2fYQv.styles__running_fill___1M1Xw {/* stylelint-disable declaration-colon-space-before */
  fill : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__succeeded_fill___V8qBq {/* stylelint-disable declaration-colon-space-before */
  fill : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__stopped_fill___366eC {/* stylelint-disable declaration-colon-space-before */
  fill : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__empty_fill___2upwd {/* stylelint-disable declaration-colon-space-before */
  fill : #9eb3d5;/* stylelint-enable */
}

.styles__main___2fYQv.styles__emptyCluster_fill___31clH {/* stylelint-disable declaration-colon-space-before */
  fill : #9eb3d5;/* stylelint-enable */
}

.styles__main___2fYQv.styles__terminated_fill___18mZF {/* stylelint-disable declaration-colon-space-before */
  fill : #ad85ff;/* stylelint-enable */
}

.styles__main___2fYQv.styles__unreachable_fill___2GcD3 {/* stylelint-disable declaration-colon-space-before */
  fill : #9eb3d5;/* stylelint-enable */
}

.styles__main___2fYQv.styles__pending_fill___1FOLZ {/* stylelint-disable declaration-colon-space-before */
  fill : #bddff0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__inProgress_fill___2dU78 {/* stylelint-disable declaration-colon-space-before */
  fill : #f7d933;/* stylelint-enable */
}

.styles__main___2fYQv.styles__canceling_fill___1BzK8 {/* stylelint-disable declaration-colon-space-before */
  fill : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__success_fill___1B-IJ {/* stylelint-disable declaration-colon-space-before */
  fill : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__initialized_fill___18UwF {/* stylelint-disable declaration-colon-space-before */
  fill : #1aaaf8;/* stylelint-enable */
}

.styles__main___2fYQv.styles__active_fill___l6IG7 {/* stylelint-disable declaration-colon-space-before */
  fill : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__pendingDelete_fill___3ics1 {/* stylelint-disable declaration-colon-space-before */
  fill : #ffc400;/* stylelint-enable */
}

.styles__main___2fYQv.styles__locked_fill___ZPjsx {/* stylelint-disable declaration-colon-space-before */
  fill : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__readable_fill___2PTjN {/* stylelint-disable declaration-colon-space-before */
  fill : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__writable_fill___VR4pq {/* stylelint-disable declaration-colon-space-before */
  fill : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__deploying_fill___276fl {/* stylelint-disable declaration-colon-space-before */
  fill : #00cbca;/* stylelint-enable */
}

.styles__main___2fYQv.styles__unavailable_fill___24_C2 {/* stylelint-disable declaration-colon-space-before */
  fill : #9967ff;/* stylelint-enable */
}

.styles__main___2fYQv.styles__notRunning_color___p6ZVB {/* stylelint-disable declaration-colon-space-before */
  color : #1aaaf8;/* stylelint-enable */
}

.styles__main___2fYQv.styles__failed_color___TX70K {/* stylelint-disable declaration-colon-space-before */
  color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__deployed_color___2Dktp {/* stylelint-disable declaration-colon-space-before */
  color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__partlyRunning_color___2uUMr {/* stylelint-disable declaration-colon-space-before */
  color : #f7d933;/* stylelint-enable */
}

.styles__main___2fYQv.styles__canceled_color___20rSz {/* stylelint-disable declaration-colon-space-before */
  color : #b6bec7;/* stylelint-enable */
}

.styles__main___2fYQv.styles__running_color___19ap0 {/* stylelint-disable declaration-colon-space-before */
  color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__succeeded_color___3VFVv {/* stylelint-disable declaration-colon-space-before */
  color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__stopped_color___3iBW2 {/* stylelint-disable declaration-colon-space-before */
  color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__empty_color___2O_a3 {/* stylelint-disable declaration-colon-space-before */
  color : #9eb3d5;/* stylelint-enable */
}

.styles__main___2fYQv.styles__emptyCluster_color___1QopG {/* stylelint-disable declaration-colon-space-before */
  color : #9eb3d5;/* stylelint-enable */
}

.styles__main___2fYQv.styles__terminated_color___2YlQx {/* stylelint-disable declaration-colon-space-before */
  color : #ad85ff;/* stylelint-enable */
}

.styles__main___2fYQv.styles__unreachable_color___1og0Z {/* stylelint-disable declaration-colon-space-before */
  color : #9eb3d5;/* stylelint-enable */
}

.styles__main___2fYQv.styles__pending_color___Qjyf_ {/* stylelint-disable declaration-colon-space-before */
  color : #bddff0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__inProgress_color___2V0lG {/* stylelint-disable declaration-colon-space-before */
  color : #f7d933;/* stylelint-enable */
}

.styles__main___2fYQv.styles__canceling_color___l0G4U {/* stylelint-disable declaration-colon-space-before */
  color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__success_color___27TH4 {/* stylelint-disable declaration-colon-space-before */
  color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__initialized_color___iHa0i {/* stylelint-disable declaration-colon-space-before */
  color : #1aaaf8;/* stylelint-enable */
}

.styles__main___2fYQv.styles__active_color___2yOp8 {/* stylelint-disable declaration-colon-space-before */
  color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__pendingDelete_color___3lbiH {/* stylelint-disable declaration-colon-space-before */
  color : #ffc400;/* stylelint-enable */
}

.styles__main___2fYQv.styles__locked_color___gqUvS {/* stylelint-disable declaration-colon-space-before */
  color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__readable_color___3vqM0 {/* stylelint-disable declaration-colon-space-before */
  color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__writable_color___Ylh_W {/* stylelint-disable declaration-colon-space-before */
  color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__deploying_color___QocxW {/* stylelint-disable declaration-colon-space-before */
  color : #00cbca;/* stylelint-enable */
}

.styles__main___2fYQv.styles__unavailable_color___umZ_E {/* stylelint-disable declaration-colon-space-before */
  color : #9967ff;/* stylelint-enable */
}

.styles__main___2fYQv.styles__notRunning_border-color___1i6ZU {/* stylelint-disable declaration-colon-space-before */
  border-color : #1aaaf8;/* stylelint-enable */
}

.styles__main___2fYQv.styles__failed_border-color___3e4OQ {/* stylelint-disable declaration-colon-space-before */
  border-color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__deployed_border-color___1Nlh6 {/* stylelint-disable declaration-colon-space-before */
  border-color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__partlyRunning_border-color___d5i8H {/* stylelint-disable declaration-colon-space-before */
  border-color : #f7d933;/* stylelint-enable */
}

.styles__main___2fYQv.styles__canceled_border-color___3FPUr {/* stylelint-disable declaration-colon-space-before */
  border-color : #b6bec7;/* stylelint-enable */
}

.styles__main___2fYQv.styles__running_border-color___2uRZN {/* stylelint-disable declaration-colon-space-before */
  border-color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__succeeded_border-color___2QeeU {/* stylelint-disable declaration-colon-space-before */
  border-color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__stopped_border-color___2OlUb {/* stylelint-disable declaration-colon-space-before */
  border-color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__empty_border-color___1it5x {/* stylelint-disable declaration-colon-space-before */
  border-color : #9eb3d5;/* stylelint-enable */
}

.styles__main___2fYQv.styles__emptyCluster_border-color___1F4IE {/* stylelint-disable declaration-colon-space-before */
  border-color : #9eb3d5;/* stylelint-enable */
}

.styles__main___2fYQv.styles__terminated_border-color___3FJ3t {/* stylelint-disable declaration-colon-space-before */
  border-color : #ad85ff;/* stylelint-enable */
}

.styles__main___2fYQv.styles__unreachable_border-color___3YUzI {/* stylelint-disable declaration-colon-space-before */
  border-color : #9eb3d5;/* stylelint-enable */
}

.styles__main___2fYQv.styles__pending_border-color___2IhMB {/* stylelint-disable declaration-colon-space-before */
  border-color : #bddff0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__inProgress_border-color___1dHNl {/* stylelint-disable declaration-colon-space-before */
  border-color : #f7d933;/* stylelint-enable */
}

.styles__main___2fYQv.styles__canceling_border-color___Ucl3U {/* stylelint-disable declaration-colon-space-before */
  border-color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__success_border-color___2-l8Y {/* stylelint-disable declaration-colon-space-before */
  border-color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__initialized_border-color___3NIVW {/* stylelint-disable declaration-colon-space-before */
  border-color : #1aaaf8;/* stylelint-enable */
}

.styles__main___2fYQv.styles__active_border-color___ET7O0 {/* stylelint-disable declaration-colon-space-before */
  border-color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__pendingDelete_border-color___3gReF {/* stylelint-disable declaration-colon-space-before */
  border-color : #ffc400;/* stylelint-enable */
}

.styles__main___2fYQv.styles__locked_border-color___2cW-Q {/* stylelint-disable declaration-colon-space-before */
  border-color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__readable_border-color___1KjY1 {/* stylelint-disable declaration-colon-space-before */
  border-color : #e12b0c;/* stylelint-enable */
}

.styles__main___2fYQv.styles__writable_border-color___LfSh7 {/* stylelint-disable declaration-colon-space-before */
  border-color : #70c9a0;/* stylelint-enable */
}

.styles__main___2fYQv.styles__deploying_border-color___wgoSO {/* stylelint-disable declaration-colon-space-before */
  border-color : #00cbca;/* stylelint-enable */
}

.styles__main___2fYQv.styles__unavailable_border-color___3h3l3 {/* stylelint-disable declaration-colon-space-before */
  border-color : #9967ff;/* stylelint-enable */
}

.styles__blink___3eIzd {
  -webkit-animation: styles__blinker___2VoOx 1.25s ease-in-out infinite;
          animation: styles__blinker___2VoOx 1.25s ease-in-out infinite;
}

@-webkit-keyframes styles__blinker___2VoOx {
  50% { opacity: 0.25; }
}

@keyframes styles__blinker___2VoOx {
  50% { opacity: 0.25; }
}

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

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

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

.styles__state___1sIRb {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.styles__state___1sIRb i, .styles__stateBackground___j_5W_ {
  width: 11px;
  height: 11px;
}

.styles__state___1sIRb i,
.styles__stateBackground___j_5W_ {
  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;
  margin-top: 1px;
  border-style: solid;
  background: #ffffff;
  position: absolute;
  z-index: 2;
}

.styles__stateBackground___j_5W_ {
  color: #ffffff;
}

.styles__stateIcon___1XOeE {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  fill: #ffffff;
}

.styles__regular___2gPiy.styles__state___1sIRb {
  height: 28px;
  width: 28px;
}

.styles__regular___2gPiy.styles__state___1sIRb i,
  .styles__regular___2gPiy.styles__state___1sIRb .styles__stateBackground___j_5W_ {
    border-radius: 14px;
    border-width: 14px;
  }

.styles__small___2zMwe.styles__state___1sIRb {
  height: 20px;
  width: 20px;
}

.styles__small___2zMwe.styles__state___1sIRb i,
  .styles__small___2zMwe.styles__state___1sIRb .styles__stateBackground___j_5W_ {
    border-radius: 10px;
    border-width: 10px;
  }

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

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

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

.styles__permission___3_uhi {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.styles__permission___3_uhi > * {
  lost-column-cycle: 3;
}

.styles__permission___3_uhi > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(29.1375% - 8.5px);
  max-width: calc(29.1375% - 8.5px);
  width: calc(29.1375% - 8.5px);
}

.styles__permission___3_uhi > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__permission___3_uhi > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__permission___3_uhi > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__permission___3_uhi > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(20.8125% - 9.5px);
  max-width: calc(20.8125% - 9.5px);
  width: calc(20.8125% - 9.5px);
}

.styles__permission___3_uhi > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__permission___3_uhi > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__permission___3_uhi > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__permission___3_uhi > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__permission___3_uhi > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__permission___3_uhi > *:nth-child(3):last-child {
  margin-right: 0;
}

.styles__permission___3_uhi > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__permission___3_uhi {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #445d6e;
}

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

.styles__submitRow___xbkgU {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.styles__repoPermissions___3JDVS .styles__title___1DygX {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: normal;
    padding-bottom: 12px;
    color: #445d6e;
  }

.styles__repoPermissions___3JDVS .styles__info___3bPQX {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
  }

.styles__repoPermissions___3JDVS .styles__info___3bPQX > * {
  lost-column-cycle: 2;
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(49.95% - 6px);
  max-width: calc(49.95% - 6px);
  width: calc(49.95% - 6px);
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX {
  margin-bottom: 16px;
}

.styles__repoPermissions___3JDVS .styles__info___3bPQX .styles__card___3brvM {
      margin: 0;
}

.styles__repoPermissions___3JDVS .styles__list___12hm1 {
    padding: 12px 0;
  }

.styles__repoPermissions___3JDVS .styles__list___12hm1 ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

.styles__singleItemPermission___2Cf9P {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}

.styles__singleItemPermission___2Cf9P > * {
  lost-column-cycle: 4;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(29.1375% - 8.5px);
  max-width: calc(29.1375% - 8.5px);
  width: calc(29.1375% - 8.5px);
}

.styles__singleItemPermission___2Cf9P > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(1):last-child {
  margin-right: 0;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(16.65% - 10px);
  max-width: calc(16.65% - 10px);
  width: calc(16.65% - 10px);
}

.styles__singleItemPermission___2Cf9P > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(2):last-child {
  margin-right: 0;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(8.325% - 11px);
  max-width: calc(8.325% - 11px);
  width: calc(8.325% - 11px);
}

.styles__singleItemPermission___2Cf9P > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(3):last-child {
  margin-right: 0;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(4) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(41.625% - 7px);
  max-width: calc(41.625% - 7px);
  width: calc(41.625% - 7px);
}

.styles__singleItemPermission___2Cf9P > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(4):last-child {
  margin-right: 0;
}

.styles__singleItemPermission___2Cf9P > *:nth-child(4):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}

.styles__singleItemPermission___2Cf9P {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
}

.styles__singleItemPermission___2Cf9P .styles__button___3CN0p {
    margin: 10px;
    max-width: 50px;
}

.styles__singleItemPermission___2Cf9P .styles__removeButton___OnmKM {
    margin: 10px 14px;
}

.styles__singleItemPermission___2Cf9P .styles__removeButton___OnmKM:hover {
  cursor: pointer;
  fill: #2496ed;
}

.styles__singleItemPermission___2Cf9P .styles__removeButton___OnmKM svg {
      width: 13px;
      height: 13px;
      position: relative;
      left: 5px;
      top: 3px;
}

.styles__singleItemPermission___2Cf9P .styles__permissions___3DYaH {
    margin-left: 0;
}

.styles__singleItemPermission___2Cf9P input {
    color: #27343b !important;
    padding-left: 10px !important;
}

.styles__message___1vVJZ {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 25px 0 20px
}

.styles__message___1vVJZ.styles__failed___HTgTa {
  color: #ef4a53;
}

.styles__message___1vVJZ.styles__success___dvTQJ {
  color: #00cbca;
}

.styles__message___1vVJZ .styles__iconWrapper___3ggsa {
    margin-right: 8px;
}

@media only screen and (max-width: 960px) {
    .styles__singleItemPermission___2Cf9P .styles__permissions___3DYaH {
      margin-left: 35px !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___3zCeW {
  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___vH39K {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__main___1PCpy {
  margin-bottom: 40px;
}

.styles__main___1PCpy .styles__card___WVzHD {
    margin-bottom: 12px;
  }

.styles__permissionRow___3cV35 {
  border-top: 1px solid #e0e4e7;
  padding: 24px 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___3GVAb {
  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___2r4rr {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__deleteButtons___psOgb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  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___Ll-n1 {
  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___iBLia {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

.styles__main___3e3tT {
  margin-bottom: 40px;
}

.styles__main___3e3tT .styles__card___2yHXN {
    margin-bottom: 12px;
  }

.styles__main___3e3tT .styles__privacyHeader___4VFJO {
    color: #8f9ea8;
    margin-top: 24px;
  }

.styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertyFields___2wQRC {
      width: 50%;
    }

.styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertySection___1StlH {
      color: #8f9ea8
    }

.styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertySection___1StlH:last-child {
  margin-top: 24px;
}

.styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertyLabel___3iyls {
      color: #8f9ea8;
    }

.styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertyLabel___3iyls input {
        color: #27343b !important;
      }

.styles__main___3e3tT .styles__propertiesCard___14iZa .styles__saveButton___2-MwL {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      margin-top: 16px;
    }

.styles__main___3e3tT .styles__deleteCard___3gJI- .styles__deleteDescription___3aXff {
      display: table-cell;
      width: 100%;
    }

.styles__main___3e3tT .styles__deleteCard___3gJI- .styles__deleteButton___1Qx_g {
      display: table-cell;
      vertical-align: middle;
      text-align: right;
    }

.styles__privacyText___KyaVK {
  margin-left: 12px;
}

.styles__privateTeams___1sHLM {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 16px;
  font-family: 'Open Sans', sans-serif;
}

.styles__privateTeams___1sHLM .styles__toggle___1mRQT {
    margin-bottom: 5px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    cursor: pointer;
  }

.styles__privateTeams___1sHLM .styles__toggle___1mRQT:last-child {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-bottom: 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___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.
*/

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

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

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

.styles__consolidationHelper___1OKVN {
  position: fixed;
  bottom: 12px;
  right: 12px;
  border-radius: 3px;
  z-index: 1000;
  border: 1px solid #dddddd;
  padding: 8px 10px;
  width: 330px;
  font-size: small;

  -webkit-box-shadow: 1px 1px 10px #333333;

          box-shadow: 1px 1px 10px #333333;

  background: rgba(255, 255, 255, 0.65);
  opacity: 0.85
}

.styles__consolidationHelper___1OKVN:hover {
  opacity: 1;
  background: #ffffff;
}

.styles__consolidationHelper___1OKVN ul {
    padding: 0;
    margin: 0;
}

.styles__consolidationHelper___1OKVN button {
    font-size: small;
}

.styles__featureFlagList___1RzvN {
  padding-left: 10px;
  margin: 6px 0;
}

.styles__featureFlagList___1RzvN li {
    list-style: none;
  }

.styles__featureFlagList___1RzvN * {
    min-height: 0;
    line-height: normal;
  }

.styles__controls___3WpoI {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: small;

  text-align: right;
}

.styles__buttons___2jA7j > * {
    width: 18px;
    display: inline-block;
    text-align: center;
  }

.styles__buttons___2jA7j span {
    cursor: pointer;
  }

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