{"version":3,"sources":["../../node_modules/uswds/src/stylesheets/lib/grid/_box-sizing.scss","documentation.css","../base/_accessibility.scss","../base/_utilities.scss","documentation.scss","../../node_modules/uswds/src/stylesheets/lib/addons/_position.scss","../../node_modules/uswds/src/stylesheets/lib/addons/_prefixer.scss","../../node_modules/uswds/src/stylesheets/lib/css3/_transition.scss","../base/var/_spacing.scss","../base/var/_layout.scss","../../node_modules/uswds/src/stylesheets/lib/grid/_media.scss","../base/var/_typography.scss","../base/var/_colors.scss","../../node_modules/uswds/src/stylesheets/lib/mixins/_clearfix.scss","_shared.scss","../../node_modules/uswds/src/stylesheets/lib/grid/_span-columns.scss","../../node_modules/uswds/src/stylesheets/lib/grid/_private.scss","../../node_modules/uswds/src/stylesheets/lib/addons/_font-stacks.scss","../../node_modules/uswds/src/stylesheets/lib/functions/_px-to-rem.scss"],"names":[],"mappings":"AAGE,KACE,6BAAsB,CAAtB,qBCFJ,CDKE,iBAII,0BAAmB,CAAnB,kBCLN,CCFA,wBCiDE,2BAA6B,CAC7B,qBAAuB,CACvB,kBAAoB,CACpB,mBAAqB,CACrB,mBAAqB,CACrB,oBAAsB,CACtB,yBAA2B,CAC3B,4BF3CF,CGVA,SCiCE,cDhCuB,CCoCnB,KDpCsB,CCoCtB,ODpCwB,CCoCxB,QDpC0B,CCoC1B,MDpC4B,CE2B1B,uCCYgC,CDIhC,+BCJgC,CHrCtC,eAAgB,CAChB,SAAU,CACV,iBAAkB,CAClB,YHmBF,CGzBA,oBASI,kBHoBJ,CGfA,0CAEI,WAAY,CACZ,qBAAsB,CACtB,aHiBJ,CGfI,oCANJ,0CAOM,iBHmBJ,CACF,CGfA,qEAEE,gBHkBF,CGfA,oCAEE,aHkBF,CGdA,oBACE,QAAS,CACT,iCAAuC,CACvC,eHiBF,CGfE,oCALF,oBAMI,iCI7CyB,CJ8CzB,UHmBF,CACF,CGfA,OACE,iBAAkB,CAClB,gBKnDwB,CLoDxB,oBAA6B,CD2N7B,gBFxMF,CSQI,mCN9BJ,ODiOI,iBKlRmB,CLmRnB,kBFtMF,CACF,CGtBA,uCAEI,iBHwBJ,CGpBA,0BACE,eHuBF,CGnBA,oBACE,gBHsBF,CGvBA,uBAII,YHuBJ,CG3BA,yCAOM,iBHwBN,CGnBA,iBACE,gBO/EsB,CPgFtB,eAAgB,CAChB,eAAgB,CAChB,wBAAyB,CACzB,aQnEkB,CRoElB,aAAc,CACd,mBAAqB,CACrB,YAAa,CACb,mBHsBF,CGnBA,mDAEE,oBAAqB,CACrB,UHsBF,CGzBA,yEAMI,wBHwBJ,CG9BA,6EAUI,wBQ1EgB,CR2EhB,aHyBJ,CGpCA,mFAeI,wBQnE6B,CRoE7B,aH0BJ,CG1CA,uEAoBI,wBQ7EyB,CR8EzB,aH2BJ,CGtBA,uBACE,wBQxH6B,CR0H3B,mBAAY,CACZ,gBHwBJ,CG5BA,kDAeI,UQxHiB,CRyHjB,gBO5HiB,CP8Hf,oBAAc,CACd,YHiBN,CStGI,oCNkEJ,kDAaM,eH6BJ,CACF,CGlBA,SAEE,qBAAsB,CAEpB,cAAQ,CACR,iBAAW,CAEb,mBKtIwB,CLuIxB,wBHkBF,CG1BA,eSjII,UAAW,CACX,UAAW,CACX,aZ+JJ,CGhCA,iBAWI,cHyBJ,CGpCA,kCAcM,kBI9JuB,CJ+JvB,mBH0BN,CGzCA,uBAoBI,SHyBJ,CG7CA,wCAuBM,kBIvKuB,CJwKvB,mBH0BN,CGlDA,oBA6BI,mBAA+B,CAC/B,oBAAgC,CAChC,SHyBJ,CSvHI,mCN+DJ,oBAkCM,iBAAyB,CACzB,kBAA0B,CAC1B,SH2BJ,CACF,CGhEA,wBAyCI,UH2BJ,CGvBA,mBACE,QAAS,CAEP,YAAM,CACN,iBAAW,CAEb,SHwBF,CGpBA,+CAEE,kBHsBF,CGlBA,0CAEI,0BHoBJ,CGtBA,4BAOM,YHmBN,CG1BA,iDAWM,0BHmBN,CG9BA,qBAgBI,kBAAmB,CACnB,UAAW,CACX,eHkBJ,CGpCA,wBAqBM,wBAAyB,CACzB,wBAAyB,CACzB,iBAAkB,CAClB,kBHmBN,CG3CA,0CA2BQ,eAAgB,CAChB,iBAAkB,CAClB,QAAS,CACT,OAAQ,CACR,KHoBR,CGnDA,gDAkCU,wBHqBV,CGvDA,wBAwCM,WAAY,CACZ,eHmBN,CG5DA,mDA8CM,aAAc,CACd,eAAgB,CAChB,eAAgB,CAChB,mBAAoB,CACpB,iBHmBN,CGrEA,yBAsDM,iBHmBN,CGzEA,0BA0DM,oBAAgC,CAChC,iBAAkB,CAClB,oBHmBN,CG/EA,wCA+DQ,cHoBR,CGbA,kBACE,kBHgBF,CGjBA,oBAII,UQzQiB,CR0QjB,WAAY,CACZ,kBU3RuB,CV6RrB,eAAU,CACV,kBHgBN,CSvPI,oCN8NJ,yCAgBQ,cAAO,CACP,eHcN,CACF,CGTA,wBACE,iBHYF,CGTA,eACE,kBHYF,CGbA,iBAII,kBUnTuB,CVoTvB,UHaJ,CGlBA,kBASI,YHaJ,CGtBA,iBAaI,eHaJ,CGPE,+BACE,gBO/ToB,CPgUpB,aQjTqB,CRkTrB,oBHUJ,CGPE,gCACE,wBHUJ,CGXG,mCAIG,YHWN,CGfG,qCAOG,WHYN,CGnBG,kCAUG,UHaN,CGvBG,wCAaG,YHcN,CG3BG,mCAgBG,UHeN,CG/BG,kCAmBG,UHgBN,CGnCG,kCAsBG,YHiBN,CGvCG,mCAyBG,UHkBN,CG3CG,oCA4BG,YHmBN,CGdA,mBACE,gBHiBF,CGdA,gBACE,UAAW,CACX,aAAc,CACd,iBAAkB,CAClB,cHiBF,CGrBA,sBAOI,YAAa,CACb,eHkBJ,CG1BA,kCAYI,cHkBJ,CGdA,qBACE,kBHiBF,CGdA,aACE,aHiBF,CGbA,iBACE,WAAY,CACZ,kBHgBF,CGbA,gBAKI,iBAAW,CACX,YHYJ,CSvWI,oCNqVJ,gBAEI,QHqBF,CACF,CGdA,eACE,kBHiBF,CSjXI,oCN+VJ,0BAKM,UAAW,CACX,gBAAiB,CACjB,SHkBJ,CACF,CG1BA,4BAYI,UAAW,CACX,SAAU,CAKV,cHcJ,CS/XI,oCN+VJ,4BAgBM,SHqBJ,CACF,CGtCA,iBAsBI,+BHoBJ,CGhBA,2BAIE,eHgBF,CS7YI,oCNyXJ,2BAEI,kBHuBF,CACF,CG1BA,6CWhXI,UAAO,CAGL,aAAc,CAed,qBCtE0C,CDuE1C,eC5EyC,CZib3C,kBAAmB,CACnB,kBAAmB,CACnB,iBH0BJ,CGpCA,wDW1VQ,cdkYR,CSjaI,oCNyXJ,6CWhXI,UAAO,CAGL,aAAc,CAed,qBCtE0C,CDuE1C,eC5EyC,CZubzC,eAAgB,CAChB,kBHmCJ,CGlDF,wDW1VQ,cd+YN,CACF,CGtDA,+CAuBI,cHmCJ,CSnbI,oCNyXJ,+CAqBM,qBH0CJ,CACF,CGhEA,2CA2BI,QHyCJ,CGrCA,yBACE,iBAAkB,CAClB,QHwCF,CGrCA,eACE,eO7ba,CP+bX,eAAS,CACT,eHuCJ,CGnCA,gBACE,gBHsCF,CGnCA,gBACE,eOzca,CP0cb,mBAAqB,CAKnB,iBHqCJ,CGjCA,mCAEI,0CQxdgB,CRwdhB,kCHmCJ,CG/BA,sBACE,UHkCF,CG9BA,sBACE,wBHiCF,CG9BA,uBACE,wBHiCF,CG9BA,yBACE,wBHiCF,CG9BA,0BACE,wBHiCF,CG9BA,2BACE,wBHiCF,CG7BA,gCACE,aHgCF,CG7BA,+BACE,aHgCF,CG7BA,wBACE,aHgCF,CG7BA,sBACE,aHgCF,CG7BA,oBACE,eHgCF,CG7BA,iBACE,+BQ3gBkB,CR4gBlB,oBHgCF,CGlCA,+BAKI,aHiCJ,CG7BA,mBACE,eHgCF,CG7BA,iPAQI,QH+BJ,CG3BA,uCAEI,gBAAiB,CAEf,kBAAY,CACZ,YH4BN,CGvBA,eACE,qBH0BF,CGtBA,oCDpXE,aAAc,CACd,QAAS,CACT,SAAU,CACV,oBF8YF,CG7BA,uCD9WI,iBAAkB,CAClB,QF+YJ,CGlCA,8CD1WM,YFgZN,CGtCA,6CDtWM,YFgZN,CGtCA,qBACE,gBHyCF,CGtCA,uDAEE,eHyCF,CGtCA,6CAEE,aHyCF,CGtCA,qGAOE,aHyCF,CGtCA,0FAME,aHyCF,CGtCA,+CAGE,aHyCF,CGtCA,mBACE,aHyCF,CGtCA,wCACE,SHyCF,CGtCA,qKAGE,iBHyCF,CGtCA,uCACE,YHyCF,CGtCA,8BAEI,oBAAqB,CAEnB,gBAAS,CACT,iBHuCN,CGlCA,mBACE,6BQ9oB4B,CR+oB5B,iBHqCF,CGlCA,WACE,4BQnpB4B,CRopB5B,aQppB4B,CRqpB5B,cOrpBY,CPspBZ,gBAAiB,CACjB,iBHqCF,CGlCA,WAEI,eAAS,CACT,cHoCJ,CGvCA,uBAOI,YHoCJ,CGhCA,kCAEI,eAAgB,CAChB,gBHkCJ,CGrCA,kCAMI,cHmCJ,CG/BA,mCAEI,eAAgB,CAChB,iBHiCJ,CGpCA,mCAMI,cHkCJ,CGrBA,+BAEI,gBO5rBiB,CP6rBjB,eHuBJ,CG1BA,6BAOI,eHuBJ,CG9BA,+CAJE,gBO5rBqB,CP6rBrB,eHsCF,CGnCA,6CAiBQ,oEajtByD,CbktBzD,gBc3sByB,Cd4sBzB,eHsBR,CGzCA,0DAuBQ,gBHsBR,CG7CA,4EAJE,gBO5rBqB,CP6rBrB,eHqDF,CGjBA,0FAOI,4EHmBJ,CG1BA,eAWI,gBHmBJ,CG9BA,eAeI,gBHmBJ,CGlCA,eAmBI,gBHmBJ,CGtCA,eAuBI,gBHmBJ,CG1CA,eA2BI,gBHmBJ,CG9CA,eA+BI,gBHmBJ,CGlDA,yBAmCI,gBHmBJ,CGtDA,6BAuCI,gBcjwB6B,CdkwB7B,eHmBJ,CG3DA,2BA4CI,4EavwBoE,CbwwBpE,gBcvwB6B,CdwwB7B,eAtFY,CAuFZ,eHmBJ,CGlEA,2CAqDQ,oEatxByD,CbuxBzD,gBchxByB,CdixBzB,eHiBR,CGxEA,wDA2DQ,4EatxBgE,CbuxBhE,gBctxByB,CduxBzB,eArGQ,CAsGR,eHiBR,CGXA,oBACE,kBHcF,CGXA,qBAEI,4EHaJ,CGPA,gBDjiBE,gBKjR2B,CJozB3B,gBHUF,CS7uBI,mCNiuBJ,gBD9hBI,iBKlRmB,CLmRnB,kBF+iBF,CACF,CGdA,yBACE,oBHiBF,CGlBA,6BAII,UAAW,CACX,kBAAoB,CACpB,cAAe,CACf,UHkBJ,CGzBA,2BAWI,oBAAqB,CACrB,YHkBJ,CSpwBI,mCNsuBJ,2BAeM,YHoBJ,CACF,CGhBA,sBACE,YAAa,CACb,WAAY,CACZ,YHmBF,CShxBI,mCN0vBJ,sBAMI,aHqBF,CACF,CGjBA,uCACE,YHoBF,CGfA,qBAEI,iBAAkB,CAClB,SHiBJ,CS/xBI,mCN2wBJ,qBAMM,iBHmBJ,CACF,CGdA,qCACE,WAAY,CACZ,UHiBF","file":"usajobs-design-system-documentation.css","sourcesContent":["@charset \"UTF-8\";\n\n@if $border-box-sizing == true {\n  html { // http://bit.ly/1qk2tVR\n    box-sizing: border-box;\n  }\n\n  * {\n    &,\n    &::after,\n    &::before {\n      box-sizing: inherit;\n    }\n  }\n}\n","html {\n  box-sizing: border-box;\n}\n\n*, *::after, *::before {\n  box-sizing: inherit;\n}\n\n.usajobs-assistive-text {\n  position: absolute !important;\n  margin: -1px !important;\n  border: 0 !important;\n  padding: 0 !important;\n  width: 1px !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  clip: rect(0 0 0 0) !important;\n}\n\n.overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  -webkit-transition: all 0.15s ease-out 0s;\n  -moz-transition: all 0.15s ease-out 0s;\n  transition: all 0.15s ease-out 0s;\n  background: #000;\n  opacity: 0;\n  visibility: hidden;\n  z-index: 9999;\n}\n\n.overlay.is-visible {\n  visibility: visible;\n}\n\n.usajobs-documentation-header__dslink svg {\n  width: 10rem;\n  vertical-align: middle;\n  color: #981b1e;\n}\n\n@media screen and (min-width: 951px) {\n  .usajobs-documentation-header__dslink svg {\n    max-width: 13.8rem;\n  }\n}\n\n.usa-header-extended .usa-navbar,\n.usa-header-extended .usa-nav-inner {\n  max-width: 160rem;\n}\n\n.usa-nav-close,\n.usa-nav-close:hover {\n  color: #323a45;\n}\n\n.usa-nav-submenu h5 {\n  margin: 0;\n  padding: 0.75rem 1rem 0.75rem 2.8rem;\n  line-height: 1.3;\n}\n\n@media screen and (min-width: 951px) {\n  .usa-nav-submenu h5 {\n    padding: 0.75rem 1rem 0.75rem 1.5rem;\n    color: #ffffff;\n  }\n}\n\n.l-doc {\n  position: relative;\n  max-width: 160rem;\n  margin: 3rem auto 5em auto;\n  padding: 0 1.5rem;\n}\n\n@media screen and (min-width: 48em) {\n  .l-doc {\n    padding-left: 3rem;\n    padding-right: 3rem;\n  }\n}\n\n.l-doc--full_bleed .styleguide-content {\n  max-width: inherit;\n}\n\n.l-shell-doc.main-content {\n  margin-top: 6rem;\n}\n\n.styleguide-content {\n  max-width: 104rem;\n}\n\n.styleguide-content > h1 {\n  margin-top: 0;\n}\n\n.styleguide-content > h1:not(:first-child) {\n  margin-top: 1.5rem;\n}\n\n.site-subheading {\n  font-size: 1.4rem;\n  font-weight: 400;\n  line-height: 1.5;\n  text-transform: uppercase;\n  color: #5b616b;\n  display: block;\n  letter-spacing: 0.5px;\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n}\n\n.main-content .maturity,\n.usajobs-content .maturity {\n  text-decoration: none;\n  color: #ffffff;\n}\n\n.main-content .maturity.incomplete,\n.usajobs-content .maturity.incomplete {\n  background-color: #cd2026;\n}\n\n.main-content .maturity.under_review,\n.usajobs-content .maturity.under_review {\n  background-color: #fdb81e;\n  color: #212121;\n}\n\n.main-content .maturity.design_complete,\n.usajobs-content .maturity.design_complete {\n  background-color: #8ba6ca;\n  color: #212121;\n}\n\n.main-content .maturity.available,\n.usajobs-content .maturity.available {\n  background-color: #94bfa2;\n  color: #212121;\n}\n\n.usa-styleguide-footer {\n  background-color: #112e51;\n  padding-bottom: 3rem;\n  padding-top: 3rem;\n}\n\n.usa-styleguide-footer p,\n.usa-styleguide-footer a {\n  color: #ffffff;\n  font-size: 1.6rem;\n  margin-bottom: 1.5rem;\n  margin-top: 0;\n}\n\n@media screen and (min-width: 600px) {\n  .usa-styleguide-footer p,\n  .usa-styleguide-footer a {\n    margin-bottom: 0;\n  }\n}\n\n.preview {\n  background-color: #fff;\n  margin-top: 2em;\n  margin-bottom: 2em;\n  padding: 1.5rem 3rem;\n  border: 1px solid #f1f1f1;\n}\n\n.preview::after {\n  clear: both;\n  content: \"\";\n  display: block;\n}\n\n.preview.compact {\n  padding: 1rem 0;\n}\n\n.preview.compact .usa-heading-alt {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.preview.super-compact {\n  padding: 0;\n}\n\n.preview.super-compact .usa-heading-alt {\n  margin-left: 1.5rem;\n  margin-right: 1.5rem;\n}\n\n.preview.full-bleed {\n  margin-left: -1.5rem;\n  margin-right: -1.5rem;\n  padding: 0;\n}\n\n@media screen and (min-width: 62em) {\n  .preview.full-bleed {\n    margin-left: -3rem;\n    margin-right: -3rem;\n    padding: 0;\n  }\n}\n\n.preview .is-peripheral {\n  opacity: 0.2;\n}\n\n.preview-no_border {\n  border: 0;\n  margin-top: 0;\n  margin-bottom: 2em;\n  padding: 0;\n}\n\n.preview .usajobs-joa-intro .usajobs-joa-aside {\n  max-height: inherit;\n}\n\n.code-snippets .code-snippet-button:after {\n  content: \"\\25be  hide code\";\n}\n\n.code-snippets.hidden table {\n  display: none;\n}\n\n.code-snippets.hidden .code-snippet-button:after {\n  content: \"\\25b8  show code\";\n}\n\n.code-snippets table {\n  table-layout: fixed;\n  width: 100%;\n  padding: 3em 0 0 0;\n}\n\n.code-snippets table td {\n  background-color: #f5f5f5;\n  border: 1px solid #e0e0e0;\n  position: relative;\n  vertical-align: top;\n}\n\n.code-snippets table td .code-copy-button {\n  border-radius: 0;\n  position: absolute;\n  margin: 0;\n  right: 0;\n  top: 0;\n}\n\n.code-snippets table td .code-copy-button:hover {\n  background-color: #212121;\n}\n\n.code-snippets table th {\n  border: none;\n  text-align: left;\n}\n\n.code-snippets table pre,\n.code-snippets table code {\n  direction: ltr;\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n}\n\n.code-snippets table pre {\n  padding: 0 1em 1em 1em;\n}\n\n.code-snippets table code {\n  font-size: 1.13333rem;\n  line-height: 1.4em;\n  word-wrap: break-word;\n}\n\n.code-snippets table code.language-html {\n  max-width: 25em;\n}\n\n.usa-grid-example {\n  background: #e3e4e5;\n}\n\n.usa-grid-example > * {\n  color: #ffffff;\n  padding: 1em;\n  background: #727272;\n  margin-top: 0.5em;\n  margin-bottom: 0.5em;\n}\n\n@media screen and (min-width: 600px) {\n  .usa-grid-example .usa-width-one-twelfth {\n    padding-left: 0;\n    padding-right: 0;\n  }\n}\n\n.usa-grid-example-blank {\n  text-align: center;\n}\n\n.usa-grid-text {\n  background: #727272;\n}\n\n.usa-grid-text > * {\n  background: #e3e4e5;\n  color: #000;\n}\n\n.usa-grid-text h3 {\n  margin-top: 0;\n}\n\n.usa-grid-text p {\n  margin-bottom: 0;\n}\n\n.usajobs-spacing-example__item {\n  font-size: 1.4rem;\n  color: #323a45;\n  margin-bottom: 1.5rem;\n}\n\n.usajobs-spacing-example__space {\n  background-color: #02bfe7;\n}\n\n.usajobs-spacing-example__space.XS {\n  width: 0.25rem;\n}\n\n.usajobs-spacing-example__space.base {\n  width: 0.5rem;\n}\n\n.usajobs-spacing-example__space.S {\n  width: 1rem;\n}\n\n.usajobs-spacing-example__space.default {\n  width: 1.5rem;\n}\n\n.usajobs-spacing-example__space.SM {\n  width: 2rem;\n}\n\n.usajobs-spacing-example__space.M {\n  width: 3rem;\n}\n\n.usajobs-spacing-example__space.L {\n  width: 4.5rem;\n}\n\n.usajobs-spacing-example__space.XL {\n  width: 6rem;\n}\n\n.usajobs-spacing-example__space.XXL {\n  width: 7.5rem;\n}\n\nh3 + .button_wrapper {\n  margin-top: -0.5em;\n}\n\n.button_wrapper {\n  clear: both;\n  display: table;\n  margin-left: -1rem;\n  padding: 0rem 1rem;\n}\n\n.button_wrapper:after {\n  content: \"\\A\";\n  white-space: pre;\n}\n\n.button_wrapper button:last-child {\n  margin-right: 0;\n}\n\n.button_wrapper-dark {\n  background: #323a45;\n}\n\n.usa-heading {\n  color: #205493;\n}\n\n.usa-color-short {\n  height: 7rem;\n  margin-bottom: 1rem;\n}\n\n.usa-color-name {\n  margin-bottom: 1em;\n  margin-top: 0;\n}\n\n@media screen and (min-width: 600px) {\n  .usa-color-name {\n    margin: 0;\n  }\n}\n\n.usa-color-row {\n  margin-bottom: 3rem;\n}\n\n@media screen and (min-width: 600px) {\n  .usa-color-row .color-big {\n    float: left;\n    padding-right: 4%;\n    width: 32%;\n  }\n}\n\n.usa-color-row .color-small {\n  float: left;\n  width: 50%;\n  margin-right: 0;\n}\n\n@media screen and (min-width: 600px) {\n  .usa-color-row .color-small {\n    width: 17%;\n  }\n}\n\n.usa-color-row p {\n  font-family: monospace, monospace;\n}\n\n.usa-primary-color-section {\n  margin-bottom: 0;\n}\n\n@media screen and (min-width: 600px) {\n  .usa-primary-color-section {\n    margin-bottom: 8rem;\n  }\n}\n\n.usa-primary-color-section .usa-color-square {\n  float: left;\n  display: block;\n  margin-right: 2.35765%;\n  width: 48.82117%;\n  margin-bottom: 7rem;\n  padding-bottom: 50%;\n  position: relative;\n}\n\n.usa-primary-color-section .usa-color-square:last-child {\n  margin-right: 0;\n}\n\n@media screen and (min-width: 600px) {\n  .usa-primary-color-section .usa-color-square {\n    float: left;\n    display: block;\n    margin-right: 2.35765%;\n    width: 23.23176%;\n    margin-bottom: 0;\n    padding-bottom: 19%;\n  }\n  .usa-primary-color-section .usa-color-square:last-child {\n    margin-right: 0;\n  }\n}\n\n.usa-primary-color-section .usa-mobile-end-row {\n  margin-right: 0;\n}\n\n@media screen and (min-width: 600px) {\n  .usa-primary-color-section .usa-mobile-end-row {\n    margin-right: 2.35765%;\n  }\n}\n\n.usa-primary-color-section .usa-color-name {\n  margin: 0;\n}\n\n.usa-color-inner-content {\n  position: absolute;\n  top: 100%;\n}\n\n.usa-color-hex {\n  font-weight: 700;\n  margin-bottom: 0;\n  margin-top: 1rem;\n}\n\n.usa-color-name {\n  font-size: 1.2rem;\n}\n\n.usa-color-text {\n  font-weight: 700;\n  margin-bottom: 0.4rem;\n  padding-bottom: 1rem;\n  padding-left: 2rem;\n  padding-right: 2rem;\n  padding-top: 1rem;\n}\n\n.usa-color-outline .usa-color-text {\n  box-shadow: inset 0 0 0 1px #5b616b;\n}\n\n.usa-color-text-white {\n  color: #ffffff;\n}\n\n.usa-color-green-dark {\n  background-color: #2d8700;\n}\n\n.usa-color-green-light {\n  background-color: #4aa564;\n}\n\n.usa-color-green-lighter {\n  background-color: #94bfa2;\n}\n\n.usa-color-green-lightest {\n  background-color: #e7f4e4;\n}\n\n.usa-color-primary-darkest {\n  background-color: #112e51;\n}\n\n.usa-color-text-primary-darkest {\n  color: #112e51;\n}\n\n.usa-color-text-primary-darker {\n  color: #205493;\n}\n\n.usa-color-text-primary {\n  color: #0071bc;\n}\n\n.usa-color-text-green {\n  color: #2e8540;\n}\n\n.usajobs-img-2x-doc {\n  max-width: 376px;\n}\n\n.usa-heading-alt {\n  border-bottom: 1px solid #5b616b;\n  padding-bottom: 0.8rem;\n}\n\n.usa-heading-alt.is-deprecated {\n  color: #5b616b;\n}\n\nh6.usa-heading-alt {\n  margin-top: 4rem;\n}\n\n.usa-typography-example-font h1,\n.usa-typography-example-font h2,\n.usa-typography-example-font h3,\n.usa-typography-example-font h4,\n.usa-typography-example-font h5,\n.usa-typography-example-font h6,\n.usa-typography-example-font .usa-font-example p {\n  margin: 0;\n}\n\n.usa-typography-example .usa-monospace {\n  font-size: 1.2rem;\n  margin-bottom: 3rem;\n  margin-top: 0;\n}\n\n.usa-monospace {\n  font-family: monospace;\n}\n\n.usa-code-sample .usa-unstyled-list {\n  display: block;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n}\n\n.usa-code-sample .usa-unstyled-list > li {\n  display: list-item;\n  margin: 0;\n}\n\n.usa-code-sample .usa-unstyled-list > li:before {\n  display: none;\n}\n\n.usa-code-sample .usa-unstyled-list > li:after {\n  display: none;\n}\n\n.usa-code-sample pre {\n  font-size: 1.2rem;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n  background: none;\n}\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n  color: #212121;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.deleted {\n  color: #046b99;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n  color: #e31c3d;\n}\n\n.token.atrule,\n.token.attr-value,\n.token.keyword {\n  color: #2e8540;\n}\n\n.token.punctuation {\n  color: #046b99;\n}\n\n.usa-code-sample .usa-accordion-content {\n  padding: 0;\n}\n\n.usa-content p:not(.usa-font-lead),\n.usa-content ul:not(.usa-accordion):not(.usa-accordion-bordered),\n.usa-content ol:not(.usa-accordion):not(.usa-accordion-bordered) {\n  max-width: inherit;\n}\n\n.usa-code-sample pre[class*=\"language-\"] {\n  margin-top: 0;\n}\n\n.preview .usa-background-dark {\n  display: inline-block;\n  padding-left: 1em;\n  padding-right: 1em;\n}\n\n.alignment-example {\n  border-left: 2px solid #205493;\n  padding-left: 1rem;\n}\n\n.help-text {\n  border-top: 2px solid #205493;\n  color: #205493;\n  font-size: 10px;\n  padding-top: 1rem;\n  text-align: center;\n}\n\n.text-tiny {\n  margin-bottom: 0;\n  margin-top: 5px;\n}\n\n.text-tiny:first-child {\n  margin-top: 0;\n}\n\n.typography-sans-intro .text-huge {\n  font-size: 140px;\n  line-height: 1.05;\n}\n\n.typography-sans-intro .text-tiny {\n  font-size: 15px;\n}\n\n.typography-serif-intro .text-huge {\n  font-size: 120px;\n  line-height: 1.275;\n}\n\n.typography-serif-intro .text-tiny {\n  font-size: 13px;\n}\n\n.serif-robust .usa-display-alt {\n  font-size: 4.4rem;\n  font-weight: 300;\n}\n\n.serif-robust .usa-font-lead {\n  font-weight: 300;\n}\n\n.serif-robust .usa-font-lead.usa-font-lead-alt {\n  font-size: 1.7rem;\n  font-weight: 400;\n}\n\n.serif-robust.serif-body .usa-font-example p {\n  font-family: \"Merriweather\", \"Georgia\", \"Cambria\", \"Times New Roman\", \"Times\", serif;\n  font-size: 1.5rem;\n  line-height: 1.7;\n}\n\n.serif-robust.serif-body .usa-font-example .usa-font-lead {\n  font-size: 2.4rem;\n}\n\n.serif-robust.serif-body .usa-font-example .usa-font-lead.usa-font-lead-alt {\n  font-size: 1.7rem;\n  font-weight: 400;\n}\n\n.sans-style h1,\n.sans-style h2,\n.sans-style h3,\n.sans-style h4,\n.sans-style h5,\n.sans-style h6 {\n  font-family: \"Source Sans Pro\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n}\n\n.sans-style h1 {\n  font-size: 4.4rem;\n}\n\n.sans-style h2 {\n  font-size: 3.4rem;\n}\n\n.sans-style h3 {\n  font-size: 2.4rem;\n}\n\n.sans-style h4 {\n  font-size: 1.9rem;\n}\n\n.sans-style h5 {\n  font-size: 1.6rem;\n}\n\n.sans-style h6 {\n  font-size: 1.3rem;\n}\n\n.sans-style .usa-display {\n  font-size: 5.9rem;\n}\n\n.sans-style .usa-display-alt {\n  font-size: 4.4rem;\n  font-weight: 300;\n}\n\n.sans-style .usa-font-lead {\n  font-family: \"Source Sans Pro\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n  font-size: 2.2rem;\n  font-weight: 300;\n  line-height: 1.5;\n}\n\n.sans-style.serif-body .usa-font-example p {\n  font-family: \"Merriweather\", \"Georgia\", \"Cambria\", \"Times New Roman\", \"Times\", serif;\n  font-size: 1.5rem;\n  line-height: 1.7;\n}\n\n.sans-style.serif-body .usa-font-example .usa-font-lead {\n  font-family: \"Source Sans Pro\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n  font-size: 2.2rem;\n  font-weight: 300;\n  line-height: 1.5;\n}\n\n.usa-accordion-docs {\n  margin-bottom: 6rem;\n}\n\n.serif-sans-minor h6 {\n  font-family: \"Source Sans Pro\", \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n}\n\n.usa-disclaimer {\n  padding: 0 1.5rem;\n  font-size: 1.3rem;\n}\n\n@media screen and (min-width: 48em) {\n  .usa-disclaimer {\n    padding-left: 3rem;\n    padding-right: 3rem;\n  }\n}\n\n.usa-disclaimer-official {\n  display: inline-block;\n}\n\n.usa-disclaimer-official img {\n  float: left;\n  margin-right: 0.7rem;\n  margin-top: 1px;\n  width: 2rem;\n}\n\n.usa-disclaimer-official p {\n  display: inline-block;\n  margin: 3px 0;\n}\n\n@media screen and (min-width: 30em) {\n  .usa-disclaimer-official p {\n    margin: 2px 0;\n  }\n}\n\n.usa-disclaimer-stage {\n  display: none;\n  float: right;\n  margin: 2px 0;\n}\n\n@media screen and (min-width: 62em) {\n  .usa-disclaimer-stage {\n    display: block;\n  }\n}\n\n.modals.is-open-modal .usa-site-header {\n  display: none;\n}\n\n.navigation .preview {\n  position: relative;\n  padding: 0;\n}\n\n@media screen and (min-width: 62em) {\n  .navigation .preview {\n    min-width: 99.2rem;\n  }\n}\n\nsvg:not(:root).usajobs-icon--example {\n  height: 2rem;\n  width: 2rem;\n}\n","// Accessibility\n\n@import \"utilities\";\n\n.usajobs-assistive-text {\n  @include hide();\n}\n","// USAJOBS Utilities\n\n// Typography helpers\n@mixin header {\n  font-family: $font-sans;\n  font-weight: $font-bold;\n  line-height: $heading-line-height;\n  margin-bottom: $size-base;\n  margin-top: $size-default;\n}\n\n@mixin h1 {\n  @include header();\n  font-size: $h1-font-size;\n  color: $color-primary-darkest;\n}\n\n@mixin h2 {\n  @include header();\n  font-size: $h2-font-size;\n  color: $color-primary-darkest;\n}\n\n@mixin h3 {\n  @include header();\n  font-size: $h3-font-size;\n}\n\n@mixin h4 {\n  @include header();\n  font-size: $h4-font-size;\n}\n\n@mixin h5 {\n  @include header();\n  font-size: $h5-font-size;\n}\n\n@mixin h6 {\n  @include header();\n  font-size: $h6-font-size;\n  font-weight: $font-normal;\n  text-transform: uppercase;\n}\n\n@mixin default-text {\n  font-size: $base-font-size;\n  font-weight: $font-normal;\n  line-height: 1.5;\n  margin: $size-S 0;\n}\n\n@mixin hide() {\n  position: absolute !important;\n  margin: -1px !important;\n  border: 0 !important;\n  padding: 0 !important;\n  width: 1px !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  clip: rect(0 0 0 0) !important;\n}\n\n@mixin makeCircle(\n  $size,\n  $border: none,\n  $bg-color: inherit,\n  $color: $color-white\n) {\n  display: inline-block;\n  width: $size;\n  height: $size;\n  line-height: $size;\n  border-radius: 50%;\n  color: $color;\n  background-color: $bg-color;\n  box-shadow: 0 0 0 2px $border inset;\n}\n\n@mixin makeSemiCircle($size, $bg-color: inherit, $color: $color-white) {\n  display: inline-block;\n  width: $size;\n  height: $size / 2;\n  line-height: $size;\n  -moz-border-radius: $size $size 0 0;\n  -webkit-border-radius: $size $size 0 0;\n  border-radius: $size $size 0 0;\n  color: $color;\n  background-color: $bg-color;\n}\n\n@mixin makeCloseButton($size: 35px) {\n  position: absolute;\n  top: -#{$size-default};\n  right: -#{$size-default};\n  margin: 0;\n  padding: 0;\n  @include makeCircle($size);\n  background-color: $color-gray-light;\n  text-decoration: none;\n\n  &:after {\n    position: relative;\n    display: inline-block;\n    width: rem(12px);\n    height: rem(12px);\n    background-size: 12px 12px;\n    content: url(\"../img/icons/close/times.svg\");\n    color: $color-white;\n    // Safari puts the icon slightly too low, Chrome slightly too high\n    // line-height corrects the issue in Chrome but makes it way too low in Safari\n    // line-height: $size;\n  }\n\n  &:hover {\n    background-color: $color-gray-dark;\n  }\n}\n\n@mixin makeButton(\n  $bg-color,\n  $hover-color,\n  $active-color,\n  $big: false,\n  $color: $color-white\n) {\n  display: inline-block;\n  appearance: none;\n  background-color: $bg-color;\n  border: 0;\n  color: $color;\n  cursor: pointer;\n  font-family: $font-sans;\n  font-size: $base-font-size;\n  font-weight: $font-bold;\n  line-height: 1;\n  outline: none;\n  @include margin(0.5em 0.5em 0.5em null);\n  text-align: center;\n  text-decoration: none;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n\n  .main-content & {\n    text-decoration: none;\n  }\n\n  @if ($big) {\n    padding: $size-default $size-M;\n    border-radius: 8px;\n    font-size: 2.4rem;\n  } @else {\n    padding: 1rem 2rem;\n    border-radius: $border-radius;\n  }\n\n  @include media($SM) {\n    width: auto;\n  }\n\n  &:visited {\n    color: $color;\n  }\n\n  &:hover,\n  &.usa-button-hover {\n    background-color: $hover-color;\n    color: $color;\n    border-bottom: 0;\n    text-decoration: none;\n  }\n\n  &:active,\n  &.usa-button-active {\n    background-color: $active-color;\n  }\n\n  &:focus {\n    box-shadow: $focus-shadow;\n  }\n}\n\n@mixin makePrimaryButton() {\n  @include makeButton(\n    $color-primary,\n    $color-primary-darker,\n    $color-primary-darkest,\n    \"big\"\n  );\n}\n\n@mixin bulletList() {\n  list-style: none;\n  padding-left: 0;\n  display: table;\n\n  > li {\n    display: table-row;\n\n    &:before {\n      content: \"•\";\n      display: table-cell;\n      padding-right: 0.4em;\n    }\n\n    &:after {\n      content: \"\";\n      display: block;\n      margin-bottom: 0.5em;\n    }\n  }\n}\n\n@mixin unstyledList() {\n  display: block;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n\n  > li {\n    display: list-item;\n    margin: 0;\n\n    &:before {\n      display: none;\n    }\n\n    &:after {\n      display: none;\n    }\n  }\n}\n\n// BACKWARD COMPATIBLE SUPPORT FOR BOOTSTRAP\n// From https://gist.github.com/johnkoht/6405117\n// Converted from sass to scss\n// Create the grid for a given size\n// This will loop over the number of columns and create a css class\n// for each. If it's the last gride size, then let's not add a float\n@mixin grid-core($size) {\n  @for $i from 1 through $grid-columns {\n    .col-#{$size}-#{$i} {\n      // Ignore float for the largest grid size\n      @if $i < $grid-columns {\n        float: left;\n      }\n      @include span-columns($i);\n    }\n    // If it's not the screen-xs, then let's add push and pull helper classes\n    @if $size != \"xs\" {\n      .col-#{$size}-push-#{$i} {\n        left: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);\n      }\n      .col-#{$size}-pull-#{$i} {\n        right: flex-grid($i, $grid-columns) + flex-gutter($grid-columns);\n      }\n    }\n  }\n}\n\n// OMEGA RESET\n// From http://www.ryanscherler.com/notes/entry/omega-reset-for-bourbon-neat/\n@mixin omega-reset($nth, $context: null) {\n  @if $context == null {\n    &:nth-child(#{$nth}) {\n      margin-right: flex-gutter();\n    }\n  } @else {\n    &:nth-child(#{$nth}) {\n      margin-right: flex-gutter($context);\n    }\n  }\n  &:nth-child(#{$nth} + 1) {\n    clear: none;\n  }\n}\n\n@mixin contentGutter() {\n  padding: 0 $size-default;\n\n  @include media($ML) {\n    padding-left: $size-M;\n    padding-right: $size-M;\n  }\n}\n\n// A variation on a mixin created to reproduce Google's Material Design Card shadows\n// https://gist.github.com/paulmelnikow/7fcfbe4f68e5df7fe326\n@mixin boxShadow($level, $inset: false) {\n  @if $level == 1 {\n    @if ($inset) {\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) inset,\n        0 1px 2px rgba(0, 0, 0, 0.24) inset;\n    } @else if {\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n    }\n  } @else if $level == 2 {\n    @if ($inset) {\n      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) inset,\n        0 3px 6px rgba(0, 0, 0, 0.23) inset;\n    }\n    @elseif {\n      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n    }\n  } @else if $level == 3 {\n    @if ($inset) {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19) inset,\n        0 6px 6px rgba(0, 0, 0, 0.23) inset;\n    }\n    @elseif {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n    }\n  } @else if $level == 4 {\n    @if ($inset) {\n      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25) inset,\n        0 10px 10px rgba(0, 0, 0, 0.22) inset;\n    }\n    @elseif {\n      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),\n        0 10px 10px rgba(0, 0, 0, 0.22);\n    }\n  } @else if $level == 5 {\n    @if ($inset) {\n      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3) inset,\n        0 15px 12px rgba(0, 0, 0, 0.22) inset;\n    }\n    @elseif {\n      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3),\n        0 15px 12px rgba(0, 0, 0, 0.22);\n    }\n  }\n}\n\n@mixin permaLink() {\n  color: $color-primary;\n\n  &:visited {\n    color: $color-primary;\n  }\n}\n\n// Allows us to use an HTML button and not get the default styling\n@mixin removeButton() {\n  margin: 0;\n  background-color: inherit;\n  border-radius: inherit;\n  color: $color-base;\n  font-weight: normal;\n\n  &:hover {\n    color: $color-base;\n    background-color: inherit;\n  }\n}\n\n@mixin UHPIcons($size: 31px) {\n  @include makeCircle($size, none, $color-secondary);\n  display: inline-block;\n  padding-bottom: $size-default;\n  font-size: $base-font-size;\n  text-align: center;\n  margin-right: $size-base;\n\n  &.public,\n  &.interchange {\n    @include makeCircle($size, none, $color-primary-alt);\n  }\n\n  &.federal-employees,\n  &.internal,\n  &.ses {\n    @include makeCircle($size, none, $color-primary-darkest);\n  }\n\n  &.federal-employees .fa::before {\n    margin-top: rem(-3px);\n    margin-right: rem(-2px);\n  }\n\n  &.internal .fa {\n    padding-top: rem(5px);\n\n    &::before {\n      margin-left: rem(1px);\n    }\n  }\n\n  &.veterans,\n  &.military-spouses {\n    @include makeCircle($size, none, $color-green);\n  }\n\n  // New variation with stacked circle icons\n  &.military-spouses {\n    .fa.is-first {\n      text-indent: 0;\n      top: -2px;\n      left: -4px;\n      opacity: 0.8;\n    }\n    .fa.is-second {\n      text-indent: 0;\n      left: 3px;\n    }\n  }\n\n  &.students {\n    @include makeCircle($size, none, $color-gold);\n  }\n\n  &.disability,\n  &.individuals-with-disabilities {\n    @include makeCircle($size, none, $color-primary-darker);\n  }\n\n  &.peace-corps {\n    @include makeCircle($size, none, $color-visited);\n  }\n\n  &.former-overseas-employees,\n  &.family-of-overseas-employees {\n    @include makeCircle($size, none, $color-primary-alt-darkest);\n  }\n\n  &.native-americans {\n    @include makeCircle($size, none, $color-gray);\n  }\n\n  &.land-mgmt,\n  &.land-management {\n    @include makeCircle($size, none, $color-gray-warm-dark);\n  }\n}\n\n@mixin applicationStatusColors() {\n  background-color: $color-gray-dark;\n  color: $color-white;\n  border: 1px solid $color-gray-dark;\n\n  &.status-received,\n  &.status-referred,\n  &.status-selected {\n    background-color: $color-green-dark;\n    color: $color-white;\n    border-color: $color-green-dark;\n  }\n\n  // Paused\n  &.status-incomplete,\n  &.status-in-progress {\n    background-color: $color-gold;\n    color: $color-base;\n    border-color: $color-gold;\n  }\n\n  // Stopped\n  &.status-canceled,\n  &.status-not-referred,\n  &.status-not-selected {\n    background-color: $color-secondary;\n    color: $color-white;\n    border-color: $color-secondary;\n  }\n}\n\n// Mixin to replace the use of font awesome\n@mixin icon-content($file, $height, $width, $path: null) {\n  display: inline-block;\n  background-size: $height $width;\n  height: $height;\n  width: $width;\n  @if $path == null {\n    content: url(\"../img/icons/#{$file}.svg\");\n  } @else {\n    content: url($path);\n  }\n}\n\n@mixin iconCenter($size: 1em) {\n  display: inline-flex;\n  align-self: center;\n  position: relative;\n  height: $size;\n  width: $size;\n\n  svg {\n    position: absolute;\n    left: 0;\n    right: 0;\n    margin: 0 auto;\n    height: 1em;\n    width: 1em;\n  }\n}\n","// Layouts: Documentation\n// Based off of U.S. Web Design Standards Styleguide\n\n@import \"../base-shared\";\n@import \"shared\";\n\n// Navigation ------------- //\n.overlay {\n  @include position(fixed, 0 0 0 0);\n  @include transition;\n  background: #000;\n  opacity: 0;\n  visibility: hidden;\n  z-index: 9999;\n\n  &.is-visible {\n    visibility: visible;\n  }\n}\n\n// Header overrides --------- //\n.usajobs-documentation-header__dslink {\n  svg {\n    width: 10rem;\n    vertical-align: middle;\n    color: $color-secondary-darkest;\n\n    @media screen and (min-width: $nav-width) {\n      max-width: 13.8rem;\n    }\n  }\n}\n\n.usa-header-extended .usa-navbar,\n.usa-header-extended .usa-nav-inner {\n  max-width: $site-max-width;\n}\n\n.usa-nav-close,\n.usa-nav-close:hover {\n  color: $color-gray-dark;\n}\n\n// Mega menu overrides ---------- //\n.usa-nav-submenu h5 {\n  margin: 0;\n  padding: 0.75rem $size-S 0.75rem 2.8rem;\n  line-height: 1.3;\n\n  @media screen and (min-width: $nav-width) {\n    padding: 0.75rem $size-S 0.75rem $size-default;\n    color: $color-white;\n  }\n}\n\n// Main Content --------- //\n.l-doc {\n  position: relative;\n  max-width: $site-max-width;\n  margin: $size-M auto 5em auto;\n  @include contentGutter();\n}\n\n.l-doc--full_bleed {\n  .styleguide-content {\n    max-width: inherit;\n  }\n}\n\n.l-shell-doc.main-content {\n  margin-top: $size-XL;\n}\n\n// Styleguide Content -------- //\n.styleguide-content {\n  max-width: $site-max-width-docs;\n\n  > h1 {\n    margin-top: 0;\n\n    &:not(:first-child) {\n      margin-top: $size-default;\n    }\n  }\n}\n\n.site-subheading {\n  font-size: $small-font-size;\n  font-weight: 400;\n  line-height: 1.5;\n  text-transform: uppercase;\n  color: $color-gray;\n  display: block;\n  letter-spacing: 0.5px;\n  margin-top: 0;\n  margin-bottom: $size-base;\n}\n\n.main-content .maturity,\n.usajobs-content .maturity {\n  text-decoration: none;\n  color: $color-white;\n\n  &.incomplete {\n    background-color: $color-secondary-dark;\n  }\n\n  &.under_review {\n    background-color: $color-gold;\n    color: $color-base;\n  }\n\n  &.design_complete {\n    background-color: $color-cool-blue-lighter;\n    color: $color-base;\n  }\n\n  &.available {\n    background-color: $color-green-lighter;\n    color: $color-base;\n  }\n}\n\n// Footer --------------- //\n.usa-styleguide-footer {\n  background-color: $color-primary-darkest;\n  padding: {\n    bottom: 3rem;\n    top: 3rem;\n  }\n\n  // This is a styleguide-only rule and is not needed in the main library code for\n  // the footer component which uses different styles\n  // TODO investigate why it's not needed in the main library CSS\n  p,\n  a {\n    @include media($medium-screen) {\n      margin-bottom: 0;\n    }\n    color: $color-white;\n    font-size: $h5-font-size;\n    margin: {\n      bottom: 1.5rem;\n      top: 0;\n    }\n  }\n}\n\n// Pattern Preview Boxes -------- //\n.preview {\n  @include clearfix();\n  background-color: #fff;\n  margin: {\n    top: 2em;\n    bottom: 2em;\n  }\n  padding: $size-default $site-margins;\n  border: 1px solid $color-gray-lightest;\n\n  &.compact {\n    padding: 1rem 0;\n\n    .usa-heading-alt {\n      margin-left: $size-default;\n      margin-right: $size-default;\n    }\n  }\n\n  &.super-compact {\n    padding: 0;\n\n    .usa-heading-alt {\n      margin-left: $size-default;\n      margin-right: $size-default;\n    }\n  }\n\n  &.full-bleed {\n    margin-left: -#{$size-default};\n    margin-right: -#{$size-default};\n    padding: 0;\n\n    @include media($L) {\n      margin-left: -#{$size-M};\n      margin-right: -#{$size-M};\n      padding: 0;\n    }\n  }\n\n  .is-peripheral {\n    opacity: 0.2;\n  }\n}\n\n.preview-no_border {\n  border: 0;\n  margin: {\n    top: 0;\n    bottom: 2em;\n  }\n  padding: 0;\n}\n\n// Specific overried to revert a fix we have in production in the JOA\n.preview .usajobs-joa-intro .usajobs-joa-aside {\n  // This is only for display purposes in the documentation! Do not copy to production!!!\n  max-height: inherit;\n}\n\n// Code Sample Boxes --------- //\n.code-snippets {\n  .code-snippet-button:after {\n    content: \"\\25be  hide code\";\n  }\n\n  &.hidden {\n    table {\n      display: none;\n    }\n\n    .code-snippet-button:after {\n      content: \"\\25b8  show code\";\n    }\n  }\n\n  table {\n    table-layout: fixed;\n    width: 100%;\n    padding: 3em 0 0 0;\n\n    td {\n      background-color: #f5f5f5;\n      border: 1px solid #e0e0e0;\n      position: relative;\n      vertical-align: top;\n\n      .code-copy-button {\n        border-radius: 0;\n        position: absolute;\n        margin: 0;\n        right: 0;\n        top: 0;\n\n        &:hover {\n          background-color: $color-base;\n        }\n      }\n    }\n\n    th {\n      border: none;\n      text-align: left;\n    }\n\n    pre,\n    code {\n      direction: ltr;\n      text-align: left;\n      white-space: pre;\n      word-spacing: normal;\n      word-break: normal;\n    }\n\n    pre {\n      padding: 0 1em 1em 1em;\n    }\n\n    code {\n      font-size: $base-font-size / 1.5;\n      line-height: 1.4em;\n      word-wrap: break-word;\n\n      &.language-html {\n        max-width: 25em;\n      }\n    }\n  }\n}\n\n// Custom styles to illustrate invisible grid for web design standards\n.usa-grid-example {\n  background: $color-grid-light;\n\n  > * {\n    color: $color-white;\n    padding: 1em;\n    background: $color-grid-dark;\n    margin: {\n      top: 0.5em;\n      bottom: 0.5em;\n    }\n  }\n\n  .usa-width-one-twelfth {\n    @include media($medium-screen) {\n      padding: {\n        left: 0;\n        right: 0;\n      }\n    }\n  }\n}\n\n.usa-grid-example-blank {\n  text-align: center;\n}\n\n.usa-grid-text {\n  background: $color-grid-dark;\n\n  > * {\n    background: $color-grid-light;\n    color: #000;\n  }\n\n  h3 {\n    margin-top: 0;\n  }\n\n  p {\n    margin-bottom: 0;\n  }\n}\n\n// Custom styles to illustrate spacing\n.usajobs-spacing-example {\n  &__item {\n    font-size: $small-font-size;\n    color: $color-gray-dark;\n    margin-bottom: $size-default;\n  }\n\n  &__space {\n    background-color: $color-primary-alt;\n\n    &.XS {\n      width: $size-XS;\n    }\n    &.base {\n      width: $size-base;\n    }\n    &.S {\n      width: $size-S;\n    }\n    &.default {\n      width: $size-default;\n    }\n    &.SM {\n      width: $size-SM;\n    }\n    &.M {\n      width: $size-M;\n    }\n    &.L {\n      width: $size-L;\n    }\n    &.XL {\n      width: $size-XL;\n    }\n    &.XXL {\n      width: $size-XXL;\n    }\n  }\n}\n\nh3 + .button_wrapper {\n  margin-top: -0.5em;\n}\n\n.button_wrapper {\n  clear: both;\n  display: table;\n  margin-left: -1rem;\n  padding: 0rem 1rem;\n\n  &:after {\n    content: \"\\A\";\n    white-space: pre;\n  }\n\n  button:last-child {\n    margin-right: 0;\n  }\n}\n\n.button_wrapper-dark {\n  background: #323a45;\n}\n\n.usa-heading {\n  color: $color-primary-darker;\n}\n\n// Colors -------------- //\n.usa-color-short {\n  height: 7rem;\n  margin-bottom: 1rem;\n}\n\n.usa-color-name {\n  @include media($medium-screen) {\n    margin: 0;\n  }\n  margin: {\n    bottom: 1em;\n    top: 0;\n  }\n}\n\n.usa-color-row {\n  margin-bottom: 3rem;\n\n  .color-big {\n    @include media($medium-screen) {\n      float: left;\n      padding-right: 4%;\n      width: 32%;\n    }\n  }\n\n  .color-small {\n    float: left;\n    width: 50%;\n\n    @include media($medium-screen) {\n      width: 17%;\n    }\n    margin-right: 0;\n  }\n\n  p {\n    font-family: monospace, monospace;\n  }\n}\n\n.usa-primary-color-section {\n  @include media($medium-screen) {\n    margin-bottom: 8rem;\n  }\n  margin-bottom: 0;\n\n  .usa-color-square {\n    @include span-columns(6);\n    margin-bottom: 7rem;\n    padding-bottom: 50%;\n    position: relative;\n\n    @include media($medium-screen) {\n      @include span-columns(3);\n      margin-bottom: 0;\n      padding-bottom: 19%;\n    }\n  }\n\n  .usa-mobile-end-row {\n    @include media($medium-screen) {\n      margin-right: 2.35765%;\n    }\n    margin-right: 0;\n  }\n\n  .usa-color-name {\n    margin: 0;\n  }\n}\n\n.usa-color-inner-content {\n  position: absolute;\n  top: 100%;\n}\n\n.usa-color-hex {\n  font-weight: $font-bold;\n  margin: {\n    bottom: 0;\n    top: 1rem;\n  }\n}\n\n.usa-color-name {\n  font-size: 1.2rem;\n}\n\n.usa-color-text {\n  font-weight: $font-bold;\n  margin-bottom: 0.4rem;\n  padding: {\n    bottom: 1rem;\n    left: 2rem;\n    right: 2rem;\n    top: 1rem;\n  }\n}\n\n.usa-color-outline {\n  .usa-color-text {\n    box-shadow: inset 0 0 0 1px $color-gray;\n  }\n}\n\n.usa-color-text-white {\n  color: $color-white;\n}\n\n// Color background helpers\n.usa-color-green-dark {\n  background-color: $color-green-dark;\n}\n\n.usa-color-green-light {\n  background-color: $color-green-light;\n}\n\n.usa-color-green-lighter {\n  background-color: $color-green-lighter;\n}\n\n.usa-color-green-lightest {\n  background-color: $color-green-lightest;\n}\n\n.usa-color-primary-darkest {\n  background-color: $color-primary-darkest;\n}\n\n// Color text helpers\n.usa-color-text-primary-darkest {\n  color: $color-primary-darkest;\n}\n\n.usa-color-text-primary-darker {\n  color: $color-primary-darker;\n}\n\n.usa-color-text-primary {\n  color: $color-primary;\n}\n\n.usa-color-text-green {\n  color: $color-green;\n}\n\n.usajobs-img-2x-doc {\n  max-width: 376px;\n}\n\n.usa-heading-alt {\n  border-bottom: 1px solid $color-gray;\n  padding-bottom: 0.8rem;\n\n  &.is-deprecated {\n    color: $color-gray;\n  }\n}\n\nh6.usa-heading-alt {\n  margin-top: 4rem;\n}\n\n.usa-typography-example-font {\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  .usa-font-example p {\n    margin: 0;\n  }\n}\n\n.usa-typography-example {\n  .usa-monospace {\n    font-size: 1.2rem;\n    margin: {\n      bottom: 3rem;\n      top: 0;\n    }\n  }\n}\n\n.usa-monospace {\n  font-family: monospace;\n}\n\n// Code snippet boxes\n.usa-code-sample .usa-unstyled-list {\n  @include unstyledList();\n}\n\n.usa-code-sample pre {\n  font-size: 1.2rem;\n}\n\n:not(pre) > code[class*=\"language-\"],\npre[class*=\"language-\"] {\n  background: none;\n}\n\ncode[class*=\"language-\"],\npre[class*=\"language-\"] {\n  color: $color-base;\n}\n\n.token.property,\n.token.tag,\n.token.boolean,\n.token.number,\n.token.constant,\n.token.symbol,\n.token.deleted {\n  color: $color-primary-alt-darkest;\n}\n\n.token.selector,\n.token.attr-name,\n.token.string,\n.token.char,\n.token.builtin,\n.token.inserted {\n  color: $color-secondary;\n}\n\n.token.atrule,\n.token.attr-value,\n.token.keyword {\n  color: $color-green;\n}\n\n.token.punctuation {\n  color: $color-primary-alt-darkest;\n}\n\n.usa-code-sample .usa-accordion-content {\n  padding: 0;\n}\n\n.usa-content p:not(.usa-font-lead),\n.usa-content ul:not(.usa-accordion):not(.usa-accordion-bordered),\n.usa-content ol:not(.usa-accordion):not(.usa-accordion-bordered) {\n  max-width: inherit;\n}\n\n.usa-code-sample pre[class*=\"language-\"] {\n  margin-top: 0;\n}\n\n.preview {\n  .usa-background-dark {\n    display: inline-block;\n    padding: {\n      left: 1em;\n      right: 1em;\n    }\n  }\n}\n\n.alignment-example {\n  border-left: 2px solid $color-primary-darker;\n  padding-left: 1rem;\n}\n\n.help-text {\n  border-top: 2px solid $color-primary-darker;\n  color: $color-primary-darker;\n  font-size: $em-base;\n  padding-top: 1rem;\n  text-align: center;\n}\n\n.text-tiny {\n  margin: {\n    bottom: 0;\n    top: 5px;\n  }\n\n  &:first-child {\n    margin-top: 0;\n  }\n}\n\n.typography-sans-intro {\n  .text-huge {\n    font-size: 140px;\n    line-height: 1.05;\n  }\n  .text-tiny {\n    font-size: 15px;\n  }\n}\n\n.typography-serif-intro {\n  .text-huge {\n    font-size: 120px;\n    line-height: 1.275;\n  }\n  .text-tiny {\n    font-size: 13px;\n  }\n}\n\n// Alt font styles\n\n$font-light: 300;\n\n@mixin font-lead-alt {\n  font-size: $base-font-size;\n  font-weight: $font-normal;\n}\n\n.serif-robust {\n  .usa-display-alt {\n    font-size: $h1-font-size;\n    font-weight: $font-light;\n  }\n\n  .usa-font-lead {\n    font-weight: $font-light;\n  }\n\n  .usa-font-lead.usa-font-lead-alt {\n    @include font-lead-alt();\n  }\n\n  &.serif-body {\n    .usa-font-example {\n      p {\n        font-family: $font-serif;\n        font-size: rem(15px);\n        line-height: $lead-line-height;\n      }\n\n      .usa-font-lead {\n        font-size: $h3-font-size;\n      }\n\n      .usa-font-lead.usa-font-lead-alt {\n        @include font-lead-alt();\n      }\n    }\n  }\n}\n\n.sans-style {\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: $font-sans;\n  }\n\n  h1 {\n    font-size: rem(44px);\n  }\n\n  h2 {\n    font-size: rem(34px);\n  }\n\n  h3 {\n    font-size: rem(24px);\n  }\n\n  h4 {\n    font-size: rem(19px);\n  }\n\n  h5 {\n    font-size: rem(16px);\n  }\n\n  h6 {\n    font-size: rem(13px);\n  }\n\n  .usa-display {\n    font-size: rem(59px);\n  }\n\n  .usa-display-alt {\n    font-size: rem(44px);\n    font-weight: $font-light;\n  }\n\n  .usa-font-lead {\n    font-family: $font-sans;\n    font-size: rem(22px);\n    font-weight: $font-light;\n    line-height: $base-line-height;\n  }\n\n  &.serif-body {\n    .usa-font-example {\n      p {\n        font-family: $font-serif;\n        font-size: rem(15px);\n        line-height: $lead-line-height;\n      }\n\n      .usa-font-lead {\n        font-family: $font-sans;\n        font-size: rem(22px);\n        font-weight: $font-light;\n        line-height: $base-line-height;\n      }\n    }\n  }\n}\n\n.usa-accordion-docs {\n  margin-bottom: 6rem;\n}\n\n.serif-sans-minor {\n  h6 {\n    font-family: $font-sans;\n  }\n}\n\n// This adds styleguide-only right and left margins for our disclaimer\n// Since the layout we use is not in a grid\n.usa-disclaimer {\n  @include contentGutter();\n  font-size: 1.3rem;\n}\n\n.usa-disclaimer-official {\n  display: inline-block;\n\n  img {\n    float: left;\n    margin-right: 0.7rem;\n    margin-top: 1px;\n    width: 2rem;\n  }\n\n  p {\n    display: inline-block;\n    margin: 3px 0;\n\n    @include media($SM) {\n      margin: 2px 0;\n    }\n  }\n}\n\n.usa-disclaimer-stage {\n  display: none;\n  float: right;\n  margin: 2px 0;\n\n  @include media($L) {\n    display: block;\n  }\n}\n\n// Odd one, but the design system header is fixed and thus conflicts with our modal\n.modals.is-open-modal .usa-site-header {\n  display: none;\n}\n\n// For some components, like navigation we need more width to allow\n// the component to behave properly\n.navigation {\n  .preview {\n    position: relative;\n    padding: 0;\n\n    @include media($L) {\n      min-width: rem(992px);\n    }\n  }\n}\n\n// Iconography examples --------- //\nsvg:not(:root).usajobs-icon--example {\n  height: 2rem;\n  width: 2rem;\n}\n","@charset \"UTF-8\";\n\n/// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.\n///\n/// @param {Position} $position [relative]\n///   A CSS position value\n///\n/// @param {Arglist} $coordinates [null null null null]\n///   List of values that correspond to the 4-value syntax for the edges of a box\n///\n/// @example scss - Usage\n///   .element {\n///     @include position(absolute, 0 null null 10em);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     left: 10em;\n///     position: absolute;\n///     top: 0;\n///   }\n///\n/// @require {function} is-length\n/// @require {function} unpack\n\n@mixin position($position: relative, $coordinates: null null null null) {\n  @if type-of($position) == list {\n    $coordinates: $position;\n    $position: relative;\n  }\n\n  $coordinates: unpack($coordinates);\n\n  $offsets: (\n    top:    nth($coordinates, 1),\n    right:  nth($coordinates, 2),\n    bottom: nth($coordinates, 3),\n    left:   nth($coordinates, 4)\n  );\n\n  position: $position;\n\n  @each $offset, $value in $offsets {\n    @if is-length($value) {\n      #{$offset}: $value;\n    }\n  }\n}\n","@charset \"UTF-8\";\n\n/// A mixin for generating vendor prefixes on non-standardized properties.\n///\n/// @param {String} $property\n///   Property to prefix\n///\n/// @param {*} $value\n///   Value to use\n///\n/// @param {List} $prefixes\n///   Prefixes to define\n///\n/// @example scss - Usage\n///   .element {\n///     @include prefixer(border-radius, 10px, webkit ms spec);\n///   }\n///\n/// @example css - CSS Output\n///   .element {\n///     -webkit-border-radius: 10px;\n///     -moz-border-radius: 10px;\n///     border-radius: 10px;\n///   }\n///\n/// @require {variable} $prefix-for-webkit\n/// @require {variable} $prefix-for-mozilla\n/// @require {variable} $prefix-for-microsoft\n/// @require {variable} $prefix-for-opera\n/// @require {variable} $prefix-for-spec\n\n@mixin prefixer($property, $value, $prefixes) {\n  @each $prefix in $prefixes {\n    @if $prefix == webkit {\n      @if $prefix-for-webkit {\n        -webkit-#{$property}: $value;\n      }\n    } @else if $prefix == moz {\n      @if $prefix-for-mozilla {\n        -moz-#{$property}: $value;\n      }\n    } @else if $prefix == ms {\n      @if $prefix-for-microsoft {\n        -ms-#{$property}: $value;\n      }\n    } @else if $prefix == o {\n      @if $prefix-for-opera {\n        -o-#{$property}: $value;\n      }\n    } @else if $prefix == spec {\n      @if $prefix-for-spec {\n        #{$property}: $value;\n      }\n    } @else  {\n      @warn \"Unrecognized prefix: #{$prefix}\";\n    }\n  }\n}\n\n@mixin disable-prefix-for-all() {\n  $prefix-for-webkit:    false !global;\n  $prefix-for-mozilla:   false !global;\n  $prefix-for-microsoft: false !global;\n  $prefix-for-opera:     false !global;\n  $prefix-for-spec:      false !global;\n}\n","// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.\n// Example: @include transition (all 2s ease-in-out);\n//          @include transition (opacity 1s ease-in 2s, width 2s ease-out);\n//          @include transition-property (transform, opacity);\n\n@mixin transition($properties...) {\n  // Fix for vendor-prefix transform property\n  $needs-prefixes: false;\n  $webkit: ();\n  $moz: ();\n  $spec: ();\n\n  // Create lists for vendor-prefixed transform\n  @each $list in $properties {\n    @if nth($list, 1) == \"transform\" {\n      $needs-prefixes: true;\n      $list1: -webkit-transform;\n      $list2: -moz-transform;\n      $list3: ();\n\n      @each $var in $list {\n        $list3: join($list3, $var);\n\n        @if $var != \"transform\" {\n          $list1: join($list1, $var);\n          $list2: join($list2, $var);\n        }\n      }\n\n      $webkit: append($webkit, $list1);\n      $moz:    append($moz,    $list2);\n      $spec:   append($spec,   $list3);\n    } @else {\n      $webkit: append($webkit, $list, comma);\n      $moz:    append($moz,    $list, comma);\n      $spec:   append($spec,   $list, comma);\n    }\n  }\n\n  @if $needs-prefixes {\n    -webkit-transition: $webkit;\n       -moz-transition: $moz;\n            transition: $spec;\n  } @else {\n    @if length($properties) >= 1 {\n      @include prefixer(transition, $properties, webkit moz spec);\n    } @else {\n      $properties: all 0.15s ease-out 0s;\n      @include prefixer(transition, $properties, webkit moz spec);\n    }\n  }\n}\n\n@mixin transition-property($properties...) {\n  -webkit-transition-property: transition-property-names($properties, \"webkit\");\n     -moz-transition-property: transition-property-names($properties, \"moz\");\n          transition-property: transition-property-names($properties, false);\n}\n\n@mixin transition-duration($times...) {\n  @include prefixer(transition-duration, $times, webkit moz spec);\n}\n\n@mixin transition-timing-function($motions...) {\n  // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()\n  @include prefixer(transition-timing-function, $motions, webkit moz spec);\n}\n\n@mixin transition-delay($times...) {\n  @include prefixer(transition-delay, $times, webkit moz spec);\n}\n","// Spacing\n\n$size-XS: 0.25rem; // 2.5px\n$size-base: 0.5rem; // 5px\n$size-S: $size-base * 2; // 10px\n$size-default: $size-base * 3; // 15px\n$size-SM: $size-base * 4; // 20px - Use this sparingly\n$size-M: $size-base * 6; // 30px\n$size-L: $size-base * 9; // 45px\n$size-XL: $size-M * 2; // 60px\n$size-XXL: $size-default * 5; // 75px\n$size-XXXL: $size-default * 6; // 100px\n\n$space-inset-default: $size-default $size-default $size-default $size-default;\n$space-inset-XS: $size-XS $size-XS $size-XS $size-XS;\n$space-inset-base: $size-base $size-base $size-base $size-base;\n$space-inset-M: $size-M $size-M $size-M $size-M;\n$space-inset-L: $size-L $size-L $size-L $size-L;\n\n$space-stack-default: 0 0 $size-default 0;\n$space-stack-XS: 0 0 $size-XS 0;\n$space-stack-S: 0 0 $size-S 0;\n$space-stack-M: 0 0 $size-M 0;\n$space-stack-L: 0 0 $size-L 0;\n$space-stack-XL: 0 0 $size-XL 0;\n$space-stack-XXL: 0 0 $size-XXL 0;\n","// Layout variables\n\n// Breakpoints\n$small-screen:       481px;\n$medium-screen:      600px;\n$large-screen:      1201px;\n\n$site-max-width:    160rem;\n$site-max-width-S:  120rem; // used by the Help Center UHP pages until we get new images\n$site-max-width-docs:  104rem;\n\n// Standards deviation\n// $site-max-width:      1040px !default;\n$lead-max-width:      77rem;\n$input-max-width:     46rem;\n$button-max-width:    30.4rem;\n$article-max-width:   60rem;\n$text-max-width:      62rem;\n// Standards deviation\n// $text-max-width:      53rem !default;\n$nav-width:           951px;\n\n$site-margins:        3rem;\n$site-margins-mobile: 1.5rem;\n$grid-margins:        3rem;\n\n// From the Standards (node_modules/uswds/src/stylesheets/core/_variables.scss)\n// Grid column counts by screen size\n$grid-columns-small: 1 !default;\n$grid-columns-medium: 6 !default;\n$grid-columns-large: 12 !default;\n\n// @media single-keyword helpers\n$small: new-breakpoint(min-width $small-screen $grid-columns-small) !default;\n$medium: new-breakpoint(min-width $medium-screen $grid-columns-medium) !default;\n$large: new-breakpoint(min-width $large-screen $grid-columns-large) !default;\n","@charset \"UTF-8\";\n\n/// Outputs a media-query block with an optional grid context (the total number of columns used in the grid).\n///\n/// @param {List} $query\n///   A list of media query features and values, where each `$feature` should have a corresponding `$value`.\n///   For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1).\n///\n///   If there is only a single `$value` in `$query`, `$default-feature` is going to be used.\n///\n///   The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`).\n///\n///\n/// @param {Number (unitless)} $total-columns [$grid-columns]\n///   - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter.\n///\n/// @example scss - Usage\n///   .responsive-element {\n///      @include media(769px) {\n///        @include span-columns(6);\n///      }\n///   }\n///\n///  .new-context-element {\n///    @include media(min-width 320px max-width 480px, 6) {\n///      @include span-columns(6);\n///    }\n///  }\n///\n/// @example css - CSS Output\n///  @media screen and (min-width: 769px) {\n///    .responsive-element {\n///      display: block;\n///      float: left;\n///      margin-right: 2.35765%;\n///      width: 48.82117%;\n///    }\n///\n///    .responsive-element:last-child {\n///      margin-right: 0;\n///    }\n///  }\n///\n///  @media screen and (min-width: 320px) and (max-width: 480px) {\n///    .new-context-element {\n///      display: block;\n///      float: left;\n///      margin-right: 4.82916%;\n///      width: 100%;\n///    }\n///\n///    .new-context-element:last-child {\n///      margin-right: 0;\n///    }\n///  }\n\n@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) {\n  @if length($query) == 1 {\n    @media screen and ($default-feature: nth($query, 1)) {\n      $default-grid-columns: $grid-columns;\n      $grid-columns: $total-columns !global;\n      @content;\n      $grid-columns: $default-grid-columns !global;\n    }\n  } @else {\n    $loop-to: length($query);\n    $media-query: \"screen and \";\n    $default-grid-columns: $grid-columns;\n    $grid-columns: $total-columns !global;\n\n    @if is-not(is-even(length($query))) {\n      $grid-columns: nth($query, $loop-to) !global;\n      $loop-to: $loop-to - 1;\n    }\n\n    $i: 1;\n    @while $i <= $loop-to {\n      $media-query: $media-query + \"(\" + nth($query, $i) + \": \" + nth($query, $i + 1) + \") \";\n\n      @if ($i + 1) != $loop-to {\n        $media-query: $media-query + \"and \";\n      }\n\n      $i: $i + 2;\n    }\n\n    @media #{$media-query} {\n      @content;\n      $grid-columns: $default-grid-columns !global;\n    }\n  }\n}\n","// Typography\n\n@import \"lib/addons/_font-stacks\";\n\n$em-base: 10px;\n$base-font-size-px: 17px;\n$base-font-size: 1.7rem;\n$xsmall-font-size: 1.2rem;\n$small-font-size: 1.4rem;\n$lead-font-size: 1.9rem;\n$title-font-size: 5.2rem;\n\n$h1-font-size: 4.4rem;\n$h2-font-size: 3.4rem;\n$h3-font-size: 2.4rem;\n$h4-font-size: 1.9rem;\n$h5-font-size: 1.6rem;\n$h6-font-size: 1.3rem;\n\n$base-line-height: 1.5;\n$heading-line-height: 1.3;\n$lead-line-height: 1.7;\n\n$font-sans: \"Source Sans Pro\", $helvetica;\n$font-serif: \"Merriweather\", $georgia;\n\n$font-normal: 400;\n$font-bold: 700;\n","// Colors\n\n// USWDS colors\n$color-primary: #0071bc;\n$color-primary-darker: #205493;\n$color-primary-darkest: #112e51;\n\n$color-primary-alt: #02bfe7;\n$color-primary-alt-dark: #00a6d2;\n$color-primary-alt-darkest: #046b99;\n$color-primary-alt-light: #9bdaf1; // lighten($color-primary-alt, 60%)\n$color-primary-alt-lightest: #e1f3f8; // lighten($color-primary-alt, 90%)\n\n$color-secondary: #e31c3d;\n$color-secondary-dark: #cd2026;\n$color-secondary-darkest: #981b1e;\n$color-secondary-light: #e59393; // lighten($color-secondary, 60%)\n$color-secondary-lightest: #f9dede; // lighten($color-secondary, 90%)\n\n$color-white: #ffffff;\n$color-base: #212121;\n$color-black: #000000;\n\n$color-gray-dark: #323a45;\n$color-gray: #5b616b; // lighten($color-gray-dark, 20%)\n$color-gray-medium: #757575; // lightest gray that passes color contrast\n$color-gray-light: #aeb0b5; // lighten($color-gray-dark, 60%)\n$color-gray-lighter: #d6d7d9; // lighten($color-gray-dark, 80%)\n$color-gray-lightest: #f1f1f1; // lighten($color-gray-dark, 91%)\n\n$color-gray-warm-dark: #494440;\n$color-gray-warm-light: #e4e2e0; // lighten($color-gray-warm-dark, 90%)\n$color-gray-cool-light: #dce4ef; // lighten($color-primary, 90%)\n\n$color-gold: #fdb81e;\n$color-gold-light: #f9c642; //  lighten($color-gold, 20%)\n$color-gold-lighter: #fad980; //  lighten($color-gold, 60%)\n$color-gold-lightest: #fff1d2; //  lighten($color-gold, 83%)\n\n$color-green: #2e8540;\n$color-green-light: #4aa564; // lighten($color-green, 20%)\n$color-green-lighter: #94bfa2; // lighten($color-green, 60%)\n$color-green-lightest: #e7f4e4; // lighten($color-green, 60%)\n\n$color-cool-blue: #205493;\n$color-cool-blue-light: #4773aa; // lighten($color-cool-blue, 20%)\n$color-cool-blue-lighter: #8ba6ca; // lighten($color-cool-blue, 60%)\n$color-cool-blue-lightest: #dce4ef; // lighten($color-cool-blue, 90%)\n\n$color-focus: #3e94cf;\n$color-visited: #4c2c92;\n\n$color-shadow: rgba(#000, 0.3);\n\n// USAJOBS specific\n$color-green-dark: #2d8700;\n$color-green-darker: darken($color-green-dark, 10%);\n\n// Only used for the active state of the alert/destructive button\n// See https://github.com/USAJOBS/design-system/issues/1\n$color-red-darkest: #7b0608;\n","@charset \"UTF-8\";\n\n/// Provides an easy way to include a clearfix for containing floats.\n///\n/// @link http://goo.gl/yP5hiZ\n///\n/// @example scss\n///   .element {\n///     @include clearfix;\n///   }\n///\n/// @example css\n///   .element::after {\n///     clear: both;\n///     content: \"\";\n///     display: block;\n///   }\n\n@mixin clearfix {\n  &::after {\n    clear: both;\n    content: \"\";\n    display: block;\n  }\n}\n","// Shared variables\n\n$width-nav-sidebar: 250px;\n$color-grid-dark:   #727272;\n$color-grid-light:  #e3e4e5;\n$site-top:          124px;\n$text-width:        660px;\n$section-padding:   7.2rem;\n","@charset \"UTF-8\";\n\n/// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well.\n///\n/// @param {List} $span\n///   A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional).\n///\n///   If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid.\n///\n///   The values can be separated with any string such as `of`, `/`, etc.\n///\n///   `$columns` also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing `2.4` in a standard 12 column grid will divide the row into 5 columns.\n///\n/// @param {String} $display [block]\n///   Sets the display property of the element. By default it sets the display property of the element to `block`.\n///\n///   If passed `block-collapse`, it also removes the margin gutter by adding it to the element width.\n///\n///   If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid.\n///\n/// @example scss - Usage\n///   .element {\n///     @include span-columns(6);\n///\n///    .nested-element {\n///      @include span-columns(2 of 6);\n///    }\n///  }\n///\n/// @example css - CSS Output\n///   .element {\n///     display: block;\n///     float: left;\n///     margin-right: 2.35765%;\n///     width: 48.82117%;\n///   }\n///\n///   .element:last-child {\n///     margin-right: 0;\n///   }\n///\n///   .element .nested-element {\n///     display: block;\n///     float: left;\n///     margin-right: 4.82916%;\n///     width: 30.11389%;\n///   }\n///\n///   .element .nested-element:last-child {\n///     margin-right: 0;\n///   }\n\n@mixin span-columns($span: $columns of $container-columns, $display: block) {\n  $columns: nth($span, 1);\n  $container-columns: container-span($span);\n\n  $parent-columns: get-parent-columns($container-columns) !global;\n\n  $direction: get-direction($layout-direction, $default-layout-direction);\n  $opposite-direction: get-opposite-direction($direction);\n\n  $display-table: is-display-table($container-display-table, $display);\n\n  @if $display-table  {\n    display: table-cell;\n    width: percentage($columns / $container-columns);\n  } @else {\n    float: #{$opposite-direction};\n\n    @if $display != no-display {\n      display: block;\n    }\n\n    @if $display == collapse {\n      @include -neat-warn(\"The 'collapse' argument will be deprecated. Use 'block-collapse' instead.\");\n    }\n\n    @if $display == collapse or $display == block-collapse {\n      width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);\n\n      &:last-child {\n        width: flex-grid($columns, $container-columns);\n      }\n\n    } @else {\n      margin-#{$direction}: flex-gutter($container-columns);\n      width: flex-grid($columns, $container-columns);\n\n      &:last-child {\n        margin-#{$direction}: 0;\n      }\n    }\n  }\n}\n","$parent-columns: $grid-columns !default;\n$fg-column: $column;\n$fg-gutter: $gutter;\n$fg-max-columns: $grid-columns;\n$container-display-table: false !default;\n$layout-direction: LTR !default;\n\n@function flex-grid($columns, $container-columns: $fg-max-columns) {\n  $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;\n  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;\n  @return percentage($width / $container-width);\n}\n\n@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {\n  $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;\n  @return percentage($gutter / $container-width);\n}\n\n@function grid-width($n) {\n  @return $n * $gw-column + ($n - 1) * $gw-gutter;\n}\n\n@function get-parent-columns($columns) {\n  @if $columns != $grid-columns {\n    $parent-columns: $columns !global;\n  } @else {\n    $parent-columns: $grid-columns !global;\n  }\n\n  @return $parent-columns;\n}\n\n@function is-display-table($container-is-display-table, $display) {\n  @return $container-is-display-table == true or $display == table;\n}\n","@charset \"UTF-8\";\n\n/// Georgia font stack.\n///\n/// @type List\n\n$georgia: \"Georgia\", \"Cambria\", \"Times New Roman\", \"Times\", serif;\n\n/// Helvetica font stack.\n///\n/// @type List\n\n$helvetica: \"Helvetica Neue\", \"Helvetica\", \"Roboto\", \"Arial\", sans-serif;\n\n/// Lucida Grande font stack.\n///\n/// @type List\n\n$lucida-grande: \"Lucida Grande\", \"Tahoma\", \"Verdana\", \"Arial\", sans-serif;\n\n/// Monospace font stack.\n///\n/// @type List\n\n$monospace: \"Bitstream Vera Sans Mono\", \"Consolas\", \"Courier\", monospace;\n\n/// Verdana font stack.\n///\n/// @type List\n\n$verdana: \"Verdana\", \"Geneva\", sans-serif;\n","// Convert pixels to rems\n// eg. for a relational value of 12px write rem(12)\n// Assumes $em-base is the font-size of <html>\n\n@function rem($pxval) {\n  @if not unitless($pxval) {\n    $pxval: strip-units($pxval);\n  }\n\n  $base: $em-base;\n  @if not unitless($base) {\n    $base: strip-units($base);\n  }\n  @return ($pxval / $base) * 1rem;\n}\n"]}