.Sg-Main code,.Sg-Main pre{font-family:"Monaco","Courier",monospace;font-size:16px;font-size:1rem;border:1px solid hsl(0,0%,90%);padding:2px 5px;border-radius:2px;background:#fff;margin:0;word-break:keep-all;word-wrap:normal;white-space:pre;color:var(--ic-brand-primary)}.Sg-Main .exampleOutput,.Sg-Main .code-rendered{border:1px solid hsl(0,0%,90%);border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px;margin:15px 0 0;padding:50px 10px 10px;position:relative;overflow:auto}.Sg-Main .exampleOutput:after,.Sg-Main .code-rendered:after{content:"Example";position:absolute;top:0;left:0;border-right:1px solid hsl(0,0%,90%);border-bottom:1px solid hsl(0,0%,90%);border-bottom-right-radius:4px;padding:5px 8px;display:inline-block;font-family:"Helvetica Neue","Helvetica",Arial,sans-serif;font-size:14px;font-size:0.875rem}.Sg-Main .codeBlock,.Sg-Main .highlight{padding:50px 4%;margin:0 0 20px;background:#273540;color:var(--ic-brand-primary);font-size:15px;font-size:0.9375rem;line-height:1.6em;overflow-x:auto;position:relative;width:auto}.Sg-Main .codeBlock:after,.Sg-Main .highlight:after{content:"HTML";position:absolute;top:0;left:0;color:#6a7883;border-right:1px solid hsl(206.4,24.2718446602%,30.1960784314%);border-bottom:1px solid hsl(206.4,24.2718446602%,30.1960784314%);border-bottom-right-radius:4px;padding:5px 8px;display:inline-block;font-family:"Helvetica Neue","Helvetica",Arial,sans-serif;font-size:14px;font-size:0.875rem}.Sg-Main .codeBlock.jsExample:after,.Sg-Main .highlight.jsExample:after{content:"JS"}.Sg-Main .codeBlock .highlight,.Sg-Main .highlight .highlight{background:#273540}.Sg-Main .codeBlock pre,.Sg-Main .highlight pre{font-family:"Monaco","Courier",monospace;width:auto;background:#273540;word-break:keep-all;word-wrap:normal;white-space:pre;margin:0px;padding:0px;padding-left:15px;font-size:16px;font-size:1rem;position:relative;line-height:1.6em;color:hsl(0,0%,90%);border:1px solid #273540;overflow:visible}@media only screen and (max-width: 900px){.Sg-Main .codeBlock,.Sg-Main .highlight{padding:50px 10px}}.Sg-Main .codeBlock hll,.Sg-Main .highlight hll{background-color:#ffc}.Sg-Main .codeBlock .c,.Sg-Main .highlight .c{color:#998;font-style:italic}.Sg-Main .codeBlock .err,.Sg-Main .highlight .err{color:#a61717}.Sg-Main .codeBlock .k,.Sg-Main .highlight .k{color:#fff}.Sg-Main .codeBlock .o,.Sg-Main .highlight .o{color:#fff}.Sg-Main .codeBlock .cm,.Sg-Main .highlight .cm{color:#998;font-style:italic}.Sg-Main .codeBlock .cp,.Sg-Main .highlight .cp{color:#999;font-style:italic}.Sg-Main .codeBlock .c1,.Sg-Main .highlight .c1{color:#998;font-style:italic}.Sg-Main .codeBlock .cs,.Sg-Main .highlight .cs{color:#999;font-style:italic}.Sg-Main .codeBlock .gd,.Sg-Main .highlight .gd{color:#fff;background-color:#fdd}.Sg-Main .codeBlock .ge,.Sg-Main .highlight .ge{color:#fff;font-style:italic}.Sg-Main .codeBlock .gr,.Sg-Main .highlight .gr{color:#a00}.Sg-Main .codeBlock .gh,.Sg-Main .highlight .gh{color:#999}.Sg-Main .codeBlock .gi,.Sg-Main .highlight .gi{color:#fff;background-color:#dfd}.Sg-Main .codeBlock .go,.Sg-Main .highlight .go{color:#888}.Sg-Main .codeBlock .gp,.Sg-Main .highlight .gp{color:#555}.Sg-Main .codeBlock .gu,.Sg-Main .highlight .gu{color:#aaa}.Sg-Main .codeBlock .gt,.Sg-Main .highlight .gt{color:#a00}.Sg-Main .codeBlock .kc,.Sg-Main .highlight .kc{color:#fff}.Sg-Main .codeBlock .kd,.Sg-Main .highlight .kd{color:#fff}.Sg-Main .codeBlock .kn,.Sg-Main .highlight .kn{color:#fff}.Sg-Main .codeBlock .kp,.Sg-Main .highlight .kp{color:#fff}.Sg-Main .codeBlock .kr,.Sg-Main .highlight .kr{color:#fff}.Sg-Main .codeBlock .kt,.Sg-Main .highlight .kt{color:#458}.Sg-Main .codeBlock .m,.Sg-Main .highlight .m{color:#099}.Sg-Main .codeBlock .s,.Sg-Main .highlight .s{color:#e6db74}.Sg-Main .codeBlock .na,.Sg-Main .highlight .na{color:#a6e22e}.Sg-Main .codeBlock .nb,.Sg-Main .highlight .nb{color:#66d9ef}.Sg-Main .codeBlock .nc,.Sg-Main .highlight .nc{color:#458}.Sg-Main .codeBlock .no,.Sg-Main .highlight .no{color:#a6e22e}.Sg-Main .codeBlock .nd,.Sg-Main .highlight .nd{color:#3c5d5d}.Sg-Main .codeBlock .ni,.Sg-Main .highlight .ni{color:#ae81ff}.Sg-Main .codeBlock .ne,.Sg-Main .highlight .ne{color:#900}.Sg-Main .codeBlock .nf,.Sg-Main .highlight .nf{color:#900}.Sg-Main .codeBlock .nl,.Sg-Main .highlight .nl{color:#900}.Sg-Main .codeBlock .nn,.Sg-Main .highlight .nn{color:#555}.Sg-Main .codeBlock .nt,.Sg-Main .highlight .nt{color:#0099e0}.Sg-Main .codeBlock .nv,.Sg-Main .highlight .nv{color:#a6e22e}.Sg-Main .codeBlock .ow,.Sg-Main .highlight .ow{color:#fff}.Sg-Main .codeBlock .w,.Sg-Main .highlight .w{color:#bbb}.Sg-Main .codeBlock .mf,.Sg-Main .highlight .mf{color:#099}.Sg-Main .codeBlock .mh,.Sg-Main .highlight .mh{color:#099}.Sg-Main .codeBlock .mi,.Sg-Main .highlight .mi{color:#099}.Sg-Main .codeBlock .mo,.Sg-Main .highlight .mo{color:#099}.Sg-Main .codeBlock .sb,.Sg-Main .highlight .sb{color:#e6db74}.Sg-Main .codeBlock .sc,.Sg-Main .highlight .sc{color:#e6db74}.Sg-Main .codeBlock .sd,.Sg-Main .highlight .sd{color:#e6db74}.Sg-Main .codeBlock .s2,.Sg-Main .highlight .s2{color:#e6db74}.Sg-Main .codeBlock .se,.Sg-Main .highlight .se{color:#e6db74}.Sg-Main .codeBlock .sh,.Sg-Main .highlight .sh{color:#e6db74}.Sg-Main .codeBlock .si,.Sg-Main .highlight .si{color:#e6db74}.Sg-Main .codeBlock .sx,.Sg-Main .highlight .sx{color:#e6db74}.Sg-Main .codeBlock .sr,.Sg-Main .highlight .sr{color:#009926}.Sg-Main .codeBlock .s1,.Sg-Main .highlight .s1{color:#e6db74}.Sg-Main .codeBlock .ss,.Sg-Main .highlight .ss{color:#990073}.Sg-Main .codeBlock .bp,.Sg-Main .highlight .bp{color:#999}.Sg-Main .codeBlock .vc,.Sg-Main .highlight .vc{color:#a6e22e}.Sg-Main .codeBlock .vg,.Sg-Main .highlight .vg{color:#a6e22e}.Sg-Main .codeBlock .vi,.Sg-Main .highlight .vi{color:#a6e22e}.Sg-Main .codeBlock .il,.Sg-Main .highlight .il{color:#099}html.Sg-only{margin:0;padding:0;line-height:normal;font-family:"Helvetica Neue","Helvetica",Arial,sans-serif}body.Sg-only{margin:0;padding:0;line-height:1.5;background:#fff}.Sg-Content>ul,.Sg-Content>dl,.Sg-Content>ol,.Sg-Article>ul,.Sg-Article>dl,.Sg-Article>ol{margin:10px 20px}.Sg-Content>ul li,.Sg-Content>dl li,.Sg-Content>ol li,.Sg-Article>ul li,.Sg-Article>dl li,.Sg-Article>ol li{font-size:18px;font-size:1.125rem}.Sg-Content>hr,.Sg-Article>hr{border:none;background:none;padding:0;margin:5px 0;height:1px}.Sg-Content>hr.Ruler--dotted,.Sg-Article>hr.Ruler--dotted{border-top:1px dotted #334451}.Sg-Content .sg-src-file-path,.Sg-Article .sg-src-file-path{font-weight:bold;margin-bottom:18px}.Sg-Component-Heading{font-size:3rem;font-weight:300;margin:2.5rem 0 0}.Sg-Main{overflow-x:hidden}.Sg-Header{background:#f2f4f4;border-left:.25rem solid var(--ic-brand-primary);padding:12px 24px}.styleguide-section__grid-demo-element{padding:8px 16px;background:var(--ic-link-color-lightened-10);color:#fff;text-align:center;text-transform:uppercase;height:16px}.Sg-Main .codeBlock:after,.Sg-Main .highlight:after{content:"Code"}.Sg-Main .codeBlock:after,.Sg-Main .highlight:after{content:"Code"}.isHidden{display:none}.styleguide-section__accordion-demo-element{padding:24px;color:hsl(0,0%,75%)}.ReactModal__Content.ReactModal__Content--canvas.ReactModal__Content--demo-styleguide .ReactModal__Layout{transform:none;opacity:1;width:100%;max-width:697px}.Colorguide-color{justify-content:space-between;padding:145px 0 0;flex:1 170px;margin:5px;border:1px solid #f2f4f4;border-radius:3px}.Colorguide-var{display:block;background:#fff;border-top:1px solid #f2f4f4;padding:10px}.Colorguide-color--primary{background:var(--ic-brand-primary)}.Colorguide-color--success{background:#03893d}.Colorguide-color--action{background:#c54396}.Colorguide-color--danger{background:#e62429}.Colorguide-color--alert{background:#f06e26}.Colorguide-color--dark{background:#273540}.Colorguide-color--medium-darker{background:#334451}.Colorguide-color--medium{background:#6a7883}.Colorguide-color--medium-lighter{background:#6a7883}.Colorguide-color--border-dark{background:#6a7883}.Colorguide-color--border-light{background:#e8eaec}.Colorguide-color--medium-light{background:#f2f4f4}.Colorguide-color--light{background:#fff}.sg-bg-color-example{background:#e0ebf5;font-size:16px;font-size:1rem;padding:12px;color:#2b7abc}.sg-bg-color-example--neutral{background:#f2f4f4;color:#334451}.sg-bg-color-example--success{background:#dceee4;color:#03893d}.sg-bg-color-example--alert{background:#fce4e5;color:#cf4a00}.sg-bg-color-example--danger{background:#fce4e5;color:#e62429}