@charset "UTF-8";
@-webkit-keyframes anim-CampaignHero-title { 0% { opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px); }
  100% { opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes anim-CampaignHero-title { 0% { opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px); }
  100% { opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes heroteaser-bg-animation { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes heroteaser-bg-animation { 0% { opacity: 0; }
  100% { opacity: 1; } }

.styleguide-h1 { font-size: 120px; font-size: 7.5rem; line-height: 1; font-weight: 100; margin: 50px 0 .5em; }

@media screen and (max-width: 750px) { .styleguide-h1 { font-size: 60px; font-size: 3.75rem; font-weight: 200; } }

.styleguide-h2 { color: #000000; font-size: 30px; font-size: 1.875rem; font-weight: bold; margin: 1.5em 0 0.25em; }

.styleguide-h3 { font-size: 24px; font-size: 1.5rem; font-weight: bold; margin: 1em 0 .1em; }

.styleguide-h4 { font-size: 20px; font-size: 1.25rem; font-weight: bold; margin: 1em 0 0; }

.styleguide-layout-sample { background-color: #f0f0f0; border: 1px solid black; padding: 3px 5px; }

.styleguide-intro { font-size: 40px; font-size: 2.5rem; margin-top: -2ex; line-height: 1; margin-bottom: .5em; font-weight: 200; }

@media screen and (max-width: 750px) { .styleguide-intro { font-size: 30px; font-size: 1.875rem; margin-top: -1ex; } }

.styleguide-notes { list-style-image: none; list-style-type: none; margin-left: 0; padding: 0; margin: 0; margin-top: 1ex; margin-bottom: 4em; }

.styleguide-notes > li { clear: left; padding: 3px 0; margin: 0; }

.styleguide-notes > li > strong { float: left; width: 6em; margin-bottom: 1px; margin-right: 1em; }

.styleguide-notes a { text-decoration: underline; text-decoration: underline solid rgba(0, 0, 0, 0.3); }

[data-styleguide-status] { background: #D4D4D4; padding: 5px 7px 5px 5px; border-radius: 3px; text-transform: uppercase; line-height: 1; display: inline-block; font-size: 80%; font-weight: bold; color: #333; }

[data-styleguide-status]:before { margin-right: 6px; font-size: 10px; font-size: 0.625rem; }

[data-styleguide-status="ready_for_impl_"] { color: #686868; }

[data-styleguide-status="ready_for_impl_"]:before { content: '✌🏿 '; }

[data-styleguide-status="in_progress"] { color: #E09D00; }

[data-styleguide-status="in_progress"]:before { content: '☢️ '; }

[data-styleguide-status="rejected"] { color: #8B0000; }

[data-styleguide-status="rejected"]:before { content: '❗️ '; }

[data-styleguide-status="testing"] { color: #B300CC; }

[data-styleguide-status="testing"]:before { content: '⚛️ '; }

[data-styleguide-status="ready_for_deployment"], [data-styleguide-status="closed"] { color: #4A8B00; }

[data-styleguide-status="ready_for_deployment"]:before, [data-styleguide-status="closed"]:before { content: '✅ '; }

[data-styleguide-status="deployed"], [data-styleguide-status="done"] { font-weight: bold; color: #7EBA39; }

[data-styleguide-status="deployed"]:before, [data-styleguide-status="done"]:before { content: '❎ '; }

.styleguide-alarm:before { content: '🚨 '; -webkit-animation: styleguide-blink 0.35s infinite; animation: styleguide-blink 0.35s infinite; }

@-webkit-keyframes styleguide-blink { 50% { opacity: 0.5; } }

@keyframes styleguide-blink { 50% { opacity: 0.5; } }

.styleguide-content > p { margin-top: 1ex; margin-bottom: 1ex; }

.styleguide-release_note p { margin-bottom: 0; }

.styleguide-release_note small { display: block; }

.styleguide-layout-sample { background-color: rgba(255, 255, 255, 0.9); border: 1px solid black; padding: 3px 5px; }

.styleguide-richtext strong, .styleguide-richtext em { font-weight: bold; }

.styleguide-richtext > p { margin: 1em 0; }

.styleguide-richtext > ul, .styleguide-richtext > ol { margin: 2em 0; }

.styleguide-richtext > ul > li, .styleguide-richtext > ol > li { display: list-item; list-style: disc; margin-left: 2em; }

.styleguide-richtext > ol > li { display: list-item; list-style: inside; }

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

.styleguide-richtext code { font-family: Monaco, Courier, monospace; font-size: 0.75em; background-color: #eaeaea; border-radius: 4px; padding: 0.1em 0.25em 0.15em; }

.styleguide--nav { position: relative; }

.styleguide_nav { background: #f2f2f2; border: 1px solid #f2f2f2; }

.styleguide_nav .styleguide_nav--modules { height: 0; overflow: hidden; box-sizing: border-box; visibility: hidden; transition: all 200ms; }

.styleguide_nav li { display: block; margin: 6px 0; }

.styleguide_nav a { text-decoration: none; line-height: 1.2; }

.styleguide_nav .styleguide_nav--category { font-weight: bold; }

.styleguide_nav .styleguide_nav--group { padding: 5px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin: 0; }

.styleguide_nav .styleguide_nav--group:last-child { border-bottom: 0; }

.styleguide_nav--category { font-weight: bold; cursor: pointer; position: relative; }

.styleguide_nav--category > button { position: absolute; left: 0; width: 100%; height: 100%; text-align: left; text-indent: -9999px; }

.styleguide_nav--module > a { display: inline-block; padding: 1px 2px; }

.styleguide_nav.is-filtered .styleguide_nav--modules, .styleguide_nav--group.is-active > .styleguide_nav--modules { height: auto; visibility: visible; margin-bottom: 1em; padding-left: 18px; }

.styleguide_nav--module.is-active > a { background: black; color: white; font-weight: bold; }

.styleguide_nav--filter { font-size: 18px; font-size: 1.125rem; margin-bottom: 20px; width: 100%; box-sizing: border-box; }

.styleguide_nav--back { display: block; margin-bottom: 20px; }

.styleguide_nav--back:before { content: "← "; }

.styleguide_nav--toggle { display: inline-block; text-indent: -9999px; letter-spacing: -1ex; color: transparent; width: 34px; height: 34px; background: #f0f0f0; float: right; position: relative; }

.styleguide_nav--toggle:before { content: ""; display: block; position: absolute; width: 16px; height: 10px; top: calc(50% - 7px); left: calc(50% - 8px); border: 2px solid black; border-left-style: none; border-right-style: none; transition: border-width .15s, height .15s, top .15s, -webkit-transform .15s; transition: border-width .15s, height .15s, transform .15s, top .15s; transition: border-width .15s, height .15s, transform .15s, top .15s, -webkit-transform .15s; }

.styleguide_nav--toggle:after { content: ""; display: block; position: absolute; width: 16px; height: 2px; top: calc(50% - 1px); left: calc(50% - 8px); background: black; transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; }

html:not(.can-touch) .styleguide_nav--toggle:active:after, html:not(.can-touch) .styleguide_nav--toggle:hover:after { -webkit-transform: scale(0.75) translateY(-5px) rotate(45deg); transform: scale(0.75) translateY(-5px) rotate(45deg); transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; }

html:not(.can-touch) .styleguide_nav--toggle:active:before, html:not(.can-touch) .styleguide_nav--toggle:hover:before { height: 0; border-width: 1px; top: calc(50% - 1px); transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; -webkit-transform: scale(0.75) translateY(5px) rotate(-45deg); transform: scale(0.75) translateY(5px) rotate(-45deg); }

.styleguide_grid--nav:not(.collapsed) .styleguide_nav--toggle:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; }

.styleguide_grid--nav:not(.collapsed) .styleguide_nav--toggle:before { height: 0; border-width: 1px; top: calc(50% - 1px); -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; }

html:not(.can-touch) .styleguide_grid--nav:not(.collapsed) .styleguide_nav--toggle:active:after, html:not(.can-touch) .styleguide_grid--nav:not(.collapsed) .styleguide_nav--toggle:hover:after { -webkit-transform: scale(0.75) translateY(-5px) rotate(-45deg); transform: scale(0.75) translateY(-5px) rotate(-45deg); transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; }

html:not(.can-touch) .styleguide_grid--nav:not(.collapsed) .styleguide_nav--toggle:active:before, html:not(.can-touch) .styleguide_grid--nav:not(.collapsed) .styleguide_nav--toggle:hover:before { transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; -webkit-transform: scale(0.75) translateY(5px) rotate(45deg); transform: scale(0.75) translateY(5px) rotate(45deg); }

.styleguide_header { padding: 20px 40px; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); margin-bottom: 20px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; }

@media screen and (max-width: 750px) { .styleguide_header { padding-left: 20px; padding-right: 20px; } }

.styleguide_header--title { font-size: 140%; font-weight: bold; margin-right: auto; }

.styleguide_header--title > img { height: 1.8em; vertical-align: baseline; margin: -.5em .5ex -.5em 0; }

.styleguide_header--nav a { margin-right: 1em; }

.styleguide_header--nav a:last-child { margin-right: 0; }

.styleguide_header--nav a.is-active { font-weight: bold; }

.styleguide-example { position: relative; background-color: white; border: 10px solid #f2f2f2; min-height: 20px; padding: 20px; margin-top: 20px; }

.styleguide-example:after { display: block; content: ""; clear: both; }

@media (max-width: 500px) { .styleguide-example { padding: 15px 10px; border-width: 5px; margin: 0 -15px; } }

.styleguide-example--dark { background: #3C4150; margin: -20px; padding: 20px; }

.styleguide-code { font-size: 14px; font-size: 0.875rem; overflow: hidden; white-space: pre; border: 10px solid #f2f2f2; background: #f2f2f2; padding: 10px; border-top: 0; box-sizing: border-box; min-height: 0; max-height: 40em; transition: all 290ms ease-in-out; }

.styleguide-code .CodeMirror { background: #f2f2f2; height: auto; }

.styleguide-code .CodeMirror-scroll { max-height: 400px; }

.styleguide-code .CodeMirror-focused .CodeMirror-selected { background: #B2D8E7; }

.styleguide-code .cm-highlightPatterns { background: rgba(255, 204, 0, 0.5); }

.styleguide-code.is-new { overflow: hidden; max-height: 0; padding-top: 0; padding-bottom: 0; }

.styleguide-example_section { margin: 2em 0; }

.styleguide-codebutton { text-align: right; }

.styleguide-codebutton > button { font-size: 75%; color: #777; margin-top: 10px; }

.styleguide_category_intro { margin-bottom: 120px; }

.styleguide_category_intro li > a.is-backend { color: green; border-bottom: 1px solid; }

.styleguide_category_intro li > a > .styleguide-id { font-size: 12px; font-size: 0.75rem; }

.styleguide_category_intro li > [data-styleguide-status] { float: left; position: relative; padding: 0; background: none; margin-top: 1.5ex; margin-right: 1ex; font-size: 12px; font-size: 0.75rem; }

.styleguide_category_intro li > [data-styleguide-status] > span { display: none; }

html:not(.can-touch) .styleguide_category_intro li > [data-styleguide-status]:active > span, html:not(.can-touch) .styleguide_category_intro li > [data-styleguide-status]:hover > span { position: absolute; display: block; white-space: nowrap; background: black; color: white; right: 22px; bottom: 0; padding: 5px; }

.styleguide_category_intro--graphic { display: block; position: relative; height: 0; padding-top: 100%; background: #CCE2E3; margin-top: 1em; margin-bottom: 1em; }

.styleguide_category_intro--graphic img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; max-width: 120px; }

.styleguide_category_intro:nth-child(4) > .styleguide_category_intro--graphic { background: #006E73; }

.styleguide_category_intro--filter { display: block; width: 100%; font-size: inherit; margin-top: 1em; margin-bottom: 1em; }

.styleguide_category_intro_container { margin-left: auto; margin-right: auto; margin-top: 80px; max-width: 1280px; }

.styleguide_category_intro_container:after { content: ""; display: table; clear: both; }

.styleguide_category_intro_container > .styleguide_category_intro { float: left; width: calc(25% - 12px); margin-right: 16px; }

@media screen and (max-width: 750px) { .styleguide_category_intro_container > .styleguide_category_intro { width: calc(50% - 8px); margin-right: 16px; }
  .styleguide_category_intro_container > .styleguide_category_intro:nth-child(2n) { margin-right: 0; } }

.styleguide_category_intro_container > .styleguide_category_intro:last-child { margin-right: 0; }

.styleguide_category_intro_container .styleguide-h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.styleguide { margin: 0 40px; }

.styleguide_grid { margin: 0 40px; }

.styleguide_grid:after { display: block; content: ""; clear: both; }

.styleguide_grid--nav { float: left; position: relative; z-index: 100; width: 18em; padding-right: 40px; }

.styleguide_grid--nav .styleguide_nav--toggle { margin-left: 20px; transition: margin .2s ease-out; }

.styleguide_grid--nav .styleguide_nav--back { display: inline-block; transition: margin-left .2s ease-out; }

.styleguide_grid--nav.collapsed { width: 0px; padding: 0; white-space: nowrap; }

.styleguide_grid--nav.collapsed .styleguide--nav > * { display: none; }

.styleguide_grid--nav.collapsed .styleguide_nav--toggle, .styleguide_grid--nav.collapsed .styleguide_nav--back { display: block; white-space: nowrap; }

.styleguide_grid--nav.collapsed .styleguide_nav--toggle { display: inline-block; margin-left: 0; margin-right: 10px; float: none; }

.styleguide_grid--nav.collapsed .styleguide_nav--back { display: inline-block; margin-left: 10px; }

.styleguide_grid--nav.collapsed + .styleguide_grid--content { margin-left: 0; overflow: visible; }

.styleguide_grid--content { margin-left: 18em; padding-bottom: 100px; border: 1px solid transparent; overflow: hidden; }

.styleguide-shownav { display: none; }

@media screen and (max-width: 750px) { .styleguide { margin: 0 20px; }
  .styleguide_grid { margin: 0 20px; } }

.styleguide-listing [data-styleguide-status] { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 60%; margin-top: 5px; }

.styleguide-component_link { display: block; box-sizing: border-box; position: relative; color: #006E73; font-weight: bold; font-size: 16px; }

.styleguide-component_link [data-styleguide-status] { vertical-align: middle; margin-top: 0; }

.styleguide-component_link strong > a { text-decoration: none; }

.styleguide-component_link .styleguide-id { color: black; font-size: 80%; display: inline; }