/* 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 component render * method as `prefixCls` */ .bootstrap_white__tooltipContainer___111Zb { @-webkit-keyframes bootstrap_white__dTooltipZoomIn___58YUP { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes bootstrap_white__dTooltipZoomOut___WHmh3 { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } } } .bootstrap_white__tooltipContainer___111Zb .dTooltip { position: absolute; z-index: 1070; display: block; visibility: visible; line-height: 1.5; font-size: 12px; background-color: rgba(0, 0, 0, .05); padding: 1px; opacity: 0.9; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-hidden { display: none; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-inner { padding: 8px 10px; color: #333333; text-align: left; text-decoration: none; background-color: #ffffff; border-radius: 3px; min-height: 34px; border: 1px solid #b1b1b1; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-arrow, .bootstrap_white__tooltipContainer___111Zb .dTooltip-arrow-inner { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-top .dTooltip-arrow, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topLeft .dTooltip-arrow, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topRight .dTooltip-arrow { bottom: -5px; margin-left: -6px; border-width: 6px 6px 0; border-top-color: #b1b1b1; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-top .dTooltip-arrow-inner, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topLeft .dTooltip-arrow-inner, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topRight .dTooltip-arrow-inner { bottom: 1px; margin-left: -6px; border-width: 6px 6px 0; border-top-color: #ffffff; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-top .dTooltip-arrow { left: 50%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topLeft .dTooltip-arrow { left: 15%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-topRight .dTooltip-arrow { right: 15%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-right .dTooltip-arrow, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightTop .dTooltip-arrow, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightBottom .dTooltip-arrow { left: -5px; margin-top: -6px; border-width: 6px 6px 6px 0; border-right-color: #b1b1b1; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-right .dTooltip-arrow-inner, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightTop .dTooltip-arrow-inner, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightBottom .dTooltip-arrow-inner { left: 1px; margin-top: -6px; border-width: 6px 6px 6px 0; border-right-color: #ffffff; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-right .dTooltip-arrow { top: 50%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightTop .dTooltip-arrow { top: 15%; margin-top: 0; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-rightBottom .dTooltip-arrow { bottom: 15%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-left .dTooltip-arrow, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftTop .dTooltip-arrow, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftBottom .dTooltip-arrow { right: -5px; margin-top: -6px; border-width: 6px 0 6px 6px; border-left-color: #b1b1b1; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-left .dTooltip-arrow-inner, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftTop .dTooltip-arrow-inner, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftBottom .dTooltip-arrow-inner { right: 1px; margin-top: -6px; border-width: 6px 0 6px 6px; border-left-color: #ffffff; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-left .dTooltip-arrow { top: 50%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftTop .dTooltip-arrow { top: 15%; margin-top: 0; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-leftBottom .dTooltip-arrow { bottom: 15%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottom .dTooltip-arrow, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomLeft .dTooltip-arrow, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomRight .dTooltip-arrow { top: -5px; margin-left: -6px; border-width: 0 6px 6px; border-bottom-color: #b1b1b1; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottom .dTooltip-arrow-inner, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomLeft .dTooltip-arrow-inner, .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomRight .dTooltip-arrow-inner { top: 1px; margin-left: -6px; border-width: 0 6px 6px; border-bottom-color: #ffffff; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottom .dTooltip-arrow { left: 50%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomLeft .dTooltip-arrow { left: 15%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-placement-bottomRight .dTooltip-arrow { right: 15%; } .bootstrap_white__tooltipContainer___111Zb .dTooltip.dTooltip-zoom-enter, .bootstrap_white__tooltipContainer___111Zb .dTooltip.dTooltip-zoom-leave { display: block; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-enter, .bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-appear { opacity: 0; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); -webkit-animation-play-state: paused; animation-play-state: paused; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-leave { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05); animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05); -webkit-animation-play-state: paused; animation-play-state: paused; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-enter.dTooltip-zoom-enter-active, .bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-appear.dTooltip-zoom-appear-active { -webkit-animation-name: dTooltipZoomIn; animation-name: dTooltipZoomIn; -webkit-animation-play-state: running; animation-play-state: running; } .bootstrap_white__tooltipContainer___111Zb .dTooltip-zoom-leave.dTooltip-zoom-leave-active { -webkit-animation-name: dTooltipZoomOut; animation-name: dTooltipZoomOut; -webkit-animation-play-state: running; animation-play-state: running; } @keyframes bootstrap_white__dTooltipZoomIn___58YUP { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes bootstrap_white__dTooltipZoomOut___WHmh3 { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scale(0, 0); transform: scale(0, 0); } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3r6Lb { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1K_NY { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1K_NY { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3_3d1 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3_3d1 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Overrides specific to Docker */ .styles__tooltipContainer___2FgdK .dTooltip { opacity: 1; } .styles__tooltipContainer___2FgdK .dTooltip-inner { border: 0 none; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); -webkit-transform: none; transform: none; padding: 12px; max-width: 480px; } .styles__tooltipContainer___2FgdK .dTooltip-arrow { width: 11px; height: 11px; } .styles__tooltipContainer___2FgdK .dTooltip-arrow { background: #ffffff; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 999; } .styles__tooltipContainer___2FgdK .dTooltip-inner * { word-wrap: break-word; } /* placement of arrows */ .styles__tooltipContainer___2FgdK .dTooltip-placement-top .dTooltip-arrow, .styles__tooltipContainer___2FgdK .dTooltip-placement-topLeft .dTooltip-arrow, .styles__tooltipContainer___2FgdK .dTooltip-placement-topRight .dTooltip-arrow { border-left: 0 none; border-top: 0 none; background: #ffffff; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } .styles__tooltipContainer___2FgdK .dTooltip-placement-bottom .dTooltip-arrow, .styles__tooltipContainer___2FgdK .dTooltip-placement-bottomLeft .dTooltip-arrow, .styles__tooltipContainer___2FgdK .dTooltip-placement-bottomRight .dTooltip-arrow { border-right: 0 none; border-bottom: 0 none; border-left: 1px solid #dddddd; border-top: 1px solid #dddddd; } .styles__tooltipContainer___2FgdK .dTooltip-placement-left .dTooltip-arrow { border-left: 0 none; border-bottom: 0 none; background: #ffffff; border-right: 1px solid #dddddd; border-top: 1px solid #dddddd; } .styles__tooltipContainer___2FgdK .dTooltip-placement-right .dTooltip-arrow { border-right: 0 none; border-top: 0 none; border-left: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } .styles__tooltipContainer___2FgdK .styles__small___2w3xj .dTooltip-inner { min-height: 0; padding: 4px 8px; } .styles__tooltipContainer___2FgdK .styles__darkTheme___1gOPZ .dTooltip-inner { background: #27343b; color: #ffffff; } .styles__tooltipContainer___2FgdK .styles__darkTheme___1gOPZ .dTooltip-arrow { background: #27343b; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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: #2496ed; border-color: #2496ed; } .styles__primary___3MhKY:not(.styles__inverted___MX3NH):hover { background-color: #066da5; border-color: #066da5; } .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__text___1kh-4, .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 { color: #2496ed; } .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover { color: #066da5; } .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon, .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon, .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon { fill: #2496ed; } .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon, .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon, .styles__primary___3MhKY:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon { fill: #066da5; } .styles__primary___3MhKY {/* stylelint-enable */ } .styles__secondary___2l8lN { /* stylelint-disable function-whitespace-after */ } .styles__secondary___2l8lN:not(.styles__inverted___MX3NH) { background-color: #70c9a0; border-color: #70c9a0; } .styles__secondary___2l8lN:not(.styles__inverted___MX3NH):hover { background-color: #00a2a1; border-color: #00a2a1; } .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__text___1kh-4, .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 { color: #70c9a0; } .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover { color: #00a2a1; } .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon, .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon, .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon { fill: #70c9a0; } .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon, .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon, .styles__secondary___2l8lN:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon { fill: #00a2a1; } .styles__secondary___2l8lN {/* stylelint-enable */ } .styles__warn___3tWBu { /* stylelint-disable function-whitespace-after */ } .styles__warn___3tWBu:not(.styles__inverted___MX3NH) { background-color: #f7d933; border-color: #f7d933; } .styles__warn___3tWBu:not(.styles__inverted___MX3NH):hover { background-color: #ceaf00; border-color: #ceaf00; } .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__text___1kh-4, .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 { color: #f7d933; } .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover { color: #ceaf00; } .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon, .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon, .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon { fill: #f7d933; } .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon, .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon, .styles__warn___3tWBu:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon { fill: #ceaf00; } .styles__warn___3tWBu {/* stylelint-enable */ } .styles__new___28c7_ { /* stylelint-disable function-whitespace-after */ } .styles__new___28c7_:not(.styles__inverted___MX3NH) { background-color: #007bff; border-color: #007bff; } .styles__new___28c7_:not(.styles__inverted___MX3NH):hover { background-color: #2496ed; border-color: #2496ed; } .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__text___1kh-4, .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 { color: #007bff; } .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover { color: #2496ed; } .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon, .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon, .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon { fill: #007bff; } .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon, .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon, .styles__new___28c7_:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon { fill: #2496ed; } .styles__new___28c7_ {/* stylelint-enable */ } .styles__panic___3QTsj { /* stylelint-disable function-whitespace-after */ } .styles__panic___3QTsj:not(.styles__inverted___MX3NH) { background-color: #e12b0c; border-color: #e12b0c; } .styles__panic___3QTsj:not(.styles__inverted___MX3NH):hover { background-color: #bf3b42; border-color: #bf3b42; } .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__text___1kh-4, .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 { color: #e12b0c; } .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover { color: #bf3b42; } .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon, .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon, .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon { fill: #e12b0c; } .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon, .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon, .styles__panic___3QTsj:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon { fill: #bf3b42; } .styles__panic___3QTsj {/* stylelint-enable */ } .styles__dull___5FU0B { /* stylelint-disable function-whitespace-after */ } .styles__dull___5FU0B:not(.styles__inverted___MX3NH) { background-color: #8f9ea8; border-color: #8f9ea8; } .styles__dull___5FU0B:not(.styles__inverted___MX3NH):hover { background-color: #445d6e; border-color: #445d6e; } .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__text___1kh-4, .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7 { color: #8f9ea8; } .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__text___1kh-4:hover, .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7:hover { color: #445d6e; } .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a .dicon, .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ .dicon, .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__icon___32G-S .dicon { fill: #8f9ea8; } .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconRight___hvX_a:hover .dicon, .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__outlined___XFGp7.styles__iconLeft___17zOQ:hover .dicon, .styles__dull___5FU0B:not(.styles__inverted___MX3NH).styles__icon___32G-S:hover .dicon { fill: #445d6e; } .styles__dull___5FU0B {/* stylelint-enable */ } .styles__icon___32G-S, .styles__icon___32G-S:hover, .styles__text___1kh-4, .styles__text___1kh-4:hover, .styles__outlined___XFGp7, .styles__outlined___XFGp7:hover { background: none !important; } .styles__text___1kh-4, .styles__text___1kh-4:hover, .styles__icon___32G-S, .styles__icon___32G-S:hover { border: none !important; } .styles__inverted___MX3NH { border-color: white; background-color: white; color: #007bff } .styles__inverted___MX3NH:hover { background-color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .85); } .styles__inverted___MX3NH.styles__outlined___XFGp7 .dicon, .styles__inverted___MX3NH.styles__text___1kh-4 .dicon { fill: white; } .styles__inverted___MX3NH.styles__outlined___XFGp7, .styles__inverted___MX3NH.styles__text___1kh-4 { color: white; } .styles__inverted___MX3NH.styles__text___1kh-4:hover { color: rgba(255, 255, 255, .85); } .styles__inverted___MX3NH.styles__outlined___XFGp7:hover { color: #007bff; } .styles__fullWidth___1IydQ { width: 100%; } .styles__skinny___3loaZ { /* Adjust for the skinnier border by adding more padding inside so the size is the same */ padding: 1px 11px; border-width: 1px; font-weight: 600; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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: 1000; border: 1px solid #dddddd; padding: 8px 10px; width: 330px; font-size: small; -webkit-box-shadow: 1px 1px 10px #333333; box-shadow: 1px 1px 10px #333333; background: rgba(255, 255, 255, 0.65); opacity: 0.85 } .styles__consolidationHelper___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__controls___VV71p { position: absolute; top: 6px; right: 8px; font-size: small; text-align: right; } .styles__buttons___z1zMa > * { width: 18px; display: inline-block; text-align: center; } .styles__buttons___z1zMa span { cursor: pointer; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .CheckboxIcons__wrapped___AsajT { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes CheckboxIcons__fadein___3qdCI { from { opacity: 0; } to { opacity: 1; } } @keyframes CheckboxIcons__fadein___3qdCI { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes CheckboxIcons__load8___1_nZK { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes CheckboxIcons__load8___1_nZK { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .CheckboxIcons__fill___38jjR { fill: #ffffff; } /* Ideally we'd set this in the `classes` prop of the theme, per https://v1.material-ui.com/customization/themes/#properties https://v1.material-ui.com/api/checkbox/#css-api ...but `classes` doesn't seem to have any effect when specified as a default prop there, so for the moment I'm just setting a `classes` prop whenever I use a disable-able Checkbox -MH */ .CheckboxIcons__disabled___2nOnI .CheckboxIcons__fill___38jjR { fill: #e0e4e7; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___34bT- { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2_JtC { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2_JtC { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ .dicon { width: 24px; height: 24px; } /* lib/constants/sizes **************/ .styles__supertiny___piMs- { width: 8px; height: 8px; } .styles__tiny___16fk0 { width: 12px; height: 12px; } .styles__small___3FOEa { width: 18px; height: 18px; } .styles__regular___2wAxR { width: 24px; height: 24px; } .styles__large___2556i { width: 40px; height: 40px; } .styles__xlarge___5Q5Wk { width: 60px; height: 60px; } /* lib/constants/variants **************/ .styles__primary___2D4qw { fill: #2496ed; } .styles__secondary___11gMY { fill: #70c9a0; } .styles__warn___3tokU { fill: #f7d933; } .styles__panic___2ngky { fill: #e12b0c; } .styles__dull___cV3u9 { fill: #8f9ea8; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1TjcN { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___310Wd { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___310Wd { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3tnib { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3tnib { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__modalClass___30qQ1 { -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); padding: 32px } .styles__modalClass___30qQ1:focus { outline-width: 0; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___j5itR { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___odqcb { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___odqcb { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1N0jX { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1N0jX { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__hero___3OHn- { text-align: center; margin: 60px 0 40px; } .styles__hero___3OHn- .styles__title___micR5 { font-size: 38px; font-weight: bold; } .styles__modalWrapper___2dPu2 { padding: 70px; } .styles__modal___1z-Sw { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 80px; } .styles__modal___1z-Sw .styles__modalTitle___1S99g { text-align: center; font-size: 24px; font-weight: bold; } .styles__modal___1z-Sw .styles__icon___8hmfd { margin: auto; width: 83px; height: 83px; margin-bottom: 24px; } .styles__modal___1z-Sw p { margin-bottom: 60px; } .styles__modal___1z-Sw .styles__buttons___1QQMq { margin: auto; } .styles__content___1aJuq { border: 1px solid #e0e4e7; border-radius: 2px; padding: 56px; background: #ffffff; width: 740px; margin: auto auto 12px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__buttons___1QQMq { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } .styles__error___2HGML { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; margin: 8px 8px 0 0; color: #bf3b42; } .styles__providerIcon___3i3yr { fill: #8f9ea8; } .styles__checkIcon___18dnG { position: absolute; left: -2px; top: 0; fill: #aae8d8; } .styles__checkIcon___18dnG > svg { width: 20px; height: 18px; } .styles__feature___3Mmpp { position: relative; margin-bottom: 12px; text-align: left; padding-left: 24px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___5LoXx { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3uOxJ { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3uOxJ { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1STHQ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1STHQ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__hero___3DVXj { text-align: center; margin: 60px 0 40px; } .styles__hero___3DVXj .styles__title___20L8u { font-size: 38px; font-weight: bold; } .styles__content___3GJqi { border: 1px solid #e0e4e7; border-radius: 2px; padding: 56px; background: #ffffff; width: 740px; margin: auto auto 12px auto; margin-bottom: 140px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__text___3jUfx { margin: 0 8px; } .styles__buttons___3drDF { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; } .styles__wide___3cbqK { padding-left: 48px; padding-right: 48px; } .styles__infoList___24h40 { margin-top: 40px; padding-left: 16px; } .styles__infoList___24h40 li { padding-left: 16px; margin-bottom: 40px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2Yttp { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2yMYt { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2yMYt { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___4Ytqd { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___4Ytqd { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__alert___1gTLv { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; border-radius: 4px; background-color: #cccccc; color: #ffffff; fill: #ffffff; margin-bottom: 24px; } .styles__message___2moqW { font-weight: 600; } .styles__closeIcon___ISA-k { position: absolute; right: 0; top: 0; font-size: 26px; line-height: 44px; font-weight: 300; padding: 0 13px; cursor: pointer; } /* sizes */ .styles__alert___1gTLv.styles__medium___3Ly3I { min-height: 44px; padding: 10px 40px 10px 16px; } .styles__alert___1gTLv.styles__medium___3Ly3I .styles__message___2moqW { font-size: 14px; line-height: 24px; } .styles__alert___1gTLv.styles__medium___3Ly3I .styles__description___3n-m6 { font-size: 12px; line-height: 18px; } .styles__alert___1gTLv.styles__medium___3Ly3I .styles__icon___hyph8 { margin-right: 10px; height: 24px; } .styles__alert___1gTLv.styles__large___3_rxu { padding: 16px 20px 16px 20px; } .styles__alert___1gTLv.styles__large___3_rxu > * { -ms-flex-item-align: center; align-self: center; } .styles__alert___1gTLv.styles__large___3_rxu .styles__text___1mc0N { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .styles__alert___1gTLv.styles__large___3_rxu .styles__message___2moqW { font-size: 16px; } .styles__alert___1gTLv.styles__large___3_rxu .styles__description___3n-m6 { font-size: 14px; line-height: 20px; margin-top: 4px; } .styles__alert___1gTLv.styles__large___3_rxu > .styles__action___30BeG { /* actionPlacement="right" */ -ms-flex-negative: 0; flex-shrink: 0; } .styles__alert___1gTLv.styles__large___3_rxu .styles__icon___hyph8 { margin-right: 16px; width: 32px; height: 32px; } .styles__alert___1gTLv.styles__large___3_rxu .styles__icon___hyph8 img, .styles__alert___1gTLv.styles__large___3_rxu .styles__icon___hyph8 svg { width: 32px; height: 32px; } .styles__text___1mc0N > .styles__action___30BeG { /* actionPlacement="below" */ margin-top: 4px; } /* alert types */ .styles__success___3rW0I { background-color: #54d1b0; } .styles__info___26JqH { background-color: #f3f9ff; color: #27343b; border: 1px solid rgb(204, 229, 255); } .styles__info___26JqH .styles__icon___hyph8 { fill: #576167; } .styles__warning___r2wHs { background-color: #fef5c3; color: #d4611d; border: 1px solid #db7432; } .styles__warning___r2wHs .styles__icon___hyph8 { fill: #d4611d; } .styles__warning___r2wHs .styles__text___1mc0N { /* the contrast of dark orange on light orange is low; bold the text to make it easier to read */ font-weight: 600; } .styles__danger___mgONa { background-color: #ff9d66; } .styles__error___TF6ai { background-color: rgba(248, 160, 154, .5); border: 1px solid #8c0607; color: #8c0607; fill: #8c0607; } .styles__error___TF6ai .styles__icon___hyph8 { fill: #8c0607; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1HuoN { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2Djn_ { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2Djn_ { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2MM-e { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2MM-e { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Top Nav: - default avatar: white fingerprint - personalized avatar: blue border (1) Org list (2) Community Header Profile (3) Publisher Header Profile: - personalized avatar: grey border - the default avatar (i.e., the fingerprint): no border and is a blue fingerprint */ .styles__container___1-c9A { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } img.styles__avatar___3Wzgz { border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; } .styles__default___3Uxzu img.styles__avatar___3Wzgz { border: none; padding: 3px; } .styles__greyBorder___3U4Fh img.styles__avatar___3Wzgz { border: 3px solid #e7e8e9; } .styles__blueBorder___3wfrJ img.styles__avatar___3Wzgz { border: 3px solid #6bc3f3; } .styles__placeholder___1CvzL { padding: 3px; -webkit-box-sizing: content-box; box-sizing: content-box; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___dgX5O { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3hvID { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3hvID { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3C4bD { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3C4bD { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__header___2DnGz { background-color: #ffffff; padding-top: 50px; } .styles__badge___1ISGd { margin-left: 12px; } .styles__infoSection___1UTm3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 0 auto; padding-top: 16px; } .styles__infoSectionCTA___32ouv { max-height: 130px; } .styles__photoWrapper___3q6TR { width: 160px; height: 160px; } .styles__photoWrapper___3q6TR { min-width: 160px; position: relative; bottom: 40px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__photoWrapper___3q6TR > * { width: 80px; } .styles__info___1Rd2O { color: #445d6e; } @media only screen and (max-width: 600px) { .styles__infoSection___1UTm3 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 32px; } } @media only screen and (min-width: 601px) { .styles__infoSection___1UTm3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 176px; margin: 0 auto; padding-top: 16px; } .styles__info___1Rd2O { padding-left: 16px; } } .styles__photo___3Ysbi { width: 152px; height: 152px; } .styles__photo___3Ysbi { background-size: cover; background-position: 50%; } .styles__fallback___2uv23 { width: 80px; height: 80px; } .styles__name___14uxE { font-size: 22px; line-height: 32px; font-weight: 400; letter-spacing: normal; font-weight: 600; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .styles__name___14uxE > *:not(:first-child) { margin-left: 12px; } .styles__editLink___3a5pj { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; margin-left: 8px; color: #2496ed; 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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___Vphmu { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3PdYf { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3PdYf { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___37xGY { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___37xGY { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__card___16ovJ { background: #fbfbfc; border: 1px solid #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__label___13A5g { display: inline-block; margin-left: 20px; } .styles__card___16ovJ.styles__disabled___9JZtT { opacity: 0.5; min-height: 200px; } .styles__defaultText___3Rw-A { text-align: center; font-style: italic; margin-top: 20px; } .styles__card___16ovJ.styles__shy___15ciY { padding: 16px; } .styles__card___16ovJ.styles__shy___15ciY .styles__title___2cl7H { margin-bottom: 20px; text-transform: uppercase; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2FjBc { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3I4xd { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3I4xd { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___353Tq { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___353Tq { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__main___2b7eu { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3WyGl { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2EuGM { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2EuGM { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2OyD5 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2OyD5 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* module account */ .styles__wrapper___2EtPs { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 24px; overflow: hidden; background: #f7f8f9; } .styles__wrapper___2EtPs .styles__cardBody___1Ec-y { 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___2EtPs .styles__cardBody___1Ec-y > input { margin-bottom: 10px; } .styles__accessTokenRetrievalError___3hy1n { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__accessTokenRetrievalError___3hy1n > :first-child { margin-right: 12px; } .styles__settingsInfoSection___bXtOi { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 1000px; } .styles__settingsInfoCard___1rNsM { margin-bottom: 12px; background-color: #ffffff; } .styles__header___3xtHy { background-color: #ffffff; } .styles__title___2vJL9 { font-size: 16px; font-weight: 600; margin: 0 0 24px; line-height: 16px; } .styles__boldItalic___2Ku0w { font-weight: 600; font-style: italic; } .styles__buttonWrapper___3yYjO { text-align: right; } .styles__promoCode___2yNYv { text-align: center; width: 100%; } .styles__promoCodeInfoCard___8kCpn { background-color: #d1eefd; border-color: #a3ddfc; color: color-curious-blue; margin-bottom: 20px; } .styles__loadingCard___1jGER { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 200px; } .styles__largeLoadingCard___3P4Ck { min-height: 400px; } .styles__promoCodeWrapper___g4el_ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 52px; top: -1px; } /* account nav and cards */ .styles__accountLeftNav___1BZCV { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; /* there was no space between the tabs and the footer when there's no tab content added margin here for a quick fix */ margin-bottom: 60px; } .styles__accountCardsContainer___3V7A9 { 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___3V7A9 .styles__card___3NI5c { margin-bottom: 20px; } .styles__saveBtn___2aMYc { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; } .styles__justifyCenter___56Cpq { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__recoveryCode___3iUl5 { margin-right: 40px; } .styles__recoveryCode___3iUl5 .styles__recoveryCodeBtn___1Ml2H { width: 190px; height: 33px; margin: 25px 0; border-radius: 4px; text-align: center; } .styles__disableBtn___2_ptg { color: #e12b0c; width: 180px; height: 33px; border: 1px solid #e12b0c; border-radius: 4px; font-weight: 800; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 25px 0 } .styles__disableBtn___2_ptg:hover { border: 1px solid #e12b0c; } .styles__saveBtnWithTokens___3000W { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-left: 20px; } .styles__saveBtnWithTokens___3000W button { margin: 0; } .styles__saveBtnWithTokens___3000W .styles__twoButtons___3QXW- button:nth-child(1) { margin-right: 18px; } .styles__invertedPanicButton___1UwII:hover { background-color: #871907 !important; color: #ffffff !important; border-color: #871907 !important; } .styles__invertedRegularButton___mHBd9:hover { background-color: #2596ec !important; color: #ffffff !important; border-color: #2596ec !important; } .styles__apiCodeBlock___1ueuA { word-wrap: break-word; } /* cloud providers card */ .styles__cloudProviderRow___1XRgL { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__cloudProviderRow___1XRgL > * { lost-column-cycle: 6; } .styles__cloudProviderRow___1XRgL > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(20.8125% - 9.5px); max-width: calc(20.8125% - 9.5px); width: calc(20.8125% - 9.5px); } .styles__cloudProviderRow___1XRgL > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(1):last-child { margin-right: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cloudProviderRow___1XRgL > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(41.625% - 7px); max-width: calc(41.625% - 7px); width: calc(41.625% - 7px); } .styles__cloudProviderRow___1XRgL > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(2):last-child { margin-right: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cloudProviderRow___1XRgL > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(8.325% - 11px); max-width: calc(8.325% - 11px); width: calc(8.325% - 11px); } .styles__cloudProviderRow___1XRgL > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(3):last-child { margin-right: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cloudProviderRow___1XRgL > *:nth-child(4) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(8.325% - 11px); max-width: calc(8.325% - 11px); width: calc(8.325% - 11px); } .styles__cloudProviderRow___1XRgL > *:nth-child(4):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(4):last-child { margin-right: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(4):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cloudProviderRow___1XRgL > *:nth-child(5) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(14.985% - 10.2px); max-width: calc(14.985% - 10.2px); width: calc(14.985% - 10.2px); } .styles__cloudProviderRow___1XRgL > *:nth-child(5):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(5):last-child { margin-right: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(5):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cloudProviderRow___1XRgL > *:nth-child(6) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(14.1525% - 10.3px); max-width: calc(14.1525% - 10.3px); width: calc(14.1525% - 10.3px); } .styles__cloudProviderRow___1XRgL > *:nth-child(6):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(6):last-child { margin-right: 0; } .styles__cloudProviderRow___1XRgL > *:nth-child(6):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cloudProviderRow___1XRgL { border-top: 1px solid #e0e4e7; border-bottom: 1px solid #e0e4e7; margin-top: -1px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__cloudProviderRow___1XRgL .styles__noMargin___1PRY_ { margin: 0; } /* Fix overflow issue in safari */ .styles__cloudProviderRow___1XRgL > * { -ms-flex-negative: 1 !important; flex-shrink: 1 !important; } .styles__providerKey___3dtHz { word-wrap: break-word; } .styles__linkedProviderName___1oUMk { font-weight: 700; color: #254356; } .styles__providerName___1LKLS { font-weight: 700; color: #c0c9ce; } .styles__addCredentials___3YjDa { color: #c0c9ce; } /* source providers card */ .styles__sourceProviderRow___Mb2TT, .styles__sourceProviderHeader___1fkw4 { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__sourceProviderRow___Mb2TT > *, .styles__sourceProviderHeader___1fkw4 > * { lost-column-cycle: 5; } .styles__sourceProviderRow___Mb2TT > *:nth-child(1), .styles__sourceProviderHeader___1fkw4 > *: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___Mb2TT > *:nth-child(1):nth-child(1n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(1):last-child, .styles__sourceProviderHeader___1fkw4 > *:nth-child(1):last-child { margin-right: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(1):nth-child(12n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__sourceProviderRow___Mb2TT > *:nth-child(2), .styles__sourceProviderHeader___1fkw4 > *: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___Mb2TT > *:nth-child(2):nth-child(1n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(2):last-child, .styles__sourceProviderHeader___1fkw4 > *:nth-child(2):last-child { margin-right: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(2):nth-child(12n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__sourceProviderRow___Mb2TT > *:nth-child(3), .styles__sourceProviderHeader___1fkw4 > *: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___Mb2TT > *:nth-child(3):nth-child(1n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(3):last-child, .styles__sourceProviderHeader___1fkw4 > *:nth-child(3):last-child { margin-right: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(3):nth-child(12n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__sourceProviderRow___Mb2TT > *:nth-child(4), .styles__sourceProviderHeader___1fkw4 > *: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___Mb2TT > *:nth-child(4):nth-child(1n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(4):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(4):last-child, .styles__sourceProviderHeader___1fkw4 > *:nth-child(4):last-child { margin-right: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(4):nth-child(12n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(4):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__sourceProviderRow___Mb2TT > *:nth-child(5), .styles__sourceProviderHeader___1fkw4 > *:nth-child(5) { flex-grow: 0; flex-shrink: 0; flex-basis: -12px; max-width: -12px; width: -12px; } .styles__sourceProviderRow___Mb2TT > *:nth-child(5):nth-child(1n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(5):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(5):last-child, .styles__sourceProviderHeader___1fkw4 > *:nth-child(5):last-child { margin-right: 0; } .styles__sourceProviderRow___Mb2TT > *:nth-child(5):nth-child(12n), .styles__sourceProviderHeader___1fkw4 > *:nth-child(5):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__sourceProviderRow___Mb2TT, .styles__sourceProviderHeader___1fkw4 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__sourceProviderRow___Mb2TT .styles__noMargin___1PRY_, .styles__sourceProviderHeader___1fkw4 .styles__noMargin___1PRY_ { margin: 0; } .styles__info___Mf8Pk { margin-bottom: 20px; background-color: #f7f7f8; padding: 16px; border-radius: 3px; } .styles__sourceProviderMessage___1nb-T { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-top: -12px; } .styles__sourceProviderMessage___1nb-T svg { fill: #8f9ea8; width: 18px; margin-bottom: -12px; margin-right: 12px; } .styles__sourceProviderMessage___1nb-T p { /* @mixin tertiary; */ } .styles__sourceProviderHeader___1fkw4 { font-size: 13px; line-height: 18px; letter-spacing: normal; font-weight: bolder; color: #c0c9ce; margin-top: 12px; } /* access tokens */ .styles__accessTokensView___2HU4q { lost-container: column } .styles__accessTokensView___2HU4q > *:nth-child(1) { width: 100%; height: calc(33.3% - 8px); margin-bottom: 12px; } .styles__accessTokensView___2HU4q > *:nth-child(1):last-child { margin-bottom: 0; } .styles__accessTokensView___2HU4q > *:nth-child(2) { width: 100%; height: calc(33.3% - 8px); margin-bottom: 12px; } .styles__accessTokensView___2HU4q > *:nth-child(2):last-child { margin-bottom: 0; } .styles__accessTokensView___2HU4q > *:nth-child(3) { width: 100%; height: calc(33.3% - 8px); margin-bottom: 12px; } .styles__accessTokensView___2HU4q > *:nth-child(3):last-child { margin-bottom: 0; } .styles__accessTokensView___2HU4q .styles__expandible___1DROc { overflow: hidden; -webkit-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } .styles__accessTokensView___2HU4q .styles__collapsed___2emq7 { max-height: 392px !important; } .styles__accessTokensView___2HU4q .styles__expanded___1j39H { max-height: 1960px !important; } .styles__showMoreOrLess___29woZ { text-align: center; } .styles__showMoreOrLess___29woZ .styles__link___1Z6Ki { text-decoration: none; cursor: pointer; } .styles__showMoreOrLess___29woZ .styles__link___1Z6Ki span, .styles__showMoreOrLess___29woZ .styles__link___1Z6Ki svg { vertical-align: middle; } .styles__showMoreOrLess___29woZ .styles__icon___2LPZd { -webkit-transition: rotate 0.5s ease-in-out; transition: rotate 0.5s ease-in-out; } .styles__showMoreOrLess___29woZ .styles__rotateIcon___3GnjZ { -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* notifications email, slack and announcements */ .styles__notifications___KlYYL .styles__emailRadiogroup___9c30p { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; } .styles__notifications___KlYYL .styles__slackNotifications___VpCYP { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } /* billing card */ .styles__billing___3JvVM { margin-left: 16px; } /* plans */ .styles__planDetails___32ZoM { height: 180px; } .styles__planDetails___32ZoM .styles__planContent___1bwbx { margin: 0 80px; } .styles__planDetails___32ZoM .styles__icon___2LPZd { fill: #8f9ea8; margin-right: 8px; } .styles__planDetails___32ZoM .styles__nodeCost___1E8bm, .styles__planDetails___32ZoM .styles__privateReposAvailable___FG0n6 { font-size: 14px; line-height: 20px; color: #27343b; margin-bottom: 4px; } .styles__planDetails___32ZoM .styles__privateReposUsed___RaWTm { font-size: 14px; line-height: 20px; color: #27343b; color: #00cbca; margin-bottom: 4px; } .styles__planDetails___32ZoM .styles__bigNumber___9IHG4 { font-size: 28px; line-height: 40px; font-weight: 400; letter-spacing: normal; color: #254356; margin-right: 12px; } .styles__planDetails___32ZoM .styles__priceText___2UQBz { font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: normal; color: #254356; margin-bottom: 4px; } .styles__planDetails___32ZoM .styles__priceText___2UQBz .styles__bigNumber___9IHG4 { margin-right: 8px; margin-left: 8px; } .styles__planDetails___32ZoM .styles__usageDescription___2yDLD { font-size: 14px; line-height: 20px; color: #27343b; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__planDetails___32ZoM .styles__usageText___36wz8 { -ms-flex-item-align: center; align-self: center; } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 > * { lost-column-cycle: 2; } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(58.275% - 5px); max-width: calc(58.275% - 5px); width: calc(58.275% - 5px); } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(1):last-child { margin-right: 0; } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(41.625% - 7px); max-width: calc(41.625% - 7px); width: calc(41.625% - 7px); } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(2):last-child { margin-right: 0; } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__planDetails___32ZoM .styles__splitPanels___fLr01 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__planDetails___32ZoM button { margin: 0; } .styles__planDetails___32ZoM .styles__planButton___2f5-u { margin-top: 20px; } /* coupon codes */ .styles__couponCodes___1SYqn { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__couponCodes___1SYqn > * { lost-column-cycle: 3; } .styles__couponCodes___1SYqn > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__couponCodes___1SYqn > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__couponCodes___1SYqn > *:nth-child(1):last-child { margin-right: 0; } .styles__couponCodes___1SYqn > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__couponCodes___1SYqn > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(8.325% - 11px); max-width: calc(8.325% - 11px); width: calc(8.325% - 11px); } .styles__couponCodes___1SYqn > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__couponCodes___1SYqn > *:nth-child(2):last-child { margin-right: 0; } .styles__couponCodes___1SYqn > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__couponCodes___1SYqn > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(41.625% - 7px); max-width: calc(41.625% - 7px); width: calc(41.625% - 7px); } .styles__couponCodes___1SYqn > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__couponCodes___1SYqn > *:nth-child(3):last-child { margin-right: 0; } .styles__couponCodes___1SYqn > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__couponCodes___1SYqn .styles__button___3YzDk { min-width: 40px; margin: 0 0 0 16px; padding: 0; } .styles__couponCodes___1SYqn .styles__name___10nD2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__couponCodesTitle___1MUQb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__couponCodesTitle___1MUQb .styles__infoTooltip___ZeCPC { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 16px; } /* quotas */ .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > * { lost-column-cycle: 2; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(1):last-child { margin-right: 0; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(2):last-child { margin-right: 0; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul { list-style: none; padding: 0; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul::before, .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul::after { content: ' '; display: table; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul::after { clear: both; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 ul { padding-left: 16px; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 -4px 12px -4px; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 li .styles__quotaField___1o2OA:first-child { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .styles__quotasContainer___3Ejn8 .styles__quotas___w1la0 li > * { margin: 0 4px; } /* delete account card */ .styles__deleteAccount___xwjfE { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__deleteAccount___xwjfE > div > p { color: #ef4a53; } .styles__deleteAccount___xwjfE button { -webkit-box-flex: 0; -ms-flex: 0 0 200px; flex: 0 0 200px; } .styles__accessTokensTable___2vyN7 { margin-top: 32px; min-height: 220px } .styles__accessTokensTable___2vyN7 > * { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__accessTokensTable___2vyN7 > * > * { lost-column-cycle: 6; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(4.1625% - 11.5px); max-width: calc(4.1625% - 11.5px); width: calc(4.1625% - 11.5px); } .styles__accessTokensTable___2vyN7 > * > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(1):last-child { margin-right: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(37.4625% - 7.5px); max-width: calc(37.4625% - 7.5px); width: calc(37.4625% - 7.5px); } .styles__accessTokensTable___2vyN7 > * > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(2):last-child { margin-right: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(22.89375% - 9.25px); max-width: calc(22.89375% - 9.25px); width: calc(22.89375% - 9.25px); } .styles__accessTokensTable___2vyN7 > * > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(3):last-child { margin-right: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(4) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(22.89375% - 9.25px); max-width: calc(22.89375% - 9.25px); width: calc(22.89375% - 9.25px); } .styles__accessTokensTable___2vyN7 > * > *:nth-child(4):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(4):last-child { margin-right: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(4):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(5) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(8.325% - 11px); max-width: calc(8.325% - 11px); width: calc(8.325% - 11px); } .styles__accessTokensTable___2vyN7 > * > *:nth-child(5):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(5):last-child { margin-right: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(5):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(6) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(8.325% - 11px); max-width: calc(8.325% - 11px); width: calc(8.325% - 11px); } .styles__accessTokensTable___2vyN7 > * > *:nth-child(6):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(6):last-child { margin-right: 0; } .styles__accessTokensTable___2vyN7 > * > *:nth-child(6):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2vyN7 > * { margin: 12px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__accessTokensTable___2vyN7 .styles__accessTokensHeader___36xVp { color: #6f777c; font-weight: 500; margin-bottom: 12px; text-transform: uppercase; } .styles__accessTokensTable___2vyN7 .styles__selectAction___2z9fs { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; font-size: 12px !important; } .styles__accessTokensTable___2vyN7 .styles__selectAction___2z9fs .styles__checkboxParent___2KYcT { width: 14px; height: 14px; } .styles__accessTokensTable___2vyN7 .styles__selectAction___2z9fs .styles__checkbox___3PCLo { opacity: 0.5; } .styles__accessTokensTable___2vyN7 .styles__selectAction___2z9fs .styles__checkbox___3PCLo.styles__checked___3QE5b { opacity: 1; } .styles__accessTokensTable___2vyN7 .styles__selectAction___2z9fs .styles__checkboxIcon___DPpa2 { width: 14px; height: 14px; } /* cloudProviderError */ .styles__errorField___3UN91 { display: none; color: #ef4a53 } .styles__errorField___3UN91.styles__visible___3SM1Y { display: block; } .styles__errorField___3UN91 > * { vertical-align: middle; } .styles__errorField___3UN91 .styles__errorText___1He5s { margin-left: 8px; } /* convert account to organization */ .styles__convertAccount___2FPQE { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__convertAccount___2FPQE > * { lost-column-cycle: 2; } .styles__convertAccount___2FPQE > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(70.7625% - 3.5px); max-width: calc(70.7625% - 3.5px); width: calc(70.7625% - 3.5px); } .styles__convertAccount___2FPQE > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__convertAccount___2FPQE > *:nth-child(1):last-child { margin-right: 0; } .styles__convertAccount___2FPQE > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__convertAccount___2FPQE > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(29.1375% - 8.5px); max-width: calc(29.1375% - 8.5px); width: calc(29.1375% - 8.5px); } .styles__convertAccount___2FPQE > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__convertAccount___2FPQE > *:nth-child(2):last-child { margin-right: 0; } .styles__convertAccount___2FPQE > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__convertAccount___2FPQE { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__convertAccount___2FPQE .styles__title___2vJL9 { font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: 0.005em; } .styles__convertAccount___2FPQE .styles__semiBold___tTCB4 { font-weight: 600; } .styles__convertAccount___2FPQE .styles__button___3YzDk { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; height: 48px; } .styles__successMessage___3-KSU { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 12px; color: #00cbca; } .styles__successMessage___3-KSU .styles__successIcon___CDYfx { height: 18px; width: 18px; vertical-align: bottom; margin-right: 4px; } .styles__accountSwitcher___1NuN- { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 20px; } .styles__accountSwitcher___1NuN- span { margin-right: 12px; } .styles__linkedCTA___3oZtf { position: relative; top: -5px; font-weight: bold; -webkit-box-align: left; -ms-flex-align: left; align-items: left; color: #287cf9; cursor: pointer; } .styles__profileHeaderBar___3mKfN { height: 100%; background: white; border-bottom: 1px solid #e0e4e7; } .styles__profileHeader___ljNHo { 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___LcvEz { border-bottom: 1px solid #ffffff; } .styles__twoFactor___3lBio { text-align: center; margin: 0 auto; width: 511px; } .styles__twoFactor___3lBio .styles__twoFactorDescription___tOabJ { line-height: 19px; } .styles__twoFactor___3lBio .styles__twoFactorDescription___tOabJ .styles__subheader___2lMEq { font-weight: 600; } .styles__warning___2kpbG { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: 12px 0; } .styles__warning___2kpbG .styles__emphasis___3j6lY { margin-left: 10px; color: #e12b0c; } .styles__twoFactorLoading___LGOTC { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 125px; } .styles__link___1Z6Ki { text-decoration: none; cursor: pointer; color: #2596ec; } .styles__link___1Z6Ki a { text-decoration: none; } .styles__disableModal___AT__3 { max-width: 460px !important; max-height: 490px !important; } .styles__cardTitle___1dlVO { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__cardTitle___1dlVO .styles__cardHeadActions___2poHi { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__hr___f3Azn { -ms-flex-item-align: start; align-self: flex-start; -webkit-box-flex: 99; -ms-flex-positive: 99; flex-grow: 99; } .styles__horizontalLine___2zK8g { height: 1px; border: 0; border-top: 1px solid #e0e4e7; margin: 0 35px; } .styles__failureModal___1e9lj { border-top: 8px solid #e12b0c; } @media (max-width: 1200px) { .styles__convertAccount___2FPQE { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__convertAccount___2FPQE > * { lost-column-cycle: 2; } .styles__convertAccount___2FPQE > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: 99.9%; max-width: 99.9%; width: 99.9%; } .styles__convertAccount___2FPQE > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__convertAccount___2FPQE > *:nth-child(1):last-child { margin-right: 0; } .styles__convertAccount___2FPQE > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__convertAccount___2FPQE > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: 99.9%; max-width: 99.9%; width: 99.9%; } .styles__convertAccount___2FPQE > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__convertAccount___2FPQE > *:nth-child(2):last-child { margin-right: 0; } .styles__convertAccount___2FPQE > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__convertAccount___2FPQE { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (min-width: 601px) and (max-width: 960px) { .styles__accountCardsContainer___3V7A9 { width: 600px; } .styles__wrapper___2EtPs .styles__card___3NI5c { width: 600px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column wrap; flex-flow: column wrap; } .styles__twoFactor___3lBio { max-width: 600px; } .styles__twoFactor___3lBio .styles__twoFactorDescription___tOabJ { min-height: 57px; } } .styles__twoFactorMagicCarpet___1tvrL { background-color: #ffffff; padding: 32px; overflow-y: auto; width: 98% !important; height: 98vh !important; outline: none; } @media (max-width: 820px) { .styles__accountCardsContainer___3V7A9 { width: 1000px; height: 100%; overflow-x: scroll; overflow-y: hidden; } .styles__settingsInfoCard___1rNsM { width: 820px; height: 100%; overflow-x: scroll; overflow-y: hidden; } .styles__wrapper___2EtPs .styles__card___3NI5c { width: 820px; height: 100%; overflow-x: scroll; overflow-y: hidden; } .styles__twoFactor___3lBio { width: 820px; height: 100%; overflow-x: scroll; overflow-y: hidden; } .styles__twoFactor___3lBio .styles__twoFactorDescription___tOabJ { min-height: 57px; } } .styles__marginSpacing___2TKQG { margin-top: 40px; } .styles__accessTitle___2ifCq { font-size: 18px; } .styles__orgListLink___1JZ6o { color: #007bff } .styles__orgListLink___1JZ6o:hover { color: #066da5; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3S3d1 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___16Gya { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___16Gya { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___tzxuK { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___tzxuK { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__wrapper___3ryWk { width: 100%; } .styles__hero___2SWAu { text-align: center; margin: 60px 0 40px; } .styles__hero___2SWAu .styles__title___k5TPr { font-size: 38px; font-weight: bold; } .styles__content___2ixAm { width: 740px; margin: auto; margin-bottom: 140px; } .styles__title___k5TPr { font-size: 18px; font-weight: 600; margin-top: 0; } .styles__subTitle___28upZ { font-size: 18px; font-weight: 400; margin: 15px 0 2px; } .styles__steps___1nFth { padding-left: 20px; } .styles__steps___1nFth li { margin-bottom: 4px; } .styles__warningTitle___2v0iy { font-size: 14px; margin-top: 0; color: #ef4a53; margin-left: 8px; } .styles__warningIcon___1_sDK { display: inline-block; margin-bottom: 10px; margin-top: 5px; } .styles__warningIcon___1_sDK svg { margin-bottom: -4px; } .styles__boldText___3M-GF { font-weight: 700; } .styles__infoText___hF_PN { margin: 2px 0 15px; font-size: 14px; line-height: 20px; } .styles__convertButtons___21viS { text-align: right; } .styles__idInput___2JHdO { margin-top: 12px; margin-bottom: 32px; } .styles__errorMessage___39ttf { font-size: 13px; color: #ef4a53; } .styles__successMessage___30xoi { text-align: center; padding: 10px 0 20px; } .styles__successMessage___30xoi .styles__successTitle___1f6y2 { font-size: 18px; color: #70c9a0; } .styles__boldItalic___15GQ4 { font-weight: 600; font-style: italic; } .styles__provider___3may5 { display: inline-block; text-align: center; margin-left: 12px; margin-right: 16px; color: #c0c9ce; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3uwIx { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2NUt- { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2NUt- { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___RyqdY { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___RyqdY { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__main___15xn1 { font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; } /* https://css-tricks.com/snippets/css/turn-off-number-input-spinners/ */ input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3z8Wn { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1GqK9 { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1GqK9 { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2m1Fu { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2m1Fu { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__hero___R7U6C { text-align: center; margin: 60px 0 40px; } .styles__hero___R7U6C .styles__title___1xasD { font-size: 38px; font-weight: bold; text-transform: capitalize; } .styles__content___3S2TT { width: 740px; margin: auto; margin-bottom: 140px; } .styles__title___1xasD { font-size: 16px; margin-top: 0; } .styles__warningTitle___3KAnV { font-size: 14px; color: #ef4a53; margin-left: 8px; } .styles__warningIcon___3jCdZ { display: inline-block; margin-bottom: 10px; margin-top: 5px; } .styles__warningIcon___3jCdZ svg { margin-bottom: -4px; } .styles__converOrgCards___2KTFi .styles__card___1rg8K { margin-top: 20px; margin-bottom: 12px; } .styles__boldText___tAQ_L { font-weight: 700; } .styles__infoText___2AX_o { margin-top: 32px; font-size: 14px; line-height: 20px; } .styles__convertButtons___u4bl5 { text-align: right; } .styles__convertButtons___u4bl5 .styles__link___Te21G { text-decoration: none; cursor: pointer; margin: 0; } .styles__convertButtons___u4bl5 .styles__link___Te21G a { text-decoration: none; } .styles__convertButtons___u4bl5 .styles__margin____CDA1 { margin-right: 12px; } .styles__idInput___W4WZs { margin-bottom: 32px; } .styles__input___39MvC { width: 256px; margin-right: 18px; } .styles__errorMessage___F9QGY { font-size: 13px; color: #ef4a53; } .styles__errorMessage___F9QGY p { margin: 0 0 3px; line-height: 1.5; } .styles__provider___1OHhm { display: inline-block; text-align: center; margin-left: 12px; margin-right: 16px; color: #c0c9ce; } .styles__modalWrapper___3Qo9d { padding: 70px; } .styles__modal___12EjE { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 80px; } .styles__modal___12EjE .styles__modalTitle___jbqMv { text-align: center; font-size: 24px; font-weight: bold; } .styles__modal___12EjE .styles__icon___WrfFk { margin: auto; width: 83px; height: 83px; margin-bottom: 24px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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); } } .styles__card___gktOa { background: #ffffff; border: 1px solid #e0e4e7; border-radius: 2px; padding: 28px; } .styles__cardWithTitle___3YI9U { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__title___1sf66 { font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: 0.005em; margin: 0; margin-bottom: 24px; } .styles__body___1BKnW { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .styles__body___1BKnW > p:first-child { margin-top: 0; } .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); } .styles__titleWithLabel___3k0Gh { 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__titleLabel___2Pa2W { 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; } .styles__fullWidth___3EaM1 { width: 100%; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2ytlD { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1TWbe { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1TWbe { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2SF0c { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2SF0c { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__inputField___3NFmU { width: 100%; border: none; border-bottom: 1px solid #b7bbbe; background: #fafafb; height: 30px; line-height: 29px; color: #27343b; padding: 0 6px; font-size: 14px } .styles__inputField___3NFmU.styles__error___2QHQ1 { border-bottom-color: #c82828; } .styles__inputField___3NFmU:focus { border-bottom-color: #007bff; } select.styles__inputField___3NFmU { border-radius: 0; -webkit-appearance: none; } .styles__inputField___3NFmU::-webkit-input-placeholder { color: #2f373c; } .styles__inputField___3NFmU::-moz-placeholder { color: #2f373c; } .styles__inputField___3NFmU::-ms-input-placeholder { color: #2f373c; } .styles__inputField___3NFmU::placeholder { color: #2f373c; } .styles__errorMessage___atHyx { color: #c82828; font-size: 12px; margin: 9px 6px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1i1sl { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___oi9Wp { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___oi9Wp { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1cjX2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1cjX2 { 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__pageWrapper___3vLIH { margin-top: 50px; font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important; } .styles__pageWrapper___3vLIH h1, .styles__pageWrapper___3vLIH h2 { margin-top: 0; margin-bottom: 0; } .styles__icon___6gsxF { text-align: center; margin-bottom: 35px; } .styles__authFormTitle___3A4KB { margin-bottom: 4px; } .styles__authFormTitle___3A4KB h1 { color: #27343b; font-size: 28px; } .styles__authFormSubtitle___2qhL5 { margin-bottom: 20px; } .styles__authFormSubtitle___2qhL5 h2 { color: #697a89; font-size: 17px; font-weight: 500; line-height: 1.25; } .styles__card___1zPIS { max-width: 400px; height: 540px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; border: 0; border-radius: 0; -webkit-box-shadow: 0 1px 2px #c2c2c2; box-shadow: 0 1px 2px #c2c2c2; margin-bottom: 50px; } .styles__form___3Qa8G { width: 100%; padding: 100px 50px; } .styles__form___3Qa8G .styles__field___3jZGZ { margin-bottom: 30px; } .styles__form___3Qa8G .styles__field___3jZGZ .styles__input___3qI4R { padding: 0 8px; font-size: 17px; height: 44px; } .styles__form___3Qa8G .styles__field___3jZGZ .styles__inputPassword___2sbLi { padding-right: 45px; } .styles__form___3Qa8G .styles__field___3jZGZ > div:last-of-type { font-size: 16px; } .styles__form___3Qa8G .styles__reqError___Y0KNi { font-size: 16px; color: #c82828; } .styles__form___3Qa8G .styles__submitBtn___2ELFQ { height: 44px; font-size: 16px; margin: 18px 0 30px; } .styles__authLinks___2xDgD { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__link___1BBgx { font-size: 17px; color: #007bff; text-decoration: none } .styles__link___1BBgx:hover { text-decoration: underline; } .styles__promo___1fNnD { width: 50%; } .styles__authFormTitle___3A4KB { margin-bottom: 30px; } .styles__card___1zPIS { width: 440px; height: auto; } .styles__form___3Qa8G { width: 100%; padding: 60px 50px; } .styles__successMessage___3ycE0 { font-size: 24px; line-height: 1.25; margin-bottom: 55px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___22znN { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1pkXv { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1pkXv { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1iYpR { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1iYpR { 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__pageWrapper___swTDH { margin-top: 50px; font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important; } .styles__pageWrapper___swTDH h1, .styles__pageWrapper___swTDH h2 { margin-top: 0; margin-bottom: 0; } .styles__icon___2ODOq { text-align: center; margin-bottom: 35px; } .styles__authFormTitle___z61Bw { margin-bottom: 4px; } .styles__authFormTitle___z61Bw h1 { color: #27343b; font-size: 28px; } .styles__authFormSubtitle___1DaJX { margin-bottom: 20px; } .styles__authFormSubtitle___1DaJX h2 { color: #697a89; font-size: 17px; font-weight: 500; line-height: 1.25; } .styles__card___1qih6 { max-width: 400px; height: 540px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; border: 0; border-radius: 0; -webkit-box-shadow: 0 1px 2px #c2c2c2; box-shadow: 0 1px 2px #c2c2c2; margin-bottom: 50px; } .styles__form___33EA- { width: 100%; padding: 100px 50px; } .styles__form___33EA- .styles__field___3ulfM { margin-bottom: 30px; } .styles__form___33EA- .styles__field___3ulfM .styles__input___10RrR { padding: 0 8px; font-size: 17px; height: 44px; } .styles__form___33EA- .styles__field___3ulfM .styles__inputPassword___254TJ { padding-right: 45px; } .styles__form___33EA- .styles__field___3ulfM > div:last-of-type { font-size: 16px; } .styles__form___33EA- .styles__reqError___2CKNc { font-size: 16px; color: #c82828; } .styles__form___33EA- .styles__submitBtn___32f2k { height: 44px; font-size: 16px; margin: 18px 0 30px; } .styles__authLinks___2XzxF { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__link___8MuqD { font-size: 17px; color: #007bff; text-decoration: none } .styles__link___8MuqD:hover { text-decoration: underline; } .styles__promo___12ZGe { width: 50%; } .styles__card___1qih6 { width: 440px; height: auto; } .styles__form___33EA- { width: 100%; padding: 60px 50px; } .styles__successMessage___1jrSz { font-size: 24px; line-height: 1.25; margin-bottom: 55px; } .styles__inputFieldWrapper___U-xJB { position: relative; } .styles__inputFieldWrapper___U-xJB .styles__iconWrapper___la4DP { cursor: pointer; position: absolute; top: 0; right: 14px; height: 18px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___11Lvf { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1g0UM { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1g0UM { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1JvIu { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1JvIu { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__promo___3M9EQ { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; width: 100%; } .styles__promoVariantOne___12tb6 { background-image: url(d21e799b92b3c3309dddec5ec1e30943.png); background-size: contain; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #ffffff; padding: 52px; } .styles__promoVariantOne___12tb6 .styles__title___1-mXY h3 { font-size: 28px; font-weight: 800; margin: 0 0 10px 0; } .styles__promoVariantOne___12tb6 .styles__content___BAz05 { font-size: 20px; margin-bottom: 25px; } .styles__promoVariantOne___12tb6 .styles__link___2bQ0S { font-size: 20px; } .styles__promoVariantTwo___2NC7Q { background-image: url(49c6b5e8fcdf1074ba9b962de0a7a4f0.png); background-size: contain; background-color: #0b214a; color: #ffffff; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: 34px 50px; line-height: 1.25; } .styles__promoVariantTwo___2NC7Q .styles__title___1-mXY h3 { font-size: 22px; font-weight: 800; margin: 0 0 10px 0; } .styles__promoVariantTwo___2NC7Q .styles__content___BAz05 { font-size: 17px; } .styles__promoVariantTwo___2NC7Q .styles__link___2bQ0S { font-size: 20px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1wSWF { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1AF2q { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1AF2q { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2GgZy { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2GgZy { 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__pageWrapper___3bcsi { margin-top: 50px; font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important; } .styles__pageWrapper___3bcsi h1, .styles__pageWrapper___3bcsi h2 { margin-top: 0; margin-bottom: 0; } .styles__icon___qq_ox { text-align: center; margin-bottom: 35px; } .styles__authFormTitle___3GcfN { margin-bottom: 4px; } .styles__authFormTitle___3GcfN h1 { color: #27343b; font-size: 28px; } .styles__authFormSubtitle___MYx-v { margin-bottom: 20px; } .styles__authFormSubtitle___MYx-v h2 { color: #697a89; font-size: 17px; font-weight: 500; line-height: 1.25; } .styles__card___1qPbe { max-width: 400px; height: 540px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; border: 0; border-radius: 0; -webkit-box-shadow: 0 1px 2px #c2c2c2; box-shadow: 0 1px 2px #c2c2c2; margin-bottom: 50px; } .styles__form___3xrcP { width: 100%; padding: 100px 50px; } .styles__form___3xrcP .styles__field___3xlOg { margin-bottom: 30px; } .styles__form___3xrcP .styles__field___3xlOg .styles__input___3tJQO { padding: 0 8px; font-size: 17px; height: 44px; } .styles__form___3xrcP .styles__field___3xlOg .styles__inputPassword___2CoLf { padding-right: 45px; } .styles__form___3xrcP .styles__field___3xlOg > div:last-of-type { font-size: 16px; } .styles__form___3xrcP .styles__reqError___22BcU { font-size: 16px; color: #c82828; } .styles__form___3xrcP .styles__submitBtn____AoxL { height: 44px; font-size: 16px; margin: 18px 0 30px; } .styles__authLinks___2-uCU { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__link___T2Mpu { font-size: 17px; color: #007bff; text-decoration: none } .styles__link___T2Mpu:hover { text-decoration: underline; } .styles__promo___1sMfO { width: 50%; } .styles__card___1qPbe { max-width: 800px; } .styles__form___3xrcP { width: 50%; } .styles__promo___1sMfO { width: 50%; } @media only screen and (max-width: 800px) { .styles__card___1qPbe { max-width: 400px; } .styles__card___1qPbe .styles__form___3xrcP { width: 100%; } .styles__card___1qPbe .styles__promo___1sMfO { display: none; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3y4fw { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3v7Mf { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3v7Mf { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___coHjG { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___coHjG { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__container___1uMTK { margin: 48px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__container___1uMTK h2 { font-weight: 600; font-size: 38px; margin-top: 20px; margin-bottom: 20px; } .styles__whale___2jfiR { width: 250px; } .styles__explanation___1s3BB { font-size: 18px; color: #70787d; text-align: center; max-width: 500px; } .styles__sessionId___2gqKM { font-size: 14px; color: #70787d; text-align: center; max-width: 500px; margin-top: 16px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___13EAi { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2VB7z { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2VB7z { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1UcYM { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1UcYM { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* stylelint-disable block-no-empty */ .dmenu { position: relative; } /* stylelint-enable */ .styles__container___2Og-W { display: inline-block; position: relative } .styles__container___2Og-W:not(.styles__opened___TQtir) .styles__backdrop___K-tpd { display: none !important; } .styles__opened___TQtir .styles__backdrop___K-tpd { position: fixed; background: transparent; height: 100vh; width: 100vw; left: 0; top: 0; /* Must be smaller than the magic carpet */ z-index: 797; } .styles__menu___1qzbH { list-style: none; padding: 0; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; position: absolute; z-index: 798; background: white; border: 1px solid #fbfbfc; border-radius: 2px; padding: 8px 0; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); width: 100%; min-width: 96px; } .styles__item___3pNSl { cursor: pointer; line-height: 2.4; padding: 0 20px } .styles__item___3pNSl:hover { background: #f7f7f8; } .styles__item___3pNSl.styles__disabled___1xuIl { color: #c0c9ce; pointer-events: none; } .styles__bottomBorder___3xOjs { border-bottom: 1px solid #e0e4e7; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___38j7z { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3gPTq { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3gPTq { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___37eub { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___37eub { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__pricingPlanCardWrapper___1ze7y { font-family: 'Poppins', sans-serif; position: relative; border-radius: 6px; padding: 35px 10px 10px; width: 312px } .styles__pricingPlanCardWrapper___1ze7y.styles__developersFavorite___32J6s { background-color: #007bff; } .styles__pricingPlanCardWrapper___1ze7y .styles__developersFavoriteBanner___1pVe_ { color: #ffffff; display: block; font-size: 12px; font-weight: 700; line-height: 12px; margin: 4px 0 0; padding: 0; text-transform: uppercase; position: absolute; left: 0; right: 0; top: 8px; text-align: center; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 { background-color: #ffffff; -webkit-box-shadow: 0 0 8px 2px rgba(57, 63, 73, .2); box-shadow: 0 0 8px 2px rgba(57, 63, 73, .2); padding: 40px 30px 24px; border-radius: 6px; height: 100%; 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__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__pricingPlanCardHeader___3xwVt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__pricingPlanCardHeader___3xwVt .styles__planName___YUYOg { margin: 0; font-size: 28px; line-height: 20px; margin-bottom: 10px; font-weight: 700; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__pricingPlanCardHeader___3xwVt .styles__planNumberOfUsers___1nku1 { color: #a5b1ba; font-size: 18px; line-height: 20px; padding-left: 25px; display: inline-block; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTcgMTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTguNTY5MDkgOC41NzUyQzEwLjc3OTEgOC41NzUyIDEyLjU2OTEgNi43ODUyIDEyLjU2OTEgNC41NzUyQzEyLjU2OTEgMi4zNjUyIDEwLjc3OTEgMC41NzUxOTUgOC41NjkwOSAwLjU3NTE5NUM2LjM1OTA5IDAuNTc1MTk1IDQuNTY5MDkgMi4zNjUyIDQuNTY5MDkgNC41NzUyQzQuNTY5MDkgNi43ODUyIDYuMzU5MDkgOC41NzUyIDguNTY5MDkgOC41NzUyWk04LjU2OTA5IDEwLjU3NTJDNS44OTkwOSAxMC41NzUyIDAuNTY5MDkyIDExLjkxNTIgMC41NjkwOTIgMTQuNTc1MlYxNi41NzUySDE2LjU2OTFWMTQuNTc1MkMxNi41NjkxIDExLjkxNTIgMTEuMjM5MSAxMC41NzUyIDguNTY5MDkgMTAuNTc1MloiIGZpbGw9IiNBNUIxQkEiLz4KPC9zdmc+Cg==); background-position: 2px 1px; background-repeat: no-repeat; background-size: 16px 16px; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__subheader___J6gHO { font-style: normal; font-size: 12px; line-height: 1.25; color: #5a6774; margin: 0 0 25px; font-weight: 500; padding: 0; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__planPrice___2CeaK { font-size: 48px; line-height: 40px; font-weight: 600; margin: 0; position: relative; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__planPrice___2CeaK .styles__priceType___3RX8y { top: 4px; margin-left: 5px; position: absolute; font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: -0.25px; display: inline-block; color: #5a6774 } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__planPrice___2CeaK .styles__priceType___3RX8y > span { color: #a5b1ba; display: block; font-size: 12px; margin-top: 4px; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__features___3RIsJ { margin: 30px -30px 0; padding: 30px; background-color: #f7f7f8; color: #26323f; font-size: 14px; line-height: 16px; min-height: 200px; height: calc(100% - 160px) } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__features___3RIsJ > ul { margin: 0; padding-left: 15px; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__features___3RIsJ > ul > li { color: #26323f; font-size: 14px; line-height: 1.5; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__features___3RIsJ > ul > li.styles__blackArrow___32oL9 { position: relative; font-weight: 600; list-style-type: none; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTcgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTYuMjU5MyAxMS41NzUyTDcuMzg3MyAxMC40NDcyTDMuNzIzMyA2Ljc3NTI0SDE2LjY1OTNWNS4xNzUyNEgzLjcyMzNMNy4zOTUzIDEuNTAzMjRMNi4yNTkzIDAuMzc1MjQ0TDAuNjU5MzAyIDUuOTc1MjRMNi4yNTkzIDExLjU3NTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K); background-position: 1px 4px; background-size: 17px 12px; background-repeat: no-repeat; padding-left: 25px; margin-left: -25px; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__planCta___jISNH { height: 100px; padding-top: 32px; text-align: center; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__planCta___jISNH .styles__currentPlan___23mF9 { height: 40px; line-height: 40px; font-weight: 600; font-size: 14px; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__planCta___jISNH > * { width: 100%; } .styles__pricingPlanCardWrapper___1ze7y .styles__pricingPlanCard___3bwF3 .styles__planCta___jISNH p { margin: 10px 0 0; color: #5a6774; font-size: 10px; font-weight: 500; line-height: 21px; min-height: 21px; } .styles__CTAButton___3Cigt { height: 40px; line-height: 36px; font-weight: 600; width: 100%; margin: 0; background-color: #007bff } .styles__CTAButton___3Cigt.styles__outlined___2Dx_o { background-color: #ffffff; color: #26323f; border: 2px solid #007bff; } .styles__CTAButton___3Cigt.styles__outlined___2Dx_o svg { fill: #007bff; } .styles__iconTooltipWrapper___3Fuwe { margin-left: 4px; height: 16px; display: inline-block; vertical-align: middle; position: relative; top: -2px; } .styles__iconTooltipWrapper___3Fuwe .styles__icon___ovkaI { width: 16px; height: 16px; fill: #a5b1ba; cursor: pointer; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1qXWz { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___156bM { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___156bM { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3AjHg { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3AjHg { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__pricingCardWrapper___1J2_n { min-width: 300px; margin-bottom: 30px; } .styles__orgItem___RymaZ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 42px; } .styles__createOrg___2rR7p { color: #5a6774; font-size: 12px; line-height: 36px; font-weight: normal; text-align: left; padding-left: 4px; } .styles__orgTitle___3u0rz { color: #5a6774; font-weight: 600; font-size: 12px; margin-left: 8px; height: 42px; line-height: 42px; } .styles__continueWithTeam___1B6nb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__continueWithTeam___1B6nb > svg { margin-left: 8px; margin-top: 2px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1QRXx { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___jfw3l { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___jfw3l { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3gOcW { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3gOcW { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__supertiny___24LbU { width: 18px; height: 18px; margin: 0 auto; position: relative; } .styles__supertiny___24LbU::after { content: ''; position: absolute; left: calc(50% - 9px); top: calc(50% - 9px); width: 16px; height: 16px; border-radius: 50%; border-top: 1px solid transparent; border-right: 1px solid #2496ed; border-bottom: 1px solid #2496ed; border-left: 1px solid #2496ed; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__tiny___1FP-w { width: 27px; height: 27px; margin: 0 auto; position: relative; } .styles__tiny___1FP-w::after { content: ''; position: absolute; left: calc(50% - 13.5px); top: calc(50% - 13.5px); width: 24px; height: 24px; border-radius: 50%; border-top: 1.5px solid transparent; border-right: 1.5px solid #2496ed; border-bottom: 1.5px solid #2496ed; border-left: 1.5px solid #2496ed; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__small___2paN8 { width: 40.5px; height: 40.5px; margin: 0 auto; position: relative; } .styles__small___2paN8::after { content: ''; position: absolute; left: calc(50% - 20.25px); top: calc(50% - 20.25px); width: 36px; height: 36px; border-radius: 50%; border-top: 2.25px solid transparent; border-right: 2.25px solid #2496ed; border-bottom: 2.25px solid #2496ed; border-left: 2.25px solid #2496ed; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__regular___DPl72 { width: 54px; height: 54px; margin: 0 auto; position: relative; } .styles__regular___DPl72::after { content: ''; position: absolute; left: calc(50% - 27px); top: calc(50% - 27px); width: 48px; height: 48px; border-radius: 50%; border-top: 3px solid transparent; border-right: 3px solid #2496ed; border-bottom: 3px solid #2496ed; border-left: 3px solid #2496ed; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__large___vefXs { width: 90px; height: 90px; margin: 0 auto; position: relative; } .styles__large___vefXs::after { content: ''; position: absolute; left: calc(50% - 45px); top: calc(50% - 45px); width: 80px; height: 80px; border-radius: 50%; border-top: 5px solid transparent; border-right: 5px solid #2496ed; border-bottom: 5px solid #2496ed; border-left: 5px solid #2496ed; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__xlarge___2mMq6 { width: 135px; height: 135px; margin: 0 auto; position: relative; } .styles__xlarge___2mMq6::after { content: ''; position: absolute; left: calc(50% - 67.5px); top: calc(50% - 67.5px); width: 120px; height: 120px; border-radius: 50%; border-top: 7.5px solid transparent; border-right: 7.5px solid #2496ed; border-bottom: 7.5px solid #2496ed; border-left: 7.5px solid #2496ed; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__overlay-primary___tfKbC::after { border-right-color: #2496ed; border-bottom-color: #2496ed; border-left-color: #2496ed; } .styles__overlay-white___rW1TF::after { border-right-color: #fafafb; border-bottom-color: #fafafb; border-left-color: #fafafb; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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); } } .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; } .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; } .styles__spinner___TyhAY { height: calc(100vh - 60px); } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3elhu { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1qCnY { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1qCnY { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___xqfnQ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___xqfnQ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } .styles__startingAt___1Sb-1 { font-size: 12px; line-height: 20px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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__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__planSavings___7jMdC { color: #43b899; font-size: 14px; margin-left: 32px; margin-top: 2.4px; margin-top: 0.15rem; } .styles__wrapper___2KzaS .styles__planSavings___7jMdC .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; } .styles__purchaseOrder___3ztqC { font-size: 12px; margin-top: 8px; } .styles__purchaseOrder___3ztqC svg { height: 12px; width: 12px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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__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__planSavings___2ZtWz { color: #43b899; font-size: 14px; margin-left: 32px; margin-top: 2.4px; margin-top: 0.15rem; } .styles__planSavings___2ZtWz .styles__savings___3CMVd { font-size: 16px; font-weight: 600; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2m44B { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1GooI { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1GooI { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1mJ_6 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1mJ_6 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__emojiIcon___2YhBu { -ms-flex-item-align: center; align-self: center; font-size: 12px; margin-right: 8px; } .styles__ctaIcon___1YvJW { height: 12px; width: 12px; margin-right: 8px; } .styles__offerCTA___3fpyV { line-height: 18px; color: #6243a3; font-weight: 600; } .styles__tooltipContent___17NhS { width: 150px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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__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__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; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___18FJ4 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1VRUP { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1VRUP { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2iEJR { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2iEJR { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__offerCard___7ujUa { border: 1px solid #e79a5c; border-radius: 6px; margin-bottom: 20px; padding: 24px 32px; background-color: #fef5c3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #26323f; } .styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW { margin-left: 30px; max-width: 750px; line-height: 1.5; } .styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__offerTitle___Hu6f5 { font-size: 17px; font-weight: 600; } .styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__offerText___2IZZ4 { margin-top: 3px; } .styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__offerText___2IZZ4 > span > span { font-weight: 600; } .styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__offerText___2IZZ4 .styles__link___1MPVF { font-size: 14px; line-height: 18px; font-weight: 600; color: #0073ec; cursor: pointer; } .styles__offerCard___7ujUa .styles__offerWrapper___3Qlhi .styles__offerContent___vMvEW .styles__faqLink___pFJxV { color: #007bff; font-weight: 500; } .styles__offerCard___7ujUa .styles__planName___3xFo2 { text-transform: capitalize; } .styles__offerCard___7ujUa button { min-width: 150px; min-height: 30px; line-height: 30px; border: 0; margin-left: 20px; } .styles__rocketEmoji___2pAIg { -ms-flex-item-align: center; align-self: center; font-size: 48px; } .styles__button___3hUVz { margin: 0; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2qeZ3 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3lzLL { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3lzLL { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1ALt6 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1ALt6 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__page___24Abd { width: 24px; height: 24px; } .styles__page___24Abd { text-decoration: none; color: inherit; } .styles__page___24Abd:visited { color: inherit; } .styles__page___24Abd { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 2px; color: #8f9ea8; background-color: #e0e4e7; font-size: 12px; margin-right: 4px; cursor: pointer; } .styles__page___24Abd:last-child { margin-right: 0; } .styles__page___24Abd:first-child:not(.styles__chevron___13BO3) { margin-left: 56px; } .styles__page___24Abd:last-child:not(.styles__chevron___13BO3) { margin-right: 56px; } .styles__chevron___13BO3 { fill: #8f9ea8; } .styles__firstPage___2aaoC > svg { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .styles__nextPage___MEbmC > svg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .styles__previousPage___1dunb > svg { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .styles__currentPage___1MBl0 { background-color: #2496ed; color: #ffffff; } .styles__paginationCentered___3JgJW { list-style: none; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__limitedText___HDSWL { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; margin-top: 0; margin-left: 32px; margin-right: 32px; font-style: italic; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* SearchInput styles */ /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___29Z7P { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___Dn3Ve { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___Dn3Ve { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2DTL0 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2DTL0 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__search___2b26x { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #e0e4e7; background-color: #ffffff; } .styles__search___2b26x.styles__disabled___uZpyQ { cursor: not-allowed; } .styles__iconWrapper___3jGqi, .styles__clearIconWrapper___30uOG { width: 18px; height: 18px; } .styles__iconWrapper___3jGqi { margin-left: 10px; } .styles__iconWrapper___3jGqi .styles__icon___1PIgZ { fill: #8f9ea8; width: 18px; height: 18px; } .styles__clearIconWrapper___30uOG { margin-top: 2px; margin-right: 6px; } .styles__clearIconWrapper___30uOG .styles__icon___1PIgZ { fill: #8f9ea8; width: 8px; height: 8px; } .styles__iconWrapper___3jGqi.styles__disabled___uZpyQ .styles__icon___1PIgZ, .styles__clearIconWrapper___30uOG.styles__disabled___uZpyQ .styles__icon___1PIgZ { fill: #c0c9ce; } .styles__clearIconWrapper___30uOG:hover { cursor: pointer; } .styles__clearIconWrapper___30uOG:hover .styles__icon___1PIgZ { fill: #445d6e; } .styles__clearIconWrapper___30uOG:hover.styles__disabled___uZpyQ { cursor: inherit; } .styles__clearIconWrapper___30uOG:hover.styles__disabled___uZpyQ .styles__icon___1PIgZ { fill: #c0c9ce; } .styles__clearIconWrapper___30uOG:focus.styles__disabled___uZpyQ { outline: none; } .styles__hideClear___Df5xd { visibility: hidden; } .styles__field___140_5 { width: 100%; height: 100%; margin: 0 8px 0 6px; border: none; background-color: transparent; color: #445d6e; /* must explicitly set for FF otherwise it assumes 152px which is too wide */ min-width: 100px; } .styles__field___140_5:focus { outline: none; } .styles__field___140_5.styles__disabled___uZpyQ { cursor: not-allowed; color: #c0c9ce; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .common__wrapped___2tr9x { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes common__fadein___2rPJc { from { opacity: 0; } to { opacity: 1; } } @keyframes common__fadein___2rPJc { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes common__load8___2vFy0 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes common__load8___2vFy0 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .common__action___x1jTa { text-decoration: none; color: #007bff; font-weight: 600; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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: 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; margin-left: 4px; } .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; } .styles__pageTitle___1khR3 { font-size: 16px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3fGdU { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2FBXh { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2FBXh { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2WGan { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2WGan { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__pullCount___2MIKx { font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; color: #445d6e; fill: #445d6e; font-weight: bold; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__pullText___24t9w { font-weight: normal; margin-left: 4px; margin-right: 8px; } .styles__pullNum___2TXDx { margin-left: 4px; } .styles__icon___2Jvs1 { font-size: 20px; } .styles__tiny___-Pb2p { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: normal; font-weight: 600; } .styles__tiny___-Pb2p .styles__icon___2Jvs1 { font-size: 14px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3p08Y { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___K7qtP { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___K7qtP { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2sDMF { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2sDMF { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__starCount___PjVah { font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; color: #445d6e; fill: #445d6e; font-weight: bold; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__toggleStar___2Qlmf { cursor: pointer; } .styles__spinner___2PHNs { background-color: #ffffff; } .styles__starNum___2YkOL { background: #ffffff; margin-left: 4px; } .styles__icon___4_It0 { font-size: 22px; } .styles__tiny___3oFmP { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: normal; font-weight: 600; } .styles__tiny___3oFmP .styles__icon___4_It0 { font-size: 22px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1H2Xu { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1rMBK { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1rMBK { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1xGuN { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1xGuN { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__repoRow___1vo4h { margin-top: 16px; text-decoration: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 100%; margin-right: 16px; overflow: hidden; } .styles__repoRow___1vo4h svg + span { margin-left: 4px; } .styles__repoRow___1vo4h:hover { -webkit-box-shadow: 0 1px 6px 0 #c0c0c0; box-shadow: 0 1px 6px 0 #c0c0c0; } .styles__repoRow___1vo4h .styles__reponame___18yGM { font-weight: 700; } .styles__repoCard___2bqxx { width: 100%; 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.styles__nonMuiIcon___2DOhY { width: 18px; height: 18px; } .styles__repoCard___2bqxx .styles__right___3IqHY svg.styles__nonMuiIcon___2DOhY { fill: #5a6774; } .styles__repoCard___2bqxx .styles__right___3IqHY span { font-size: 12px; line-height: 16px; color: #27343b; font-weight: 600; font-size: 14px; color: #5a6774; } .styles__repoCard___2bqxx .styles__right___3IqHY .styles__starCount___1A7RN { border: 0; background: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__repoCard___2bqxx .styles__right___3IqHY .styles__starCount___1A7RN span { padding: 0; } .styles__repoCard___2bqxx .styles__right___3IqHY .styles__repoStatus___3NpwZ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100px; } .styles__repoCard___2bqxx .styles__right___3IqHY .styles__scanStatus___7FLOQ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 130px; } .styles__repoCard___2bqxx .styles__right___3IqHY .styles__disabled___iwA1d span { color: #a5b1ba; } .styles__repoCard___2bqxx .styles__right___3IqHY .styles__disabled___iwA1d svg { fill: #a5b1ba; } @media only screen and (max-width: 600px) { .styles__right___3IqHY .styles__starCount___1A7RN { width: 0; visibility: hidden; } .styles__right___3IqHY .styles__repoStatus___3NpwZ { width: 0; visibility: hidden; } .styles__right___3IqHY .styles__pullCount___2TpFZ { width: 0; visibility: hidden; } } @media only screen and (max-width: 480px) { .styles__right___3IqHY { width: 0; visibility: hidden; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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__inactiveImagesCta___1M--x { 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; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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 { color: #27343b; min-height: 181px; } .styles__planDetails___2nq_f .styles__planCard___3VCkg { margin: 10px 0; padding: 10px 12px; background-color: #fafafb; } .styles__planDetails___2nq_f .styles__planCard___3VCkg .styles__planTitle___1kOyi { font-size: 24px; font-weight: 600; } .styles__planDetails___2nq_f .styles__planCard___3VCkg .styles__priceText___2mdQe { font-size: 24px; line-height: 1.25; margin-bottom: 5px; } .styles__planDetails___2nq_f .styles__planCard___3VCkg .styles__priceText___2mdQe .styles__repoCost___3d4M- { color: #768491; line-height: 25px; } .styles__planDetails___2nq_f .styles__planCard___3VCkg .styles__priceText___2mdQe .styles__savingsWrapper___2tB7- { display: inline-block; font-size: 12px; line-height: 16px; margin-left: 15px; } .styles__planDetails___2nq_f .styles__planCard___3VCkg .styles__priceText___2mdQe .styles__savingsPrice___30cHA { color: #000000; } .styles__planDetails___2nq_f .styles__planCard___3VCkg .styles__priceText___2mdQe .styles__altPrice___zbAUp { color: #9e1011; text-decoration: line-through; } .styles__planDetails___2nq_f .styles__planCard___3VCkg .styles__priceText___2mdQe .styles__annualPrice___winum { position: relative; top: -3px; } .styles__planDetails___2nq_f .styles__planCard___3VCkg .styles__annualPlanSavings___1UBS8 { color: #43b899; font-size: 13px; min-height: 23px; line-height: 1.5; } .styles__planDetails___2nq_f .styles__planCard___3VCkg .styles__annualPlanSavings___1UBS8 .styles__savings___2lPdQ { font-size: 15px; 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__offerName___216-j { color: #43b899; font-size: 14px; font-weight: 700; line-height: 1.5; } .styles__featuresList___3I7w9 { padding-left: 0; margin: 5px 10px 5px 20px; } .styles__featuresList___3I7w9 .styles__planFeature___3aq8N { font-size: 12px; color: #ffffff; line-height: 1.5; margin-bottom: 2px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___25-Rl { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. 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_NPj { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2_NPj { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2Zakc { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2Zakc { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__form___3CE9g { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__fieldWrapper___201IQ + .styles__fieldWrapper___201IQ { margin-top: 20px; } .styles__generalError___1Nou8 { margin-top: 12px; color: #c82828; } .styles__notes___4YOXo { font-size: 14px; line-height: 20px; color: #90a0ac; margin-top: 8px; } .styles__notes___4YOXo p { margin: 0; } .styles__personalNamespaceWarning___-iiIl { margin: 28px 0; } .styles__personalNamespaceWarningContent___1S0Am > :first-child { margin-top: 0; } .styles__personalNamespaceWarningContent___1S0Am > :last-child { margin-bottom: 0; } .styles__submitButtonContainer___2MQux { margin-top: auto; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___Ibmu6 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2ziNY { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2ziNY { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2LKrm { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2LKrm { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__rowWrapper___3Z-G3 { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__rowWrapper___3Z-G3 .styles__fieldWrapper___2b7F3 { width: 100%; } .styles__offer___21NTZ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #43b899; font-size: 13px; margin-top: 12px; font-weight: 600; } .styles__checkIcon___3Z2SF { fill: #43b899; height: 20px; width: 20px; margin-right: 7px; } .styles__applyButton___2Ez34 { height: 30px; min-height: 30px; line-height: 26px; margin: 0 0 0 10px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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 { padding-left: 50px; padding-right: 50px; } .styles__cardTitle___PgGkv { font-size: 22px; } .styles__cardBody___dOa02 { -webkit-box-flex: 1; -ms-flex: 1 0 400px; flex: 1 0 400px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__newOrgForm___vC0av { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .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__selectedPlanCard___bu_AA { margin: 35px 30px; width: 40%; } .styles__purchaseOrderCardWrapper___f9A5J { margin-top: 80px; } @media only screen and (max-width: 960px) { .styles__formWrapper___3sylD { width: 100%; margin-right: 0; } .styles__selectedPlanCard___bu_AA { display: none; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .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 60px; 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__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: 30px; } .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: 35px 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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2LpXv { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1mgJ8 { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1mgJ8 { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___30kuZ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___30kuZ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .Select-control { border-radius: 2px; border-color: #e0e4e7 !important; } .is-disabled .Select-control { cursor: not-allowed; } .Select-menu-outer { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; border: 1px solid #e0e4e7; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); } .Select-option { -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #ffffff; cursor: pointer; display: block; padding: 8px 10px } .Select-option:last-child { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } .Select-option.is-focused { background: #f7f7f8; } /* Error text is hidden by default */ .styles__errorText___1k_sp { display: none; color: #e12b0c; font-size: 12px; line-height: 12px; height: 12px; margin-top: 4px; } .styles__visible___kJi7_ { display: block; } /* same gray as textField floatingLabelColor */ .styles__sectionHeader___O2fp- { color: #6a7c94; font-size: 10px; margin-bottom: 8px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__wrapper___24rWy { margin: 187px 15px 70px; } .styles__wrapper___24rWy .styles__card___2pkuU { max-width: 870px; margin: 0 auto; background-color: #ffffff; padding: 70px 50px 28px; min-height: 510px; text-align: center; } .styles__wrapper___24rWy .styles__card___2pkuU .styles__image___1VMxK { font-size: 80px; } .styles__wrapper___24rWy .styles__card___2pkuU .styles__title___WkBov { color: #26323f; font-size: 32px; font-weight: 600; margin-top: 10px; } .styles__wrapper___24rWy .styles__card___2pkuU .styles__content___1RXqb { color: #26323f; font-size: 16px; max-width: 480px; margin: 15px auto 0; text-align: left; } .styles__wrapper___24rWy .styles__card___2pkuU .styles__buttons___2tewD { margin-top: 70px; } .styles__wrapper___24rWy .styles__card___2pkuU .styles__planName___3w5ev { text-transform: capitalize; } .styles__wrapper___24rWy .styles__card___2pkuU .styles__planName___3w5ev > button { margin: 9px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1agHr { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1T76Y { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1T76Y { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___9AgAl { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___9AgAl { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__wrapper___EX-Nj { background: #022044; text-align: center; color: #ffffff; font-weight: 600; min-height: 38px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .styles__wrapper___EX-Nj.styles__secondary___2o0LW { background: #254356; } .styles__text___3a6LX { font-size: 13px; margin: 10px 40px; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } .styles__close___XHEiQ { margin-right: 20px; font-size: 16px; cursor: pointer; } .styles__icon___1Zq5X { margin-right: 8px; } .styles__bannerLinkText___3DcEK { margin-left: 4px; } @media only screen and (max-width: 960px) { .styles__wrapper___EX-Nj { z-index: 100; } .styles__text___3a6LX { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__icon___1Zq5X { margin: 0; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2hpxa { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2VEtj { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2VEtj { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___-yOxU { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___-yOxU { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__footerWrapper___1Rljn { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; background-color: #022144; color: #ffffff; } .styles__contentWrapper___1L_-i { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__section___XuuIR { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 40px 0; } @media only screen and (max-width: 1200px) { .styles__section___XuuIR { padding-left: 12px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .styles__linksMap___3rFFr { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 80%; } @media only screen and (max-width: 600px) { .styles__linksMap___3rFFr { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } } .styles__column___1cl5g { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 150px; } .styles__column___1cl5g a:not(:last-child) { margin-bottom: 12px; } @media only screen and (min-width: 601px) { .styles__column___1cl5g:not(:last-child) { margin-right: 80px; } } @media only screen and (max-width: 600px) { .styles__column___1cl5g:not(:last-child) { margin-bottom: 24px; } } @media only screen and (max-width: 1200px) { .styles__column___1cl5g:first-child { display: none; } .styles__column___1cl5g { min-width: 100px; } } @media only screen and (max-width: 960px) { .styles__column___1cl5g:first-child { display: none; } .styles__column___1cl5g { min-width: 50px; } } .styles__column___1cl5g a, .styles__links___2sWbh a { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; text-decoration: none; opacity: 0.6; cursor: pointer } .styles__column___1cl5g a:hover, .styles__links___2sWbh a:hover { opacity: 1; } .styles__links___2sWbh a:not(:last-child) { margin-right: 32px; } .styles__copyright___11bRD { font-weight: 600; } .styles__copyright___11bRD a { text-decoration: none; } .styles__listTitle___R9nW5 { font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: normal; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 800; margin-bottom: 12px } .styles__listTitle___R9nW5.styles__social___3RJzg { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .styles__subTitle___1dG4B { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 800; margin: 16px 0; } .styles__socialLinks___2Dlcm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 250px; } @media only screen and (max-width: 1200px) { .styles__socialLinks___2Dlcm { margin-top: 20px; } } .styles__icon___32Su8 { fill: white; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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: #2496ed; 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; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2NO2h { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1LKF6 { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1LKF6 { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2mC15 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2mC15 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__accountMenu___20Ni2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__accountMenu___20Ni2 ul { width: 190px; right: 0; top: 40px; } .styles__accountMenu___20Ni2 ul li { line-height: 3; overflow: hidden; text-overflow: ellipsis; } .styles__accountMenuDropdown___a5Xjp { margin-left: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; } .styles__expandable___1LbfJ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0.7 } .styles__expandable___1LbfJ:hover { opacity: 1; } .styles__expandable___1LbfJ .styles__username___gFFU4 { font-size: 14px; color: #ffffff; background-color: transparent; border: none; outline: none; overflow: hidden; font-weight: 600; min-width: 50px; max-width: 140px; text-overflow: ellipsis; padding-left: 8px; } .styles__expandable___1LbfJ .styles__avatar___171WY { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__expandable___1LbfJ > svg { fill: #ffffff; } .styles__logout___1hE_u { color: #e12b0c; } @media only screen and (max-width: 960px) { .styles__avatar___171WY { display: none; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___29x9_ { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3T03P { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3T03P { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___eWBya { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___eWBya { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__upgradeButton___235jO { color: #d4611d; background-color: #fef5c3; border-radius: 4px; border: 2px solid #ffffff; padding: 4px 16px; font-weight: 700; line-height: 22px; cursor: pointer; height: 34px; min-width: 100px } .styles__upgradeButton___235jO:hover { background-color: #f9e3ae; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___f82C3 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3KO2C { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3KO2C { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1oDm8 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1oDm8 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__nav___1VPb7 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 770px } .styles__nav___1VPb7.styles__loggedOut___3IZqw { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .styles__nav___1VPb7 .styles__navItem___CteOt { font-weight: 600; font-size: 14px; margin: 0 12px; display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #ffffff; text-decoration: none; cursor: pointer; text-align: center; line-height: 35px; } .styles__nav___1VPb7 .styles__navItem___CteOt:hover { opacity: 0.8; } .styles__nav___1VPb7 .styles__navDropdown___qwR8E { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__nav___1VPb7 .styles__navDropdown___qwR8E ul { width: 190px; right: 0; top: 40px; } .styles__nav___1VPb7 .styles__navDropdown___qwR8E ul li { line-height: 3; overflow: hidden; text-overflow: ellipsis; } .styles__nav___1VPb7 .styles__expandable___2P41L { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 4px; } .styles__nav___1VPb7 .styles__expandable___2P41L > svg { fill: #ffffff; } .styles__nav___1VPb7 .styles__menu___3vmYm { border-radius: 2px; -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, .1); box-shadow: 0 2px 12px rgba(0, 0, 0, .1); background: #ffffff; position: absolute; overflow: auto; z-index: 999; max-width: 364px; } .styles__nav___1VPb7 .styles__signUpButton___yf-Wn { width: 180px; height: 36px; border: 2px solid #ffffff; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 6px; } .styles__nav___1VPb7 .styles__signUpButton___yf-Wn:hover { background-color: #ffffff !important; } @media only screen and (max-width: 960px) { .styles__nav___1VPb7 .styles__navItem___CteOt { margin: 0 6px; } } .styles__publisherCenterNavigation___1tHoW { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .styles__alignRight___383AP { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___215ah { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___23HMS { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___23HMS { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3Q9qq { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3Q9qq { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Header */ .styles__headerWrapper___O0ot8 { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 64px; background-color: #2496ed; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__headerWrapper___O0ot8 .styles__header___XehzL { margin: 0 auto; width: 100%; max-width: 1280px; padding: 0 12px; position: relative; z-index: 999; } .styles__headerWrapper___O0ot8 .styles__publisherCenterHeader___34yU6 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 600px) { .styles__headerWrapper___O0ot8.styles__hasSearch___1e9v- { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100px; } .styles__headerWrapper___O0ot8 .styles__search___1gdRG { width: 300px; margin: 12px 0; } } .styles__headerWrapper___O0ot8.styles__publishFlow___2CIMp { min-width: 1295px; } .styles__headerWrapper___O0ot8 > * { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .styles__headerWrapper___O0ot8 .styles__headerLogo___2ZFL4 { cursor: pointer; text-align: center; text-decoration: none; margin: 19px 16px 15px 0; } .styles__headerWrapper___O0ot8 .styles__headerLogo___2ZFL4:hover { opacity: 0.85; } .styles__headerWrapper___O0ot8 .styles__headerLogo___2ZFL4 > svg { min-width: 140px; } @media only screen and (max-width: 960px) { .styles__headerWrapper___O0ot8 .styles__headerLogo___2ZFL4 { max-width: 36px; min-width: 36px; overflow-x: hidden; } } .styles__headerWrapper___O0ot8 .styles__avatar___2_sB5 { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__headerWrapper___O0ot8 .styles__accountDropdown___3gNBy { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__headerWrapper___O0ot8 .styles__accountDropdown___3gNBy ul { margin-top: 4px !important; width: 190px; right: 0; top: 40px; } .styles__headerWrapper___O0ot8 .styles__accountDropdown___3gNBy ul li { line-height: 3; overflow: hidden; text-overflow: ellipsis; } .styles__transparent___2xk7k { padding-top: 20px; background-color: transparent; position: relative; z-index: 1; } .styles__expandable___3EG8G { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 4px; opacity: 0.7 } .styles__expandable___3EG8G:hover { opacity: 1; } .styles__expandable___3EG8G > svg { fill: white; } /* Search & Autocomplete Results */ .styles__search___1gdRG { padding: 2px 0; min-width: 210px; margin-right: 20px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__input___3Mx0R { max-width: 310px; color: #ffffff; background-color: rgba(255, 255, 255, .2); padding-right: 12px } .styles__input___3Mx0R:focus { color: #445d6e; background-color: rgba(255, 255, 255, 1); } .styles__darkIcon___1sENK { fill: #445d6e; } .styles__lightIcon___38PYC { fill: #ffffff; } .styles__menu___2ujQV { 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___2qNYI .styles__ul___27JDe { width: 500px; } .styles__loading___3NL_v { position: absolute; border-right-color: #445d6e; border-bottom-color: #445d6e; border-left-color: #445d6e; } .styles__match___3cczJ { color: #2496ed; font-weight: 600; } .styles__result___3gw5o { padding: 8px 20px; cursor: pointer; } .styles__highlightedResult___1x7aB { padding: 8px 20px; cursor: pointer; background: #e0e4e7; } .styles__menuTitle___1gOqd { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; padding: 8px; cursor: default; color: #8f9ea8; } .styles__resultName___2kUJf { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; } .styles__resultCategories___Jeu9U { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; color: #8f9ea8; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___32d5f { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___DS2oh { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___DS2oh { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___5AS7u { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___5AS7u { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__footerWrapper___1V-kz { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: normal; margin-top: 20px; color: #8f9ea8; } .styles__contentWrapper___3tvh8 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 24px 0 40px; } .styles__contentWrapper___3tvh8 a { text-decoration: none; margin-left: 4px } .styles__contentWrapper___3tvh8 a:hover { color: #445d6e; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2J6e5 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1vDsq { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1vDsq { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1zkZT { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1zkZT { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } 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 { overflow-y: hidden; height: 100vh; } .styles__main___1pg40 { position: relative; -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; min-height: calc(100vh - 64px); } .styles__white___NRcyJ { background: #ffffff; } .styles__offWhite___YQoVI { background: #fafafb; } .styles__flexRow___2FYq7 { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__grey___MVUF_ { background: #eff1f3; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3qaVB { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2i4cY { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2i4cY { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2ROC4 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2ROC4 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__signupFormParent___1hGJ4 { font-family: 'Open Sans', sans-serif; } .styles__titleHeader___xRiPH { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 80px 0; } .styles__titleSubHeader___13XDf { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 12px } .styles__titleSubHeader___13XDf.styles__noTitleHeader___2IjoX { margin-top: 38px; } .styles__titleSubHeader___13XDf.styles__verification___1obpt { text-align: center; margin-right: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 0 20px; margin-top: 60px; } .styles__titleSubHeader___13XDf.styles__dockerEnvelope___3A1a1 { margin-bottom: 40px; } .styles__titleSubHeader___13XDf .styles__titleWrapper___6XqC7 { width: 378px; } .styles__titleSubHeader___13XDf .styles__verificationWrapper___ieJgf { width: 100%; } .styles__titleSubHeader___13XDf .styles__mainTitle___3_abT { font-weight: 700; font-size: 22px; color: #27343b; margin-bottom: 5px; } .styles__titleSubHeader___13XDf .styles__subTitle___3uNk2 { line-height: 20px; font-size: 14px; color: #697a89; } .styles__titleSubHeader___13XDf .styles__subTitle___3uNk2 a { color: #007bff; cursor: pointer; } .styles__titleSubHeader___13XDf .styles__verifyFooter___2qqIl { margin: 140px 0; font-family: 'Open Sans', sans-serif; font-size: 14px; } .styles__titleSubHeader___13XDf .styles__verifyFooter___2qqIl a { color: #007bff; cursor: pointer; text-decoration: none; } .styles__titleSubHeader___13XDf .styles__signIn___2zRWn { color: #007bff; font-weight: 700; cursor: pointer; } .styles__formWrapper___3qIad { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; margin-left: 20px; } .styles__formWrapper___3qIad .styles__fieldBorder___gmEkW { height: 0; border: 0.5px solid #b7bbbe; width: 378px; margin-bottom: 15px; } .styles__formWrapper___3qIad .styles__fieldBorderError___3QDM6 { height: 0; border: 0.5px solid #c82828; width: 378px; margin-bottom: 9px; } .styles__formWrapper___3qIad .styles__fieldBorderError___3QDM6:last-child { margin-bottom: 0; } .styles__formWrapper___3qIad .styles__inputAddOn___HHxg5 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .styles__formWrapper___3qIad .styles__errorIcon___1iBj7 { border: none; background-color: #fafafb; height: 36px; width: 25px; padding: 10px; font-size: 12px; position: relative; right: 40px; } .styles__formField___2drTx { border: none; width: 378px; height: 36px; background-color: #fafafb; font-size: 14px; color: #27343b; padding: 7.5px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .styles__lowercase___3Ifj0 { text-transform: lowercase; } ::-webkit-input-placeholder { /* WebKit browsers */ text-transform: none; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ text-transform: none; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ text-transform: none; } :-ms-input-placeholder { /* Internet Explorer 10+ */ text-transform: none; } ::-ms-input-placeholder { /* Recent browsers */ text-transform: none; } ::placeholder { /* Recent browsers */ text-transform: none; } input:focus, input:invalid, select:focus, textarea:focus, button:focus { -webkit-box-shadow: none; box-shadow: none; outline: none; } .styles__responsiveInputResult___3A_-k { margin-bottom: 8px; font-size: 12px; width: 378px; } .styles__responsiveInputResult___3A_-k .styles__errorText___2ZytQ { padding-left: 7.5px; color: #c82828; display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__responsiveInputResult___3A_-k .styles__responsiveInputResult___3A_-k:last-child { margin-bottom: 0; } .styles__responsiveInputResult___3A_-k .styles__password___3q9gx { margin-bottom: 0; } .styles__inputResult___1L6-8 { margin-left: 10px; font-size: 12px; width: 300px; -ms-flex-item-align: center; align-self: center; } .styles__errorText___2ZytQ { color: #c82828; } .styles__submit___1JP3_ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__signUpButton___jEpn5 { background-color: #007bff; border-radius: 4px; color: #ffffff; font-weight: bold; font-size: 14px; text-align: center; width: 378px; height: 36px; cursor: pointer; margin: 0 5px 5px 0; border: none; outline: none; } 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: 378px; color: #70787d; font-size: 11px; margin-top: 7px; margin-bottom: 24px; } .styles__formParent___B8OHZ .styles__tos___2ReIR a { color: #70787d; cursor: pointer; } .styles__envelope___1i652 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__login___1cm5d { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: 'Open Sans', sans-serif; } .styles__login___1cm5d a { font-weight: 500; cursor: pointer; color: #007bff; text-decoration: none; } .styles__login___1cm5d.styles__verification___1obpt { margin: 32px 0; } .styles__recaptchaParent___1MCeA { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 473px; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-top: 8px; margin-bottom: 12px; } .styles__recaptchaWrapper___3l6It { transform: scale(0.65); -webkit-transform: scale(0.65); } .styles__errorMessage___XzWOy { color: #c82828; font-weight: 600; font-size: 14px; position: relative; right: 41px; } .styles__errorList___34hHL { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: 0 0 15px 300px; width: 378px; color: #c82828; font-size: 11px; } .styles__errorList___34hHL .styles__errorMessage___XzWOy { margin: 5px 0 0 14px; } .styles__titleError___QEKpS { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__termsOfService___1hzv2 { width: 460px; margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #697a89; font-size: 12px; font-family: 'Open Sans', sans-serif; } .styles__termsOfService___1hzv2 .styles__euta___1F07X { margin-bottom: 5px; width: 370px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1 { width: 14px; height: 14px; padding: 0; margin-right: 12px } .styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1.styles__isSafari___3A6P0 { overflow: visible; } .styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1 .styles__checkboxSize___3P8N9 { width: 14px; height: 14px; } .styles__centeredError___3q2KE { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 8px; } @media only screen and (max-width: 960px) { .styles__formField___2drTx { width: 300px; font-size: 14px; -webkit-box-flex: 0; -ms-flex: none; flex: none; } .styles__titleHeader___xRiPH { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 50px 0; } .styles__titleSubHeader___13XDf { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 0; } .styles__titleSubHeader___13XDf .styles__titleWrapper___6XqC7 { width: 300px; } .styles__formWrapper___3qIad { margin-left: 50px; } .styles__formWrapper___3qIad .styles__inputAddOn___HHxg5 { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__formWrapper___3qIad .styles__fieldBorder___gmEkW { border: 0.5px solid #b7bbbe; width: 300px; } .styles__formWrapper___3qIad .styles__fieldBorderError___3QDM6 { border: 0.5px solid #c82828; width: 300px; margin-bottom: 6px; } .styles__signUpButton___jEpn5 { width: 300px; margin-right: 10px; } .styles__formParent___B8OHZ { z-index: 99; top: 20px; } .styles__formParent___B8OHZ .styles__tos___2ReIR { width: 305px; margin-top: 7px; margin-bottom: 24px; } .styles__recaptchaParent___1MCeA { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__errorMessage___XzWOy { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 40px 12px 0; } .styles__termsOfService___1hzv2 { margin-left: 80px; width: 300px; color: #697a89; font-size: 12px; font-family: 'Open Sans', sans-serif; } .styles__termsOfService___1hzv2 .styles__euta___1F07X { margin-bottom: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; } .styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1 { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 14px; height: 14px; padding: 0; margin-right: 14px; } .styles__termsOfService___1hzv2 .styles__euta___1F07X .styles__checkboxMask___1ruw1 .styles__checkboxSize___3P8N9 { width: 14px; height: 14px; } .styles__recaptchaWrapper___3l6It { margin: 10px 7px 10px 0; transform: scale(1); -webkit-transform: scale(1); } .styles__errorList___34hHL { width: 250px; font-size: 12px; margin: 0 0 10px 10px; } .styles__inputResult___1L6-8 { display: none; } } .styles__userInfoParent___2Agr0 { font-family: 'Open Sans', sans-serif; } .styles__userInfoHeader___1Bfle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 80px 0; } .styles__userInfoBody___30hSB { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P { width: 470px; min-height: 540px; background: #ffffff; -webkit-box-shadow: 0 1px 2px #c2c2c2; box-shadow: 0 1px 2px #c2c2c2; padding: 60px 20px 45px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__header___2_RvZ { color: #27343b; font-weight: 600; font-size: 22px; font-family: Helvetica Neue, 'Open Sans', sans-serif; width: 378px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__explanatoryText___1WVmy { font-family: Helvetica Neue, 'Open Sans', sans-serif; color: #27343b; font-size: 21px; width: 378px; margin-bottom: 29px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoFormField___1FzJB { border: none; height: 36px; background-color: #fafafb; font-size: 14px; color: #27343b; padding: 7px; width: 378px; -webkit-appearance: none; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__stateProvinceField___1mEV7 { border: none; height: 30px; background-color: none; font-size: 14px; color: #27343b; padding: 7px; width: 378px; margin-bottom: 20px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW { border: 0.5px solid #b7bbbe; width: 378px; margin-bottom: 15px } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW:last-child { margin-bottom: 20px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorderError___3QDM6 { height: 0; border: 0.5px solid #c82828; width: 378px; margin-bottom: 9px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM select:required:invalid { color: #898f93; font-size: 14px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM option[value=''][disabled] { display: none; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoSignUpButton___1TqsV { background-color: #007bff; border-radius: 4px; color: #ffffff; font-weight: bold; font-size: 14px; text-align: center; width: 378px; height: 30px; cursor: pointer; border: none; outline: none; margin: 22px 0; } @media only screen and (max-width: 960px) { .styles__userInfoHeader___1Bfle { margin: 60px 0; } .styles__userInfoBody___30hSB { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P { width: 470px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoFormField___1FzJB { width: 378px; height: 40px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__stateProvinceField___1mEV7 { width: 378px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW { width: 378px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__role___T34X8 { font-size: 12px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__userInfoSignUpButton___1TqsV { width: 378px; } } @media only screen and (max-width: 600px) { .styles__userInfoHeader___1Bfle { margin: 60px 0; } .styles__userInfoBody___30hSB { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P { width: 300px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__header___2_RvZ { width: 250px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__explanatoryText___1WVmy { width: 250px; font-size: 15px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoFormField___1FzJB { width: 250px; height: 40px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__role___T34X8 { font-size: 12px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__stateProvinceField___1mEV7 { width: 250px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorder___gmEkW { width: 250px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__fieldBorderError___3QDM6 { width: 250px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__completeYourProfileSection___1hfOM .styles__userInfoSignUpButton___1TqsV { width: 250px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__responsiveInputResult___3A_-k { width: 250px; } .styles__userInfoBody___30hSB .styles__completeProfileParent___dlo_P .styles__requiredFields___3q9jV { font-size: 14px; font-style: italic; margin: 10px; } .styles__titleSubHeader___13XDf .styles__verificationTitle___BxpmF { font-size: 18px; } .styles__titleSubHeader___13XDf.styles__verification___1obpt { padding: 0 40px; } } .styles__eye___3havL { cursor: pointer; } .styles__loading___3Uu6q { position: absolute; top: 0; left: 0; right: 0; background-color: #f7f7f8; height: 100%; padding: 64px 0; } .styles__modal___1TNb8 { margin-top: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__modal___1TNb8 .styles__modalButton___avgS0 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 12px 0; } .styles__modal___1TNb8 .styles__modalButton___avgS0 button { margin: 12px 0; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3fcu6 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3eO2_ { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3eO2_ { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3mXXk { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3mXXk { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @font-face { font-family: 'tt-commons-regular-font'; src: url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.eot?#iefix') format('embedded-opentype'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff2') format('woff2'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff') format('woff'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.ttf') format('truetype'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.svg#ttcommonsregular') format('svg'); font-weight: normal; font-style: normal; } .styles__pageContent___3-Nev { position: relative; padding: 35px 80px 200px; background-color: #2496ed; font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important; overflow: hidden; } .styles__pageContent___3-Nev .styles__background___3slTZ { position: absolute; width: calc(100% + 160px); left: -80px; right: -80px; top: 9%; height: 100%; background-position: left center; background-size: cover; background-image: url(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; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2Q1Uf { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1a15h { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1a15h { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2TkFi { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2TkFi { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @font-face { font-family: 'tt-commons-regular-font'; src: url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.eot?#iefix') format('embedded-opentype'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff2') format('woff2'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff') format('woff'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.ttf') format('truetype'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.svg#ttcommonsregular') format('svg'); font-weight: normal; font-style: normal; } .styles__pageContent___PGWOb { position: relative; padding: 35px 80px 200px; background-color: #2496ed; font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important; overflow: hidden; } .styles__pageContent___PGWOb .styles__background___2NiQe { position: absolute; width: calc(100% + 160px); left: -80px; right: -80px; top: 9%; height: 100%; background-position: left center; background-size: cover; background-image: url(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; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3EM5t { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1l9mh { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1l9mh { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3fDYt { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3fDYt { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @font-face { font-family: 'tt-commons-regular-font'; src: url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.eot?#iefix') format('embedded-opentype'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff2') format('woff2'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.woff') format('woff'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.ttf') format('truetype'), url('https://d36jcksde1wxzq.cloudfront.net/saas-mega/ttcommons-regular.svg#ttcommonsregular') format('svg'); font-weight: normal; font-style: normal; } .styles__pageContent___1-Gjn { position: relative; padding: 35px 80px 200px; background-color: #2496ed; font-family: 'tt-commons-regular-font', 'Open Sans', sans-serif !important; overflow: hidden; } .styles__pageContent___1-Gjn .styles__background___18xsL { position: absolute; width: calc(100% + 160px); left: -80px; right: -80px; top: 40%; height: 100%; background: url(847d80c466323f9902369474710602a0.svg) no-repeat center top; background-size: cover; } .styles__pageContent___1-Gjn .styles__wrapper___2CfOC { max-width: 1280px; margin: 0 auto; position: relative; } .styles__pageContent___1-Gjn .styles__flexRow___27eU4 { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__pageContent___1-Gjn .styles__iconWrapper___3zi93 { margin-bottom: 6px; } .styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA { margin: 66px 66px 0 0; } .styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA .styles__title___WP-i6 { margin: 0 0 18px 0; font-size: 50px; font-weight: 700; line-height: 1; color: #ffffff; } .styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA .styles__subtitle___TtMiq { font-size: 30px; color: #ffffff; margin: 0; } .styles__pageContent___1-Gjn .styles__summary___2pH14 { margin-top: 10%; color: #404d59; font-size: 24px; max-width: 520px; } .styles__pageContent___1-Gjn .styles__summary___2pH14 .styles__title___WP-i6 { font-size: 30px; font-weight: 600; margin-bottom: 40px; } .styles__pageContent___1-Gjn .styles__summary___2pH14 p { margin-bottom: 35px; } .styles__link___jLh39 { color: #007bff; text-decoration: none } .styles__link___jLh39:hover { text-decoration: underline; } @media (min-width: 2000px) { .styles__pageContent___1-Gjn .styles__background___18xsL { top: 600px; } } @media (max-width: 1200px) { .styles__pageContent___1-Gjn .styles__background___18xsL { background-position: -15vw top; } .styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA .styles__title___WP-i6 { font-size: 40px; } .styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA .styles__subtitle___TtMiq { font-size: 25px; } } @media (max-width: 1023px) { .styles__pageContent___1-Gjn .styles__flexRow___27eU4 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__pageContent___1-Gjn .styles__flexRow___27eU4 .styles__titleWrapper___1fNPA { margin-bottom: 40px; } } @media (max-width: 768px) { .styles__pageContent___1-Gjn .styles__background___18xsL { background-image: unset; background-color: #2496ed; } .styles__pageContent___1-Gjn .styles__summary___2pH14 { padding: 0; max-width: 100%; color: #ffffff; } .styles__pageContent___1-Gjn .styles__titleWrapper___1fNPA { margin-right: 0; } .styles__pageContent___1-Gjn img { display: block; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1wT3O { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2sXAU { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2sXAU { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2bpNU { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2bpNU { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__wrapper___2rXVf { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__img___yzf6i { margin: 32px 0 24px; } .styles__text___3mS6Z { font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: normal; text-align: center } .styles__text___3mS6Z a { text-decoration: none; cursor: pointer; color: #2496ed; } .styles__text___3mS6Z > div { padding-bottom: 12px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__link___db2lA { color: #2496ed; text-decoration: none; } .styles__title___1cRmP { color: #27343b; margin: 0 0 18px; font-size: 18px; font-weight: 600; } .styles__content___BIBGt { color: #26323f; margin-bottom: 35px; line-height: 1.5; } .styles__buttonRow___3_wep { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .styles__buttonRow___3_wep button { margin: 0 0 0 12px; } .styles__tooltipMultiLineContent___p6xV- { font-weight: bold; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1j4Dp { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1iTKI { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1iTKI { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___A8cIK { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___A8cIK { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__main___EBGP1 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__main___EBGP1 svg { fill: #82949e; margin-right: 4px; } .styles__display___31YnN { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: normal; color: #82949e; line-height: 12px; float: left; } .styles__dateDisplay___dTlPO { font-size: 14px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2GfAH { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___19Jjy { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___19Jjy { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2ejjy { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2ejjy { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__tokensCard___CHoAj { position: relative; margin-bottom: 20px; min-height: 400px; padding-bottom: 22px; } .styles__tokensUsage___1CIF9 { font-size: 14px; font-weight: 400; color: #43b899; line-height: 36px } .styles__tokensUsage___1CIF9.styles__reachedLimit___1zOr3 { color: #26323f; } .styles__link___4nvnv { color: #2496ed; font-size: 14px; font-weight: 600; text-decoration: underline; } .styles__updatePlan___rfuA9 { margin-left: 5px; } .styles__loading___1FFmR { min-height: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 80px; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.6); z-index: 999; } .styles__accessTokensTable___2bDy7 { min-height: 220px; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > * { lost-column-cycle: 7; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *: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___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(1):last-child { margin-right: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(27.05625% - 8.75px); max-width: calc(27.05625% - 8.75px); width: calc(27.05625% - 8.75px); } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(2):last-child { margin-right: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(18.73125% - 9.75px); max-width: calc(18.73125% - 9.75px); width: calc(18.73125% - 9.75px); } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(3):last-child { margin-right: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(4) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(18.73125% - 9.75px); max-width: calc(18.73125% - 9.75px); width: calc(18.73125% - 9.75px); } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(4):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(4):last-child { margin-right: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(4):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(5) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(18.73125% - 9.75px); max-width: calc(18.73125% - 9.75px); width: calc(18.73125% - 9.75px); } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(5):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(5):last-child { margin-right: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(5):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *: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___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(6):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(6):last-child { margin-right: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(6):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(7) { 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___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(7):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(7):last-child { margin-right: 0; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 > *:nth-child(7):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___2bDy7 .styles__accessTokensHeader___okcM9 { margin: 12px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: ##6f777c; font-weight: 500; margin-bottom: 12px; text-transform: uppercase; } .styles__accessTokensTable___2bDy7 .styles__selectAction___WR3ZQ { -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___2bDy7 .styles__selectAction___WR3ZQ .styles__checkboxParent___2xjc5 { width: 14px; height: 14px; } .styles__accessTokensTable___2bDy7 .styles__selectAction___WR3ZQ .styles__checkbox___29Dov { opacity: 0.5; } .styles__accessTokensTable___2bDy7 .styles__selectAction___WR3ZQ .styles__checkbox___29Dov.styles__checked___1yYhs { opacity: 1; } .styles__accessTokensTable___2bDy7 .styles__selectAction___WR3ZQ .styles__checkboxIcon___27cd- { width: 14px; height: 14px; } .styles__disableBtn___1nNy5 { 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___1nNy5:hover { border: 1px solid #e12b0c; } .styles__saveBtnWithTokens___3CXeV { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-left: 20px; } .styles__saveBtnWithTokens___3CXeV button { margin: 0; } .styles__saveBtnWithTokens___3CXeV .styles__twoButtons___2EJyP button:nth-child(1) { margin-right: 18px; } .styles__invertedPanicButton___2JnHH:hover { background-color: #871907 !important; color: #ffffff !important; border-color: #871907 !important; } .styles__invertedRegularButton___2Y_c0:hover { background-color: #2596ec !important; color: #ffffff !important; border-color: #2596ec !important; } .styles__accessTokenRetrievalError___1eDMX { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__accessTokenRetrievalError___1eDMX > :first-child { margin-right: 12px; } .styles__twoFactor___3tpC1 { text-align: center; margin: 0 auto; width: 511px; margin-top: 90px; } .styles__twoFactor___3tpC1 .styles__twoFactorDescription___M-txp { line-height: 19px; } .styles__twoFactor___3tpC1 .styles__twoFactorDescription___M-txp .styles__subheader___vTyGu { font-weight: 600; } .styles__warning___1rjnf { 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___1rjnf .styles__emphasis___1rLQf { margin-left: 10px; color: #e12b0c; } .styles__cardTitle___3Ssqy { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__cardTitle___3Ssqy .styles__cardHeadActions___2q7xK { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__accessTitle___249o_ { font-size: 18px; } .styles__saveBtn___3ksRO { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; } .styles__justifyCenter___1sSmK { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__pagination___GJMua > ul { margin-bottom: 0; } .styles__tokenRow___VCqM_ { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__tokenRow___VCqM_ > * { lost-column-cycle: 7; } .styles__tokenRow___VCqM_ > *: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__tokenRow___VCqM_ > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__tokenRow___VCqM_ > *:nth-child(1):last-child { margin-right: 0; } .styles__tokenRow___VCqM_ > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__tokenRow___VCqM_ > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(27.05625% - 8.75px); max-width: calc(27.05625% - 8.75px); width: calc(27.05625% - 8.75px); } .styles__tokenRow___VCqM_ > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__tokenRow___VCqM_ > *:nth-child(2):last-child { margin-right: 0; } .styles__tokenRow___VCqM_ > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__tokenRow___VCqM_ > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(18.73125% - 9.75px); max-width: calc(18.73125% - 9.75px); width: calc(18.73125% - 9.75px); } .styles__tokenRow___VCqM_ > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__tokenRow___VCqM_ > *:nth-child(3):last-child { margin-right: 0; } .styles__tokenRow___VCqM_ > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__tokenRow___VCqM_ > *:nth-child(4) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(18.73125% - 9.75px); max-width: calc(18.73125% - 9.75px); width: calc(18.73125% - 9.75px); } .styles__tokenRow___VCqM_ > *:nth-child(4):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__tokenRow___VCqM_ > *:nth-child(4):last-child { margin-right: 0; } .styles__tokenRow___VCqM_ > *:nth-child(4):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__tokenRow___VCqM_ > *:nth-child(5) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(18.73125% - 9.75px); max-width: calc(18.73125% - 9.75px); width: calc(18.73125% - 9.75px); } .styles__tokenRow___VCqM_ > *:nth-child(5):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__tokenRow___VCqM_ > *:nth-child(5):last-child { margin-right: 0; } .styles__tokenRow___VCqM_ > *:nth-child(5):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__tokenRow___VCqM_ > *: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__tokenRow___VCqM_ > *:nth-child(6):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__tokenRow___VCqM_ > *:nth-child(6):last-child { margin-right: 0; } .styles__tokenRow___VCqM_ > *:nth-child(6):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__tokenRow___VCqM_ > *:nth-child(7) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(8.325% - 11px); max-width: calc(8.325% - 11px); width: calc(8.325% - 11px); } .styles__tokenRow___VCqM_ > *:nth-child(7):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__tokenRow___VCqM_ > *:nth-child(7):last-child { margin-right: 0; } .styles__tokenRow___VCqM_ > *:nth-child(7):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__tokenRow___VCqM_ { margin: 12px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__tokenRow___VCqM_.styles__notActive___1bRUe { color: #90a0ac; } .styles__tokenRow___VCqM_.styles__notActive___1bRUe .styles__description___1pcVB::before { display: none; } .styles__tokenRow___VCqM_ .styles__selectAction___WR3ZQ { -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__tokenRow___VCqM_ .styles__selectAction___WR3ZQ .styles__checkboxParent___2xjc5 { width: 14px; height: 14px; } .styles__tokenRow___VCqM_ .styles__selectAction___WR3ZQ .styles__checkbox___29Dov { opacity: 0.5; } .styles__tokenRow___VCqM_ .styles__selectAction___WR3ZQ .styles__checkbox___29Dov.styles__checked___1yYhs { opacity: 1; } .styles__tokenRow___VCqM_ .styles__selectAction___WR3ZQ .styles__checkboxIcon___27cd- { width: 14px; height: 14px; } .styles__tokenRow___VCqM_ .styles__accessTokenAction___1BuKV { display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; fill: #8f9ea8; margin-right: 12px; } .styles__tokenRow___VCqM_ .styles__accessTokenAction___1BuKV:hover { fill: #2596ec; } .styles__tokenRow___VCqM_ .styles__description___1pcVB { position: relative; } .styles__tokenRow___VCqM_ .styles__description___1pcVB > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .styles__tokenRow___VCqM_ .styles__description___1pcVB::before { content: ' '; position: absolute; left: -15px; top: 5px; height: 8px; width: 8px; border-radius: 50%; background-color: #54d1b0; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___RUp_s { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1bOcM { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1bOcM { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2PUkD { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2PUkD { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__form___2cmlc { min-height: 380px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__fieldsWrapper___9gmLA { margin-top: 10px; } .styles__tokenLabelField___DkfkI { min-height: 80px; } .styles__tokenScopeField___39Dvj { min-height: 60px; } .styles__fieldLabel___2kXJO { color: #70787d; font-size: 12px; padding: 0 0 0 6px; line-height: 1.5; } .styles__fieldLabel___2kXJO .styles__requiredFieldAsterisk___Hb_xC { color: #e12b0c; } .styles__buttonRow___155Hi { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 20px; } .styles__scopeError___s2pKr { color: #c82828; font-size: 12px; margin: 7px 6px; } .styles__cta___SdMeC { padding: 18px; border-radius: 3px; background-color: #f2f3f5; margin: 6px 0 10px; } .styles__cta___SdMeC .styles__ctaTitle___2nB_v { color: #26323f; font-size: 14px; font-weight: 700; line-height: 20px; margin-bottom: 8px; } .styles__cta___SdMeC .styles__ctaTitle___2nB_v .styles__proFeature___sUY4s { background-color: #2496ed; padding: 0 6px; border-radius: 6px; color: white; font-size: 11px; height: 20px; display: inline-block; margin-left: 5px; } .styles__cta___SdMeC .styles__ctaActions___3uM_r { margin-top: 12px; } .styles__cta___SdMeC .styles__ctaActions___3uM_r button { margin: 0 20px 0 0; } .styles__cta___SdMeC .styles__ctaActions___3uM_r .styles__link___1dWoj { color: #007bff; font-weight: 600; text-decoration: none; } .styles__patDescription___12-4B { padding: 0 6px; margin: 2px 0; max-width: 400px; color: #5a6774; font-size: 12px; line-height: 1.5; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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__tagPullCode___1VLVy { background-color: #f1f4f6; } .styles__copyable___2_hGB { cursor: pointer; } .styles__copyable___2_hGB * { cursor: pointer; } .styles__input___1GNF9 { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; font-family: 'Courier New', Courier, monospace; font-weight: 600; unicode-bidi: embed; border: none; border-radius: 2px; padding: 4px 0 4px 12px; background-color: #27343b; width: 100%; overflow-x: auto; color: #ffffff; } .styles__tagPullInput___11UTk { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: normal; unicode-bidi: embed; border: none; border-radius: 2px; padding: 5px 12px; background-color: #f1f4f6; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; -webkit-box-flex: 1; -ms-flex: auto 1 1; flex: auto 1 1; } .styles__button___1h9sK { color: white; border-radius: 0; } .styles__tagPullCode___1VLVy .styles__button___1h9sK { color: #007bff; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___28vQ2 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2Z-di { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2Z-di { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2TsFq { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2TsFq { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__resultLabel___3nkRJ { text-transform: uppercase; color: #6f777c; margin-top: 15px; line-height: 19px; } .styles__resultValue___17C8p { margin-top: 5px; margin-bottom: 10px; word-wrap: break-word; } .styles__copyCommand___29Vyb textarea:focus, .styles__copyCommand___29Vyb input:focus { outline: none; } .styles__resultHowToUse___FLQmn { margin: 15px 0; } .styles__resultHowToUse___FLQmn p { margin: 5px 0; } .styles__code___2UI1T { background-color: #f3f4f4; display: inline-block; padding: 5px 10px; font-family: 'Courier New', Courier, monospace; } .styles__warningBox___1lDNe { margin: 20px 0 10px; height: 80px; background: #fafafb; } .styles__warningBox___1lDNe .styles__yellowBar___1x728 { position: absolute; width: 4px; height: 80px; background: #f7d933; margin-right: 10px; } .styles__warningBox___1lDNe .styles__warningMessage___VN4Yw { padding: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__warningBox___1lDNe .styles__warningMessage___VN4Yw .styles__warningText___1o1Tw { margin: 20px; } .styles__warningBox___1lDNe .styles__secretLabel___3zEX_ { color: #27343b; font-size: 14px; margin-left: 20px; font-weight: 600; } .styles__buttonRow___2vmtO { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 20px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__addAccessTokenWrapper___1gIC8 { min-height: 500px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__title___1PNda { font-size: 22px; font-weight: 600; color: #27343b; margin: 0 0 8px 0; } .styles__subtitle___3q_4r { font-size: 14px; color: #27343b; margin: 0 0 10px 0; } .styles__link___py1Yc { color: #2496ed; text-decoration: none; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3gFss { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___mn22M { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___mn22M { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3szwL { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3szwL { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__subtext___1efQN { margin: 8px 0 28px; } .styles__buttonRow___3YFZG { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 50px; } .styles__removeMarginFromButton___3s_YW button:last-child { margin: 6px 0; } .styles__title___32P2X { font-size: 22px; font-weight: 600; color: #27343b; margin: 0 0 12px 0; } .styles__title___32P2X > svg { top: 7px; position: relative; } .styles__tokensTable___3vRS2 { margin: 10px 0; background-color: #fafafb; width: 100%; } .styles__tokensTable___3vRS2 th { font-weight: 500; text-align: left; border-bottom: 1px solid #e0e4e7; text-transform: uppercase; } .styles__tokensTable___3vRS2 td, .styles__tokensTable___3vRS2 th { padding: 6px 14px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .styles__tokensTable___3vRS2 .styles__tokenLabel___t-huO { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 340px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__title___2lQwm { font-size: 22px; font-weight: 600; color: #27343b; margin: 0 0 8px 0; } .styles__subtitle___3FxdT { font-size: 14px; color: #27343b; margin: 0 0 10px 0; } .styles__form___3X6fA { min-height: 380px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__tokenLabelField___VmOWl { height: 80px; margin-top: 15px; } .styles__fieldLabel___3KArx { color: #70787d; font-size: 12px; padding: 0 0 0 6px; line-height: 1.5; } .styles__fieldLabel___3KArx .styles__requiredFieldAsterisk___3wP-P { color: #e12b0c; } .styles__tokeScope___2bJwS { padding: 0 6px; display: inline-block; line-height: 30px; } .styles__buttonRow___2dLNU { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 20px; } .styles__editAccessTokenDescriptionHeader___F0oeY { font-size: 12px; color: #70787d; margin-top: 38px; margin-bottom: 6px; } .styles__editAccessTokenFormHeader___2YU8O { color: #27343b; font-size: 14px; line-height: 19px; text-transform: uppercase; } .styles__editAccessTokenFormHeader___2YU8O .styles__editAccessTokenInfo___2MDw2 { margin-top: 4px; color: #27343b; text-transform: none; font-weight: 600; } .styles__editAccessTokenGrid___17V0e { display: grid; grid-template-columns: 35% 50%; grid-gap: 24px; margin: 24px 6px; } .styles__editDeleteButton___3MS1C:hover { background-color: #bf3b42 !important; color: #ffffff !important; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3kTIS { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1AgWf { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1AgWf { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1cOK3 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1cOK3 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__tokensCard___3Ltz_ { position: relative; margin-bottom: 20px; min-height: 400px; padding-bottom: 22px; } .styles__tokensUsage____d-QR { font-size: 14px; font-weight: 400; color: #43b899; line-height: 36px } .styles__tokensUsage____d-QR.styles__reachedLimit___2OerQ { color: #26323f; } .styles__link___xe3fN { color: #2496ed; font-size: 14px; font-weight: 600; text-decoration: underline; } .styles__updatePlan___39VRi { margin-left: 5px; } .styles__loading___2SU72 { min-height: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 80px; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.6); z-index: 999; } .styles__accessTokensTable___1xJc2 { min-height: 220px; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > * { lost-column-cycle: 7; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *: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___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(1):last-child { margin-right: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(27.05625% - 8.75px); max-width: calc(27.05625% - 8.75px); width: calc(27.05625% - 8.75px); } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(2):last-child { margin-right: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(18.73125% - 9.75px); max-width: calc(18.73125% - 9.75px); width: calc(18.73125% - 9.75px); } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(3):last-child { margin-right: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(4) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(18.73125% - 9.75px); max-width: calc(18.73125% - 9.75px); width: calc(18.73125% - 9.75px); } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(4):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(4):last-child { margin-right: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(4):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(5) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(18.73125% - 9.75px); max-width: calc(18.73125% - 9.75px); width: calc(18.73125% - 9.75px); } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(5):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(5):last-child { margin-right: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(5):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *: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___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(6):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(6):last-child { margin-right: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(6):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(7) { 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___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(7):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(7):last-child { margin-right: 0; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- > *:nth-child(7):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__accessTokensTable___1xJc2 .styles__accessTokensHeader___1ZfP- { margin: 12px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: ##6f777c; font-weight: 500; margin-bottom: 12px; text-transform: uppercase; } .styles__accessTokensTable___1xJc2 .styles__selectAction___2CKDx { -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___1xJc2 .styles__selectAction___2CKDx .styles__checkboxParent___YAiLD { width: 14px; height: 14px; } .styles__accessTokensTable___1xJc2 .styles__selectAction___2CKDx .styles__checkbox___1MHrv { opacity: 0.5; } .styles__accessTokensTable___1xJc2 .styles__selectAction___2CKDx .styles__checkbox___1MHrv.styles__checked___14roX { opacity: 1; } .styles__accessTokensTable___1xJc2 .styles__selectAction___2CKDx .styles__checkboxIcon___3q8fj { width: 14px; height: 14px; } .styles__disableBtn___3_hVS { 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___3_hVS:hover { border: 1px solid #e12b0c; } .styles__saveBtnWithTokens___3hsOD { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-left: 20px; } .styles__saveBtnWithTokens___3hsOD button { margin: 0; } .styles__saveBtnWithTokens___3hsOD .styles__twoButtons___23qQW button:nth-child(1) { margin-right: 18px; } .styles__invertedPanicButton___1kiQL:hover { background-color: #871907 !important; color: #ffffff !important; border-color: #871907 !important; } .styles__invertedRegularButton___2-d37:hover { background-color: #2596ec !important; color: #ffffff !important; border-color: #2596ec !important; } .styles__accessTokenRetrievalError___3zG7y { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__accessTokenRetrievalError___3zG7y > :first-child { margin-right: 12px; } .styles__twoFactor___3GZtI { text-align: center; margin: 0 auto; width: 511px; margin-top: 90px; } .styles__twoFactor___3GZtI .styles__twoFactorDescription___2rUs4 { line-height: 19px; } .styles__twoFactor___3GZtI .styles__twoFactorDescription___2rUs4 .styles__subheader___2KtG8 { font-weight: 600; } .styles__warning___2opOu { 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___2opOu .styles__emphasis___26s7G { margin-left: 10px; color: #e12b0c; } .styles__cardTitle___3Xlp4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__cardTitle___3Xlp4 .styles__cardHeadActions___1_w5u { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__accessTitle___3elIf { font-size: 18px; } .styles__saveBtn___10vvP { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; } .styles__justifyCenter___14Jrc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__pagination___2EBIz > ul { margin-bottom: 0; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .changePasswordAndAccountInformation__wrapped___3Q-g- { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes changePasswordAndAccountInformation__fadein___2Kzku { from { opacity: 0; } to { opacity: 1; } } @keyframes changePasswordAndAccountInformation__fadein___2Kzku { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes changePasswordAndAccountInformation__load8___WJ8oX { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes changePasswordAndAccountInformation__load8___WJ8oX { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .changePasswordAndAccountInformation__inputField___aScoZ:not(:first-child) { margin-top: 24px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .AccountInformationForm__wrapped___DHsHw { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes AccountInformationForm__fadein___3yobU { from { opacity: 0; } to { opacity: 1; } } @keyframes AccountInformationForm__fadein___3yobU { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes AccountInformationForm__load8___zFpxj { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes AccountInformationForm__load8___zFpxj { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .AccountInformationForm__passError___1zXhS { margin-top: 24px; } .AccountInformationForm__explanationParagraph___jYiHQ { margin-bottom: 0; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .ChangePasswordForm__wrapped___GWZ5b { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes ChangePasswordForm__fadein___2UvJd { from { opacity: 0; } to { opacity: 1; } } @keyframes ChangePasswordForm__fadein___2UvJd { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes ChangePasswordForm__load8___1JAgP { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes ChangePasswordForm__load8___1JAgP { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .ChangePasswordForm__forgotPassword___2VVDz { margin-top: 20px; } .ChangePasswordForm__alertMessage___3QXvL { margin-bottom: 20px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___YOqVS { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1tUev { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1tUev { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___Jl0Zg { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___Jl0Zg { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__statusMessage___16Uy8 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 63px; background: #fafafb; border-left: 4px solid; padding: 20px 14px; } .styles__error___33Lj_ { border-color: #e12b0c; fill: #e12b0c; } .styles__success___bNvZe { border-color: #00a000; fill: #00a000; } .styles__warning___2ZHD2 { border-color: #cccc00; fill: #cccc00; } .styles__default___FdpiS { border-color: #cccccc; } .styles__content___RFYzG { margin-left: 14px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2mhDa { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___12URL { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___12URL { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___ZMsIe { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___ZMsIe { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__modal___2H0Mt { height: 490px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 30px; } .styles__dockerIcon___Vp7e3 { margin: 30px 0; } .styles__header___3UtiU { font-weight: 700; font-size: 22px; line-height: 30px; margin-bottom: 48px; } .styles__formField___2w75l { border: none; outline: none; width: 350px; height: 30px; background-color: #fafafb; font-size: 14px; color: #6f777c; padding: 7.5px; } .styles__fieldBorder___19oV5 { height: 0; border: 0.5px solid #b7bbbe; width: 350px; margin-bottom: 6px; } .styles__fieldBorderError___2J_4v { height: 0; border: 0.5px solid #e12b0c; width: 350px; margin-bottom: 6px; } .styles__disableButton___3W0Vq { width: 230px; } .styles__error___3diD6 { color: #e12b0c; font-size: 13px; width: 350px; height: 75px; } .styles__emailField___10Ej3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__emailField___10Ej3 .styles__emailInput___1RRmS { border-top: none; border: none; border-bottom: 2px dotted rgba(0, 0, 0, 0.30196); padding: 5px 0; width: 384px; overflow: hidden; margin-right: 10px; } .styles__verified___16mLf { margin: 6px; padding: 0 10px; fill: #00a000; } .styles__primaryEmail___1d96g { font-size: 13px; font-style: italic; color: #777777; } .styles__form___1o16O { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .styles__input___1Vu36 { margin-right: 18px; } .styles__emailsWrapper___2Ov3a { position: relative; } .styles__loading___3WpBL { 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___fhH6k { margin: 0 0 18px 0; } .style__link___3weRl { text-decoration: none; cursor: pointer; } .style__link___3weRl a { text-decoration: none; } .styles__link___LQ3gY { text-decoration: none; cursor: pointer; } .styles__link___LQ3gY a { text-decoration: none; } .style__loading___36WMv { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3ErrV { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3hU_B { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3hU_B { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___cLpyN { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___cLpyN { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__repoUsage___1GVBC { font-size: 14px; line-height: 20px; color: #27343b; padding-bottom: 20px; } .styles__repoUsage___1GVBC a { font-weight: 600; color: #1aaaf8; } .styles__warn___3UyH6 { color: #bf3b42; } .styles__warn___3UyH6 a { font-weight: 600; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2vTQx { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2YUqT { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2YUqT { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1gBcg { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1gBcg { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__inputField___3cY98 { min-height: 62px; } .styles__repoName___2HTWC { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .styles__repoNamespace___3EAbe { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__namespace___LXJx- { margin-top: 6px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .styles__repoNameInput___32bZF { padding-left: 16px; width: 100%; } .styles__repoUsage___cRFYx { font-size: 14px; line-height: 20px; color: #27343b; padding-bottom: 20px; } .styles__warn___25Ywv { color: #bf3b42; } .styles__privacy___TNUzt { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__privacy___TNUzt > * { lost-column-cycle: 2; } .styles__privacy___TNUzt > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__privacy___TNUzt > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__privacy___TNUzt > *:nth-child(1):last-child { margin-right: 0; } .styles__privacy___TNUzt > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__privacy___TNUzt > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__privacy___TNUzt > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__privacy___TNUzt > *:nth-child(2):last-child { margin-right: 0; } .styles__privacy___TNUzt > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__privacy___TNUzt { padding-bottom: 12px; } .styles__privacyLabel___BirfX { margin-top: -8px; } .styles__privacyIcon___5Qb1L { margin: 0 6px 2px; } .styles__privacyLabelNameAndIcon___H8u9X { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .styles__privacyLabelName___2CDAf { font-size: 14px; line-height: 20px; color: #27343b; font-weight: 600; } .styles__privacyLabelDescription___2UMT4 { font-size: 14px; line-height: 20px; color: #27343b; padding-top: 4px; } .styles__sourceProviders___3IhFa { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__sourceProvider___2CDLW { cursor: pointer; margin: 0 4px; border-radius: 4px; } .styles__selected___GxcSl { opacity: 1; border: 1px solid #e0e4e7; } .styles__privacyOption___2MR4i { -webkit-box-flex: 1; -ms-flex: 1 1 40%; flex: 1 1 40%; margin: 0 !important; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2SB7q { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3KMbl { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3KMbl { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___16LGA { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___16LGA { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__submitRow___2UcLW { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 12px 0; } .styles__submitRow___2UcLW.styles__alignLeft___2tnZ2 { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .styles__submitRow___2UcLW.styles__alignLeft___2tnZ2 .styles__submit___uPnTl { margin-left: 0; } .styles__submitError___2-dpR { -ms-flex-item-align: center; align-self: center; font-style: italic; color: #e12b0c; } .styles__currentStatus___22kAO { -ms-flex-item-align: center; align-self: center; margin: 0 20px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3POEW { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3CAQF { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3CAQF { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ .styles__labelFieldContainer___3uc8S { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__labelFieldContainer___3uc8S > * { lost-column-cycle: 2; } .styles__labelFieldContainer___3uc8S > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(24.975% - 9px); max-width: calc(24.975% - 9px); width: calc(24.975% - 9px); } .styles__labelFieldContainer___3uc8S > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__labelFieldContainer___3uc8S > *:nth-child(1):last-child { margin-right: 0; } .styles__labelFieldContainer___3uc8S > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__labelFieldContainer___3uc8S > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(74.925% - 3px); max-width: calc(74.925% - 3px); width: calc(74.925% - 3px); } .styles__labelFieldContainer___3uc8S > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__labelFieldContainer___3uc8S > *:nth-child(2):last-child { margin-right: 0; } .styles__labelFieldContainer___3uc8S > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__labelFieldContainer___3uc8S { margin: 0 20px 20px 20px; } .styles__alignCenter___Gb712 { -ms-flex-item-align: center; align-self: center; } .styles__alignTop___1J-AJ { -ms-flex-item-align: start; align-self: flex-start; } .styles__label___1-81p { color: #8f9ea8; -ms-flex-item-align: start; align-self: flex-start; text-transform: uppercase; } .styles__label___1-81p.styles__disabled___16jPl, .styles__field___3Lbwx.styles__disabled___16jPl { color: #c0c9ce; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1lB7L { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___31Jbg { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___31Jbg { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3Cuuv { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3Cuuv { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* @francisco 2017/03/20 NOTE: This should be moved to @docker/core or @docker/css cloud shouldn't set/mutate any global classnames */ .Select-control { border-radius: 2px; border-color: #e0e4e7 !important; } .Select-menu-outer { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; border: 1px solid #e0e4e7; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); } .Select--multi .Select-value { background-color: #e0e4e7; border-radius: 2px; border: none; color: #445d6e; display: inline-block; font-size: 12px; line-height: 1.4; margin-left: 5px; margin-top: 5px; vertical-align: top; } .Select--multi a.Select-value-label { color: #445d6e; cursor: pointer; text-decoration: none; } .Select--multi .Select-value-icon { cursor: pointer; border-bottom-left-radius: 2px; border-top-left-radius: 2px; border-right: none; padding: 3px 0 1px 5px; } .Select--multi .Select-value-icon:hover, .Select--multi .Select-value-icon:focus { background-color: #e0e4e7; color: #445d6e; } .Select--multi .Select-value-icon:active { background-color: #445d6e; } .Select-option { -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #ffffff; cursor: pointer; display: block; padding: 8px 10px } .Select-option:last-child { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } .Select-option.is-focused { background: #f7f7f8; } .styles__errorText___1hHbe { display: none; color: #ef4a53; font-size: 12px; height: 16px; margin-top: 4px } .styles__errorText___1hHbe.styles__visible___1iv5a { display: block; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3bkDo { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3uKDR { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3uKDR { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___s6KGM { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___s6KGM { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* billing */ .styles__billingDates___2uMjP { display: inline-block; width: 100%; } .styles__billingRow___1sb_a { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__billingRow___1sb_a > * { lost-column-cycle: 2; } .styles__billingRow___1sb_a > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__billingRow___1sb_a > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__billingRow___1sb_a > *:nth-child(1):last-child { margin-right: 0; } .styles__billingRow___1sb_a > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__billingRow___1sb_a > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__billingRow___1sb_a > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__billingRow___1sb_a > *:nth-child(2):last-child { margin-right: 0; } .styles__billingRow___1sb_a > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__billingRow___1sb_a { min-height: 64px; } .styles__billingRowCVVExpiration___2ecGn { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__billingRowCVVExpiration___2ecGn > * { lost-column-cycle: 2; } .styles__billingRowCVVExpiration___2ecGn > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.3% - 8px); max-width: calc(33.3% - 8px); width: calc(33.3% - 8px); } .styles__billingRowCVVExpiration___2ecGn > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__billingRowCVVExpiration___2ecGn > *:nth-child(1):last-child { margin-right: 0; } .styles__billingRowCVVExpiration___2ecGn > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__billingRowCVVExpiration___2ecGn > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(66.6% - 4px); max-width: calc(66.6% - 4px); width: calc(66.6% - 4px); } .styles__billingRowCVVExpiration___2ecGn > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__billingRowCVVExpiration___2ecGn > *:nth-child(2):last-child { margin-right: 0; } .styles__billingRowCVVExpiration___2ecGn > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__billingZipCountry___9AVV7 { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__billingZipCountry___9AVV7 > * { lost-column-cycle: 3; } .styles__billingZipCountry___9AVV7 > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(16.65% - 10px); max-width: calc(16.65% - 10px); width: calc(16.65% - 10px); } .styles__billingZipCountry___9AVV7 > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__billingZipCountry___9AVV7 > *:nth-child(1):last-child { margin-right: 0; } .styles__billingZipCountry___9AVV7 > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__billingZipCountry___9AVV7 > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__billingZipCountry___9AVV7 > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__billingZipCountry___9AVV7 > *:nth-child(2):last-child { margin-right: 0; } .styles__billingZipCountry___9AVV7 > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__billingZipCountry___9AVV7 > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.3% - 8px); max-width: calc(33.3% - 8px); width: calc(33.3% - 8px); } .styles__billingZipCountry___9AVV7 > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__billingZipCountry___9AVV7 > *:nth-child(3):last-child { margin-right: 0; } .styles__billingZipCountry___9AVV7 > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__billingZipCountry___9AVV7 { min-height: 64px; } .styles__billingFormContent___19OqW { margin: 0 20px; } .styles__billingHeader___sHFJa { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; font-weight: bolder; color: #c0c9ce; padding-bottom: 16px; } .styles__billingOrgHeader___2Zaos { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; font-weight: bolder; color: #c0c9ce; margin-top: -20px; } .styles__billingNote___1mHf7 { margin: 4px 0 20px; } .styles__billingHeaderInner___2o525 { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; font-weight: bolder; color: #c0c9ce; padding: 32px 16px 16px 0; } .styles__billingCountry___1SWv8 { margin-top: 4px; } .styles__billingExpiration___2D92O { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__billingExpiration___2D92O > * { lost-column-cycle: 2; } .styles__billingExpiration___2D92O > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__billingExpiration___2D92O > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__billingExpiration___2D92O > *:nth-child(1):last-child { margin-right: 0; } .styles__billingExpiration___2D92O > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__billingExpiration___2D92O > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__billingExpiration___2D92O > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__billingExpiration___2D92O > *:nth-child(2):last-child { margin-right: 0; } .styles__billingExpiration___2D92O > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__billingExpiration___2D92O { margin-top: 8px; } .styles__billingFooter___2jQQl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 40px; } @-webkit-keyframes styles__progress___1htcx { from { width: 137px; } to { width: 275px; } } @keyframes styles__progress___1htcx { from { width: 137px; } to { width: 275px; } } .styles__billingProgressBar___108un { width: 275px; border-bottom: solid 2px #e0e4e7; } .styles__billingProgressBar___108un > * { width: 275px; -webkit-animation-name: styles__progress___1htcx; animation-name: styles__progress___1htcx; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; position: absolute; border-bottom: solid 2px #2496ed; } /* end billing */ .styles__card___4ah4I { height: 100%; } .styles__descriptionText___37-J9 { margin-bottom: 16px; } .styles__modalBottom___1RTuy { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 12px; margin-right: 0; } .styles__errorMsg___9ln3A { -ms-flex-item-align: center; align-self: center; color: #ef4a53; } .styles__errorMsg___9ln3A svg { margin-bottom: -4px; margin-right: 8px; } .styles__buttonRow___Z8jiQ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 50px; } .styles__copyAccess___4iChj { margin-top: 20px; } .styles__removeMarginFromButton___2eBum button:last-child { margin: 6px 0; } .styles__alignFirstButtonLeft___9ppyL { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .styles__alignFirstButtonLeft___9ppyL button:nth-child(1) { margin: 6px 0; } .styles__alignFirstButtonLeft___9ppyL button:nth-child(2) { margin-left: 50%; } .styles__alignFirstButtonLeft___9ppyL button:last-child { margin: 6px 0; } .styles__editDeleteButton___2Qh19:hover { background-color: #bf3b42 !important; color: #ffffff !important; } .styles__planSelectionForm___1awnM { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__icon___1x7bF { fill: #8f9ea8; margin-right: 8px; } .styles__useCreditCard___2oVJH { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; } .styles__useCreditCard___2oVJH .styles__title___12Bqt { margin-bottom: 8px; } .styles__useCreditCard___2oVJH .styles__icon___1x7bF { margin-bottom: -3px; } .styles__useCreditCard___2oVJH .styles__creditCard___2ck6h { font-size: 14px; } .styles__useCreditCard___2oVJH .styles__expires___swovo { color: #445d6e; } .styles__error___2tumD { display: -webkit-box; display: -ms-flexbox; display: flex; width: 350px; color: #ef4a53 } .styles__error___2tumD::first-letter { text-transform: uppercase; } .styles__error___2tumD > svg { margin-right: 8px; } .styles__use___2AK4b { font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: normal; color: #254356; } .styles__expires___swovo { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; color: #c0c9ce; } .styles__changeBillingInfo___2NeC8 { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: normal; color: #8f9ea8; } .styles__planSelector___2zuEr { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__planSelector___2zuEr > * { lost-column-cycle: 2; } .styles__planSelector___2zuEr > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(58.275% - 5px); max-width: calc(58.275% - 5px); width: calc(58.275% - 5px); } .styles__planSelector___2zuEr > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__planSelector___2zuEr > *:nth-child(1):last-child { margin-right: 0; } .styles__planSelector___2zuEr > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__planSelector___2zuEr > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(41.625% - 7px); max-width: calc(41.625% - 7px); width: calc(41.625% - 7px); } .styles__planSelector___2zuEr > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__planSelector___2zuEr > *:nth-child(2):last-child { margin-right: 0; } .styles__planSelector___2zuEr > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__planSelector___2zuEr { margin: space-sm; height: 386px; } .styles__planSelector___2zuEr .styles__planDetails___awb6Y { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #f7f7f8; padding: 16px; text-align: center; color: #8f9ea8; border-radius: 2px; border-color: transparent; } .styles__planSelector___2zuEr .styles__planDetails___awb6Y > p { margin: 0 0 12px 0; } .styles__planSelector___2zuEr .styles__priceText___1RP7B { font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: normal; color: #2496ed; margin-bottom: 20px; } .styles__planSelector___2zuEr .styles__price___1RDYc { font-size: 38px; line-height: 44px; font-weight: 700; color: #2496ed; } .styles__planSelector___2zuEr .styles__checkboxes___10FhI { height: 80px; } .styles__planSelector___2zuEr .styles__planSlider___2SQBO { width: 90%; } .styles__accessTokenForm___3z5lT { min-height: 400px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__accessTokenForm___3z5lT .styles__secretLabel___2rCRd { color: #27343b; font-size: 14px; margin-left: 20px; } .styles__removeAPIKeyRowSubmitting___3jdmt { opacity: 0.5; pointer-events: none; } .styles__accessTokenRowParent___2O_za { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__accessTokenAction___2ix8- { display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; fill: #8f9ea8; margin-right: 12px } .styles__accessTokenAction___2ix8- :hover { fill: #2596ec; } .styles__editAccessTokenDescriptionHeader___247EA { font-size: 12px; color: #70787d; margin-top: 38px; margin-bottom: 6px; } .styles__editAccessTokenFormHeader___o9x_U { color: #6f777c; font-size: 14px; line-height: 19px; text-transform: uppercase; } .styles__editAccessTokenFormHeader___o9x_U .styles__editAccessTokenInfo___VUd4E { margin-top: 4px; color: #27343b; text-transform: none; } .styles__editAccessTokenGrid___YuQSA { display: grid; grid-template-columns: 35% 50%; grid-gap: 24px; margin: 24px 0; } .styles__emailNotificationForm___3OU-L .styles__radioGroup___3DdjY, .styles__slackNotificationLevelForm___ITGpu .styles__radioGroup___3DdjY { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -20px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: top; -ms-flex-align: top; align-items: top } .styles__emailNotificationForm___3OU-L .styles__radioGroup___3DdjY > *, .styles__slackNotificationLevelForm___ITGpu .styles__radioGroup___3DdjY > * { display: block; margin: 0 20px; white-space: nowrap; } .styles__notificationMessage___1fCXN { /* @mixin tertiary; */ margin-top: 24px; } .styles__notificationMessage___1fCXN svg { fill: #8f9ea8; width: 18px; margin-bottom: -8px; margin-right: 4px; } .styles__slackNotificationLevelForm___ITGpu { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__slackNotificationLevelForm___ITGpu > * { lost-column-cycle: 2; } .styles__slackNotificationLevelForm___ITGpu > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(83.25% - 2px); max-width: calc(83.25% - 2px); width: calc(83.25% - 2px); } .styles__slackNotificationLevelForm___ITGpu > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__slackNotificationLevelForm___ITGpu > *:nth-child(1):last-child { margin-right: 0; } .styles__slackNotificationLevelForm___ITGpu > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__slackNotificationLevelForm___ITGpu > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(16.65% - 10px); max-width: calc(16.65% - 10px); width: calc(16.65% - 10px); } .styles__slackNotificationLevelForm___ITGpu > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__slackNotificationLevelForm___ITGpu > *:nth-child(2):last-child { margin-right: 0; } .styles__slackNotificationLevelForm___ITGpu > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__slackNotificationLevelForm___ITGpu { margin-top: 20px; } .styles__emailNotificationForm___3OU-L .styles__address___1PjLX { margin-bottom: 16px; } .styles__slackNotificationForm___2Y_kG.styles__slackNotificationFormDeleting___e2uf_ { opacity: 0.5; pointer-events: none; } .styles__slackNotificationsCreateForm___2mnlQ { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -16px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__slackNotificationsCreateForm___2mnlQ .styles__inputContainer___26Vq5 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .styles__slackNotificationsCreateForm___2mnlQ > * { display: block; margin: 0 8px; white-space: nowrap; } .styles__slackNotificationsCreateForm___2mnlQ .styles__deleteIcon___2EvW1 { cursor: pointer; fill: #8f9ea8; } .styles__slackNotificationsCreateForm___2mnlQ .styles__deleteIcon___2EvW1:hover { fill: #ef4a53; } .styles__slackNotificationsCreateForm___2mnlQ .styles__deleteIcon___2EvW1 svg { position: relative; top: 12px; } .styles__slackNotificationsCreateForm___2mnlQ .styles__slackCreateBtn___3Hh9G { position: relative; top: 10px; } .styles__successMessage___2lAKE { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 12px; color: #00cbca; } .styles__successMessage___2lAKE .styles__iconWrapper___1gIMb { margin-right: 8px; } .styles__emailError___dIk87 { margin-bottom: 20px; } .styles__azureCertificateDownloadButton___2dhfl .styles__buttonLabel___1YhkP { margin-left: 8px; } .styles__link___3HDQ7 { text-decoration: none; cursor: pointer; color: #2596ec; } .styles__link___3HDQ7 a { text-decoration: none; } .styles__accessForm___jX64t { min-height: 250px; } .styles__newAccessTokenModalBody___1dgvF { max-width: 590px; margin: 0 auto; } .styles__addAccessTokenSubheader___1kIvw { margin-bottom: 40px; } .styles__resultDescription___2rZc8 { text-transform: uppercase; color: #6f777c; margin-top: 30px; line-height: 19px; } .styles__resultToken___1ke4F { margin-top: 6px; margin-bottom: 30px; word-wrap: break-word; } .styles__copyCommand___EfxHl textarea:focus, .styles__copyCommand___EfxHl input:focus { outline: none; } .styles__resultExample____4FpP { margin: 15px 0; } .styles__resultExample____4FpP .styles__firstCommand___2xMrV { margin: 5px 0; } .styles__warningBox___Q_VWk { margin: 15px 0; height: 80px; background: #fafafb; } .styles__warningBox___Q_VWk .styles__yellowBar___3fx8Y { position: absolute; width: 4px; height: 80px; background: #f7d933; margin-right: 10px; } .styles__warningBox___Q_VWk .styles__warningMessage___3B9YO { padding: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__warningBox___Q_VWk .styles__warningMessage___3B9YO .styles__warningText___BjoxI { margin: 20px; } .styles__warningBox___Q_VWk .styles__secretLabel___2rCRd { color: #27343b; font-size: 14px; margin-left: 20px; } @media (max-width: 960px) { .styles__accessForm___jX64t { max-width: 600px; } } @media (max-width: 600px) { .styles__accessForm___jX64t { max-width: 500px; padding: 16px; } .styles__warningBox___Q_VWk { height: 100px; margin-right: 16px; } .styles__warningBox___Q_VWk .styles__yellowBar___3fx8Y { height: 100px; } .styles__warningBox___Q_VWk .styles__secretLabel___2rCRd { margin-right: 20px; } .styles__alignFirstButtonLeft___9ppyL { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .styles__alignFirstButtonLeft___9ppyL button:nth-child(2) { margin-left: 10px; } } @media (max-width: 480px) { .styles__accessForm___jX64t { max-width: 325px; padding: 16px; } .styles__warningBox___Q_VWk { margin-right: 16px; height: 150px; } .styles__warningBox___Q_VWk .styles__yellowBar___3fx8Y { height: 150px; } } .styles__button___2q1Wr button { margin: 6px 0 !important; } .styles__selectAction___1oiOf { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; font-size: 12px !important; } .styles__selectAction___1oiOf .styles__checkboxParent___2sFLM { width: 14px; height: 14px; } .styles__selectAction___1oiOf .styles__checkbox___3gMGf { opacity: 0.5; } .styles__selectAction___1oiOf .styles__checkbox___3gMGf.styles__checked___5y3ax { opacity: 1; } .styles__selectAction___1oiOf .styles__checkboxIcon___c1eXp { width: 14px; height: 14px; } .styles__asterisk___3Pzj_ { color: #e12b0c; } .styles__code___2haxq { background-color: #f3f4f4; display: inline-block; padding: 5px 10px; font-family: 'Courier New', Courier, monospace; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2Q7Mi { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1Zpau { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1Zpau { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2pCje { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2pCje { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__main___LXCFA { margin-top: 16px; } .styles__main___LXCFA button { padding: 0; margin-left: 0; } .styles__row___eE_UF { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__row___eE_UF > * { lost-column-cycle: 3; } .styles__row___eE_UF > *: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___eE_UF > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__row___eE_UF > *:nth-child(1):last-child { margin-right: 0; } .styles__row___eE_UF > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__row___eE_UF > *: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___eE_UF > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__row___eE_UF > *:nth-child(2):last-child { margin-right: 0; } .styles__row___eE_UF > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__row___eE_UF > *: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___eE_UF > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__row___eE_UF > *:nth-child(3):last-child { margin-right: 0; } .styles__row___eE_UF > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__hookTeam___2GfOs { float: left; margin-right: 12px; } .styles__info___1Gm29 { margin-top: 16px; margin-bottom: 20px; background-color: #f7f7f8; padding: 16px; border-radius: 3px; } .styles__titleWithLabel___2Nxm3 { 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__titleLabel___2OO9U { 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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1Hsve { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3WPLM { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3WPLM { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3qTMA { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3qTMA { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .ReactModal__Overlay { opacity: 0; } .ReactModal__Overlay--after-open { opacity: 1; -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out; } .styles__magicCarpet___3aR2B { background-color: #ffffff; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26); padding: 32px; overflow-y: auto; } @media only screen and (max-width: 600px) { .styles__magicCarpet___3aR2B { padding: 12px; } } .styles__header___1YECX { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__titleWrapper___1lbAU { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__close___1UKjm { width: 20px; height: 20px; } .styles__close___1UKjm { -ms-flex-item-align: start; align-self: flex-start; cursor: pointer; } /* Must be greater than FullscreenLoading's zindex so close can be pressed */ .styles__aboveLoading___J4oLZ { z-index: 1000; } .styles__icon___1XVIx { margin-right: 12px; } .styles__title___Ivsok { font-size: 24px; line-height: 32px; font-weight: 400; } .styles__subscription___uw59t { margin-bottom: 12px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___kjjSM { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___rwTTE { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___rwTTE { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3TuTZ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3TuTZ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @font-face { font-family: 'Inconsolata'; src: url(https://fonts.gstatic.com/s/inconsolata/v18/QldKNThLqRwH-OJ1UHjlKGlZ5qhExfHw.woff2); } .styles__parent___302JG { background: #ffffff; } .styles__wrapper___VB3ki { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #ffffff; font-family: 'Open Sans', sans-serif; } .styles__wrapper___VB3ki .styles__bottomContent___2ESix { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 800px; -ms-flex-item-align: center; align-self: center; } .styles__wrapper___VB3ki .styles__header___1WOs0 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 56px; } .styles__navigator___2A6eu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 15vh; } .styles__navigator___2A6eu .styles__previousStep___2iOLk button { border: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-right: 20px; font-weight: 600; color: #007bff; background-color: #ffffff; border-color: #ffffff } .styles__navigator___2A6eu .styles__previousStep___2iOLk button:hover { background-color: #ffffff; border-color: #ffffff; } .styles__navigator___2A6eu .styles__nextStepButton___3gbPg button { background-color: #007bff; border-color: #007bff } .styles__navigator___2A6eu .styles__nextStepButton___3gbPg button:hover { background-color: #066da5; border-color: #066da5; } .styles__navigator___2A6eu.styles__recoveryCodeOnly___m32fN { -ms-flex-item-align: end; align-self: flex-end; } .styles__twoFactorParent___1onFP { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-height: 1000px; width: 100%; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 { color: #27343b; max-width: 800px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__userType___3HWri { text-align: left; margin-bottom: 10px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__instructionHeader___2ju28 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; max-width: 700px } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__instructionHeader___2ju28.styles__longerSubTitle___3QhI3 { margin-bottom: 25px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__title___LAPb5 { font-size: 22px; font-weight: 600; margin: 30px 0 9px; max-width: 700px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk { font-weight: 400; font-size: 14px; line-height: 20px; max-width: 470px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk .styles__subTitleLink___25C1x { color: #007bff; text-decoration: none } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk .styles__subTitleLink___25C1x:hover { color: #445d6e; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #ffffff; -webkit-box-shadow: 2px 3px 10px rgba(0, 0, 0, .1); box-shadow: 2px 3px 10px rgba(0, 0, 0, .1); border-radius: 6px; width: 700px; padding: 25px 0; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__contextSubText___3mhqB { font-size: 36px; font-family: 'Inconsolata', sans-serif; text-align: center } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__contextSubText___3mhqB.styles__textCode___6lbip { padding: 80px 0; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx .styles__optionsButton___1yD9g { border: 1px solid #007bff; color: #007bff; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx .styles__optionsButton___1yD9g button { width: 85px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__qrLayout___2VnBe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y textarea { min-width: 600px; border: none; overflow: auto; outline: none; -webkit-box-shadow: none; box-shadow: none; resize: none; text-align: center; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__helpLink___2SZzs { margin: 30px 0; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__formField___1w8_j { border-bottom: 1px solid #b7bbbe; border-top: 0; border-left: 0; border-right: 0; width: 460px; height: 30px; background-color: #fafafb; font-size: 14px; color: #27343b; padding: 7.5px; outline: none; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subHeader___3SJ-u { font-size: 18px; margin-top: 30px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__text___vLbBO { width: 460px; margin: 12px 0; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__sixDigitCodeError___2gnm6 { padding: 7.5px; font-size: 12px; color: #e12b0c; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__wrapper___VB3ki { display: grid; max-width: 375px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__wrapper___VB3ki .styles__img___1sYA- { height: 140px; width: 230px; grid-column: 2; grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; justify-self: center; margin-bottom: 20px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__wrapper___VB3ki .styles__text___vLbBO { font-weight: 600; grid-column-start: 2; padding: 0 10px 3px; } .styles__twoFactorParent___1onFP.styles__recoveryCodeOnly___m32fN { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__subTitleLink___25C1x { color: #007bff; text-decoration: none; cursor: pointer } .styles__subTitleLink___25C1x:hover { color: #066da5; } .styles__link___1WoXB { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; color: #6bc3f3; font-weight: 600; font-size: 14px; text-decoration: none; margin: 20px 0; } .styles__cursor___1fUAc { cursor: pointer; } .styles__tab___Ja-_A { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 30px 0 30px 2px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media (max-width: 600px) { .styles__twoFactorParent___1onFP .styles__content___Zxb57 { max-width: 400px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__title___LAPb5 { max-width: 400px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk { max-width: 400px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subsequentSteps___3p4sg { max-width: 400px; padding: 0 30px; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subsequentSteps___3p4sg .styles__instruction___3_0yq .styles__command___1994B { max-width: 250px; } } .styles__typeCodePlan___2hZqD { font-family: 'Open Sans', sans-serif; font-size: 14px; margin-right: 19px; padding-bottom: 10px; border: none; outline: none; cursor: pointer; color: #27343b } .styles__typeCodePlan___2hZqD:hover { border: none; outline: none; } .styles__typeCodePlan___2hZqD.styles__typeSelected___1hTGb { border-bottom: 2px solid #6bc3f3; padding-bottom: 8px; font-weight: 600; } .styles__text___vLbBO { font-size: 14px; } .styles__warningBox___3-kSY { margin-top: 30px; width: 700px; height: 115px; background: #fafafb; } .styles__warningBox___3-kSY .styles__yellowBar___3mTR6 { position: absolute; width: 4px; height: 115px; background: #f7d933; margin-right: 10px; } .styles__warningBox___3-kSY .styles__warningMessage___1XRbm { padding: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__warningBox___3-kSY .styles__warningMessage___1XRbm .styles__warningText___1Ff-v { margin-left: 20px; width: 450px; } .styles__subTitleAccessToken___2gCSc { margin: 12px 0 20px; max-width: 470px; } .styles__subTitleAccessToken___2gCSc button { margin: 0 !important; } .styles__warnUser___28hwF { max-width: 700px; margin: 0 24px; border-top: 8px solid #e12b0c } .styles__warnUser___28hwF.styles__yellowWarning___A4C1D { border-top: 8px solid #f7d933; } .styles__warnUser___28hwF .styles__header___1WOs0 { font-size: 22px; font-weight: 600; margin-bottom: 10px; } .styles__warnUser___28hwF .styles__text___vLbBO { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 40px 0; } .styles__warnUser___28hwF .styles__text___vLbBO.styles__recoveryCode___3iaWr { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .styles__warnUser___28hwF .styles__text___vLbBO > :first-child { margin-right: 20px; } .styles__warnUser___28hwF .styles__exitButtons___xpl3N { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media (max-width: 1200px) { .styles__navigator___2A6eu { margin-top: 16px; } .styles__twoFactorParent___1onFP .styles__stepNavigator___3ryV_ { display: none; } } @media (max-height: 600px) { .styles__navigator___2A6eu { margin-top: 16px; } } @media (max-width: 745px) { .styles__twoFactorParent___1onFP .styles__content___Zxb57 { width: 100%; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__instructionHeader___2ju28 { width: 100%; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__title___LAPb5 { width: 80%; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__subTitle___107Hk { width: 100%; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__text___vLbBO { max-width: 100%; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__formField___1w8_j { max-width: 100%; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y { width: 100%; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y textarea { min-width: 70%; max-width: 90%; overflow: hidden; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__contextSubText___3mhqB.styles__textCode___6lbip { padding: 0; width: 80%; word-wrap: break-word; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__twoFactorParent___1onFP .styles__content___Zxb57 .styles__contentBody___1Hx5y .styles__saveOptions___2LQtx button { width: 60px; } .styles__warningBox___3-kSY { margin: 30px 0; width: 100%; height: auto; } .styles__warningBox___3-kSY .styles__yellowBar___3mTR6 { display: none; } .styles__warningBox___3-kSY .styles__warningMessage___1XRbm { padding: 15px; } .styles__warningBox___3-kSY .styles__warningMessage___1XRbm .styles__warningText___1Ff-v { margin-left: 20px; width: 100%; } } .styles__maxWidth___29-TP { width: 100%; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___WETwq { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2tQU3 { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2tQU3 { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___ylTu6 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___ylTu6 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__parent___d0A-y { background: #ffffff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__wrapper___34aJ1 { width: 700px; } .styles__header___2eY7G { font-size: 22px; font-family: 'Open Sans', sans-serif; color: #27343b; margin-bottom: 12px; font-weight: 600; } .styles__text___HF_LK { color: #27343b; width: 470px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__subtext___24JSa { width: 335px; } .styles__images___3gPtB { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 48px 0; } .styles__images___3gPtB .styles__image___1IGty { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-right: 36px; } .styles__imageBackground___38V_H { background: #fafafb; border: 0.5px solid #e9ebee; width: 335px; height: 230px; margin-bottom: 30px; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__imagePlaceholder___19XIU { width: 80%; display: block; height: auto; } .styles__links___Fnib8 { color: #007bff; text-decoration: none } .styles__links___Fnib8:hover { color: #445d6e; } .styles__linebreak___3DFL9 { margin-top: 12px; } @media (max-width: 740px) { .styles__images___3gPtB { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 48px 0 0 0; } .styles__subtext___24JSa { margin: 20px 0; width: calc(100% - 20px); } .styles__text___HF_LK { width: calc(100% - 20px); } .styles__imageBackground___38V_H { margin-left: 0; margin-bottom: 0; width: calc(100% - 32px); height: calc(100% - 16px); } .styles__wrapper___34aJ1 { width: 100%; } } .styles__maxWidth___1DtSG { max-width: 100%; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2-Uni { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2krg5 { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2krg5 { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3gafq { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3gafq { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__parent___3ksA7 { margin-top: 30px; } .styles__title___1iJYG { font-size: 14px; color: #27343b; text-transform: uppercase; } .styles__stepBox___fA8xL { min-height: 200px; margin-top: 20px; } .styles__stepBox___fA8xL .styles__steps___1RJMl { display: grid; grid-template-columns: 40px 250px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .styles__stepBox___fA8xL .styles__steps___1RJMl .styles__currentStep___3ULeP { height: 22px; width: 22px; text-align: center; margin-right: 15px; background: #007bff; color: #ffffff; font-weight: 600; border: 1px solid #ffffff; border-radius: 50%; -webkit-transition: border 0.4s, background-color 0.4s; transition: border 0.4s, background-color 0.4s; } .styles__stepBox___fA8xL .styles__steps___1RJMl .styles__futureStep___1o-Kh { border: 1px solid #b7bbbe; color: #b7bbbe; height: 22px; width: 22px; text-align: center; margin-right: 15px; border-radius: 50%; } .styles__stepBox___fA8xL .styles__steps___1RJMl .styles__stepDescription___2gwUa { font-size: 14px; color: #b7bbbe; } .styles__stepBox___fA8xL .styles__steps___1RJMl .styles__stepDescriptionCurrent___1wDI6 { font-size: 14px; font-weight: 600; color: #007bff; } .styles__stepBox___fA8xL .styles__steps___1RJMl .styles__completed___1KPqn { height: 18px; width: 18px; margin: 0 2px; background: #11a661; border: 1px solid #11a661; border-radius: 50%; -webkit-transition: border 1s, background-color 1s; transition: border 1s, background-color 1s; } .styles__stepBox___fA8xL .styles__steps___1RJMl .styles__completed___1KPqn svg { display: block; margin: 4px; } @media only screen and (max-width: 800px) { .styles__parent___3ksA7 { display: none; } } .styles__italicize___9uGzk { font-style: italic; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1wCCf { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___-zFes { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___-zFes { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___gD6d_ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___gD6d_ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__breadcrumbs___3YifC { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__breadcrumb___6kv6E { position: relative; color: rgba(37, 67, 86, .7); padding: 11px 11px 11px 22px; } .styles__breadcrumbLink___NJ94S { text-decoration: none } .styles__breadcrumbLink___NJ94S:hover { color: #2496ed; } /* First breadcrumb does not need as much left padding */ .styles__breadcrumb___6kv6E:first-child { padding: 11px 5.5px 11px 11px; } .styles__breadcrumb___6kv6E:last-child { color: #2496ed; } /* Arrow background */ .styles__breadcrumb___6kv6E::after { content: ' '; display: block; width: 0; height: 0; border-top: 21px solid transparent; border-bottom: 21px solid transparent; border-left: 10px solid white; position: absolute; top: 50%; margin-top: -21px; left: 100%; z-index: 3; } /* Arrow border */ .styles__breadcrumb___6kv6E::before { content: ' '; display: block; width: 0; height: 0; border-top: 21px solid transparent; border-bottom: 21px solid transparent; border-left: 10px solid rgba(187, 187, 187, .3); position: absolute; top: 50%; margin-top: -21px; margin-left: 1px; left: 100%; z-index: 3; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .utilities__wrapped___1Xpt6 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes utilities__fadein___3Y4Qv { from { opacity: 0; } to { opacity: 1; } } @keyframes utilities__fadein___3Y4Qv { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes utilities__load8___19xxG { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes utilities__load8___19xxG { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___167h5 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___C-8sR { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___C-8sR { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___yTJKR { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___yTJKR { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__container___Gjy1X { } .styles__contextNav___2av_F { height: 42px; background: white; border-bottom: 1px solid #e0e4e7; } .styles__breadcrumbs___2AXNW { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___sYdjI { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___jKhvM { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___jKhvM { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1-zxP { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1-zxP { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__wrapper___3QOs7 { max-width: 100%; margin: 12px 0; } .styles__cardContainer___3bKm6 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .styles__icon___24bmT { -ms-flex-negative: 0; flex-shrink: 0; } .styles__cardBody___1IISh { margin-left: 16px; } .styles__cardText___GKzBQ { font-size: 14px; line-height: 20px; color: #27343b; } .styles__cardLink___299SW { color: #254356; display: block; font-size: 12px; margin-top: 12px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2_eqh { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1qRoI { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1qRoI { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2ay9F { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2ay9F { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* stylelint-disable block-no-empty */ .dtab { text-transform: uppercase; } /* stylelint-enable */ /* vertical tab */ button.dvtab { text-align: left; text-transform: inherit; font-weight: normal; font-size: 14px; line-height: 44px; color: #27343b !important; border-bottom: none !important; border-left: 5px solid transparent !important; margin: 2px 0 } button.dvtab:hover { border: none !important; border-bottom: none !important; border-left: 5px solid transparent !important; background-color: rgba(107, 195, 243, 0.05098) !important; } /* vertical selected state */ button.styles__vselected___j6bFe { border-left: 5px solid #007bff !important } button.styles__vselected___j6bFe, button.styles__vselected___j6bFe:hover { border-left: 5px solid #007bff !important; background-color: rgba(107, 195, 243, 0.05098) !important; } /* We need to override default button styles */ .styles__tab___2xYWx.dbutton, .styles__tab___2xYWx.dbutton:hover { border: none; background: none; } .styles__addBorder___2DCcx.dbutton, .styles__addBorder___2DCcx.dbutton:hover { border-bottom: 2px solid; } .styles__noBorder___1wz2V.dbutton, .styles__noBorder___1wz2V.dbutton:hover { border-bottom: 2px solid transparent; } .styles__tab___2xYWx { line-height: 44px; min-width: 100px; margin: 0; padding-left: 24px; padding-right: 12px; border-radius: 0; color: #c0c9ce; cursor: pointer } .styles__tab___2xYWx:hover { color: #8f9ea8; } .styles__tab___2xYWx.styles__selected___2xzLj, .styles__tab___2xYWx.styles__selected___2xzLj:hover { color: #2496ed; border-bottom-color: #2496ed; } .styles__icon___1-iHs.styles__tab___2xYWx.dbutton { border-bottom-color: transparent; padding: 0; min-width: auto; width: 60px; } .styles__icon___1-iHs.styles__tab___2xYWx .dicon { fill: #a3ddfc; } .styles__icon___1-iHs.styles__tab___2xYWx.styles__selected___2xzLj .dicon { fill: #2496ed; } .styles__tabLabelNew___2rwMz { font-size: 12px; font-weight: 700; line-height: 18px; color: #ffffff; padding: 0 4px; margin: 1px; background-color: #0162cc; border-radius: 4px; display: inline-block; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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: #2496ed; } /* 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 #2496ed !important; } /* vertical selected state */ .styles__vselected___I8P3c, .styles__vselected___I8P3c:hover { border-left: 4px solid #2496ed !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: #2496ed; border-bottom-color: #2496ed; } @media only screen and (max-height: 800px) { .styles__vtab___3Nxbc { line-height: 10px; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .hasLoadingStencil__wrapped___1KZrW { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes hasLoadingStencil__fadein___3CL-E { from { opacity: 0; } to { opacity: 1; } } @keyframes hasLoadingStencil__fadein___3CL-E { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes hasLoadingStencil__load8___2is1S { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes hasLoadingStencil__load8___2is1S { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* items with this class will be rendered with a grey animated overlay, indicating loading in progress */ .hasLoadingStencil__hasLoadingStencil___2GtW_ { position: relative } .hasLoadingStencil__hasLoadingStencil___2GtW_::after { content: ''; display: block; position: absolute; top: 0; left: -4px; width: calc(100% + 8px); height: 100%;/* Prettier disagrees with stylelint, disable the latter here *//* stylelint-disable declaration-colon-newline-after */ background-image: linear-gradient( to right, #d7dade 0%, #d7dade 1250px, #f2f3f5 1400px, #d7dade 1550px, #d7dade 100% );/* stylelint-enable declaration-colon-newline-after */ background-size: 2500px; border-radius: 2px; -webkit-animation-name: hasLoadingStencil__animateStencil___RoLg4; animation-name: hasLoadingStencil__animateStencil___RoLg4; -webkit-animation-duration: 2.08333s; animation-duration: 2.08333s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: normal; animation-direction: normal; } @-webkit-keyframes hasLoadingStencil__animateStencil___RoLg4 { 0% { background-position-x: 0; } 100% { background-position-x: 2500px; } } @keyframes hasLoadingStencil__animateStencil___RoLg4 { 0% { background-position-x: 0; } 100% { background-position-x: 2500px; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .style__wrapped___1pHog { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes style__fadein___9yIyX { from { opacity: 0; } to { opacity: 1; } } @keyframes style__fadein___9yIyX { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes style__load8___36Pfl { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes style__load8___36Pfl { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .style__container___u0Lrz { 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; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .style__header___yDXeN { font-weight: 600; font-size: 24px; margin-bottom: 12px; color: #26323f; } .style__description___3AZ5_ { font-weight: 400; font-size: 16px; color: #26323f; margin-bottom: 20px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2jCnJ { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2pS-W { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2pS-W { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___19Ra0 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___19Ra0 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__progress___FtPjd { position: relative; height: 13px; background-color: #e9ebee; border-radius: 4px; } .styles__progress___FtPjd .styles__bg___300oY { content: ' '; height: 13px; border-radius: 4px; position: absolute; top: 0; left: 0; z-index: 999; background: -webkit-gradient(linear, left top, left bottom, color-stop(53.65%, #54d1b0), to(#43b899)); background: linear-gradient(180deg, #54d1b0 53.65%, #43b899 100%); } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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-top: 12px; } .styles__paymentMethodsLink___32gmP { color: #2496ed; font-weight: 600; } .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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3Stnz { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___197Bv { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___197Bv { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___4hOmD { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___4hOmD { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__notificationBanner___2fIAl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #e9f9f5; padding: 18px 24px; } .styles__notificationBanner___2fIAl .styles__notificationMessage___3yDtw { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; color: #094539; font-weight: 600; font-size: 14px; line-height: 21px; max-width: 595px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 30px; } .styles__notificationBanner___2fIAl .styles__notificationMessage___3yDtw .styles__icon___2ZB7a { min-width: 20px; width: 20px; height: 20px; margin-right: 24px; fill: #094539; } .styles__notificationBanner___2fIAl .styles__notificationMessage___3yDtw .styles__icon___2ZB7a svg { height: 100%; width: 100%; } .styles__notificationBanner___2fIAl .styles__buttonWrapper___UdGWZ button { min-height: 30px; line-height: 30px; padding: 0 16px; margin: 0; border: none; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3pY3U { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___28u7A { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___28u7A { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3wSo3 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3wSo3 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__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__changePlanButton___-05Jq button { min-height: 30px; line-height: 30px; padding: 0 16px; margin: 0; border: none; } .styles__planFeatures___274Cy { margin-bottom: 27px; font-size: 18px; line-height: 25px; min-height: 60px; } .styles__planFeatures___274Cy .styles__planFeature___39kc3 { margin-bottom: 8px; color: #26323f; } .styles__usage___3vX-F { width: 65%; font-size: 18px; line-height: 25px; } .styles__usage___3vX-F .styles__usageType___1NOXF { margin: 25px 0 8px; color: #26323f; } .styles__usage___3vX-F .styles__progressWrapper___2ksjC { position: relative; } .styles__usage___3vX-F .styles__progressWrapper___2ksjC .styles__usageBar___2TYf8 { margin: 8px 0; } .styles__usage___3vX-F .styles__progressWrapper___2ksjC .styles__viewMembers___1T6Cg { position: absolute; top: -2px; right: -120px; } .styles__usage___3vX-F .styles__usageDetails___rWwOK { color: #43b899; } .styles__subscriptionPrice___3Ab9W { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 18px; font-weight: 600; line-height: 25px; color: #26323f; margin-top: 25px; } .styles__planDetails___3vT8J { margin-bottom: 12px; } .styles__exp___1hHI6 { font-size: 14px; line-height: 21px; color: #5a6672; margin: 0 0 2px; } .styles__extraSeats___Vyvbr { font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__price___3Cj_R { font-weight: 600; } .styles__price___3Cj_R .styles__asterisk___14xY8 { font-size: 16px; vertical-align: text-bottom; } .styles__actions___2ygGz { margin-top: 10px; color: #768491; } .styles__capitalize___3G5c6 { text-transform: capitalize; } .styles__planUpdateInfo___zHCji { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 15px; background-color: #eee6fc; padding: 18px 24px; } .styles__planUpdateInfo___zHCji .styles__updateMessage___3ooIr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; color: #4e2d8f; font-weight: 600; font-size: 14px; line-height: 21px; max-width: 460px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__planUpdateInfo___zHCji .styles__updateMessage___3ooIr .styles__icon___3eDbq { margin-right: 24px; fill: #6243a3; display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__total___2kzIn { text-align: right; } .styles__total___2kzIn .styles__totalPrice___35usj { font-size: 22px; line-height: 33px; color: #5a6774; font-weight: 600; } .styles__total___2kzIn .styles__totalPrice___35usj span { color: #26323f; margin-left: 10px; } .styles__total___2kzIn .styles__nextPayment___24zPV { font-size: 18px; line-height: 1.5; color: #5a6774; font-weight: 600; margin-bottom: 4px; } .styles__total___2kzIn .styles__nextPayment___24zPV span { color: #26323f; } .styles__specialPlanInfo___1MjaL { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 15px; background-color: #e9f9f5; padding: 18px 24px; } .styles__specialPlanInfo___1MjaL .styles__addSeatsMessage___2jocD { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; color: #094539; font-weight: 600; font-size: 14px; line-height: 21px; max-width: 595px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__specialPlanInfo___1MjaL .styles__addSeatsMessage___2jocD .styles__icon___3eDbq { margin-right: 24px; fill: #094539; display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__link___3RP30 { font-size: 14px; line-height: 18px; font-weight: 600; color: #0073ec; cursor: pointer; text-decoration: none } .styles__link___3RP30:hover { text-decoration: underline; } .styles__usageTitle___35fsA { font-size: 18px; font-weight: 600; color: #26323f; margin: 25px 0 10px; } .styles__viewTokens___1z-H4 { position: absolute; top: -2px; right: -110px } .styles__viewTokens___1z-H4.styles__unlimited___6ARlH { top: 5px; right: 215px; } .styles__billingFooter___gyx9A { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 10px 28px; } .styles__billingFooter___gyx9A .styles__footnote___3TgRo { font-size: 13px; line-height: 28px; } .styles__billingNotificationWrapper___2Z-Z6 { margin-top: 15px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3SRrj { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1QzOh { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1QzOh { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___UAalt { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___UAalt { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__container___3Zwyd { background: #d9ebfa; border-color: #b8deff; display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__container___3Zwyd a { font-weight: 600; color: #007bff; cursor: pointer; text-decoration: underline; } .styles__rocketEmoji___-MNrQ { -ms-flex-item-align: center; align-self: center; font-size: 48px; font-size: 3rem; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 28px; /* matches Card's padding */ } .styles__text___2kyfz { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; color: #26323f; } .styles__promoTitle___3F_jy { font-weight: 600; font-size: 18px; line-height: 30px; margin-bottom: 4px; } .styles__promoBody___38OGj { font-size: 14px; line-height: 1.5; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .PlanPromoIfAvailable__wrapped___gZOta { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes PlanPromoIfAvailable__fadein___2k341 { from { opacity: 0; } to { opacity: 1; } } @keyframes PlanPromoIfAvailable__fadein___2k341 { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes PlanPromoIfAvailable__load8___37c6s { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes PlanPromoIfAvailable__load8___37c6s { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .PlanPromoIfAvailable__planName___2SXRk { text-transform: capitalize; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__table___3agUw { margin-bottom: 32px; } .styles__table___3agUw .styles__row___1Y39e { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 64px; border-bottom: 1px solid #e7e8e9; padding: 0 20px; line-height: 20px; } .styles__table___3agUw .styles__row___1Y39e > div { padding-right: 8px; } .styles__table___3agUw .styles__row___1Y39e div:nth-of-type(1) { -webkit-box-flex: 0; -ms-flex: 0 0 15%; flex: 0 0 15%; } .styles__table___3agUw .styles__row___1Y39e div:nth-of-type(2) { -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; } .styles__table___3agUw .styles__row___1Y39e div:nth-of-type(3) { -webkit-box-flex: 0; -ms-flex: 0 0 15%; flex: 0 0 15%; } .styles__table___3agUw .styles__row___1Y39e div:nth-of-type(4) { -webkit-box-flex: 0; -ms-flex: 0 0 13%; flex: 0 0 13%; } .styles__table___3agUw .styles__row___1Y39e div:nth-of-type(5) { -webkit-box-flex: 0; -ms-flex: 0 0 17%; flex: 0 0 17%; text-align: right; } .styles__table___3agUw .styles__head___2RRLj { min-height: 50px; color: #8f9ea8; text-transform: uppercase; font-weight: 600; font-size: 14px; white-space: nowrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .styles__table___3agUw .styles__head___2RRLj > div { padding-bottom: 8px; } .styles__table___3agUw .styles__tableContentWrapper___2ARaz { position: relative; } .styles__table___3agUw .styles__tableContentWrapper___2ARaz .styles__tableContent___1KXpV { min-height: 150px; } .styles__table___3agUw .styles__tableContentWrapper___2ARaz .styles__tableContent___1KXpV .styles__invoicesListWrapper___2XzmN { margin-bottom: 32px; } .styles__table___3agUw .styles__tableContentWrapper___2ARaz .styles__tableContent___1KXpV .styles__emptyState___1me5D { padding: 50px 0; text-align: center; color: #47515e; } .styles__table___3agUw .styles__refreshAndDownloadAction___MU_WN { display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; fill: #8f9ea8; margin-right: 12px; } .styles__table___3agUw .styles__updateAndDownloadActionMenu___2xjwZ { min-width: 150px; vertical-align: middle; } .styles__table___3agUw .styles__downloadButton___153lP { min-width: 110px; } .styles__loading___36Mh_ { position: absolute; top: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.50196); height: 100%; padding: 50px 0; } .styles__iconWrapper___114Ir { display: inline-block; margin-top: 6px; margin-left: 6px; fill: #8f9ea8 } .styles__iconWrapper___114Ir.styles__action___3Kmd7 { cursor: pointer; } .styles__iconWrapper___114Ir.styles__action___3Kmd7:hover { fill: #007bff; } .styles__iconWrapper___114Ir.styles__success___1HYLF { fill: #54d1b0; } .styles__iconWrapper___114Ir.styles__failure___2xNJH { fill: #8c0607; } .styles__iconWrapper___114Ir .styles__fileLoader___1HaX5 { width: 24px; height: 24px; } .styles__modal___1XYxe { background: #ffffff; max-width: 750px; margin: 20px; } .styles__modal___1XYxe .styles__subtitle___34vyu { margin-bottom: 32px; } .styles__modal___1XYxe .styles__buttons___1sFWh { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 16px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___Mawog { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___tQCqX { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___tQCqX { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2AjVw { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2AjVw { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media only screen and (min-width: 601px) { .styles__row___2YoOt { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__row___2YoOt > * { lost-column-cycle: 2; } .styles__row___2YoOt > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__row___2YoOt > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__row___2YoOt > *:nth-child(1):last-child { margin-right: 0; } .styles__row___2YoOt > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__row___2YoOt > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__row___2YoOt > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__row___2YoOt > *:nth-child(2):last-child { margin-right: 0; } .styles__row___2YoOt > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__row___2YoOt { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__postalRow___2E5hi { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__postalRow___2E5hi > * { lost-column-cycle: 3; } .styles__postalRow___2E5hi > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.3% - 8px); max-width: calc(33.3% - 8px); width: calc(33.3% - 8px); } .styles__postalRow___2E5hi > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__postalRow___2E5hi > *:nth-child(1):last-child { margin-right: 0; } .styles__postalRow___2E5hi > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__postalRow___2E5hi > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.3% - 8px); max-width: calc(33.3% - 8px); width: calc(33.3% - 8px); } .styles__postalRow___2E5hi > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__postalRow___2E5hi > *:nth-child(2):last-child { margin-right: 0; } .styles__postalRow___2E5hi > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__postalRow___2E5hi > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.3% - 8px); max-width: calc(33.3% - 8px); width: calc(33.3% - 8px); } .styles__postalRow___2E5hi > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__postalRow___2E5hi > *:nth-child(3):last-child { margin-right: 0; } .styles__postalRow___2E5hi > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__postalRow___2E5hi { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .styles__error___3we6r { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; height: 16px; color: #e12b0c; margin: 0 40px; } .styles__select___kHB3_ { margin-bottom: 12px; } @media only screen and (max-width: 600px) { .styles__row___2YoOt, .styles__postalRow___2E5hi { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1hPDL { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1yyXN { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1yyXN { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3XXIJ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3XXIJ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media only screen and (min-width: 601px) { .styles__row___3sz4A { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__row___3sz4A > * { lost-column-cycle: 2; } .styles__row___3sz4A > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__row___3sz4A > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__row___3sz4A > *:nth-child(1):last-child { margin-right: 0; } .styles__row___3sz4A > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__row___3sz4A > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__row___3sz4A > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__row___3sz4A > *:nth-child(2):last-child { margin-right: 0; } .styles__row___3sz4A > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__row___3sz4A { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .styles__fullRow___1VOud { width: 100%; } .styles__title___lt_Yn { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; color: #445d6e; font-weight: bold; } .styles__submit___1DN0L { cursor: pointer; margin-left: 0; } .styles__successMessage___3t-aD { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 12px; color: #00cbca; } .styles__successMessage___3t-aD .styles__successIcon___20n1V { height: 18px; width: 18px; vertical-align: bottom; margin-right: 4px; } .styles__updateError___3g00s { margin-bottom: 20px; } @media only screen and (max-width: 600px) { .styles__row___3sz4A { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___26CIr { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___q0DN6 { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___q0DN6 { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___B6r_a { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___B6r_a { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__icon___-_xEN { margin-right: 12px; } .styles__content___txUvx { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1AjV5 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___IDRV_ { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___IDRV_ { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3A4ep { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3A4ep { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__expiration___1uPcB .styles__title___pzNOK { margin-top: -22px; padding: 4px; color: #8f9ea8; } .styles__expiration___1uPcB .styles__dates___2ldkU { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__expiration___1uPcB .styles__dates___2ldkU > * { lost-column-cycle: 2; } .styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(1):last-child { margin-right: 0; } .styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(2):last-child { margin-right: 0; } .styles__expiration___1uPcB .styles__dates___2ldkU > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__expiration___1uPcB .styles__dates___2ldkU { margin-bottom: 8px; } .styles__expirationErr___1kLax > div { border-color: #e12b0c !important; } .styles__dateErr___1_DFF { color: #e12b0c; font-size: 12px; margin: 0 4px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1LIKo { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___W-6ox { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___W-6ox { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1fNli { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1fNli { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__form___3RqCj { padding: 12px; } @media only screen and (max-width: 600px) { .styles__row___2TiJd, .styles__cardRow___WnG58, .styles__postalRow___3faee, .styles__submitRow___1ijnF { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media only screen and (min-width: 601px) { .styles__row___2TiJd { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__row___2TiJd > * { lost-column-cycle: 2; } .styles__row___2TiJd > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__row___2TiJd > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__row___2TiJd > *:nth-child(1):last-child { margin-right: 0; } .styles__row___2TiJd > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__row___2TiJd > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__row___2TiJd > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__row___2TiJd > *:nth-child(2):last-child { margin-right: 0; } .styles__row___2TiJd > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cardRow___WnG58 { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__cardRow___WnG58 > * { lost-column-cycle: 3; } .styles__cardRow___WnG58 > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__cardRow___WnG58 > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__cardRow___WnG58 > *:nth-child(1):last-child { margin-right: 0; } .styles__cardRow___WnG58 > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cardRow___WnG58 > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(16.65% - 10px); max-width: calc(16.65% - 10px); width: calc(16.65% - 10px); } .styles__cardRow___WnG58 > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__cardRow___WnG58 > *:nth-child(2):last-child { margin-right: 0; } .styles__cardRow___WnG58 > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cardRow___WnG58 > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.3% - 8px); max-width: calc(33.3% - 8px); width: calc(33.3% - 8px); } .styles__cardRow___WnG58 > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__cardRow___WnG58 > *:nth-child(3):last-child { margin-right: 0; } .styles__cardRow___WnG58 > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__cardRow___WnG58 { margin-top: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__postalRow___3faee { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__postalRow___3faee > * { lost-column-cycle: 3; } .styles__postalRow___3faee > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(33.3% - 8px); max-width: calc(33.3% - 8px); width: calc(33.3% - 8px); } .styles__postalRow___3faee > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__postalRow___3faee > *:nth-child(1):last-child { margin-right: 0; } .styles__postalRow___3faee > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__postalRow___3faee > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(16.65% - 10px); max-width: calc(16.65% - 10px); width: calc(16.65% - 10px); } .styles__postalRow___3faee > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__postalRow___3faee > *:nth-child(2):last-child { margin-right: 0; } .styles__postalRow___3faee > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__postalRow___3faee > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__postalRow___3faee > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__postalRow___3faee > *:nth-child(3):last-child { margin-right: 0; } .styles__postalRow___3faee > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__postalRow___3faee { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } } .styles__title___35H6q { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; color: #445d6e; font-weight: bold; } .styles__error___1sRio { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; font-weight: bold; color: #e12b0c; } .styles__submit___15ZR5 { margin: 20px 20px 0 0; } .styles__warning___2X-13 { color: #e12b0c; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 16px; } .styles__warning___2X-13 .styles__icon___1Bzuj { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___29puO { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2wzc0 { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2wzc0 { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1J9dp { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1J9dp { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__title___20S5M { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; color: #445d6e; font-weight: bold; } .styles__updateCardRow___Fzw4j { margin-bottom: 16px; } .styles__paymentMethods___3fvOf { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 16px 0; } .styles__paymentMethod___2uUeJ { position: relative; margin-right: 16px; } .styles__card___1Osgb { min-width: 200px; height: 104px; } .styles__deletePaymentMethod___24lgA { position: absolute; top: 0; right: 6px; cursor: pointer; } .styles__option___2TqJJ { display: inline-block; text-decoration: underline; cursor: pointer; } .styles__options___3tGmE { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__prompt___32P44 { margin-bottom: 16px; } .styles__splitForms___1xQT6 { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__splitForms___1xQT6 > * { lost-column-cycle: 2; } .styles__splitForms___1xQT6 > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__splitForms___1xQT6 > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__splitForms___1xQT6 > *:nth-child(1):last-child { margin-right: 0; } .styles__splitForms___1xQT6 > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__splitForms___1xQT6 > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__splitForms___1xQT6 > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__splitForms___1xQT6 > *:nth-child(2):last-child { margin-right: 0; } .styles__splitForms___1xQT6 > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__splitForms___1xQT6 > div:first-child { border-right: 1px solid #c0c9ce; } .styles__submit___1fUB_ { cursor: pointer; margin: 8px 16px; } .styles__error___Lqz6P { color: #e12b0c; padding-top: 12px; } .styles__noCreditCardsOnFile___JK0mH { padding-top: 0; padding-bottom: 16px; } .styles__subText___1XOMV { color: #27343b; } .styles__loading___321Au { height: 550px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3_8is { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___18O1v { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___18O1v { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___TgluH { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___TgluH { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__contactInformation___bNE9I { margin-top: 16px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___17p_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___8AlMy { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___8AlMy { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1ow-T { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1ow-T { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__ctaView___G-jZk { margin: 0 auto 140px; padding: 0 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 840px; } .styles__ctaView___G-jZk .styles__ctaImage___2kJjk { width: 420px; } .styles__ctaView___G-jZk .styles__ctaImage___2kJjk img { width: 100%; } .styles__ctaView___G-jZk .styles__ctaContent___33lW7 { padding: 50px 0 0 20px; max-width: 390px; } .styles__ctaView___G-jZk .styles__ctaContent___33lW7 .styles__ctaTitle___3V1sD { font-weight: 600; line-height: 1.5; margin-bottom: 12px; font-size: 20px; } .styles__ctaView___G-jZk .styles__ctaContent___33lW7 .styles__ctaDescription___1ilZE { margin-bottom: 35px; line-height: 1.5; } .styles__ctaView___G-jZk .styles__ctaContent___33lW7 button { margin: 0; height: 30px; line-height: 28px; } .styles__ctaView___G-jZk .styles__ctaContent___33lW7 .styles__link___2n7wt { font-size: 14px; font-weight: 700; line-height: 30px; color: #007bff; margin-left: 30px; text-decoration: none; white-space: nowrap } .styles__ctaView___G-jZk .styles__ctaContent___33lW7 .styles__link___2n7wt:hover { text-decoration: underline; } @media only screen and (max-width: 600px) { .styles__ctaView___G-jZk { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__icon___3XEjb { width: 38px; height: 38px; border-radius: 50%; background-color: #71cfff; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTUgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMi43NzI1NSA4Ljk5OTg1SDYuMjk5NzFDNi43OTc0MiA4Ljk5OTg1IDcuMTk5NzMgOS40MDMwNiA3LjE5OTczIDkuODk5ODdWMTQuNTM0OUwxMS42Mjc4IDguOTk5ODVIOC4wOTk3NEM3LjYwMjkzIDguOTk5ODUgNy4xOTk3MyA4LjU5NjY1IDcuMTk5NzMgOC4wOTk4NFYzLjQ2NTY3TDIuNzcyNTUgOC45OTk4NVpNNi4yOTk2OCAxOEM2LjIwMDY4IDE4IDYuMDk5ODggMTcuOTgzOCA2LjAwMTc3IDE3Ljk0ODdDNS42NDE3NyAxNy44MjI3IDUuMzk5NjYgMTcuNDgyNSA1LjM5OTY2IDE3LjFWMTAuNzk5OUgwLjg5OTU5MkMwLjU1Mzk4NyAxMC43OTk5IDAuMjM4OTgyIDEwLjYwMSAwLjA4ODY3OTIgMTAuMjg5NkMtMC4wNjA3MjMyIDkuOTc4MTcgLTAuMDE5MzIyNiA5LjYwOTE3IDAuMTk3NTgxIDkuMzM3MzZMNy4zOTc3IDAuMzM3MjE3QzcuNjM2MiAwLjAzOTMxMjMgOC4wMzc2MSAtMC4wNzU4ODk1IDguMzk3NjEgMC4wNTEwMTI1QzguNzU4NTIgMC4xNzcwMTUgOC45OTk3MiAwLjUxNzIyIDguOTk5NzIgMC44OTk3MjZWNy4xOTk4M0gxMy40OTk4QzEzLjg0NjMgNy4xOTk4MyAxNC4xNjEzIDcuMzk4NzMgMTQuMzExNiA3LjcxMDE0QzE0LjQ2MSA4LjAyMTU0IDE0LjQxODcgOC4zOTE0NSAxNC4yMDI3IDguNjYyMzVMNy4wMDI1OSAxNy42NjI1QzYuODI4ODkgMTcuODgwMyA2LjU2Nzg4IDE4IDYuMjk5NjggMThaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-size: 18px 18px; background-repeat: no-repeat; background-position: center; } .styles__repoCreate___2HTux { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMy4xMzA0MyAxNC4wODdIMS41NjUyMlYxLjU2NTI1SDMuMTMwNDNWMTQuMDg3Wk0xMC4xNzM5IDE0LjA4N0g0LjY5NTY1VjEuNTY1MjJINy4wNDM0OFY4LjYwODdMOSA3LjA0MzQ4TDEwLjk1NjUgOC42MDg3VjEuNTY1MjJIMTIuNTIxN1YxMC4xNzM5SDE0LjA4N1YwLjc4MjYwOUMxNC4wODcgMC4zNTA2MDkgMTMuNzM2MyAwIDEzLjMwNDMgMEgwLjc4MjYwOUMwLjM1MDYwOSAwIDAgMC4zNTA2MDkgMCAwLjc4MjYwOVYxNC44Njk2QzAgMTUuMzAxNiAwLjM1MDYwOSAxNS42NTIyIDAuNzgyNjA5IDE1LjY1MjJIMTAuMTczOVYxNC4wODdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE4IDE0LjA4N0gxNS42NTIyVjExLjczOTFIMTQuMDg3VjE0LjA4N0gxMS43MzkxVjE1LjY1MjJIMTQuMDg3VjE4SDE1LjY1MjJWMTUuNjUyMkgxOFYxNC4wODdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-color: #54d1b0; } .styles__repoDelete___12pcl { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMy4wNzUwOCAxMy44Mzc5SDEuNTM3NTRWMS41Mzc1NEgzLjA3NTA4VjEzLjgzNzlaTTEwLjc2MjggMTMuODM3OUg0LjYxMjYzVjEuNTM3NTRINi45MTg5NFY4LjQ1NjQ4TDguODQwODYgNi45MTg5NEwxMC43NjI4IDguNDU2NDhWMS41Mzc1NEgxMi4zMDAzVjEwLjc2MjhIMTMuODM3OVYwLjc2ODc3MUMxMy44Mzc5IDAuMzQ0NDA5IDEzLjQ5MzUgMCAxMy4wNjkxIDBIMC43Njg3NzFDMC4zNDQ0MDkgMCAwIDAuMzQ0NDA5IDAgMC43Njg3NzFWMTQuNjA2NkMwIDE1LjAzMSAwLjM0NDQwOSAxNS4zNzU0IDAuNzY4NzcxIDE1LjM3NTRIMTAuNzYyOFYxMy44Mzc5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOCAxMy4zODczTDE2LjkxMjkgMTIuMzAwM0wxNS4xNTAxIDE0LjA2MzFMMTMuMzg3MyAxMi4zMDAzTDEyLjMwMDMgMTMuMzg3M0wxNC4wNjMxIDE1LjE1MDFMMTIuMzAwMyAxNi45MTI5TDEzLjM4NzMgMThMMTUuMTUwMSAxNi4yMzcyTDE2LjkxMjkgMThMMTggMTYuOTEyOUwxNi4yMzcyIDE1LjE1MDFMMTggMTMuMzg3M1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=); background-color: #ee635f; } .styles__repoImagePush___3Vw9Y { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS41MDAwNiAxNy4xQzUuMzA5NjEgMTcuMSAxLjkwMDA1IDEzLjY5MDUgMS45MDAwNSA5LjUwMDAyQzEuOTAwMDUgNS4zMDk1NyA1LjMwOTYxIDEuOTAwMDIgOS41MDAwNiAxLjkwMDAyQzEzLjY5MDUgMS45MDAwMiAxNy4xMDAxIDUuMzA5NTcgMTcuMTAwMSA5LjUwMDAyQzE3LjEwMDEgMTMuNjkwNSAxMy42OTA1IDE3LjEgOS41MDAwNiAxNy4xWk05LjUgMEM0LjI2MTcgMCAwIDQuMjYxNyAwIDkuNUMwIDE0LjczODMgNC4yNjE3IDE5IDkuNSAxOUMxNC43MzgzIDE5IDE5IDE0LjczODMgMTkgOS41QzE5IDQuMjYxNyAxNC43MzgzIDAgOS41IDBaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuNzUgOC4yNzE2NEw2LjA5MzMgOS42MTQ5NEw4LjI3MTY1IDcuNDM2NTlWMTUuNTkzM0gxMC4xNzE2VjcuNDM2NTlMMTIuMzUgOS42MTQ5NEwxMy42OTMzIDguMjcxNjRMOS4yMjE2NSAzLjc5OTk5TDQuNzUgOC4yNzE2NFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=); background-color: #71cfff; } .styles__repoTagPush___k9iHQ { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTMuMjcwOCA1LjU5Mjg3TDUuODk4MjkgMTIuOTY1NEwxLjc4IDguODQ3MUw5LjE1MjUyIDEuNDc0NThIMTMuMjcwOFY1LjU5Mjg3Wk0xNC43NDUyIDUuODk4MDFWMC43MzcyNTJDMTQuNzQ1MiAwLjMzMDI4OSAxNC40MTQ5IDAgMTQuMDA4IDBIOC44NDcyQzguNjUxODMgMCA4LjQ2MzgzIDAuMDc4MTQ4NyA4LjMyNTk3IDAuMjE2MDE1TDAuMjE2MTk5IDguMzI1NzhDLTAuMDcyMDY2NCA4LjYxNDA1IC0wLjA3MjA2NjQgOS4wNzk5OSAwLjIxNjE5OSA5LjM2ODI2TDUuMzc2OTYgMTQuNTI5QzUuNTIwNzMgMTQuNjcyOCA1LjcwOTQ2IDE0Ljc0NSA1Ljg5ODIgMTQuNzQ1QzYuMDg2OTMgMTQuNzQ1IDYuMjc1NjcgMTQuNjcyOCA2LjQxOTQzIDE0LjUyOUwxNC41MjkyIDYuNDE5MjVDMTQuNjY3OCA2LjI4MTM4IDE0Ljc0NTIgNi4wOTMzOCAxNC43NDUyIDUuODk4MDFaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjA1ODcgNS4xNjA3N0MxMS44NzI3IDUuMTYwNzcgMTIuNTMzMiA0LjUwMDE5IDEyLjUzMzIgMy42ODYyNkMxMi41MzMyIDIuODcxNiAxMS44NzI3IDIuMjExNzYgMTEuMDU4NyAyLjIxMTc2QzEwLjI0NDEgMi4yMTE3NiA5LjU4NDIzIDIuODcxNiA5LjU4NDIzIDMuNjg2MjZDOS41ODQyMyA0LjUwMDE5IDEwLjI0NDEgNS4xNjA3NyAxMS4wNTg3IDUuMTYwNzdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3LjI2MTkgMTQuNTI5MUwxMy43OTE3IDExLjA1ODhMMTAuMzIxNCAxNC41MjkxTDExLjM2MzkgMTUuNTcxNkwxMy4wNTQ0IDEzLjg4MVYxOC4wMDAxSDE0LjUyODlWMTMuODgxTDE2LjIxOTQgMTUuNTcxNkwxNy4yNjE5IDE0LjUyOTFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-color: #54d1b0; } .styles__repoTagDelete___2qcU4 { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTMuODM4MSA1LjgzMTg5TDYuMTUwNCAxMy41MTk2TDEuODU2MDUgOS4yMjUyNEw5LjU0Mzc2IDEuNTM3NTRIMTMuODM4MVY1LjgzMTg5Wk0xNS4zNzU2IDYuMTUwMTdWMC43Njg3NzFDMTUuMzc1NiAwLjM0NDQwOSAxNS4wMzEyIDAgMTQuNjA2OCAwSDkuMjI1NDRDOS4wMjE3MiAwIDguODI2NDUgMC4wODE0ODk3IDguNjgxOTIgMC4yMjUyNUwwLjIyNTQ0MiA4LjY4MTczQy0wLjA3NTE0NzMgOC45ODIzMiAtMC4wNzUxNDczIDkuNDY4MTggMC4yMjU0NDIgOS43Njg3N0w1LjYwNjg0IDE1LjE1MDJDNS43NTY3NSAxNS4zMDAxIDUuOTUzNTUgMTUuMzc1NCA2LjE1MDM2IDE1LjM3NTRDNi4zNDcxNiAxNS4zNzU0IDYuNTQzOTcgMTUuMzAwMSA2LjY5Mzg4IDE1LjE1MDJMMTUuMTUwNCA2LjY5MzY5QzE1LjI5NDkgNi41NDk5MyAxNS4zNzU2IDYuMzUzODkgMTUuMzc1NiA2LjE1MDE3WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS41MzE2IDUuMzgxMzlDMTIuMzgwMyA1LjM4MTM5IDEzLjA2OTEgNC42OTE4IDEzLjA2OTEgMy44NDM4NUMxMy4wNjkxIDIuOTk0MzUgMTIuMzgwMyAyLjMwNjMgMTEuNTMxNiAyLjMwNjNDMTAuNjgxMyAyLjMwNjMgOS45OTQwMiAyLjk5NDM1IDkuOTk0MDIgMy44NDM4NUM5Ljk5NDAyIDQuNjkxOCAxMC42ODEzIDUuMzgxMzkgMTEuNTMxNiA1LjM4MTM5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOCAxMy4zODc0TDE2LjkxMjkgMTIuMzAwM0wxNS4xNTAxIDE0LjA2MzFMMTMuMzg3MyAxMi4zMDAzTDEyLjMwMDMgMTMuMzg3NEwxNC4wNjMxIDE1LjE1MDJMMTIuMzAwMyAxNi45MTI5TDEzLjM4NzMgMThMMTUuMTUwMSAxNi4yMzcyTDE2LjkxMjkgMThMMTggMTYuOTEyOUwxNi4yMzcyIDE1LjE1MDJMMTggMTMuMzg3NFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=); background-color: #ee635f; } .styles__repoChangePrivacyPrivate___27Y1P { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS45MDAwNSAxNy4xVjEwLjQ1SDExLjQwMDFMMTEuNDAyIDE3LjFIMS45MDAwNVpNMy44MDAxMSA0Ljc1MDA1QzMuODAwMTEgMy4xNzg3NSA1LjA3ODgxIDEuOTAwMDUgNi42NTAxMSAxLjkwMDA1QzguMjIxNDEgMS45MDAwNSA5LjUwMDExIDMuMTc4NzUgOS41MDAxMSA0Ljc1MDA1VjguNTUwMDVIMy44MDAxMVY0Ljc1MDA1Wk0xMS40IDguNTVWNC43NUMxMS40IDIuMTMwODUgOS4yNjkxNSAwIDYuNjUgMEM0LjAzMDg1IDAgMS45IDIuMTMwODUgMS45IDQuNzVWOC41NUMwLjg1MjE1IDguNTUgMCA5LjQwMTIgMCAxMC40NVYxNy4xQzAgMTguMTQ3OSAwLjg1MjE1IDE5IDEuOSAxOUgxMS40QzEyLjQ0NzkgMTkgMTMuMyAxOC4xNDc5IDEzLjMgMTcuMVYxMC40NUMxMy4zIDkuNDAxMiAxMi40NDc5IDguNTUgMTEuNCA4LjU1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==); background-color: #6243a3; } .styles__repoChangePrivacyPublic___FMCPf { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS45MDAwNSAxNy4wOTk5VjEwLjQ0OTlIMTEuNDAwMUwxMS40MDIgMTcuMDk5OUgxLjkwMDA1Wk0xMS40IDguNTVIMy44VjQuNzVDMy44IDMuMTc4NyA1LjA3ODcgMS45IDYuNjUgMS45QzguMjIxMyAxLjkgOS41IDMuMTc4NyA5LjUgNC43NVY1LjdIMTEuNFY0Ljc1QzExLjQgMi4xMzA4NSA5LjI2OTE1IDAgNi42NSAwQzQuMDMwODUgMCAxLjkgMi4xMzA4NSAxLjkgNC43NVY4LjU1QzAuODUyMTUgOC41NSAwIDkuNDAxMiAwIDEwLjQ1VjE3LjFDMCAxOC4xNDc5IDAuODUyMTUgMTkgMS45IDE5SDExLjRDMTIuNDQ3OSAxOSAxMy4zIDE4LjE0NzkgMTMuMyAxNy4xVjEwLjQ1QzEzLjMgOS40MDEyIDEyLjQ0NzkgOC41NSAxMS40IDguNTVaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTc1IDEyLjM0OTlDNS4zODg0IDEyLjM0OTkgNC43NSAxMi45ODgzIDQuNzUgMTMuNzc0OUM0Ljc1IDE0LjU2MTUgNS4zODg0IDE1LjE5OTkgNi4xNzUgMTUuMTk5OUM2Ljk2MTYgMTUuMTk5OSA3LjYgMTQuNTYxNSA3LjYgMTMuNzc0OUM3LjYgMTIuOTg4MyA2Ljk2MTYgMTIuMzQ5OSA2LjE3NSAxMi4zNDk5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==); background-color: #987ece; } .styles__orgCreate___XW_ce { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuMyAxNi4yQzE0LjgwNDEgMTYuMiAxNC40IDE1Ljc5NTkgMTQuNCAxNS4zQzE0LjQgMTQuODA0MSAxNC44MDQxIDE0LjQgMTUuMyAxNC40QzE1Ljc5NTkgMTQuNCAxNi4yIDE0LjgwNDEgMTYuMiAxNS4zQzE2LjIgMTUuNzk1OSAxNS43OTU5IDE2LjIgMTUuMyAxNi4yWk05IDE2LjJDOC41MDQxIDE2LjIgOC4xIDE1Ljc5NTkgOC4xIDE1LjNDOC4xIDE0LjgwNDEgOC41MDQxIDE0LjQgOSAxNC40QzkuNDk1OSAxNC40IDkuOSAxNC44MDQxIDkuOSAxNS4zQzkuOSAxNS43OTU5IDkuNDk1OSAxNi4yIDkgMTYuMlpNMi43IDE2LjJDMi4yMDQxIDE2LjIgMS44IDE1Ljc5NTkgMS44IDE1LjNDMS44IDE0LjgwNDEgMi4yMDQxIDE0LjQgMi43IDE0LjRDMy4xOTU5IDE0LjQgMy42IDE0LjgwNDEgMy42IDE1LjNDMy42IDE1Ljc5NTkgMy4xOTU5IDE2LjIgMi43IDE2LjJaTTcuNjUgMy4xNUM3LjY1IDIuNDA1NyA4LjI1NTcgMS44IDkgMS44QzkuNzQ0MyAxLjggMTAuMzUgMi40MDU3IDEwLjM1IDMuMTVDMTAuMzUgMy44OTQzIDkuNzQ0MyA0LjUgOSA0LjVDOC4yNTU3IDQuNSA3LjY1IDMuODk0MyA3LjY1IDMuMTVaTTE2LjIgMTIuNzY1NlYxMC44QzE2LjIgOS4zMTE0IDE0Ljk4ODYgOC4xIDEzLjUgOC4xSDkuOVY2LjE1MzNDMTEuMTk2IDUuNzYyNyAxMi4xNSA0LjU3MiAxMi4xNSAzLjE1QzEyLjE1IDEuNDEzIDEwLjczNyAwIDkgMEM3LjI2MyAwIDUuODUgMS40MTMgNS44NSAzLjE1QzUuODUgNC41NzIgNi44MDQgNS43NjI3IDguMSA2LjE1MzNWOC4xSDQuNUMzLjAxMTQgOC4xIDEuOCA5LjMxMTQgMS44IDEwLjhWMTIuNzY1NkMwLjc1NDIgMTMuMTM5MSAwIDE0LjEyODIgMCAxNS4zQzAgMTYuNzg4NiAxLjIxMTQgMTggMi43IDE4QzQuMTg4NiAxOCA1LjQgMTYuNzg4NiA1LjQgMTUuM0M1LjQgMTQuMTI4MiA0LjY0NTggMTMuMTM5MSAzLjYgMTIuNzY1NlYxMC44QzMuNiAxMC4zMDQxIDQuMDA0MSA5LjkgNC41IDkuOUg4LjFWMTIuNzY1NkM3LjA1NDIgMTMuMTM5MSA2LjMgMTQuMTI4MiA2LjMgMTUuM0M2LjMgMTYuNzg4NiA3LjUxMTQgMTggOSAxOEMxMC40ODg2IDE4IDExLjcgMTYuNzg4NiAxMS43IDE1LjNDMTEuNyAxNC4xMjgyIDEwLjk0NTggMTMuMTM5MSA5LjkgMTIuNzY1NlY5LjlIMTMuNUMxMy45OTU5IDkuOSAxNC40IDEwLjMwNDEgMTQuNCAxMC44VjEyLjc2NTZDMTMuMzU0MiAxMy4xMzkxIDEyLjYgMTQuMTI4MiAxMi42IDE1LjNDMTIuNiAxNi43ODg2IDEzLjgxMTQgMTggMTUuMyAxOEMxNi43ODg2IDE4IDE4IDE2Ljc4ODYgMTggMTUuM0MxOCAxNC4xMjgyIDE3LjI0NTggMTMuMTM5MSAxNi4yIDEyLjc2NTZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-color: #54d1b0; } .styles__orgTeamCreate___2-meZ { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi44NTcxNSAxMi44NTcxSDYuMDAwMDFDNS41MjY4NyAxMi44NTcxIDUuMTQyODcgMTMuMjQxMSA1LjE0Mjg3IDEzLjcxNDNWMTYuMjg1N0gzLjQyODU4VjEzLjcxNDNDMy40Mjg1OCAxMy4yNDExIDMuMDQ0NTggMTIuODU3MSAyLjU3MTQ0IDEyLjg1NzFIMS43MTQyOVYxMkMxLjcxNDI5IDEwLjU4MjMgMi44NjgwMSA5LjQyODU3IDQuMjg1NzIgOS40Mjg1N0M1LjcwMzQ0IDkuNDI4NTcgNi44NTcxNSAxMC41ODIzIDYuODU3MTUgMTJWMTIuODU3MVpNNC4yODU3MyA0LjcxNDI4QzQuNzU4MDIgNC43MTQyOCA1LjE0Mjg3IDUuMDk5MTQgNS4xNDI4NyA1LjU3MTQyQzUuMTQyODcgNi4wNDM3MSA0Ljc1ODAyIDYuNDI4NTcgNC4yODU3MyA2LjQyODU3QzMuODEzNDUgNi40Mjg1NyAzLjQyODU5IDYuMDQzNzEgMy40Mjg1OSA1LjU3MTQyQzMuNDI4NTkgNS4wOTkxNCAzLjgxMzQ1IDQuNzE0MjggNC4yODU3MyA0LjcxNDI4Wk04LjU3MTQzIDEyQzguNTcxNDMgMTAuMDI0MyA3LjIxOTcxIDguMzczNDMgNS4zOTgyOSA3Ljg3ODg2QzYuMjU4IDcuNDYzMTQgNi44NTcxNCA2LjU4OTcxIDYuODU3MTQgNS41NzE0M0M2Ljg1NzE0IDQuMTUzNzEgNS43MDM0MyAzIDQuMjg1NzEgM0MyLjg2OCAzIDEuNzE0MjkgNC4xNTM3MSAxLjcxNDI5IDUuNTcxNDNDMS43MTQyOSA2LjU4OTcxIDIuMzEzNDMgNy40NjMxNCAzLjE3MzE0IDcuODc4ODZDMS4zNTE3MSA4LjM3MzQzIDAgMTAuMDI0MyAwIDEyVjEzLjcxNDNDMCAxNC4xODc0IDAuMzg0IDE0LjU3MTQgMC44NTcxNDMgMTQuNTcxNEgxLjcxNDI5VjE3LjE0MjlDMS43MTQyOSAxNy42MTYgMi4wOTgyOSAxOCAyLjU3MTQzIDE4SDZDNi40NzMxNCAxOCA2Ljg1NzE0IDE3LjYxNiA2Ljg1NzE0IDE3LjE0MjlWMTQuNTcxNEg3LjcxNDI5QzguMTg3NDMgMTQuNTcxNCA4LjU3MTQzIDE0LjE4NzQgOC41NzE0MyAxMy43MTQzVjEyWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC4yODU1IDE2LjI4NTdDMTAuMjg1NSAxNS4zMzk0IDExLjA1NDMgMTQuNTcxNCAxMS45OTk3IDE0LjU3MTRDMTIuOTQ1MiAxNC41NzE0IDEzLjcxNCAxNS4zMzk0IDEzLjcxNCAxNi4yODU3SDEwLjI4NTVaTTExLjk5OTggMTAuMjg1N0MxMi40NzIxIDEwLjI4NTcgMTIuODU2OSAxMC42NzA1IDEyLjg1NjkgMTEuMTQyOEMxMi44NTY5IDExLjYxNTEgMTIuNDcyMSAxMiAxMS45OTk4IDEyQzExLjUyNzUgMTIgMTEuMTQyNiAxMS42MTUxIDExLjE0MjYgMTEuMTQyOEMxMS4xNDI2IDEwLjY3MDUgMTEuNTI3NSAxMC4yODU3IDExLjk5OTggMTAuMjg1N1pNMTMuNTAzMyAxMy4yMTk3QzE0LjE0NyAxMi43NTE3IDE0LjU3MTMgMTEuOTk4MyAxNC41NzEzIDExLjE0MjhDMTQuNTcxMyA5LjcyNTEzIDEzLjQxNzYgOC41NzE0MSAxMS45OTk5IDguNTcxNDFDMTAuNTgyMSA4LjU3MTQxIDkuNDI4NDMgOS43MjUxMyA5LjQyODQzIDExLjE0MjhDOS40Mjg0MyAxMS45OTgzIDkuODUyNzIgMTIuNzUxNyAxMC40OTY0IDEzLjIxOTdDOS4zNjA3MiAxMy43Nzg2IDguNTcxMjkgMTQuOTM3NCA4LjU3MTI5IDE2LjI4NTdWMTcuMTQyOEM4LjU3MTI5IDE3LjYxNiA4Ljk1NTI5IDE4IDkuNDI4NDMgMThIMTQuNTcxM0MxNS4wNDQ0IDE4IDE1LjQyODQgMTcuNjE2IDE1LjQyODQgMTcuMTQyOFYxNi4yODU3QzE1LjQyODQgMTQuOTM3NCAxNC42MzkgMTMuNzc4NiAxMy41MDMzIDEzLjIxOTdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE4IDIuNTcxNDNIMTUuNDI4NVYwSDEzLjcxNDNWMi41NzE0M0gxMS4xNDI4VjQuMjg1NzFIMTMuNzE0M1Y2Ljg1NzE0SDE1LjQyODVWNC4yODU3MUgxOFYyLjU3MTQzWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==); background-color: #54d1b0; } .styles__orgTeamDelete___3jXL0 { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi42MzM4IDEzLjAyNDZINS44MDQ1N0M1LjM0Njg0IDEzLjAyNDYgNC45NzUzNSAxMy4zOTYxIDQuOTc1MzUgMTMuODUzOVYxNi4zNDE1SDMuMzE2OVYxMy44NTM5QzMuMzE2OSAxMy4zOTYxIDIuOTQ1NDEgMTMuMDI0NiAyLjQ4NzY3IDEzLjAyNDZIMS42NTg0NVYxMi4xOTU0QzEuNjU4NDUgMTAuODIzOSAyLjc3NDU4IDkuNzA3NzMgNC4xNDYxMiA5LjcwNzczQzUuNTE3NjYgOS43MDc3MyA2LjYzMzggMTAuODIzOSA2LjYzMzggMTIuMTk1NFYxMy4wMjQ2Wk00LjE0NjEyIDUuMTQ3QzQuNjAzMDIgNS4xNDcgNC45NzUzNSA1LjUxOTMzIDQuOTc1MzUgNS45NzYyM0M0Ljk3NTM1IDYuNDMzMTMgNC42MDMwMiA2LjgwNTQ1IDQuMTQ2MTIgNi44MDU0NUMzLjY4OTIyIDYuODA1NDUgMy4zMTY4OSA2LjQzMzEzIDMuMzE2ODkgNS45NzYyM0MzLjMxNjg5IDUuNTE5MzMgMy42ODkyMiA1LjE0NyA0LjE0NjEyIDUuMTQ3Wk04LjI5MjI2IDEyLjE5NTRDOC4yOTIyNiAxMC4yODQxIDYuOTg0NTcgOC42ODY5NyA1LjIyMjQ2IDguMjA4NTFDNi4wNTQxOCA3LjgwNjMzIDYuNjMzOCA2Ljk2MTM1IDYuNjMzOCA1Ljk3NjIzQzYuNjMzOCA0LjYwNDY5IDUuNTE3NjcgMy40ODg1NiA0LjE0NjEzIDMuNDg4NTZDMi43NzQ1OSAzLjQ4ODU2IDEuNjU4NDUgNC42MDQ2OSAxLjY1ODQ1IDUuOTc2MjNDMS42NTg0NSA2Ljk2MTM1IDIuMjM4MDggNy44MDYzMyAzLjA2OTc5IDguMjA4NTFDMS4zMDc2OSA4LjY4Njk3IDAgMTAuMjg0MSAwIDEyLjE5NTRWMTMuODUzOUMwIDE0LjMxMTYgMC4zNzE0OTMgMTQuNjgzMSAwLjgyOTIyNiAxNC42ODMxSDEuNjU4NDVWMTcuMTcwOEMxLjY1ODQ1IDE3LjYyODUgMi4wMjk5NCAxOCAyLjQ4NzY4IDE4SDUuODA0NThDNi4yNjIzMSAxOCA2LjYzMzggMTcuNjI4NSA2LjYzMzggMTcuMTcwOFYxNC42ODMxSDcuNDYzMDNDNy45MjA3NiAxNC42ODMxIDguMjkyMjYgMTQuMzExNiA4LjI5MjI2IDEzLjg1MzlWMTIuMTk1NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOS45NTA3NCAxNi4zNDE2QzkuOTUwNzQgMTUuNDI2MSAxMC42OTQ2IDE0LjY4MzEgMTEuNjA5MiAxNC42ODMxQzEyLjUyMzggMTQuNjgzMSAxMy4yNjc2IDE1LjQyNjEgMTMuMjY3NiAxNi4zNDE2SDkuOTUwNzRaTTExLjYwOTIgMTAuNTM3QzEyLjA2NjEgMTAuNTM3IDEyLjQzODQgMTAuOTA5MyAxMi40Mzg0IDExLjM2NjJDMTIuNDM4NCAxMS44MjMxIDEyLjA2NjEgMTIuMTk1NCAxMS42MDkyIDEyLjE5NTRDMTEuMTUyMyAxMi4xOTU0IDEwLjc4IDExLjgyMzEgMTAuNzggMTEuMzY2MkMxMC43OCAxMC45MDkzIDExLjE1MjMgMTAuNTM3IDExLjYwOTIgMTAuNTM3Wk0xMy4wNjM2IDEzLjM3NTRDMTMuNjg2MyAxMi45MjI3IDE0LjA5NjggMTIuMTkzOCAxNC4wOTY4IDExLjM2NjJDMTQuMDk2OCA5Ljk5NDY4IDEyLjk4MDcgOC44Nzg1NCAxMS42MDkxIDguODc4NTRDMTAuMjM3NiA4Ljg3ODU0IDkuMTIxNDYgOS45OTQ2OCA5LjEyMTQ2IDExLjM2NjJDOS4xMjE0NiAxMi4xOTM4IDkuNTMxOTMgMTIuOTIyNyAxMC4xNTQ3IDEzLjM3NTRDOS4wNTU5NSAxMy45MTYxIDguMjkyMjQgMTUuMDM3MiA4LjI5MjI0IDE2LjM0MTZWMTcuMTcwOEM4LjI5MjI0IDE3LjYyODUgOC42NjM3MyAxOCA5LjEyMTQ2IDE4SDE0LjA5NjhDMTQuNTU0NSAxOCAxNC45MjYgMTcuNjI4NSAxNC45MjYgMTcuMTcwOFYxNi4zNDE2QzE0LjkyNiAxNS4wMzcyIDE0LjE2MjMgMTMuOTE2MSAxMy4wNjM2IDEzLjM3NTRaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE3Ljk5OTkgMS4xNzI1MkwxNi44Mjc0IDBMMTQuOTI2IDEuOTAxNDFMMTMuMDI0NiAwTDExLjg1MjEgMS4xNzI1MkwxMy43NTM1IDMuMDczOTRMMTEuODUyMSA0Ljk3NTM1TDEzLjAyNDYgNi4xNDc4OEwxNC45MjYgNC4yNDY0NkwxNi44Mjc0IDYuMTQ3ODhMMTcuOTk5OSA0Ljk3NTM1TDE2LjA5ODUgMy4wNzM5NEwxNy45OTk5IDEuMTcyNTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-color: #ee635f; } .styles__orgMemberInvite___24OA5 { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi41NDU1NCA2LjU0NTY2QzUuNjQzMSA2LjU0NTY2IDQuOTA5MiA3LjI3ODc0IDQuOTA5MiA4LjE4MTk5QzQuOTA5MiA5LjA4NDQzIDUuNjQzMSA5LjgxODMzIDYuNTQ1NTQgOS44MTgzM0M3LjQ0Nzk3IDkuODE4MzMgOC4xODE4NyA5LjA4NDQzIDguMTgxODcgOC4xODE5OUM4LjE4MTg3IDcuMjc4NzQgNy40NDc5NyA2LjU0NTY2IDYuNTQ1NTQgNi41NDU2NlpNNi41NDU2MiAxMS40NTQ3QzQuNzQwNzQgMTEuNDU0NyAzLjI3Mjk1IDkuOTg2ODggMy4yNzI5NSA4LjE4MkMzLjI3Mjk1IDYuMzc3MTIgNC43NDA3NCA0LjkwOTMzIDYuNTQ1NjIgNC45MDkzM0M4LjM1MDQ5IDQuOTA5MzMgOS44MTgyOCA2LjM3NzEyIDkuODE4MjggOC4xODJDOS44MTgyOCA5Ljk4Njg4IDguMzUwNDkgMTEuNDU0NyA2LjU0NTYyIDExLjQ1NDdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEuNzY2MzcgMTYuMzYzN0gxMS4zMjVDMTAuODM1OCAxNC44ODQ0IDkuMDA2MzMgMTMuOTA5MiA2LjU0NTI4IDEzLjkwOTJDNC4wODQyNCAxMy45MDkyIDIuMjU1NjMgMTQuODg0NCAxLjc2NjM3IDE2LjM2MzdaTTEzLjA5MDcgMThIMFYxNy4xODE4QzAgMTQuMjkxMiAyLjY5MTc3IDEyLjI3MjggNi41NDUzNCAxMi4yNzI4QzEwLjM5OTcgMTIuMjcyOCAxMy4wOTA3IDE0LjI5MTIgMTMuMDkwNyAxNy4xODE4VjE4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNC43MjcyIDEuNzY4ODhMMTguMTg4IDAuMDM4NDUzOEMxOC4xMjU5IDAuMDIyOTA4NyAxOC4wNjYxIDAgMTcuOTk5OSAwSDExLjQ1NDVDMTEuMzg4MyAwIDExLjMyODUgMC4wMjI5MDg3IDExLjI2NjQgMC4wMzg0NTM4TDE0LjcyNzIgMS43Njg4OFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuMDAxNiAzLjAwMzczQzE0LjkxNTcgMy4wNDcwOSAxNC44MjA4IDMuMDY4MzYgMTQuNzI3NiAzLjA2ODM2QzE0LjYzMzUgMy4wNjgzNiAxNC41Mzk0IDMuMDQ3MDkgMTQuNDUyNiAzLjAwMzczTDEwLjYzNjcgMS4wOTU3NlY0LjkwOTI0QzEwLjYzNjcgNS4zNjE2OSAxMS4wMDI0IDUuNzI3NDEgMTEuNDU0OSA1LjcyNzQxSDE4LjAwMDJDMTguNDUxOCA1LjcyNzQxIDE4LjgxODQgNS4zNjE2OSAxOC44MTg0IDQuOTA5MjRWMS4wOTU3NkwxNS4wMDE2IDMuMDAzNzNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-color: #54d1b0; } .styles__orgMemberJoin___2ow-C { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTcgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMjMyOCAxNy4xNzU2QzEzLjc3MTUgMTcuMTc1NiAxMy4zOTU2IDE2Ljc5OTYgMTMuMzk1NiAxNi4zMzgzQzEzLjM5NTYgMTUuODc3IDEzLjc3MTUgMTUuNTAxMSAxNC4yMzI4IDE1LjUwMTFDMTQuNjk0MSAxNS41MDExIDE1LjA3IDE1Ljg3NyAxNS4wNyAxNi4zMzgzQzE1LjA3IDE2Ljc5OTYgMTQuNjk0MSAxNy4xNzU2IDE0LjIzMjggMTcuMTc1Nk04LjM3MjEgMTcuMTc1NkM3LjkxMDc5IDE3LjE3NTYgNy41MzQ4OSAxNi43OTk2IDcuNTM0ODkgMTYuMzM4M0M3LjUzNDg5IDE1Ljg3NyA3LjkxMDc5IDE1LjUwMTEgOC4zNzIxIDE1LjUwMTFDOC44MzM0IDE1LjUwMTEgOS4yMDkzMSAxNS44NzcgOS4yMDkzMSAxNi4zMzgzQzkuMjA5MzEgMTYuNzk5NiA4LjgzMzQgMTcuMTc1NiA4LjM3MjEgMTcuMTc1Nk0yLjUxMTgzIDE3LjE3NTZDMi4wNTA1MyAxNy4xNzU2IDEuNjc0NjIgMTYuNzk5NiAxLjY3NDYyIDE2LjMzODNDMS42NzQ2MiAxNS44NzcgMi4wNTA1MyAxNS41MDExIDIuNTExODMgMTUuNTAxMUMyLjk3MzEzIDE1LjUwMTEgMy4zNDkwNCAxNS44NzcgMy4zNDkwNCAxNi4zMzgzQzMuMzQ5MDQgMTYuNzk5NiAyLjk3MzEzIDE3LjE3NTYgMi41MTE4MyAxNy4xNzU2TTguMjUzMjYgNy4xMjkwNEg4LjQ5MTAzQzkuMjE4NTYgNy4xMjkwNCA5Ljg4ODMzIDcuNDQ2MzQgMTAuMzUxMyA3Ljk2NjI1SDYuMzkyOThDNi44NTU5NiA3LjQ0NjM0IDcuNTI1NzIgNy4xMjkwNCA4LjI1MzI2IDcuMTI5MDRNOC4zNzIxIDIuNTI0MzhDOC44MzM0IDIuNTI0MzggOS4yMDkzMSAyLjkwMDI5IDkuMjA5MzEgMy4zNjE1OUM5LjIwOTMxIDMuODIyOSA4LjgzMzQgNC4xOTg4IDguMzcyMSA0LjE5ODhDNy45MTA3OSA0LjE5ODggNy41MzQ4OSAzLjgyMjkgNy41MzQ4OSAzLjM2MTU5QzcuNTM0ODkgMi45MDAyOSA3LjkxMDc5IDIuNTI0MzggOC4zNzIxIDIuNTI0MzhNMTUuMDY5OCAxMy45ODE2VjExLjMxNTFIOS4yMDkzVjkuNjQwNjdIMTIuODAyNkwxMi41MzEzIDguNTkzMzJDMTIuMTQwNCA3LjA4Mzg0IDEwLjk1NDkgNS45NTk0NiA5LjQ5OTgxIDUuNTkzNkMxMC4zMTY5IDUuMTc4MzUgMTAuODgzNyA0LjMzOTQ2IDEwLjg4MzcgMy4zNjE2QzEwLjg4MzcgMS45NzY4NiA5Ljc1Njg0IDAuODQ5OTc2IDguMzcyMDkgMC44NDk5NzZDNi45ODczNSAwLjg0OTk3NiA1Ljg2MDQ2IDEuOTc2ODYgNS44NjA0NiAzLjM2MTZDNS44NjA0NiA0LjMzOTQ2IDYuNDI3MjYgNS4xNzgzNSA3LjI0NDM3IDUuNTkzNkM1Ljc4OTMgNS45NTk0NiA0LjYwMzgxIDcuMDgzODQgNC4yMTI4NCA4LjU5MzMyTDMuOTQxNTggOS42NDA2N0g3LjUzNDg4VjExLjMxNTFIMS42NzQ0MlYxMy45ODE2QzAuNzAxNTgxIDE0LjMyODIgMCAxNS4yNDgzIDAgMTYuMzM4M0MwIDE3LjcyMzEgMS4xMjY4OCAxOC44NSAyLjUxMTYzIDE4Ljg1QzMuODk2MzcgMTguODUgNS4wMjMyNiAxNy43MjMxIDUuMDIzMjYgMTYuMzM4M0M1LjAyMzI2IDE1LjI0ODMgNC4zMjE2NyAxNC4zMjgyIDMuMzQ4ODQgMTMuOTgxNlYxMi45ODk1SDcuNTM0ODhWMTMuOTgxNkM2LjU2MjA1IDE0LjMyODIgNS44NjA0NiAxNS4yNDgzIDUuODYwNDYgMTYuMzM4M0M1Ljg2MDQ2IDE3LjcyMzEgNi45ODczNSAxOC44NSA4LjM3MjA5IDE4Ljg1QzkuNzU2ODQgMTguODUgMTAuODgzNyAxNy43MjMxIDEwLjg4MzcgMTYuMzM4M0MxMC44ODM3IDE1LjI0ODMgMTAuMTgyMSAxNC4zMjgyIDkuMjA5MyAxMy45ODE2VjEyLjk4OTVIMTMuMzk1M1YxMy45ODE2QzEyLjQyMjUgMTQuMzI4MiAxMS43MjA5IDE1LjI0ODMgMTEuNzIwOSAxNi4zMzgzQzExLjcyMDkgMTcuNzIzMSAxMi44NDc4IDE4Ljg1IDE0LjIzMjYgMTguODVDMTUuNjE3MyAxOC44NSAxNi43NDQyIDE3LjcyMzEgMTYuNzQ0MiAxNi4zMzgzQzE2Ljc0NDIgMTUuMjQ4MyAxNi4wNDI2IDE0LjMyODIgMTUuMDY5OCAxMy45ODE2IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-color: #54d1b0; } .styles__orgMemberRemove___T7YFz { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTcgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMjMyOCAxNy4xNzU2QzEzLjc3MTUgMTcuMTc1NiAxMy4zOTU2IDE2Ljc5OTYgMTMuMzk1NiAxNi4zMzgzQzEzLjM5NTYgMTUuODc3IDEzLjc3MTUgMTUuNTAxMSAxNC4yMzI4IDE1LjUwMTFDMTQuNjk0MSAxNS41MDExIDE1LjA3IDE1Ljg3NyAxNS4wNyAxNi4zMzgzQzE1LjA3IDE2Ljc5OTYgMTQuNjk0MSAxNy4xNzU2IDE0LjIzMjggMTcuMTc1NlpNOC4zNzIxIDE3LjE3NTZDNy45MTA3OSAxNy4xNzU2IDcuNTM0ODkgMTYuNzk5NiA3LjUzNDg5IDE2LjMzODNDNy41MzQ4OSAxNS44NzcgNy45MTA3OSAxNS41MDExIDguMzcyMSAxNS41MDExQzguODMzNCAxNS41MDExIDkuMjA5MzEgMTUuODc3IDkuMjA5MzEgMTYuMzM4M0M5LjIwOTMxIDE2Ljc5OTYgOC44MzM0IDE3LjE3NTYgOC4zNzIxIDE3LjE3NTZaTTIuNTExODMgMTcuMTc1NkMyLjA1MDUzIDE3LjE3NTYgMS42NzQ2MiAxNi43OTk2IDEuNjc0NjIgMTYuMzM4M0MxLjY3NDYyIDE1Ljg3NyAyLjA1MDUzIDE1LjUwMTEgMi41MTE4MyAxNS41MDExQzIuOTczMTMgMTUuNTAxMSAzLjM0OTA0IDE1Ljg3NyAzLjM0OTA0IDE2LjMzODNDMy4zNDkwNCAxNi43OTk2IDIuOTczMTMgMTcuMTc1NiAyLjUxMTgzIDE3LjE3NTZaTTguMjUzMjYgNy4xMjkwNEg4LjQ5MTAzQzkuMjE4NTYgNy4xMjkwNCA5Ljg4ODMzIDcuNDQ2MzQgMTAuMzUxMyA3Ljk2NjI1SDYuMzkyOThDNi44NTU5NiA3LjQ0NjM0IDcuNTI1NzIgNy4xMjkwNCA4LjI1MzI2IDcuMTI5MDRaTTguMzcyMSAyLjUyNDM4QzguODMzNCAyLjUyNDM4IDkuMjA5MzEgMi45MDAyOSA5LjIwOTMxIDMuMzYxNTlDOS4yMDkzMSAzLjgyMjkgOC44MzM0IDQuMTk4OCA4LjM3MjEgNC4xOTg4QzcuOTEwNzkgNC4xOTg4IDcuNTM0ODkgMy44MjI5IDcuNTM0ODkgMy4zNjE1OUM3LjUzNDg5IDIuOTAwMjkgNy45MTA3OSAyLjUyNDM4IDguMzcyMSAyLjUyNDM4Wk0xNS4wNjk4IDEzLjk4MTZWMTEuMzE1MUg5LjIwOTNWOS42NDA2N0gxMi44MDI2TDEyLjUzMTMgOC41OTMzMkMxMi4xNDA0IDcuMDgzODQgMTAuOTU0OSA1Ljk1OTQ2IDkuNDk5ODEgNS41OTM2QzEwLjMxNjkgNS4xNzgzNSAxMC44ODM3IDQuMzM5NDYgMTAuODgzNyAzLjM2MTZDMTAuODgzNyAxLjk3Njg2IDkuNzU2ODQgMC44NDk5NzYgOC4zNzIwOSAwLjg0OTk3NkM2Ljk4NzM1IDAuODQ5OTc2IDUuODYwNDYgMS45NzY4NiA1Ljg2MDQ2IDMuMzYxNkM1Ljg2MDQ2IDQuMzM5NDYgNi40MjcyNiA1LjE3ODM1IDcuMjQ0MzcgNS41OTM2QzUuNzg5MyA1Ljk1OTQ2IDQuNjAzODEgNy4wODM4NCA0LjIxMjg0IDguNTkzMzJMMy45NDE1OCA5LjY0MDY3SDcuNTM0ODhWMTEuMzE1MUgxLjY3NDQyVjEzLjk4MTZDMC43MDE1ODEgMTQuMzI4MiAwIDE1LjI0ODMgMCAxNi4zMzgzQzAgMTcuNzIzMSAxLjEyNjg4IDE4Ljg1IDIuNTExNjMgMTguODVDMy44OTYzNyAxOC44NSA1LjAyMzI2IDE3LjcyMzEgNS4wMjMyNiAxNi4zMzgzQzUuMDIzMjYgMTUuMjQ4MyA0LjMyMTY3IDE0LjMyODIgMy4zNDg4NCAxMy45ODE2VjEyLjk4OTVINy41MzQ4OFYxMy45ODE2QzYuNTYyMDUgMTQuMzI4MiA1Ljg2MDQ2IDE1LjI0ODMgNS44NjA0NiAxNi4zMzgzQzUuODYwNDYgMTcuNzIzMSA2Ljk4NzM1IDE4Ljg1IDguMzcyMDkgMTguODVDOS43NTY4NCAxOC44NSAxMC44ODM3IDE3LjcyMzEgMTAuODgzNyAxNi4zMzgzQzEwLjg4MzcgMTUuMjQ4MyAxMC4xODIxIDE0LjMyODIgOS4yMDkzIDEzLjk4MTZWMTIuOTg5NUgxMy4zOTUzVjEzLjk4MTZDMTIuNDIyNSAxNC4zMjgyIDExLjcyMDkgMTUuMjQ4MyAxMS43MjA5IDE2LjMzODNDMTEuNzIwOSAxNy43MjMxIDEyLjg0NzggMTguODUgMTQuMjMyNiAxOC44NUMxNS42MTczIDE4Ljg1IDE2Ljc0NDIgMTcuNzIzMSAxNi43NDQyIDE2LjMzODNDMTYuNzQ0MiAxNS4yNDgzIDE2LjA0MjYgMTQuMzI4MiAxNS4wNjk4IDEzLjk4MTZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTcgMTkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQuMjMyOCAxNy4xNzU2QzEzLjc3MTUgMTcuMTc1NiAxMy4zOTU2IDE2Ljc5OTYgMTMuMzk1NiAxNi4zMzgzQzEzLjM5NTYgMTUuODc3IDEzLjc3MTUgMTUuNTAxMSAxNC4yMzI4IDE1LjUwMTFDMTQuNjk0MSAxNS41MDExIDE1LjA3IDE1Ljg3NyAxNS4wNyAxNi4zMzgzQzE1LjA3IDE2Ljc5OTYgMTQuNjk0MSAxNy4xNzU2IDE0LjIzMjggMTcuMTc1NlpNOC4zNzIxIDE3LjE3NTZDNy45MTA3OSAxNy4xNzU2IDcuNTM0ODkgMTYuNzk5NiA3LjUzNDg5IDE2LjMzODNDNy41MzQ4OSAxNS44NzcgNy45MTA3OSAxNS41MDExIDguMzcyMSAxNS41MDExQzguODMzNCAxNS41MDExIDkuMjA5MzEgMTUuODc3IDkuMjA5MzEgMTYuMzM4M0M5LjIwOTMxIDE2Ljc5OTYgOC44MzM0IDE3LjE3NTYgOC4zNzIxIDE3LjE3NTZaTTIuNTExODMgMTcuMTc1NkMyLjA1MDUzIDE3LjE3NTYgMS42NzQ2MiAxNi43OTk2IDEuNjc0NjIgMTYuMzM4M0MxLjY3NDYyIDE1Ljg3NyAyLjA1MDUzIDE1LjUwMTEgMi41MTE4MyAxNS41MDExQzIuOTczMTMgMTUuNTAxMSAzLjM0OTA0IDE1Ljg3NyAzLjM0OTA0IDE2LjMzODNDMy4zNDkwNCAxNi43OTk2IDIuOTczMTMgMTcuMTc1NiAyLjUxMTgzIDE3LjE3NTZaTTguMjUzMjYgNy4xMjkwNEg4LjQ5MTAzQzkuMjE4NTYgNy4xMjkwNCA5Ljg4ODMzIDcuNDQ2MzQgMTAuMzUxMyA3Ljk2NjI1SDYuMzkyOThDNi44NTU5NiA3LjQ0NjM0IDcuNTI1NzIgNy4xMjkwNCA4LjI1MzI2IDcuMTI5MDRaTTguMzcyMSAyLjUyNDM4QzguODMzNCAyLjUyNDM4IDkuMjA5MzEgMi45MDAyOSA5LjIwOTMxIDMuMzYxNTlDOS4yMDkzMSAzLjgyMjkgOC44MzM0IDQuMTk4OCA4LjM3MjEgNC4xOTg4QzcuOTEwNzkgNC4xOTg4IDcuNTM0ODkgMy44MjI5IDcuNTM0ODkgMy4zNjE1OUM3LjUzNDg5IDIuOTAwMjkgNy45MTA3OSAyLjUyNDM4IDguMzcyMSAyLjUyNDM4Wk0xNS4wNjk4IDEzLjk4MTZWMTEuMzE1MUg5LjIwOTNWOS42NDA2N0gxMi44MDI2TDEyLjUzMTMgOC41OTMzMkMxMi4xNDA0IDcuMDgzODQgMTAuOTU0OSA1Ljk1OTQ2IDkuNDk5ODEgNS41OTM2QzEwLjMxNjkgNS4xNzgzNSAxMC44ODM3IDQuMzM5NDYgMTAuODgzNyAzLjM2MTZDMTAuODgzNyAxLjk3Njg2IDkuNzU2ODQgMC44NDk5NzYgOC4zNzIwOSAwLjg0OTk3NkM2Ljk4NzM1IDAuODQ5OTc2IDUuODYwNDYgMS45NzY4NiA1Ljg2MDQ2IDMuMzYxNkM1Ljg2MDQ2IDQuMzM5NDYgNi40MjcyNiA1LjE3ODM1IDcuMjQ0MzcgNS41OTM2QzUuNzg5MyA1Ljk1OTQ2IDQuNjAzODEgNy4wODM4NCA0LjIxMjg0IDguNTkzMzJMMy45NDE1OCA5LjY0MDY3SDcuNTM0ODhWMTEuMzE1MUgxLjY3NDQyVjEzLjk4MTZDMC43MDE1ODEgMTQuMzI4MiAwIDE1LjI0ODMgMCAxNi4zMzgzQzAgMTcuNzIzMSAxLjEyNjg4IDE4Ljg1IDIuNTExNjMgMTguODVDMy44OTYzNyAxOC44NSA1LjAyMzI2IDE3LjcyMzEgNS4wMjMyNiAxNi4zMzgzQzUuMDIzMjYgMTUuMjQ4MyA0LjMyMTY3IDE0LjMyODIgMy4zNDg4NCAxMy45ODE2VjEyLjk4OTVINy41MzQ4OFYxMy45ODE2QzYuNTYyMDUgMTQuMzI4MiA1Ljg2MDQ2IDE1LjI0ODMgNS44NjA0NiAxNi4zMzgzQzUuODYwNDYgMTcuNzIzMSA2Ljk4NzM1IDE4Ljg1IDguMzcyMDkgMTguODVDOS43NTY4NCAxOC44NSAxMC44ODM3IDE3LjcyMzEgMTAuODgzNyAxNi4zMzgzQzEwLjg4MzcgMTUuMjQ4MyAxMC4xODIxIDE0LjMyODIgOS4yMDkzIDEzLjk4MTZWMTIuOTg5NUgxMy4zOTUzVjEzLjk4MTZDMTIuNDIyNSAxNC4zMjgyIDExLjcyMDkgMTUuMjQ4MyAxMS43MjA5IDE2LjMzODNDMTEuNzIwOSAxNy43MjMxIDEyLjg0NzggMTguODUgMTQuMjMyNiAxOC44NUMxNS42MTczIDE4Ljg1IDE2Ljc0NDIgMTcuNzIzMSAxNi43NDQyIDE2LjMzODNDMTYuNzQ0MiAxNS4yNDgzIDE2LjA0MjYgMTQuMzI4MiAxNS4wNjk4IDEzLjk4MTZaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-color: #ee635f; } .styles__orgTeamMemberAdd___33Y5_ { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNy4yMDAyMSA1LjM5OTk5QzYuMjA3NTEgNS4zOTk5OSA1LjQwMDIxIDYuMjA2MzkgNS40MDAyMSA3LjE5OTk5QzUuNDAwMjEgOC4xOTI2OSA2LjIwNzUxIDguOTk5OTkgNy4yMDAyMSA4Ljk5OTk5QzguMTkyOTEgOC45OTk5OSA5LjAwMDIxIDguMTkyNjkgOS4wMDAyMSA3LjE5OTk5QzkuMDAwMjEgNi4yMDYzOSA4LjE5MjkxIDUuMzk5OTkgNy4yMDAyMSA1LjM5OTk5Wk03LjIwMDEgMTAuOEM1LjIxNDcgMTAuOCAzLjYwMDEgOS4xODU0MSAzLjYwMDEgNy4yMDAwMUMzLjYwMDEgNS4yMTQ2MSA1LjIxNDcgMy42MDAwMSA3LjIwMDEgMy42MDAwMUM5LjE4NTUgMy42MDAwMSAxMC44MDAxIDUuMjE0NjEgMTAuODAwMSA3LjIwMDAxQzEwLjgwMDEgOS4xODU0MSA5LjE4NTUgMTAuOCA3LjIwMDEgMTAuOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMS45NDMwNSAxNi4ySDEyLjQ1NzhDMTEuOTE5NiAxNC41NzI4IDkuOTA3MTUgMTMuNSA3LjE5OTk1IDEzLjVDNC40OTI3NSAxMy41IDIuNDgxMjUgMTQuNTcyOCAxLjk0MzA1IDE2LjJaTTE0LjQgMThIMFYxNy4xQzAgMTMuOTIwMyAyLjk2MSAxMS43IDcuMiAxMS43QzExLjQzOTkgMTEuNyAxNC40IDEzLjkyMDMgMTQuNCAxNy4xVjE4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS44MDAxIDIuN0gxNy4xMDAxVjBIMTUuMzAwMVYyLjdIMTIuNjAwMVY0LjVIMTUuMzAwMVY3LjJIMTcuMTAwMVY0LjVIMTkuODAwMVYyLjdaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K); background-color: #54d1b0; } .styles__orgTeamMemberRemove___eAHEK { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi45NjQ2OSA1LjgxMTc3QzYuMDA0NDMgNS44MTE3NyA1LjIyMzUxIDYuNTkxODEgNS4yMjM1MSA3LjU1Mjk0QzUuMjIzNTEgOC41MTMyIDYuMDA0NDMgOS4yOTQxMiA2Ljk2NDY5IDkuMjk0MTJDNy45MjQ5NCA5LjI5NDEyIDguNzA1ODYgOC41MTMyIDguNzA1ODYgNy41NTI5NEM4LjcwNTg2IDYuNTkxODEgNy45MjQ5NCA1LjgxMTc3IDYuOTY0NjkgNS44MTE3N1pNNi45NjQ3NyAxMS4wMzUzQzUuMDQ0MjYgMTEuMDM1MyAzLjQ4MjQyIDkuNDczNDUgMy40ODI0MiA3LjU1Mjk0QzMuNDgyNDIgNS42MzI0MiA1LjA0NDI2IDQuMDcwNTkgNi45NjQ3NyA0LjA3MDU5QzguODg1MjkgNC4wNzA1OSAxMC40NDcxIDUuNjMyNDIgMTAuNDQ3MSA3LjU1Mjk0QzEwLjQ0NzEgOS40NzM0NSA4Ljg4NTI5IDExLjAzNTMgNi45NjQ3NyAxMS4wMzUzWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjg3OTUyIDE2LjI1ODhIMTIuMDUwNkMxMS41MyAxNC42ODQ4IDkuNTgzMzQgMTMuNjQ3MSA2Ljk2NDYyIDEzLjY0NzFDNC4zNDU4OSAxMy42NDcxIDIuNDAwMTMgMTQuNjg0OCAxLjg3OTUyIDE2LjI1ODhaTTEzLjkyOTQgMThIMFYxNy4xMjk0QzAgMTQuMDUzNiAyLjg2NDIzIDExLjkwNTkgNi45NjQ3IDExLjkwNTlDMTEuMDY2IDExLjkwNTkgMTMuOTI5NCAxNC4wNTM2IDEzLjkyOTQgMTcuMTI5NFYxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguODk3OSAxLjIzMTAxTDE3LjY2NjkgMEwxNS42NzA2IDEuOTk2MjZMMTMuNjc0NCAwTDEyLjQ0MzQgMS4yMzEwMUwxNC40Mzk2IDMuMjI3MjdMMTIuNDQzNCA1LjIyMzUyTDEzLjY3NDQgNi40NTQ1M0wxNS42NzA2IDQuNDU4MjhMMTcuNjY2OSA2LjQ1NDUzTDE4Ljg5NzkgNS4yMjM1MkwxNi45MDE2IDMuMjI3MjdMMTguODk3OSAxLjIzMTAxWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==); background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi45NjQ2OSA1LjgxMTc3QzYuMDA0NDMgNS44MTE3NyA1LjIyMzUxIDYuNTkxODEgNS4yMjM1MSA3LjU1Mjk0QzUuMjIzNTEgOC41MTMyIDYuMDA0NDMgOS4yOTQxMiA2Ljk2NDY5IDkuMjk0MTJDNy45MjQ5NCA5LjI5NDEyIDguNzA1ODYgOC41MTMyIDguNzA1ODYgNy41NTI5NEM4LjcwNTg2IDYuNTkxODEgNy45MjQ5NCA1LjgxMTc3IDYuOTY0NjkgNS44MTE3N1pNNi45NjQ3NyAxMS4wMzUzQzUuMDQ0MjYgMTEuMDM1MyAzLjQ4MjQyIDkuNDczNDUgMy40ODI0MiA3LjU1Mjk0QzMuNDgyNDIgNS42MzI0MiA1LjA0NDI2IDQuMDcwNTkgNi45NjQ3NyA0LjA3MDU5QzguODg1MjkgNC4wNzA1OSAxMC40NDcxIDUuNjMyNDIgMTAuNDQ3MSA3LjU1Mjk0QzEwLjQ0NzEgOS40NzM0NSA4Ljg4NTI5IDExLjAzNTMgNi45NjQ3NyAxMS4wMzUzWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjg3OTUyIDE2LjI1ODhIMTIuMDUwNkMxMS41MyAxNC42ODQ4IDkuNTgzMzQgMTMuNjQ3MSA2Ljk2NDYyIDEzLjY0NzFDNC4zNDU4OSAxMy42NDcxIDIuNDAwMTMgMTQuNjg0OCAxLjg3OTUyIDE2LjI1ODhaTTEzLjkyOTQgMThIMFYxNy4xMjk0QzAgMTQuMDUzNiAyLjg2NDIzIDExLjkwNTkgNi45NjQ3IDExLjkwNTlDMTEuMDY2IDExLjkwNTkgMTMuOTI5NCAxNC4wNTM2IDEzLjkyOTQgMTcuMTI5NFYxOFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTguODk3OSAxLjIzMTAxTDE3LjY2NjkgMEwxNS42NzA2IDEuOTk2MjZMMTMuNjc0NCAwTDEyLjQ0MzQgMS4yMzEwMUwxNC40Mzk2IDMuMjI3MjdMMTIuNDQzNCA1LjIyMzUyTDEzLjY3NDQgNi40NTQ1M0wxNS42NzA2IDQuNDU4MjhMMTcuNjY2OSA2LjQ1NDUzTDE4Ljg5NzkgNS4yMjM1MkwxNi45MDE2IDMuMjI3MjdMMTguODk3OSAxLjIzMTAxWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==); background-color: #ee635f; } .styles__orgSettingsUpdate___13py2 { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTE3LjE0MDEgMTAuOTQwNEMxNy4xODAxIDEwLjY0MDQgMTcuMjAwMSAxMC4zMzA0IDE3LjIwMDEgMTAuMDAwNEMxNy4yMDAxIDkuNjgwMzkgMTcuMTgwMSA5LjM2MDM5IDE3LjEzMDEgOS4wNjAzOUwxOS4xNjAxIDcuNDgwMzlDMTkuMzQwMSA3LjM0MDM5IDE5LjM5MDEgNy4wNzAzOSAxOS4yODAxIDYuODcwMzlMMTcuMzYwMSAzLjU1MDM5QzE3LjI0MDEgMy4zMzAzOSAxNi45OTAxIDMuMjYwMzkgMTYuNzcwMSAzLjMzMDM5TDE0LjM4MDEgNC4yOTAzOUMxMy44ODAxIDMuOTEwMzkgMTMuMzUwMSAzLjU5MDM5IDEyLjc2MDEgMy4zNTAzOUwxMi40MDAxIDAuODEwMzlDMTIuMzYwMSAwLjU3MDM5IDEyLjE2MDEgMC40MDAzOTEgMTEuOTIwMSAwLjQwMDM5MUg4LjA4MDExQzcuODQwMTEgMC40MDAzOTEgNy42NTAxMSAwLjU3MDM5IDcuNjEwMTEgMC44MTAzOUw3LjI1MDExIDMuMzUwMzlDNi42NjAxMSAzLjU5MDM5IDYuMTIwMTEgMy45MjAzOSA1LjYzMDExIDQuMjkwMzlMMy4yNDAxMSAzLjMzMDM5QzMuMDIwMTEgMy4yNTAzOSAyLjc3MDExIDMuMzMwMzkgMi42NTAxMSAzLjU1MDM5TDAuNzQwMTEgNi44NzAzOUMwLjYyMDExIDcuMDgwMzkgMC42NjAxMSA3LjM0MDM5IDAuODYwMTEgNy40ODAzOUwyLjg5MDExIDkuMDYwMzlDMi44NDAxMSA5LjM2MDM5IDIuODAwMTEgOS42OTAzOSAyLjgwMDExIDEwLjAwMDRDMi44MDAxMSAxMC4zMTA0IDIuODIwMTEgMTAuNjQwNCAyLjg3MDExIDEwLjk0MDRMMC44NDAxMSAxMi41MjA0QzAuNjYwMTEgMTIuNjYwNCAwLjYxMDExIDEyLjkzMDQgMC43MjAxMSAxMy4xMzA0TDIuNjQwMTEgMTYuNDUwNEMyLjc2MDExIDE2LjY3MDQgMy4wMTAxMSAxNi43NDA0IDMuMjMwMTEgMTYuNjcwNEw1LjYyMDExIDE1LjcxMDRDNi4xMjAxMSAxNi4wOTA0IDYuNjUwMTEgMTYuNDEwNCA3LjI0MDExIDE2LjY1MDRMNy42MDAxMSAxOS4xOTA0QzcuNjUwMTEgMTkuNDMwNCA3Ljg0MDExIDE5LjYwMDQgOC4wODAxMSAxOS42MDA0SDExLjkyMDFDMTIuMTYwMSAxOS42MDA0IDEyLjM2MDEgMTkuNDMwNCAxMi4zOTAxIDE5LjE5MDRMMTIuNzUwMSAxNi42NTA0QzEzLjM0MDEgMTYuNDEwNCAxMy44ODAxIDE2LjA5MDQgMTQuMzcwMSAxNS43MTA0TDE2Ljc2MDEgMTYuNjcwNEMxNi45ODAxIDE2Ljc1MDQgMTcuMjMwMSAxNi42NzA0IDE3LjM1MDEgMTYuNDUwNEwxOS4yNzAxIDEzLjEzMDRDMTkuMzkwMSAxMi45MTA0IDE5LjM0MDEgMTIuNjYwNCAxOS4xNTAxIDEyLjUyMDRMMTcuMTQwMSAxMC45NDA0Wk0xMC4wMDAxIDEzLjYwMDRDOC4wMjAxMSAxMy42MDA0IDYuNDAwMTEgMTEuOTgwNCA2LjQwMDExIDEwLjAwMDRDNi40MDAxMSA4LjAyMDM5IDguMDIwMTEgNi40MDAzOSAxMC4wMDAxIDYuNDAwMzlDMTEuOTgwMSA2LjQwMDM5IDEzLjYwMDEgOC4wMjAzOSAxMy42MDAxIDEwLjAwMDRDMTMuNjAwMSAxMS45ODA0IDExLjk4MDEgMTMuNjAwNCAxMC4wMDAxIDEzLjYwMDRaIgogICAgZmlsbD0id2hpdGUiIC8+Cjwvc3ZnPg==); background-color: #71cfff; } .styles__noAction___V5bOl { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTkgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTcuMTQyOSAxLjcxNDI5SDE0LjU3MTRWMEgxMi44NTcxVjUuMTQyODZIMTQuNTcxNFYzLjQyODU3SDE3LjE0MjlWMTYuMjg1N0gxLjcxNDI5VjMuNDI4NTdIMy40Mjg1N1YxLjcxNDI5SDEuNzE0MjlDMC43NjggMS43MTQyOSAwIDIuNDgyMjkgMCAzLjQyODU3VjE2LjI4NTdDMCAxNy4yMzIgMC43NjggMTggMS43MTQyOSAxOEgxNy4xNDI5QzE4LjA4OTEgMTggMTguODU3MSAxNy4yMzIgMTguODU3MSAxNi4yODU3VjMuNDI4NTdDMTguODU3MSAyLjQ4MjI5IDE4LjA4OTEgMS43MTQyOSAxNy4xNDI5IDEuNzE0MjlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUuOTk5OTMgMy40Mjg1N0gxMS45OTk5VjEuNzE0MjlINS45OTk5M1YwSDQuMjg1NjRWNS4xNDI4Nkg1Ljk5OTkzVjMuNDI4NTdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuODU3MjggNi44NTcwOUgzLjQyODcxVjEwLjI4NTdINi44NTcyOFY2Ljg1NzA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS4xNDI0IDYuODU3MDlINy43MTM4N1YxMC4yODU3SDExLjE0MjRWNi44NTcwOVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuMDAwNSAxMC4yODU3SDE1LjQyOTFWNi44NTcwOUgxMi4wMDA1VjEwLjI4NTdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuNDI4NzEgMTQuNTcxNUg2Ljg1NzI4VjExLjE0MjlIMy40Mjg3MVYxNC41NzE1WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjcxMzg3IDE0LjU3MTVIMTEuMTQyNFYxMS4xNDI5SDcuNzEzODdWMTQuNTcxNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=); background-color: #d7dade; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__action___PhCVL { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; min-height: 80px; margin: 10px 0; } .styles__action___PhCVL .styles__actionTail___zS5aJ { content: ''; position: absolute; width: 2px; height: 100%; left: 18px; top: 0; padding: 48px 0 0 } .styles__action___PhCVL .styles__actionTail___zS5aJ::after { display: inline-block; content: ''; width: 2px; height: 100%; background-color: #f2f3f5; } .styles__action___PhCVL.styles__lastItem___16guE { padding-bottom: 50px; } .styles__action___PhCVL.styles__lastItem___16guE .styles__actionTail___zS5aJ::after { display: none; } .styles__action___PhCVL .styles__actionIcon___RT5mC { padding-right: 30px; } .styles__action___PhCVL .styles__actionContent___3hN73 .styles__actor___UDsY3 { font-weight: 600; font-size: 14px; } .styles__action___PhCVL .styles__actionContent___3hN73 .styles__description___3SmOm { font-size: 14px; } .styles__action___PhCVL .styles__actionContent___3hN73 .styles__description___3SmOm span { font-weight: 600; } .styles__action___PhCVL .styles__actionContent___3hN73 .styles__date___xAg4B { margin-top: 2px; font-size: 12px; color: #5a6774; } .styles__filter___3KkQz { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__dropdown___3805q { width: 220px; margin-right: 20px; } .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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___NTz9i { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3t8YR { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3t8YR { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3HpMV { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3HpMV { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__disabled___2c2Kz { cursor: not-allowed; } .styles__dateInput___1Ii7i { border: 1px solid #e9ebee; color: #26323f; padding: 5px 8px; } .styles__datePickerContainer___20CCS .react-datepicker__input-container > .react-datepicker-ignore-onclickoutside, .styles__datePickerContainer___20CCS .react-datepicker__input-container > .react-datepicker-ignore-onclickoutside:focus { border-radius: 0; border: 1px solid #007bff; outline: none; } .styles__datePickerContainer___20CCS .react-datepicker__header { background-color: #ffffff; border-bottom: none; } .styles__datePickerContainer___20CCS .react-datepicker__day-name { color: #5a6774; } .styles__datePickerContainer___20CCS .react-datepicker__month { margin-top: 0; } .styles__datePickerContainer___20CCS .react-datepicker__current-month { text-transform: uppercase; color: #5a6774; font-weight: 500; font-size: 12px; margin-bottom: 8px; padding-top: 6px; } .styles__datePickerContainer___20CCS .react-datepicker__triangle { display: none; } .styles__datePickerContainer___20CCS .react-datepicker__navigation { border: 5px solid transparent; top: 17px; height: 8px; } .styles__datePickerContainer___20CCS .react-datepicker__navigation--previous { border-right-color: #5a6774; } .styles__datePickerContainer___20CCS .react-datepicker__navigation--next { border-left-color: #5a6774; } .styles__datePickerContainer___20CCS .react-datepicker__day { border-radius: 50%; outline: none } .styles__datePickerContainer___20CCS .react-datepicker__day.react-datepicker__day--selected { background-color: #007bff; } .styles__datePickerContainer___20CCS .react-datepicker__day:hover { border-radius: 50%; } .styles__datePickerContainer___20CCS .react-datepicker__day--in-range { background-color: #c4f0ff; color: #26323f; } .styles__datePickerContainer___20CCS .react-datepicker__day--range-start { background-color: #007bff; color: #ffffff; } .styles__datePickerContainer___20CCS .react-datepicker__day--range-start.react-datepicker__day--in-selecting-range, .styles__datePickerContainer___20CCS .react-datepicker__day--range-end.react-datepicker__day--in-selecting-range { background-color: #c4f0ff; color: #26323f; } .styles__datePickerContainer___20CCS .react-datepicker__day--in-selecting-range { background-color: #c4f0ff; } .styles__datePickerContainer___20CCS .react-datepicker__day--selecting-range-start.react-datepicker__day--in-selecting-range, .styles__datePickerContainer___20CCS .react-datepicker__day--selecting-range-end.react-datepicker__day--in-selecting-range { background-color: #007bff; color: #ffffff; } .styles__datePickerContainer___20CCS .react-datepicker__day--range-start.react-datepicker__day--range-end, .styles__datePickerContainer___20CCS .react-datepicker__day--range-end { background-color: #007bff; color: #ffffff; } .styles__calendar___2qZcr { border-radius: 0; border: 1px solid #e9ebee; } .styles__datePickerWrapper___1N9NT { position: relative } .styles__datePickerWrapper___1N9NT::after { position: absolute; top: 8px; left: 7px; content: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOS4wNDc2IDEuOTA0NzZIMTYuMTkwNVYwSDE0LjI4NTdWNS43MTQyOUgxNi4xOTA1VjMuODA5NTJIMTkuMDQ3NlYxOC4wOTUySDEuOTA0NzZWMy44MDk1MkgzLjgwOTUyVjEuOTA0NzZIMS45MDQ3NkMwLjg1MzMzMyAxLjkwNDc2IDAgMi43NTgxIDAgMy44MDk1MlYxOC4wOTUyQzAgMTkuMTQ2NyAwLjg1MzMzMyAyMCAxLjkwNDc2IDIwSDE5LjA0NzZDMjAuMDk5IDIwIDIwLjk1MjQgMTkuMTQ2NyAyMC45NTI0IDE4LjA5NTJWMy44MDk1MkMyMC45NTI0IDIuNzU4MSAyMC4wOTkgMS45MDQ3NiAxOS4wNDc2IDEuOTA0NzZaIiBmaWxsPSIjNzU3NTc1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi42NjY3MiAzLjgwOTUySDEzLjMzMzRWMS45MDQ3Nkg2LjY2NjcyVjBINC43NjE5NlY1LjcxNDI5SDYuNjY2NzJWMy44MDk1MloiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjYxOTA5IDcuNjE5MDJIMy44MDk1N1YxMS40Mjg1SDcuNjE5MDlWNy42MTkwMloiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi4zODA5IDcuNjE5MDJIOC41NzE0MVYxMS40Mjg1SDEyLjM4MDlWNy42MTkwMloiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy4zMzM0IDExLjQyODVIMTcuMTQyOVY3LjYxOTAySDEzLjMzMzRWMTEuNDI4NVoiIGZpbGw9IiM3NTc1NzUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zLjgwOTU3IDE2LjE5MDVINy42MTkwOVYxMi4zODFIMy44MDk1N1YxNi4xOTA1WiIgZmlsbD0iIzc1NzU3NSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTguNTcxNDEgMTYuMTkwNUgxMi4zODA5VjEyLjM4MUg4LjU3MTQxVjE2LjE5MDVaIiBmaWxsPSIjNzU3NTc1Ii8+Cjwvc3ZnPgoK); } .styles__dateInputField___2Qdnv { height: 36px; width: 140px; padding-left: 36px; cursor: pointer; caret-color: transparent; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__calendarFilterWrapper___39kPY { position: relative; display: inline-block; } .styles__selectedDateRange___1RTeg { font-weight: 600; border-bottom: 1px solid #90a0ac; padding: 8px 25px 8px 12px; width: 340px; position: relative; cursor: pointer } .styles__selectedDateRange___1RTeg::after { content: ''; position: absolute; right: 8px; top: 16px; width: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #999999; -webkit-transition: border-top-color 0.3s; transition: border-top-color 0.3s; } .styles__selectedDateRange___1RTeg:hover::after { border-top-color: #5a6774; } .styles__calendarFilterDropdown___1dy2V { display: inline-block; padding: 10px; background-color: #fafafb; -webkit-box-shadow: 0 2px 5px 0 #d4d4d4; box-shadow: 0 2px 5px 0 #d4d4d4; z-index: 999; position: absolute; min-width: 485px; right: 0; } .styles__dateRangeDropdown___2av8K { height: 30px; width: 260px; margin-bottom: 15px; } .styles__dateRangeDropdown___2av8K .Select-control { height: 28px; } .styles__dateRangeDropdown___2av8K .Select-control .Select-multi-value-wrapper { height: 28px; } .styles__dateRangeDropdown___2av8K .Select-control .Select-multi-value-wrapper .Select-value { line-height: 30px; } .styles__dateRangeDropdown___2av8K .Select-menu-outer .Select-option { padding: 6px 10px; } .styles__calendarWrapper___3JhBF .react-datepicker__month-container { border-right: 1px solid #e9ebee; } .styles__calendarWrapper___3JhBF .react-datepicker__month-container ~ .react-datepicker__month-container { border-right: none; } .styles__calendarWrapper___3JhBF .react-datepicker__current-month { font-size: 13px; } .styles__calendarWrapper___3JhBF .react-datepicker__day-name, .styles__calendarWrapper___3JhBF .react-datepicker__day { font-size: 13px; width: 26px; line-height: 26px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__scrollButton___1VSUY { height: 58px; width: 58px; border-radius: 50%; -webkit-box-shadow: 0 -1px 2px rgba(11, 33, 74, .05), 0 2px 3px rgba(11, 33, 74, .15); box-shadow: 0 -1px 2px rgba(11, 33, 74, .05), 0 2px 3px rgba(11, 33, 74, .15); -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #ffffff; } .styles__scrollButton___1VSUY img { width: 28px; height: 18px; } .styles__scrollButton___1VSUY:hover { -webkit-box-shadow: 0 -1px 2px rgba(11, 33, 74, .2), 0 2px 3px rgba(11, 33, 74, .3); box-shadow: 0 -1px 2px rgba(11, 33, 74, .2), 0 2px 3px rgba(11, 33, 74, .3); } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ .styles__card___2jLPy { margin-bottom: 80px; min-height: 540px; padding-bottom: 60px; } .styles__activiesList___1jsgy { position: relative; margin: 40px 0 0 20px; } .styles__activiesList___1jsgy > div > div { display: block; } .styles__filters___1jC5Y { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__initialDataLoader___QsAxY { padding-top: 150px; text-align: center; } .styles__moreDataLoader___2QtJO { position: absolute; bottom: 0; left: 0; right: 0; padding-top: 10px; text-align: center; } .styles__noData___3y5oi { max-width: 400px; margin: 0 auto; padding-top: 130px; text-align: center; } .styles__noData___3y5oi .styles__icon___u88fI { width: 63px; height: 63px; margin: 0 auto; padding: 18px; background-color: #f2f3f5; border-radius: 50%; } .styles__noData___3y5oi .styles__icon___u88fI img { height: 30px; width: 30px; } .styles__noData___3y5oi .styles__desc___9Guz0 { margin-top: 12px; font-size: 18px; color: #768491; } .styles__showMore___3HISb { text-align: center; color: #007bff; cursor: pointer; padding-top: 30px; } .styles__noAction___3KRxs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__noAction___3KRxs .styles__iconWrapper___2zYTl { padding-right: 30px; } .styles__noAction___3KRxs .styles__text___2Qz5f { color: #90a0ac; size: 14px; } .styles__scrollUpButton___2o8NS { position: absolute; bottom: -30px; right: 0; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3Q6rd { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1PLoD { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1PLoD { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3fnHc { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3fnHc { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__header___3oh7G { background-color: #ffffff; } .styles__tabsSection___2Gs_c { background-color: #ffffff; border-bottom: solid 1px #e0e4e7; margin-top: -20px; margin-bottom: 32px; } .styles__tabsSection___2Gs_c .styles__tabs___2WMQc { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__tabsSection___2Gs_c .styles__tab___1cDnv { min-width: 100px; padding: 20px; text-align: center; text-decoration: none; font-size: 14px; color: #445d6e } .styles__tabsSection___2Gs_c .styles__tab___1cDnv:hover { color: #2496ed; } .styles__tabsSection___2Gs_c .styles__selected___3RxPo { font-weight: 600; color: #2496ed; border-bottom: 2px solid #2496ed; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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: #2496ed; } .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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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__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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___33-KE { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___jbmIk { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___jbmIk { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3gn0U { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3gn0U { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__link___2VnqT { cursor: pointer; color: #2496ed; } .styles__title___1pH-7 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__title___1pH-7 .styles__searchInput___2TRjx { width: 238px; height: 36px; } .styles__repoInfoCard___39Xi3 { padding: 20px; margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__repoInfoCard___39Xi3 img { height: 50px; margin-right: 32px; } .styles__loading___LaoxC { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 48px 0; } .styles__items___23Bxs { margin-bottom: 32px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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: #2496ed; 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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2dtVO { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___T-7oT { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___T-7oT { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___tumxK { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___tumxK { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__title___2c5y0 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .styles__title___2c5y0 button { margin: 0; padding: 0 12px; border-radius: 4px; } .styles__title___2c5y0 .styles__searchInput___1IPMk { width: 238px; height: 36px; } .styles__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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___jQMFK { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1IbVH { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1IbVH { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___SCYWV { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___SCYWV { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__header___nJA4f { background-color: #ffffff; padding-top: 48px; padding-bottom: 40px; border-bottom: 1px solid #e0e4e7; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__header___nJA4f .styles__title___1PTT_ { font-size: 28px; line-height: 40px; font-weight: 400; letter-spacing: normal; font-weight: bold; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__header___nJA4f .styles__descriptionIcon___2imfT { position: relative; top: 5px; right: 7px; } .styles__header___nJA4f .styles__noDescription___1uva9 { color: #c0c9ce; font-style: italic; cursor: pointer; } .styles__header___nJA4f .styles__noDescription___1uva9 a { text-decoration: none; } .styles__tabsSection___2J_ZQ { background-color: #ffffff; border-bottom: solid 1px #e0e4e7; margin-top: -20px; } .styles__tabsSection___2J_ZQ .styles__tabs___2k-8d { display: -webkit-box; display: -ms-flexbox; display: flex; } .styles__tabsSection___2J_ZQ .styles__tab___2hfCp { min-width: 100px; padding: 20px; text-align: center; text-decoration: none; font-size: 14px; color: #445d6e } .styles__tabsSection___2J_ZQ .styles__tab___2hfCp:hover { color: #2496ed; } .styles__tabsSection___2J_ZQ .styles__selected___2aCVV { font-weight: 600; color: #2496ed; border-bottom: 2px solid #2496ed; } .styles__content___2zlo3 { margin-top: 32px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1dlZG { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3HVmx { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3HVmx { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ .styles__main___2fYQv.styles__notRunning_fill___3ibKG {/* stylelint-disable declaration-colon-space-before */ fill : #1aaaf8;/* stylelint-enable */ } .styles__main___2fYQv.styles__failed_fill___2-kSX {/* stylelint-disable declaration-colon-space-before */ fill : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__deployed_fill___3Egmg {/* stylelint-disable declaration-colon-space-before */ fill : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__partlyRunning_fill___3p-DF {/* stylelint-disable declaration-colon-space-before */ fill : #f7d933;/* stylelint-enable */ } .styles__main___2fYQv.styles__canceled_fill___2UUhV {/* stylelint-disable declaration-colon-space-before */ fill : #b6bec7;/* stylelint-enable */ } .styles__main___2fYQv.styles__running_fill___1M1Xw {/* stylelint-disable declaration-colon-space-before */ fill : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__succeeded_fill___V8qBq {/* stylelint-disable declaration-colon-space-before */ fill : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__stopped_fill___366eC {/* stylelint-disable declaration-colon-space-before */ fill : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__empty_fill___2upwd {/* stylelint-disable declaration-colon-space-before */ fill : #9eb3d5;/* stylelint-enable */ } .styles__main___2fYQv.styles__emptyCluster_fill___31clH {/* stylelint-disable declaration-colon-space-before */ fill : #9eb3d5;/* stylelint-enable */ } .styles__main___2fYQv.styles__terminated_fill___18mZF {/* stylelint-disable declaration-colon-space-before */ fill : #ad85ff;/* stylelint-enable */ } .styles__main___2fYQv.styles__unreachable_fill___2GcD3 {/* stylelint-disable declaration-colon-space-before */ fill : #9eb3d5;/* stylelint-enable */ } .styles__main___2fYQv.styles__pending_fill___1FOLZ {/* stylelint-disable declaration-colon-space-before */ fill : #bddff0;/* stylelint-enable */ } .styles__main___2fYQv.styles__inProgress_fill___2dU78 {/* stylelint-disable declaration-colon-space-before */ fill : #f7d933;/* stylelint-enable */ } .styles__main___2fYQv.styles__canceling_fill___1BzK8 {/* stylelint-disable declaration-colon-space-before */ fill : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__success_fill___1B-IJ {/* stylelint-disable declaration-colon-space-before */ fill : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__initialized_fill___18UwF {/* stylelint-disable declaration-colon-space-before */ fill : #1aaaf8;/* stylelint-enable */ } .styles__main___2fYQv.styles__active_fill___l6IG7 {/* stylelint-disable declaration-colon-space-before */ fill : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__pendingDelete_fill___3ics1 {/* stylelint-disable declaration-colon-space-before */ fill : #ffc400;/* stylelint-enable */ } .styles__main___2fYQv.styles__locked_fill___ZPjsx {/* stylelint-disable declaration-colon-space-before */ fill : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__readable_fill___2PTjN {/* stylelint-disable declaration-colon-space-before */ fill : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__writable_fill___VR4pq {/* stylelint-disable declaration-colon-space-before */ fill : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__deploying_fill___276fl {/* stylelint-disable declaration-colon-space-before */ fill : #00cbca;/* stylelint-enable */ } .styles__main___2fYQv.styles__unavailable_fill___24_C2 {/* stylelint-disable declaration-colon-space-before */ fill : #9967ff;/* stylelint-enable */ } .styles__main___2fYQv.styles__notRunning_color___p6ZVB {/* stylelint-disable declaration-colon-space-before */ color : #1aaaf8;/* stylelint-enable */ } .styles__main___2fYQv.styles__failed_color___TX70K {/* stylelint-disable declaration-colon-space-before */ color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__deployed_color___2Dktp {/* stylelint-disable declaration-colon-space-before */ color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__partlyRunning_color___2uUMr {/* stylelint-disable declaration-colon-space-before */ color : #f7d933;/* stylelint-enable */ } .styles__main___2fYQv.styles__canceled_color___20rSz {/* stylelint-disable declaration-colon-space-before */ color : #b6bec7;/* stylelint-enable */ } .styles__main___2fYQv.styles__running_color___19ap0 {/* stylelint-disable declaration-colon-space-before */ color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__succeeded_color___3VFVv {/* stylelint-disable declaration-colon-space-before */ color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__stopped_color___3iBW2 {/* stylelint-disable declaration-colon-space-before */ color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__empty_color___2O_a3 {/* stylelint-disable declaration-colon-space-before */ color : #9eb3d5;/* stylelint-enable */ } .styles__main___2fYQv.styles__emptyCluster_color___1QopG {/* stylelint-disable declaration-colon-space-before */ color : #9eb3d5;/* stylelint-enable */ } .styles__main___2fYQv.styles__terminated_color___2YlQx {/* stylelint-disable declaration-colon-space-before */ color : #ad85ff;/* stylelint-enable */ } .styles__main___2fYQv.styles__unreachable_color___1og0Z {/* stylelint-disable declaration-colon-space-before */ color : #9eb3d5;/* stylelint-enable */ } .styles__main___2fYQv.styles__pending_color___Qjyf_ {/* stylelint-disable declaration-colon-space-before */ color : #bddff0;/* stylelint-enable */ } .styles__main___2fYQv.styles__inProgress_color___2V0lG {/* stylelint-disable declaration-colon-space-before */ color : #f7d933;/* stylelint-enable */ } .styles__main___2fYQv.styles__canceling_color___l0G4U {/* stylelint-disable declaration-colon-space-before */ color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__success_color___27TH4 {/* stylelint-disable declaration-colon-space-before */ color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__initialized_color___iHa0i {/* stylelint-disable declaration-colon-space-before */ color : #1aaaf8;/* stylelint-enable */ } .styles__main___2fYQv.styles__active_color___2yOp8 {/* stylelint-disable declaration-colon-space-before */ color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__pendingDelete_color___3lbiH {/* stylelint-disable declaration-colon-space-before */ color : #ffc400;/* stylelint-enable */ } .styles__main___2fYQv.styles__locked_color___gqUvS {/* stylelint-disable declaration-colon-space-before */ color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__readable_color___3vqM0 {/* stylelint-disable declaration-colon-space-before */ color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__writable_color___Ylh_W {/* stylelint-disable declaration-colon-space-before */ color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__deploying_color___QocxW {/* stylelint-disable declaration-colon-space-before */ color : #00cbca;/* stylelint-enable */ } .styles__main___2fYQv.styles__unavailable_color___umZ_E {/* stylelint-disable declaration-colon-space-before */ color : #9967ff;/* stylelint-enable */ } .styles__main___2fYQv.styles__notRunning_border-color___1i6ZU {/* stylelint-disable declaration-colon-space-before */ border-color : #1aaaf8;/* stylelint-enable */ } .styles__main___2fYQv.styles__failed_border-color___3e4OQ {/* stylelint-disable declaration-colon-space-before */ border-color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__deployed_border-color___1Nlh6 {/* stylelint-disable declaration-colon-space-before */ border-color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__partlyRunning_border-color___d5i8H {/* stylelint-disable declaration-colon-space-before */ border-color : #f7d933;/* stylelint-enable */ } .styles__main___2fYQv.styles__canceled_border-color___3FPUr {/* stylelint-disable declaration-colon-space-before */ border-color : #b6bec7;/* stylelint-enable */ } .styles__main___2fYQv.styles__running_border-color___2uRZN {/* stylelint-disable declaration-colon-space-before */ border-color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__succeeded_border-color___2QeeU {/* stylelint-disable declaration-colon-space-before */ border-color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__stopped_border-color___2OlUb {/* stylelint-disable declaration-colon-space-before */ border-color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__empty_border-color___1it5x {/* stylelint-disable declaration-colon-space-before */ border-color : #9eb3d5;/* stylelint-enable */ } .styles__main___2fYQv.styles__emptyCluster_border-color___1F4IE {/* stylelint-disable declaration-colon-space-before */ border-color : #9eb3d5;/* stylelint-enable */ } .styles__main___2fYQv.styles__terminated_border-color___3FJ3t {/* stylelint-disable declaration-colon-space-before */ border-color : #ad85ff;/* stylelint-enable */ } .styles__main___2fYQv.styles__unreachable_border-color___3YUzI {/* stylelint-disable declaration-colon-space-before */ border-color : #9eb3d5;/* stylelint-enable */ } .styles__main___2fYQv.styles__pending_border-color___2IhMB {/* stylelint-disable declaration-colon-space-before */ border-color : #bddff0;/* stylelint-enable */ } .styles__main___2fYQv.styles__inProgress_border-color___1dHNl {/* stylelint-disable declaration-colon-space-before */ border-color : #f7d933;/* stylelint-enable */ } .styles__main___2fYQv.styles__canceling_border-color___Ucl3U {/* stylelint-disable declaration-colon-space-before */ border-color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__success_border-color___2-l8Y {/* stylelint-disable declaration-colon-space-before */ border-color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__initialized_border-color___3NIVW {/* stylelint-disable declaration-colon-space-before */ border-color : #1aaaf8;/* stylelint-enable */ } .styles__main___2fYQv.styles__active_border-color___ET7O0 {/* stylelint-disable declaration-colon-space-before */ border-color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__pendingDelete_border-color___3gReF {/* stylelint-disable declaration-colon-space-before */ border-color : #ffc400;/* stylelint-enable */ } .styles__main___2fYQv.styles__locked_border-color___2cW-Q {/* stylelint-disable declaration-colon-space-before */ border-color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__readable_border-color___1KjY1 {/* stylelint-disable declaration-colon-space-before */ border-color : #e12b0c;/* stylelint-enable */ } .styles__main___2fYQv.styles__writable_border-color___LfSh7 {/* stylelint-disable declaration-colon-space-before */ border-color : #70c9a0;/* stylelint-enable */ } .styles__main___2fYQv.styles__deploying_border-color___wgoSO {/* stylelint-disable declaration-colon-space-before */ border-color : #00cbca;/* stylelint-enable */ } .styles__main___2fYQv.styles__unavailable_border-color___3h3l3 {/* stylelint-disable declaration-colon-space-before */ border-color : #9967ff;/* stylelint-enable */ } .styles__blink___3eIzd { -webkit-animation: styles__blinker___2VoOx 1.25s ease-in-out infinite; animation: styles__blinker___2VoOx 1.25s ease-in-out infinite; } @-webkit-keyframes styles__blinker___2VoOx { 50% { opacity: 0.25; } } @keyframes styles__blinker___2VoOx { 50% { opacity: 0.25; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3dSkS { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3nLO2 { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3nLO2 { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___8PpG5 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___8PpG5 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__state___1sIRb { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .styles__state___1sIRb i, .styles__stateBackground___j_5W_ { width: 11px; height: 11px; } .styles__state___1sIRb i, .styles__stateBackground___j_5W_ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 1px; border-style: solid; background: #ffffff; position: absolute; z-index: 2; } .styles__stateBackground___j_5W_ { color: #ffffff; } .styles__stateIcon___1XOeE { display: -webkit-box; display: -ms-flexbox; display: flex; fill: #ffffff; } .styles__regular___2gPiy.styles__state___1sIRb { height: 28px; width: 28px; } .styles__regular___2gPiy.styles__state___1sIRb i, .styles__regular___2gPiy.styles__state___1sIRb .styles__stateBackground___j_5W_ { border-radius: 14px; border-width: 14px; } .styles__small___2zMwe.styles__state___1sIRb { height: 20px; width: 20px; } .styles__small___2zMwe.styles__state___1sIRb i, .styles__small___2zMwe.styles__state___1sIRb .styles__stateBackground___j_5W_ { border-radius: 10px; border-width: 10px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___uIrte { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3-C-F { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3-C-F { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___hxWM1 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___hxWM1 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__permission___3_uhi { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .styles__permission___3_uhi > * { lost-column-cycle: 3; } .styles__permission___3_uhi > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(29.1375% - 8.5px); max-width: calc(29.1375% - 8.5px); width: calc(29.1375% - 8.5px); } .styles__permission___3_uhi > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__permission___3_uhi > *:nth-child(1):last-child { margin-right: 0; } .styles__permission___3_uhi > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__permission___3_uhi > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(20.8125% - 9.5px); max-width: calc(20.8125% - 9.5px); width: calc(20.8125% - 9.5px); } .styles__permission___3_uhi > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__permission___3_uhi > *:nth-child(2):last-child { margin-right: 0; } .styles__permission___3_uhi > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__permission___3_uhi > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__permission___3_uhi > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__permission___3_uhi > *:nth-child(3):last-child { margin-right: 0; } .styles__permission___3_uhi > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__permission___3_uhi { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #445d6e; } .styles__permissionName___3xCR7 { font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: normal; } .styles__submitRow___xbkgU { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .styles__repoPermissions___3JDVS .styles__title___1DygX { font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: normal; padding-bottom: 12px; color: #445d6e; } .styles__repoPermissions___3JDVS .styles__info___3bPQX { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__repoPermissions___3JDVS .styles__info___3bPQX > * { lost-column-cycle: 2; } .styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(1):last-child { margin-right: 0; } .styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(49.95% - 6px); max-width: calc(49.95% - 6px); width: calc(49.95% - 6px); } .styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(2):last-child { margin-right: 0; } .styles__repoPermissions___3JDVS .styles__info___3bPQX > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__repoPermissions___3JDVS .styles__info___3bPQX { margin-bottom: 16px; } .styles__repoPermissions___3JDVS .styles__info___3bPQX .styles__card___3brvM { margin: 0; } .styles__repoPermissions___3JDVS .styles__list___12hm1 { padding: 12px 0; } .styles__repoPermissions___3JDVS .styles__list___12hm1 ul { list-style: none; padding: 0; margin: 0; } .styles__singleItemPermission___2Cf9P { display: flex; flex-flow: row wrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap } .styles__singleItemPermission___2Cf9P > * { lost-column-cycle: 4; } .styles__singleItemPermission___2Cf9P > *:nth-child(1) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(29.1375% - 8.5px); max-width: calc(29.1375% - 8.5px); width: calc(29.1375% - 8.5px); } .styles__singleItemPermission___2Cf9P > *:nth-child(1):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__singleItemPermission___2Cf9P > *:nth-child(1):last-child { margin-right: 0; } .styles__singleItemPermission___2Cf9P > *:nth-child(1):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__singleItemPermission___2Cf9P > *:nth-child(2) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(16.65% - 10px); max-width: calc(16.65% - 10px); width: calc(16.65% - 10px); } .styles__singleItemPermission___2Cf9P > *:nth-child(2):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__singleItemPermission___2Cf9P > *:nth-child(2):last-child { margin-right: 0; } .styles__singleItemPermission___2Cf9P > *:nth-child(2):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__singleItemPermission___2Cf9P > *:nth-child(3) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(8.325% - 11px); max-width: calc(8.325% - 11px); width: calc(8.325% - 11px); } .styles__singleItemPermission___2Cf9P > *:nth-child(3):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__singleItemPermission___2Cf9P > *:nth-child(3):last-child { margin-right: 0; } .styles__singleItemPermission___2Cf9P > *:nth-child(3):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__singleItemPermission___2Cf9P > *:nth-child(4) { flex-grow: 0; flex-shrink: 0; flex-basis: calc(41.625% - 7px); max-width: calc(41.625% - 7px); width: calc(41.625% - 7px); } .styles__singleItemPermission___2Cf9P > *:nth-child(4):nth-child(1n) { margin-right: 12px; margin-left: 0; } .styles__singleItemPermission___2Cf9P > *:nth-child(4):last-child { margin-right: 0; } .styles__singleItemPermission___2Cf9P > *:nth-child(4):nth-child(12n) { margin-right: 0; margin-left: auto; } .styles__singleItemPermission___2Cf9P { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 12px; } .styles__singleItemPermission___2Cf9P .styles__button___3CN0p { margin: 10px; max-width: 50px; } .styles__singleItemPermission___2Cf9P .styles__removeButton___OnmKM { margin: 10px 14px; } .styles__singleItemPermission___2Cf9P .styles__removeButton___OnmKM:hover { cursor: pointer; fill: #2496ed; } .styles__singleItemPermission___2Cf9P .styles__removeButton___OnmKM svg { width: 13px; height: 13px; position: relative; left: 5px; top: 3px; } .styles__singleItemPermission___2Cf9P .styles__permissions___3DYaH { margin-left: 0; } .styles__singleItemPermission___2Cf9P input { color: #27343b !important; padding-left: 10px !important; } .styles__message___1vVJZ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 25px 0 20px } .styles__message___1vVJZ.styles__failed___HTgTa { color: #ef4a53; } .styles__message___1vVJZ.styles__success___dvTQJ { color: #00cbca; } .styles__message___1vVJZ .styles__iconWrapper___3ggsa { margin-right: 8px; } @media only screen and (max-width: 960px) { .styles__singleItemPermission___2Cf9P .styles__permissions___3DYaH { margin-left: 35px !important; } } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3zCeW { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___vH39K { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___vH39K { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___Htcn4 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___Htcn4 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__main___1PCpy { margin-bottom: 40px; } .styles__main___1PCpy .styles__card___WVzHD { margin-bottom: 12px; } .styles__permissionRow___3cV35 { border-top: 1px solid #e0e4e7; padding: 24px 12px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3GVAb { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2r4rr { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2r4rr { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___30EF1 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___30EF1 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__deleteButtons___psOgb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 16px; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___Ll-n1 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___iBLia { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___iBLia { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2zmCM { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2zmCM { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__main___3e3tT { margin-bottom: 40px; } .styles__main___3e3tT .styles__card___2yHXN { margin-bottom: 12px; } .styles__main___3e3tT .styles__privacyHeader___4VFJO { color: #8f9ea8; margin-top: 24px; } .styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertyFields___2wQRC { width: 50%; } .styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertySection___1StlH { color: #8f9ea8 } .styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertySection___1StlH:last-child { margin-top: 24px; } .styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertyLabel___3iyls { color: #8f9ea8; } .styles__main___3e3tT .styles__propertiesCard___14iZa .styles__propertyLabel___3iyls input { color: #27343b !important; } .styles__main___3e3tT .styles__propertiesCard___14iZa .styles__saveButton___2-MwL { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 16px; } .styles__main___3e3tT .styles__deleteCard___3gJI- .styles__deleteDescription___3aXff { display: table-cell; width: 100%; } .styles__main___3e3tT .styles__deleteCard___3gJI- .styles__deleteButton___1Qx_g { display: table-cell; vertical-align: middle; text-align: right; } .styles__privacyText___KyaVK { margin-left: 12px; } .styles__privateTeams___1sHLM { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 16px; font-family: 'Open Sans', sans-serif; } .styles__privateTeams___1sHLM .styles__toggle___1mRQT { margin-bottom: 5px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; cursor: pointer; } .styles__privateTeams___1sHLM .styles__toggle___1mRQT:last-child { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; padding-bottom: 0; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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: #2496ed; font-weight: 600; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___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; } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___eIxo3 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3zJlU { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3zJlU { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___35PC2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___35PC2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__main___ReGd7 { position: fixed; width: 100vw; height: 100vh; z-index: 999; overflow: hidden; left: 0; top: 0; } .styles__center___2YI_N { position: absolute !important; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media only screen and (min-width: 601px) { .styles__showTopnav___3qrNl { top: 64px; } .styles__showTopnav___3qrNl .styles__center___2YI_N { margin-top: -64px; } } @media only screen and (max-width: 600px) { .styles__showTopnav___3qrNl { top: 100px; } .styles__showTopnav___3qrNl .styles__center___2YI_N { margin-top: -100px; } } /*! 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 */ } /* defined here: https://www.figma.com/file/rien0oukkvklddrnv8akct/all-colors_dds-(copy) */ /* a.k.a. docker red */ /* a.k.a. docker blue */ /* a.k.a. docker green */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Dictionary ----------------------------------------------------------------------------- */ /* Purples - lightest to darkest */ /* Blues - lightest to darkest */ /* Greens - lightest to darkest */ /* Reds - lightest to darkest */ /* Yellows - lightest to darkest */ /* Grays - lightest to darkest */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* -base background colors */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .global__wrapped___1QO90 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes global__fadein___1lfBH { from { opacity: 0; } to { opacity: 1; } } @keyframes global__fadein___1lfBH { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes global__load8___3frNC { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes global__load8___3frNC { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 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; }