CINXE.COM
Github
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link href="/big-design/favicon.svg" rel="icon" type="image/svg+xml" class="jsx-4019840177"/><title class="jsx-4019840177">BigDesign</title><meta content="/big-design/og-image.png" property="og:image" class="jsx-4019840177"/><link href="https://fonts.googleapis.com" rel="preconnect" class="jsx-4019840177"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" class="jsx-4019840177"/><link rel="preload" href="/big-design/_next/static/media/logo-with-text.e21d3669.svg" as="image" fetchpriority="high"/><meta name="next-head-count" content="9"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/big-design/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/big-design/_next/static/chunks/webpack-1b2dfdccf2200e8a.js" defer=""></script><script src="/big-design/_next/static/chunks/framework-e7c7420b044eb910.js" defer=""></script><script src="/big-design/_next/static/chunks/main-109b42c41651c4d4.js" defer=""></script><script src="/big-design/_next/static/chunks/pages/_app-7565adf838eba40a.js" defer=""></script><script src="/big-design/_next/static/chunks/97571557-0a2b44b9c5b71850.js" defer=""></script><script src="/big-design/_next/static/chunks/6bd07e6a-09bba16be7266586.js" defer=""></script><script src="/big-design/_next/static/chunks/4fca2c30-5ac8204cf351e150.js" defer=""></script><script src="/big-design/_next/static/chunks/999671ce-169a017c298075ea.js" defer=""></script><script src="/big-design/_next/static/chunks/1703-7deae201e23823eb.js" defer=""></script><script src="/big-design/_next/static/chunks/8425-87016cd08236f058.js" defer=""></script><script src="/big-design/_next/static/chunks/3554-d256c030b8137b10.js" defer=""></script><script src="/big-design/_next/static/chunks/8254-44ef0231880a903e.js" defer=""></script><script src="/big-design/_next/static/chunks/pages/box-320674d824569a89.js" defer=""></script><script src="/big-design/_next/static/WzHu2dN1S5olaIwOmyI67/_buildManifest.js" defer=""></script><script src="/big-design/_next/static/WzHu2dN1S5olaIwOmyI67/_ssgManifest.js" defer=""></script><style id="__jsx-4019840177">body{min-height:100vh;background-color:#F6F7FC}</style><style data-styled="" data-styled-version="5.3.11">html{line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%;}/*!sc*/ body{margin:0;}/*!sc*/ main{display:block;}/*!sc*/ h1{font-size:2em;margin:0.67em 0;}/*!sc*/ hr{box-sizing:content-box;height:0;overflow:visible;}/*!sc*/ pre{font-family:monospace,monospace;font-size:1em;}/*!sc*/ a{background-color:transparent;}/*!sc*/ abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ b,strong{font-weight:bolder;}/*!sc*/ code,kbd,samp{font-family:monospace,monospace;font-size:1em;}/*!sc*/ small{font-size:80%;}/*!sc*/ sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}/*!sc*/ sub{bottom:-0.25em;}/*!sc*/ sup{top:-0.5em;}/*!sc*/ img{border-style:none;}/*!sc*/ button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}/*!sc*/ button,input{overflow:visible;}/*!sc*/ button,select{text-transform:none;}/*!sc*/ button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}/*!sc*/ button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}/*!sc*/ button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}/*!sc*/ fieldset{padding:0.35em 0.625em 0.75em;}/*!sc*/ legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}/*!sc*/ progress{vertical-align:baseline;}/*!sc*/ textarea{overflow:auto;}/*!sc*/ [type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}/*!sc*/ [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}/*!sc*/ [type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}/*!sc*/ [type="search"]::-webkit-search-decoration{-webkit-appearance:none;}/*!sc*/ ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}/*!sc*/ details{display:block;}/*!sc*/ summary{display:list-item;}/*!sc*/ template{display:none;}/*!sc*/ [hidden]{display:none;}/*!sc*/ abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}/*!sc*/ body{font-family:"Source Sans Pro","Helvetica Neue",Arial,sans-serif;}/*!sc*/ data-styled.g1[id="sc-global-MjHVH1"]{content:"sc-global-MjHVH1,"}/*!sc*/ .WZeNJ{vertical-align:middle;color:#313440;height:1.5rem;width:1.5rem;}/*!sc*/ .emfseH{vertical-align:middle;height:1.5rem;width:1.5rem;}/*!sc*/ .hmYaOT{vertical-align:middle;color:#5E637A;height:1.5rem;width:1.5rem;}/*!sc*/ .kssbwd{vertical-align:middle;color:#2AAB3F;height:1.5rem;width:1.5rem;}/*!sc*/ .kfkrJE{vertical-align:middle;color:#DB3643;height:1.5rem;width:1.5rem;}/*!sc*/ data-styled.g2[id="base__StyledIcon-sc-a9u0e1-0"]{content:"WZeNJ,emfseH,hmYaOT,kssbwd,kfkrJE,"}/*!sc*/ .koRBsY{margin-left:auto;margin-right:auto;box-sizing:border-box;}/*!sc*/ @media (min-width:720px){.koRBsY{padding-left:1rem;padding-right:1rem;}}/*!sc*/ .heLZwM{box-sizing:border-box;}/*!sc*/ @media (min-width:720px){.heLZwM{padding-top:2rem;padding-bottom:2rem;}}/*!sc*/ .buMTzK{box-sizing:border-box;background-color:#F6F7FC;border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);}/*!sc*/ @media (min-width:0px){.buMTzK{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media (min-width:720px){.buMTzK{display:block;}}/*!sc*/ @media (min-width:0px){.buMTzK{padding-top:1rem;padding-bottom:1rem;}}/*!sc*/ @media (min-width:720px){.buMTzK{padding-top:0;padding-bottom:0;}}/*!sc*/ @media (min-width:0px){.buMTzK{padding-left:1rem;padding-right:1rem;}}/*!sc*/ @media (min-width:720px){.buMTzK{padding-left:0;padding-right:0;}}/*!sc*/ .eIPFYx{box-sizing:border-box;}/*!sc*/ .flvPv{box-sizing:border-box;border-radius:0.25rem;box-shadow:0px 2px 12px rgba(49,52,64,0.2);border-top:1px solid #D9DCE9;border-bottom:1px solid #D9DCE9;}/*!sc*/ .ittXGm{box-sizing:border-box;}/*!sc*/ @media (min-width:0px){.ittXGm{margin-top:0.25rem;}}/*!sc*/ @media (min-width:720px){.ittXGm{margin-top:1.5rem;}}/*!sc*/ @media (min-width:0px){.ittXGm{margin-left:1rem;margin-right:1rem;}}/*!sc*/ @media (min-width:720px){.ittXGm{margin-left:0;margin-right:0;}}/*!sc*/ .lnPWxc{padding:0.5rem;box-sizing:border-box;}/*!sc*/ .LfETB{margin-top:1rem;margin-bottom:1rem;box-sizing:border-box;}/*!sc*/ @media (min-width:0px){.LfETB{margin-left:0.75rem;margin-right:0.75rem;}}/*!sc*/ @media (min-width:720px){.LfETB{margin-left:2rem;margin-right:2rem;}}/*!sc*/ @media (min-width:720px){.LfETB{padding-top:1.25rem;}}/*!sc*/ .kKyUSp{margin-bottom:1rem;box-sizing:border-box;background-color:#FFFFFF;border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);}/*!sc*/ @media (min-width:0px){.kKyUSp{padding:1rem;}}/*!sc*/ @media (min-width:720px){.kKyUSp{padding:1.5rem;}}/*!sc*/ .gZUsCT{margin-top:1rem;box-sizing:border-box;}/*!sc*/ .gfnS{box-sizing:border-box;z-index:1060;}/*!sc*/ .gpXGlR{margin-top:0.5rem;box-sizing:border-box;}/*!sc*/ .eFdwFm{box-sizing:border-box;border:1px solid #D9DCE9;}/*!sc*/ .iPGfeD{padding:1rem;box-sizing:border-box;background-color:#FFFFFF;border-bottom:1px solid #D9DCE9;}/*!sc*/ .gOmLsB{box-sizing:border-box;background-color:#ECEEF5;border-bottom:1px solid #D9DCE9;}/*!sc*/ .kerrQ{box-sizing:border-box;border-left:1px solid #D9DCE9;}/*!sc*/ .kdkpVN{margin-bottom:0.5rem;box-sizing:border-box;}/*!sc*/ .ZlwvB{margin-right:1.25rem;box-sizing:border-box;}/*!sc*/ .bqOync{margin-top:1.5rem;box-sizing:border-box;}/*!sc*/ data-styled.g3[id="sc-12d4dbf-0"]{content:"koRBsY,heLZwM,buMTzK,eIPFYx,flvPv,ittXGm,lnPWxc,LfETB,kKyUSp,gZUsCT,gfnS,gpXGlR,eFdwFm,iPGfeD,gOmLsB,kerrQ,kdkpVN,ZlwvB,bqOync,"}/*!sc*/ .hKwTli{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.hKwTli{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ @media (min-width:0px){.hKwTli{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media (min-width:720px){.hKwTli{display:block;}}/*!sc*/ .cMwWYy{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.cMwWYy{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media (min-width:720px){.cMwWYy{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ .kWYuMh{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:.5rem;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .cCntAE{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .bKXHEd{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.bKXHEd{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media (min-width:720px){.bKXHEd{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ .ghviGs{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .fAYsrw{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .fithVi{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.fithVi{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media (min-width:720px){.fithVi{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ data-styled.g8[id="sc-3a1154b6-0"]{content:"hKwTli,cMwWYy,kWYuMh,cCntAE,bKXHEd,ghviGs,fAYsrw,fithVi,"}/*!sc*/ .hNmeKU{-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;-webkit-transition-property:background-color,border-color,box-shadow,color;transition-property:background-color,border-color,box-shadow,color;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #D9DCE9;border-radius:0.25rem;color:#FFFFFF;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:none;-ms-flex:none;flex:none;font-size:1rem;font-weight:400;height:2.25rem;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:2rem;outline:none;padding:0 1rem;position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;width:100%;background-color:transparent;border-color:transparent;color:#3C64F4;}/*!sc*/ .hNmeKU:focus{outline:none;}/*!sc*/ .hNmeKU[disabled]{border-color:#D9DCE9;pointer-events:none;}/*!sc*/ .hNmeKU + .bd-button{margin-top:0.5rem;}/*!sc*/ @media (min-width:720px){.hNmeKU + .bd-button{margin-top:0;margin-left:0.5rem;}}/*!sc*/ @media (min-width:720px){.hNmeKU{width:auto;padding:0;min-width:2.25rem;}}/*!sc*/ .hNmeKU:active{background-color:#DBE3FE;}/*!sc*/ .hNmeKU:focus{box-shadow:0 0 0 0.25rem #DBE3FE;}/*!sc*/ .hNmeKU:hover:not(:active){background-color:#F0F3FF;}/*!sc*/ .hNmeKU[disabled]{border-color:transparent;color:#D9DCE9;}/*!sc*/ .qmsNW{-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;-webkit-transition-property:background-color,border-color,box-shadow,color;transition-property:background-color,border-color,box-shadow,color;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #D9DCE9;border-radius:0.25rem;color:#FFFFFF;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:none;-ms-flex:none;flex:none;font-size:1rem;font-weight:400;height:2.25rem;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:2rem;outline:none;padding:0 1rem;position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;width:100%;background-color:transparent;border-color:transparent;color:#3C64F4;}/*!sc*/ .qmsNW.qmsNW{margin-right:0.5rem;}/*!sc*/ .qmsNW:focus{outline:none;}/*!sc*/ .qmsNW[disabled]{border-color:#D9DCE9;pointer-events:none;}/*!sc*/ .qmsNW + .bd-button{margin-top:0.5rem;}/*!sc*/ @media (min-width:720px){.qmsNW + .bd-button{margin-top:0;margin-left:0.5rem;}}/*!sc*/ @media (min-width:720px){.qmsNW{width:auto;}}/*!sc*/ .qmsNW:active{background-color:#DBE3FE;}/*!sc*/ .qmsNW:focus{box-shadow:0 0 0 0.25rem #DBE3FE;}/*!sc*/ .qmsNW:hover:not(:active){background-color:#F0F3FF;}/*!sc*/ .qmsNW[disabled]{border-color:transparent;color:#D9DCE9;}/*!sc*/ data-styled.g9[id="sc-1352b694-0"]{content:"hNmeKU,qmsNW,"}/*!sc*/ .cySnWD{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:inline-grid;grid-auto-flow:column;grid-gap:0.5rem;}/*!sc*/ data-styled.g10[id="sc-1352b694-1"]{content:"cySnWD,"}/*!sc*/ .qTiwc{grid-area:nav;}/*!sc*/ .bKQwSy{grid-area:main;}/*!sc*/ data-styled.g13[id="sc-b6da41a7-0"]{content:"qTiwc,bKQwSy,"}/*!sc*/ .hXDjEj{gap:0;display:grid;}/*!sc*/ @media (min-width:0px){.hXDjEj{grid-template: "nav" 5rem "main" min-content / 100%;}}/*!sc*/ @media (min-width:720px){.hXDjEj{grid-template: "nav main" 1fr / minmax(13.125rem,18.75rem) 1fr;}}/*!sc*/ data-styled.g14[id="sc-7da2c49d-0"]{content:"hXDjEj,"}/*!sc*/ .lhllpz{-webkit-transition:all 70ms ease-out;transition:all 70ms ease-out;-webkit-transition-property:color;transition-property:color;color:#3C64F4;cursor:pointer;font-size:1rem;font-weight:400;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .lhllpz:active{color:#0024A6;}/*!sc*/ .lhllpz:hover:not(:active){color:#0024A6;}/*!sc*/ data-styled.g15[id="sc-d0458d4a-0"]{content:"lhllpz,"}/*!sc*/ .dLrqcl{color:#313440;margin:0 0 1rem;font-size:2rem;font-weight:300;line-height:2.5rem;margin:0 0 1.5rem;}/*!sc*/ data-styled.g17[id="sc-218b28a9-1"]{content:"dLrqcl,"}/*!sc*/ .ifCyRn{color:#313440;margin:0 0 1rem;font-size:1.5rem;font-weight:400;line-height:2rem;margin-bottom:0;}/*!sc*/ data-styled.g18[id="sc-218b28a9-2"]{content:"ifCyRn,"}/*!sc*/ .cYQsCo{color:#313440;margin:0 0 1rem;font-size:1.25rem;font-weight:400;line-height:1.75rem;margin:0 0 0.75rem;}/*!sc*/ data-styled.g19[id="sc-218b28a9-3"]{content:"cYQsCo,"}/*!sc*/ .eZqWNg{color:#313440;margin:0 0 1rem;font-size:1rem;font-weight:600;line-height:1.5rem;margin:0 0 0.5rem;}/*!sc*/ data-styled.g20[id="sc-218b28a9-4"]{content:"eZqWNg,"}/*!sc*/ .fcHZuG{color:#313440;margin:0 0 1rem;font-size:1rem;font-weight:400;line-height:1.5rem;}/*!sc*/ .fcHZuG:last-child{margin-bottom:0;}/*!sc*/ data-styled.g21[id="sc-218b28a9-5"]{content:"fcHZuG,"}/*!sc*/ .gVIGoi{color:#313440;margin:0 0 1rem;color:#5E637A;font-size:0.875rem;font-weight:400;line-height:1.25rem;margin:0 0 0.75rem;}/*!sc*/ .gVIGoi:last-child{margin-bottom:0;}/*!sc*/ .eimaSR{color:#313440;margin:0 0 1rem;color:#5E637A;font-size:0.875rem;font-weight:400;line-height:1.25rem;margin:0 0 0.75rem;margin-left:0.75rem;margin-right:0.75rem;}/*!sc*/ .eimaSR:last-child{margin-bottom:0;}/*!sc*/ .biIcFC{color:#313440;margin:0 0 1rem;color:#5E637A;font-size:0.875rem;font-weight:400;line-height:1.25rem;margin:0 0 0.75rem;margin-top:0.5rem;}/*!sc*/ .biIcFC:last-child{margin-bottom:0;}/*!sc*/ data-styled.g22[id="sc-218b28a9-6"]{content:"gVIGoi,eimaSR,biIcFC,"}/*!sc*/ .lTGlb{color:#313440;font-size:1rem;font-weight:400;line-height:1.5rem;padding-left:1.5rem;list-style-type:none;margin:0;padding:0;}/*!sc*/ @media (min-width:720px){.lTGlb{-webkit-column-count:1;column-count:1;-webkit-column-gap:normal;column-gap:normal;}}/*!sc*/ data-styled.g29[id="sc-228d67c6-1"]{content:"lTGlb,"}/*!sc*/ .lcyNul{display:block;line-height:1.75rem;}/*!sc*/ @media (min-width:720px){.lcyNul{display:inline-block;line-height:1.5rem;}}/*!sc*/ data-styled.g30[id="sc-50275482-0"]{content:"lcyNul,"}/*!sc*/ .bgZsLA{cursor:pointer;}/*!sc*/ .bgZsLA img{margin:0 auto;max-width:100%;}/*!sc*/ .bgZsLA p{display:none;text-align:right;margin-right:1rem;}/*!sc*/ @media (min-width:720px){.bgZsLA p{display:block;}}/*!sc*/ data-styled.g31[id="sc-37d69e8e-0"]{content:"bgZsLA,"}/*!sc*/ .fUJlIf{-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-order:0;-ms-flex-order:0;order:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}/*!sc*/ .juFVYe{-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-order:0;-ms-flex-order:0;order:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}/*!sc*/ data-styled.g32[id="sc-2b88929e-0"]{content:"fUJlIf,juFVYe,"}/*!sc*/ @media (min-width:720px){.laobSg{display:none;}}/*!sc*/ data-styled.g33[id="sc-286b6187-0"]{content:"laobSg,"}/*!sc*/ .jvqsMD{border-radius:0.25rem;box-shadow:0px 2px 12px rgba(49,52,64,0.2);background-color:#FFFFFF;border-bottom:1px solid #D9DCE9;border-radius:0;border-top:1px solid #D9DCE9;display:none;height:16rem;left:0;overflow:auto;position:absolute;top:100%;width:100%;z-index:1020;}/*!sc*/ @media (min-width:720px){.jvqsMD{border:0;box-shadow:none;display:block;height:auto;position:static;background-color:transparent;}}/*!sc*/ data-styled.g34[id="sc-286b6187-1"]{content:"jvqsMD,"}/*!sc*/ .iWeQfW{position:-webkit-sticky;position:sticky;top:0;height:100vh;width:100%;}/*!sc*/ data-styled.g35[id="sc-4dd0e9a1-0"]{content:"iWeQfW,"}/*!sc*/ .jWCtqN{overflow:hidden;height:100%;}/*!sc*/ data-styled.g36[id="sc-4dd0e9a1-1"]{content:"jWCtqN,"}/*!sc*/ .dYqqWW{height:100%;width:100%;}/*!sc*/ data-styled.g37[id="sc-4dd0e9a1-2"]{content:"dYqqWW,"}/*!sc*/ .uCQWd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:none;padding:0.0625rem;border-radius:0.25rem;-webkit-transition:background-color 160ms ease-out;transition:background-color 160ms ease-out;width:0.5rem;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:rgba(49,52,64,0.1);}/*!sc*/ data-styled.g38[id="sc-4dd0e9a1-3"]{content:"uCQWd,"}/*!sc*/ .ciqzLB{border-radius:0;}/*!sc*/ @media (min-width:720px){.ciqzLB{border-radius:0.25rem;}}/*!sc*/ data-styled.g41[id="sc-93a30afd-0"]{content:"ciqzLB,"}/*!sc*/ .eXgsEX{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}/*!sc*/ .eXgsEX ~ .bd-button{width:auto;margin-top:0;}/*!sc*/ data-styled.g42[id="sc-93a30afd-1"]{content:"eXgsEX,"}/*!sc*/ .cxnmIq{border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);height:100%;position:relative;overflow:hidden;}/*!sc*/ data-styled.g62[id="sc-fa563855-0"]{content:"cxnmIq,"}/*!sc*/ .juZVME{border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);background-color:#FFFFFF;color:#313440;margin:0;max-height:15.625rem;outline:none;overflow-y:auto;padding:0.5rem 0;z-index:1060;}/*!sc*/ data-styled.g63[id="sc-fa563855-1"]{content:"juZVME,"}/*!sc*/ .bENMgr{position:relative;}/*!sc*/ data-styled.g64[id="sc-c44cdc32-0"]{content:"bENMgr,"}/*!sc*/ .fKFien{background-color:#DBE3FE;}/*!sc*/ data-styled.g116[id="sc-2a0c2650-0"]{content:"fKFien,"}/*!sc*/ .idxPCs{position:absolute;visibility:hidden;z-index:-1070;}/*!sc*/ data-styled.g117[id="sc-2a0c2650-1"]{content:"idxPCs,"}/*!sc*/ .cdXfBB{background-color:#FFFFFF;border-bottom:1px solid #D9DCE9;border-top:1px solid #D9DCE9;box-sizing:border-box;color:#313440;font-size:1rem;padding:0.75rem;white-space:nowrap;}/*!sc*/ .cdXfBB:first-of-type{padding-left:1.5rem;}/*!sc*/ .cdXfBB:last-of-type{padding-right:1.5rem;}/*!sc*/ .hAoeUi{background-color:#FFFFFF;border-bottom:1px solid #D9DCE9;border-top:1px solid #D9DCE9;box-sizing:border-box;color:#313440;font-size:1rem;padding:0.75rem;white-space:nowrap;width:50%;}/*!sc*/ .hAoeUi:first-of-type{padding-left:1.5rem;}/*!sc*/ .hAoeUi:last-of-type{padding-right:1.5rem;}/*!sc*/ data-styled.g125[id="sc-48fc43a5-0"]{content:"cdXfBB,hAoeUi,"}/*!sc*/ .iqqGRm{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}/*!sc*/ data-styled.g127[id="sc-48fc43a5-2"]{content:"iqqGRm,"}/*!sc*/ .gZzqse{background-color:#FFFFFF;box-sizing:border-box;color:#313440;font-size:1rem;padding:0.75rem;border-bottom:1px solid #D9DCE9;}/*!sc*/ .gZzqse:first-of-type{padding-left:1.5rem;}/*!sc*/ .gZzqse:last-of-type{padding-right:1.5rem;}/*!sc*/ .dDxSsd{background-color:#FFFFFF;box-sizing:border-box;color:#313440;font-size:1rem;padding:0.75rem;border-bottom:1px solid #D9DCE9;width:50%;}/*!sc*/ .dDxSsd:first-of-type{padding-left:1.5rem;}/*!sc*/ .dDxSsd:last-of-type{padding-right:1.5rem;}/*!sc*/ data-styled.g128[id="sc-7811a1c9-0"]{content:"gZzqse,dDxSsd,"}/*!sc*/ .eERKuz{-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;-webkit-transition-property:background-color;transition-property:background-color;display:table-row;background-color:transparent;}/*!sc*/ .eERKuz:hover{background-color:#F6F7FC;}/*!sc*/ data-styled.g130[id="sc-b8bb177c-0"]{content:"eERKuz,"}/*!sc*/ .fJecZz{margin:0;max-width:100%;overflow-x:auto;white-space:nowrap;margin-bottom:1.5rem;}/*!sc*/ @media (min-width:720px){.fJecZz{white-space:normal;}}/*!sc*/ data-styled.g131[id="sc-d5cd1ead-0"]{content:"fJecZz,"}/*!sc*/ .dANuiw{border-color:transparent;border-spacing:0;color:#313440;text-align:left;width:100%;}/*!sc*/ data-styled.g132[id="sc-d5cd1ead-1"]{content:"dANuiw,"}/*!sc*/ .jtamvM{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}/*!sc*/ data-styled.g170[id="sc-bcd98922-0"]{content:"jtamvM,"}/*!sc*/ .kxoA-DP{background-color:#313440;color:#DB3643;font-size:0.875rem;margin-bottom:2rem;margin-top:2rem;padding:0.75rem;}/*!sc*/ data-styled.g171[id="sc-ddc6a9be-0"]{content:"kxoA-DP,"}/*!sc*/ .drsGpI{color:#313440;white-space:nowrap;color:#0024A6;}/*!sc*/ .AibSD{color:#313440;white-space:nowrap;background-color:#FFF0BF;padding:0.25rem;}/*!sc*/ .kiAuZK{color:#313440;white-space:nowrap;}/*!sc*/ data-styled.g172[id="sc-1d19ed82-0"]{content:"drsGpI,AibSD,kiAuZK,"}/*!sc*/ .hzKGs{cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}/*!sc*/ data-styled.g174[id="sc-e6496ff5-0"]{content:"hzKGs,"}/*!sc*/ </style><style data-href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap">@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_Akw.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zAkw.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3aPA.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rAkw.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmhdu3cOWxy40.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wkxdu3cOWxy40.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmxdu3cOWxy40.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmRdu3cOWxy40.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdu3cOWxw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmhdu3cOWxy40.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwkxdu3cOWxy40.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmxdu3cOWxy40.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmRdu3cOWxy40.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu3cOWxw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhdu3cOWxy40.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwkxdu3cOWxy40.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmxdu3cOWxy40.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmRdu3cOWxy40.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu3cOWxw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><div style="min-height:100vh;max-width:1400px;position:relative" class="sc-12d4dbf-0 koRBsY sc-7da2c49d-0 hXDjEj"><nav class="sc-12d4dbf-0 heLZwM sc-b6da41a7-0 qTiwc sc-4dd0e9a1-0 iWeQfW"><div dir="ltr" class="sc-4dd0e9a1-1 jWCtqN" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style> [data-radix-scroll-area-viewport] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } [data-radix-scroll-area-viewport]::-webkit-scrollbar { display: none; } :where([data-radix-scroll-area-viewport]) { display: flex; flex-direction: column; align-items: stretch; } :where([data-radix-scroll-area-content]) { flex-grow: 1; } </style><div data-radix-scroll-area-viewport="" class="sc-4dd0e9a1-2 dYqqWW" style="overflow-x:hidden;overflow-y:hidden"><div data-radix-scroll-area-content=""><div display="[object Object]" style="position:relative" class="sc-12d4dbf-0 buMTzK sc-3a1154b6-0 hKwTli"><a style="text-decoration:none" href="/big-design"><div class="sc-37d69e8e-0 bgZsLA"><img alt="BigDesign Logo" fetchpriority="high" width="160" height="41" decoding="async" data-nimg="1" style="color:transparent" src="/big-design/_next/static/media/logo-with-text.e21d3669.svg"/><p class="sc-218b28a9-6 gVIGoi">v<!-- -->1.6.0</p></div></a><div style="display:flex;align-items:center" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cMwWYy"><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-286b6187-0 laobSg"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-hidden="true" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary70" class="base__StyledIcon-sc-a9u0e1-0 WZeNJ"><path d="M0 0h24v24H0z" fill="none"></path><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1m0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1"></path></svg></span></button></div><div class="sc-12d4dbf-0 flvPv sc-2b88929e-0 fUJlIf sc-286b6187-1 jvqsMD"><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Introduction</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Getting Started</a></li><li><a href="https://codesandbox.io/p/devbox/github/bigcommerce/big-design/tree/%40bigcommerce/examples%401.0.6/packages/examples" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">CodeSandbox Example</a></li><div class="sc-12d4dbf-0 lnPWxc"></div><li><a href="https://github.com/bigcommerce/big-design" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 kWYuMh"><svg fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 20 20" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title>Github</title><path clip-rule="evenodd" d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z" fill-rule="evenodd"></path></svg> Github</div></a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Foundations</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/colors" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Colors</a></li><li><a href="/big-design/icons" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Icons</a></li><li><a href="/big-design/spacing" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Spacing</a></li><li><a href="/big-design/typography" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Typography</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Layout</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/accordion-panel" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Accordion Panel</a></li><li><a href="/big-design/collapse" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Collapse</a></li><li><a href="/big-design/modal" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Modal</a></li><li><a href="/big-design/offset-pagination" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">OffsetPagination</a></li><li><a href="/big-design/panel" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Panel</a></li><li><a href="/big-design/statefulTable" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">StatefulTable</a></li><li><a href="/big-design/statefulTree" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">StatefulTree</a></li><li><a href="/big-design/stateless-pagination" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">StatelessPagination</a></li><li><a href="/big-design/table" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Table</a></li><li><a href="/big-design/tabs" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Tabs</a></li><li><a href="/big-design/worksheet" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Worksheet</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Actions & Inputs</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/button" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Button</a></li><li><a href="/big-design/button-group" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">ButtonGroup</a></li><li><a href="/big-design/checkbox" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Checkbox</a></li><li><a href="/big-design/counter" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Counter</a></li><li><a href="/big-design/datepicker" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Datepicker</a></li><li><a href="/big-design/dropdown" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Dropdown</a></li><li><a href="/big-design/file-uploader" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">FileUploader</a></li><li><a href="/big-design/form" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Form</a></li><li><a href="/big-design/input" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Input</a></li><li><a href="/big-design/link" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Link</a></li><li><a href="/big-design/multi-select" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">MultiSelect</a></li><li><a href="/big-design/pill-tabs" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">PillTabs</a></li><li><a href="/big-design/radio" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Radio</a></li><li><a href="/big-design/search" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Search</a></li><li><a href="/big-design/select" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Select</a></li><li><a href="/big-design/switch" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Switch</a></li><li><a href="/big-design/toggle" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Toggle</a></li><li><a href="/big-design/textarea" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Textarea</a></li><li><a href="/big-design/timepicker" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Timepicker</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Status & Feedback</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/alert" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Alert</a></li><li><a href="/big-design/badge" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Badge</a></li><li><a href="/big-design/inline-message" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">InlineMessage</a></li><li><a href="/big-design/message" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Message</a></li><li><a href="/big-design/progress-bar" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">ProgressBar</a></li><li><a href="/big-design/progress-circle" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">ProgressCircle</a></li><li><a href="/big-design/stepper" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Stepper</a></li><li><a href="/big-design/tooltip" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Tooltip</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Patterns</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/action-bar" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Action Bar</a></li><li><a href="/big-design/header" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Header</a></li><li><a href="/big-design/page" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Page</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Utilities</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/box" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Box</a></li><li><a href="/big-design/breakpoints" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Breakpoints</a></li><li><a href="/big-design/display" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Display</a></li><li><a href="/big-design/flex" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Flex</a></li><li><a href="/big-design/grid" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Grid</a></li><li><a href="/big-design/margin" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Margin</a></li><li><a href="/big-design/padding" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Padding</a></li><li><a href="/big-design/popover" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Popover</a></li></ul></div></div></div></div></div></div></div></div></nav><main style="max-width:100%" class="sc-12d4dbf-0 LfETB sc-b6da41a7-0 bKQwSy"><h1 class="sc-218b28a9-1 dLrqcl">Box</h1><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 id="overview" class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Overview</h2></div><div class="sc-12d4dbf-0 gZUsCT"><p class="sc-218b28a9-5 fcHZuG"><code class="sc-1d19ed82-0 drsGpI">Box</code> is a base component that is used to create other components. Using different values for properties like border, border radius, and drop shadow, it can be turned into form field, button, panel, etc.</p></div></div><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 id="implementation" class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Implementation</h2></div><div class="sc-12d4dbf-0 gZUsCT"><div data-testid="pilltabs-wrapper" role="list" class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><div data-testid="pilltabs-pill-0" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1"><button class="sc-1352b694-0 qmsNW sc-2a0c2650-0 fKFien" type="button"><span class="sc-1352b694-1 cySnWD">Basic</span></button></div><div data-testid="pilltabs-pill-1" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1"><button class="sc-1352b694-0 qmsNW sc-2a0c2650-0" type="button"><span class="sc-1352b694-1 cySnWD">Shadows</span></button></div><div data-testid="pilltabs-pill-2" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1"><button class="sc-1352b694-0 qmsNW sc-2a0c2650-0" type="button"><span class="sc-1352b694-1 cySnWD">Extending</span></button></div><div data-testid="pilltabs-dropdown-toggle" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1 idxPCs"><div class="sc-12d4dbf-0 eIPFYx sc-c44cdc32-0 bENMgr"><button class="sc-1352b694-0 hNmeKU bd-button" type="button" aria-activedescendant="" aria-controls=":Rjne6:-menu" aria-expanded="false" aria-haspopup="menu" id=":Rjne6:-toggle-button" role="button" tabindex="0"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":R2jjne6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title id=":R2jjne6:">add</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"></path></svg></span></button><div style="position:absolute;left:0;top:0" class="sc-12d4dbf-0 gfnS"><div class="sc-fa563855-0 cxnmIq"><ul id=":Rjne6:-menu" role="menu" aria-labelledby=":Rjne6:-label" class="sc-fa563855-1 juZVME"></ul></div></div></div></div></div><div class="sc-12d4dbf-0 gpXGlR"><p class="sc-218b28a9-5 fcHZuG">Used as a simple container or as a base to build other components.</p><div class="sc-12d4dbf-0 eFdwFm"><div class="sc-12d4dbf-0 iPGfeD"><div></div></div><div style="z-index:999" class="sc-12d4dbf-0 gOmLsB sc-3a1154b6-0 bKXHEd sc-bcd98922-0 jtamvM"><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 juFVYe"><p class="sc-218b28a9-6 eimaSR">Edit the code below to see your changes live!</p></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg fill="currentColor" height="80" stroke="currentColor" stroke-width="0" viewBox="0 0 128 128" width="80" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title></title><path d="M22.67 47h99.67v73.67H22.67z" fill="#fff"></path><path d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z" data-name="original" fill="#007acc"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg fill="currentColor" height="80" preserveAspectRatio="xMinYMin meet" stroke="currentColor" stroke-width="0" viewBox="0 0 256 256" width="80" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title></title><path d="M0 0h256v256H0z" fill="#f7df1e"></path><path d="M67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371 7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607 9.969 0 16.325-4.984 16.325-11.858 0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257 0-18.044 13.747-31.792 35.228-31.792 15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31-7.046 0-11.514 4.468-11.514 10.31 0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804 0 21.654-17.012 33.51-39.867 33.51-22.339 0-36.774-10.654-43.819-24.574" fill="#000"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":Rl2lne6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":Rl2lne6:">Copy</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m1 14H8c-.55 0-1-.45-1-1s.45-1 1-1h5c.55 0 1 .45 1 1s-.45 1-1 1m3-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1m0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":Rlalne6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":Rlalne6:">Reset</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M13.25 3a9.003 9.003 0 0 0-9.26 9H2.2c-.45 0-.67.54-.35.85l2.79 2.8c.2.2.51.2.71 0l2.79-2.8c.32-.31.09-.85-.35-.85h-1.8c0-3.9 3.18-7.05 7.1-7 3.72.05 6.85 3.18 6.9 6.9.05 3.91-3.1 7.1-7 7.1-1.61 0-3.1-.55-4.28-1.48a.994.994 0 0 0-1.32.08c-.42.43-.39 1.13.08 1.5a8.93 8.93 0 0 0 5.52 1.9c5.05 0 9.14-4.17 9-9.26-.13-4.69-4.05-8.61-8.74-8.74m-.51 5c-.41 0-.75.34-.75.75v3.68c0 .35.19.68.49.86l3.12 1.85c.36.21.82.09 1.03-.26.21-.36.09-.82-.26-1.03l-2.88-1.71v-3.4c0-.4-.33-.74-.75-.74"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":Rlilne6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":Rlilne6:">Toggle Theme</title><path d="M24 0H0v24h24z" fill="none"></path><path d="M6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19 0-11.31l-4.95-4.95a.996.996 0 0 0-1.41 0zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1z"></path></svg></span></button></div></div><div class="sc-12d4dbf-0 eIPFYx"><div style="background-color:#282c34;color:#ffffff"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:monospace;background-color:#282c34;color:#ffffff;white-space:pre-wrap" spellcheck="false"><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag class-name" style="color:#FAC863">Box</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">backgroundColor</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">secondary20</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">border</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">box</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">borderRadius</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">normal</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">padding</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">medium</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"></span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> Boxed content</span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"></span><span class="token tag punctuation" style="color:#8dc891"></</span><span class="token tag class-name" style="color:#FAC863">Box</span><span class="token tag punctuation" style="color:#8dc891">></span> </span></pre></div></div></div></div></div></div><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 id="props" class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Props</h2></div><div class="sc-12d4dbf-0 gZUsCT"><figure class="sc-d5cd1ead-0 fJecZz"><table id=":Rdpe6:" class="sc-d5cd1ead-1 dANuiw"><thead class="sc-adc25cc9-0"><tr><th id="header-cell-0" class="sc-48fc43a5-0 cdXfBB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Prop name</div></th><th id="header-cell-1" class="sc-48fc43a5-0 cdXfBB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Type</div></th><th id="header-cell-2" class="sc-48fc43a5-0 cdXfBB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Default</div></th><th id="header-cell-3" width="50%" class="sc-48fc43a5-0 hAoeUi"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Description</div></th></tr></thead><tbody class="sc-91891151-0"><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">as</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">string</code> | <code class="sc-1d19ed82-0 AibSD">React.ComponentType<any></code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Use a different HTML tag or a different custom component</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">backgroundColor</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD"><a href="/big-design/colors" class="sc-d0458d4a-0 lhllpz">Color</a></code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Sets the background color given a color name from our<!-- --> <a href="/big-design/colors" class="sc-d0458d4a-0 lhllpz">palette</a>.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">shadow</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">floating</code> | <code class="sc-1d19ed82-0 AibSD">raised</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Determines the type of shadow to be applied.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">border</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">box</code> | <code class="sc-1d19ed82-0 AibSD">boxError</code> | <code class="sc-1d19ed82-0 AibSD">none</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Determines type of border to be applied.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">borderBottom</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">box</code> | <code class="sc-1d19ed82-0 AibSD">boxError</code> | <code class="sc-1d19ed82-0 AibSD">none</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Determines type of bottom border to be applied.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">borderLeft</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">box</code> | <code class="sc-1d19ed82-0 AibSD">boxError</code> | <code class="sc-1d19ed82-0 AibSD">none</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Determines type of left border to be applied.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">borderRight</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">box</code> | <code class="sc-1d19ed82-0 AibSD">boxError</code> | <code class="sc-1d19ed82-0 AibSD">none</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Determines type of right border to be applied.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">borderTop</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">box</code> | <code class="sc-1d19ed82-0 AibSD">boxError</code> | <code class="sc-1d19ed82-0 AibSD">none</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Determines type of top border to be applied.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">borderRadius</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">normal</code> | <code class="sc-1d19ed82-0 AibSD">circle</code> | <code class="sc-1d19ed82-0 AibSD">none</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Determines type of border radius to be applied.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">clearfix</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">boolean</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Adds a clearfix for floating internal elements.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">zIndex</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">sticky</code> | <code class="sc-1d19ed82-0 AibSD">fixed</code> | <code class="sc-1d19ed82-0 AibSD">modalBackdrop</code> | <code class="sc-1d19ed82-0 AibSD">modal</code> | <code class="sc-1d19ed82-0 AibSD">tooltip</code> | <code class="sc-1d19ed82-0 AibSD">popover</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Determines type of z-index to be applied.<br/><span class="sc-218b28a9-6 gVIGoi">Types are in order (sticky is low, popover is high).</span></p></td></tr></tbody></table><p class="sc-218b28a9-6 biIcFC">Props ending with * are required</p></figure><h3 class="sc-218b28a9-3 cYQsCo">Inherited</h3><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 fAYsrw"><div tabindex="0" class="sc-12d4dbf-0 kdkpVN sc-3a1154b6-0 fithVi sc-e6496ff5-0 hzKGs"><svg aria-labelledby=":Rlnpe6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title id=":Rlnpe6:">Expand</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"></path></svg><p class="sc-218b28a9-5 fcHZuG">Display Props</p></div><div tabindex="0" class="sc-12d4dbf-0 kdkpVN sc-3a1154b6-0 fithVi sc-e6496ff5-0 hzKGs"><svg aria-labelledby=":Rmnpe6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title id=":Rmnpe6:">Expand</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"></path></svg><p class="sc-218b28a9-5 fcHZuG">Margin Props</p></div><div tabindex="0" class="sc-12d4dbf-0 kdkpVN sc-3a1154b6-0 fithVi sc-e6496ff5-0 hzKGs"><svg aria-labelledby=":Rnnpe6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title id=":Rnnpe6:">Expand</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"></path></svg><p class="sc-218b28a9-5 fcHZuG">Padding Props</p></div></div></div></div><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 id="guidelines" class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Do's and Don'ts</h2></div><div class="sc-12d4dbf-0 gZUsCT"><table id=":Rrre6:" class="sc-d5cd1ead-1 dANuiw"><thead class="sc-adc25cc9-0"><tr><th id="header-cell-0" class="sc-48fc43a5-0 cdXfBB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Do</div></th></tr></thead><tbody class="sc-91891151-0"><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 fithVi"><div class="sc-12d4dbf-0 ZlwvB sc-2b88929e-0 fUJlIf"><svg aria-hidden="true" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="success" class="base__StyledIcon-sc-a9u0e1-0 kssbwd"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M9.29 16.29 5.7 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.59 7.59a.996.996 0 0 1-1.41 0"></path></svg></div><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf">Apply 4px corner radius for all rectangular standalone components.</div></div></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 fithVi"><div class="sc-12d4dbf-0 ZlwvB sc-2b88929e-0 fUJlIf"><svg aria-hidden="true" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="success" class="base__StyledIcon-sc-a9u0e1-0 kssbwd"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M9.29 16.29 5.7 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.59 7.59a.996.996 0 0 1-1.41 0"></path></svg></div><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf">Apply raised drop shadow style to make the content on the grey background of the page stand out (panels).</div></div></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 fithVi"><div class="sc-12d4dbf-0 ZlwvB sc-2b88929e-0 fUJlIf"><svg aria-hidden="true" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="success" class="base__StyledIcon-sc-a9u0e1-0 kssbwd"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M9.29 16.29 5.7 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.59 7.59a.996.996 0 0 1-1.41 0"></path></svg></div><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf">Apply floating drop shadow style for elements that appear on top of the content of the page (pop-overs, alerts, drop menus, etc.).</div></div></td></tr></tbody></table><div class="sc-12d4dbf-0 bqOync"><table id=":Rtre6:" class="sc-d5cd1ead-1 dANuiw"><thead class="sc-adc25cc9-0"><tr><th id="header-cell-0" class="sc-48fc43a5-0 cdXfBB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Don't</div></th></tr></thead><tbody class="sc-91891151-0"><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 fithVi"><div class="sc-12d4dbf-0 ZlwvB sc-2b88929e-0 fUJlIf"><svg aria-hidden="true" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="danger" class="base__StyledIcon-sc-a9u0e1-0 kfkrJE"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1 4h-2v-2h2z"></path></svg></div><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf">Use any other corner radius values.</div></div></td></tr></tbody></table></div></div></div></main></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/box","query":{},"buildId":"WzHu2dN1S5olaIwOmyI67","assetPrefix":"/big-design","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>