/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___BxJ2x {
  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___3Ol3j {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3Ol3j {
  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___1XHwI {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___1XHwI {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* stylelint-disable block-no-empty */
.dtabs {}
/* stylelint-enable */
.styles__selected___17d7E {
  pointer-events: none;
}
.dvtabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  width: 200px;
}
.styles__underlined___2sRhd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.styles__remainingUnderline___3yA-W {
  border-bottom: 2px solid #c0c9ce;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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.4;
}
.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: #099cec;
  border-color: #099cec;
}
.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: #099cec;
}
.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: #099cec;
}
.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: #099cec;
  border-color: #099cec;
}
.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: #099cec;
}
.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: #099cec;
}
.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;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: #099cec;
  border-bottom-color: #099cec;
}
.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: #099cec;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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 #e0e4e7;
  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__titleWithLabel___1VOFq {
  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: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.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;
  }
.styles__titleLabel___2Ubs2 {
  background: #d4c8ed;
  border-radius: 20px;
  min-width: 74px;
  padding: 5px 10px;
  font-size: 14px;
  margin-left: 21px;
  color: #270869;
  text-transform: uppercase;
  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-bottom: 12px;
}

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3Tm0n {
  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___LavPu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___LavPu {
  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___3NYZO {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3NYZO {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* stylelint-disable block-no-empty */
.dcard {
}
/* stylelint-enable */
.styles__card___gktOa {
  background: #ffffff;
  border: 1px solid #e0e4e7;
  border-radius: 2px;
  padding: 28px;
}
.styles__title___1sf66 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0.005em;
  margin: 0;
  margin-bottom: 24px;
}
.styles__shadowCard___3t4U8 {
  background-color: #ffffff;
  padding: 28px;
  -webkit-box-shadow: inset -1px 0 0 0 rgba(224, 227, 231, .6),
  inset 0 -1px 0 0 #e0e4e7, inset 1px 0 0 0 rgba(224, 227, 231, .6);
          box-shadow: inset -1px 0 0 0 rgba(224, 227, 231, .6),
  inset 0 -1px 0 0 #e0e4e7, inset 1px 0 0 0 rgba(224, 227, 231, .6);
}
@media only screen and (max-width: 600px) {
  .styles__shadowCard___3t4U8 {
    padding: 12px;
  }
}
.styles__shadowCardHover___2e0Y4:hover {
  -webkit-box-shadow: 0 2px 6px 0 #e0e4e7,
  inset -1px 0 0 0 rgba(224, 227, 231, .3), inset 0 -1px 0 0 #e0e4e7,
  inset 1px 0 0 0 rgba(224, 227, 231, .2);
          box-shadow: 0 2px 6px 0 #e0e4e7,
  inset -1px 0 0 0 rgba(224, 227, 231, .3), inset 0 -1px 0 0 #e0e4e7,
  inset 1px 0 0 0 rgba(224, 227, 231, .2);
}

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

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: #099cec;
  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;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: #099cec;
}
.styles__secondary___11gMY {
  fill: #70c9a0;
}
.styles__warn___3tokU {
  fill: #f7d933;
}
.styles__panic___2ngky {
  fill: #e12b0c;
}
.styles__dull___cV3u9 {
  fill: #8f9ea8;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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 #099cec;
  border-bottom: 1px solid #099cec;
  border-left: 1px solid #099cec;
  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 #099cec;
  border-bottom: 1.5px solid #099cec;
  border-left: 1.5px solid #099cec;
  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 #099cec;
  border-bottom: 2.25px solid #099cec;
  border-left: 2.25px solid #099cec;
  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 #099cec;
  border-bottom: 3px solid #099cec;
  border-left: 3px solid #099cec;
  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 #099cec;
  border-bottom: 5px solid #099cec;
  border-left: 5px solid #099cec;
  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 #099cec;
  border-bottom: 7.5px solid #099cec;
  border-left: 7.5px solid #099cec;
  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;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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 45%;
              flex: 0 0 45%;
    }
.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 15%;
              flex: 0 0 15%;
    }
.styles__table___3agUw .styles__row___1Y39e div:nth-of-type(5) {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 10%;
              flex: 0 0 10%;
      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__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;
  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 {
    margin-right: 3px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1k7Tv {
  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___1TsTL {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1TsTL {
  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___2SYoR {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2SYoR {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__modalClass___2uP98 {
  -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;
  outline: none;
  border-radius: 2px;
  position: relative;
  width: 740px;
  max-height: 80%;
}

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

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3xfgW {
  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___3pp4w {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3pp4w {
  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___2HglS {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2HglS {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__content___KrAQR {
  padding: 12px;
}
.styles__sectionTitle___1QfbH {
  font-size: 14px;
  font-weight: 600;
  color: #26323f;
  margin: 0 0 35px;
}
.styles__sectionInfo___2epn8 {
  font-size: 14px;
  font-weight: 600;
  color: #26323f;
  margin-bottom: 18px;
  height: 30px;
}
.styles__input___2xX3j {
  margin: 0 8px;
  width: 55px;
}
.styles__error___SFx0l {
  color: #e12b0c;
  margin-bottom: 12px;
}
.styles__ctas___3gwob {
  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__modal___2_L7x {
  max-height: 430px;
}
.styles__pricingDisclaimer___1Kvyo {
  max-width: 400px;
}

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1CvdU {
  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___1Ia3H {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1Ia3H {
  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___1z_kY {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___1z_kY {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__content___3crX1 {
  padding: 12px;
}
.styles__sectionTitle___24kbR {
  font-size: 16px;
  font-weight: 500;
  color: #26323f;
  margin: 0 0 16px;
}
.styles__sectionInfo___30OzL {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #26323f;
  margin-bottom: 18px;
  height: 34px;
}
.styles__sectionInfo___30OzL .styles__dropdown___1YMll {
    width: 110px;
    height: 34px;
    margin-left: 8px;
  }
.styles__input___HVdZ7 {
  margin: 0 8px;
  width: 55px;
}
.styles__error___KRVPy {
  color: #e12b0c;
  margin-bottom: 12px;
}
.styles__ctas___2t_5N {
  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__inputError___3Chwa {
  color: #e12b0c;
  font-weight: bold;
  margin: 20px 0;
}
.styles__modal___1Ufr3 {
  max-height: 500px;
}
.styles__note___ajIJs {
  margin: 46px 0 9px;
}
.styles__note___ajIJs .styles__removeMembersLink___37qV3 {
    color: #076cad;
    text-decoration: none;
    cursor: pointer;
  }
.styles__explanatoryBox___3z6dy {
  display: grid;
  grid-template-columns: 67px 530px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 27px;
  width: 664px;
  height: 87px;
  background-color: rgba(196, 240, 255, .5);
  border-radius: 3px;
  font-size: 14px;
}
.styles__explanatoryBox___3z6dy .styles__svg___3uKDD {
    grid-column-start: 1;
    justify-self: center;
    fill: #003f8c;
  }
.styles__explanatoryText___memZ- {
  grid-column-start: 2;
  justify-self: center;
  color: #076cad;
}
.styles__dropdown___1YMll {
  text-align: left;
  line-height: 33px;
  font-weight: 500;
}

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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;
    margin-top: 4px;
  }
.styles__alert___1gTLv.styles__large___3_rxu .styles__action___30BeG {
    -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;
    }
/* alert types */
.styles__success___3rW0I {
  background-color: #54d1b0;
}
.styles__info___26JqH {
  background-color: #f3f9ff;
  color: #27343b;
  border: 1px solid rgb(204, 229, 255);
}
.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__billingInfo___2Hq2h {
  margin-bottom: 60px;
}

.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__planHeader___1MKBg .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__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;
  margin-top: 10px;
  margin-right: 28px;
}

.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: 14px;
    line-height: 21px;
    color: #5a6774;
    margin-bottom: 2px;
  }

.styles__planPromo___3OUxd {
  background: #d9ebfa;
  border: 1px solid #b8deff;
  display: grid;
  grid-template-columns: 40px auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.styles__planPromo___3OUxd .styles__rocketEmoji___2CFfM {
    grid-area: 1 / 1 / span 2 / span 1;
    justify-self: center;
    -ms-flex-item-align: center;
        align-self: center;
    font-size: 48px;
    font-size: 3rem;
  }

.styles__planPromo___3OUxd .styles__promoTitle___1sX-v {
    padding: 0 30px;
    grid-column-start: 2;
    color: #26323f;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
  }

.styles__planPromo___3OUxd .styles__promoBody___OnXJf {
    padding: 0 30px;
    grid-column-start: 2;
    color: #26323f;
    font-size: 14px;
    line-height: 1.5;
  }

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

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

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

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3A46U {
  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___1Fz8p {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1Fz8p {
  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___2R6Ob {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2R6Ob {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__form___2gdKg {
  padding: 12px;
}
@media only screen and (max-width: 600px) {

  .styles__row___2dKbW,
  .styles__cardRow___327aH,
  .styles__postalRow___3tceS,
  .styles__submitRow___3yDuA {
    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___2dKbW {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .styles__row___2dKbW > * {
    lost-column-cycle: 2;
  }
  .styles__row___2dKbW > *: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___2dKbW > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__row___2dKbW > *:nth-child(1):last-child {
    margin-right: 0;
  }
  .styles__row___2dKbW > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__row___2dKbW > *: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___2dKbW > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__row___2dKbW > *:nth-child(2):last-child {
    margin-right: 0;
  }
  .styles__row___2dKbW > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }

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

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

  .styles__cardRow___327aH > *: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___327aH > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

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

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

  .styles__cardRow___327aH > *: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___327aH > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

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

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

  .styles__cardRow___327aH > *: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___327aH > *:nth-child(3):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

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

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

  .styles__cardRow___327aH {
    margin-top: 16px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

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

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

  .styles__postalRow___3tceS > *: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___3tceS > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

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

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

  .styles__postalRow___3tceS > *: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___3tceS > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

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

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

  .styles__postalRow___3tceS > *: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___3tceS > *:nth-child(3):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }

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

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

  .styles__postalRow___3tceS {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
}
.styles__title___3nE-b {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #445d6e;
  font-weight: bold;
}
.styles__error___280-O {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: bold;
  color: #e12b0c;
}
.styles__submit___3oyNG {
  margin: 20px 20px 0 0;
}
.styles__warning___35Vei {
  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___35Vei .styles__icon___nu74I {
    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;
  }

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

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

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

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

.styles__wrapper___1bTO0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 24px;
  margin-bottom: 60px;
}

.styles__nav___2aO9T {
  margin-right: 50px;
}

.styles__content___1MWNn {
  width: 100%;
}

.styles__infoCard___1dOXS {
  margin-bottom: 32px;
  background-color: #ffffff;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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);
  }
}
html {
  background-color: #f7f7f8;
}
/* 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 {
  position: fixed;
  top: 0;
  bottom: 0;
}
.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;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3E89j {
  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)
*/
@keyframes styles__fadein___25_Fz {
  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___2sD35 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2sD35 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper____G5VL {
  position: relative;
  -ms-flex-item-align: center;
      align-self: center;
  width: 100%;
}
.styles__searchBarWrapper___2kZcu {
  position: relative;
  width: 100%;
}
.styles__icon___2E1di {
  fill: #ffffff;
  position: absolute;
  top: 9px;
  left: 9px;
}
.styles__input___19pbM {
  text-indent: 24px;
  width: 100%;
  height: 36px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  border: 0;
  outline: none;
  border-radius: 2px;
  background-color: #ffffff;
}
.styles__menu___1De4e {
  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;
  width: 100%;
}
.styles__loading___Cm8lx {
  top: 10px;
  left: 10px;
}
.styles__result___1g6ah {
  color: #445d6e;
  padding: 8px 20px;
  cursor: pointer;
  text-align: left
}
.styles__result___1g6ah.styles__highlighted___kUwo0 {
  background: #e0e4e7;
}
.styles__menuTitle___3dScr {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  cursor: default;
  color: #8f9ea8;
  text-align: left;
  padding: 12px;
}
.styles__resultName___14nHp {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #445d6e;
}
/* Search Autocomplete Results */
.styles__match___3HtXF {
  color: #099cec;
  font-weight: 600;
}
.styles__isOneCharSearchMsg___B7PMI {
  width: auto;
  max-width: 364px;
  height: 24px;
  font-size: 12px;
  border-radius: 2px;
  -webkit-box-shadow: 0 2px 3px #7d94a5;
          box-shadow: 0 2px 3px #7d94a5;
  background: #ffffff;
  padding: 3.6px;
  position: absolute;
  top: 110%;
  color: #244357;
  z-index: 1;
  -webkit-animation: styles__fadein___25_Fz 0.5s;
  animation: styles__fadein___25_Fz 0.5s;
}
.styles__triangle___F3-vG {
  position: absolute;
  z-index: 2;
  left: 9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffffff;
  -webkit-animation: styles__fadein___25_Fz 0.5s;
  animation: styles__fadein___25_Fz 0.5s;
}
@keyframes styles__fadein___25_Fz {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes styles__fadein___25_Fz {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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__parent___2mFTP {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}
.styles__parent___2mFTP.styles__default___3Uxzu img {
      border: none;
      padding: 3px;
}
.styles__parent___2mFTP.styles__personalizedAvatar___2LkSj img {
      border: 3px solid #6bc3f3;
}
.styles__parent___2mFTP.styles__personalizedAvatar___2LkSj.styles__personalizedAvatarGreyBorder___3QXkG img {
        border: 3px solid #e7e8e9;
}
.styles__parent___2mFTP img {
    border-radius: 50%;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___i7aPc {
  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___3Cudc {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3Cudc {
  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___3nJee {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3nJee {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__parent___3plE4 {
  background: #29343a;
  height: 800px;
}
.styles__wrapper___1wZgS {
  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___1wZgS .styles__bottomContent___1TTxl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 800px;
    -ms-flex-item-align: center;
        align-self: center;
  }
.styles__wrapper___1wZgS .styles__header___25rVg {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 56px;
  }
.styles__onboardingParent___2rQXs {
  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__onboardingParent___2rQXs .styles__content___13y7M {
    background: #3a4951;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
            box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
    border-radius: 6px;
    height: 550px;
    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: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 40px;
  }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__userType___25AvY {
      text-align: left;
      margin-bottom: 10px;
    }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__instructionHeader___3naUA {
      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;
      width: 470px;
    }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__title___18fWg {
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      margin: 35px 0 9px;
      max-width: 500px;
    }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__subTitle___2Jqcz {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      text-align: center;
      margin-bottom: 35px;
      max-width: 500px;
    }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__osOptions___3jtNH {
      font-size: 12px;
    }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__osLine___3PXhs {
      background: #6bc3f3;
      width: 32px;
      height: 2px;
    }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__helpLink___1xXDr {
      margin: 30px 0;
    }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__subsequentSteps___2ifDL {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      background: #2496ed;
      -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
              box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
      border-radius: 6px;
      width: 485px;
      min-height: 115px;
      font-weight: 500;
      color: #ffffff;
      margin-top: 16px;
    }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__subsequentSteps___2ifDL .styles__instruction___1llTs {
        font-weight: 600;
        font-family: Courier, monospace;
        font-size: 14px;
        line-height: 16px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__subsequentSteps___2ifDL .styles__instruction___1llTs .styles__clipboard___1RraE {
          display: grid;
          grid-template-rows: auto auto;
        }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__subsequentSteps___2ifDL .styles__instruction___1llTs .styles__clipboard___1RraE .styles__copied___1Kb_C {
            font-size: 8px;
          }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__subsequentSteps___2ifDL .styles__instruction___1llTs .styles__command___2N8j9 {
          margin-right: 20px;
          max-width: 365px;
          word-wrap: break-word;
          min-height: 40px;
        }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS {
      display: grid;
      width: 375px;
    }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS .styles__img___1lTSB {
        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__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS .styles__desktopIcon___1eyQf {
        grid-column-start: 1;
        grid-row-start: 3;
        grid-row-end: 5;
      }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS .styles__text___1eYOE {
        font-weight: 600;
        grid-column-start: 2;
        padding: 0 10px 3px;
      }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS .styles__subtext___2be7a {
        padding: 0 10px 3px;
        font-weight: normal;
        grid-column-start: 2;
      }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS .styles__subtext___2be7a a {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          text-decoration: none;
          cursor: pointer;
          color: #6bc3f3;
          font-size: 12px;
        }
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS .styles__subtext___2be7a:first-child {
  padding: 0 10px;
}
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS .styles__subtext___2be7a:nth-last-child(2) {
  margin: 10px 0;
  padding-left: 10px;
  max-width: 350px;
}
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS .styles__subtext___2be7a:nth-last-child(2) button {
            background-color: #007bff;
            border-color: #007bff;
            margin: 0;
}
.styles__onboardingParent___2rQXs .styles__content___13y7M .styles__wrapper___1wZgS .styles__subtext___2be7a:nth-last-child(2) button:hover {
  background-color: #066da5;
  border-color: #066da5;
}
.styles__onboardingParent___2rQXs .styles__navigator___1OI6L {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 650px;
    width: 10%;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
.styles__onboardingParent___2rQXs .styles__navigator___1OI6L .styles__previousStep___3TJ26 button {
        font-weight: 500;
        color: #6bc3f3;
        background-color: #29343a;
        border-color: #29343a
      }
.styles__onboardingParent___2rQXs .styles__navigator___1OI6L .styles__previousStep___3TJ26 button:hover {
  background-color: #29343a;
  border-color: #29343a;
}
.styles__onboardingParent___2rQXs .styles__navigator___1OI6L .styles__nextStepButton___2BtTc {
      width: 155px;
    }
.styles__onboardingParent___2rQXs .styles__navigator___1OI6L .styles__nextStepButton___2BtTc button {
        background-color: #007bff;
        border-color: #007bff
      }
.styles__onboardingParent___2rQXs .styles__navigator___1OI6L .styles__nextStepButton___2BtTc button:hover {
  background-color: #066da5;
  border-color: #066da5;
}
.styles__link___2BZI- {
  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__tooltip___1MSO4 {
  font-family: 'Open Sans', sans-serif;
}
.styles__cursor___hUk66 {
  cursor: pointer;
}
.styles__tab___1qJKr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-left: 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;
}
.styles__macPlan___2xG8Z {
  font-family: 'Open Sans', sans-serif;
  margin-right: 19px;
  padding-bottom: 10px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #e7e8e9;
  background-color: rgba(0, 0, 0, 0);
  background-color: transparent
}
.styles__macPlan___2xG8Z:hover {
  border: none;
  outline: none;
}
.styles__macPlan___2xG8Z.styles__macView___2cejj {
  color: #ffffff;
  border-bottom: 2px solid #6bc3f3;
  padding-bottom: 8px;
}
.styles__windowsPlan___6JCIG {
  font-family: 'Open Sans', sans-serif;
  padding-bottom: 10px;
  border: none;
  outline: none;
  color: #e7e8e9;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
  background-color: transparent
}
.styles__windowsPlan___6JCIG:hover {
  border: none;
  outline: none;
}
.styles__windowsPlan___6JCIG.styles__windowsView___3V1cb {
  color: #ffffff;
  border-bottom: 2px solid #6bc3f3;
  background-color: rgba(0, 0, 0, 0);
  padding-bottom: 8px;
}
@media (max-width: 600px) {
    .styles__onboardingParent___2rQXs .styles__content___13y7M {
      max-width: 400px;
    }

      .styles__onboardingParent___2rQXs .styles__content___13y7M .styles__title___18fWg {
        max-width: 400px;
      }

      .styles__onboardingParent___2rQXs .styles__content___13y7M .styles__subTitle___2Jqcz {
        max-width: 400px;
      }

      .styles__onboardingParent___2rQXs .styles__content___13y7M .styles__subsequentSteps___2ifDL {
        max-width: 350px;
        padding: 0 30px;
      }
          .styles__onboardingParent___2rQXs .styles__content___13y7M .styles__subsequentSteps___2ifDL .styles__instruction___1llTs .styles__command___2N8j9 {
            max-width: 250px;
          }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2VyZ7 {
  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___bAj3j {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___bAj3j {
  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___5jBPi {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___5jBPi {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__parent___2zI4b {
  margin-top: 30px;
}
.styles__title___1ZOJ7 {
  font-size: 17px;
  font-weight: 600; /* semibold */
}
.styles__stepBox___eMEIM {
  height: 200px;
  min-width: 120px;
  width: 10%;
  position: relative;
  margin-top: 20px;
}
.styles__stepBox___eMEIM .styles__steps___2RJH1 {
    display: grid;
    grid-template-columns: 40px 80px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 15px;
  }
.styles__stepBox___eMEIM .styles__steps___2RJH1 .styles__currentStep___3ks53 {
      height: 22px;
      width: 22px;
      text-align: center;
      margin-right: 15px;
      background: #ffffff;
      color: #007bff;
      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___eMEIM .styles__steps___2RJH1 .styles__futureStep___KfzZz {
      border: 1px solid #6f777c;
      color: #6f777c;
      height: 22px;
      width: 22px;
      text-align: center;
      margin-right: 15px;
      border-radius: 50%;
    }
.styles__stepBox___eMEIM .styles__steps___2RJH1 .styles__stepDescription___1I7mL {
      font-size: 14px;
      color: #6f777c;
    }
.styles__stepBox___eMEIM .styles__steps___2RJH1 .styles__stepDescriptionCurrent___3xwKK {
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
    }
.styles__stepBox___eMEIM .styles__steps___2RJH1 .styles__completed___-Oitk {
      height: 22px;
      width: 22px;
      text-align: center;
      margin-right: 15px;
      background: #26ec8d;
      border: 1px solid #26ec8d;
      border-radius: 50%;
      -webkit-transition: border 1s, background-color 1s;
      transition: border 1s, background-color 1s;
    }
.styles__stepBox___eMEIM .styles__steps___2RJH1 .styles__completed___-Oitk .styles__checkIcon___nNIHQ {
        fill: #27343b;
      }
@media only screen and (max-width: 800px) {
  .styles__parent___2zI4b {
    display: none;
  }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1nIZf {
  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___3mZMp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3mZMp {
  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___nFX6s {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___nFX6s {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper___3gdMV {
  background: #29343a;
  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__onboardingParent___5gdeZ {
  background: #29343a;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.styles__onboardingParent___5gdeZ .styles__content___1Qo-K {
    width: 80%;
    background: #3a4951;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
            box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
    border-radius: 6px;
    max-height: 250px;
    min-width: 680px;
    max-width: 750px;
  }
.styles__onboardingParent___5gdeZ .styles__content___1Qo-K .styles__trophyWrapper___3h_SG {
      background: #3a4951;
      display: grid;
      grid-template-columns: 170px 500px;
      grid-template-rows: 60px 120px 60px;
      max-height: 180px;
      min-width: 680px;
      max-width: 750px;
    }
.styles__onboardingParent___5gdeZ .styles__content___1Qo-K .styles__trophyWrapper___3h_SG .styles__trophy___JCmyD {
        grid-row-start: 1;
        grid-row-end: 4;
        position: relative;
        top: -55px;
      }
.styles__onboardingParent___5gdeZ .styles__content___1Qo-K .styles__trophyWrapper___3h_SG .styles__congratulations___3Zu7z {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        font-size: 44px;
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
        padding: 0 6px;
        margin-top: 10px;
      }
.styles__onboardingParent___5gdeZ .styles__content___1Qo-K .styles__trophyWrapper___3h_SG .styles__subText___jemYO {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 15px;
        padding: 0 6px;
      }
.styles__onboardingParent___5gdeZ .styles__content___1Qo-K .styles__trophyWrapper___3h_SG .styles__finalStep___56Ghw {
        width: 200px;
      }
.styles__onboardingParent___5gdeZ .styles__content___1Qo-K .styles__trophyWrapper___3h_SG .styles__finalStep___56Ghw a {
          text-decoration: none;
          cursor: pointer;
        }
.styles__onboardingParent___5gdeZ .styles__content___1Qo-K .styles__trophyWrapper___3h_SG .styles__finalStep___56Ghw button {
          font-weight: bold;
          font-family: 'Open Sans', sans-serif;
          background-color: #007bff;
          border-color: #007bff
        }
.styles__onboardingParent___5gdeZ .styles__content___1Qo-K .styles__trophyWrapper___3h_SG .styles__finalStep___56Ghw button:hover {
  background-color: #066da5;
  border-color: #066da5;
}
.styles__header___TQ5Dz {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 50px 0;
  height: 150px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___gz5XL {
  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___5qC2P {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___5qC2P {
  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___3R-t2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3R-t2 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__modal___22-13 {
  max-width: 450px;
  position: relative;
}
.styles__closeModal___2a9rd {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.styles__children___2dasO {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  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;
  padding: 56px;
}
.styles__title___3IckL {
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: 300;
  margin-bottom: 24px;
}
.styles__description___255Im {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  color: #8f9ea8;
  text-align: center;
  margin-bottom: 24px;
}
.styles__dockerIcon___2NwBY {
  fill: #099cec;
  height: auto;
  width: 56px;
  margin-bottom: 24px;
}
.styles__login____mJGO {
  margin-bottom: 24px;
}
.styles__signUp___IrlBI {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  margin-bottom: 24px;
}
.styles__link___1XGw9 {
  text-decoration: none;
  color: #099cec;
  cursor: pointer;
}
.styles__link___1XGw9:hover {
  color: #1798de;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: #f7f7f8;
  -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;
}

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1CzRJ {
  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___19r2P {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___19r2P {
  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___16PXC {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___16PXC {
  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___2wC68 {
  background: #ffffff;
}
.styles__wrapper___3KqS3 {
  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___3KqS3 .styles__bottomContent___-w_8Z {
    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___3KqS3 .styles__header___2pvRe {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 56px;
  }
.styles__navigator___1-MD5 {
  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___1-MD5 .styles__previousStep___NJyme 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___1-MD5 .styles__previousStep___NJyme button:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}
.styles__navigator___1-MD5 .styles__nextStepButton___2F8jO button {
      background-color: #007bff;
      border-color: #007bff
    }
.styles__navigator___1-MD5 .styles__nextStepButton___2F8jO button:hover {
  background-color: #066da5;
  border-color: #066da5;
}
.styles__navigator___1-MD5.styles__recoveryCodeOnly___1QH09 {
  -ms-flex-item-align: end;
      align-self: flex-end;
}
.styles__twoFactorParent___3e8_8 {
  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___3e8_8 .styles__content___1Z53_ {
    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___3e8_8 .styles__content___1Z53_ .styles__userType___3b1lV {
      text-align: left;
      margin-bottom: 10px;
    }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__instructionHeader___1KD9p {
      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___3e8_8 .styles__content___1Z53_ .styles__instructionHeader___1KD9p.styles__longerSubTitle___ma_eO {
  margin-bottom: 25px;
}
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__title___3Ouuy {
      font-size: 22px;
      font-weight: 600;
      margin: 30px 0 9px;
      max-width: 700px;
    }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__subTitle___2qQWW {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      max-width: 470px;
    }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__subTitle___2qQWW .styles__subTitleLink___1U-M7 {
        color: #007bff;
        text-decoration: none
      }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__subTitle___2qQWW .styles__subTitleLink___1U-M7:hover {
  color: #445d6e;
}
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls {
      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___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls .styles__contextSubText___30GDO {
        font-size: 36px;
        font-family: 'Inconsolata', sans-serif;
        text-align: center
      }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls .styles__contextSubText___30GDO.styles__textCode___2ctel {
  padding: 80px 0;
}
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls .styles__saveOptions___I9rXN {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls .styles__saveOptions___I9rXN .styles__optionsButton___1AFoR {
          border: 1px solid #007bff;
          color: #007bff;
        }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls .styles__saveOptions___I9rXN .styles__optionsButton___1AFoR button {
            width: 85px;
          }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls .styles__qrLayout___1UeEA {
        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___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls textarea {
        min-width: 600px;
        border: none;
        overflow: auto;
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        resize: none;
        text-align: center;
      }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__helpLink___sJ5As {
      margin: 30px 0;
    }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__formField___1brbO {
      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___3e8_8 .styles__content___1Z53_ .styles__subHeader___2IcVu {
      font-size: 18px;
      margin-top: 30px;
    }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__text___2Nmw5 {
      width: 460px;
      margin: 12px 0;
    }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__sixDigitCodeError___1mmFc {
      padding: 7.5px;
      font-size: 12px;
      color: #e12b0c;
    }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__wrapper___3KqS3 {
      display: grid;
      max-width: 375px;
    }
.styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__wrapper___3KqS3 .styles__img___1di_j {
        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___3e8_8 .styles__content___1Z53_ .styles__wrapper___3KqS3 .styles__text___2Nmw5 {
        font-weight: 600;
        grid-column-start: 2;
        padding: 0 10px 3px;
      }
.styles__twoFactorParent___3e8_8.styles__recoveryCodeOnly___1QH09 {
  -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___1U-M7 {
  color: #007bff;
  text-decoration: none;
  cursor: pointer
}
.styles__subTitleLink___1U-M7:hover {
  color: #066da5;
}
.styles__link___2vXOH {
  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___3Mfos {
  cursor: pointer;
}
.styles__tab___1JgAX {
  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___3e8_8 .styles__content___1Z53_ {
      max-width: 400px;
    }

      .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__title___3Ouuy {
        max-width: 400px;
      }

      .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__subTitle___2qQWW {
        max-width: 400px;
      }

      .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__subsequentSteps___32BQI {
        max-width: 400px;
        padding: 0 30px;
      }
          .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__subsequentSteps___32BQI .styles__instruction___1IPtw .styles__command___684Yi {
            max-width: 250px;
          }
}
.styles__typeCodePlan___1MgFI {
  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___1MgFI:hover {
  border: none;
  outline: none;
}
.styles__typeCodePlan___1MgFI.styles__typeSelected___2FDP0 {
  border-bottom: 2px solid #6bc3f3;
  padding-bottom: 8px;
  font-weight: 600;
}
.styles__text___2Nmw5 {
  font-size: 14px;
}
.styles__warningBox___1uMcq {
  margin-top: 30px;
  width: 700px;
  height: 115px;
  background: #fafafb;
}
.styles__warningBox___1uMcq .styles__yellowBar___2TkPt {
    position: absolute;
    width: 4px;
    height: 115px;
    background: #f7d933;
    margin-right: 10px;
  }
.styles__warningBox___1uMcq .styles__warningMessage___kuau3 {
    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___1uMcq .styles__warningMessage___kuau3 .styles__warningText___3rO4k {
      margin-left: 20px;
      width: 450px;
    }
.styles__subTitleAccessToken___aCmG6 {
  margin: 12px 0 20px;
  max-width: 470px;
}
.styles__subTitleAccessToken___aCmG6 button {
    margin: 0 !important;
  }
.styles__warnUser___1Rh4B {
  max-width: 700px;
  margin: 0 24px;
  border-top: 8px solid #e12b0c
}
.styles__warnUser___1Rh4B.styles__yellowWarning___1SBJq {
  border-top: 8px solid #f7d933;
}
.styles__warnUser___1Rh4B .styles__header___2pvRe {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}
.styles__warnUser___1Rh4B .styles__text___2Nmw5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 40px 0;
}
.styles__warnUser___1Rh4B .styles__text___2Nmw5.styles__recoveryCode___2azIC {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}
.styles__warnUser___1Rh4B .styles__text___2Nmw5 > :first-child {
      margin-right: 20px;
}
.styles__warnUser___1Rh4B .styles__exitButtons___1cdmM {
    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___1-MD5 {
    margin-top: 16px;
  }
    .styles__twoFactorParent___3e8_8 .styles__stepNavigator___ZGdlt {
      display: none;
    }
}
@media (max-height: 600px) {
  .styles__navigator___1-MD5 {
    margin-top: 16px;
  }
}
@media (max-width: 745px) {
    .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ {
      width: 100%;
    }

      .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__instructionHeader___1KD9p {
        width: 100%;
      }

      .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__title___3Ouuy {
        width: 80%;
      }

      .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__subTitle___2qQWW {
        width: 100%;
      }

      .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__text___2Nmw5 {
        max-width: 100%;
      }

      .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__formField___1brbO {
        max-width: 100%;
      }

      .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls {
        width: 100%;
      }

        .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls textarea {
          min-width: 70%;
          max-width: 90%;
          overflow: hidden;
        }

        .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls .styles__contextSubText___30GDO.styles__textCode___2ctel {
    padding: 0;
    width: 80%;
    word-wrap: break-word;
  }

        .styles__twoFactorParent___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls .styles__saveOptions___I9rXN {
          -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___3e8_8 .styles__content___1Z53_ .styles__contentBody___gAXls .styles__saveOptions___I9rXN button {
            width: 60px;
          }

  .styles__warningBox___1uMcq {
    margin: 30px 0;
    width: 100%;
    height: auto;
  }

    .styles__warningBox___1uMcq .styles__yellowBar___2TkPt {
      display: none;
    }

    .styles__warningBox___1uMcq .styles__warningMessage___kuau3 {
      padding: 15px;
    }

      .styles__warningBox___1uMcq .styles__warningMessage___kuau3 .styles__warningText___3rO4k {
        margin-left: 20px;
        width: 100%;
      }
}
.styles__maxWidth___2CRSp {
  width: 100%;
}

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2r1ZA {
  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___1v_Ed {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1v_Ed {
  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___2yu2i {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2yu2i {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__parent___lhD5U {
  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___35Mhz {
  width: 700px;
}
.styles__header___2KTHb {
  font-size: 22px;
  font-family: 'Open Sans', sans-serif;
  color: #27343b;
  margin-bottom: 12px;
  font-weight: 600;
}
.styles__text___2z7u5 {
  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___QUo5Q {
  width: 335px;
}
.styles__images___P6OvX {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 48px 0;
}
.styles__images___P6OvX .styles__image___3U13D {
    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___2PkCh {
  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___1WAJ0 {
  width: 80%;
  display: block;
  height: auto;
}
.styles__links___131up {
  color: #007bff;
  text-decoration: none
}
.styles__links___131up:hover {
  color: #445d6e;
}
.styles__linebreak___2zwLL {
  margin-top: 12px;
}
@media (max-width: 740px) {
  .styles__images___P6OvX {
    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___QUo5Q {
    margin: 20px 0;
    width: calc(100% - 20px);
  }

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

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

  .styles__wrapper___35Mhz {
    width: 100%;
  }
}
.styles__maxWidth___pO9jL {
  max-width: 100%;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2pv0z {
  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___Teg1n {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___Teg1n {
  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___30JVZ {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___30JVZ {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__parent___1tFD9 {
  margin-top: 30px;
}
.styles__title___21pkG {
  font-size: 14px;
  color: #27343b;
  text-transform: uppercase;
}
.styles__stepBox___2SVbm {
  min-height: 200px;
  margin-top: 20px;
}
.styles__stepBox___2SVbm .styles__steps___179UM {
    display: grid;
    grid-template-columns: 40px 250px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 15px;
  }
.styles__stepBox___2SVbm .styles__steps___179UM .styles__currentStep___1nb2n {
      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___2SVbm .styles__steps___179UM .styles__futureStep___3LXdA {
      border: 1px solid #b7bbbe;
      color: #b7bbbe;
      height: 22px;
      width: 22px;
      text-align: center;
      margin-right: 15px;
      border-radius: 50%;
    }
.styles__stepBox___2SVbm .styles__steps___179UM .styles__stepDescription___1H-Va {
      font-size: 14px;
      color: #b7bbbe;
    }
.styles__stepBox___2SVbm .styles__steps___179UM .styles__stepDescriptionCurrent___XPm_E {
      font-size: 14px;
      font-weight: 600;
      color: #007bff;
    }
.styles__stepBox___2SVbm .styles__steps___179UM .styles__completed___35VS_ {
      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___2SVbm .styles__steps___179UM .styles__completed___35VS_ svg {
        display: block;
        margin: 4px;
      }
@media only screen and (max-width: 800px) {
  .styles__parent___1tFD9 {
    display: none;
  }
}
.styles__italicize___a8SDQ {
  font-style: italic;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2qHtj {
  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___1tTcV {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1tTcV {
  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___3Py0I {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3Py0I {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* Topnav */
.styles__topnav___2_B0m {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 64px;
  background-color: #099cec;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 600px) {
  .styles__topnav___2_B0m.styles__hasSearch___2E-A6 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100px;
  }
  .styles__topnav___2_B0m .styles__search___3JFtL {
      width: 300px;
      margin: 12px 0;
  }
  .styles__topnav___2_B0m .styles__avatar___2KYUf {
      display: none !important;
  }
  .styles__topnav___2_B0m .styles__username___oMG_s {
      max-width: 120px;
      padding-top: 0;
  }
  .styles__topnav___2_B0m .styles__topNavContent___puDuG {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      padding: 0 8px;
  }
}
.styles__topnav___2_B0m.styles__publishFlow___2rJs7 {
  min-width: 1295px;
}
.styles__topnav___2_B0m > * {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.styles__topnav___2_B0m button {
    cursor: pointer;
}
.styles__topnav___2_B0m .styles__dockerFlat___2woUp {
    fill: #ffffff;
}
.styles__topnav___2_B0m .styles__buttonLink___3PPAv {
    font-weight: 600;
    font-size: 14px;
    margin: 0 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 0.9;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}
.styles__topnav___2_B0m .styles__buttonLink___3PPAv:hover,
    .styles__topnav___2_B0m .styles__buttonLink___3PPAv:active,
    .styles__topnav___2_B0m .styles__buttonLink___3PPAv.styles__isActive___CkvNX {
  opacity: 1;
}
.styles__topnav___2_B0m .styles__logoWrapper___3MxB2 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 16px;
    text-align: center;
    text-decoration: none;
}
.styles__topnav___2_B0m .styles__loggedIn___3VPqF {
    margin-left: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
}
@media only screen and (max-width: 1200px) {
  .styles__topnav___2_B0m .styles__loggedIn___3VPqF {
      margin-left: 0 !important;
  }
  .styles__topnav___2_B0m .styles__buttonLink___3PPAv {
      margin: 0 8px;
  }
}
.styles__topnav___2_B0m .styles__avatar___2KYUf {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.styles__topnav___2_B0m .styles__accountDropdown___30-JJ {
    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__topnav___2_B0m .styles__accountDropdown___30-JJ ul {
      margin-top: 4px !important;
      width: 190px;
      right: 0;
      top: 40px;
    }
.styles__topnav___2_B0m .styles__accountDropdown___30-JJ ul li {
        line-height: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
.styles__publisherCenterTopnav___1Pi98 {
  margin: 0 auto;
  padding: 0 16px;
  -webkit-box-flex: 1;
      -ms-flex: 1 auto;
          flex: 1 auto;
}
.styles__transparent___2KRUv {
  padding-top: 20px;
  background-color: transparent;
  position: relative;
  z-index: 1;
}
.styles__expandable___1RB6Z {
  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___1RB6Z:hover {
  opacity: 1;
}
.styles__expandable___1RB6Z > svg {
    fill: white;
}
/* Using width values from Docker Cloud */
.styles__username___oMG_s {
  font-size: 14px;
  color: #ffffff;
  background-color: transparent;
  border: none;
  outline: none;
  overflow: hidden;
  font-weight: 600;
  min-width: 50px;
  max-width: 140px;
  padding-top: 4px;
  text-overflow: ellipsis;
}
.styles__ssoLogout___3S3jd {
  color: #e12b0c;
}
/* Search & Autocomplete Results */
.styles__search___3JFtL {
  padding: 2px 0;
  min-width: 150px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.styles__input___2Zhiv {
  max-width: 364px;
  color: #ffffff;
  background-color: rgba(255, 255, 255, .2)
}
.styles__input___2Zhiv:focus {
  color: #445d6e;
  background-color: rgba(255, 255, 255, 1);
}
.styles__darkIcon___3BHT1 {
  fill: #445d6e;
}
.styles__lightIcon___6cfzd {
  fill: #ffffff;
}
.styles__menu___2LJhJ {
  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__gethelpDropdown___XXoQg .styles__ul___2SYz1 {
    width: 500px;
  }
.styles__loading___gvsD1 {
  position: absolute;
  border-right-color: #445d6e;
  border-bottom-color: #445d6e;
  border-left-color: #445d6e;
}
.styles__match___pN513 {
  color: #099cec;
  font-weight: 600;
}
.styles__result___Owm8E {
  padding: 8px 20px;
  cursor: pointer;
}
.styles__highlightedResult___2Kixi {
  padding: 8px 20px;
  cursor: pointer;
  background: #e0e4e7;
}
.styles__menuTitle___15JcK {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  padding: 8px;
  cursor: default;
  color: #8f9ea8;
}
.styles__resultName___2t8yu {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
}
.styles__resultCategories___3cgte {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  color: #8f9ea8;
}
.styles__onboardingMagicCarpet___1dSDn {
  background-color: #29343a;
  -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;
}
.styles__twoFactorMagicCarpet___vbFib {
  background-color: #ffffff;
  padding: 32px;
  overflow-y: auto;
  width: 98% !important;
  height: 98vh !important;
  outline: none;
}
.styles__signUpButton___R0GRJ {
  width: 180px;
  height: 36px;
  border: 2px solid #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 6px
}
.styles__signUpButton___R0GRJ:hover {
  background-color: #ffffff !important;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1BRn4 {
  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___2GCvg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2GCvg {
  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___3e025 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3e025 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__consolidationHelper___3q7p5 {
  position: fixed;
  bottom: 12px;
  right: 12px;
  border-radius: 3px;
  z-index: 100;
  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___3q7p5:hover {
  opacity: 1;
  background: #ffffff;
}
.styles__consolidationHelper___3q7p5 ul {
    padding: 0;
    margin: 0;
}
.styles__consolidationHelper___3q7p5 button {
    font-size: small;
}
.styles__featureFlagList___222bO {
  padding-left: 10px;
  margin: 6px 0;
}
.styles__featureFlagList___222bO li {
    list-style: none;
  }
.styles__featureFlagList___222bO * {
    min-height: 0;
    line-height: normal;
  }
.styles__buttons___z1zMa {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: small;
}
.styles__buttons___z1zMa > * {
    width: 18px;
    display: inline-block;
    text-align: center;
  }
.styles__buttons___z1zMa span {
    cursor: pointer;
  }

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

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

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: #099cec;
}
.styles__text___3mS6Z > div {
  padding-bottom: 12px;
}

.styles__plansGroup___2YLC- {
  max-width: 870px;
  margin: 0 auto;
}

.styles__planSize___gDgfm {
  padding: 20px 24px;
  background-color: white;
  margin-bottom: 7px;
  -webkit-box-shadow:
    inset -1px 0 0 0 rgba(224, 227, 231, 0.6),
    inset 0 -1px 0 0 #e0e4e7,
    inset 1px 0 0 0 rgba(224, 227, 231, 0.6);
          box-shadow:
    inset -1px 0 0 0 rgba(224, 227, 231, 0.6),
    inset 0 -1px 0 0 #e0e4e7,
    inset 1px 0 0 0 rgba(224, 227, 231, 0.6);
  font-weight: 300;
}

.styles__planSize___gDgfm > input {
    top: 0;
  }

.styles__label___PWNMr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: start;
      align-content: start;
}

.styles__label___PWNMr > div {
    width: 25%;
    padding: 0 10px;
  }

.styles__label___PWNMr > div:last-child {
    text-align: right;
  }

.styles__fontWide___1ob8k {
  font-weight: 500;
}

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

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

.styles__form___x_fit {
  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;
  height: 100%;
}

  .styles__form___x_fit .styles__fieldWrapper___3y_oN {
    margin-bottom: 15px;
  }

  .styles__form___x_fit .styles__generalError___1SSFb {
    margin-top: 15px;
    color: #c82828;
  }

  .styles__form___x_fit button[type="submit"] {
    width: 190px;
  }

.styles__notes___2QVQJ {
  font-size: 14px;
  line-height: 20px;
  color: #90a0ac;
  margin: 10px 0 30px;
}

.styles__notes___2QVQJ > p {
    margin: 0 0 4px;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___olpux {
  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____zRMk {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein____zRMk {
  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___aK2kt {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___aK2kt {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper___2PkV9 {
  margin: 0 auto;
}
.styles__wrapper___2PkV9 .styles__cardSubTitle___1s4To {
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 16px 0;
    color: #697a89;
  }
.styles__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
.styles__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X > * {
  lost-column-cycle: 2;
}
.styles__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X > *: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__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X > *: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__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2PkV9 .styles__doubleFieldRow___2Yu4X {
  margin-bottom: 15px;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > * {
  lost-column-cycle: 3;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *: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__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(24.975% - 9px);
  max-width: calc(24.975% - 9px);
  width: calc(24.975% - 9px);
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *: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__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2PkV9 .styles__creditCardRow___2RACq {
  margin-bottom: 15px;
}
.styles__wrapper___2PkV9 .styles__dropDown___b5OTh select {
    margin-bottom: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
.styles__wrapper___2PkV9 .styles__dropDown___b5OTh {
    position: relative;
  }
.styles__wrapper___2PkV9 .styles__noErrorSelect___2qOrX {
    margin-bottom: 15px;
  }
/* Firefox */
.styles__wrapper___2PkV9 input[type=number] {
    -moz-appearance: textfield;
  }
.styles__wrapper___2PkV9 .styles__select___1R3Qp {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cccccc;
    background: #fafafb;
    height: 30px;
    line-height: 29px;
    color: #8d9194;
    padding: 0 6px;
    font-size: 14px;
  }
.styles__wrapper___2PkV9 .styles__stateZipRow___2aYnN {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
.styles__wrapper___2PkV9 .styles__stateZipRow___2aYnN > * {
  lost-column-cycle: 2;
}
.styles__wrapper___2PkV9 .styles__stateZipRow___2aYnN > *: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__wrapper___2PkV9 .styles__stateZipRow___2aYnN > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2PkV9 .styles__stateZipRow___2aYnN > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__wrapper___2PkV9 .styles__stateZipRow___2aYnN > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2PkV9 .styles__stateZipRow___2aYnN > *: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__wrapper___2PkV9 .styles__stateZipRow___2aYnN > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2PkV9 .styles__stateZipRow___2aYnN > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__wrapper___2PkV9 .styles__stateZipRow___2aYnN > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2PkV9 .styles__purchaseButton___2xoSr {
    width: 190px;
  }
.styles__wrapper___2PkV9 .styles__inputField___2tRBN {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cccccc;
    background: #fafafb;
    height: 30px;
    line-height: 29px;
    color: #27343b;
    padding: 0 6px;
    font-size: 14px
  }
.styles__wrapper___2PkV9 .styles__inputField___2tRBN.styles__error___2jKRw {
  border-bottom-color: #c82828;
}
.styles__wrapper___2PkV9 .styles__generalError___bB6-e {
    margin-top: 15px;
    color: #c82828;
  }
.styles__wrapper___2PkV9 .styles__button___mIn-D {
    height: 30px;
    line-height: 26px;
    min-height: 30px;
    min-width: 190px;
    border-width: 1px;
  }
.styles__wrapper___2PkV9 .styles__errorMessage___1QmFX {
    color: #c82828;
    position: relative;
    font-size: 12px;
    margin: 9px 6px;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1qd4q {
  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___3Ff06 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3Ff06 {
  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-ida {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___A-ida {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__planDetails___1OEh1 {
  height: 180px;
  margin: 24px 0 40px 25%;
  color: #27343b;
}
.styles__planDetails___1OEh1 .styles__planTitle___29YrT {
    font-size: 24px;
    font-weight: 600;
  }
.styles__planDetails___1OEh1 .styles__priceText___3uOig {
    font-size: 30px;
    margin-bottom: 4px;
  }
.styles__planDetails___1OEh1 .styles__priceText___3uOig .styles__repoCost___3niUf {
      color: #768491;
      line-height: 25px;
      font-size: 20px;
      font-weight: 600;
      margin-left: 8px;
    }
.styles__planDetails___1OEh1 .styles__planFeature___1nP6p {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    font-size: 18px;
    color: #768491;
    line-height: 25px;
    margin-bottom: 12px;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2GBB8 {
  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___3sJV1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3sJV1 {
  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___1tupJ {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___1tupJ {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper___1EDlr {
  margin: 0 15px 70px;
}
.styles__wrapper___1EDlr > div {
    max-width: 870px;
    margin: 0 auto;
  }
.styles__wrapper___1EDlr .styles__hero___3yCHk {
    text-align: center;
    margin: 60px 0 40px;
  }
.styles__wrapper___1EDlr .styles__hero___3yCHk .styles__title___1Pmcp {
      font-size: 38px;
      line-height: 52px;
      margin-bottom: 10px;
    }
.styles__wrapper___1EDlr .styles__hero___3yCHk .styles__subtitle___3ivFC {
      font-size: 14px;
      margin-bottom: 30px;
    }
.styles__wrapper___1EDlr .styles__buttonWrapper___2TH-0 {
    margin-top: 30px;
  }
.styles__wrapper___1EDlr .styles__subscribeButton___UpQkG {
    width: 190px;
  }
.styles__card___2PS2e {
  background-color: #ffffff;
  padding: 28px 50px;
}
.styles__card___2PS2e .styles__cardTitle___1_dah {
    margin: 12px 0 24px;
    font-size: 22px;
    line-height: 34px;
    font-weight: 400;
  }
.styles__card___2PS2e .styles__cardSubTitle___1NkEE {
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 16px 0;
    color: #697a89;
  }
.styles__row___2isLd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.styles__formWrapper___1CJtB {
  min-height: 320px;
  width: 60%;
  margin-right: 40px;
}
.styles__selectedPlanCard___tliqB {
  margin: 0 30px;
  width: 40%;
}
@media only screen and (max-width: 960px) {
  .styles__formWrapper___1CJtB {
    width: 100%;
    margin-right: 0;
  }

  .styles__selectedPlanCard___tliqB {
    display: none;
  }
}

.styles__form___3CE9g {
  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;
  height: 100%;
}

  .styles__form___3CE9g .styles__fieldWrapper___201IQ {
    margin-bottom: 15px;
  }

  .styles__form___3CE9g .styles__generalError___1Nou8 {
    margin-top: 12px;
    color: #c82828;
  }

  .styles__form___3CE9g button[type="submit"] {
    line-height: 26px;
    min-height: 30px;
    min-width: 190px;
    margin-left: 0;
  }

.styles__notes___4YOXo {
  font-size: 14px;
  line-height: 20px;
  color: #90a0ac;
  margin: 10px 0 30px;
}

.styles__notes___4YOXo > p {
    margin: 0 0 4px;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2Zerv {
  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___zkAlc {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___zkAlc {
  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___e6GSq {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___e6GSq {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__row___2t1qF {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 28px;
  margin-bottom: 1.75rem;
}
.styles__col___1KEBW {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}
.styles__toggle___3fpzy {
  background: #f7f7f8;
  border: 1px solid #d7dade;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #5a6774;
  cursor: pointer;
  padding: 10px;
  position: relative;
}
.styles__toggleNext___2mn0t {
  margin-left: -1px;
}
.styles__active___aT5Ok {
  background: #d9ebfa;
  border: 1px solid #268aef;
  color: #26323f;
  z-index: 1;
}
.styles__active___aT5Ok .styles__title___10TaO {
    font-weight: bold;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1dl6k {
  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___1m8Lm {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1m8Lm {
  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___2k5Oa {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2k5Oa {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper___2KzaS {
  margin: 0 auto;
}
/* Chrome, Safari, Edge, Opera */
.styles__wrapper___2KzaS input::-webkit-outer-spin-button,
  .styles__wrapper___2KzaS input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
.styles__wrapper___2KzaS .styles__formGroup___3-LYt {
    margin-bottom: 16px;
    margin-bottom: 1rem;
  }
.styles__wrapper___2KzaS .styles__row___1sQMJ {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
.styles__wrapper___2KzaS .styles__tall___Z_RDX {
    min-height: 52px;
  }
.styles__wrapper___2KzaS .styles__col___1Bym5 {
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: 100%;
  }
.styles__wrapper___2KzaS .styles__col5___PNDcj {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 41.666667%;
            flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
.styles__wrapper___2KzaS .styles__col7___1F1Z3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 58.333333%;
            flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
.styles__wrapper___2KzaS .styles__justifyContentBetween___2n-t5 {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
.styles__wrapper___2KzaS .styles__justifyContentEnd___1AKYq {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
.styles__wrapper___2KzaS .styles__numberOfUsers___2-Szx {
    text-align: right;
  }
.styles__wrapper___2KzaS .styles__numberOfUsersField___2FS1H {
    text-align: right;
    width: 55px;
  }
.styles__wrapper___2KzaS .styles__title___3y5IP {
    font-weight: 600;
  }
.styles__wrapper___2KzaS .styles__totalLine___2xOtF {
    width: 152px;
  }
.styles__wrapper___2KzaS .styles__totalPrice___2VC22 {
    font-size: 18px;
  }
.styles__wrapper___2KzaS .styles__offer___2zPjO {
    color: #43b899;
    font-weight: 700;
  }
.styles__wrapper___2KzaS .styles__additionalUser___11_8r {
    color: #5a6774;
    font-size: 12px;
    margin-left: 28px;
  }
.styles__wrapper___2KzaS .styles__additionalUser___11_8r .styles__error___4_5NT {
      color: #c82828;
    }
.styles__wrapper___2KzaS .styles__additionalUser___11_8r .styles__link___3RwMf {
      color: #0073ec;
      cursor: pointer;
      text-decoration: none
    }
.styles__wrapper___2KzaS .styles__additionalUser___11_8r .styles__link___3RwMf:hover {
  text-decoration: underline;
}
.styles__wrapper___2KzaS .styles__annualPlanSavings___239vz {
    color: #43b899;
    font-size: 14px;
    margin-left: 32px;
    margin-top: 2.4px;
    margin-top: 0.15rem;
  }
.styles__wrapper___2KzaS .styles__annualPlanSavings___239vz .styles__savings___13X6A {
      font-size: 16px;
      font-weight: 600;
    }
.styles__wrapper___2KzaS .styles__button___4usSw {
    height: 30px;
    line-height: 26px;
    min-height: 30px;
    min-width: 190px;
    border-width: 1px;
  }
.styles__wrapper___2KzaS .styles__marginLeft___2bSgX {
    margin-left: 0;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___XVjPf {
  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___3Am3- {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3Am3- {
  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___3jeMf {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3jeMf {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper___2qz6k {
  margin: 0 auto;
}
.styles__wrapper___2qz6k .styles__cardSubTitle___18O0r {
    font-size: 13px;
    line-height: 20px;
    margin: 0 0 16px 0;
    color: #697a89;
  }
.styles__wrapper___2qz6k .styles__doubleFieldRow___1uup6 {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
.styles__wrapper___2qz6k .styles__doubleFieldRow___1uup6 > * {
  lost-column-cycle: 2;
}
.styles__wrapper___2qz6k .styles__doubleFieldRow___1uup6 > *: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__wrapper___2qz6k .styles__doubleFieldRow___1uup6 > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2qz6k .styles__doubleFieldRow___1uup6 > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__wrapper___2qz6k .styles__doubleFieldRow___1uup6 > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2qz6k .styles__doubleFieldRow___1uup6 > *: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__wrapper___2qz6k .styles__doubleFieldRow___1uup6 > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2qz6k .styles__doubleFieldRow___1uup6 > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__wrapper___2qz6k .styles__doubleFieldRow___1uup6 > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2qz6k .styles__doubleFieldRow___1uup6 {
  margin-bottom: 15px;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > * {
  lost-column-cycle: 3;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *: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__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(24.975% - 9px);
  max-width: calc(24.975% - 9px);
  width: calc(24.975% - 9px);
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(16.65% - 10px);
  max-width: calc(16.65% - 10px);
  width: calc(16.65% - 10px);
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2qz6k .styles__creditCardRow___2NAlh {
  margin-bottom: 15px;
}
.styles__wrapper___2qz6k .styles__dropDown___1pM1J select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
.styles__wrapper___2qz6k .styles__dropDown___1pM1J {
    position: relative;
  }
.styles__wrapper___2qz6k .styles__noErrorSelect___37GZp {
    margin-bottom: 15px;
  }
.styles__wrapper___2qz6k .styles__dropDown___1pM1J::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 12px;
    border: solid #6f777c;
    border-width: 0 1px 1px 0;
    padding: 5px;
    pointer-events: none;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
.styles__wrapper___2qz6k .styles__select___WWEke {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cccccc;
    background: #fafafb;
    height: 30px;
    line-height: 29px;
    color: #8d9194;
    padding: 0 6px;
    font-size: 14px;
  }
.styles__wrapper___2qz6k .styles__select___WWEke:hover {
    cursor: pointer;
  }
.styles__wrapper___2qz6k .styles__stateZipRow___2EyJP {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
.styles__wrapper___2qz6k .styles__stateZipRow___2EyJP > * {
  lost-column-cycle: 2;
}
.styles__wrapper___2qz6k .styles__stateZipRow___2EyJP > *: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__wrapper___2qz6k .styles__stateZipRow___2EyJP > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2qz6k .styles__stateZipRow___2EyJP > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__wrapper___2qz6k .styles__stateZipRow___2EyJP > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2qz6k .styles__stateZipRow___2EyJP > *: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__wrapper___2qz6k .styles__stateZipRow___2EyJP > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__wrapper___2qz6k .styles__stateZipRow___2EyJP > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__wrapper___2qz6k .styles__stateZipRow___2EyJP > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__wrapper___2qz6k .styles__inputField___13AEG {
    width: 100%;
    border: none;
    border-bottom: 1px solid #cccccc;
    background: #fafafb;
    height: 30px;
    line-height: 29px;
    color: #27343b;
    padding: 0 6px;
    font-size: 14px
  }
.styles__wrapper___2qz6k .styles__inputField___13AEG.styles__error___cI56o {
  border-bottom-color: #c82828;
}
.styles__wrapper___2qz6k .styles__generalError___2R5QR {
    margin-top: 15px;
    color: #c82828;
  }
.styles__wrapper___2qz6k .styles__button___1oYI8 {
    height: 30px;
    line-height: 26px;
    min-height: 30px;
    min-width: 190px;
    border-width: 1px;
  }
.styles__wrapper___2qz6k .styles__errorMessage___36333 {
    color: #c82828;
    position: relative;
    font-size: 12px;
    margin: 9px 6px;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2xVic {
  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___18-TF {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___18-TF {
  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___6dJzl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___6dJzl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__planDetails___2nq_f {
  height: 180px;
  margin: 30px 0;
  color: #27343b;
}
.styles__planDetails___2nq_f .styles__planTitle___1kOyi {
    font-size: 24px;
    font-weight: 600;
  }
.styles__planDetails___2nq_f .styles__selectPlanType___1SNLA {
    max-width: 95%;
  }
.styles__planDetails___2nq_f .styles__selectPlanType___1SNLA .styles__radioGroup___2KxYl {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: wrap;
              flex-direction: wrap;
      -webkit-box-align: top;
          -ms-flex-align: top;
              align-items: top
    }
.styles__planDetails___2nq_f .styles__selectPlanType___1SNLA .styles__radioGroup___2KxYl > * {
  margin-bottom: 7px;
  white-space: nowrap;
}
.styles__planDetails___2nq_f .styles__planToggle___3iX1N {
    position: relative;
    top: -3px;
    margin-left: 13px;
    color: #007bff;
    font-size: 12px;
    font-weight: 500;
    width: 115px;
  }
.styles__planDetails___2nq_f .styles__planToggle___3iX1N ul {
      margin-top: 4px !important;
      font-size: 12px;
      right: 8px;
    }
.styles__planDetails___2nq_f .styles__planToggle___3iX1N ul li {
        overflow: hidden;
        text-overflow: ellipsis;
      }
.styles__planDetails___2nq_f .styles__priceText___2mdQe {
    font-size: 28px;
  }
.styles__planDetails___2nq_f .styles__priceText___2mdQe .styles__repoCost___3d4M- {
      color: #768491;
      line-height: 25px;
    }
.styles__planDetails___2nq_f .styles__priceText___2mdQe .styles__savingsWrapper___2tB7- {
      display: inline-block;
      font-size: 12px;
      line-height: 16px;
      margin-left: 15px;
    }
.styles__planDetails___2nq_f .styles__priceText___2mdQe .styles__savingsPrice___30cHA {
      color: #000000;
    }
.styles__planDetails___2nq_f .styles__priceText___2mdQe .styles__altPrice___zbAUp {
      color: #9e1011;
      text-decoration: line-through;
    }
.styles__planDetails___2nq_f .styles__priceText___2mdQe .styles__annualPrice___winum {
      position: relative;
      top: -3px;
    }
.styles__planDetails___2nq_f .styles__annualPlanSavings___1UBS8 {
    color: #43b899;
    font-size: 14px;
    margin-bottom: 12px;
    min-height: 23px;
    line-height: 20px;
  }
.styles__planDetails___2nq_f .styles__annualPlanSavings___1UBS8 .styles__savings___2lPdQ {
      font-size: 16px;
      font-weight: 600;
    }
.styles__planDetails___2nq_f .styles__offerName___216-j {
    color: #43b899;
    font-size: 14px;
    font-weight: 700;
  }
.styles__planDetails___2nq_f .styles__featuresList___3I7w9 {
    margin-top: 12px;
  }
.styles__planDetails___2nq_f .styles__featuresList___3I7w9 .styles__planFeature___3aq8N {
      font-size: 14px;
      line-height: 20px;
      color: #27343b;
      font-size: 16px;
      color: #768491;
      line-height: 24px;
      margin-bottom: 4px;
    }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1znOG {
  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___2dmqs {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2dmqs {
  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___17_m4 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___17_m4 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper___33sP4 {
  margin: 0 15px 70px;
}
.styles__wrapper___33sP4 > div {
    max-width: 870px;
    margin: 0 auto;
  }
.styles__wrapper___33sP4 .styles__hero___3HLZh {
    text-align: center;
    margin: 60px 0 40px;
  }
.styles__wrapper___33sP4 .styles__hero___3HLZh .styles__title___3UU2s {
      font-size: 38px;
      line-height: 52px;
      margin-bottom: 10px;
    }
.styles__wrapper___33sP4 .styles__hero___3HLZh .styles__subtitle___3eUel {
      color: #6f777c;
      font-size: 18px;
      margin: 10px 0 30px;
    }
.styles__wrapper___33sP4 .styles__buttonWrapper___JMF4R {
    margin-top: 30px;
  }
.styles__wrapper___33sP4 .styles__subscribeButton___1ATX5 {
    width: 190px;
  }
.styles__card___1eiT4 {
  background-color: #ffffff;
  padding: 28px 50px 18px;
  min-height: 510px;
}
.styles__card___1eiT4 .styles__cardTitle___PgGkv {
    margin: 6px 0 15px;
    font-size: 22px;
    line-height: 34px;
    font-weight: 400;
  }
.styles__card___1eiT4 .styles__cardSubTitle___uAgZK {
    font-size: 14px;
    line-height: 19px;
    color: #404d59;
    margin: -10px 0 30px;
    max-width: 350px;
  }
.styles__card___1eiT4 .styles__cardSubTitle___uAgZK > p {
      margin: 0 0 4px;
    }
.styles__row___1jb-C {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.styles__formWrapper___3sylD {
  width: 60%;
  margin-right: 40px;
}
.styles__newOrgHeight___2_dxx {
  min-height: 340.7px;
}
.styles__selectedPlanCard___bu_AA {
  margin: 0 30px;
  width: 40%;
}
@media only screen and (max-width: 960px) {
  .styles__formWrapper___3sylD {
    width: 100%;
    margin-right: 0;
  }
  .styles__selectedPlanCard___bu_AA {
    display: none;
  }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1oAhj {
  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___3zZVJ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3zZVJ {
  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___3Q7bM {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3Q7bM {
  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__parent___3_5iy {
  font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  position: relative;
}
.styles__parent___3_5iy .styles__card___2YjUI {
    max-width: 320px;
    min-width: 320px;
    min-height: 300px;
    padding: 40px 29px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 2px 6px 0 #e0e4e7,
  inset -1px 0 0 0 rgba(224, 227, 231, .3), inset 0 -1px 0 0 #e0e4e7,
  inset 1px 0 0 0 rgba(224, 227, 231, .2);
            box-shadow: 0 2px 6px 0 #e0e4e7,
  inset -1px 0 0 0 rgba(224, 227, 231, .3), inset 0 -1px 0 0 #e0e4e7,
  inset 1px 0 0 0 rgba(224, 227, 231, .2);
    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__parent___3_5iy .styles__card___2YjUI.styles__isChoosePlanPage___1kHL7 {
  padding: 40px 30px;
  min-height: 560px;
}
.styles__parent___3_5iy .styles__card___2YjUI.styles__marginSm___6Noox {
  margin: 0 8px;
}
.styles__parent___3_5iy .styles__card___2YjUI.styles__marginLg___29tTq {
  margin: 0 8px;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__horizontalTitleBar___3tv2Q {
      width: 320px;
      height: 4px;
      background: transparent;
      color: transparent;
      position: relative;
      top: -40px;
      left: -29px;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__horizontalTitleBar___3tv2Q.styles__isChoosePlanPage___1kHL7 {
  top: -40px;
  left: -30px;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__horizontalTitleBar___3tv2Q.styles__free___31Amr {
  background: #6fb6f6;
  color: transparent;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__horizontalTitleBar___3tv2Q.styles__freeTeam___14naD {
  background: #6fb6f6;
  color: transparent;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__horizontalTitleBar___3tv2Q.styles__pro___dE9_z {
  background: #007bff;
  color: transparent;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__horizontalTitleBar___3tv2Q.styles__team___3mWXP {
  background: #003f8c;
  color: transparent;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__name___2jD2v {
      font-size: 36px;
      font-weight: 500;
      color: #161f2a;
      line-height: 26px;
      margin-bottom: 10px;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__desc___El42c {
      font-size: 16px;
      line-height: 18px;
      margin-bottom: 20px;
      text-transform: uppercase;
      color: #768491;
      font-weight: 500;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__features___2OA-r {
      font-size: 18px;
      line-height: 22px;
      color: #26323f;
      margin-bottom: 27px;
      text-align: left;
      width: 100%;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__features___2OA-r.styles__isOnChoosePlanPage___1lyr8 {
  min-height: 300px;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__features___2OA-r .styles__pricingPageFeature___zA3vV {
        position: relative;
        margin-bottom: 12px;
        text-align: left;
        min-height: 145px;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__features___2OA-r .styles__feature___2ORCx {
        position: relative;
        margin-bottom: 12px;
        text-align: left;
        padding-left: 24px;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__features___2OA-r .styles__feature___2ORCx .styles__checkIcon___1QieN {
          position: absolute;
          left: -2px;
          top: -1px;
          fill: #aae8d8;
        }
.styles__parent___3_5iy .styles__card___2YjUI .styles__features___2OA-r .styles__feature___2ORCx .styles__checkIcon___1QieN > svg {
            width: 20px;
            height: 18px;
          }
.styles__parent___3_5iy .styles__card___2YjUI .styles__price___1vR4Q {
      min-height: 55px;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__price___1vR4Q .styles__priceField___FGNDO {
        font-size: 22px;
        margin-bottom: 8px;
        color: #27343b;
        font-weight: 400;
        line-height: 17px;
      }
.styles__parent___3_5iy .styles__card___2YjUI .styles__price___1vR4Q .styles__priceField___FGNDO .styles__price___1vR4Q {
          font-size: 22px;
          font-weight: 600;
        }
.styles__parent___3_5iy .styles__card___2YjUI .styles__price___1vR4Q .styles__priceField___FGNDO .styles__priceMonth___2YPat {
          font-size: 18px;
        }
.styles__parent___3_5iy .styles__card___2YjUI .styles__price___1vR4Q .styles__priceDescription___HojQh {
        font-size: 18px;
        line-height: 21px;
        color: #5a6774;
      }
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB {
      width: 100%;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__currentPlan___UsKgM {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        font-size: 18px;
        line-height: 28px;
        margin: 4px 0;
        font-weight: 600;
        -ms-flex-item-align: center;
            align-self: center;
      }
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57 {
        font-size: 16px;
        width: calc(100% - 12px);
        min-width: 260px;
        margin: 0
      }
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57.styles__free___31Amr {
  background: #007bff;
  border-color: #007bff;
  color: #007bff;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57.styles__free___31Amr:hover {
  background-color: #099cec;
  border-color: #099cec;
  color: #099cec;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57.styles__freeTeam___14naD {
  background-color: white;
  color: #007bff;
  border-color: #007bff;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57.styles__freeTeam___14naD:hover {
  color: #099cec;
  border-color: #099cec;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57.styles__pro___dE9_z {
  background: #007bff;
  border-color: #007bff;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57.styles__pro___dE9_z:hover {
  background-color: #099cec;
  border-color: #099cec;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57.styles__team___3mWXP {
  background: #003f8c;
  border-color: #003f8c;
}
.styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57.styles__team___3mWXP:hover {
  background-color: #0151ad;
  border-color: #0151ad;
}
.styles__parent___3_5iy .styles__learnMore___35_-l {
    color: #007bff;
    font-weight: 500;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 22px;
    text-decoration: none;
    cursor: pointer;
  }
.styles__parent___3_5iy .styles__offer___KpTdN {
    position: absolute;
    top: 4px;
    right: 8px;
    padding: 6px 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    min-width: 120px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 800;
    background-color: #cc4e09;
    color: #ffffff;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
.styles__parent___3_5iy .styles__offer___KpTdN > .styles__endDate___3_Uz1 {
      font-weight: 400;
      font-size: 12px;
      line-height: 1.25;
    }
@media only screen and (max-width: 600px) {
    .styles__parent___3_5iy .styles__card___2YjUI {
      min-width: auto;
    }
        .styles__parent___3_5iy .styles__card___2YjUI .styles__action___xRKQB .styles__button___VdV57 {
          min-width: 150px;
        }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___eUnV6 {
  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___19KKX {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___19KKX {
  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___X8dcb {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___X8dcb {
  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___12r_q {
  padding: 1px 0 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;
  margin-bottom: 140px;
}
.styles__hero___1cbMO {
  text-align: center;
  margin: 40px 0 52px;
}
.styles__hero___1cbMO .styles__title___2H5oK {
    font-size: 38px;
    font-weight: bold;
  }
.styles__hero___1cbMO .styles__subTitle___1UWNI {
    font-size: 16px;
    color: #6f777c;
  }
.styles__plans___lYpal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 110px;
  font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important;
}
.styles__plans___lYpal .styles__planGroup___2_MQl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 50px;
  }
.styles__plans___lYpal .styles__planGroup___2_MQl .styles__cards___N9Qiy {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: 364px;
}
.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: 364px;
    margin-bottom: 15px;
  }
.styles__formWrapper___3qIad .styles__fieldBorderError___3QDM6 {
    height: 0;
    border: 0.5px solid #c82828;
    width: 364px;
    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: 364px;
  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: 364px;
}
.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__inputResult___1L6-8 .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: 364px;
  height: 36px;
  cursor: pointer;
  margin: 0 5px 5px 0;
  border: none;
  outline: none;
}
button:disabled {
  opacity: 0.5;
  cursor: 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: 364px;
    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;
}
.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: 364px;
  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: 19px;
  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__hasError___2XTkj {
  margin-top: 0;
}
.styles__termsOfService___1hzv2 .styles__euta___1F07X {
    margin-bottom: 5px;
    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;
      overflow: hidden;
      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;
}
@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;
        overflow: hidden;
        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: 364px;
      }
.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: 364px;
        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: 364px;
        -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: 364px;
        margin-bottom: 20px;
      }
.styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW {
        border: 0.5px solid #b7bbbe;
        width: 364px;
        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: 364px;
        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: 364px;
        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: 364px;
          height: 40px;
        }

        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__stateProvinceField___1mEV7 {
          width: 364px;
        }

        .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW {
          width: 364px;
        }

        .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: 364px;
      }
}
@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;
    }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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(00e87e77f463fab89eada677d6bf3b87.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;
      }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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(fb1a2508c5b45793ef25e2112f34d8a4.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;
      }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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-position: left center;
    background-size: cover;
    background-image: url(847d80c466323f9902369474710602a0.svg);
  }
.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: 18%;
    }
}
@media (max-width: 1200px) {
      .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 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 */
/* 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 */
/* Nautilus colors */
/* 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___1-3i7 {
  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___1w9xN {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1w9xN {
  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___16-4G {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___16-4G {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__breadcrumbs___18Yr8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.styles__breadcrumb___9YQZc {
  position: relative;
  color: rgba(37, 67, 86, .7);
  padding: 11px 11px 11px 22px;
}
.styles__breadcrumbLink___29y-D {
  text-decoration: none
}
.styles__breadcrumbLink___29y-D:hover {
  color: #099cec;
}
/* First breadcrumb does not need as much left padding */
.styles__breadcrumb___9YQZc:first-child {
  padding: 11px 5.5px 11px 11px;
}
.styles__breadcrumb___9YQZc:last-child {
  color: #099cec;
}
/* Arrow background */
.styles__breadcrumb___9YQZc::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___9YQZc::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;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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__repoUsage___1GVBC a {
    font-weight: 600;
    color: #1aaaf8;
  }
.styles__warn___3UyH6 {
  color: #bf3b42;
}
.styles__warn___3UyH6 a {
    font-weight: 600;
  }

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

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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__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;
  border-radius: 50%;
  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__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__editLink___3a5pj {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  margin-left: 8px;
  color: #099cec;
  cursor: pointer;
  text-decoration: none;
}
.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;
}

.styles__contextNav___3Y98D {
  border-bottom: 1px solid #ffffff;
}

.styles__profileHeaderBar___26vpF {
  height: 100%;
  background: white;
  border-bottom: 1px solid #e0e4e7;
}

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

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2EX0p {
  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___2Ahua {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2Ahua {
  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___12Nw- {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___12Nw- {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__errorText___6ydoF {
  display: none;
  color: #e12b0c;
  font-size: 12px;
  line-height: 12px;
  height: 12px;
  margin-top: 4px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___4JfXV {
  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___1mM3_ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1mM3_ {
  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___2uCub {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2uCub {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__subnavWrapper___17yeU {
  background-color: #ffffff;
  color: #254356;
  border-bottom: 1px solid #e0e4e7;
  z-index: 2;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.styles__subnavWrapper___17yeU h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
  }
.styles__nav___2Wc4j {
  fill: #8f9ea8;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.styles__select___2sZwe {
  margin-top: 12px;
  width: 364px;
}
.styles__previousView___3T1J2 {
  color: #8f9ea8;
  cursor: pointer
}
.styles__previousView___3T1J2:hover {
  color: #254356;
}
.styles__breadcrumb___xUDUi {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.styles__subnav___3eBHp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 64px;
  max-width: 1280px;
  -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 auto;
  padding: 0 32px;
}
@media only screen and (max-width: 600px) {
  .styles__subnav___3eBHp {
    padding: 0 12px;
  }
}
.styles__namespaceSelect___2f0kF {
  height: 36px;
  width: 200px;
}
.styles__text___36XCp {
  margin-right: 12px;
}
.styles__namespaceSelectWrapper___2tUdw {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: #8f9ea8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3HK9F {
  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___3El4s {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3El4s {
  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___3tcRt {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3tcRt {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__action___2zoyX {
  text-decoration: none;
  color: #007bff;
  font-weight: 600;
}

/* SearchInput styles */

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

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

/* Nautilus colors */

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

.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: 700px;
      line-height: 1.5;
    }

  .styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__offerTitle___Hu6f5 {
        font-size: 18px;
        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 .styles__link___1MPVF {
          font-size: 14px;
          line-height: 18px;
          font-weight: 600;
          color: #0073ec;
          cursor: pointer;
        }

  .styles__offerCard___7ujUa button {
    min-width: 120px;
    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;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___12vH8 {
  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___11u6r {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___11u6r {
  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___Rh4gp {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___Rh4gp {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__ctaCard___8Z9Ft {
  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__ctaCard___8Z9Ft .styles__ctaWrapper___mKBbU {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
.styles__ctaCard___8Z9Ft .styles__ctaWrapper___mKBbU .styles__ctaContent___1V1nV {
      margin-left: 30px;
      max-width: 800px;
      line-height: 1.5;
    }
.styles__ctaCard___8Z9Ft .styles__ctaWrapper___mKBbU .styles__ctaContent___1V1nV .styles__ctaTitle___1Bmey {
        font-size: 18px;
        font-weight: 600;
      }
.styles__ctaCard___8Z9Ft .styles__ctaWrapper___mKBbU .styles__ctaContent___1V1nV .styles__ctaText___CkcOh {
        margin-top: 3px;
      }
.styles__ctaCard___8Z9Ft button {
    min-width: 120px;
    min-height: 30px;
    line-height: 30px;
    border: 0;
    margin-left: 20px;
  }
.styles__ctaIcon___1r9Nv {
  -ms-flex-item-align: center;
      align-self: center;
  min-height: 40px;
  min-width: 40px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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-right: 8px;
}
.styles__icon___2Jvs1 {
  width: 16px;
  height: 16px;
}
.styles__icon___2Jvs1 {
  margin-right: 8px;
}
.styles__tiny___-Pb2p {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: 600;
}
.styles__tiny___-Pb2p .styles__icon___2Jvs1 {
  width: 12px;
  height: 12px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2YFcP {
  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___2kYuC {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2kYuC {
  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___Cpj26 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___Cpj26 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__tooltip___2XwC5 {
  max-width: 265px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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;
}
.styles__toggleStar___2Qlmf {
  cursor: pointer;
  border-radius: 2px
}
.styles__toggleStar___2Qlmf:hover {
  cursor: pointer;
}
.styles__spinner___2PHNs {
  background-color: #ffffff;
}
.styles__starText___1dnpI {
  font-weight: normal;
  margin-right: 8px;
}
.styles__starNum___2YkOL {
  background: #ffffff;
  padding: 0 12px;
}
.styles__tooltip___3-j7I {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 8px;
}
.styles__tooltip___3-j7I .styles__iconInTooltip___2e1tB {
  width: 20px;
  height: 20px;
}
.styles__icon___4_It0 {
  width: 20px;
  height: 20px;
}
.styles__icon___4_It0 {
  margin: 8px;
}
.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 {
  width: 12px;
  height: 12px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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 {
    margin-right: 8px;
  }
.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%;
  padding: 20px;
  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 {
  width: 18px;
  height: 18px;
}
.styles__repoCard___2bqxx .styles__right___3IqHY svg {
  margin-right: 4px;
  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;
  }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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-m51 {
  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___2m5aA {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2m5aA {
  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___2wnmu {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2wnmu {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__content___blBhs {
  margin-bottom: 32px;
}
.styles__title___fLey3 {
  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;

  /* only really affects things on tiny screens */
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.styles__title___fLey3 > * {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }
.styles__title___fLey3 .styles__filter___22eC4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
.styles__title___fLey3 .styles__filter___22eC4 > div + div {
      margin-left: 12px;
    }
.styles__title___fLey3 .styles__filter___22eC4 .styles__searchInput___1eZfm {
      width: 238px;
    }
.styles__title___fLey3 button {
    margin: 0;
    padding: 0 12px;
    border-radius: 4px;
  }
.styles__title___fLey3 button a {
      text-decoration: none;
      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__title___fLey3 button a svg {
        top: 0 !important;
      }
.styles__staleImagesCta___1xuIG {
  margin-top: 20px;
  margin-bottom: 0;
}
.styles__loading___5vaec {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 32px;
}
.styles__repoInfoCard___1krNF {
  padding: 20px;
  margin-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.styles__repoInfoCard___1krNF img {
    height: 50px;
    margin-right: 32px;
  }
.styles__divider___HpslD {
  margin: 64px 0 48px 0;
}
@media only screen and (max-width: 480px) {
  .styles__title___fLey3 {
    -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__title___fLey3 .styles__filter___22eC4 {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2Ri2y {
  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___3pm4w {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3pm4w {
  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___3AqKx {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3AqKx {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__content___1gzuP {
  padding-top: 32px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2sg8Q {
  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___2RKWI {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2RKWI {
  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___3hJFY {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3hJFY {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__header___3qVFG {
  background-color: #ffffff;
  padding: 48px 20px 40px;
  border-bottom: 1px solid #e0e4e7;
}
.styles__headerPaddingWithCTA___1NoYo {
  padding-bottom: 10px;
}
.styles__pageTitle___gMeGq {
  font-size: 28px;
  line-height: 40px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: bold;
}
.styles__wrapperContainer___2m0xd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.styles__legacyCTA___3_RET {
  margin-top: 20px;
}
.styles__updatePlan___1CLnF {
  line-height: 18px;
  color: #db7432;
  font-weight: 600;
}
.styles__updatePlan___1CLnF > div {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
  }
.styles__tooltipContent___16wz5 {
  width: 150px;
}
.styles__ctaIcon___3_pU_ {
  height: 18px;
  width: 18px;
}
.styles__main___1zg_M {
  padding-top: 24px;
  padding-bottom: 40px;
}
.styles__actions___2H53Z::before,
  .styles__actions___2H53Z::after {
  content: ' ';
  display: table;
}
.styles__actions___2H53Z::after {
  clear: both;
}
.styles__actions___2H53Z {
  margin-bottom: 12px;
  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;
}
@media only screen and (max-width: 480px) {
  .styles__pageTitle___gMeGq {
    -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__pageTitle___gMeGq .styles__filter___2jDWG {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
}
.styles__orgLink___3eqIf {
  text-decoration: none;
}
.styles__orgCard___3WQS3 {
  width: 100%;
  margin-bottom: 12px;
  cursor: pointer;
  text-decoration: none;
  padding: 20px 28px;
}
.styles__listItem___2_hZ5 {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}
.styles__listItem___2_hZ5 > * {
  lost-column-cycle: 5;
}
.styles__listItem___2_hZ5 > *: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__listItem___2_hZ5 > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___2_hZ5 > *: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__listItem___2_hZ5 > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___2_hZ5 > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(12.4875% - 10.5px);
  max-width: calc(12.4875% - 10.5px);
  width: calc(12.4875% - 10.5px);
}
.styles__listItem___2_hZ5 > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___2_hZ5 > *:nth-child(4) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(16.65% - 10px);
  max-width: calc(16.65% - 10px);
  width: calc(16.65% - 10px);
}
.styles__listItem___2_hZ5 > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(4):last-child {
  margin-right: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(4):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___2_hZ5 > *:nth-child(5) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(12.4875% - 10.5px);
  max-width: calc(12.4875% - 10.5px);
  width: calc(12.4875% - 10.5px);
}
.styles__listItem___2_hZ5 > *:nth-child(5):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(5):last-child {
  margin-right: 0;
}
.styles__listItem___2_hZ5 > *:nth-child(5):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___2_hZ5 {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.styles__listItem___2_hZ5 > div {
  -ms-flex-item-align: center;
      align-self: center;
}
.styles__listItem___2_hZ5 .styles__name___1w6b_ {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 18px;
}
.styles__listItem___2_hZ5 .styles__name___1w6b_ > div {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}
.styles__listItem___2_hZ5 .styles__noDescription___q0qrR {
    color: #c0c9ce;
    font-style: italic;
}
.styles__listHeader___3r_gG {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}
.styles__listHeader___3r_gG > * {
  lost-column-cycle: 4;
}
.styles__listHeader___3r_gG > *: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__listHeader___3r_gG > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listHeader___3r_gG > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__listHeader___3r_gG > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listHeader___3r_gG > *: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__listHeader___3r_gG > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listHeader___3r_gG > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__listHeader___3r_gG > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listHeader___3r_gG > *:nth-child(3) {
  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__listHeader___3r_gG > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listHeader___3r_gG > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__listHeader___3r_gG > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listHeader___3r_gG > *:nth-child(4) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(12.4875% - 10.5px);
  max-width: calc(12.4875% - 10.5px);
  width: calc(12.4875% - 10.5px);
}
.styles__listHeader___3r_gG > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listHeader___3r_gG > *:nth-child(4):last-child {
  margin-right: 0;
}
.styles__listHeader___3r_gG > *:nth-child(4):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listHeader___3r_gG {
  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___3r_gG div {
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 12px;
    color: #8f9ea8;
}
.styles__centerText___13Edi {
  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__emptyState___2xQoi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 100px 20px;
}
.styles__emptyState___2xQoi .styles__image___ta7zg {
    max-width: 260px;
  }
.styles__emptyState___2xQoi .styles__image___ta7zg > img {
      width: 100%;
    }
.styles__emptyState___2xQoi .styles__textContent___DjJjz {
    max-width: 425px;
    margin-left: 55px;
  }
.styles__emptyState___2xQoi .styles__textContent___DjJjz .styles__title___3efgb {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 5px;
      line-height: 1.25;
    }
.styles__emptyState___2xQoi .styles__textContent___DjJjz .styles__subTitle___3SeN_ {
      font-size: 14px;
      margin-bottom: 20px;
      line-height: 1.5;
    }
@media (max-width: 780px) {
  .styles__emptyState___2xQoi {
    margin: 50px 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

    .styles__emptyState___2xQoi .styles__image___ta7zg {
      margin-bottom: 30px;
    }

    .styles__emptyState___2xQoi .styles__textContent___DjJjz {
      margin: 0;
    }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* Publish flow */
/* Public Profile */
/* v2 */
/* Sign up form width */
.styles__titleSection___1SWSc {
  text-align: center;
  margin: 60px 0 40px;
}
.styles__titleSection___1SWSc .styles__title___1Wm1z {
    font-size: 38px;
    line-height: 52px;
    margin-bottom: 10px;
  }
.styles__titleSection___1SWSc .styles__subtitle___1VhJ4 {
    font-size: 18px;
    margin: 10px 0 30px;
    color: #697a89;
  }
.styles__plans___1pjXI {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 140px;
}
.styles__pricingCardWrapper___3QgHs {
  min-width: 300px;
  margin-bottom: 30px;
}
.styles__wrapper___xF7nw {
  margin: 0 15px 70px;
}
.styles__wrapper___xF7nw > div {
    max-width: 870px;
    margin: 0 auto;
  }
.styles__orgSizeCard___2-_8O {
  background-color: #ffffff;
  padding: 28px 50px;
  min-height: 510px;
}
.styles__orgSizeCard___2-_8O .styles__cardTitle___11Zjv {
    margin: 5px 0 24px;
    font-size: 22px;
  }
.styles__paymentMethodCard___c6lf8 {
  background-color: #ffffff;
  padding: 28px 50px 18px;
  min-height: 510px;
}
.styles__paymentMethodCard___c6lf8 .styles__defaultPaymentBlock___25VBR {
    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;
    background-color: #f7f7f8;
    margin: 25px 0 20px;
    width: 389px;
    height: 217px;
    border-radius: 20px;
    border: 1px solid #d7dade;
    color: #26323f;
  }
.styles__paymentMethodCard___c6lf8 .styles__defaultPaymentText___3ITDI {
    font-weight: 600;
  }
.styles__paymentMethodCard___c6lf8 .styles__icon___3Zpaz {
    fill: #26323f;
    top: 5px;
    position: relative;
    margin-right: 8px;
  }
.styles__paymentMethodCard___c6lf8 .styles__creditCard___1y7ap {
    font-size: 18px;
  }
.styles__paymentMethodCard___c6lf8 .styles__expires___BNv-4 {
    font-size: 14px;
    margin-left: 32px;
  }
.styles__paymentMethodCard___c6lf8 .styles__addPayment___3H5ZS {
    text-decoration: underline;
    cursor: pointer;
  }
.styles__paymentMethodCard___c6lf8 .styles__cardTitle___11Zjv {
    margin: 5px 0 24px;
    font-size: 22px;
  }
.styles__paymentMethodCard___c6lf8 .styles__button___2Wf7u {
    height: 30px;
    line-height: 26px;
    min-height: 30px;
    min-width: 190px;
    border-width: 1px;
  }
.styles__paymentMethodCard___c6lf8 .styles__backButton___3EpT0 {
    margin-left: 0;
  }
.styles__row___27Krf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.styles__formWrapper___XpYPI {
  min-height: 320px;
  width: 60%;
  margin-right: 40px;
}
.styles__submit___3nQ-d {
  height: 30px;
  line-height: 26px;
  min-height: 30px;
  min-width: 190px;
  border-width: 1px;
}
.styles__marginLeft___1i0Pd {
  margin-left: 0;
}
.styles__selectedPlanCard___2Huav {
  margin: 0 30px;
  width: 40%;
}
.styles__card___27uqp {
  background-color: #ffffff;
  padding: 28px 50px;
  min-height: 510px;
}
.styles__card___27uqp .styles__cardTitle___11Zjv {
    font-size: 22px;
    font-weight: 600;
  }
.styles__card___27uqp .styles__cardText___3htv7 {
    font-size: 18px;
    min-height: 312px;
    margin-top: 50px;
  }
.styles__card___27uqp .styles__confirmationText___VTQ6I {
    margin-top: 50px;
  }
.styles__card___27uqp .styles__requirementsText___5szu1 {
    margin-top: 25px;
  }
.styles__surveyContent___vAh7T {
  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;
  padding-top: 38px;
}
.styles__surveyContent___vAh7T .styles__checkbox___wsddJ {
    margin-bottom: 16px;
    font-weight: 500;
  }
.styles__surveyContent___vAh7T .styles__dropdownWrapper___4sJj2 {
    margin-left: 34px;
  }
.styles__surveyContent___vAh7T .styles__dropdown___3SJ8P {
    margin-bottom: 16px;
  }
.styles__surveyContent___vAh7T .styles__comment___3kYWp {
    margin-top: 32px;
    margin-bottom: 20px;
  }
.styles__surveyContent___vAh7T .styles__comment___3kYWp .styles__textarea___e8XKo {
      min-height: 100px;
      margin-top: 8px;
    }
.styles__surveyContent___vAh7T .styles__otherInput___3G5ss {
    margin-top: -10px;
    margin-bottom: 16px;
  }
.styles__surveyContent___vAh7T .styles__skip___36say {
    height: 30px;
    line-height: 26px;
    min-height: 30px;
    color: #0073ec;
    cursor: pointer;
    font-weight: 700;
    padding: 0 30px;
    margin: 0 10px
  }
.styles__surveyContent___vAh7T .styles__skip___36say:hover {
  text-decoration: underline;
}
.styles__surveyContent___vAh7T .styles__textarea___e8XKo {
    background: #f7f8f9;
    border: solid 1px #e0e4e7;
    width: 100% !important;
    height: 38px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 2px;
  }
.styles__controls___CmDip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.styles__controls___CmDip button {
    height: 30px;
    line-height: 26px;
    min-height: 30px;
    min-width: 187px;
    border-width: 1px;
    background-color: #ffffff !important
  }
.styles__controls___CmDip button:hover {
  background-color: #ffffff !important;
}
.styles__generalError___QnYJD {
  margin: 15px 0;
  color: #c82828;
}
.styles__subCheckboxes___1Cr1P {
  margin-left: 37px;
}

.styles__namespaceCard___Fl4fA {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 5px;
  background-color: #f2f3f5;
  width: 340px;
  height: 60px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 11px 14px;
  margin: 16px 0;
  color: #26323f;
}

  .styles__namespaceCard___Fl4fA .styles__namespaceIcon___3nNpx {
    margin-right: 14px;
    width: 38px;
    border-radius: 50%;
    background-color: #54d1b0;
    border: 1px solid #8de2cc;
    text-align: center;
    line-height: 36px;
    font-weight: 700;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase
  }

  .styles__namespaceCard___Fl4fA .styles__namespaceIcon___3nNpx.styles__orgIcon___4FnB3 {
  background-color: rgba(36, 150, 237, 0.50196);
  border: 1px solid rgba(255, 255, 255, 0.25098);
}

  .styles__namespaceCard___Fl4fA .styles__namespace___3PMKF {
    font-weight: 700;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2IfUX {
  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___FeWmq {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___FeWmq {
  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___sRVcH {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___sRVcH {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper___vSjvs {
  margin: 0 15px 70px;
}
.styles__wrapper___vSjvs > div {
    max-width: 870px;
    margin: 0 auto;
  }
.styles__card___S2JNi {
  background-color: #ffffff;
  padding: 28px 50px;
  min-height: 510px;
}
.styles__card___S2JNi .styles__cardTitle___21FgE {
    font-size: 22px;
    font-weight: 600;
  }
.styles__card___S2JNi .styles__cardTitle___21FgE .styles__planName___2wBx1 {
      text-transform: capitalize;
    }
.styles__card___S2JNi .styles__cardContent___3ikCw {
    font-size: 18px;
    min-height: 240px;
    margin: 40px 0 10px;
  }
.styles__submit____neVQ {
  height: 30px;
  line-height: 26px;
  min-height: 30px;
  min-width: 190px;
  border-width: 1px;
}
.styles__marginLeft___2lenP {
  margin-left: 0;
}
.styles__titleSection___2lFuU {
  text-align: center;
  margin: 60px 0 40px;
}
.styles__titleSection___2lFuU .styles__title___332us {
    font-size: 38px;
    line-height: 52px;
    margin-bottom: 10px;
  }
.styles__titleSection___2lFuU .styles__subtitle___PkEc0 {
    font-size: 18px;
    margin: 10px 0 30px;
    color: #697a89;
  }
.styles__generalError___14oqN {
  margin: 15px 0;
  color: #c82828;
}
.styles__buttonsGroup___2fu_1 {
  margin: 12px 0;
}
.styles__buttonsGroup___2fu_1 > .styles__button___h6Skg:first-child {
    margin-left: 0;
  }
.styles__buttonsGroup___2fu_1 .styles__button___h6Skg {
    height: 30px;
    line-height: 26px;
    min-height: 30px;
    min-width: 190px;
    border-width: 1px;
    padding: 0 20px;
  }
.styles__link___1FPbc {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: #0073ec;
  cursor: pointer;
  text-decoration: none
}
.styles__link___1FPbc:hover {
  text-decoration: underline;
}
.styles__error___ZLSrQ {
  color: #e12b0c;
  margin-bottom: 12px;
}
.styles__formGroup___3xKWD {
  margin-bottom: 16px;
  margin-bottom: 1rem;
}
.styles__row___1MaAo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.styles__tall___334NY {
  min-height: 52px;
}
.styles__col___29Nt1 {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  max-width: 100%;
}
.styles__col5___ms6sI {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 41.666667%;
          flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
.styles__col7___2ir08 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 58.333333%;
          flex: 0 0 58.333333%;
  max-width: 58.333333%;
}
.styles__justifyContentBetween___2yQP1 {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.styles__justifyContentEnd___1ksu2 {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.styles__numberOfUsers___3c7_U {
  text-align: right;
}
.styles__numberOfUsersField___dTSPr {
  text-align: right;
  width: 55px;
}
.styles__title___332us {
  font-weight: 600;
}
.styles__totalLine___3GKoT {
  width: 152px;
}
.styles__totalPrice___HpEZJ {
  font-size: 18px;
}
.styles__annualPlanSavings___305uj {
  color: #43b899;
  font-size: 14px;
  margin-left: 32px;
  margin-top: 2.4px;
  margin-top: 0.15rem;
}
.styles__annualPlanSavings___305uj .styles__savings___3CMVd {
    font-size: 16px;
    font-weight: 600;
  }

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

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

.styles__idpInfo___guuRX {
  font-size: 13px;
}

  .styles__idpInfo___guuRX .styles__idpSettingsLink___1kUnO {
    color: #099cec;
    cursor: pointer;
    text-decoration: none;
  }

  .styles__idpInfo___guuRX .styles__idpSettingsLink___1kUnO:hover {
    text-decoration: underline;
  }

  .styles__idpInfo___guuRX .styles__idpStatus___1eO18 {
    color: #5a6774;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: #099cec;
}
.styles__tabsSection___2Gs_c .styles__selected___3RxPo {
    font-weight: 600;
    color: #099cec;
    border-bottom: 2px solid #099cec;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___Cg37K {
  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___1MZtn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1MZtn {
  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___1C6zS {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___1C6zS {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__content___3_2zQ {
  min-height: 400px;
  padding: 12px;
}
.styles__sectionTitle___2ZKem {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: 600;
  color: #354a5b;
  margin: 0 0 4px;
}
.styles__teamSelect___RHQzl {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  color: #354a5b;
}
.styles__input___1OZIu {
  width: 100%;
}
.styles__select___3YWcz {
  margin-bottom: 28px;
}
.styles__error___30hgz {
  color: #e12b0c;
  margin-bottom: 12px;
}
.styles__ctas___1cxEr {
  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;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___dZvnB {
  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___102vy {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___102vy {
  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___2sgLx {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2sgLx {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__leaveButtons___mF52Y {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 16px;
}
.styles__errorMessage___3VREW {
  margin-top: 32px;
  color: #ef4a53;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___TqNbj {
  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___2JjYF {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2JjYF {
  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___jX02b {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___jX02b {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__loading___3xkbM {
  padding: 48px 0;
}
.styles__notFound___2j_0t {
  padding: 40px 24px;
}
.styles__icon___1YLK7 {
  fill: #8f9ea8;
}
.styles__iconTooltipWrapper___3ry_V:hover .styles__icon___1YLK7.styles__active___2UYOa {
  cursor: pointer;
  fill: #099cec;
}
.styles__title___1-4wy {
  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___1-4wy button {
    margin: 0;
    padding: 0 12px;
    border-radius: 4px;
  }
.styles__title___1-4wy .styles__searchInput___LC7Gn {
    width: 238px;
    height: 36px;
  }
.styles__subTitle___37bz3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.styles__subTitle___37bz3 .styles__seatsAvailable___12MZ6 {
    margin-right: 16px;
    color: #43b899;
  }
.styles__subTitle___37bz3 .styles__seatsFull___2tPZ4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #27343b;
  }
.styles__subTitle___37bz3 .styles__seatsFull___2tPZ4 .styles__addSeats___1wq-n {
      color: #007bff;
      margin: 0;
    }
.styles__subTitle___37bz3 .styles__seatsFull___2tPZ4 .styles__addSeats___1wq-n .styles__addSeatsButton___3iiqv {
        font-weight: 600;
        text-decoration: underline;
      }
.styles__subTitle___37bz3 .styles__seatsFull___2tPZ4 .styles__addSeats___1wq-n button {
        padding-left: 7px;
        padding-right: 12px;
        color: #007bff;
      }
.styles__subTitle___37bz3 .styles__seatsFull___2tPZ4 .styles__tooltip___10kxz {
      margin-right: 4px;
      padding-top: 6px;
    }
.styles__subTitle___37bz3 .styles__seatsFull___2tPZ4 .styles__seatsFilled___3Yjzz {
      color: #43b899;
    }
.styles__subTitle___37bz3 .styles__addMemberButton___2qs6T {
    background-color: #007bff;
    border-color: #007bff;
  }
.styles__card___2lDLt {
  margin-bottom: 48px;
}
.styles__card___2lDLt .styles__items___2-9WI {
    margin-bottom: 32px;
  }
.styles__card___2lDLt .styles__items___2-9WI .styles__item___3iCny {
      width: 100%;
      text-decoration: none;
      padding: 0 20px;
    }
.styles__listItem___tLArg {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}
.styles__listItem___tLArg > * {
  lost-column-cycle: 4;
}
.styles__listItem___tLArg > *: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___tLArg > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___tLArg > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__listItem___tLArg > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___tLArg > *:nth-child(2) {
  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___tLArg > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___tLArg > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__listItem___tLArg > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___tLArg > *: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___tLArg > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___tLArg > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__listItem___tLArg > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___tLArg > *:nth-child(4) {
  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__listItem___tLArg > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___tLArg > *:nth-child(4):last-child {
  margin-right: 0;
}
.styles__listItem___tLArg > *:nth-child(4):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___tLArg {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 64px;
  border-bottom: 1px solid #e7e8e9;
}
.styles__listItem___tLArg .styles__action___1KP79 {
    height: 20px;
    margin: 0;
    padding: 0;
    line-height: 20px;
    min-height: 20px;
}
.styles__listItem___tLArg .styles__action___1KP79 svg {
      top: 0;
      width: 20px !important;
      height: 20px !important;
    }
.styles__listItem___tLArg .styles__name___1ejQ9 {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.styles__listItem___tLArg .styles__name___1ejQ9 > div {
  display: inline-block;
  vertical-align: middle;
  margin-right: 12px;
}
.styles__listItem___tLArg .styles__teams___3G-re {
    color: #099cec;
}
.styles__listHeader___25Oa7 {

  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___25Oa7 div {
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 12px;
    color: #8f9ea8;
  }
.styles__modal___2EwEm {
  background: #ffffff;
  max-width: 750px;
  margin: 20px;
}
.styles__modal___2EwEm .styles__title___1-4wy {
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
  }
.styles__modal___2EwEm .styles__buttons___2YU_9 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 16px;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3FmBh {
  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___2XNuM {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2XNuM {
  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___OGk0U {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___OGk0U {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__modal___3AF2j {
  background: #ffffff;
  max-width: 750px;
  margin: 20px;
}
.styles__modal___3AF2j .styles__title___1WJn6 {
    margin: 12px 0 24px;
    font-size: 18px;
    line-height: 24px;
  }
.styles__modal___3AF2j .styles__errorMessage___a0lEe {
    margin: 20px 0;
    color: #e12b0c;
  }
.styles__modal___3AF2j .styles__buttons___GWtjj {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 16px;
  }
.styles__ctaButton___jzq_x {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.styles__icon___3E8bd {
  fill: #8f9ea8;
}
.styles__iconTooltipWrapper___2S7B0:hover .styles__icon___3E8bd.styles__active___3iXZx {
  cursor: pointer;
  fill: #099cec;
}
.styles__card___1Zj9R {
  margin-bottom: 48px;
}
.styles__card___1Zj9R .styles__loading___3ahGi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 48px 0;
  }
.styles__card___1Zj9R .styles__items___2o-0g {
    margin-bottom: 32px;
  }
.styles__card___1Zj9R .styles__item___3PKeb {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
  }
.styles__card___1Zj9R .styles__item___3PKeb > * {
  lost-column-cycle: 3;
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(91.575% - 1px);
  max-width: calc(91.575% - 1px);
  width: calc(91.575% - 1px);
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(2) {
  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__card___1Zj9R .styles__item___3PKeb > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(3) {
  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__card___1Zj9R .styles__item___3PKeb > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__card___1Zj9R .styles__item___3PKeb > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__card___1Zj9R .styles__item___3PKeb {
  height: 60px;
  border-bottom: 1px solid #e7e8e9;
  width: 100%;
  text-decoration: none;
  padding: 0 28px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.styles__card___1Zj9R .styles__item___3PKeb.styles__listHeader___3Xlx_ {
  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;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.styles__card___1Zj9R .styles__item___3PKeb.styles__listHeader___3Xlx_ div {
        font-weight: 600;
        margin-top: 40px;
        margin-bottom: 12px;
        color: #8f9ea8;
}
.styles__card___1Zj9R .styles__item___3PKeb .styles__action___22s3g {
      height: 20px;
      margin: 0;
      padding: 0;
      line-height: 20px;
      min-height: 20px;
}

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___Kmdkz {
  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___3ne0o {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3ne0o {
  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___2yh39 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2yh39 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__createButtons___2gX-6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 16px;
}
.styles__privacyHeader___2bi3y {
  font-weight: 700;
}
.styles__upgradeLink___1Mndm {
  color: #099cec;
  font-weight: 600;
}
.styles__privacyText___1BtqD {
  margin-left: 12px;
}
.styles__createTeamInput___1S-9t {
  margin-bottom: 24px;
}
.styles__privateTeams___1PeH0 {
  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___1PeH0 .styles__checkbox___zBiTJ {
    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___1PeH0 .styles__checkbox___zBiTJ:last-child {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-bottom: 0;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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__listBody___Nac9D {
  margin-bottom: 48px;
}
.styles__listBody___Nac9D .styles__teams___1oVIY {
    margin-bottom: 32px;
  }
.styles__teamCard___3uA5B {
  padding: 20px 28px;
  margin-bottom: 10px;
  cursor: pointer;
}
.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;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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__bold___5ctM5 {
  font-size: 14px;
  line-height: 20px;
  color: #27343b;
  font-weight: 600;
}
.styles__icon___1GKkp {
  fill: #8f9ea8;
}
.styles__iconTooltipWrapper___3dkXy:hover .styles__icon___1GKkp.styles__active___2Xwpo {
  cursor: pointer;
  fill: #099cec;
}
.styles__link___2VnqT {
  cursor: pointer;
  color: #099cec;
}
.styles__card___3K2DD {
  margin-bottom: 48px;
}
.styles__card___3K2DD .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__card___3K2DD .styles__items___23Bxs {
    margin-bottom: 32px;
  }
.styles__card___3K2DD .styles__listItem___2Wpzr {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
  }
.styles__card___3K2DD .styles__listItem___2Wpzr > * {
  lost-column-cycle: 3;
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *: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__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(24.975% - 9px);
  max-width: calc(24.975% - 9px);
  width: calc(24.975% - 9px);
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(3) {
  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__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__card___3K2DD .styles__listItem___2Wpzr > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__card___3K2DD .styles__listItem___2Wpzr {
  height: 60px;
  border-bottom: 1px solid #e7e8e9;
  width: 100%;
  text-decoration: none;
  padding: 0 28px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.styles__card___3K2DD .styles__listItem___2Wpzr.styles__listHeader___nfKgb {
  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;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.styles__card___3K2DD .styles__listItem___2Wpzr.styles__listHeader___nfKgb div {
        font-weight: 600;
        margin-top: 40px;
        margin-bottom: 12px;
        color: #8f9ea8;
}
.styles__card___3K2DD .styles__listItem___2Wpzr .styles__repoPrivateStatus___bYwwt {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
}
.styles__card___3K2DD .styles__listItem___2Wpzr .styles__repoPrivateStatus___bYwwt > svg {
        width: 14px;
        height: 14px;
        margin-right: 8px;
      }
.styles__card___3K2DD .styles__listItem___2Wpzr .styles__goTo___3-WVU {
      height: 16px;
}
.styles__card___3K2DD .styles__listItem___2Wpzr .styles__goTo___3-WVU > svg {
        width: 16px;
        height: 16px;
      }
.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;
  }

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
  margin-left: -8px;
  position: absolute;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before, .react-datepicker__month-read-view--down-arrow::before, .react-datepicker__month-year-read-view--down-arrow::before {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px;
}

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before, .react-datepicker__month-read-view--down-arrow::before, .react-datepicker__month-year-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  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, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0;
}

.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, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before, .react-datepicker__month-read-view--down-arrow::before, .react-datepicker__month-year-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff;
}

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before, .react-datepicker__month-read-view--down-arrow::before, .react-datepicker__month-year-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae;
}

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0;
}

.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"] {
  margin-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"] {
  margin-bottom: 10px;
}

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px;
}

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px;
}

.react-datepicker-popper[data-placement^="left"] {
  margin-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-top: 8px;
  position: relative;
}

.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

.react-datepicker__header--time {
  border-top-left-radius: 0;
}

.react-datepicker__header {
  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 {
  background: none;
  line-height: 27.2px;
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  padding: 0;
  border: 7.2px solid transparent;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden;
}

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc;
}

.react-datepicker__navigation--next--with-time {
  right: 95px;
}

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b3b3;
}

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b3b3;
}

.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: 85px;
}

.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: 0px;
  padding-left: 0px;
  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-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: #2a87d0;
  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 , .react-datepicker__month-text--in-selecting-range , .react-datepicker__quarter-text--in-selecting-range , .react-datepicker__year-text--in-selecting-range {
  background-color: rgba(33, 107, 165, .5);
}

.react-datepicker-cssmodules__react-datepicker__month--selecting-range___Bpx6w .react-datepicker__day--in-range , .react-datepicker-cssmodules__react-datepicker__month--selecting-range___Bpx6w
.react-datepicker__month-text--in-range , .react-datepicker-cssmodules__react-datepicker__month--selecting-range___Bpx6w
.react-datepicker__quarter-text--in-range , .react-datepicker-cssmodules__react-datepicker__month--selecting-range___Bpx6w
.react-datepicker__year-text--in-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;
}

.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 {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 7.2px;
  border-width: 0.45rem;
}

.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: 0px 6px 0px 0px;
  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: "\00d7";
}

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

.react-datepicker__portal .react-datepicker__navigation {
  border: 12.96px solid transparent;
  border: 0.81rem solid transparent;
}

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--previous--disabled, .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default;
}

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc;
}

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3;
}

.react-datepicker__portal .react-datepicker__navigation--next--disabled, .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: #0073ec;
}
.styles__datePickerContainer___20CCS .react-datepicker__day:hover {
  border-radius: 50%;
}
.styles__calendar___2qZcr {
  border-radius: 0;
  border: 1px solid #e9ebee;
}

.styles__datePickerWrapper___ev4Cm {
  position: relative
}

.styles__datePickerWrapper___ev4Cm::after {
  position: absolute;
  top: 8px;
  left: 7px;
  content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS4wNDc2IDEuOTA0NzZIMTYuMTkwNVYwSDE0LjI4NTdWNS43MTQyOUgxNi4xOTA1VjMuODA5NTJIMTkuMDQ3NlYxOC4wOTUySDEuOTA0NzZWMy44MDk1MkgzLjgwOTUyVjEuOTA0NzZIMS45MDQ3NkMwLjg1MzMzMyAxLjkwNDc2IDAgMi43NTgxIDAgMy44MDk1MlYxOC4wOTUyQzAgMTkuMTQ2NyAwLjg1MzMzMyAyMCAxLjkwNDc2IDIwSDE5LjA0NzZDMjAuMDk5IDIwIDIwLjk1MjQgMTkuMTQ2NyAyMC45NTI0IDE4LjA5NTJWMy44MDk1MkMyMC45NTI0IDIuNzU4MSAyMC4wOTkgMS45MDQ3NiAxOS4wNDc2IDEuOTA0NzZaIiBmaWxsPSIjNzU3NTc1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi42NjY3MiAzLjgwOTUySDEzLjMzMzRWMS45MDQ3Nkg2LjY2NjcyVjBINC43NjE5NlY1LjcxNDI5SDYuNjY2NzJWMy44MDk1MloiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjYxOTA5IDcuNjE5MDJIMy44MDk1N1YxMS40Mjg1SDcuNjE5MDlWNy42MTkwMloiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi4zODA5IDcuNjE5MDJIOC41NzE0MVYxMS40Mjg1SDEyLjM4MDlWNy42MTkwMloiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4zMzM0IDExLjQyODVIMTcuMTQyOVY3LjYxOTAySDEzLjMzMzRWMTEuNDI4NVoiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjgwOTU3IDE2LjE5MDVINy42MTkwOVYxMi4zODFIMy44MDk1N1YxNi4xOTA1WiIgZmlsbD0iIzc1NzU3NSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNTcxNDEgMTYuMTkwNUgxMi4zODA5VjEyLjM4MUg4LjU3MTQxVjE2LjE5MDVaIiBmaWxsPSIjNzU3NTc1Ii8+Cjwvc3ZnPgoK);
}

.styles__dateInputField___3O4ri {
  height: 36px;
  width: 140px;
  padding-left: 36px;
  cursor: pointer;
  caret-color: transparent;
}

.styles__filters___2ojLR {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

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

.styles__calendar___2WcIS .styles__devider___euekm {
    margin: 0 10px;
  }

.styles__activiesList___ixf_B {
  margin-top: 25px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___rhC3k {
  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___3ruCp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3ruCp {
  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___2W56K {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2W56K {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper___2N-O6 {
  max-width: 100%;
  margin: 12px 0;
}
.styles__cardContainer___1Gq9h {
  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___1XcHn {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.styles__cardBody___1xEWi {
  margin-left: 16px;
}
.styles__cardText___2Cqzk {
  font-size: 14px;
  line-height: 20px;
  color: #27343b;
}
.styles__cardLink___1itwQ {
  color: #254356;
  display: block;
  font-size: 12px;
  margin-top: 12px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___RKF9r {
  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___1eVBn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1eVBn {
  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___1oGrA {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___1oGrA {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__tab___ztJkZ {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 40px;
  min-width: 100px;
  font-weight: normal;
  margin: 0;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 0;
  color: #445d6e
}
.styles__tab___ztJkZ:hover {
  color: #099cec;
}
/* vertical tab */
.styles__vtabMuted___3swyE {
  text-align: left;
  font-size: 14px;
  line-height: 44px;
  color: #637986 !important;
  border-bottom: none !important;
  border-left: 4px solid transparent !important;
  margin-top: 2px;
  margin-bottom: 2px;
}
.styles__vtab___3Nxbc {
}
.styles__vtab___3Nxbc:hover {
  border: none !important;
  border-bottom: none !important;
  border-left: 4px solid #099cec !important;
}
/* vertical selected state */
.styles__vselected___I8P3c,
  .styles__vselected___I8P3c:hover {
  border-left: 4px solid #099cec !important;
}
/* We need to override default button styles */
.styles__tab___ztJkZ.styles__button___3ufQz,
  .styles__tab___ztJkZ.styles__button___3ufQz:hover {
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
}
.styles__tab___ztJkZ.styles__selected___1p-n4,
  .styles__tab___ztJkZ.styles__selected___1p-n4:hover {
  font-weight: 600;
  color: #099cec;
  border-bottom-color: #099cec;
}
@media only screen and (max-height: 800px) {
  .styles__vtab___3Nxbc {
    line-height: 10px;
  }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3xZYK {
  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___O10mt {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___O10mt {
  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___1kfH7 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___1kfH7 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__selected___BAPxg {
  pointer-events: none;
}
.styles__vtabs___mbgSA {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  width: 200px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1QRdr {
  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___12Ry1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___12Ry1 {
  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___6lDjr {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___6lDjr {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* module account */
.styles__wrapper___1NKRy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 24px;
  overflow: hidden;
  background: #f7f8f9;
}
.styles__wrapper___1NKRy .styles__card___U4-oB {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
  }
.styles__wrapper___1NKRy .styles__card___U4-oB h3 {
      margin-bottom: 36px;
    }
.styles__wrapper___1NKRy .styles__card___U4-oB .styles__errorHeader___HMNBU {
      margin: 20px 0;
      font-size: 14px;
      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;
      margin-bottom: 10px;
    }
.styles__wrapper___1NKRy .styles__card___U4-oB .styles__errorHeader___HMNBU .styles__text___32owj {
        margin-left: 20px;
      }
.styles__wrapper___1NKRy .styles__card___U4-oB > input {
    margin-bottom: 10px;
  }
.styles__accessTokenRetrievalError___e9vfO {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.styles__accessTokenRetrievalError___e9vfO > :first-child {
    margin-right: 12px;
  }
.styles__settingsInfoSection___2MD3x {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 1000px;
}
.styles__settingsInfoCard___3xLza {
  margin-bottom: 32px;
  background-color: #ffffff;
}
.styles__header___3YvnA {
  background-color: #ffffff;
}
.styles__title___PuG2H {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 24px;
  line-height: 16px;
}
.styles__boldItalic___s_ftG {
  font-weight: 600;
  font-style: italic;
}
.styles__buttonWrapper___21Euj {
  text-align: right;
}
.styles__promoCode___1fCGB {
  text-align: center;
  width: 100%;
}
.styles__promoCodeInfoCard___2-Tr2 {
  background-color: #d1eefd;
  border-color: #a3ddfc;
  color: color-curious-blue;
  margin-bottom: 20px;
}
.styles__loadingCard___2DGgI {
  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___1kFRx {
  min-height: 400px;
}
.styles__promoCodeWrapper___seUUj {
  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__accountLeftNav___2CsZB {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.styles__accountCardsContainer___39c3X {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 1050px;
  margin-bottom: 20px;
}
.styles__accountCardsContainer___39c3X .styles__card___U4-oB {
    margin-bottom: 20px;
  }
.styles__changePasswordAndEmails___3dpLP .styles__emails___2oY6n,
  .styles__changePasswordAndEmails___3dpLP .styles__password___3W6s_ {
    margin-top: 40px;
    margin-bottom: 48px;
  }
.styles__changePasswordAndEmails___3dpLP .styles__accountInfo___3v3Ne {
    margin-top: 40px;
  }
.styles__changePasswordAndEmails___3dpLP .styles__header___3YvnA {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: normal;
    font-weight: bolder;
    color: #c0c9ce;
    margin-bottom: 20px;
  }
.styles__changePasswordAndEmails___3dpLP .styles__inputField___1J6Pb {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: 24px;
  }
.styles__changePasswordAndEmails___3dpLP .styles__setAsPrimaryBtn___22k73 {
    color: #c0c9ce;
    background-color: #fbfbfc;
    border-color: #fbfbfc;
  }
.styles__changePasswordAndEmails___3dpLP .styles__primaryEmail___3P06S {
    margin: 4px;
    padding: 0 4px;
    min-width: 88px;
    height: 36px;
    display: inline-block;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 32px;
    color: #fbfbfc;
    background-color: #c0c9ce;
    border: 2px solid #c0c9ce;
    border-radius: 3px;
  }
.styles__changePasswordAndEmails___3dpLP .styles__checkedIcon___2YGYW {
    margin: 8px 4px 4px 4px;
    padding: 0 4px;
  }
.styles__changePasswordAndEmails___3dpLP .styles__checkedIcon___2YGYW svg {
      position: relative;
      top: 4px;
    }
.styles__changePasswordAndEmails___3dpLP .styles__button___3R8C5 {
    margin: 4px;
    padding: 0 4px;
  }
.styles__changePasswordAndEmails___3dpLP .styles__passError___2svnQ {
    margin-top: 24px;
  }
.styles__saveBtn___1hZj5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
}
.styles__justifyCenter___yTeCL {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.styles__recoveryCode___3yQen {
  margin-right: 40px;
}
.styles__recoveryCode___3yQen .styles__recoveryCodeBtn___K7N-5 {
    width: 190px;
    height: 33px;
    margin: 25px 0;
    border-radius: 4px;
    text-align: center;
  }
.styles__disableBtn___2vr2q {
  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___2vr2q:hover {
  border: 1px solid #e12b0c;
}
.styles__saveBtnWithTokens___1eOT0 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.styles__saveBtnWithTokens___1eOT0 button {
    margin: 0;
  }
.styles__saveBtnWithTokens___1eOT0 .styles__twoButtons___36r4q button:nth-child(1) {
  margin-right: 18px;
}
.styles__invertedPanicButton___1MzBr:hover {
  background-color: #871907 !important;
  color: #ffffff !important;
  border-color: #871907 !important;
}
.styles__invertedRegularButton___iJhxE:hover {
  background-color: #2596ec !important;
  color: #ffffff !important;
  border-color: #2596ec !important;
}
.styles__apiCodeBlock___2uBVH {
  word-wrap: break-word;
}
/* cloud providers card */
.styles__cloudProviderRow___kDSuU {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}
.styles__cloudProviderRow___kDSuU > * {
  lost-column-cycle: 6;
}
.styles__cloudProviderRow___kDSuU > *: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___kDSuU > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__cloudProviderRow___kDSuU > *: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___kDSuU > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__cloudProviderRow___kDSuU > *: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___kDSuU > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__cloudProviderRow___kDSuU > *: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___kDSuU > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(4):last-child {
  margin-right: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(4):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__cloudProviderRow___kDSuU > *: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___kDSuU > *:nth-child(5):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(5):last-child {
  margin-right: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(5):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__cloudProviderRow___kDSuU > *: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___kDSuU > *:nth-child(6):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(6):last-child {
  margin-right: 0;
}
.styles__cloudProviderRow___kDSuU > *:nth-child(6):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__cloudProviderRow___kDSuU {
  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___kDSuU .styles__noMargin___1o_Np {
    margin: 0;
}
/* Fix overflow issue in safari */
.styles__cloudProviderRow___kDSuU > * {
    -ms-flex-negative: 1 !important;
        flex-shrink: 1 !important;
}
.styles__providerKey___2Glcj {
  word-wrap: break-word;
}
.styles__linkedProviderName___12SuI {
  font-weight: 700;
  color: #254356;
}
.styles__providerName___1urWB {
  font-weight: 700;
  color: #c0c9ce;
}
.styles__addCredentials___3bauZ {
  color: #c0c9ce;
}
/* source providers card */
.styles__sourceProviderRow___bUdWd,
.styles__sourceProviderHeader___1AW4k {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}
.styles__sourceProviderRow___bUdWd > *, .styles__sourceProviderHeader___1AW4k > * {
  lost-column-cycle: 5;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(1), .styles__sourceProviderHeader___1AW4k > *: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__sourceProviderRow___bUdWd > *:nth-child(1):nth-child(1n), .styles__sourceProviderHeader___1AW4k > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(1):last-child, .styles__sourceProviderHeader___1AW4k > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(1):nth-child(12n), .styles__sourceProviderHeader___1AW4k > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(2), .styles__sourceProviderHeader___1AW4k > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(24.975% - 9px);
  max-width: calc(24.975% - 9px);
  width: calc(24.975% - 9px);
}
.styles__sourceProviderRow___bUdWd > *:nth-child(2):nth-child(1n), .styles__sourceProviderHeader___1AW4k > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(2):last-child, .styles__sourceProviderHeader___1AW4k > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(2):nth-child(12n), .styles__sourceProviderHeader___1AW4k > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(3), .styles__sourceProviderHeader___1AW4k > *: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__sourceProviderRow___bUdWd > *:nth-child(3):nth-child(1n), .styles__sourceProviderHeader___1AW4k > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(3):last-child, .styles__sourceProviderHeader___1AW4k > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(3):nth-child(12n), .styles__sourceProviderHeader___1AW4k > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(4), .styles__sourceProviderHeader___1AW4k > *: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__sourceProviderRow___bUdWd > *:nth-child(4):nth-child(1n), .styles__sourceProviderHeader___1AW4k > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(4):last-child, .styles__sourceProviderHeader___1AW4k > *:nth-child(4):last-child {
  margin-right: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(4):nth-child(12n), .styles__sourceProviderHeader___1AW4k > *:nth-child(4):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(5), .styles__sourceProviderHeader___1AW4k > *:nth-child(5) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: -12px;
  max-width: -12px;
  width: -12px;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(5):nth-child(1n), .styles__sourceProviderHeader___1AW4k > *:nth-child(5):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(5):last-child, .styles__sourceProviderHeader___1AW4k > *:nth-child(5):last-child {
  margin-right: 0;
}
.styles__sourceProviderRow___bUdWd > *:nth-child(5):nth-child(12n), .styles__sourceProviderHeader___1AW4k > *:nth-child(5):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__sourceProviderRow___bUdWd,
.styles__sourceProviderHeader___1AW4k {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.styles__sourceProviderRow___bUdWd .styles__noMargin___1o_Np, .styles__sourceProviderHeader___1AW4k .styles__noMargin___1o_Np {
    margin: 0;
}
.styles__info___QTxDY {
  margin-bottom: 20px;
  background-color: #f7f7f8;
  padding: 16px;
  border-radius: 3px;
}
.styles__sourceProviderMessage___28_6j {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-top: -12px;
}
.styles__sourceProviderMessage___28_6j svg {
    fill: #8f9ea8;
    width: 18px;
    margin-bottom: -12px;
    margin-right: 12px;
  }
.styles__sourceProviderMessage___28_6j p {
    /* @mixin tertiary; */
  }
.styles__sourceProviderHeader___1AW4k {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: normal;
  font-weight: bolder;
  color: #c0c9ce;
  margin-top: 12px;
}
/* access tokens */
.styles__accessTokensView___2t7Ka {
  lost-container: column
}
.styles__accessTokensView___2t7Ka > *:nth-child(1) {
  width: 100%;
  height: calc(33.3% - 8px);
  margin-bottom: 12px;
}
.styles__accessTokensView___2t7Ka > *:nth-child(1):last-child {
  margin-bottom: 0;
}
.styles__accessTokensView___2t7Ka > *:nth-child(2) {
  width: 100%;
  height: calc(33.3% - 8px);
  margin-bottom: 12px;
}
.styles__accessTokensView___2t7Ka > *:nth-child(2):last-child {
  margin-bottom: 0;
}
.styles__accessTokensView___2t7Ka > *:nth-child(3) {
  width: 100%;
  height: calc(33.3% - 8px);
  margin-bottom: 12px;
}
.styles__accessTokensView___2t7Ka > *:nth-child(3):last-child {
  margin-bottom: 0;
}
.styles__accessTokensView___2t7Ka .styles__expandible___3Sa58 {
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}
.styles__accessTokensView___2t7Ka .styles__collapsed___ruDzZ {
    max-height: 392px !important;
}
.styles__accessTokensView___2t7Ka .styles__expanded___2vlwG {
    max-height: 1960px !important;
}
.styles__showMoreOrLess___2fM0e {
  text-align: center;
}
.styles__showMoreOrLess___2fM0e .styles__link___3cdFL {
    text-decoration: none;
    cursor: pointer;
  }
.styles__showMoreOrLess___2fM0e .styles__link___3cdFL span,
    .styles__showMoreOrLess___2fM0e .styles__link___3cdFL svg {
      vertical-align: middle;
    }
.styles__showMoreOrLess___2fM0e .styles__icon___31E_r {
    -webkit-transition: rotate 0.5s ease-in-out;
    transition: rotate 0.5s ease-in-out;
  }
.styles__showMoreOrLess___2fM0e .styles__rotateIcon___XYwmQ {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
/* notifications email, slack and announcements */
.styles__notifications___1WBfi .styles__emailRadiogroup___2-kTl {
    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___1WBfi .styles__slackNotifications___3SAst {
    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___vjTiK {
  margin-left: 16px;
}
/* plans */
.styles__planDetails___3W3-j {
  height: 180px;
}
.styles__planDetails___3W3-j .styles__planContent___1AlZ- {
    margin: 0 80px;
  }
.styles__planDetails___3W3-j .styles__icon___31E_r {
    fill: #8f9ea8;
    margin-right: 8px;
  }
.styles__planDetails___3W3-j .styles__nodeCost___2Zz98,
  .styles__planDetails___3W3-j .styles__privateReposAvailable___3Jo09 {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    margin-bottom: 4px;
  }
.styles__planDetails___3W3-j .styles__privateReposUsed___w3w_y {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    color: #00cbca;
    margin-bottom: 4px;
  }
.styles__planDetails___3W3-j .styles__bigNumber___367vs {
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: normal;
    color: #254356;
    margin-right: 12px;
  }
.styles__planDetails___3W3-j .styles__priceText___2Fj1G {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: normal;
    color: #254356;
    margin-bottom: 4px;
  }
.styles__planDetails___3W3-j .styles__priceText___2Fj1G .styles__bigNumber___367vs {
      margin-right: 8px;
      margin-left: 8px;
    }
.styles__planDetails___3W3-j .styles__usageDescription___BKgbr {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
.styles__planDetails___3W3-j .styles__usageText___2e39k {
    -ms-flex-item-align: center;
        align-self: center;
  }
.styles__planDetails___3W3-j .styles__splitPanels___1wU64 {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
.styles__planDetails___3W3-j .styles__splitPanels___1wU64 > * {
  lost-column-cycle: 2;
}
.styles__planDetails___3W3-j .styles__splitPanels___1wU64 > *: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___3W3-j .styles__splitPanels___1wU64 > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__planDetails___3W3-j .styles__splitPanels___1wU64 > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__planDetails___3W3-j .styles__splitPanels___1wU64 > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__planDetails___3W3-j .styles__splitPanels___1wU64 > *: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___3W3-j .styles__splitPanels___1wU64 > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__planDetails___3W3-j .styles__splitPanels___1wU64 > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__planDetails___3W3-j .styles__splitPanels___1wU64 > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__planDetails___3W3-j .styles__splitPanels___1wU64 {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.styles__planDetails___3W3-j .styles__monitoredWithNautilus___1OQGN {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #8f9ea8;
  }
.styles__planDetails___3W3-j .styles__nautilusUpsell___1HR38 {
    background-color: #ffffff;
    border: solid 1px #e0e4e7;
    padding: 12px;
    border-radius: 2px;
    margin-top: 32px;
  }
.styles__planDetails___3W3-j .styles__nautilusLink___2S1em {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: normal;
    margin-left: 12px;
  }
.styles__planDetails___3W3-j button {
    margin: 0;
  }
.styles__planDetails___3W3-j .styles__planButton___2dlbK {
    margin-top: 20px;
  }
/* coupon codes */
.styles__couponCodes___4Sy1q {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}
.styles__couponCodes___4Sy1q > * {
  lost-column-cycle: 3;
}
.styles__couponCodes___4Sy1q > *: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___4Sy1q > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__couponCodes___4Sy1q > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__couponCodes___4Sy1q > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__couponCodes___4Sy1q > *: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___4Sy1q > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__couponCodes___4Sy1q > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__couponCodes___4Sy1q > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__couponCodes___4Sy1q > *: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___4Sy1q > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__couponCodes___4Sy1q > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__couponCodes___4Sy1q > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__couponCodes___4Sy1q .styles__button___3R8C5 {
    min-width: 40px;
    margin: 0 0 0 16px;
    padding: 0;
}
.styles__couponCodes___4Sy1q .styles__name___1rtj6 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.styles__couponCodesTitle___liYnv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.styles__couponCodesTitle___liYnv .styles__infoTooltip___1OjEf {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-left: 16px;
  }
/* quotas */
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
  }
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni > * {
  lost-column-cycle: 2;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni > *: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___1IpUK .styles__quotas___3n0ni > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni > *: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___1IpUK .styles__quotas___3n0ni > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni ul {
      list-style: none;
      padding: 0;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni ul::before,
  .styles__quotasContainer___1IpUK .styles__quotas___3n0ni ul::after {
  content: ' ';
  display: table;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni ul::after {
  clear: both;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni ul {
  padding-left: 16px;
}
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni 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___1IpUK .styles__quotas___3n0ni li .styles__quotaField___2hzgq:first-child {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
      }
.styles__quotasContainer___1IpUK .styles__quotas___3n0ni li > * {
  margin: 0 4px;
}
/* delete account card */
.styles__deleteAccount___12-so {
  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___12-so > div > p {
      color: #ef4a53;
    }
.styles__deleteAccount___12-so button {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 200px;
            flex: 0 0 200px;
  }
.styles__accessTokensTable___3kmBf {
  margin-top: 32px;
  min-height: 220px
}
.styles__accessTokensTable___3kmBf > * {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.styles__accessTokensTable___3kmBf > * > * {
  lost-column-cycle: 6;
}
.styles__accessTokensTable___3kmBf > * > *: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___3kmBf > * > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__accessTokensTable___3kmBf > * > *: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__accessTokensTable___3kmBf > * > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(3) {
  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__accessTokensTable___3kmBf > * > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(4) {
  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__accessTokensTable___3kmBf > * > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(4):last-child {
  margin-right: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(4):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__accessTokensTable___3kmBf > * > *: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___3kmBf > * > *:nth-child(5):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(5):last-child {
  margin-right: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(5):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__accessTokensTable___3kmBf > * > *: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___3kmBf > * > *:nth-child(6):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(6):last-child {
  margin-right: 0;
}
.styles__accessTokensTable___3kmBf > * > *:nth-child(6):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__accessTokensTable___3kmBf > * {
  margin: 12px 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.styles__accessTokensTable___3kmBf .styles__accessTokensHeader___4L78l {
    color: #6f777c;
    font-weight: 500;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.styles__accessTokensTable___3kmBf .styles__selectAction___18_J8 {
    -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___3kmBf .styles__selectAction___18_J8 .styles__checkboxParent___tbOwa {
      width: 14px;
      height: 14px;
    }
.styles__accessTokensTable___3kmBf .styles__selectAction___18_J8 .styles__checkbox___1vhuq {
      opacity: 0.5;
    }
.styles__accessTokensTable___3kmBf .styles__selectAction___18_J8 .styles__checkbox___1vhuq.styles__checked___2bxGl {
      opacity: 1;
    }
.styles__accessTokensTable___3kmBf .styles__selectAction___18_J8 .styles__checkboxIcon___1eFm1 {
      width: 14px;
      height: 14px;
    }
/* cloudProviderError */
.styles__errorField___2v1Tx {
  display: none;
  color: #ef4a53
}
.styles__errorField___2v1Tx.styles__visible___1uC04 {
  display: block;
}
.styles__errorField___2v1Tx > * {
  vertical-align: middle;
}
.styles__errorField___2v1Tx .styles__errorText___1UwVF {
    margin-left: 8px;
}
/* convert account to organization */
.styles__convertAccount___pLU6T {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}
.styles__convertAccount___pLU6T > * {
  lost-column-cycle: 2;
}
.styles__convertAccount___pLU6T > *: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___pLU6T > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__convertAccount___pLU6T > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__convertAccount___pLU6T > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__convertAccount___pLU6T > *: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___pLU6T > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__convertAccount___pLU6T > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__convertAccount___pLU6T > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__convertAccount___pLU6T {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.styles__convertAccount___pLU6T .styles__title___PuG2H {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: 0.005em;
}
.styles__convertAccount___pLU6T .styles__semiBold___1QPX1 {
    font-weight: 600;
}
.styles__convertAccount___pLU6T .styles__button___3R8C5 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    height: 48px;
}
.styles__successMessage___2HIVq {
  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___2HIVq .styles__successIcon___cLaSN {
    height: 18px;
    width: 18px;
    vertical-align: bottom;
    margin-right: 4px;
  }
.styles__accountSwitcher___3s4BO {
  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___3s4BO span {
    margin-right: 12px;
  }
.styles__linkedCTA___2mp0h {
  position: relative;
  top: -5px;
  font-weight: bold;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  color: #287cf9;
  cursor: pointer;
}
.styles__profileHeaderBar___3gMGH {
  height: 100%;
  background: white;
  border-bottom: 1px solid #e0e4e7;
}
.styles__profileHeader___mrpdW {
  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;
}
.styles__contextNav___c6gvH {
  border-bottom: 1px solid #ffffff;
}
.styles__twoFactor___1SpoA {
  text-align: center;
  margin: 0 auto;
  width: 511px;
  margin-top: 20px;
}
.styles__twoFactor___1SpoA .styles__twoFactorDescription___2Me-E {
    line-height: 19px;
  }
.styles__twoFactor___1SpoA .styles__twoFactorDescription___2Me-E .styles__subheader___3RmNV {
      font-weight: 600;
    }
.styles__warning___2AQQE {
  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___2AQQE .styles__emphasis___EO1My {
    margin-left: 10px;
    color: #e12b0c;
  }
.styles__twoFactorLoading___3y3Iu {
  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___3cdFL {
  text-decoration: none;
  cursor: pointer;
  color: #2596ec;
}
.styles__link___3cdFL a {
    text-decoration: none;
  }
.styles__disableModal___FiJzR {
  max-width: 460px !important;
  max-height: 490px !important;
}
.styles__cardTitle___1M7Wl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
}
.styles__hr___15KLn {
  -ms-flex-item-align: start;
      align-self: flex-start;
  -webkit-box-flex: 99;
      -ms-flex-positive: 99;
          flex-grow: 99;
}
.styles__horizontalLine___135CW {
  height: 1px;
  border: 0;
  border-top: 1px solid #e0e4e7;
  margin: 0 35px;
}
.styles__failureModal___2bxg7 {
  border-top: 8px solid #e12b0c;
}
@media (max-width: 1200px) {
  .styles__convertAccount___pLU6T {
    display: flex;
    flex-flow: row wrap;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .styles__convertAccount___pLU6T > * {
    lost-column-cycle: 2;
  }
  .styles__convertAccount___pLU6T > *:nth-child(1) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 99.9%;
    max-width: 99.9%;
    width: 99.9%;
  }
  .styles__convertAccount___pLU6T > *:nth-child(1):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__convertAccount___pLU6T > *:nth-child(1):last-child {
    margin-right: 0;
  }
  .styles__convertAccount___pLU6T > *:nth-child(1):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__convertAccount___pLU6T > *:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 99.9%;
    max-width: 99.9%;
    width: 99.9%;
  }
  .styles__convertAccount___pLU6T > *:nth-child(2):nth-child(1n) {
    margin-right: 12px;
    margin-left: 0;
  }
  .styles__convertAccount___pLU6T > *:nth-child(2):last-child {
    margin-right: 0;
  }
  .styles__convertAccount___pLU6T > *:nth-child(2):nth-child(12n) {
    margin-right: 0;
    margin-left: auto;
  }
  .styles__convertAccount___pLU6T {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
@media (min-width: 601px) and (max-width: 960px) {
  .styles__accountCardsContainer___39c3X {
    width: 600px;
  }
    .styles__wrapper___1NKRy .styles__card___U4-oB {
      width: 600px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column wrap;
              flex-flow: column wrap;
    }
  .styles__twoFactor___1SpoA {
    max-width: 600px;
  }
    .styles__twoFactor___1SpoA .styles__twoFactorDescription___2Me-E {
      min-height: 57px;
    }
}
@media (max-width: 820px) {
  .styles__accountCardsContainer___39c3X {
    width: 1000px;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .styles__settingsInfoCard___3xLza {
    width: 820px;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
    .styles__wrapper___1NKRy .styles__card___U4-oB {
      width: 820px;
      height: 100%;
      overflow-x: scroll;
      overflow-y: hidden;
    }
  .styles__twoFactor___1SpoA {
    width: 820px;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
    .styles__twoFactor___1SpoA .styles__twoFactorDescription___2Me-E {
      min-height: 57px;
    }
}
.styles__marginSpacing___1D38_ {
  margin-top: 40px;
}
.styles__accessTitle___3Rf99 {
  font-size: 18px;
}

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

  .styles__emailField___2IjjV .styles__emailInput___2Hp8f {
    border-top: none;
    border: none;
    border-bottom: 2px dotted rgba(0, 0, 0, 0.30196);
    padding: 5px 0;
    width: 256px;
    overflow: hidden;
    margin-right: 10px;
  }

.styles__verified___18ljU {
  margin: 6px;
  padding: 0 10px;
  fill: #00a000;
}

.styles__primaryEmail___1TU0E {
  font-size: 13px;
  font-style: italic;
  color: #777777;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___2yvFH {
  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___3BgTu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3BgTu {
  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___2uYd1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2uYd1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__modal___2YGSK {
  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___IITHP {
  margin: 30px 0;
}
.styles__header___3tGV8 {
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 48px;
}
.styles__formField___31-NW {
  border: none;
  outline: none;
  width: 350px;
  height: 30px;
  background-color: #fafafb;
  font-size: 14px;
  color: #6f777c;
  padding: 7.5px;
}
.styles__fieldBorder___17N3G {
  height: 0;
  border: 0.5px solid #b7bbbe;
  width: 350px;
  margin-bottom: 6px;
}
.styles__fieldBorderError___11veC {
  height: 0;
  border: 0.5px solid #e12b0c;
  width: 350px;
  margin-bottom: 6px;
}
.styles__disableButton___T5gAw {
  width: 230px;
}
.styles__error___1K3IH {
  color: #e12b0c;
  font-size: 13px;
  width: 350px;
  height: 75px;
}

.styles__form___3rz0a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

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

.styles__emailsWrapper___3HKsk {
  position: relative;
}

.styles__loading___3bm5b {
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__emailFieldWrapper___2tkyl {
  margin: 18px 0;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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;
}
.styles__pullCode___38_jh {
  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__input___1GNF9 {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: normal;
  width: 100%;
  overflow-x: auto;
  color: #ffffff;
  padding: 4px 12px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  unicode-bidi: embed;
  background-color: #27343b;
  border: none;
  border-radius: 2px;
}
.styles__tagPullInput___11UTk {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  width: 250px;
  overflow-x: auto;
  padding: 5px 12px;
  unicode-bidi: embed;
  background-color: #f1f4f6;
  border: none;
  border-radius: 2px;
}
.styles__tagPullCode___1VLVy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 28px !important;
  background-color: #f1f4f6;
  border-radius: 2px;
}
.styles__tagPullButton___293Nb {
  position: relative;
  -ms-flex-item-align: center;
      align-self: center;
  cursor: pointer;
  margin-right: 12px;
  top: 2px;
}
.styles__tagPullButton___293Nb svg {
    fill: #007bff;
    height: 18px;
    width: 18px;
  }
.styles__button___1h9sK {
  position: relative;
  -ms-flex-item-align: center;
      align-self: center;
  cursor: pointer;
  margin-right: 12px
}
.styles__button___1h9sK > svg {
  fill: white;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3GRqL {
  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___8MEBs {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___8MEBs {
  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___F1-CW {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___F1-CW {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* billing */
.styles__billingDates___3HZHv {
  display: inline-block;
  width: 100%;
}
.styles__billingRow___1_kb0 {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.styles__billingRow___1_kb0 > * {
  lost-column-cycle: 2;
}
.styles__billingRow___1_kb0 > *: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___1_kb0 > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__billingRow___1_kb0 > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__billingRow___1_kb0 > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__billingRow___1_kb0 > *: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___1_kb0 > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__billingRow___1_kb0 > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__billingRow___1_kb0 > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__billingRow___1_kb0 {
  min-height: 64px;
}
.styles__billingRowCVVExpiration___1NyFh {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.styles__billingRowCVVExpiration___1NyFh > * {
  lost-column-cycle: 2;
}
.styles__billingRowCVVExpiration___1NyFh > *: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___1NyFh > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__billingRowCVVExpiration___1NyFh > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__billingRowCVVExpiration___1NyFh > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__billingRowCVVExpiration___1NyFh > *: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___1NyFh > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__billingRowCVVExpiration___1NyFh > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__billingRowCVVExpiration___1NyFh > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__billingZipCountry___3RoON {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.styles__billingZipCountry___3RoON > * {
  lost-column-cycle: 3;
}
.styles__billingZipCountry___3RoON > *: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___3RoON > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__billingZipCountry___3RoON > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__billingZipCountry___3RoON > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__billingZipCountry___3RoON > *: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___3RoON > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__billingZipCountry___3RoON > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__billingZipCountry___3RoON > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__billingZipCountry___3RoON > *: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___3RoON > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__billingZipCountry___3RoON > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__billingZipCountry___3RoON > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__billingZipCountry___3RoON {
  min-height: 64px;
}
.styles__billingFormContent___1azKJ {
  margin: 0 20px;
}
.styles__billingHeader___1CWsw {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: bolder;
  color: #c0c9ce;
  padding-bottom: 16px;
}
.styles__billingOrgHeader___1f92K {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: bolder;
  color: #c0c9ce;
  margin-top: -20px;
}
.styles__billingNote___v3FjJ {
  margin: 4px 0 20px;
}
.styles__billingHeaderInner___uCuPZ {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  font-weight: bolder;
  color: #c0c9ce;
  padding: 32px 16px 16px 0;
}
.styles__billingCountry___20XXq {
  margin-top: 4px;
}
.styles__billingExpiration___1ADfy {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.styles__billingExpiration___1ADfy > * {
  lost-column-cycle: 2;
}
.styles__billingExpiration___1ADfy > *: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___1ADfy > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__billingExpiration___1ADfy > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__billingExpiration___1ADfy > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__billingExpiration___1ADfy > *: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___1ADfy > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__billingExpiration___1ADfy > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__billingExpiration___1ADfy > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__billingExpiration___1ADfy {
  margin-top: 8px;
}
.styles__billingFooter___1Ftxb {
  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___2-Xsv {
  from {
    width: 137px;
  }
  to {
    width: 275px;
  }
}
@keyframes styles__progress___2-Xsv {
  from {
    width: 137px;
  }
  to {
    width: 275px;
  }
}
.styles__billingProgressBar___8Fqy8 {
  width: 275px;
  border-bottom: solid 2px #e0e4e7;
}
.styles__billingProgressBar___8Fqy8 > * {
    width: 275px;
    -webkit-animation-name: styles__progress___2-Xsv;
            animation-name: styles__progress___2-Xsv;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    position: absolute;
    border-bottom: solid 2px #099cec;
  }
/* end billing */
.styles__card___1g8eC {
  height: 100%;
}
.styles__descriptionText___2j5IG {
  margin-bottom: 16px;
}
.styles__modalBottom___Ac1Bi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 12px;
  margin-right: 0;
}
.styles__errorMsg___1AM8Y {
  -ms-flex-item-align: center;
      align-self: center;
  color: #ef4a53;
}
.styles__errorMsg___1AM8Y svg {
    margin-bottom: -4px;
    margin-right: 8px;
  }
.styles__buttonRow___2G7O2 {
  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___2BUBn {
  margin-top: 20px;
}
.styles__removeMarginFromButton___BmMhV button:last-child {
  margin: 6px 0;
}
.styles__alignFirstButtonLeft___1HTfV {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between
}
.styles__alignFirstButtonLeft___1HTfV button:nth-child(1) {
  margin: 6px 0;
}
.styles__alignFirstButtonLeft___1HTfV button:nth-child(2) {
  margin-left: 50%;
}
.styles__alignFirstButtonLeft___1HTfV button:last-child {
  margin: 6px 0;
}
.styles__editDeleteButton___1vT18:hover {
  background-color: #bf3b42 !important;
  color: #ffffff !important;
}
.styles__planSelectionForm___1EzXl {
  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___1kcpp {
  fill: #8f9ea8;
  margin-right: 8px;
}
.styles__useCreditCard___2vnIh {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
}
.styles__useCreditCard___2vnIh .styles__title___1TnmU {
    margin-bottom: 8px;
  }
.styles__useCreditCard___2vnIh .styles__icon___1kcpp {
    margin-bottom: -3px;
  }
.styles__useCreditCard___2vnIh .styles__creditCard___3RiXL {
    font-size: 14px;
  }
.styles__useCreditCard___2vnIh .styles__expires___1ImiR {
    color: #445d6e;
  }
.styles__error___1cp4c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 350px;
  color: #ef4a53
}
.styles__error___1cp4c::first-letter {
  text-transform: uppercase;
}
.styles__error___1cp4c > svg {
    margin-right: 8px;
}
.styles__use___2csI4 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: normal;
  color: #254356;
}
.styles__expires___1ImiR {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
  color: #c0c9ce;
}
.styles__changeBillingInfo___3A-dp {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
  color: #8f9ea8;
}
.styles__planSelector___1JCBg {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}
.styles__planSelector___1JCBg > * {
  lost-column-cycle: 2;
}
.styles__planSelector___1JCBg > *: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___1JCBg > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__planSelector___1JCBg > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__planSelector___1JCBg > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__planSelector___1JCBg > *: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___1JCBg > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__planSelector___1JCBg > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__planSelector___1JCBg > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__planSelector___1JCBg {
  margin: space-sm;
  height: 386px;
}
.styles__planSelector___1JCBg .styles__planDetails___1RZDh {
    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___1JCBg .styles__planDetails___1RZDh > p {
      margin: 0 0 12px 0;
    }
.styles__planSelector___1JCBg .styles__priceText___2_2zV {
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    letter-spacing: normal;
    color: #099cec;
    margin-bottom: 20px;
}
.styles__planSelector___1JCBg .styles__price___2gdMI {
    font-size: 38px;
    line-height: 44px;
    font-weight: 700;
    color: #099cec;
}
.styles__planSelector___1JCBg .styles__checkboxes___1IcVZ {
    height: 80px;
}
.styles__planSelector___1JCBg .styles__planSlider___1Myk5 {
    width: 90%;
}
.styles__planSelector___1JCBg .styles__nautilusCancellation___16ZTy {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: normal;
    color: #ef4a53;
}
.styles__planSelector___1JCBg .styles__nautilusDetails___1fCid {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: normal;
    color: #8f9ea8;
}
.styles__planSelector___1JCBg .styles__nautilusText___ZFz-W {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 8px;
    color: #8f9ea8;
}
.styles__accessTokenForm___pppBX {
  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___pppBX .styles__secretLabel___3FrKT {
    color: #27343b;
    font-size: 14px;
    margin-left: 20px;
  }
.styles__removeAPIKeyRowSubmitting___3nral {
  opacity: 0.5;
  pointer-events: none;
}
.styles__accessTokenRowParent___1fCC0 {
  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___f0Ikr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  fill: #8f9ea8;
  margin-right: 12px
}
.styles__accessTokenAction___f0Ikr :hover {
  fill: #2596ec;
}
.styles__editAccessTokenDescriptionHeader___3TEoW {
  font-size: 12px;
  color: #70787d;
  margin-top: 38px;
  margin-bottom: 6px;
}
.styles__editAccessTokenFormHeader___2TvbJ {
  color: #6f777c;
  font-size: 14px;
  line-height: 19px;
  text-transform: uppercase;
}
.styles__editAccessTokenFormHeader___2TvbJ .styles__editAccessTokenInfo___3ZGFN {
    margin-top: 4px;
    color: #27343b;
    text-transform: none;
  }
.styles__editAccessTokenGrid___1QnZG {
  display: grid;
  grid-template-columns: 35% 50%;
  grid-gap: 24px;
  margin: 24px 0;
}
.styles__emailNotificationForm___3Nrym .styles__radioGroup___3HD0Y, .styles__slackNotificationLevelForm___1j22Y .styles__radioGroup___3HD0Y {
    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___3Nrym .styles__radioGroup___3HD0Y > *, .styles__slackNotificationLevelForm___1j22Y .styles__radioGroup___3HD0Y > * {
  display: block;
  margin: 0 20px;
  white-space: nowrap;
}
.styles__notificationMessage___PpWoL {
  /* @mixin tertiary; */
  margin-top: 24px;
}
.styles__notificationMessage___PpWoL svg {
    fill: #8f9ea8;
    width: 18px;
    margin-bottom: -8px;
    margin-right: 4px;
  }
.styles__slackNotificationLevelForm___1j22Y {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.styles__slackNotificationLevelForm___1j22Y > * {
  lost-column-cycle: 2;
}
.styles__slackNotificationLevelForm___1j22Y > *: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___1j22Y > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__slackNotificationLevelForm___1j22Y > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__slackNotificationLevelForm___1j22Y > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__slackNotificationLevelForm___1j22Y > *: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___1j22Y > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__slackNotificationLevelForm___1j22Y > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__slackNotificationLevelForm___1j22Y > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__slackNotificationLevelForm___1j22Y {
  margin-top: 20px;
}
.styles__emailNotificationForm___3Nrym .styles__address___2p8NQ {
  margin-bottom: 16px;
}
.styles__slackNotificationForm___9GdOA.styles__slackNotificationFormDeleting___qkV74 {
  opacity: 0.5;
  pointer-events: none;
}
.styles__slackNotificationsCreateForm___3pfmj {
  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___3pfmj .styles__inputContainer___ERTsT {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
.styles__slackNotificationsCreateForm___3pfmj > * {
  display: block;
  margin: 0 8px;
  white-space: nowrap;
}
.styles__slackNotificationsCreateForm___3pfmj .styles__deleteIcon___WzRSl {
    cursor: pointer;
    fill: #8f9ea8;
}
.styles__slackNotificationsCreateForm___3pfmj .styles__deleteIcon___WzRSl:hover {
  fill: #ef4a53;
}
.styles__slackNotificationsCreateForm___3pfmj .styles__deleteIcon___WzRSl svg {
      position: relative;
      top: 12px;
}
.styles__slackNotificationsCreateForm___3pfmj .styles__slackCreateBtn___pt1Ed {
    position: relative;
    top: 10px;
}
.styles__successMessage___3qUZM {
  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___3qUZM .styles__iconWrapper___e6GuO {
    margin-right: 8px;
  }
.styles__emailError___1DOvf {
  margin-bottom: 20px;
}
.styles__azureCertificateDownloadButton___2PAKU .styles__buttonLabel___1QVyp {
    margin-left: 8px;
  }
.styles__link___a86zt {
  text-decoration: none;
  cursor: pointer;
  color: #2596ec;
}
.styles__link___a86zt a {
    text-decoration: none;
  }
.styles__accessForm___2TGuO {
  min-height: 250px;
}
.styles__newAccessTokenModalBody___2YrIj {
  max-width: 590px;
  margin: 0 auto;
}
.styles__addAccessTokenSubheader___2_5ll {
  margin-bottom: 40px;
}
.styles__resultDescription___1xCTg {
  text-transform: uppercase;
  color: #6f777c;
  margin-top: 30px;
  line-height: 19px;
}
.styles__resultToken___1-m3K {
  margin-top: 6px;
  margin-bottom: 30px;
  word-wrap: break-word;
}
.styles__copyCommand___2NCUP textarea:focus,
  .styles__copyCommand___2NCUP input:focus {
    outline: none;
  }
.styles__resultExample___33FM_ {
  margin: 15px 0;
}
.styles__resultExample___33FM_ .styles__firstCommand___2rGOT {
    margin: 5px 0;
  }
.styles__warningBox___MFWhd {
  margin: 15px 0;
  height: 80px;
  background: #fafafb;
}
.styles__warningBox___MFWhd .styles__yellowBar___1sfrE {
    position: absolute;
    width: 4px;
    height: 80px;
    background: #f7d933;
    margin-right: 10px;
  }
.styles__warningBox___MFWhd .styles__warningMessage___1OWHe {
    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___MFWhd .styles__warningMessage___1OWHe .styles__warningText___1TX44 {
      margin: 20px;
    }
.styles__warningBox___MFWhd .styles__secretLabel___3FrKT {
    color: #27343b;
    font-size: 14px;
    margin-left: 20px;
  }
@media (max-width: 960px) {
  .styles__accessForm___2TGuO {
    max-width: 600px;
  }
}
@media (max-width: 600px) {
  .styles__accessForm___2TGuO {
    max-width: 500px;
    padding: 16px;
  }
  .styles__warningBox___MFWhd {
    height: 100px;
    margin-right: 16px;
  }
    .styles__warningBox___MFWhd .styles__yellowBar___1sfrE {
      height: 100px;
    }
    .styles__warningBox___MFWhd .styles__secretLabel___3FrKT {
      margin-right: 20px;
    }
  .styles__alignFirstButtonLeft___1HTfV {
    -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___1HTfV button:nth-child(2) {
    margin-left: 10px;
  }
}
@media (max-width: 480px) {
  .styles__accessForm___2TGuO {
    max-width: 325px;
    padding: 16px;
  }
  .styles__warningBox___MFWhd {
    margin-right: 16px;
    height: 150px;
  }
    .styles__warningBox___MFWhd .styles__yellowBar___1sfrE {
      height: 150px;
    }
}
.styles__button___2xXN9 button {
    margin: 6px 0 !important;
  }
.styles__selectAction___58ZcV {
  -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___58ZcV .styles__checkboxParent___VTuv9 {
    width: 14px;
    height: 14px;
  }
.styles__selectAction___58ZcV .styles__checkbox___3tIqJ {
    opacity: 0.5;
  }
.styles__selectAction___58ZcV .styles__checkbox___3tIqJ.styles__checked___2mpJL {
    opacity: 1;
  }
.styles__selectAction___58ZcV .styles__checkboxIcon___13grt {
    width: 14px;
    height: 14px;
  }
.styles__asterisk___28jAX {
  color: #e12b0c;
}
.styles__code___3tuDe {
  background-color: #f3f4f4;
  display: inline-block;
  padding: 5px 10px;
  font-family: 'Courier New', Courier, monospace;
}

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

.styles__tooltipMultiLineContent___p6xV- {
  font-weight: bold;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3leRg {
  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___2IQ1M {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2IQ1M {
  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___byboW {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___byboW {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__content___1ujI3 {
  padding-bottom: 4px;
}
.styles__card___2uTll {
  height: 100%;
  color: #27343b;
  font-size: 14px;
}
.styles__accessTokenForm___343ir {
  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__subtext___3eoob {
  margin: 28px 0;
}
.styles__confirmationBox___3MwcF {
  margin: 0 auto;
  max-width: 800px;
  background-color: #fafafb;
}
.styles__removalTable___3VmRD {
  margin: 32px 0;
}
.styles__removalTable___3VmRD hr {
    margin: 0;
  }
.styles__removalTable___3VmRD > * {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.styles__removalTable___3VmRD > * > * {
  lost-column-cycle: 3;
}
.styles__removalTable___3VmRD > * > *:nth-child(1) {
  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__removalTable___3VmRD > * > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__removalTable___3VmRD > * > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__removalTable___3VmRD > * > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__removalTable___3VmRD > * > *: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__removalTable___3VmRD > * > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__removalTable___3VmRD > * > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__removalTable___3VmRD > * > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__removalTable___3VmRD > * > *: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__removalTable___3VmRD > * > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__removalTable___3VmRD > * > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__removalTable___3VmRD > * > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__removalTable___3VmRD > * {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column wrap;
          flex-direction: column wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding: 0 10px;
}
.styles__removalTable___3VmRD > *:first-child {
  padding: 5px 10px;
}
.styles__removalTable___3VmRD > *:last-child {
  padding-bottom: 5px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3rw-w {
  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___2yJC1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2yJC1 {
  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___2IQcM {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2IQcM {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__parent___2V0a1 {
  max-width: 700px;
  color: #27343b;
}
.styles__header___3OTH_ {
  font-size: 22px;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-bottom: 10px;
}
.styles__header___3OTH_ .styles__text___3smO2 {
    margin-left: 20px;
  }
.styles__confirmationBox___3Fl-h {
  margin: 0 auto;
  max-width: 800px;
  background-color: #fafafb;
}
.styles__removalTable___1YYox {
  margin-top: 32px;
}
.styles__removalTable___1YYox hr {
    margin: 0;
  }
.styles__removalTable___1YYox > * {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.styles__removalTable___1YYox > * > * {
  lost-column-cycle: 2;
}
.styles__removalTable___1YYox > * > *: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__removalTable___1YYox > * > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__removalTable___1YYox > * > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__removalTable___1YYox > * > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__removalTable___1YYox > * > *: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__removalTable___1YYox > * > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__removalTable___1YYox > * > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__removalTable___1YYox > * > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__removalTable___1YYox > * {
  padding: 5px 10px;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.styles__removalTableTokens___2FHL8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

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

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

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

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

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___332jq {
  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___3JwNE {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3JwNE {
  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___12FC8 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___12FC8 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__main___2JGR4 {
  margin-top: 16px;
}
.styles__main___2JGR4 button {
    padding: 0;
    margin-left: 0;
  }
.styles__row___tPT2D {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.styles__row___tPT2D > * {
  lost-column-cycle: 3;
}
.styles__row___tPT2D > *:nth-child(1) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(12.4875% - 10.5px);
  max-width: calc(12.4875% - 10.5px);
  width: calc(12.4875% - 10.5px);
}
.styles__row___tPT2D > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__row___tPT2D > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__row___tPT2D > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__row___tPT2D > *:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(12.4875% - 10.5px);
  max-width: calc(12.4875% - 10.5px);
  width: calc(12.4875% - 10.5px);
}
.styles__row___tPT2D > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__row___tPT2D > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__row___tPT2D > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__row___tPT2D > *:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(74.925% - 3px);
  max-width: calc(74.925% - 3px);
  width: calc(74.925% - 3px);
}
.styles__row___tPT2D > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__row___tPT2D > *:nth-child(3):last-child {
  margin-right: 0;
}
.styles__row___tPT2D > *:nth-child(3):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__hookTeam___f_qo2 {
  float: left;
  margin-right: 12px;
}
.styles__info___xnUvr {
  margin-top: 16px;
  margin-bottom: 20px;
  background-color: #f7f7f8;
  padding: 16px;
  border-radius: 3px;
}

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

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

/* IdpIntegration Settings styles */

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

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

/* Nautilus colors */

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

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

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

/* module account */

.styles__wrapper___KGzLf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 24px;
  overflow: hidden;
  background: #f7f8f9;
}

.styles__wrapper___KGzLf .styles__card___3uHrc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column nowrap;
            flex-flow: column nowrap;
  }

.styles__wrapper___KGzLf .styles__card___3uHrc h3 {
      margin-bottom: 36px;
    }

.styles__wrapper___KGzLf .styles__card___3uHrc .styles__errorHeader___39ppx {
      margin: 20px 0;
      font-size: 14px;
      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;
      margin-bottom: 10px;
    }

.styles__wrapper___KGzLf .styles__card___3uHrc .styles__errorHeader___39ppx .styles__text___PJXC8 {
        margin-left: 20px;
      }

.styles__wrapper___KGzLf .styles__card___3uHrc > input {
    margin-bottom: 10px;
  }

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

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

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

.styles__settingsInfoCard___xcRHY {
  margin-bottom: 32px;
  background-color: #ffffff;
}

.styles__header___CX8kr {
  background-color: #ffffff;
}

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

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

.styles__buttonWrapper___2_lg5 {
  text-align: right;
}

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

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

.styles__loadingCard___2bV1c {
  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___hbHgX {
  min-height: 400px;
}

.styles__promoCodeWrapper___2fnwS {
  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__accountLeftNav___2zLGk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.styles__accountCardsContainer___sgyem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 1050px;
  margin-bottom: 20px;
}

.styles__accountCardsContainer___sgyem .styles__card___3uHrc {
    margin-bottom: 20px;
  }

.styles__changePasswordAndEmails___1OA0j .styles__emails___2tv1n,
  .styles__changePasswordAndEmails___1OA0j .styles__password___1LrAD {
    margin-top: 40px;
    margin-bottom: 48px;
  }

.styles__changePasswordAndEmails___1OA0j .styles__accountInfo___DAHFS {
    margin-top: 40px;
  }

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

.styles__changePasswordAndEmails___1OA0j .styles__inputField___j6TSF {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: 24px;
  }

.styles__changePasswordAndEmails___1OA0j .styles__setAsPrimaryBtn___1-y7C {
    color: #c0c9ce;
    background-color: #fbfbfc;
    border-color: #fbfbfc;
  }

.styles__changePasswordAndEmails___1OA0j .styles__primaryEmail___3TEac {
    margin: 4px;
    padding: 0 4px;
    min-width: 88px;
    height: 36px;
    display: inline-block;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 32px;
    color: #fbfbfc;
    background-color: #c0c9ce;
    border: 2px solid #c0c9ce;
    border-radius: 3px;
  }

.styles__changePasswordAndEmails___1OA0j .styles__checkedIcon___1aJP3 {
    margin: 8px 4px 4px 4px;
    padding: 0 4px;
  }

.styles__changePasswordAndEmails___1OA0j .styles__checkedIcon___1aJP3 svg {
      position: relative;
      top: 4px;
    }

.styles__changePasswordAndEmails___1OA0j .styles__button___3kd9n {
    margin: 4px;
    padding: 0 4px;
  }

.styles__changePasswordAndEmails___1OA0j .styles__passError___BDhqz {
    margin-top: 24px;
  }

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

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

.styles__recoveryCode___2ngfU {
  margin-right: 40px;
}

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

.styles__disableBtn___29ebf {
  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___29ebf:hover {
  border: 1px solid #e12b0c;
}

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

.styles__saveBtnWithTokens___Hnvvt button {
    margin: 0;
  }

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

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

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

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

/* cloud providers card */

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

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

.styles__cloudProviderRow___17ANq > *: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___17ANq > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__cloudProviderRow___17ANq > *: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___17ANq > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__cloudProviderRow___17ANq > *: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___17ANq > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__cloudProviderRow___17ANq > *: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___17ANq > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__cloudProviderRow___17ANq > *: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___17ANq > *:nth-child(5):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__cloudProviderRow___17ANq > *: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___17ANq > *:nth-child(6):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__cloudProviderRow___17ANq {
  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___17ANq .styles__noMargin___M94tb {
    margin: 0;
}

/* Fix overflow issue in safari */

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

.styles__providerKey___2-G0b {
  word-wrap: break-word;
}

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

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

.styles__addCredentials___3vIYy {
  color: #c0c9ce;
}

/* source providers card */

.styles__sourceProviderRow___3iz--,
.styles__sourceProviderHeader___3sVLb {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}

.styles__sourceProviderRow___3iz-- > *, .styles__sourceProviderHeader___3sVLb > * {
  lost-column-cycle: 5;
}

.styles__sourceProviderRow___3iz-- > *:nth-child(1), .styles__sourceProviderHeader___3sVLb > *: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__sourceProviderRow___3iz-- > *:nth-child(1):nth-child(1n), .styles__sourceProviderHeader___3sVLb > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

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

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

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

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

.styles__sourceProviderRow___3iz-- > *:nth-child(3), .styles__sourceProviderHeader___3sVLb > *: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__sourceProviderRow___3iz-- > *:nth-child(3):nth-child(1n), .styles__sourceProviderHeader___3sVLb > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__sourceProviderRow___3iz-- > *:nth-child(4), .styles__sourceProviderHeader___3sVLb > *: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__sourceProviderRow___3iz-- > *:nth-child(4):nth-child(1n), .styles__sourceProviderHeader___3sVLb > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__sourceProviderRow___3iz-- > *:nth-child(5), .styles__sourceProviderHeader___3sVLb > *:nth-child(5) {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: -12px;
  max-width: -12px;
  width: -12px;
}

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

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

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

.styles__sourceProviderRow___3iz--,
.styles__sourceProviderHeader___3sVLb {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.styles__sourceProviderRow___3iz-- .styles__noMargin___M94tb, .styles__sourceProviderHeader___3sVLb .styles__noMargin___M94tb {
    margin: 0;
}

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

.styles__sourceProviderMessage___3DP9O {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-top: -12px;
}

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

.styles__sourceProviderMessage___3DP9O p {
    /* @mixin tertiary; */
  }

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

/* access tokens */

.styles__accessTokensView___3Fpgh {
  lost-container: column
}

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

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

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

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

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

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

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

.styles__accessTokensView___3Fpgh .styles__collapsed___1MR7m {
    max-height: 392px !important;
}

.styles__accessTokensView___3Fpgh .styles__expanded___2RIxh {
    max-height: 1960px !important;
}

.styles__showMoreOrLess___2jV_8 {
  text-align: center;
}

.styles__showMoreOrLess___2jV_8 .styles__link___1HsCS {
    text-decoration: none;
    cursor: pointer;
  }

.styles__showMoreOrLess___2jV_8 .styles__link___1HsCS span,
    .styles__showMoreOrLess___2jV_8 .styles__link___1HsCS svg {
      vertical-align: middle;
    }

.styles__showMoreOrLess___2jV_8 .styles__icon___3gHRY {
    -webkit-transition: rotate 0.5s ease-in-out;
    transition: rotate 0.5s ease-in-out;
  }

.styles__showMoreOrLess___2jV_8 .styles__rotateIcon___qD17G {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

/* notifications email, slack and announcements */

.styles__notifications___Qh6Jr .styles__emailRadiogroup___2BBPW {
    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___Qh6Jr .styles__slackNotifications___wWffn {
    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___3say- {
  margin-left: 16px;
}

/* plans */

.styles__planDetails___111xw {
  height: 180px;
}

.styles__planDetails___111xw .styles__planContent___1tc0e {
    margin: 0 80px;
  }

.styles__planDetails___111xw .styles__icon___3gHRY {
    fill: #8f9ea8;
    margin-right: 8px;
  }

.styles__planDetails___111xw .styles__nodeCost___1zW3Q,
  .styles__planDetails___111xw .styles__privateReposAvailable___1lPfu {
    font-size: 14px;
    line-height: 20px;
    color: #27343b;
    margin-bottom: 4px;
  }

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

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

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

.styles__planDetails___111xw .styles__priceText___2R_9g .styles__bigNumber___1KY_i {
      margin-right: 8px;
      margin-left: 8px;
    }

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

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

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

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

.styles__planDetails___111xw .styles__splitPanels___1tP7m > *: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___111xw .styles__splitPanels___1tP7m > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__planDetails___111xw .styles__splitPanels___1tP7m > *: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___111xw .styles__splitPanels___1tP7m > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__planDetails___111xw .styles__splitPanels___1tP7m {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.styles__planDetails___111xw .styles__monitoredWithNautilus___m_807 {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: normal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #8f9ea8;
  }

.styles__planDetails___111xw .styles__nautilusUpsell___MrZRl {
    background-color: #ffffff;
    border: solid 1px #e0e4e7;
    padding: 12px;
    border-radius: 2px;
    margin-top: 32px;
  }

.styles__planDetails___111xw .styles__nautilusLink___wi4Ms {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: normal;
    margin-left: 12px;
  }

.styles__planDetails___111xw button {
    margin: 0;
  }

.styles__planDetails___111xw .styles__planButton___2JiHV {
    margin-top: 20px;
  }

/* coupon codes */

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

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

.styles__couponCodes___2T-R7 > *: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___2T-R7 > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__couponCodes___2T-R7 > *: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___2T-R7 > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__couponCodes___2T-R7 > *: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___2T-R7 > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__couponCodes___2T-R7 .styles__button___3kd9n {
    min-width: 40px;
    margin: 0 0 0 16px;
    padding: 0;
}

.styles__couponCodes___2T-R7 .styles__name___2JyA8 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

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

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

/* quotas */

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

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

.styles__quotasContainer___QnUWQ .styles__quotas___2TkBU > *: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___QnUWQ .styles__quotas___2TkBU > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__quotasContainer___QnUWQ .styles__quotas___2TkBU > *: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___QnUWQ .styles__quotas___2TkBU > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__quotasContainer___QnUWQ .styles__quotas___2TkBU ul {
      list-style: none;
      padding: 0;
}

.styles__quotasContainer___QnUWQ .styles__quotas___2TkBU ul::before,
  .styles__quotasContainer___QnUWQ .styles__quotas___2TkBU ul::after {
  content: ' ';
  display: table;
}

.styles__quotasContainer___QnUWQ .styles__quotas___2TkBU ul::after {
  clear: both;
}

.styles__quotasContainer___QnUWQ .styles__quotas___2TkBU ul {
  padding-left: 16px;
}

.styles__quotasContainer___QnUWQ .styles__quotas___2TkBU 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___QnUWQ .styles__quotas___2TkBU li .styles__quotaField___25GZx:first-child {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
      }

.styles__quotasContainer___QnUWQ .styles__quotas___2TkBU li > * {
  margin: 0 4px;
}

/* delete account card */

.styles__deleteAccount___309Wa {
  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___309Wa > div > p {
      color: #ef4a53;
    }

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

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

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

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

.styles__accessTokensTable___yvW8_ > * > *: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___yvW8_ > * > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__accessTokensTable___yvW8_ > * > *: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__accessTokensTable___yvW8_ > * > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__accessTokensTable___yvW8_ > * > *:nth-child(3) {
  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__accessTokensTable___yvW8_ > * > *:nth-child(3):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__accessTokensTable___yvW8_ > * > *:nth-child(4) {
  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__accessTokensTable___yvW8_ > * > *:nth-child(4):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__accessTokensTable___yvW8_ > * > *: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___yvW8_ > * > *:nth-child(5):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__accessTokensTable___yvW8_ > * > *: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___yvW8_ > * > *:nth-child(6):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

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

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

.styles__accessTokensTable___yvW8_ .styles__selectAction___2NMPr {
    -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___yvW8_ .styles__selectAction___2NMPr .styles__checkboxParent___1r5K- {
      width: 14px;
      height: 14px;
    }

.styles__accessTokensTable___yvW8_ .styles__selectAction___2NMPr .styles__checkbox___29o9- {
      opacity: 0.5;
    }

.styles__accessTokensTable___yvW8_ .styles__selectAction___2NMPr .styles__checkbox___29o9-.styles__checked___2fi78 {
      opacity: 1;
    }

.styles__accessTokensTable___yvW8_ .styles__selectAction___2NMPr .styles__checkboxIcon___3GblQ {
      width: 14px;
      height: 14px;
    }

/* cloudProviderError */

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

.styles__errorField___3nMET.styles__visible___1T2Zs {
  display: block;
}

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

.styles__errorField___3nMET .styles__errorText___2izRD {
    margin-left: 8px;
}

/* convert account to organization */

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

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

.styles__convertAccount___2YjRF > *: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___2YjRF > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

.styles__convertAccount___2YjRF > *: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___2YjRF > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}

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

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

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

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

.styles__convertAccount___2YjRF .styles__semiBold___1g1bI {
    font-weight: 600;
}

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

.styles__successMessage___1POcQ {
  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___1POcQ .styles__successIcon___2MMpI {
    height: 18px;
    width: 18px;
    vertical-align: bottom;
    margin-right: 4px;
  }

.styles__accountSwitcher___2gLhg {
  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___2gLhg span {
    margin-right: 12px;
  }

.styles__linkedCTA___2AeOx {
  position: relative;
  top: -5px;
  font-weight: bold;
  -webkit-box-align: left;
      -ms-flex-align: left;
          align-items: left;
  color: #287cf9;
  cursor: pointer;
}

.styles__profileHeaderBar___Qi1zZ {
  height: 100%;
  background: white;
  border-bottom: 1px solid #e0e4e7;
}

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

.styles__contextNav___3Awf1 {
  border-bottom: 1px solid #ffffff;
}

.styles__twoFactor___ZyA9K {
  text-align: center;
  margin: 0 auto;
  width: 511px;
  margin-top: 20px;
}

.styles__twoFactor___ZyA9K .styles__twoFactorDescription___2oMjs {
    line-height: 19px;
  }

.styles__twoFactor___ZyA9K .styles__twoFactorDescription___2oMjs .styles__subheader___1MGtY {
      font-weight: 600;
    }

.styles__warning___3t1pt {
  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___3t1pt .styles__emphasis___3yvjj {
    margin-left: 10px;
    color: #e12b0c;
  }

.styles__twoFactorLoading___4xetV {
  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___1HsCS {
  text-decoration: none;
  cursor: pointer;
  color: #2596ec;
}

.styles__link___1HsCS a {
    text-decoration: none;
  }

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

.styles__cardTitle___7t1MK {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
}

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

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

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

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

@media (min-width: 601px) and (max-width: 960px) {
  .styles__accountCardsContainer___sgyem {
    width: 600px;
  }
    .styles__wrapper___KGzLf .styles__card___3uHrc {
      width: 600px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column wrap;
              flex-flow: column wrap;
    }
  .styles__twoFactor___ZyA9K {
    max-width: 600px;
  }
    .styles__twoFactor___ZyA9K .styles__twoFactorDescription___2oMjs {
      min-height: 57px;
    }
}

@media (max-width: 820px) {
  .styles__accountCardsContainer___sgyem {
    width: 1000px;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .styles__settingsInfoCard___xcRHY {
    width: 820px;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
    .styles__wrapper___KGzLf .styles__card___3uHrc {
      width: 820px;
      height: 100%;
      overflow-x: scroll;
      overflow-y: hidden;
    }
  .styles__twoFactor___ZyA9K {
    width: 820px;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
  }
    .styles__twoFactor___ZyA9K .styles__twoFactorDescription___2oMjs {
      min-height: 57px;
    }
}

.styles__marginSpacing___3BW5M {
  margin-top: 40px;
}

.styles__accessTitle___2fGBS {
  font-size: 18px;
}

.styles__notice___1xCes {
  text-align: center;
}

.styles__notice___1xCes .styles__enabledInstructions___QwylM {
    text-align: left;
    margin: 0 25%;
    min-width: 150px;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: #099cec;
}
.styles__tabsSection___2J_ZQ .styles__selected___2aCVV {
    font-weight: 600;
    color: #099cec;
    border-bottom: 2px solid #099cec;
  }
.styles__content___2zlo3 {
  margin-top: 32px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3aiOa {
  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___1ZpTv {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1ZpTv {
  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___1pshz {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___1pshz {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__createButtons___2FzAr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 16px;
}
.styles__upgradeLink___2Gjiz {
  color: #099cec;
  font-weight: 600;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3xvBq {
  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___3Douz {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___3Douz {
  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___17few {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___17few {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*
  For distinction between 'cloud' and 'common', see comments in
  this component's JS
*/
.styles__item___30FaT {
  list-style: none;
}
.styles__content___1OU3e {
  position: relative;
  border-bottom: 1px solid #e0e4e7;
}
.styles__common___2qCDS .styles__content___1OU3e {
    padding: 16px 0;
  }
.styles__cloud___DViGH .styles__content___1OU3e {
    padding: 20px 0;
  }
.styles__cloud___DViGH:first-of-type .styles__content___1OU3e {
    border-top: 1px solid #e0e4e7;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1l1-v {
  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___mpNdw {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___mpNdw {
  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___nsoJT {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___nsoJT {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__leaveButtons___h6aGA {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 16px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___3tn-m {
  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___dcPuX {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___dcPuX {
  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___21avj {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___21avj {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__actions___3u9nz::before,
  .styles__actions___3u9nz::after {
  content: ' ';
  display: table;
}
.styles__actions___3u9nz::after {
  clear: both;
}
.styles__actions___3u9nz {
  margin-bottom: 12px;
}
.styles__addBtn___3_b_g,
.styles__menuBtn___kXJA1 {
  float: right;
}
.styles__addBtn___3_b_g,
.styles__menuBtn___kXJA1 > button {
  margin-top: 0;
  margin-bottom: 0;
}
.styles__addBtn___3_b_g {
  margin-right: 0;
  margin-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.styles__addBtn___3_b_g svg {
    top: 0 !important;
  }
.styles__listItem___38-yh {
  display: flex;
  flex-flow: row wrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap
}
.styles__listItem___38-yh > * {
  lost-column-cycle: 2;
}
.styles__listItem___38-yh > *: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___38-yh > *:nth-child(1):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___38-yh > *:nth-child(1):last-child {
  margin-right: 0;
}
.styles__listItem___38-yh > *:nth-child(1):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___38-yh > *:nth-child(2) {
  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__listItem___38-yh > *:nth-child(2):nth-child(1n) {
  margin-right: 12px;
  margin-left: 0;
}
.styles__listItem___38-yh > *:nth-child(2):last-child {
  margin-right: 0;
}
.styles__listItem___38-yh > *:nth-child(2):nth-child(12n) {
  margin-right: 0;
  margin-left: auto;
}
.styles__listItem___38-yh {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 24px;
}
.styles__listItem___38-yh > div {
  -ms-flex-item-align: center;
      align-self: center;
}
.styles__listItem___38-yh .styles__action___2S_42 {
    height: 20px;
    margin: 0;
    padding: 0;
    line-height: 20px;
    min-height: 20px;
}
.styles__listItem___38-yh .styles__action___2S_42 svg {
      top: 0;
      width: 20px !important;
      height: 20px !important;
    }
.styles__listHeader___2FF2b {

  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___2FF2b div {
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 12px;
    color: #8f9ea8;
  }
.styles__items___28gKl {
  margin-bottom: 32px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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: #099cec;
}
.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;
    }
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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 : #f7d933;/* 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 : #8f9ea8;/* 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 : #f7d933;/* 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 : #8f9ea8;/* 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 : #f7d933;/* 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 : #8f9ea8;/* 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; }
}

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

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

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

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

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___1ukft {
  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___2zAjW {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2zAjW {
  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___2jvMG {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___2jvMG {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__wrapper___2kQOy {
  width: 100%;
}
.styles__hero___1JyRK {
  text-align: center;
  margin: 60px 0 40px;
}
.styles__hero___1JyRK .styles__title___27d1F {
    font-size: 38px;
    font-weight: bold;
  }
.styles__content___1sV8b {
  width: 740px;
  margin: auto;
  margin-bottom: 140px;
}
.styles__title___27d1F {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0;
}
.styles__subTitle___1wonT {
  font-size: 18px;
  font-weight: 400;
  margin: 15px 0 2px;
}
.styles__steps___1TC1H {
  padding-left: 20px;
}
.styles__steps___1TC1H li {
    margin-bottom: 4px;
  }
.styles__warningTitle___3_xF6 {
  font-size: 14px;
  margin-top: 0;
  color: #ef4a53;
  margin-left: 8px;
}
.styles__warningIcon___2KjCv {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 5px;
}
.styles__warningIcon___2KjCv svg {
    margin-bottom: -4px;
  }
.styles__boldText___1n00Q {
  font-weight: 700;
}
.styles__infoText___15cwm {
  margin: 2px 0 15px;
  font-size: 14px;
  line-height: 20px;
}
.styles__convertButtons___DEzx1 {
  text-align: right;
}
.styles__idInput___NqeRd {
  margin-top: 12px;
  margin-bottom: 32px;
}
.styles__errorMessage___2l8yp {
  font-size: 13px;
  color: #ef4a53;
}
.styles__successMessage___3vlal {
  text-align: center;
  padding: 10px 0 20px;
}
.styles__successMessage___3vlal .styles__successTitle___3p834 {
    font-size: 18px;
    color: #70c9a0;
  }
.styles__boldItalic___NBbrc {
  font-weight: 600;
  font-style: italic;
}
.styles__provider___2EfkK {
  display: inline-block;
  text-align: center;
  margin-left: 12px;
  margin-right: 16px;
  color: #c0c9ce;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___34Npo {
  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___130l- {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___130l- {
  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___3K4Es {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3K4Es {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__hero___1q3zc {
  text-align: center;
  margin: 60px 0 40px;
}
.styles__hero___1q3zc .styles__title___aMHds {
    font-size: 38px;
    font-weight: bold;
  }
.styles__modalWrapper___OCuXf {
  padding: 70px;
}
.styles__modal___3Ey8F {
  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___3Ey8F .styles__modalTitle___2HEbr {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
.styles__modal___3Ey8F .styles__icon___2-ojB {
    margin: auto;
    width: 83px;
    height: 83px;
    margin-bottom: 24px;
  }
.styles__modal___3Ey8F p {
    margin-bottom: 60px;
  }
.styles__modal___3Ey8F .styles__buttons___kBkyD {
    margin: auto;
  }
.styles__content___1Ex9d {
  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___kBkyD {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}
.styles__error___bNjx4 {
  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___2j5sl {
  fill: #8f9ea8;
}
.styles__checkIcon___3mg9g {
  position: absolute;
  left: -2px;
  top: -1px;
  fill: #aae8d8;
}
.styles__checkIcon___3mg9g > svg {
    width: 20px;
    height: 18px;
  }
.styles__feature___3ED4l {
  position: relative;
  margin-bottom: 12px;
  text-align: left;
  padding-left: 24px;
}

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___14PYK {
  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___2Ivzx {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___2Ivzx {
  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___gqO6D {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___gqO6D {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__hero___dOWa6 {
  text-align: center;
  margin: 60px 0 40px;
}
.styles__hero___dOWa6 .styles__title___3JKC9 {
    font-size: 38px;
    font-weight: bold;
  }
.styles__content___1id0Y {
  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___6fP-y {
  margin: 0 8px;
}
.styles__buttons___1lGky {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}
.styles__wide___3rNPf {
  padding-left: 48px;
  padding-right: 48px;
}
.styles__infoList___2oczr {
  margin-top: 40px;
  padding-left: 16px;
}
.styles__infoList___2oczr li {
    padding-left: 16px;
    margin-bottom: 40px;
  }

/* 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 */
/* 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 */
/* Nautilus colors */
/* 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___a2YH1 {
  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___1meWy {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes styles__fadein___1meWy {
  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___3hKyf {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes styles__load8___3hKyf {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.styles__hero___1qs96 {
  text-align: center;
  margin: 60px 0 40px;
}
.styles__hero___1qs96 .styles__title___1ScBk {
    font-size: 38px;
    font-weight: bold;
    text-transform: capitalize;
  }
.styles__content___2c_xw {
  width: 740px;
  margin: auto;
  margin-bottom: 140px;
}
.styles__title___1ScBk {
  font-size: 16px;
  margin-top: 0;
}
.styles__warningTitle___3xvyn {
  font-size: 14px;
  color: #ef4a53;
  margin-left: 8px;
}
.styles__warningIcon___1rLtR {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 5px;
}
.styles__warningIcon___1rLtR svg {
    margin-bottom: -4px;
  }
.styles__converOrgCards___2nhWb .styles__card___2TXWD {
    margin-top: 20px;
    margin-bottom: 12px;
  }
.styles__boldText___1CcHE {
  font-weight: 700;
}
.styles__infoText___2Ki6S {
  margin-top: 32px;
  font-size: 14px;
  line-height: 20px;
}
.styles__convertButtons___2OQke {
  text-align: right;
}
.styles__convertButtons___2OQke .styles__link___R2swf {
    text-decoration: none;
    cursor: pointer;
    margin: 0;
  }
.styles__convertButtons___2OQke .styles__link___R2swf a {
      text-decoration: none;
    }
.styles__convertButtons___2OQke .styles__margin___1CK5s {
    margin-right: 12px;
  }
.styles__idInput___1Mbdt {
  margin-bottom: 32px;
}
.styles__input___1BoI_ {
  width: 256px;
  margin-right: 18px;
}
.styles__errorMessage___3JPTF {
  font-size: 13px;
  color: #ef4a53;
}
.styles__errorMessage___3JPTF p {
    margin: 0 0 3px;
    line-height: 1.5;
  }
.styles__provider___12fwj {
  display: inline-block;
  text-align: center;
  margin-left: 12px;
  margin-right: 16px;
  color: #c0c9ce;
}
.styles__modalWrapper___I3y0k {
  padding: 70px;
}
.styles__modal___3-Jcd {
  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___3-Jcd .styles__modalTitle___11YoT {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
.styles__modal___3-Jcd .styles__icon___1Beoi {
    margin: auto;
    width: 83px;
    height: 83px;
    margin-bottom: 24px;
  }

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

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

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

/* Nautilus colors */

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

/* Base */

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

html, body {
    min-height: 100%;
    font-family: 'Open Sans', sans-serif;
    color: #27343b;
    font-size: 14px;
    overflow-x: hidden;

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

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

.clearfix::before, .clearfix::after {
  content: ' ';
  display: table;
}

.clearfix::after {
  clear: both;
}

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

a.unstyled:visited {
  color: inherit;
}

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

.body1 {
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: normal;
}

.body2 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: normal;
}

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

.body4 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: normal;
}

.body5 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    letter-spacing: normal;
}

.body6 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
    letter-spacing: normal;
}

.body7 {
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    letter-spacing: normal;
}

.display4 {
    font-size: 112px;
    line-height: 112px;
    font-weight: 300;
    letter-spacing: -0.01em;
}

.display3 {
    font-size: 56px;
    line-height: 56px;
    font-weight: 400;
    letter-spacing: -0.005em;
}

.display2 {
    font-size: 45px;
    line-height: 64px;
    font-weight: 400;
}

.display1 {
    font-size: 38px;
    line-height: 44px;
    font-weight: 700;
}

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