@charset "UTF-8";
.styleguide-h1, .styleguide-richtext h1 { font-size: 120px; line-height: 1; font-weight: bold; margin: 50px 0 0.5em; }

@media (max-width: 600px) { .styleguide-h1, .styleguide-richtext h1 { font-size: 60px; } }

.styleguide-h2, .styleguide-richtext h2 { color: black; font-size: 30px; font-weight: bold; margin: 1.5em 0 0.25em; }

.styleguide-h3, .styleguide-richtext h3 { font-size: 20px; font-weight: bold; margin: 1em 0 0.5em; }

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

.styleguide-intro { font-size: 30px; margin-top: -3ex; line-height: 1.3; margin-bottom: 0.5em; font-family: Georgia, serif; font-style: italic; }

@media (max-width: 600px) { .styleguide-intro { font-size: 30px; 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; -webkit-text-decoration: underline solid rgba(0, 0, 0, 0.3); text-decoration: underline solid rgba(0, 0, 0, 0.3); }

[data-styleguide-status] { background: #eee; 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: 0.6ex; }

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

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

[data-styleguide-status='in_progress'] { color: #a18400; }

[data-styleguide-status='in_progress']:before { content: '💪 '; }

[data-styleguide-status='failed'] { color: #8b0000; }

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

[data-styleguide-status='review'] { color: #4a8b00; }

[data-styleguide-status='review']:before { content: '♻️ '; }

[data-styleguide-status='closed'] { color: #4a8b00; }

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

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

.styleguide-release_note { margin-bottom: 1em; }

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

.styleguide-release_note small { display: block; opacity: 0.6; font-size: 75%; }

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

.styleguide-richtext code { font: 80%/1.4 Monaco, Courier; color: #333; padding: 1px 3px; background: white; }

.styleguide-richtext pre > code { display: block; padding: 1em; }

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

.styleguide-richtext pre, .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--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; 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: 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: 14px; top: calc(50% - 7px); left: calc(50% - 8px); border: 2px solid black; border-left-style: none; border-right-style: none; transition: border-width 0.15s, height 0.15s, transform 0.15s, top 0.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: transform 0.15s; }

.styleguide_nav--toggle:hover:after { transform: scale(0.75) translateY(-5px) rotate(45deg); transition: transform 0.15s; }

.styleguide_nav--toggle:hover:before { height: 0; border-width: 1px; top: calc(50% - 1px); transition: transform 0.15s; transform: scale(0.75) translateY(5px) rotate(-45deg); }

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

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

.styleguide_grid--nav:not(.collapsed) .styleguide_nav--toggle:hover:after { transform: scale(0.75) translateY(-5px) rotate(-45deg); transition: transform 0.15s; }

.styleguide_grid--nav:not(.collapsed) .styleguide_nav--toggle:hover:before { transition: transform 0.15s; transform: scale(0.75) translateY(5px) rotate(45deg); }

.styleguide_header { padding: 20px 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.5); margin-bottom: 20px; display: flex; align-items: flex-end; }

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

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

.styleguide_header--title > img { height: 1.8em; vertical-align: baseline; margin: -0.5em 0.5ex -0.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; }

/* BASICS */
.CodeMirror { /* Set height, width, borders, and global font properties here */ font-family: monospace; height: 300px; color: black; direction: ltr; }

/* PADDING */
.CodeMirror-lines { padding: 4px 0; /* Vertical padding around content */ }

.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { padding: 0 4px; /* Horizontal padding of content */ }

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; /* The little square between H and V scrollbars */ }

/* GUTTER */
.CodeMirror-gutters { border-right: 1px solid #ddd; background-color: #f7f7f7; white-space: nowrap; }

.CodeMirror-linenumber { padding: 0 3px 0 5px; min-width: 20px; text-align: right; color: #999; white-space: nowrap; }

.CodeMirror-guttermarker { color: black; }

.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */
.CodeMirror-cursor { border-left: 1px solid black; border-right: none; width: 0; }

/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; }

.cm-fat-cursor .CodeMirror-cursor { width: auto; border: 0 !important; background: #7e7; }

.cm-fat-cursor div.CodeMirror-cursors { z-index: 1; }

.cm-fat-cursor-mark { background-color: rgba(20, 255, 20, 0.5); -webkit-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; }

.cm-animate-fat-cursor { width: auto; border: 0; -webkit-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; background-color: #7e7; }

@-webkit-keyframes blink { 0% { }
  50% { background-color: transparent; }
  100% { } }

@keyframes blink { 0% { }
  50% { background-color: transparent; }
  100% { } }

/* Can style cursor different in overwrite (non-insert) mode */
.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers { position: absolute; left: 0; right: 0; top: -50px; bottom: 0; overflow: hidden; }

.CodeMirror-ruler { border-left: 1px solid #ccc; top: 0; bottom: 0; position: absolute; }

/* DEFAULT THEME */
.cm-s-default .cm-header { color: blue; }

.cm-s-default .cm-quote { color: #090; }

.cm-negative { color: #d44; }

.cm-positive { color: #292; }

.cm-header, .cm-strong { font-weight: bold; }

.cm-em { font-style: italic; }

.cm-link { text-decoration: underline; }

.cm-strikethrough { text-decoration: line-through; }

.cm-s-default .cm-keyword { color: #708; }

.cm-s-default .cm-atom { color: #219; }

.cm-s-default .cm-number { color: #164; }

.cm-s-default .cm-def { color: #00f; }

.cm-s-default .cm-variable-2 { color: #05a; }

.cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: #085; }

.cm-s-default .cm-comment { color: #a50; }

.cm-s-default .cm-string { color: #a11; }

.cm-s-default .cm-string-2 { color: #f50; }

.cm-s-default .cm-meta { color: #555; }

.cm-s-default .cm-qualifier { color: #555; }

.cm-s-default .cm-builtin { color: #30a; }

.cm-s-default .cm-bracket { color: #997; }

.cm-s-default .cm-tag { color: #170; }

.cm-s-default .cm-attribute { color: #00c; }

.cm-s-default .cm-hr { color: #999; }

.cm-s-default .cm-link { color: #00c; }

.cm-s-default .cm-error { color: #f00; }

.cm-invalidchar { color: #f00; }

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket { color: #0b0; }

div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #a22; }

.CodeMirror-matchingtag { background: rgba(255, 150, 0, 0.3); }

.CodeMirror-activeline-background { background: #e8f2ff; }

/* STOP */
/* The rest of this file contains styles related to the mechanics of the editor. You probably shouldn't touch them. */
.CodeMirror { position: relative; overflow: hidden; background: white; }

.CodeMirror-scroll { overflow: scroll !important; /* Things will break if this is overridden */ /* 50px is the magic margin used to hide the element's real scrollbars */ /* See overflow: hidden in .CodeMirror */ margin-bottom: -50px; margin-right: -50px; padding-bottom: 50px; height: 100%; outline: none; /* Prevent dragging from highlighting the element */ position: relative; }

.CodeMirror-sizer { position: relative; border-right: 50px solid transparent; }

/* The fake, visible scrollbars. Used to force redraw during scrolling before actual scrolling happens, thus preventing shaking and flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; }

.CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll; }

.CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; overflow-x: scroll; }

.CodeMirror-scrollbar-filler { right: 0; bottom: 0; }

.CodeMirror-gutter-filler { left: 0; bottom: 0; }

.CodeMirror-gutters { position: absolute; left: 0; top: 0; min-height: 100%; z-index: 3; }

.CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; margin-bottom: -50px; }

.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: none !important; border: none !important; }

.CodeMirror-gutter-background { position: absolute; top: 0; bottom: 0; z-index: 4; }

.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }

.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent; }

.CodeMirror-gutter-wrapper ::selection { background-color: transparent; }

.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent; }

.CodeMirror-lines { cursor: text; min-height: 1px; /* prevents collapsing before first draw */ }

.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { /* Reset some styles that the rest of the page might have set */ border-radius: 0; border-width: 0; background: transparent; font-family: inherit; font-size: inherit; margin: 0; white-space: pre; word-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; font-variant-ligatures: contextual; }

.CodeMirror-wrap pre.CodeMirror-line, .CodeMirror-wrap pre.CodeMirror-line-like { word-wrap: break-word; white-space: pre-wrap; word-break: normal; }

.CodeMirror-linebackground { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; }

.CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; /* Force widget margins to stay inside of the container */ }

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code { outline: none; }

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { box-sizing: content-box; }

.CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden; }

.CodeMirror-cursor { position: absolute; pointer-events: none; }

.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; }

div.CodeMirror-dragcursors { visibility: visible; }

.CodeMirror-focused div.CodeMirror-cursors { visibility: visible; }

.CodeMirror-selected { background: #d9d9d9; }

.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }

.CodeMirror-crosshair { cursor: crosshair; }

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching { background-color: #ffa; background-color: rgba(255, 255, 0, 0.4); }

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print { /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors { visibility: hidden; } }

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }

.styleguide-example { clear: both; position: relative; background-color: white; border: 5px solid #f2f2f2; min-height: 20px; padding: 20px; margin-top: 20px; box-shadow: inset 0 0 0 20px #fafafa; }

.styleguide-code { text-align: left; font-size: 14px; 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.alone { max-height: 10em; overflow: auto; padding: 0; border: 0; }

.styleguide-code.alone > pre { padding: 10px 20px; margin: 0; }

.styleguide-code.auto-height { max-height: none; }

.styleguide-code .json-formatter-value { display: none; }

.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.no-margin { margin: 0; }

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

.styleguide_category_intro { margin-bottom: 120px; }

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

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

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

.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: #00B9F3; margin-top: 1em; margin-bottom: 1em; color: #e0303c; }

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

.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 (max-width: 600px) { .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, .styleguide_category_intro_container .styleguide-richtext h2, .styleguide-richtext .styleguide_category_intro_container h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.styleguide { margin: 0 40px; }

.styleguide_grid { margin: 0 40px; }

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

.styleguide_grid:after { 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 0.2s ease-out; }

.styleguide_grid--nav .styleguide_nav--back { display: inline-block; transition: margin-left 0.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; }

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

.styleguide-shownav { display: none; }

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

.styleguide-listing:after { content: ''; display: table; clear: left; }

.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: inline-block; vertical-align: top; background-color: #eee; border: 3px solid; margin-right: 5px; margin-bottom: 5px; box-sizing: border-box; position: relative; font-weight: bold; font-size: 14px; float: left; width: 125px; min-height: 115px; padding: 5px 6px 4px 8px; }

.styleguide-component_link > strong { display: block; }

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

.styleguide-component_link.is-component { color: white; border: 0; background-color: #555; min-height: 85px; }

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