/* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___3y4fw { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3v7Mf { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3v7Mf { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___coHjG { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___coHjG { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__container___1uMTK { margin: 48px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .styles__container___1uMTK h2 { font-weight: 600; font-size: 38px; margin-top: 20px; margin-bottom: 20px; } .styles__whale___2jfiR { width: 250px; } .styles__explanation___1s3BB { font-size: 18px; color: #70787d; text-align: center; max-width: 500px; } .styles__sessionId___2gqKM { font-size: 14px; color: #70787d; text-align: center; max-width: 500px; margin-top: 16px; } /* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1QRXx { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___jfw3l { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___jfw3l { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___3gOcW { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___3gOcW { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__supertiny___24LbU { width: 18px; height: 18px; margin: 0 auto; position: relative; } .styles__supertiny___24LbU::after { content: ''; position: absolute; left: calc(50% - 9px); top: calc(50% - 9px); width: 16px; height: 16px; border-radius: 50%; border-top: 1px solid transparent; border-right: 1px solid #086dd7; border-bottom: 1px solid #086dd7; border-left: 1px solid #086dd7; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__tiny___1FP-w { width: 27px; height: 27px; margin: 0 auto; position: relative; } .styles__tiny___1FP-w::after { content: ''; position: absolute; left: calc(50% - 13.5px); top: calc(50% - 13.5px); width: 24px; height: 24px; border-radius: 50%; border-top: 1.5px solid transparent; border-right: 1.5px solid #086dd7; border-bottom: 1.5px solid #086dd7; border-left: 1.5px solid #086dd7; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__small___2paN8 { width: 40.5px; height: 40.5px; margin: 0 auto; position: relative; } .styles__small___2paN8::after { content: ''; position: absolute; left: calc(50% - 20.25px); top: calc(50% - 20.25px); width: 36px; height: 36px; border-radius: 50%; border-top: 2.25px solid transparent; border-right: 2.25px solid #086dd7; border-bottom: 2.25px solid #086dd7; border-left: 2.25px solid #086dd7; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__regular___DPl72 { width: 54px; height: 54px; margin: 0 auto; position: relative; } .styles__regular___DPl72::after { content: ''; position: absolute; left: calc(50% - 27px); top: calc(50% - 27px); width: 48px; height: 48px; border-radius: 50%; border-top: 3px solid transparent; border-right: 3px solid #086dd7; border-bottom: 3px solid #086dd7; border-left: 3px solid #086dd7; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__large___vefXs { width: 90px; height: 90px; margin: 0 auto; position: relative; } .styles__large___vefXs::after { content: ''; position: absolute; left: calc(50% - 45px); top: calc(50% - 45px); width: 80px; height: 80px; border-radius: 50%; border-top: 5px solid transparent; border-right: 5px solid #086dd7; border-bottom: 5px solid #086dd7; border-left: 5px solid #086dd7; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__xlarge___2mMq6 { width: 135px; height: 135px; margin: 0 auto; position: relative; } .styles__xlarge___2mMq6::after { content: ''; position: absolute; left: calc(50% - 67.5px); top: calc(50% - 67.5px); width: 120px; height: 120px; border-radius: 50%; border-top: 7.5px solid transparent; border-right: 7.5px solid #086dd7; border-bottom: 7.5px solid #086dd7; border-left: 7.5px solid #086dd7; font-size: 10px; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: styles__load8___3gOcW 1.1s infinite linear; animation: styles__load8___3gOcW 1.1s infinite linear; } .styles__overlay-primary___tfKbC::after { border-right-color: #086dd7; border-bottom-color: #086dd7; border-left-color: #086dd7; } .styles__overlay-white___rW1TF::after { border-right-color: #f9f9fa; border-bottom-color: #f9f9fa; border-left-color: #f9f9fa; } /* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___eIxo3 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___3zJlU { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___3zJlU { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___35PC2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___35PC2 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__main___ReGd7 { position: fixed; width: 100vw; height: 100vh; z-index: 999; overflow: hidden; left: 0; top: 0; } .styles__center___2YI_N { position: absolute !important; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media only screen and (min-width: 601px) { .styles__showTopnav___3qrNl { top: 64px; } .styles__showTopnav___3qrNl .styles__center___2YI_N { margin-top: -64px; } } @media only screen and (max-width: 600px) { .styles__showTopnav___3qrNl { top: 100px; } .styles__showTopnav___3qrNl .styles__center___2YI_N { margin-top: -100px; } } /* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1agHr { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1T76Y { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1T76Y { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___9AgAl { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___9AgAl { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__wrapper___EX-Nj { background: #00084d; text-align: center; color: #ffffff; font-weight: 600; min-height: 38px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .styles__wrapper___EX-Nj.styles__secondary___2o0LW { background: #393f49; } .styles__text___3a6LX { font-size: 13px; margin: 10px 40px; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } .styles__close___XHEiQ { margin-right: 20px; font-size: 16px; cursor: pointer; } .styles__icon___1Zq5X { margin-right: 8px; } .styles__bannerLinkText___3DcEK { margin-left: 4px; } @media only screen and (max-width: 960px) { .styles__wrapper___EX-Nj { z-index: 100; } .styles__text___3a6LX { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__icon___1Zq5X { margin: 0; } } /* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___34bT- { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2_JtC { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2_JtC { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ .dicon { width: 24px; height: 24px; } /* lib/constants/sizes **************/ .styles__supertiny___piMs- { width: 8px; height: 8px; } .styles__tiny___16fk0 { width: 12px; height: 12px; } .styles__small___3FOEa { width: 18px; height: 18px; } .styles__regular___2wAxR { width: 24px; height: 24px; } .styles__large___2556i { width: 40px; height: 40px; } .styles__xlarge___5Q5Wk { width: 60px; height: 60px; } /* lib/constants/variants **************/ .styles__primary___2D4qw { fill: #086dd7; } .styles__secondary___11gMY { fill: #88d5c0; } .styles__warn___3tokU { fill: #fbb552; } .styles__panic___2ngky { fill: #d52536; } .styles__dull___cV3u9 { fill: #8993a5; } /* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2hpxa { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2VEtj { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2VEtj { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___-yOxU { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___-yOxU { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__footerWrapper___1Rljn { font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; background-color: #00084d; color: #ffffff; } .styles__contentWrapper___1L_-i { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .styles__section___XuuIR { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 40px 0; } @media only screen and (max-width: 1200px) { .styles__section___XuuIR { padding-left: 12px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .styles__linksMap___3rFFr { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 80%; } @media only screen and (max-width: 600px) { .styles__linksMap___3rFFr { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } } .styles__column___1cl5g { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-width: 150px; } .styles__column___1cl5g a:not(:last-child) { margin-bottom: 12px; } @media only screen and (min-width: 601px) { .styles__column___1cl5g:not(:last-child) { margin-right: 80px; } } @media only screen and (max-width: 600px) { .styles__column___1cl5g:not(:last-child) { margin-bottom: 24px; } } @media only screen and (max-width: 1200px) { .styles__column___1cl5g:first-child { display: none; } .styles__column___1cl5g { min-width: 100px; } } @media only screen and (max-width: 960px) { .styles__column___1cl5g:first-child { display: none; } .styles__column___1cl5g { min-width: 50px; } } .styles__column___1cl5g a, .styles__links___2sWbh a { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; text-decoration: none; opacity: 0.6; cursor: pointer } .styles__column___1cl5g a:hover, .styles__links___2sWbh a:hover { opacity: 1; } .styles__links___2sWbh a:not(:last-child) { margin-right: 32px; } .styles__copyright___11bRD { font-weight: 500; } .styles__copyright___11bRD a { text-decoration: none; } .styles__listTitle___R9nW5 { font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: normal; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 700; margin-bottom: 12px } .styles__listTitle___R9nW5.styles__social___3RJzg { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .styles__subTitle___1dG4B { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 800; margin: 16px 0; } .styles__socialLinks___2Dlcm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 250px; } @media only screen and (max-width: 1200px) { .styles__socialLinks___2Dlcm { margin-top: 20px; } } .styles__icon___32Su8 { fill: white; } /* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___38sD6 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2QkBS { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2QkBS { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2H5uJ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2H5uJ { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .styles__searchForm___2IJ7y { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; padding: 2px 0; min-width: 210px; margin-right: 20px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } @media only screen and (max-width: 600px) { .styles__searchForm___2IJ7y { width: 300px; margin: 12px 0; } } .styles__root___UEcP2 { position: relative; } .styles__inputRoot___3WlMs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; width: 100%; position: relative; } .styles__icon___vcs6b, .styles__loading___4atZC { fill: #ffffff; position: absolute; top: 50%; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } .styles__input___3r96R { background-color: rgba(255, 255, 255, .2); border: 0; border-radius: 2px; padding: 8px 12px; color: #ffffff; text-indent: 24px } .styles__input___3r96R:focus { color: #505968; background-color: #ffffff; } .styles__input___3r96R:focus + .styles__icon___vcs6b { fill: #505968; } .styles__menu___3svVW { border-radius: 2px; -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, .1); box-shadow: 0 2px 12px rgba(0, 0, 0, .1); background: #ffffff; position: absolute; top: 0; z-index: 999; width: 100%; padding: 0; max-height: none; } .styles__groupHeader___1bUGm { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; cursor: default; color: #8993a5; text-align: left; padding: 12px; } .styles__option___327Kl { color: #505968; padding: 8px 20px; cursor: pointer; text-align: left; } .styles__match___2ccXF { color: #086dd7; font-weight: 500; } .styles__isOneCharSearchMsg___3lqC8 { position: absolute; width: auto; max-width: 364px; height: 24px; top: 100%; -webkit-transform: translateY(-11px); transform: translateY(-11px); background: #ffffff; font-size: 12px; border-radius: 2px; -webkit-box-shadow: 0 2px 3px #8993a5; box-shadow: 0 2px 3px #8993a5; padding: 3.6px; color: #393f49; z-index: 1; -webkit-animation: styles__fadein___2QkBS 0.5s; animation: styles__fadein___2QkBS 0.5s; } .styles__triangle___sOVpX { position: absolute; bottom: 100%; -webkit-transform: translateY(75%); transform: translateY(75%); z-index: 2; left: 9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ffffff; } @keyframes styles__fadein___2QkBS { from { opacity: 0; } to { opacity: 1; } } /* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___1HuoN { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___2Djn_ { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___2Djn_ { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___2MM-e { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___2MM-e { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Top Nav: - default avatar: white fingerprint - personalized avatar: blue border (1) Org list (2) Community Header Profile (3) Publisher Header Profile: - personalized avatar: grey border - the default avatar (i.e., the fingerprint): no border and is a blue fingerprint */ .styles__container___1-c9A { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } img.styles__avatar___3Wzgz { border-radius: 50%; -webkit-box-sizing: content-box; box-sizing: content-box; } .styles__default___3Uxzu img.styles__avatar___3Wzgz { border: none; padding: 3px; } .styles__greyBorder___3U4Fh img.styles__avatar___3Wzgz { border: 3px solid #e1e2e6; } .styles__blueBorder___3wfrJ img.styles__avatar___3Wzgz { border: 3px solid #8bc7f5; } .styles__placeholder___1CvzL { padding: 3px; -webkit-box-sizing: content-box; box-sizing: content-box; } /* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .styles__wrapped___2J6e5 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes styles__fadein___1vDsq { from { opacity: 0; } to { opacity: 1; } } @keyframes styles__fadein___1vDsq { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes styles__load8___1zkZT { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes styles__load8___1zkZT { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* flexbox sticky footer */ /* https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ .styles__app___1o1RI { /* In development: make the app visible once css has loaded */ display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; min-height: 100vh; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .styles__app___1o1RI.styles__noScroll___2cLFq { overflow-y: hidden; height: 100vh; } .styles__main___1pg40 { position: relative; -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; min-height: calc(100vh - 64px); } .styles__white___NRcyJ { background: #ffffff; } .styles__offWhite___YQoVI { background: #f9f9fa; } .styles__grey___MVUF_ { background: #efeff2; } /* DESIGN SYSTEM COLOUR PALETTE */ /* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */ /* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */ /* All legacy should be transitioned to these */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* primary */ /* media queries */ /* lib/constants/sizes */ /* layout */ /* spacing */ /* misc */ /* body font sizes */ /* heading font sizes */ /* font family */ /* ----------------------------------------------------------------------------- | Color Purpose Vars ----------------------------------------------------------------------------- */ /* lib/constants/variants */ /* CTA component colors */ /* cohesion font colors */ /* possibly used in mixins */ /* Autobuilds Colors */ /* audit logs colors */ /* State Colors */ /* are these being used in mixins? */ /* this variable is being overwritten in cloud/Core/object/components/State/styles.css */ /* -- These use colors not found in the styleguide -- */ /* - end -- */ /* Note: These are volumes states and not actual/valid object states. Added here for completion */ /* button */ /* select */ /* input */ /* stylelint-disable value-list-comma-newline-after */ /* box-shadow for store cards */ /* component: tab */ /* Publish flow */ /* Public Profile */ /* v2 */ /* Sign up form width */ /** This was extracted from the Wrapped component. There are subtle differences from the wrapped mixin, but they could probably be unified with a little effort. It's defined here as a rule rather than a mixin so it can be used with `composes`, which generally yields smaller code bundles. */ .global__wrapped___1QO90 { margin-left: auto; margin-right: auto; width: 100%; max-width: 1280px; padding-left: 12px; padding-right: 12px; } /* https://goo.gl/Mus6xj */ /* Font sizes */ /* columns */ /* Three equal columns */ /* Rows */ /* TODO: Use flex. Flexbox doesn't seem to work on iOS safari/chrome when overriding a lost column for small devices (?)(Registration page) */ @-webkit-keyframes global__fadein___1lfBH { from { opacity: 0; } to { opacity: 1; } } @keyframes global__fadein___1lfBH { from { opacity: 0; } to { opacity: 1; } } /* flex does not work inside firefox buttons, this is a workaround http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */ /* Causes text that overflows in an element to be truncated with an ellipsis. */ /* A little trick for vertically centering text content that doesn't wrap when the element's height is known. */ @-webkit-keyframes global__load8___3frNC { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes global__load8___3frNC { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } html, body { min-height: 100%; font-size: 14px; /* https://goo.gl/WilEUt */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { overflow-x: hidden; } h1, h2, h3, h4, h5, h6, p { margin-bottom: 1em; margin-top: 1em; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #e1e2e6; margin: 1em 0; padding: 0; } code { font-family: 'Roboto Mono', consolas, monaco, monospace; } a { color: inherit; } /* Helpers */ .wrapped { margin: 0 auto; width: 100%; max-width: 1280px; } @media (min-width: 600px) { .wrapped { padding-left: 12px; padding-right: 12px; } } .wrapped { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; } a.unstyled { text-decoration: none; color: inherit; } a.unstyled:visited { color: inherit; } .headline { font-size: 24px; line-height: 32px; font-weight: 400; } .title { font-size: 18px; line-height: 28px; font-weight: 500; letter-spacing: 0.005em; } .subhead { font-size: 16px; font-weight: 400; letter-spacing: 0.01em; line-height: 24px; } .pageTitle { font-size: 24px; line-height: 32px; color: #393f49; font-weight: 600; } .boldContent { font-size: 14px; line-height: 20px; color: #393f49; font-weight: 500; } .content { font-size: 14px; line-height: 20px; color: #393f49; } .tertiaryContent { font-size: 12px; line-height: 16px; color: #393f49; } .hidden { display: none !important; } .flexCentered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .Select-menu-outer { z-index: 5 !important; }