{"version":3,"sources":["../../node_modules/bootstrap/scss/_type.scss","acc_boot.css","setup/config/_fonts.scss","acc_boot.scss","setup/config/__root.cssvars.scss","../../node_modules/bootstrap/scss/_root.scss","../../node_modules/bootstrap/scss/_reboot.scss","../../node_modules/bootstrap/scss/vendor/_rfs.scss","setup/config/__config.boot.scss","setup/config/_colors.scss","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/mixins/_lists.scss","../../node_modules/bootstrap/scss/_images.scss","../../node_modules/bootstrap/scss/mixins/_image.scss","../../node_modules/bootstrap/scss/_containers.scss","../../node_modules/bootstrap/scss/mixins/_container.scss","../../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../../node_modules/bootstrap/scss/_grid.scss","../../node_modules/bootstrap/scss/mixins/_grid.scss","../../node_modules/bootstrap/scss/_tables.scss","../../node_modules/bootstrap/scss/mixins/_table-variants.scss","../../node_modules/bootstrap/scss/forms/_labels.scss","../../node_modules/bootstrap/scss/forms/_form-text.scss","../../node_modules/bootstrap/scss/forms/_form-control.scss","../../node_modules/bootstrap/scss/mixins/_gradients.scss","../../node_modules/bootstrap/scss/_variables.scss","../../node_modules/bootstrap/scss/forms/_form-select.scss","../../node_modules/bootstrap/scss/forms/_form-check.scss","../../node_modules/bootstrap/scss/forms/_form-range.scss","../../node_modules/bootstrap/scss/forms/_floating-labels.scss","../../node_modules/bootstrap/scss/forms/_input-group.scss","../../node_modules/bootstrap/scss/mixins/_forms.scss","../../node_modules/bootstrap/scss/_buttons.scss","../../node_modules/bootstrap/scss/mixins/_buttons.scss","../../node_modules/bootstrap/scss/_transitions.scss","../../node_modules/bootstrap/scss/_dropdown.scss","../../node_modules/bootstrap/scss/mixins/_caret.scss","../../node_modules/bootstrap/scss/_button-group.scss","../../node_modules/bootstrap/scss/_nav.scss","../../node_modules/bootstrap/scss/_navbar.scss","../../node_modules/bootstrap/scss/_card.scss","../../node_modules/bootstrap/scss/_accordion.scss","../../node_modules/bootstrap/scss/_breadcrumb.scss","../../node_modules/bootstrap/scss/_pagination.scss","../../node_modules/bootstrap/scss/mixins/_pagination.scss","../../node_modules/bootstrap/scss/_badge.scss","../../node_modules/bootstrap/scss/_alert.scss","../../node_modules/bootstrap/scss/mixins/_alert.scss","../../node_modules/bootstrap/scss/_progress.scss","../../node_modules/bootstrap/scss/_list-group.scss","../../node_modules/bootstrap/scss/mixins/_list-group.scss","../../node_modules/bootstrap/scss/_close.scss","../../node_modules/bootstrap/scss/_toasts.scss","../../node_modules/bootstrap/scss/_modal.scss","../../node_modules/bootstrap/scss/mixins/_backdrop.scss","../../node_modules/bootstrap/scss/_tooltip.scss","../../node_modules/bootstrap/scss/mixins/_reset-text.scss","../../node_modules/bootstrap/scss/_popover.scss","../../node_modules/bootstrap/scss/_carousel.scss","../../node_modules/bootstrap/scss/mixins/_clearfix.scss","../../node_modules/bootstrap/scss/_spinners.scss","../../node_modules/bootstrap/scss/_offcanvas.scss","../../node_modules/bootstrap/scss/helpers/_colored-links.scss","../../node_modules/bootstrap/scss/helpers/_ratio.scss","../../node_modules/bootstrap/scss/helpers/_position.scss","../../node_modules/bootstrap/scss/helpers/_stacks.scss","../../node_modules/bootstrap/scss/helpers/_visually-hidden.scss","../../node_modules/bootstrap/scss/mixins/_visually-hidden.scss","../../node_modules/bootstrap/scss/helpers/_stretched-link.scss","../../node_modules/bootstrap/scss/helpers/_text-truncation.scss","../../node_modules/bootstrap/scss/mixins/_text-truncate.scss","../../node_modules/bootstrap/scss/helpers/_vr.scss","recipes/base/_web-footer.scss","bespoke/_bespoke.bento.scss","<no source>","base/_typography.scss","base/_forms.scss","base/_table.scss","styleguide/_styleguide.scss","containers/_containers.scss","base/_table.boot.scss","components/boot/_boot.buttons.override.scss","components/boot/_boot.carousel.override.scss","components/boot/_boot.navbar.override.scss","components/boot/_boot.collapser.icon.scss","components/acc/_acc.boot._coveosearchbar.override.scss","bespoke/_bespoke.pagelayout.scss","bespoke/_bespoke.microsite.scss"],"names":[],"mappings":"AAoGE,gBC2lBF,CC9rBA,WACC,kBAAA,CACA,iBAAA,CACA,eAAA,CACA,uMD6DD,CCJA,KACC,kCAAA,CAEA,mBAAA,CACA,yCAAA,CAFA,oCAAA,CAGA,sBDMD,CEwHA,MACI,kIAAA,CC3LF,4BAAA,CACA,0BAAA,CACA,0BAAA,CACA,iEAAA,CAHA,+BAAA,CACA,0BAAA,CACA,4BAAA,CACA,yEAAA,CAHA,6BAAA,CACA,0BAAA,CACA,yBAAA,CACA,iEAAA,CAHA,cAAA,CACA,sBAAA,CACA,wBAAA,CACA,yDAAA,CAHA,4BAAA,CACA,0BAAA,CACA,0BAAA,CACA,iEAAA,CAHA,cAAA,CACA,wBAAA,CACA,uBAAA,CACA,yDAAA,CAHA,gCAAA,CACA,6BAAA,CACA,6BAAA,CACA,6EAAA,CAHA,4BAAA,CACA,yBAAA,CACA,yBAAA,CACA,6DAAA,CAHA,yBAAA,CACA,uBAAA,CACA,uBAAA,CACA,qDAAA,CAHA,+BAAA,CACA,4BAAA,CACA,iBAAA,CACA,yEAAA,CAHA,yBAAA,CACA,YAAA,CACA,qBAAA,CACA,iDAAA,CAUD,sCAAA,CACA,wBAAA,CACA,mCAAA,CACA,qGAAA,CACA,6CAAA,CACA,+BAAA,CACA,0CAAA,CACA,iIAAA,CACA,+CAAA,CACA,iCAAA,CACA,4CAAA,CACA,yIAAA,CAGA,qCAAA,CACA,uBAAA,CACA,kCAAA,CACA,iGAAA,CACA,4CAAA,CACA,8BAAA,CACA,wCAAA,CACA,6HAAA,CACA,8CAAA,CACA,gCAAA,CACA,2CAAA,CACA,qIHoCD,CG/BC,+DACC,kCAAA,CAIA,mBAAA,CAHA,oBAAA,CAKA,mDAAA,CAJA,iBAAA,CACA,mBAAA,CAIA,eAAA,CAFA,aH8GF,CItKA,MAQI,iBAAA,CAAA,mBAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,gBAAA,CAAA,mBAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,kBAAA,CAAA,iBAAA,CAAA,sBAAA,CAIA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAAA,qBAAA,CAIA,oBAAA,CAAA,sBAAA,CAAA,oBAAA,CAAA,mBAAA,CAAA,iBAAA,CAAA,oBAAA,CAAA,kBAAA,CAIA,2BAAA,CAAA,8BAAA,CAAA,yBAAA,CAAA,0BAAA,CAAA,yBAAA,CAAA,2BAAA,CAAA,wBAAA,CAGF,0BAAA,CACA,uBAAA,CACA,4BAAA,CACA,4BAAA,CAMA,8GAAA,CACA,8FAAA,CACA,4EAAA,CAQA,+CAAA,CACA,wBAAA,CAAA,wBAAA,CACA,yBAAA,CACA,yBAAA,CACA,uBAAA,CAIA,iBJkLF,CKrNA,iBAGE,qBLwNF,CKzMI,8CANJ,MAOM,sBL6MJ,CACF,CKhMA,KASE,6BAAA,CACA,4CAAA,CAFA,kCAAA,CAFA,0BAAA,CAJA,sCAAA,CCmPI,kCALI,CD5OR,sCAAA,CACA,sCAAA,CAJA,QAAA,CAMA,oCLsMF,CKzLA,GAGE,6BAAA,CACA,QAAA,CAFA,aE8b4B,CF/b5B,aAAA,CAIA,WL4LF,CKzLA,eACE,UL4LF,CKlLA,0CAGE,iEEiYqB,CF/XrB,eEiYqB,CFhYrB,gBEiYqB,CFrYrB,mBEiYuB,CFlYvB,YLyLF,CKhLA,OCoMM,kBALI,CAKJ,yBNhBN,CK/KA,OC+LM,kBALI,CAKJ,yBNZN,CK9KA,OC0LM,kBALI,CAKJ,wBNRN,CK7KA,OCqLM,iBALI,CAKJ,qBNJN,CK5KA,OCgLM,cALI,CAKJ,kBNAN,CK3KA,OC2KM,cALI,CAKJ,cNIN,CKpKA,EAEE,kBEkL0B,CFnL1B,YLwKF,CK5JA,yCAGE,WAAA,CADA,wCAAA,CAAA,gCAAA,CAEA,qCAAA,CAAA,6BL+JF,CKzJA,QAEE,iBAAA,CACA,mBAAA,CAFA,kBL8JF,CKtJA,MAEE,iBLyJF,CKtJA,SAIE,kBAAA,CADA,YL0JF,CKtJA,wBAIE,eLyJF,CKtJA,GACE,eLyJF,CKpJA,GACE,mBAAA,CACA,aLuJF,CKjJA,WACE,eLoJF,CK5IA,SAEE,kBL+IF,CKvIA,aC4EM,gBN+DN,CKpIA,WAEE,oJEkT4B,CFnT5B,YLwIF,CK9HA,QC0DM,eALI,CDjDR,aAAA,CAFA,iBAAA,CAGA,uBLiIF,CK9HA,IAAM,aLkIN,CKjIA,IAAM,SLqIN,CKhIA,EACE,aE+CW,CF9CX,oBLmIF,CKjIE,QACE,aE8Ce,CF7Cf,yBLmIJ,CKzHE,4DAEE,aAAA,CACA,oBL2HJ,CKpHA,kBAME,aAAA,CAFA,oCE2J4B,CD7IxB,aALI,CDNR,0BLuHF,CKhHA,IACE,aAAA,CCGI,gBALI,CDIR,kBAAA,CADA,YAAA,CAEA,aLoHF,CK/GE,SAEE,aAAA,CCPE,iBALI,CDaN,iBLiHJ,CK7GA,KAGE,oBAAA,CADA,aG7RK,CF+QD,gBN+HN,CK7GE,OACE,aL+GJ,CK3GA,IAIE,wBHlOS,CO3EP,iBAAA,CJ4SF,UHjPM,CIuNF,gBALI,CD6BR,mBLkHF,CK5GE,QC9BI,aALI,CDsCN,eE0He,CF5Hf,SLgHJ,CKrGA,OACE,eLwGF,CKlGA,QAEE,qBLqGF,CK7FA,MAEE,wBAAA,CADA,mBLiGF,CK7FA,QAGE,aH5QS,CG2QT,oBEuL4B,CFxL5B,iBEwL4B,CFrL5B,eLgGF,CKzFA,GAEE,kBAAA,CACA,+BL2FF,CKxFA,2BAME,cAAA,CAAA,oBL6FF,CKnFA,MACE,oBLsFF,CKhFA,OAEE,eLkFF,CK1EA,iCACE,SL6EF,CKxEA,sCAME,mBAAA,CC9HI,iBALI,CDqIR,mBAAA,CAHA,QL8EF,CKvEA,cAEE,mBL0EF,CKrEA,cACE,cLwEF,CKrEA,OAGE,gBLsEF,CKnEE,gBACE,SLqEJ,CK9DA,0CACE,YLiEF,CKzDA,gDAIE,yBL4DF,CKzDI,4GACE,cL8DN,CKvDA,mBAEE,iBAAA,CADA,SL2DF,CKrDA,SACE,eLwDF,CK9CA,SAIE,QAAA,CADA,QAAA,CAFA,WAAA,CACA,SLmDF,CKzCA,OACE,UAAA,CCpNI,cALI,CAKJ,gBALI,CD+NR,mBAAA,CAHA,mBEY4B,CFb5B,SAAA,CADA,ULgDF,CKzCE,SACE,UL2CJ,CKpCA,+OAOE,SLuCF,CKpCA,4BACE,WLuCF,CK9BA,cAEE,4BAAA,CADA,mBLkCF,CKdA,4BACE,uBLyBF,CKpBA,+BACE,SLuBF,CKjBA,uBACE,YLoBF,CKdA,6BAEE,yBAAA,CADA,YLkBF,CKZA,OACE,oBLeF,CKVA,OACE,QLaF,CKNA,QAEE,cAAA,CADA,iBLUF,CKDA,SACE,uBLIF,CKIA,SACE,sBLDF,CDllBA,MOyQM,cALI,CAKJ,iBALI,CPlQR,eCqlBF,CDhlBE,WOkQI,kBALI,CAKJ,yBNoVN,CDtlBE,sBAEE,eQuckB,CRtclB,gBCylBJ,CD5lBE,WOkQI,kBALI,CAKJ,yBN0VN,CD5lBE,WOkQI,kBALI,CAKJ,wBNgWN,CDlmBE,sBAEE,eQuckB,CRtclB,gBCqmBJ,CDxmBE,WOkQI,kBALI,CAKJ,yBNsWN,CDxmBE,WOkQI,kBALI,CAKJ,yBN4WN,CD9mBE,sBAEE,eQuckB,CRtclB,gBCinBJ,CDpnBE,WOkQI,kBALI,CAKJ,yBNkXN,CDzlBA,4BWzDE,eAAA,CADA,cV6pBF,CDhmBA,kBACE,oBCmmBF,CDjmBE,mCACE,kBCmmBJ,CDzlBA,YOsNM,gBALI,CP/MR,wBC4lBF,CDxlBA,YOgNM,cALI,CAKJ,iBALI,CP1MR,kBC4lBF,CDzlBE,wBACE,eC2lBJ,CDvlBA,mBAIE,aGPS,CI0ML,gBALI,CPhMR,kBQkKO,CRnKP,gBC6lBF,CDxlBE,0BACE,YC0lBJ,CWlrBA,0BCCE,WAAA,CAHA,cZksBF,CWhsBA,eAEE,qBT+DM,CS9DN,wBAAA,CFGE,iBAAA,CELF,cX+rBF,CWjrBA,QAEE,oBXmrBF,CWhrBA,YAEE,aAAA,CADA,mBXorBF,CWhrBA,gBAEE,aTmDS,CI0ML,gBNsbN,CartBE,oFCCA,gBAAA,CADA,iBAAA,CADA,oCAAA,CADA,qCAAA,CADA,UdquBF,CezqBI,yBF5CE,yBACE,ebytBN,CACF,Ce/qBI,yBF5CE,uCACE,eb8tBN,CACF,CeprBI,0BF5CE,qDACE,ebmuBN,CACF,CezrBI,0BF5CE,mEACE,gBbwuBN,CACF,CgBxvBE,KCAA,kBAAA,CAAA,kBAAA,CACA,eAAA,CACA,YAAA,CACA,cAAA,CAIA,wCAAA,CADA,yCAAA,CADA,sCjB4vBF,CgB9vBI,OCaF,aAAA,CAKA,6BAAA,CAHA,cAAA,CAEA,wCAAA,CADA,yCAAA,CAFA,UjBwvBF,CiBrsBM,KACE,WjBwsBR,CiBrsBM,iBApCJ,aAAA,CACA,UjB6uBF,CiB/tBE,cACE,aAAA,CACA,UjBkuBJ,CiBpuBE,cACE,aAAA,CACA,SjBuuBJ,CiBzuBE,cACE,aAAA,CACA,oBjB4uBJ,CiB9uBE,cACE,aAAA,CACA,SjBivBJ,CiBnvBE,cACE,aAAA,CACA,SjBsvBJ,CiBxvBE,cACE,aAAA,CACA,oBjB2vBJ,CiB5tBM,UAhDJ,aAAA,CACA,UjBgxBF,CiB3tBU,OA/DN,iBjB+xBJ,CiBhuBU,cAhEN,ajBqyBJ,CiBruBU,OA/DN,kBjBoyBJ,CiBruBU,OA/DN,SjByyBJ,CiB1uBU,cAhEN,ajB+yBJ,CiB/uBU,OA/DN,kBjB8yBJ,CiB/uBU,OA/DN,kBjBmzBJ,CiBpvBU,cAhEN,ajByzBJ,CiBzvBU,OA/DN,SjBwzBJ,CiBzvBU,OA/DN,kBjB6zBJ,CiB9vBU,cAhEN,ajBm0BJ,CiBnwBU,OA/DN,kBjBk0BJ,CiBnwBU,OAhEN,aAAA,CACA,SjBu0BJ,CiBxwBU,QAhEN,aAAA,CACA,kBjB40BJ,CiB7wBU,QAhEN,aAAA,CACA,kBjBi1BJ,CiBlxBU,QAhEN,aAAA,CACA,UjBs1BJ,CiB/wBY,UAxDV,uBjB20BF,CiBnxBY,UAxDV,wBjB+0BF,CiBvxBY,UAxDV,ejBm1BF,CiB3xBY,UAxDV,wBjBu1BF,CiB/xBY,UAxDV,wBjB21BF,CiBnyBY,UAxDV,ejB+1BF,CiBvyBY,UAxDV,wBjBm2BF,CiB3yBY,UAxDV,wBjBu2BF,CiB/yBY,UAxDV,ejB22BF,CiBnzBY,WAxDV,wBjB+2BF,CiBvzBY,WAxDV,wBjBm3BF,CiBhzBQ,WAEE,ejBmzBV,CiBhzBQ,WAEE,ejBmzBV,CiB1zBQ,WAEE,iBAAA,CAAA,qBjB6zBV,CiB1zBQ,WAEE,iBAAA,CAAA,qBjB6zBV,CiBp0BQ,WAEE,iBAAA,CAAA,oBjBu0BV,CiBp0BQ,WAEE,iBAAA,CAAA,oBjBu0BV,CiB90BQ,WAEE,kBAAA,CAAA,kBjBi1BV,CiB90BQ,WAEE,kBAAA,CAAA,kBjBi1BV,CiBx1BQ,WAEE,kBAAA,CAAA,kBjB21BV,CiBx1BQ,WAEE,kBAAA,CAAA,kBjB21BV,CiBl2BQ,WAEE,kBAAA,CAAA,kBjBq2BV,CiBl2BQ,WAEE,kBAAA,CAAA,kBjBq2BV,Ce/5BI,yBEUE,QACE,WjBy5BN,CiBt5BI,oBApCJ,aAAA,CACA,UjB67BA,CiB/6BA,iBACE,aAAA,CACA,UjBi7BF,CiBn7BA,iBACE,aAAA,CACA,SjBq7BF,CiBv7BA,iBACE,aAAA,CACA,oBjBy7BF,CiB37BA,iBACE,aAAA,CACA,SjB67BF,CiB/7BA,iBACE,aAAA,CACA,SjBi8BF,CiBn8BA,iBACE,aAAA,CACA,oBjBq8BF,CiBt6BI,aAhDJ,aAAA,CACA,UjBy9BA,CiBp6BQ,UAhEN,aAAA,CACA,iBjBu+BF,CiBx6BQ,UAhEN,aAAA,CACA,kBjB2+BF,CiB56BQ,UAhEN,aAAA,CACA,SjB++BF,CiBh7BQ,UAhEN,aAAA,CACA,kBjBm/BF,CiBp7BQ,UAhEN,aAAA,CACA,kBjBu/BF,CiBx7BQ,UAhEN,aAAA,CACA,SjB2/BF,CiB57BQ,UAhEN,aAAA,CACA,kBjB+/BF,CiBh8BQ,UAhEN,aAAA,CACA,kBjBmgCF,CiBp8BQ,UAhEN,aAAA,CACA,SjBugCF,CiBx8BQ,WAhEN,aAAA,CACA,kBjB2gCF,CiB58BQ,WAhEN,aAAA,CACA,kBjB+gCF,CiBh9BQ,WAhEN,aAAA,CACA,UjBmhCF,CiB58BU,aAxDV,ajBugCA,CiB/8BU,aAxDV,uBjB0gCA,CiBl9BU,aAxDV,wBjB6gCA,CiBr9BU,aAxDV,ejBghCA,CiBx9BU,aAxDV,wBjBmhCA,CiB39BU,aAxDV,wBjBshCA,CiB99BU,aAxDV,ejByhCA,CiBj+BU,aAxDV,wBjB4hCA,CiBp+BU,aAxDV,wBjB+hCA,CiBv+BU,aAxDV,ejBkiCA,CiB1+BU,cAxDV,wBjBqiCA,CiB7+BU,cAxDV,wBjBwiCA,CiBr+BM,iBAEE,ejBu+BR,CiBp+BM,iBAEE,ejBs+BR,CiB7+BM,iBAEE,qBjB++BR,CiB5+BM,iBAEE,qBjB8+BR,CiBr/BM,iBAEE,oBjBu/BR,CiBp/BM,iBAEE,oBjBs/BR,CiB7/BM,iBAEE,kBjB+/BR,CiB5/BM,iBAEE,kBjB8/BR,CiBrgCM,iBAEE,kBjBugCR,CiBpgCM,iBAEE,kBjBsgCR,CiB7gCM,iBAEE,kBjB+gCR,CiB5gCM,iBAEE,kBjB8gCR,CACF,CezkCI,yBEUE,QACE,WjBkkCN,CiB/jCI,oBApCJ,aAAA,CACA,UjBsmCA,CiBxlCA,iBACE,aAAA,CACA,UjB0lCF,CiB5lCA,iBACE,aAAA,CACA,SjB8lCF,CiBhmCA,iBACE,aAAA,CACA,oBjBkmCF,CiBpmCA,iBACE,aAAA,CACA,SjBsmCF,CiBxmCA,iBACE,aAAA,CACA,SjB0mCF,CiB5mCA,iBACE,aAAA,CACA,oBjB8mCF,CiB/kCI,aAhDJ,aAAA,CACA,UjBkoCA,CiB7kCQ,UAhEN,aAAA,CACA,iBjBgpCF,CiBjlCQ,UAhEN,aAAA,CACA,kBjBopCF,CiBrlCQ,UAhEN,aAAA,CACA,SjBwpCF,CiBzlCQ,UAhEN,aAAA,CACA,kBjB4pCF,CiB7lCQ,UAhEN,aAAA,CACA,kBjBgqCF,CiBjmCQ,UAhEN,aAAA,CACA,SjBoqCF,CiBrmCQ,UAhEN,aAAA,CACA,kBjBwqCF,CiBzmCQ,UAhEN,aAAA,CACA,kBjB4qCF,CiB7mCQ,UAhEN,aAAA,CACA,SjBgrCF,CiBjnCQ,WAhEN,aAAA,CACA,kBjBorCF,CiBrnCQ,WAhEN,aAAA,CACA,kBjBwrCF,CiBznCQ,WAhEN,aAAA,CACA,UjB4rCF,CiBrnCU,aAxDV,ajBgrCA,CiBxnCU,aAxDV,uBjBmrCA,CiB3nCU,aAxDV,wBjBsrCA,CiB9nCU,aAxDV,ejByrCA,CiBjoCU,aAxDV,wBjB4rCA,CiBpoCU,aAxDV,wBjB+rCA,CiBvoCU,aAxDV,ejBksCA,CiB1oCU,aAxDV,wBjBqsCA,CiB7oCU,aAxDV,wBjBwsCA,CiBhpCU,aAxDV,ejB2sCA,CiBnpCU,cAxDV,wBjB8sCA,CiBtpCU,cAxDV,wBjBitCA,CiB9oCM,iBAEE,ejBgpCR,CiB7oCM,iBAEE,ejB+oCR,CiBtpCM,iBAEE,qBjBwpCR,CiBrpCM,iBAEE,qBjBupCR,CiB9pCM,iBAEE,oBjBgqCR,CiB7pCM,iBAEE,oBjB+pCR,CiBtqCM,iBAEE,kBjBwqCR,CiBrqCM,iBAEE,kBjBuqCR,CiB9qCM,iBAEE,kBjBgrCR,CiB7qCM,iBAEE,kBjB+qCR,CiBtrCM,iBAEE,kBjBwrCR,CiBrrCM,iBAEE,kBjBurCR,CACF,CelvCI,0BEUE,QACE,WjB2uCN,CiBxuCI,oBApCJ,aAAA,CACA,UjB+wCA,CiBjwCA,iBACE,aAAA,CACA,UjBmwCF,CiBrwCA,iBACE,aAAA,CACA,SjBuwCF,CiBzwCA,iBACE,aAAA,CACA,oBjB2wCF,CiB7wCA,iBACE,aAAA,CACA,SjB+wCF,CiBjxCA,iBACE,aAAA,CACA,SjBmxCF,CiBrxCA,iBACE,aAAA,CACA,oBjBuxCF,CiBxvCI,aAhDJ,aAAA,CACA,UjB2yCA,CiBtvCQ,UAhEN,aAAA,CACA,iBjByzCF,CiB1vCQ,UAhEN,aAAA,CACA,kBjB6zCF,CiB9vCQ,UAhEN,aAAA,CACA,SjBi0CF,CiBlwCQ,UAhEN,aAAA,CACA,kBjBq0CF,CiBtwCQ,UAhEN,aAAA,CACA,kBjBy0CF,CiB1wCQ,UAhEN,aAAA,CACA,SjB60CF,CiB9wCQ,UAhEN,aAAA,CACA,kBjBi1CF,CiBlxCQ,UAhEN,aAAA,CACA,kBjBq1CF,CiBtxCQ,UAhEN,aAAA,CACA,SjBy1CF,CiB1xCQ,WAhEN,aAAA,CACA,kBjB61CF,CiB9xCQ,WAhEN,aAAA,CACA,kBjBi2CF,CiBlyCQ,WAhEN,aAAA,CACA,UjBq2CF,CiB9xCU,aAxDV,ajBy1CA,CiBjyCU,aAxDV,uBjB41CA,CiBpyCU,aAxDV,wBjB+1CA,CiBvyCU,aAxDV,ejBk2CA,CiB1yCU,aAxDV,wBjBq2CA,CiB7yCU,aAxDV,wBjBw2CA,CiBhzCU,aAxDV,ejB22CA,CiBnzCU,aAxDV,wBjB82CA,CiBtzCU,aAxDV,wBjBi3CA,CiBzzCU,aAxDV,ejBo3CA,CiB5zCU,cAxDV,wBjBu3CA,CiB/zCU,cAxDV,wBjB03CA,CiBvzCM,iBAEE,ejByzCR,CiBtzCM,iBAEE,ejBwzCR,CiB/zCM,iBAEE,qBjBi0CR,CiB9zCM,iBAEE,qBjBg0CR,CiBv0CM,iBAEE,oBjBy0CR,CiBt0CM,iBAEE,oBjBw0CR,CiB/0CM,iBAEE,kBjBi1CR,CiB90CM,iBAEE,kBjBg1CR,CiBv1CM,iBAEE,kBjBy1CR,CiBt1CM,iBAEE,kBjBw1CR,CiB/1CM,iBAEE,kBjBi2CR,CiB91CM,iBAEE,kBjBg2CR,CACF,Ce35CI,0BEUE,QACE,WjBo5CN,CiBj5CI,oBApCJ,aAAA,CACA,UjBw7CA,CiB16CA,iBACE,aAAA,CACA,UjB46CF,CiB96CA,iBACE,aAAA,CACA,SjBg7CF,CiBl7CA,iBACE,aAAA,CACA,oBjBo7CF,CiBt7CA,iBACE,aAAA,CACA,SjBw7CF,CiB17CA,iBACE,aAAA,CACA,SjB47CF,CiB97CA,iBACE,aAAA,CACA,oBjBg8CF,CiBj6CI,aAhDJ,aAAA,CACA,UjBo9CA,CiB/5CQ,UAhEN,aAAA,CACA,iBjBk+CF,CiBn6CQ,UAhEN,aAAA,CACA,kBjBs+CF,CiBv6CQ,UAhEN,aAAA,CACA,SjB0+CF,CiB36CQ,UAhEN,aAAA,CACA,kBjB8+CF,CiB/6CQ,UAhEN,aAAA,CACA,kBjBk/CF,CiBn7CQ,UAhEN,aAAA,CACA,SjBs/CF,CiBv7CQ,UAhEN,aAAA,CACA,kBjB0/CF,CiB37CQ,UAhEN,aAAA,CACA,kBjB8/CF,CiB/7CQ,UAhEN,aAAA,CACA,SjBkgDF,CiBn8CQ,WAhEN,aAAA,CACA,kBjBsgDF,CiBv8CQ,WAhEN,aAAA,CACA,kBjB0gDF,CiB38CQ,WAhEN,aAAA,CACA,UjB8gDF,CiBv8CU,aAxDV,ajBkgDA,CiB18CU,aAxDV,uBjBqgDA,CiB78CU,aAxDV,wBjBwgDA,CiBh9CU,aAxDV,ejB2gDA,CiBn9CU,aAxDV,wBjB8gDA,CiBt9CU,aAxDV,wBjBihDA,CiBz9CU,aAxDV,ejBohDA,CiB59CU,aAxDV,wBjBuhDA,CiB/9CU,aAxDV,wBjB0hDA,CiBl+CU,aAxDV,ejB6hDA,CiBr+CU,cAxDV,wBjBgiDA,CiBx+CU,cAxDV,wBjBmiDA,CiBh+CM,iBAEE,ejBk+CR,CiB/9CM,iBAEE,ejBi+CR,CiBx+CM,iBAEE,qBjB0+CR,CiBv+CM,iBAEE,qBjBy+CR,CiBh/CM,iBAEE,oBjBk/CR,CiB/+CM,iBAEE,oBjBi/CR,CiBx/CM,iBAEE,kBjB0/CR,CiBv/CM,iBAEE,kBjBy/CR,CiBhgDM,iBAEE,kBjBkgDR,CiB//CM,iBAEE,kBjBigDR,CiBxgDM,iBAEE,kBjB0gDR,CiBvgDM,iBAEE,kBjBygDR,CACF,CkB/nDA,OACE,yBAAA,CACA,gCAAA,CACA,gCAAA,CACA,wCAAA,CACA,+BAAA,CACA,sCAAA,CACA,8BAAA,CACA,uCAAA,CAMA,gJX4W4B,CW9W5B,ahB+DM,CgBhEN,kBXmPO,CWjPP,kBXkhB4B,CWrhB5B,UlBooDF,CkBznDE,yBAEE,mCAAA,CACA,uBXyVW,CWxVX,uDAAA,CAHA,alB8nDJ,CkBxnDE,aACE,sBlB0nDJ,CkBvnDE,aACE,qBlBynDJ,CkBrnDE,0BACE,oBlBunDJ,CkB9mDA,aACE,gBlBinDF,CkBvmDE,4BACE,clB0mDJ,CkB3lDE,gCACE,kBlB8lDJ,CkB3lDI,kCACE,kBlB6lDN,CkBtlDE,oCACE,qBlBylDJ,CkBtlDE,qCACE,kBlBwlDJ,CkB/kDE,2CACE,+CAAA,CACA,mClBklDJ,CkB1kDA,cACE,8CAAA,CACA,kClB6kDF,CkBrkDE,8BACE,6CAAA,CACA,iClBwkDJ,CmBpsDE,eAME,qBAAA,CACA,6BAAA,CACA,gCAAA,CACA,4BAAA,CACA,+BAAA,CACA,2BAAA,CACA,8BAAA,CAGA,oBAAA,CADA,anBksDJ,CmBhtDE,iBAME,qBAAA,CACA,6BAAA,CACA,gCAAA,CACA,4BAAA,CACA,+BAAA,CACA,2BAAA,CACA,8BAAA,CAGA,oBAAA,CADA,anB8sDJ,CmB5tDE,eAME,qBAAA,CACA,6BAAA,CACA,gCAAA,CACA,4BAAA,CACA,+BAAA,CACA,2BAAA,CACA,8BAAA,CAGA,oBAAA,CADA,anB0tDJ,CmBxuDE,cAME,qBAAA,CACA,6BAAA,CACA,gCAAA,CACA,4BAAA,CACA,+BAAA,CACA,2BAAA,CACA,8BAAA,CAGA,oBAAA,CADA,anBsuDJ,CmBpvDE,YAME,qBAAA,CACA,6BAAA,CACA,gCAAA,CACA,4BAAA,CACA,+BAAA,CACA,2BAAA,CACA,8BAAA,CAGA,oBAAA,CADA,anBkvDJ,CmBhwDE,eAME,qBAAA,CACA,6BAAA,CACA,gCAAA,CACA,4BAAA,CACA,+BAAA,CACA,2BAAA,CACA,8BAAA,CAGA,oBAAA,CADA,anB8vDJ,CmB5wDE,aAME,qBAAA,CACA,6BAAA,CACA,gCAAA,CACA,4BAAA,CACA,+BAAA,CACA,2BAAA,CACA,8BAAA,CAGA,oBAAA,CADA,anB0wDJ,CkBroDI,kBAEE,gCAAA,CADA,elByoDN,CentDI,4BGyEA,qBAEE,gCAAA,CADA,elB+oDJ,CACF,Ce1tDI,4BGyEA,qBAEE,gCAAA,CADA,elBqpDJ,CACF,CehuDI,6BGyEA,qBAEE,gCAAA,CADA,elB2pDJ,CACF,CetuDI,6BGyEA,qBAEE,gCAAA,CADA,elBiqDJ,CACF,CoBpzDA,YACE,mBpBszDF,CoB7yDA,gBduRM,iBALI,Cc3QR,ebgb4B,Capb5B,epBkzDF,CoB1yDA,mCATE,gCAAA,CADA,6BpB0zDF,CoBhzDA,mBd4QM,iBALI,CAKJ,qBNoiDN,CoB1yDA,mBdsQM,kBALI,CAKJ,wBALI,Cc/PR,iCAAA,CADA,8BpB+yDF,CqB30DA,WAKE,anBmFS,CIyML,gBALI,Ce3RR,iBrBg1DF,CsBj1DA,cAYE,uBAAA,CAAA,oBAAA,CAAA,eAAA,CAFA,2BAAA,CADA,qBpBiEM,CoB/DN,wBAAA,CbIE,iBAAA,CaPF,apBmEM,CoB1EN,aAAA,ChBgSI,cALI,CAKJ,cALI,CgBtRR,efqbmB,CepbnB,ef0b4B,Ce9b5B,kBAAA,CADA,UtB81DF,CsB50DE,yBACE,etB80DJ,CsB50DI,wDACE,ctB80DN,CsBz0DE,oBAEE,qBpB2CI,CoB1CJ,oBf2qBoC,CerqBlC,2CfyjB0B,CejkB5B,apB6CI,CoB1CJ,StB40DJ,CsBh0DE,2CAEE,YtBi0DJ,CsB7zDE,gCACE,apBmCO,CoBjCP,StB8zDJ,CsBj0DE,2BACE,apBmCO,CoBjCP,StB8zDJ,CsBtzDE,+CAEE,wBpB0BO,CoBvBP,StBqzDJ,CsBjzDE,oCCvEA,+BhB41BgC,Ce9wB9B,cAAA,CAAA,oBAAA,CAGA,2BfgSW,Ce/RX,eAAA,CAPA,UpBDI,CoBDJ,mBAAA,CACA,sBf4gBkB,Ce5gBlB,sBf4gBkB,Ce9gBlB,kBAAA,CAKA,mBtBwzDJ,CsB/yDE,yEACE,yItBizDJ,CsB9yDE,0CC1FA,+BhB41BgC,Ce3vB9B,cAAA,CAAA,oBAAA,CAGA,2Bf6QW,Ce5QX,eAAA,CAPA,UpBpBI,CoBkBJ,mBAAA,CACA,sBfyfkB,CezflB,sBfyfkB,Ce3flB,kBAAA,CAKA,mBtBqzDJ,CsB5yDE,+EACE,yItB8yDJ,CsBryDA,wBAOE,4BAAA,CAEA,wBAAA,CAAA,kBAAA,CAHA,apB9CM,CoByCN,aAAA,CAIA,efyU4B,Ce1U5B,eAAA,CADA,eAAA,CADA,UtB+yDF,CsBtyDE,gFAGE,cAAA,CADA,etBwyDJ,CsB5xDA,iBb7HI,iBAAA,CHkRE,kBALI,CAKJ,wBALI,CgB/IR,oCf6kBsC,Ce5kBtC,oBtBiyDF,CsB7xDE,uCAEE,qBAAA,CACA,qBf6cqB,Ce7crB,uBf6cqB,Ce/crB,oBtBiyDJ,CsB5xDE,6CAEE,qBAAA,CACA,qBfucqB,CevcrB,uBfucqB,CezcrB,oBtBgyDJ,CsB1xDA,iBbhJI,iBAAA,CHkRE,iBALI,CAKJ,qBALI,CgB5HR,mCf2jBsC,Ce1jBtC,kBtB+xDF,CsB3xDE,uCAEE,mBAAA,CACA,sBf+bqB,Ce/brB,sBf+bqB,CejcrB,kBtB+xDJ,CsB1xDE,6CAEE,mBAAA,CACA,sBfybqB,CezbrB,sBfybqB,Ce3brB,kBtB8xDJ,CsBpxDE,sBACE,mCtBuxDJ,CsBpxDE,yBACE,oCtBsxDJ,CsBnxDE,yBACE,mCtBqxDJ,CsBhxDA,oBAEE,WAAA,CACA,af8YoB,CehZpB,UE6qBsC,CF7qBtC,UtBqxDF,CsBjxDE,mDACE,ctBmxDJ,CsBhxDE,uCb9LE,iBAAA,Ca+LA,YtBmxDJ,CsB/wDE,0CbnME,iBAAA,CaoMA,YtBkxDJ,CyBp+DA,aAKE,mCAAA,CAeA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CATA,qBvB8DM,CuB7DN,8PAAA,CAEA,qClB2xBkC,CkB3xBlC,qClB2xBkC,CkB5xBlC,2BAAA,CAEA,yBlB2xBkC,CkB1xBlC,wBAAA,ChBFE,iBAAA,CgBJF,avBgEM,CuBzEN,aAAA,CnB+RI,cALI,CAKJ,cALI,CmBnRR,elBkbmB,CkBjbnB,elBub4B,CkB7b5B,6BAAA,CADA,UzBq/DF,CyBj+DE,mBACE,oBlBmrBoC,CkB7qBlC,2ClB4xB4B,CkBjyB9B,SzBo+DJ,CyB39DE,0DAGE,qBAAA,CADA,kBzB69DJ,CyBz9DE,sBAEE,wBvB4CO,CuB7CP,azB49DJ,CyBt9DE,4BACE,iBAAA,CACA,yBzBw9DJ,CyBp9DA,gBhBtCI,iBAAA,CHkRE,kBALI,CAKJ,wBALI,CmBrOR,qBlB0iBuB,CkBziBvB,kBlB0iBuB,CkB5iBvB,kBzB29DF,CyBp9DA,gBhB9CI,iBAAA,CHkRE,iBALI,CAKJ,qBALI,CmB7NR,oBlBuiBuB,CkBtiBvB,iBlBuiBuB,CkBziBvB,iBzB29DF,C0BzhEA,YACE,aAAA,CAGA,qBnBguBwC,CmBluBxC,iBnBguBwC,CmBhuBxC,iBnBguBwC,CmB/tBxC,kB1B6hEF,C0B1hEE,8BACE,UAAA,CACA,kB1B4hEJ,C0BxhEA,kBAWE,gCAAA,CADA,uBAAA,CAAA,oBAAA,CAAA,eAAA,CALA,qBxByDM,CwBvDN,uBAAA,CADA,2BAAA,CAEA,uBAAA,CACA,gCnButBwC,CmBrtBxC,kBAAA,CATA,UnBmtBwC,CmBltBxC,eAAA,CACA,kBAAA,CAHA,S1BqiEF,C0BxhEE,iCjBXE,mBTsiEJ,C0BvhEE,8BAEE,iB1BwhEJ,C0BrhEE,yBACE,sB1BuhEJ,C0BphEE,wBACE,oBnBmqBoC,CmBjqBpC,2CnBqjB4B,CmBtjB5B,S1BuhEJ,C0BnhEE,0BACE,wBnBqBM,CmBpBN,oB1BqhEJ,C0BnhEI,yCAII,4P1BkhER,C0B9gEI,sCAII,oK1B6gER,C0BxgEE,+CACE,wBAAA,CAME,sPAAA,CALF,oB1B2gEJ,C0BlgEE,2BAEE,WAAA,CACA,UnB6qBuC,CmB/qBvC,mB1BsgEJ,C0B7/DI,2FACE,U1B+/DN,C0Bj/DA,aACE,kB1Bo/DF,C0Bl/DE,+BAGE,iLAAA,CACA,qBAAA,CjB9FA,iBAAA,CiB4FA,kBAAA,CADA,S1Bw/DJ,C0Bj/DI,qCACE,uK1Bm/DN,C0Bh/DI,uCAMI,oKAAA,CALF,wB1Bm/DN,C0Bx+DA,mBACE,oBAAA,CACA,iB1B2+DF,C0Bx+DA,WAEE,kBAAA,CACA,mBAAA,CAFA,iB1B6+DF,C0Bv+DI,mDAEE,WAAA,CACA,WnBqfwB,CmBvfxB,mB1B2+DN,C2BvnEA,YAKE,uBAAA,CAAA,oBAAA,CAAA,eAAA,CADA,4BAAA,CAFA,aAAA,CAAA,aAAA,CACA,SAAA,CAFA,U3B8nEF,C2BxnEE,kBACE,S3B0nEJ,C2BtnEI,wCAA0B,0D3BynE9B,C2BxnEI,oCAA0B,0D3B2nE9B,C2BxnEE,8BACE,Q3B0nEJ,C2BvnEE,kCASE,uBAAA,CAAA,eAAA,CJ/BF,wBhBmEQ,CoBxCN,QpBqzBuC,CEj0BvC,kBAAA,CkBSA,WpBqzBuC,CoBrzBvC,WpBqzBuC,CoBpzBvC,kBAAA,CAFA,UpBszBuC,CoBtzBvC,U3B+nEJ,C2BrnEI,yCJjCF,wBvBypEF,C2BnnEE,2CAKE,wBzByCO,CyBxCP,wBAAA,ClB7BA,kBAAA,CkB0BA,iBAAA,CACA,cpB8xB8B,CoBhyB9B,UpB+xB8B,CoB/xB9B,YpB+xB8B,CoBhyB9B,U3B2nEJ,C2BjnEE,8BAQE,oBAAA,CAAA,eAAA,CJzDF,wBhBmEQ,CoBdN,QpB2xBuC,CEj0BvC,kBAAA,CkBoCA,WpB0xBuC,CoB1xBvC,WpB0xBuC,CoB3xBvC,UpB2xBuC,CoB3xBvC,U3BwnEJ,C2B/mEI,qCJ3DF,wBvB6qEF,C2B7mEE,8BAKE,wBzBeO,CyBdP,wBAAA,ClBvDA,kBAAA,CkBoDA,iBAAA,CACA,cpBowB8B,CoBtwB9B,UpBqwB8B,CoBrwB9B,YpBqwB8B,CoBtwB9B,U3BqnEJ,C2B3mEE,qBACE,mB3B6mEJ,C2B3mEI,2CACE,wB3B6mEN,C2B1mEI,uCACE,wB3B4mEN,C4BnsEA,eACE,iB5BssEF,C4BpsEE,yDAEE,yBrBg2B8B,CqB/1B9B,gB5BssEJ,C4BnsEE,qBAOE,4BAAA,CAHA,WAAA,CADA,MAAA,CAGA,mBAAA,CALA,iBAAA,CACA,KAAA,CAMA,oB5BqsEJ,C4BhsEE,kDARE,Y5B2sEJ,C4BhsEI,+CACE,iB5BksEN,C4BnsEI,0CACE,iB5BksEN,C4B/rEI,0DAGE,sBrBy0B4B,CqB10B5B,oB5BisEN,C4BnsEI,wFAGE,sBrBy0B4B,CqB10B5B,oB5BisEN,C4B7rEI,8CAEE,sBrBo0B4B,CqBr0B5B,oB5BgsEN,C4B3rEE,4BAEE,sBrB8zB8B,CqB/zB9B,oB5B8rEJ,C4BvrEI,gEACE,WrBwzB4B,CqBvzB5B,0D5B2rEN,C4B7rEI,sIACE,WrBwzB4B,CqBvzB5B,0D5B2rEN,C4BtrEI,oDACE,WrBizB4B,CqBhzB5B,0D5BwrEN,C6B9uEA,aAIE,mBAAA,CAFA,YAAA,CACA,cAAA,CAFA,iBAAA,CAIA,U7BivEF,C6B/uEE,qDAGE,aAAA,CAEA,WAAA,CAHA,iBAAA,CAEA,Q7BkvEJ,C6B7uEE,iEAEE,S7B+uEJ,C6BzuEE,kBACE,iBAAA,CACA,S7B2uEJ,C6BzuEI,wBACE,S7B2uEN,C6BhuEA,kBAEE,kBAAA,CAQA,sJtBuuBsC,CsBtuBtC,wBAAA,CpBpCE,iBAAA,CoBgCF,a3B4BM,C2BlCN,YAAA,CvBwPI,cALI,CAKJ,cALI,CuB/OR,etB8YmB,CsB7YnB,etBmZ4B,CsBtZ5B,kBAAA,CAKA,iBAAA,CACA,kB7BsuEF,C6B1tEA,kHpB9CI,iBAAA,CHkRE,iBALI,CAKJ,qBALI,CuB3NR,kB7B+tEF,C6B1tEA,kHpBvDI,iBAAA,CHkRE,kBALI,CAKJ,wBALI,CuBlNR,oB7B+tEF,C6B1tEA,0DAEE,kB7B6tEF,C6BzsEI,iUpBrEA,4BAAA,CADA,yBT0xEJ,C6BzsEE,0IpBlEE,2BAAA,CADA,wBAAA,CoBoEA,gB7B6sEJ,C8BzyEE,gBAME,avBg2BqB,CuBr2BrB,YAAA,CxB2QE,gBALI,CwBpQN,iBvBwoBoC,CuBzoBpC,U9B+yEJ,C8BxyEE,eAWE,kCAvBiB,CrBHjB,iBAAA,CqByBA,UAvBc,CAiBd,YAAA,CxB+PE,kBALI,CAKJ,wBALI,CwBvPN,gBAAA,CAFA,cAAA,CACA,oBAAA,CALA,iBAAA,CACA,QAAA,CACA,S9BmzEJ,C8BtyEI,8HAEE,a9B2yEN,C8Bz1EI,0DAoDE,oB9ByyEN,C8B/xEM,sEACE,oBvB0zBiB,CuBzzBjB,yC9BiyER,C8Bj2EI,wDAiFE,oB9BoxEN,C8BxwEM,oEACE,oBvB2xBiB,CuB1xBjB,yC9B0wER,C8Bz2EI,kEAsGE,oB9BuwEN,C8BrwEM,kFACE,wB9BuwER,C8BpwEM,8EACE,yC9BswER,C8BnwEM,sGACE,a9BqwER,C8BhwEI,qDACE,gB9BmwEN,C8B13EI,sKA+HI,S9BiwER,C8B7vEM,8LACE,S9BiwER,C8Bl3EE,kBAME,avBg2BqB,CuBr2BrB,YAAA,CxB2QE,gBALI,CwBpQN,iBvBwoBoC,CuBzoBpC,U9Bw3EJ,C8Bj3EE,iBAWE,mCAvBiB,CrBHjB,iBAAA,CqByBA,UAvBc,CAiBd,YAAA,CxB+PE,kBALI,CAKJ,wBALI,CwBvPN,gBAAA,CAFA,cAAA,CACA,oBAAA,CALA,iBAAA,CACA,QAAA,CACA,S9B43EJ,C8B/2EI,8IAEE,a9Bo3EN,C8Bl6EI,8DAoDE,oB9Bk3EN,C8Bx2EM,0EACE,oBvB0zBiB,CuBzzBjB,0C9B02ER,C8B16EI,4DAiFE,oB9B61EN,C8Bj1EM,wEACE,oBvB2xBiB,CuB1xBjB,0C9Bm1ER,C8Bl7EI,sEAsGE,oB9Bg1EN,C8B90EM,sFACE,wB9Bg1ER,C8B70EM,kFACE,0C9B+0ER,C8B50EM,0GACE,a9B80ER,C8Bz0EI,uDACE,gB9B40EN,C8Bn8EI,8KAiII,S9Bw0ER,C8Bt0EM,sMACE,S9B00ER,C+Bh9EA,KAYE,4BAAA,CACA,4BAAA,CtBEE,iBAAA,CsBLF,cAAA,CATA,oBAAA,CzBgSI,cALI,CAKJ,cALI,CyBzRR,exBwbmB,CwBvbnB,exB6b4B,CyBtU5B,kBAAA,CDrHA,iBAAA,CAKA,wBAAA,CAAA,qBAAA,CAAA,gBAAA,CAFA,qB/Bu9EF,C+B/8EE,gBAZA,a/B+9EF,C+Bn9EE,WAEE,oB/Bi9EJ,C+B98EE,iCAGE,2CxBskB4B,CwBvkB5B,S/Bg9EJ,C+Bj8EE,mDAIE,WxB0lB0B,CwB3lB1B,mB/Bk8EJ,C+Br7EE,aRvDA,wBhBgFa,CyB9Db,oBzB8Da,CyBhEb,UhCk+EF,CgCv9EE,oET3BA,wBSMmB,CAkBjB,oBAjBa,CAeb,UhCu+EJ,CgCl+EE,iDASI,0ChCy9EN,CgCr9EE,0IAME,wBArCkB,CAwClB,oBAvCc,CAmCd,UhCq9EJ,CgC/8EI,wKAKI,0ChC68ER,CgCx8EE,4CAGE,wBzBgBW,CyBbX,oBzBaW,CyBjBX,UhC28EJ,C+Bn9EE,eRvDA,wBhBgFa,CyB9Db,oBzB8Da,CyBhEb,UhCggFF,CgCr/EE,0ET3BA,wBSMmB,CAkBjB,oBAjBa,CAeb,UhCqgFJ,CgChgFE,qDASI,0ChCu/EN,CgCn/EE,oJAME,wBArCkB,CAwClB,oBAvCc,CAmCd,UhCm/EJ,CgC7+EI,kLAKI,0ChC2+ER,CgCt+EE,gDAGE,wBzBgBW,CyBbX,oBzBaW,CyBjBX,UhCy+EJ,C+Bj/EE,aRvDA,wBhBgFa,CyB9Db,oBzB8Da,CyBhEb,UhC8hFF,CgCnhFE,oET3BA,wBSMmB,CAkBjB,oBAjBa,CAeb,UhCmiFJ,CgC9hFE,iDASI,yChCqhFN,CgCjhFE,0IAME,wBArCkB,CAwClB,oBAvCc,CAmCd,UhCihFJ,CgC3gFI,wKAKI,yChCygFR,CgCpgFE,4CAGE,wBzBgBW,CyBbX,oBzBaW,CyBjBX,UhCugFJ,C+B/gFE,YRvDA,wBhBgFa,CyB9Db,oBzB8Da,CyBhEb,UhC4jFF,CgCjjFE,iET3BA,wBSMmB,CAkBjB,oBAjBa,CAeb,UhCikFJ,CgC5jFE,+CASI,0ChCmjFN,CgC/iFE,qIAME,wBArCkB,CAwClB,oBAvCc,CAmCd,UhC+iFJ,CgCziFI,mKAKI,0ChCuiFR,CgCliFE,0CAGE,wBzBgBW,CyBbX,oBzBaW,CyBjBX,UhCqiFJ,C+B7iFE,URvDA,wBhBgFa,CyB9Db,oBzB8Da,CyBhEb,ahC0lFF,CgC/kFE,2DT3BA,wBSMmB,CAkBjB,oBAjBa,CAeb,ahC+lFJ,CgC1lFE,2CASI,yChCilFN,CgC7kFE,2HAME,wBArCkB,CAwClB,oBAvCc,CAmCd,ahC6kFJ,CgCvkFI,yJAKI,yChCqkFR,CgChkFE,sCAGE,wBzBgBW,CyBbX,oBzBaW,CyBjBX,ahCmkFJ,C+B3kFE,aRvDA,wBhBgFa,CyB9Db,oBzB8Da,CyBhEb,ahCwnFF,CgC7mFE,oET3BA,wBSMmB,CAkBjB,oBAjBa,CAeb,ahC6nFJ,CgCxnFE,iDASI,0ChC+mFN,CgC3mFE,0IAME,wBArCkB,CAwClB,oBAvCc,CAmCd,ahC2mFJ,CgCrmFI,wKAKI,0ChCmmFR,CgC9lFE,4CAGE,wBzBgBW,CyBbX,oBzBaW,CyBjBX,ahCimFJ,C+BzmFE,WRvDA,wBhBgFa,CyB9Db,oBzB8Da,CyBhEb,UhCspFF,CgC3oFE,8DT3BA,wBSMmB,CAkBjB,oBAjBa,CAeb,UhC2pFJ,CgCtpFE,6CASI,yChC6oFN,CgCzoFE,gIAME,wBArCkB,CAwClB,oBAvCc,CAmCd,UhCyoFJ,CgCnoFI,8JAKI,yChCioFR,CgC5nFE,wCAGE,wBzBgBW,CyBbX,oBzBaW,CyBjBX,UhC+nFJ,C+BjoFE,qBCoBA,oBzBDa,CyBAb,ahCmnFF,CgChnFE,2BAEE,wBzBLW,CyBMX,oBzBNW,CyBIX,UhConFJ,CgC/mFE,iEAEE,0ChCgnFJ,CgC7mFE,iLAME,wBzBpBW,CyBqBX,oBzBrBW,CyBmBX,UhC6mFJ,CgCzmFI,+MAKI,0ChCumFR,CgClmFE,4DAGE,4BAAA,CADA,ahComFJ,C+B1pFE,uBCoBA,oBzBDa,CyBAb,ahC4oFF,CgCzoFE,6BAEE,wBzBLW,CyBMX,oBzBNW,CyBIX,UhC6oFJ,CgCxoFE,qEAEE,0ChCyoFJ,CgCtoFE,2LAME,wBzBpBW,CyBqBX,oBzBrBW,CyBmBX,UhCsoFJ,CgCloFI,yNAKI,0ChCgoFR,CgC3nFE,gEAGE,4BAAA,CADA,ahC6nFJ,C+BnrFE,qBCoBA,oBzBDa,CyBAb,ahCqqFF,CgClqFE,2BAEE,wBzBLW,CyBMX,oBzBNW,CyBIX,UhCsqFJ,CgCjqFE,iEAEE,wChCkqFJ,CgC/pFE,iLAME,wBzBpBW,CyBqBX,oBzBrBW,CyBmBX,UhC+pFJ,CgC3pFI,+MAKI,wChCypFR,CgCppFE,4DAGE,4BAAA,CADA,ahCspFJ,C+B5sFE,oBCoBA,oBzBDa,CyBAb,ahC8rFF,CgC3rFE,0BAEE,wBzBLW,CyBMX,oBzBNW,CyBIX,UhC+rFJ,CgC1rFE,+DAEE,0ChC2rFJ,CgCxrFE,4KAME,wBzBpBW,CyBqBX,oBzBrBW,CyBmBX,UhCwrFJ,CgCprFI,0MAKI,0ChCkrFR,CgC7qFE,0DAGE,4BAAA,CADA,ahC+qFJ,C+BruFE,kBCoBA,oBzBDa,CyBAb,ahCutFF,CgCptFE,wBAEE,wBzBLW,CyBMX,oBzBNW,CyBIX,ahCwtFJ,CgCntFE,2DAEE,0ChCotFJ,CgCjtFE,kKAME,wBzBpBW,CyBqBX,oBzBrBW,CyBmBX,ahCitFJ,CgC7sFI,gMAKI,0ChC2sFR,CgCtsFE,sDAGE,4BAAA,CADA,ahCwsFJ,C+B9vFE,qBCoBA,oBzBDa,CyBAb,ahCgvFF,CgC7uFE,2BAEE,wBzBLW,CyBMX,oBzBNW,CyBIX,ahCivFJ,CgC5uFE,iEAEE,0ChC6uFJ,CgC1uFE,iLAME,wBzBpBW,CyBqBX,oBzBrBW,CyBmBX,ahC0uFJ,CgCtuFI,+MAKI,0ChCouFR,CgC/tFE,4DAGE,4BAAA,CADA,ahCiuFJ,C+BvxFE,mBCoBA,oBzBDa,CyBAb,ahCywFF,CgCtwFE,yBAEE,wBzBLW,CyBMX,oBzBNW,CyBIX,UhC0wFJ,CgCrwFE,6DAEE,yChCswFJ,CgCnwFE,uKAME,wBzBpBW,CyBqBX,oBzBrBW,CyBmBX,UhCmwFJ,CgC/vFI,qMAKI,yChC6vFR,CgCxvFE,wDAGE,4BAAA,CADA,ahC0vFJ,C+BpyFA,UAEE,axB0NW,CwB3NX,exBiXmB,CwB/WnB,oB/BuyFF,C+BryFE,gBACE,a/BwyFJ,C+BpyFE,gCAHE,yB/B0yFJ,C+BnyFE,sCAEE,a/BoyFJ,C+BzxFA,2BtBrFI,iBAAA,CHkRE,iBALI,CAKJ,qBALI,C0BjKR,kBhCwwFF,C+B3xFA,2BtBzFI,iBAAA,CHkRE,kBALI,CAKJ,wBALI,C0BjKR,oBhC8wFF,CiC14FE,iBACE,SjC64FJ,CiCv4FE,qBACE,YjC04FJ,CiCt4FA,YACE,QAAA,CACA,ejCy4FF,CiCt4FE,gCAEE,WAAA,CADA,OjCy4FJ,CkC75FA,sCAIE,iBlCg6FF,CkC75FA,iBACE,kBlCg6FF,CmC34FI,uBA1BF,eAAA,CACA,kCAAA,CAFA,mCAAA,CADA,qBAAA,CAgCI,UAAA,CAHA,oBAAA,CACA,kB5BuXwB,C4BtXxB,qBnCk5FN,CmCz3FI,6BACE,anC23FN,CkCt6FA,eAYE,2BAAA,CADA,qBhCmDM,CgCjDN,kCAAA,CzBVE,iBAAA,CyBKF,ahCuDM,CgC5DN,YAAA,C5BkRI,cALI,CAKJ,cALI,C4BtQR,eAAA,CAJA,QAAA,CAFA,e3B68BkC,C2B78BlC,e3B68BkC,C2B58BlC,eAAA,CAJA,iBAAA,CAQA,eAAA,CAPA,YlCq7FF,CkCt6FE,+BAEE,MAAA,CACA,kB3Bg8BgC,C2Bl8BhC,QlC06FJ,CkC55FI,qBACE,mBlC+5FN,CkC75FM,qCAEE,MAAA,CADA,UlCg6FR,CkC35FI,mBACE,iBlC85FN,CkC55FM,mCAEE,SAAA,CADA,OlC+5FR,Ce75FI,yBmBfA,wBACE,mBlCg7FJ,CkC96FI,wCAEE,MAAA,CADA,UlCi7FN,CkC56FE,sBACE,iBlC86FJ,CkC56FI,sCAEE,SAAA,CADA,OlC+6FN,CACF,Ce96FI,yBmBfA,wBACE,mBlCg8FJ,CkC97FI,wCAEE,MAAA,CADA,UlCi8FN,CkC57FE,sBACE,iBlC87FJ,CkC57FI,sCAEE,SAAA,CADA,OlC+7FN,CACF,Ce97FI,0BmBfA,wBACE,mBlCg9FJ,CkC98FI,wCAEE,MAAA,CADA,UlCi9FN,CkC58FE,sBACE,iBlC88FJ,CkC58FI,sCAEE,SAAA,CADA,OlC+8FN,CACF,Ce98FI,0BmBfA,wBACE,mBlCg+FJ,CkC99FI,wCAEE,MAAA,CADA,UlCi+FN,CkC59FE,sBACE,iBlC89FJ,CkC59FI,sCAEE,SAAA,CADA,OlC+9FN,CACF,CkCr9FE,uCAEE,WAAA,CAEA,qB3Bw5BgC,C2Bz5BhC,YAAA,CAFA,QlC09FJ,CmCrgGI,+BAnBF,wBAAA,CACA,kCAAA,CAFA,mCAAA,CADA,YAAA,CAyBI,UAAA,CAHA,oBAAA,CACA,kB5BuXwB,C4BtXxB,qBnC4gGN,CmCn/FI,qCACE,anCq/FN,CkC39FE,wCAGE,SAAA,CAEA,mB3B04BgC,C2B34BhC,YAAA,CAFA,UAAA,CADA,KlCk+FJ,CmC1hGI,gCAZF,oCAAA,CACA,sBAAA,CAFA,cAAA,CADA,iCAAA,CAkBI,UAAA,CAHA,oBAAA,CACA,kB5BuXwB,C4BtXxB,qBnCiiGN,CmCxgGI,sCACE,anC0gGN,CkCt+FI,gCACE,gBlCw+FN,CkCl+FE,0CAGE,SAAA,CAEA,oB3By3BgC,C2B13BhC,YAAA,CAFA,UAAA,CADA,KlCy+FJ,CmCljGI,kCAIE,UAAA,CAHA,oBAAA,CAeE,YAAA,CAdF,kB5BuXwB,C4BtXxB,qBnCqjGN,CmCriGM,mCAxBJ,oCAAA,CADA,uBAAA,CADA,iCAAA,CA8BM,UAAA,CAHA,oBAAA,CACA,mB5BoWsB,C4BnWtB,qBnC8iGR,CmCxiGI,wCACE,anC0iGN,CkCr/FI,mCACE,gBlCu/FN,CkCh/FA,kBAIE,sCAAA,CAHA,QAAA,CACA,cAAA,CACA,elCo/FF,CkC7+FA,eAUE,4BAAA,CACA,QAAA,CAPA,UAAA,CAEA,ahC1CS,CgCqCT,aAAA,CAIA,e3BwTmB,C2B1TnB,mBAAA,CAIA,kBAAA,CAEA,kBAAA,CAPA,UlCw/FF,CkCj+FE,0CXvJA,oIhB8+BkC,C2Br1BhC,a3Bo1BgC,C2Bn1BhC,oBlCm+FJ,CkC/9FE,4CX9JA,wBhBmEQ,C2B6FN,UhCtFI,CgCuFJ,oBlCi+FJ,CkC79FE,gDAIE,4BAAA,CAFA,ahCjFO,CgCkFP,mBlC+9FJ,CkCn9FA,qCAJE,alCo+FF,CkCh+FA,iBAKE,ahClGS,CI0ML,kBALI,CAKJ,wBALI,C4BrGR,eAAA,CADA,kB3Bm0BkC,C2B/zBlC,kBlC09FF,CkCt9FA,oBAGE,ahCvGS,CgCqGT,aAAA,CACA,mBlC09FF,CkCr9FA,oBAEE,wBhC9GS,CgC+GT,8B3B4xBkC,C2B9xBlC,alC09FF,CkCr9FE,mCACE,alCu9FJ,CkCr9FI,kFX9MF,oChBogCkC,C2BpzB9B,UlCu9FN,CkCn9FI,oFXpNF,wBhBmEQ,C2BmJJ,UlCq9FN,CkCj9FI,wFAEE,alCk9FN,CkC98FE,sCACE,8BlCg9FJ,CkC78FE,wCACE,alC+8FJ,CkC58FE,qCACE,alC88FJ,CoC1rGA,+BAGE,mBAAA,CADA,iBAAA,CAEA,qBpC6rGF,CoC3rGE,yCAEE,aAAA,CADA,iBpC+rGJ,CoCzrGE,kXAME,SpCisGJ,CoC5rGA,aACE,YAAA,CACA,cAAA,CACA,0BpC+rGF,CoC7rGE,0BACE,UpC+rGJ,CoCzrGE,0EAEE,gBpC4rGJ,CoCxrGE,mG3BPE,4BAAA,CADA,yBTqsGJ,CoCprGE,6G3BFE,2BAAA,CADA,wBT6rGJ,CoCvqGA,uBAEE,mBAAA,CADA,oBpC2qGF,CoCxqGE,wGAGE,apCwqGJ,CoCrqGE,yCACE,cpCuqGJ,CoCnqGA,yEAEE,oBAAA,CADA,qBpCuqGF,CoCnqGA,yEAEE,mBAAA,CADA,oBpCuqGF,CoClpGA,oBAEE,sBAAA,CADA,qBAAA,CAEA,sBpCqpGF,CoCnpGE,wDAEE,UpCqpGJ,CoClpGE,4FAEE,epCopGJ,CoChpGE,qH3BtFE,2BAAA,CADA,4BT4uGJ,CoChpGE,oF3B1GE,wBAAA,CACA,yBT8vGJ,CqCtxGA,KACE,YAAA,CACA,cAAA,CAGA,eAAA,CADA,eAAA,CADA,crC2xGF,CqCtxGA,UAKE,a9BuRW,C8B3RX,aAAA,CACA,kBrC0xGF,CqCnxGE,gCAEE,a9BoRe,C8BnRf,oBrCoxGJ,CqChxGE,mBACE,anC4DO,CmC1DP,cAAA,CADA,mBrCmxGJ,CqC1wGA,UACE,+BrC6wGF,CqC3wGE,oBAEE,eAAA,CACA,4BAAA,C5BlBA,0BAAA,CACA,2BAAA,C4BeA,kBrCixGJ,CqC5wGI,oDAEE,oC9Bk3B8B,C8Bh3B9B,iBrC4wGN,CqCzwGI,6BAEE,4BAAA,CACA,wBAAA,CAFA,arC6wGN,CqCvwGE,8DAGE,qBnCYI,CmCXJ,iC9Bq2BgC,C8Bv2BhC,arC2wGJ,CqCtwGE,yB5B1CE,wBAAA,CACA,yBAAA,C4B2CA,erCywGJ,CqC7vGE,qBACE,eAAA,CACA,QAAA,C5BnEA,iBTo0GJ,CqC7vGE,uDdtFA,wBhBmEQ,C8BqBN,UrCgwGJ,CqCrvGE,wCAEE,aAAA,CACA,iBrCwvGJ,CqCnvGE,kDAEE,YAAA,CACA,WAAA,CACA,iBrCsvGJ,CqChvGE,iEACE,UrCovGJ,CqC1uGE,uBACE,YrC6uGJ,CqC3uGE,qBACE,arC6uGJ,CsCr2GA,QAIE,kBAAA,CAFA,YAAA,CACA,cAAA,CAEA,6BAAA,CAGA,oB/B05BkC,C+B55BlC,iB/B45BkC,C+Bj6BlC,iBtC82GF,CsCh2GE,oIAGE,kBAAA,CAFA,YAAA,CACA,iBAAA,CAEA,6BtCu2GJ,CsCn1GA,chC8OM,iBALI,CAKJ,qBALI,CgCtOR,iB/Bk4BkC,C+Bn4BlC,uB/Bk4BkC,C+Bn4BlC,oB/Bm4BkC,C+B93BlC,kBtCo1GF,CsCl1GE,wCAEE,oBtCm1GJ,CsC10GA,YACE,YAAA,CACA,qBAAA,CAGA,eAAA,CADA,eAAA,CADA,ctC+0GF,CsC30GE,sBAEE,cAAA,CADA,etC80GJ,CsC10GE,2BACE,etC40GJ,CsCn0GA,aAEE,oBpCyHU,CoC1HV,iBtCu0GF,CsC1zGA,iBAKE,kBAAA,CAJA,eAAA,CACA,WtC8zGF,CsCvzGA,gBAIE,4BAAA,CACA,4BAAA,C7BzGE,iBAAA,CHkRE,iBALI,CAKJ,qBALI,CgCtKR,aAAA,CAFA,qBtC+zGF,CsCnzGE,4CAHE,oBtC8zGJ,CsC3zGE,sBAGE,sBAAA,CADA,StCyzGJ,CsClzGA,qBAME,uBAAA,CADA,2BAAA,CAEA,oBAAA,CANA,oBAAA,CAEA,YAAA,CACA,qBAAA,CAFA,WtC0zGF,CsClzGA,mBACE,uCAAA,CACA,etCqzGF,Ce/4GI,yBuBsGA,kBAEI,gBAAA,CACA,0BtC4yGN,CsC1yGM,8BACE,kBtC4yGR,CsC1yGQ,6CACE,iBtC4yGV,CsCzyGQ,wCAEE,kB/BkwBwB,C+BnwBxB,mBtC4yGV,CsCvyGM,qCACE,gBtCyyGR,CsCtyGM,mCACE,sBAAA,CACA,etCwyGR,CsCjyGM,sEACE,YtCsyGR,CsCnyGM,6BAME,4BAAA,CAEA,aAAA,CADA,cAAA,CALA,QAAA,CAEA,WAAA,CAHA,gBAAA,CASA,cAAA,CALA,4BAAA,CAFA,YtC2yGR,CsClyGM,qEAIE,eAAA,CADA,YAAA,CADA,WtCsyGR,CsCjyGM,kCACE,YAAA,CACA,WAAA,CAEA,kBAAA,CADA,StCoyGR,CACF,Cep8GI,yBuBsGA,kBAEI,gBAAA,CACA,0BtCg2GN,CsC91GM,8BACE,kBtCg2GR,CsC91GQ,6CACE,iBtCg2GV,CsC71GQ,wCAEE,kB/BkwBwB,C+BnwBxB,mBtCg2GV,CsC31GM,qCACE,gBtC61GR,CsC11GM,mCACE,sBAAA,CACA,etC41GR,CsCr1GM,sEACE,YtC01GR,CsCv1GM,6BAME,4BAAA,CAEA,aAAA,CADA,cAAA,CALA,QAAA,CAEA,WAAA,CAHA,gBAAA,CASA,cAAA,CALA,4BAAA,CAFA,YtC+1GR,CsCt1GM,qEAIE,eAAA,CADA,YAAA,CADA,WtC01GR,CsCr1GM,kCACE,YAAA,CACA,WAAA,CAEA,kBAAA,CADA,StCw1GR,CACF,Cex/GI,0BuBsGA,kBAEI,gBAAA,CACA,0BtCo5GN,CsCl5GM,8BACE,kBtCo5GR,CsCl5GQ,6CACE,iBtCo5GV,CsCj5GQ,wCAEE,kB/BkwBwB,C+BnwBxB,mBtCo5GV,CsC/4GM,qCACE,gBtCi5GR,CsC94GM,mCACE,sBAAA,CACA,etCg5GR,CsCz4GM,sEACE,YtC84GR,CsC34GM,6BAME,4BAAA,CAEA,aAAA,CADA,cAAA,CALA,QAAA,CAEA,WAAA,CAHA,gBAAA,CASA,cAAA,CALA,4BAAA,CAFA,YtCm5GR,CsC14GM,qEAIE,eAAA,CADA,YAAA,CADA,WtC84GR,CsCz4GM,kCACE,YAAA,CACA,WAAA,CAEA,kBAAA,CADA,StC44GR,CACF,Ce5iHI,0BuBsGA,kBAEI,gBAAA,CACA,0BtCw8GN,CsCt8GM,8BACE,kBtCw8GR,CsCt8GQ,6CACE,iBtCw8GV,CsCr8GQ,wCAEE,kB/BkwBwB,C+BnwBxB,mBtCw8GV,CsCn8GM,qCACE,gBtCq8GR,CsCl8GM,mCACE,sBAAA,CACA,etCo8GR,CsC77GM,sEACE,YtCk8GR,CsC/7GM,6BAME,4BAAA,CAEA,aAAA,CADA,cAAA,CALA,QAAA,CAEA,WAAA,CAHA,gBAAA,CASA,cAAA,CALA,4BAAA,CAFA,YtCu8GR,CsC97GM,qEAIE,eAAA,CADA,YAAA,CADA,WtCk8GR,CsC77GM,kCACE,YAAA,CACA,WAAA,CAEA,kBAAA,CADA,StCg8GR,CACF,CsC1/GI,eAEI,gBAAA,CACA,0BtC2/GR,CsCz/GQ,2BACE,kBtC2/GV,CsCz/GU,0CACE,iBtC2/GZ,CsCx/GU,qCAEE,kB/BkwBwB,C+BnwBxB,mBtC2/GZ,CsCt/GQ,kCACE,gBtCw/GV,CsCr/GQ,gCACE,sBAAA,CACA,etCu/GV,CsCh/GQ,gEACE,YtCq/GV,CsCl/GQ,0BAME,4BAAA,CAEA,aAAA,CADA,cAAA,CALA,QAAA,CAEA,WAAA,CAHA,gBAAA,CASA,cAAA,CALA,4BAAA,CAFA,YtC0/GV,CsCj/GQ,+DAIE,eAAA,CADA,YAAA,CADA,WtCq/GV,CsCh/GQ,+BACE,YAAA,CACA,WAAA,CAEA,kBAAA,CADA,StCm/GV,CsCj+GI,gGAEE,sBtCs+GN,CsCj+GI,oCACE,uBtCm+GN,CsCj+GM,oFAEE,sBtCk+GR,CsC/9GM,6CACE,sBtCi+GR,CsC79GI,qFAEE,sBtC+9GN,CsC39GE,8BAEE,6B/BusBgC,C+BxsBhC,uBtC89GJ,CsC19GE,mCACE,yQtC49GJ,CsCz9GE,2BACE,uBtC29GJ,CsCz9GI,mGAGE,sBtC29GN,CsC18GI,gIACE,UtCm9GN,CsCj9GM,kFAEE,gBtCk9GR,CsC/8GM,4CACE,yBtCi9GR,CsC78GI,mFAEE,UtC+8GN,CsC38GE,6BAEE,+B/B6oBgC,C+B9oBhC,UtC88GJ,CsC18GE,kCACE,yPtC48GJ,CsCv8GI,0HAGE,UtC48GN,CuCnxHA,MAME,oBAAA,CAEA,0BAAA,CADA,qBrCmEM,CqCjEN,mCAAA,C9BME,iBAAA,C8BbF,YAAA,CACA,qBAAA,CACA,WAAA,CAHA,iBvC8xHF,CuClxHE,SAEE,aAAA,CADA,cvCqxHJ,CuCjxHE,kBAEE,qBAAA,CADA,kBvCoxHJ,CuCjxHI,8B9BEA,0BAAA,CACA,2BAAA,C8BFE,kBvCqxHN,CuCjxHI,6B9BYA,6BAAA,CADA,8BAAA,C8BVE,qBvCqxHN,CuC9wHE,8DAEE,YvCgxHJ,CuC5wHA,WAGE,aAAA,CACA,YvC6wHF,CuCzwHA,YACE,mBvC4wHF,CuCzwHA,eACE,kBvC6wHF,CuCzwHA,qCAHE,evCgxHF,CuCxwHE,iBACE,oBvC2wHJ,CuCxwHE,sBACE,gBvC0wHJ,CuClwHA,aAIE,kChCk/BkC,CgCj/BlC,0CAAA,CAHA,eAAA,CADA,kBvCwwHF,CuClwHE,yB9BpEE,yBTy0HJ,CuChwHA,aAGE,kChCu+BkC,CgCt+BlC,uCAAA,CAHA,kBvCqwHF,CuChwHE,wB9B/EE,yBTk1HJ,CuCzvHA,kBAIE,eAAA,CAFA,oBvC8vHF,CuClvHA,qCAXE,kBAAA,CAFA,mBvCowHF,CuCjvHA,kB9B7GI,iBAAA,C8BiHF,QAAA,CACA,MAAA,CACA,YhC4HO,CgCjIP,iBAAA,CAEA,OAAA,CADA,KvCyvHF,CuCjvHA,yCAGE,UvCovHF,CuCjvHA,wB9BpHI,0BAAA,CACA,2BT02HJ,CuClvHA,2B9B1GI,6BAAA,CADA,8BTm2HJ,CuC3uHE,kBACE,kBvC8uHJ,Cel1HI,yBwBgGJ,YAQI,YAAA,CACA,kBvC8uHF,CuC3uHE,kBAEE,WAAA,CACA,evC4uHJ,CuC1uHI,wBAEE,aAAA,CADA,avC6uHN,CuCvuHM,mC9BnJJ,4BAAA,CADA,yBT+3HF,CuCxuHQ,iGAGE,yBvCyuHV,CuCvuHQ,oGAGE,4BvCwuHV,CuCpuHM,oC9BpJJ,2BAAA,CADA,wBT63HF,CuCruHQ,mGAGE,wBvCsuHV,CuCpuHQ,sGAGE,2BvCquHV,CACF,CwCn7HA,kBAGE,kBAAA,CAMA,qBtCiEM,CsChEN,QAAA,C/BKE,eAAA,C+BRF,atCoEM,CsCzEN,YAAA,ClC+RI,cALI,CAKJ,cALI,CkChRR,oBAAA,CAPA,oBAAA,CAJA,iBAAA,CAOA,eAAA,CAJA,UxC87HF,CwCn7HE,kCAEE,wBjC+kCsC,CiC9kCtC,4CAAA,CAFA,axCu7HJ,CwCn7HI,wCACE,8SAAA,CACA,wBxCq7HN,CwCh7HE,wBAME,8SAAA,CACA,2BAAA,CACA,uBjCmkCsC,CiCtkCtC,UAAA,CAJA,aAAA,CAEA,WjCwkCsC,CiCxkCtC,cjCwkCsC,CiCvkCtC,gBAAA,CAFA,UjCykCsC,CiCzkCtC,axCw7HJ,CwC96HE,wBACE,SxCg7HJ,CwC76HE,wBAEE,oBjC8pBoC,CiC5pBpC,2CjCgjB4B,CiCjjB5B,SAAA,CAFA,SxCk7HJ,CwC36HA,kBACE,exC86HF,CwC36HA,gBACE,qBtCkBM,CsCjBN,mCxC86HF,CwC56HE,8B/BnCE,0BAAA,CACA,2BTk9HJ,CwC76HI,gD/BtCA,0BAAA,CACA,2BTs9HJ,CwC56HE,oCACE,YxC86HJ,CwC16HE,6B/BjCE,6BAAA,CADA,8BTg9HJ,CwC16HM,yD/BrCF,6BAAA,CADA,8BTo9HJ,CwCz6HI,iD/B1CA,6BAAA,CADA,8BTw9HJ,CwCv6HA,gBACE,oBxC06HF,CwCj6HE,qCACE,cxCo6HJ,CwCj6HE,iCAEE,aAAA,C/BxFA,eAAA,C+BuFA,cxCq6HJ,CwCj6HI,6CAAgB,YxCo6HpB,CwCn6HI,4CAAe,exCs6HnB,CwCp6HI,mD/B9FA,eTqgIJ,CyCxhIA,YACE,YAAA,CACA,cAAA,CAIA,eAAA,CAFA,kBlC+0CkC,CkCh1ClC,SzC6hIF,CyCnhIE,kCACE,kBzCshIJ,CyCphII,yCAGE,avCwEK,CuCvEL,wCAAA,CAHA,UAAA,CACA,mBzCwhIN,CyClhIE,wBACE,azCohIJ,C0C7iIA,YACE,YAAA,ChCIA,eAAA,CADA,cV+iIF,C0C9iIA,WAKE,qBxCoEM,CwCnEN,wBAAA,CAHA,anCiSW,CmClSX,aAAA,CADA,iB1CqjIF,C0C7iIE,iBAKE,oBxCqEO,CwCvEP,oBAAA,CAFA,S1CmjIJ,C0C5iIE,kCAJE,wBxCqEO,CwCvEP,a1CyjIJ,C0CnjIE,iBAKE,2CnCwkB4B,CmCzkB5B,SnC0gCgC,CmC7gChC,S1CkjIJ,C0CziIE,wCACE,gB1C4iIJ,C0CziIE,6BnBhCA,wBhBmEQ,CmC/BN,oBnC+BM,CmCjCN,UxCwCI,CwCzCJ,S1C8iIJ,C0CxiIE,+BAGE,wBxCgDO,CwC/CP,oBxCyCO,CwC5CP,axC8CO,CwC7CP,mB1C4iIJ,C2CrlIE,WACE,sB3CwlIJ,C2CjlIQ,kClCsCJ,6BAAA,CADA,0BTijIJ,C2ChlIQ,iClCkBJ,8BAAA,CADA,2BTmkIJ,C2ClmIE,0BrCiSI,iBALI,CAKJ,qBALI,CqC3RN,qB3CsmIJ,C2C/lIQ,iDlCsCJ,6BAAA,CADA,0BT8jIJ,C2C7lIQ,gDlCkBJ,8BAAA,CADA,2BTglIJ,C2C/mIE,0BrCiSI,kBALI,CAKJ,wBALI,CqC3RN,oB3CmnIJ,C2C5mIQ,iDlCsCJ,6BAAA,CADA,0BT2kIJ,C2C1mIQ,gDlCkBJ,8BAAA,CADA,2BT6lIJ,C4C3nIA,OnCcI,iBAAA,CmCRF,U1CmEM,C0CxEN,oBAAA,CtC+RI,eALI,CsCvRR,erCubiB,CqCtbjB,aAAA,CAHA,mBAAA,CAKA,iBAAA,CAEA,uBAAA,CADA,kB5CgoIF,C4C1nIE,aACE,Y5C4nIJ,C4CvnIA,YACE,iBAAA,CACA,Q5C0nIF,C6CjpIA,OAIE,4BAAA,CpCWE,iBAAA,CoCZF,kBtCyvC8B,CsC1vC9B,YAAA,CADA,iB7CwpIF,C6ChpIA,eAEE,a7CkpIF,C6C9oIA,YACE,e7CipIF,C6CzoIA,mBACE,kB7C4oIF,C6CzoIE,8BAKE,oBAAA,CAJA,iBAAA,CAEA,OAAA,CADA,KAAA,CAEA,S7C4oIJ,C6C5nIE,etBhDA,wBsB0CmB,CC1CnB,oBD2Ce,CC7Cf,a9CorIF,C8ChrIE,2BACE,a9CkrIJ,C6CroIE,iBtBhDA,wBsB0CmB,CC1CnB,oBD2Ce,CC7Cf,a9C6rIF,C8CzrIE,6BACE,a9C2rIJ,C6C9oIE,etBhDA,wBsB0CmB,CC1CnB,oBD2Ce,CC7Cf,a9CssIF,C8ClsIE,2BACE,a9CosIJ,C6CvpIE,ctBhDA,wBsB0CmB,CC1CnB,oBD2Ce,CC7Cf,a9C+sIF,C8C3sIE,0BACE,a9C6sIJ,C6ChqIE,YtBhDA,wBsB0CmB,CC1CnB,oBD2Ce,CC7Cf,a9CwtIF,C8CptIE,wBACE,a9CstIJ,C6CzqIE,etBhDA,wBsB0CmB,CC1CnB,oBD2Ce,CC7Cf,a9CiuIF,C8C7tIE,2BACE,a9C+tIJ,C6ClrIE,atBhDA,wBsB0CmB,CC1CnB,oBD2Ce,CC7Cf,a9C0uIF,C8CtuIE,yBACE,a9CwuIJ,C+CruIA,UAKE,wB7CwES,COpEP,iBAAA,CHkRE,cALI,CAKJ,gBALI,CyCpRR,WxCkwCkC,CwClwClC,W/C4uIF,C+CpuIA,wBATE,YAAA,CAEA,e/CsvIF,C+C/uIA,cAQE,wBxC2CQ,CwC9CR,U7CqDM,C6CxDN,qBAAA,CACA,sBAAA,CAGA,iBAAA,CACA,kB/CwuIF,C+CnuIA,sBxBYE,qKAAA,CwBVA,yB/CsuIF,CgDpwIA,YvCeI,iBAAA,CuCdF,YAAA,CACA,qBAAA,CAIA,eAAA,CADA,chDuwIF,CgDlwIA,qBAEE,qBAAA,CADA,oBhDswIF,CgDnwIE,+BAEE,kCAAA,CACA,yBhDowIJ,CgD1vIA,wBAEE,a9C2DS,C8C1DT,kBAAA,CAFA,UhD+vIF,CgD1vIE,4DAKE,wB9C4CO,C8C9CP,a9CoDO,C8CnDP,oBAAA,CAFA,ShD8vIJ,CgDxvIE,+BAEE,wB9CwCO,C8CzCP,ahD2vIJ,CgDjvIA,iBAME,qB9CgBM,C8CfN,mCAAA,CAHA,8HzCiuCkC,CyCnuClC,aAAA,CACA,kBAAA,CAFA,iBhDyvIF,CgDjvIE,6BvCrCE,8BAAA,CACA,+BTyxIJ,CgDjvIE,4BvC1BE,iCAAA,CADA,kCTgxIJ,CgDjvIE,oDAIE,wB9CiBO,C8CnBP,a9CeO,C8CdP,mBhDmvIJ,CgD9uIE,wBAGE,wBzCbM,CyCcN,oBzCdM,CyCYN,U9CLI,C8CIJ,ShDmvIJ,CgD7uIE,kCACE,kBhD+uIJ,CgD7uII,yCAEE,oBzCwRS,CyCzRT,ehDgvIN,CgDjuII,uBACE,kBhDouIN,CgDjuIQ,oDvCrCJ,6BAAA,CAZA,yBTsxIJ,CgDhuIQ,mDvC1CJ,2BAAA,CAZA,2BT0xIJ,CgD/tIQ,+CACE,YhDiuIV,CgD9tIQ,yDAEE,mBAAA,CADA,oBhDiuIV,CgD9tIU,gEAEE,qBzCkPG,CyCnPH,gBhDiuIZ,CepyII,yBiC4CA,0BACE,kBhD4vIJ,CgDzvIM,uDvCrCJ,6BAAA,CAZA,yBT8yIF,CgDxvIM,sDvC1CJ,2BAAA,CAZA,2BTkzIF,CgDvvIM,kDACE,YhDyvIR,CgDtvIM,4DAEE,mBAAA,CADA,oBhDyvIR,CgDtvIQ,mEAEE,qBzCkPG,CyCnPH,gBhDyvIV,CACF,Ce7zII,yBiC4CA,0BACE,kBhDoxIJ,CgDjxIM,uDvCrCJ,6BAAA,CAZA,yBTs0IF,CgDhxIM,sDvC1CJ,2BAAA,CAZA,2BT00IF,CgD/wIM,kDACE,YhDixIR,CgD9wIM,4DAEE,mBAAA,CADA,oBhDixIR,CgD9wIQ,mEAEE,qBzCkPG,CyCnPH,gBhDixIV,CACF,Cer1II,0BiC4CA,0BACE,kBhD4yIJ,CgDzyIM,uDvCrCJ,6BAAA,CAZA,yBT81IF,CgDxyIM,sDvC1CJ,2BAAA,CAZA,2BTk2IF,CgDvyIM,kDACE,YhDyyIR,CgDtyIM,4DAEE,mBAAA,CADA,oBhDyyIR,CgDtyIQ,mEAEE,qBzCkPG,CyCnPH,gBhDyyIV,CACF,Ce72II,0BiC4CA,0BACE,kBhDo0IJ,CgDj0IM,uDvCrCJ,6BAAA,CAZA,yBTs3IF,CgDh0IM,sDvC1CJ,2BAAA,CAZA,2BT03IF,CgD/zIM,kDACE,YhDi0IR,CgD9zIM,4DAEE,mBAAA,CADA,oBhDi0IR,CgD9zIQ,mEAEE,qBzCkPG,CyCnPH,gBhDi0IV,CACF,CgDnzIA,kBvC9HI,eTo7IJ,CgDnzIE,mCACE,oBhDqzIJ,CgDnzII,8CACE,qBhDqzIN,CiDz8IE,yBAEE,wBD+JsB,CChKtB,ajD68IJ,CiDz8IM,4GAGE,wBAAA,CADA,ajD28IR,CiDv8IM,uDAEE,wBDqJqB,CCpJrB,oBDoJqB,CCtJrB,UjD28IR,CiDv9IE,2BAEE,wBD+JsB,CChKtB,ajD29IJ,CiDv9IM,gHAGE,wBAAA,CADA,ajDy9IR,CiDr9IM,yDAEE,wBDqJqB,CCpJrB,oBDoJqB,CCtJrB,UjDy9IR,CiDr+IE,yBAEE,wBD+JsB,CChKtB,ajDy+IJ,CiDr+IM,4GAGE,wBAAA,CADA,ajDu+IR,CiDn+IM,uDAEE,wBDqJqB,CCpJrB,oBDoJqB,CCtJrB,UjDu+IR,CiDn/IE,wBAEE,wBD+JsB,CChKtB,ajDu/IJ,CiDn/IM,0GAGE,wBAAA,CADA,ajDq/IR,CiDj/IM,sDAEE,wBDqJqB,CCpJrB,oBDoJqB,CCtJrB,UjDq/IR,CiDjgJE,sBAEE,wBD+JsB,CChKtB,ajDqgJJ,CiDjgJM,sGAGE,wBAAA,CADA,ajDmgJR,CiD//IM,oDAEE,wBDqJqB,CCpJrB,oBDoJqB,CCtJrB,UjDmgJR,CiD/gJE,yBAEE,wBD+JsB,CChKtB,ajDmhJJ,CiD/gJM,4GAGE,wBAAA,CADA,ajDihJR,CiD7gJM,uDAEE,wBDqJqB,CCpJrB,oBDoJqB,CCtJrB,UjDihJR,CiD7hJE,uBAEE,wBD+JsB,CChKtB,ajDiiJJ,CiD7hJM,wGAGE,wBAAA,CADA,ajD+hJR,CiD3hJM,qDAEE,wBDqJqB,CCpJrB,oBDoJqB,CCtJrB,UjD+hJR,CkD1iJA,WAME,gYAAA,CACA,QAAA,CzCOE,iBAAA,CyCbF,sBAAA,CAIA,ahDqEM,CgDvEN,U3C04C2B,C2Cp4C3B,U3C24C2B,C2Ch5C3B,aAAA,CAFA,SlDojJF,CkD1iJE,iBACE,ahD6DI,CgD3DJ,W3Cs4CyB,C2Cv4CzB,oBlD6iJJ,CkDziJE,iBAEE,2C3C0kB4B,C2CzkB5B,S3Ci4CyB,C2Cn4CzB,SlD6iJJ,CkDxiJE,wCAIE,W3C23CyB,C2C73CzB,mBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,gBlD0iJJ,CkDriJA,iBACE,iDlDwiJF,CmD9kJA,OAOE,2BAAA,CADA,oC5C+qCkC,C4C7qClC,+BAAA,C1CWE,iBAAA,C0CVF,sG5CmYyB,CDvGrB,cALI,CAKJ,iBALI,C6C9RR,cAAA,CAGA,mBAAA,CAJA,WnDylJF,CmD9kJE,eACE,SnDglJJ,CmD7kJE,kBACE,YnD+kJJ,CmD3kJA,iBAEE,cAAA,CACA,mBAAA,CAFA,sBAAA,CAAA,iBnDglJF,CmD5kJE,mCACE,kBnD8kJJ,CmD1kJA,cAEE,kBAAA,CAIA,2BAAA,CADA,oC5CypCkC,C4CvpClC,uCAAA,C1CVE,0BAAA,CACA,2BAAA,C0CMF,ajDwDS,CiD3DT,YAAA,CAEA,oBnDmlJF,CmD5kJE,yBAEE,kB5CsoCgC,C4CvoChC,qBnD+kJJ,CmD1kJA,YAEE,oBAAA,CADA,cnD8kJF,CoDvnJA,OAKE,YAAA,CAEA,WAAA,CAJA,MAAA,CASA,SAAA,CAJA,iBAAA,CACA,eAAA,CARA,cAAA,CACA,KAAA,CAIA,UAAA,CAFA,YpDgoJF,CoDjnJA,cAGE,Y7CwrCkC,C6CtrClC,mBAAA,CAJA,iBAAA,CACA,UpDsnJF,CoDhnJE,0BAEE,2BpDinJJ,CoD/mJE,0BACE,cpDinJJ,CoD7mJE,kCACE,qBpD+mJJ,CoD3mJA,yBACE,wBpD8mJF,CoD5mJE,wCACE,eAAA,CACA,epD8mJJ,CoD3mJE,qCACE,epD6mJJ,CoDzmJA,uBAEE,kBAAA,CADA,YAAA,CAEA,4BpD4mJF,CoDxmJA,eASE,2BAAA,CADA,qBlDEM,CkDAN,iCAAA,C3C3DE,iBAAA,C2CmDF,YAAA,CACA,qBAAA,CAWA,SAAA,CAPA,mBAAA,CANA,iBAAA,CAGA,UpDinJF,CoDnmJA,gBC9EE,wBnDuEM,CmDxEN,YAAA,CAHA,MAAA,CAFA,cAAA,CACA,KAAA,CAGA,WAAA,CADA,YrD8rJF,CqDxrJE,qBAAS,SrD2rJX,CqD1rJE,qBAAS,UrD6rJX,CoD7mJA,cAGE,kBAAA,CAGA,2JAAA,C3CtEE,0BAAA,CACA,2BAAA,C2CgEF,YAAA,CACA,aAAA,CAEA,6BAAA,CACA,YpDmnJF,CoD/mJE,yBAEE,gCAAA,CADA,apDknJJ,CoD5mJA,aAEE,e7CuV4B,C6CxV5B,epDgnJF,CoD1mJA,YAIE,aAAA,CACA,Y7C0IO,C6C9IP,iBpD+mJF,CoDvmJA,cAIE,kBAAA,C3CrFE,6BAAA,CADA,8BAAA,C2CyFF,wJAAA,CANA,YAAA,CAEA,aAAA,CADA,cAAA,CAGA,wBAAA,CACA,cpD6mJF,CoDtmJE,gBACE,apDwmJJ,CenrJI,yBqCkFF,cAEE,mBAAA,CADA,epDsmJF,CoDlmJA,yBACE,0BpDomJF,CoDjmJA,uBACE,8BpDmmJF,CoD5lJA,UAAY,epD+lJZ,CACF,CensJI,0BqCuGF,oBAEE,epD+lJF,CACF,CezsJI,0BqC8GF,UAAY,gBpD+lJZ,CACF,CoDvlJI,kBAGE,WAAA,CACA,QAAA,CAFA,cAAA,CADA,WpD4lJN,CoDvlJM,iCAEE,QAAA,C3C3KJ,eAAA,C2C0KI,WpD2lJR,CoDtlJM,gC3C/KF,eTwwJJ,CoDrlJM,8BACE,epDulJR,CoDplJM,gC3CvLF,eT8wJJ,CertJI,4BqC0GA,0BAGE,WAAA,CACA,QAAA,CAFA,cAAA,CADA,WpDknJJ,CoD7mJI,yCAEE,QAAA,C3C3KJ,eAAA,C2C0KI,WpDinJN,CoD5mJI,wC3C/KF,eT8xJF,CoD3mJI,sCACE,epD6mJN,CoD1mJI,wC3CvLF,eToyJF,CACF,Ce5uJI,4BqC0GA,0BAGE,WAAA,CACA,QAAA,CAFA,cAAA,CADA,WpDwoJJ,CoDnoJI,yCAEE,QAAA,C3C3KJ,eAAA,C2C0KI,WpDuoJN,CoDloJI,wC3C/KF,eTozJF,CoDjoJI,sCACE,epDmoJN,CoDhoJI,wC3CvLF,eT0zJF,CACF,CelwJI,6BqC0GA,0BAGE,WAAA,CACA,QAAA,CAFA,cAAA,CADA,WpD8pJJ,CoDzpJI,yCAEE,QAAA,C3C3KJ,eAAA,C2C0KI,WpD6pJN,CoDxpJI,wC3C/KF,eT00JF,CoDvpJI,sCACE,epDypJN,CoDtpJI,wC3CvLF,eTg1JF,CACF,CexxJI,6BqC0GA,0BAGE,WAAA,CACA,QAAA,CAFA,cAAA,CADA,WpDorJJ,CoD/qJI,yCAEE,QAAA,C3C3KJ,eAAA,C2C0KI,WpDmrJN,CoD9qJI,wC3C/KF,eTg2JF,CoD7qJI,sCACE,epD+qJN,CoD5qJI,wC3CvLF,eTs2JF,CACF,CsDz3JA,SAUE,oBAAA,CAPA,aAAA,CCHA,qChDgb4B,CD5IxB,kBALI,CAKJ,wBALI,CiD7RR,iBAAA,CACA,ehD2bmB,CgDpbnB,qBAAA,CAIA,eAAA,CAVA,ehDgc4B,C+Chc5B,Q/C0nCkC,C+CnnClC,SAAA,CAVA,iBAAA,CCIA,eAAA,CACA,gBAAA,CACA,oBAAA,CACA,gBAAA,CACA,mBAAA,CAIA,kBAAA,CAFA,iBAAA,CACA,mBAAA,CDVA,YtD84JF,CsDn4JE,cAAS,UtDs4JX,CsDp4JE,wBAEE,aAAA,CAEA,Y/C8mCgC,C+C9mChC,Y/C8mCgC,C+CjnChC,iBAAA,CAEA,Y/C8mCgC,C+C9mChC,WtDu4JJ,CsDp4JI,+BAGE,wBAAA,CACA,kBAAA,CAFA,UAAA,CADA,iBtDy4JN,CsDj4JA,6DACE,etDo4JF,CsDl4JE,2FACE,QtDo4JJ,CsDl4JI,yGAGE,wBpDuCE,CoDxCF,0BAAA,CADA,QtDs4JN,CsD/3JA,+DACE,etDk4JF,CsDh4JE,6FAGE,a/C8kCgC,C+C9kChC,Y/C8kCgC,C+ChlChC,MAAA,CACA,W/CglCgC,C+ChlChC,WtDm4JJ,CsDh4JI,2GAGE,0BpDuBE,CoDxBF,gCAAA,CADA,UtDo4JN,CsD73JA,mEACE,etDg4JF,CsD93JE,iGACE,KtDg4JJ,CsD93JI,+GAGE,2BpDSE,CoDVF,0BAAA,CADA,WtDk4JN,CsD33JA,gEACE,etD83JF,CsD53JE,8FAGE,a/CgjCgC,C+ChjChC,Y/CgjCgC,C+CljChC,OAAA,CACA,W/CkjCgC,C+CljChC,WtD+3JJ,CsD53JI,4GAGE,yBpDPE,CoDMF,gCAAA,CADA,StDg4JN,CsDz2JA,eAKE,wBpDjCM,CO5DJ,iBAAA,C6C2FF,UpDhCM,CoD8BN,e/C4gCkC,C+C3gClC,oBAAA,CAEA,iBtD82JF,CwD79JA,SAYE,oBAAA,CAEA,2BAAA,CADA,qBtDiEM,CsD/DN,iCAAA,C/CIE,iBAAA,C8ClBF,qChDgb4B,CD5IxB,kBALI,CAKJ,wBALI,CiD7RR,iBAAA,CACA,ehD2bmB,CiD5bnB,MAAA,CDQA,qBAAA,CAIA,eAAA,CAVA,ehDgc4B,CiD/b5B,ejD+oCkC,CgD/oClC,eAAA,CACA,gBAAA,CACA,oBAAA,CACA,gBAAA,CACA,mBAAA,CCRA,KAAA,CDYA,kBAAA,CAFA,iBAAA,CACA,mBAAA,CCTA,YxDs/JF,CwDv+JE,iCAdA,aAAA,CAJA,iBxD+/JF,CwD7+JE,wBAIE,UjD+oCgC,CiD/oChC,YjD+oCgC,CiDhpChC,UjD+oCgC,CiD/oChC,UxD0+JJ,CwDv+JI,6DAKE,wBAAA,CACA,kBAAA,CAFA,UAAA,CADA,aAAA,CADA,iBxD4+JN,CwDl+JE,2FACE,yBxDq+JJ,CwDn+JI,yGAGE,kCjD8nC8B,CiD/nC9B,0BAAA,CADA,QxDu+JN,CwDl+JI,uGAGE,qBtD6BE,CsD9BF,0BAAA,CADA,UxDs+JN,CwD99JE,6FAGE,WjD2mCgC,CiD3mChC,WjD2mCgC,CiD7mChC,uBAAA,CACA,SjD6mCgC,CiD7mChC,WxDk+JJ,CwD/9JI,2GAGE,oCjD0mC8B,CiD3mC9B,gCAAA,CADA,MxDm+JN,CwD99JI,yGAGE,uBtDSE,CsDVF,gCAAA,CADA,QxDk+JN,CwD19JE,iGACE,sBxD69JJ,CwD39JI,+GAGE,qCjDwlC8B,CiDzlC9B,0BAAA,CADA,KxD+9JN,CwD19JI,6GAGE,wBtDTE,CsDQF,0BAAA,CADA,OxD89JN,CwDv9JE,iHAQE,+BAAA,CADA,UAAA,CAHA,aAAA,CADA,QAAA,CAGA,kBAAA,CALA,iBAAA,CACA,KAAA,CAGA,UjDokCgC,CiDpkChC,UxD49JJ,CwDp9JE,8FAGE,WjDyjCgC,CiDzjChC,WjDyjCgC,CiD3jChC,wBAAA,CACA,SjD2jCgC,CiD3jChC,WxDw9JJ,CwDr9JI,4GAGE,mCjDwjC8B,CiDzjC9B,gCAAA,CADA,OxDy9JN,CwDp9JI,0GAGE,sBtDzCE,CsDwCF,gCAAA,CADA,SxDw9JN,CwDj8JA,gBAKE,wBjD2gCkC,CiD1gClC,wCAAA,C/CtHE,0BAAA,CACA,2BAAA,CHwQE,cALI,CAKJ,cALI,CkDlJR,eAAA,CADA,kBxD08JF,CwDl8JE,sBACE,YxDo8JJ,CwDh8JA,cAEE,atD7EM,CsD4EN,YxDo8JF,CyDllKA,UACE,iBzDqlKF,CyDllKA,wBACE,kBzDqlKF,CyDllKA,gBAGE,eAAA,CAFA,iBAAA,CACA,UzDslKF,C0D3mKE,sBAEE,UAAA,CACA,UAAA,CAFA,a1D+mKJ,CyDtlKA,eAME,0BAAA,CAJA,YAAA,CACA,UAAA,CAEA,kBAAA,CAJA,iBAAA,CAGA,UzD2lKF,CyDrlKA,8DAGE,azDwlKF,CyDplKA,wEAEE,0BzDwlKF,CyDrlKA,wEAEE,2BzDwlKF,CyD7kKE,8BACE,SAAA,CAEA,cAAA,CADA,2BzDklKJ,CyD9kKE,iJAIE,SAAA,CADA,SzDilKJ,CyD7kKE,oFAGE,SAAA,CADA,SzDglKJ,CyDrkKA,8CAQE,kBAAA,CAMA,eAAA,CACA,QAAA,CAHA,UvDvBM,CuDkBN,YAAA,CAEA,sBAAA,CAOA,UlDwvCmC,CkD7vCnC,SAAA,CADA,SlD6vCmC,CkDlwCnC,SzDklKF,CyDnkKE,oHAEE,UvDjCI,CuDoCJ,UzDskKJ,CyDnkKA,uBACE,MzDskKF,CyD7jKA,wDAME,uBAAA,CADA,2BAAA,CAEA,yBAAA,CALA,oBAAA,CAEA,WlDgvCmC,CkDhvCnC,WlDgvCmC,CkDjvCnC,UlDivCmC,CkDjvCnC,UzDwkKF,CyDzjKA,4BACE,sRzDokKF,CyDlkKA,4BACE,uRzDqkKF,CyD7jKA,qBAGE,QAAA,CAGA,YAAA,CACA,sBAAA,CAHA,MAAA,CASA,eAAA,CAFA,kBAAA,CACA,elDurCmC,CkDzrCnC,gBlDyrCmC,CkD3rCnC,SAAA,CAPA,iBAAA,CACA,OAAA,CAGA,SzDukKF,CyD7jKE,sCAWE,2BAAA,CADA,qBvDxGI,CuD0GJ,QAAA,CAGA,oCAAA,CADA,iCAAA,CAbA,sBAAA,CAQA,cAAA,CAPA,aAAA,CAEA,UlDsrCiC,CkDnrCjC,elDqrCiC,CkDtrCjC,gBlDsrCiC,CkD5qCjC,UlD6qCiC,CkDxrCjC,SAAA,CAGA,kBAAA,CALA,UzD2kKJ,CyD1jKE,6BACE,SzD4jKJ,CyDnjKA,kBAGE,WlDoqCmC,CkDpqCnC,clDoqCmC,CkDhqCnC,UvDnIM,CuDgIN,QAAA,CAEA,sBlDgqCmC,CkDjqCnC,mBlDiqCmC,CkDrqCnC,iBAAA,CACA,SAAA,CAMA,iBzDsjKF,CyDhjKE,sFAEE,+BzDmjKJ,CyDhjKE,qDACE,wBzDkjKJ,CyD/iKE,iCACE,azDijKJ,C2D9wKA,0BACE,GAAK,uB3DkxKL,CACF,C2D/wKA,gBASE,6CAAA,CAHA,kBAAA,CAEA,iBAAA,CAFA,oCAAA,CALA,oBAAA,CAEA,WpDu3CwB,CoDv3CxB,WpDu3CwB,CoDt3CxB,sBnCiiDwB,CmCniDxB,UpDw3CwB,CoDx3CxB,U3DuxKF,C2D7wKA,mBAGE,iBpDk3CwB,CoDn3CxB,WpDi3CwB,CoDj3CxB,WpDi3CwB,CoDl3CxB,UpDk3CwB,CoDl3CxB,U3DkxKF,C2DxwKA,wBACE,GACE,kB3D2wKF,C2DzwKA,IACE,SAAA,CACA,c3D2wKF,CACF,C2DvwKA,cASE,2CAAA,CAJA,6BAAA,CAEA,iBAAA,CANA,oBAAA,CAEA,WpDq1CwB,CoDr1CxB,WpDq1CwB,CoDh1CxB,SAAA,CAJA,sBnC+/CwB,CmCjgDxB,UpDs1CwB,CoDt1CxB,U3D+wKF,C2DrwKA,iBAEE,WpD+0CwB,CoD/0CxB,WpD+0CwB,CoDh1CxB,UpDg1CwB,CoDh1CxB,U3DywKF,C4Dl0KA,WAUE,2BAAA,CADA,qB1DqEM,C0D5EN,QAAA,CAEA,YAAA,CACA,qBAAA,CACA,cAAA,CAKA,SAAA,CAVA,cAAA,CAOA,iBAAA,CALA,Y5D40KF,C4D/zKA,oBPRE,wBnDuEM,CmDxEN,YAAA,CAHA,MAAA,CAFA,cAAA,CACA,KAAA,CAGA,WAAA,CADA,YrDo1KF,CqD90KE,yBAAS,SrDi1KX,CqDh1KE,yBAAS,UrDm1KX,C4D30KA,kBAEE,kBAAA,CADA,YAAA,CAEA,6BAAA,CACA,Y5D80KF,C4D50KE,6BAIE,oBAAA,CADA,mBAAA,CADA,iBAAA,CADA,a5Di1KJ,C4D10KA,iBAEE,erDia4B,CqDla5B,e5D80KF,C4D10KA,gBACE,WAAA,CAEA,eAAA,CADA,Y5D80KF,C4D10KA,iBAIE,uCAAA,CAFA,MAAA,CADA,KAAA,CAIA,2BAAA,CAFA,W5D+0KF,C4D10KA,eAIE,sCAAA,CAFA,OAAA,CADA,KAAA,CAIA,0BAAA,CAFA,W5D+0KF,C4D10KA,eAME,wCAAA,CALA,KAAA,CAMA,2B5D60KF,C4D10KA,iCANE,WrDs2CkC,CqDv2ClC,MAAA,CAEA,eAAA,CAHA,O5D21KF,C4Dn1KA,kBAKE,qCAAA,CACA,0B5D60KF,C4D10KA,gBACE,c5D60KF,C0D55KE,gBAEE,UAAA,CACA,UAAA,CAFA,a1Di6KJ,C6Dn6KE,cACE,a7Ds6KJ,C6Dn6KM,wCAEE,a7Do6KR,C6D16KE,gBACE,a7D66KJ,C6D16KM,4CAEE,a7D26KR,C6Dj7KE,cACE,a7Do7KJ,C6Dj7KM,wCAEE,a7Dk7KR,C6Dx7KE,aACE,a7D27KJ,C6Dx7KM,sCAEE,a7Dy7KR,C6D/7KE,WACE,a7Dk8KJ,C6D/7KM,kCAEE,a7Dg8KR,C6Dt8KE,cACE,a7Dy8KJ,C6Dt8KM,wCAEE,a7Du8KR,C6D78KE,YACE,a7Dg9KJ,C6D78KM,oCAEE,a7D88KR,C8Dn9KA,OACE,iBAAA,CACA,U9Ds9KF,C8Dp9KE,cAGE,UAAA,CAFA,aAAA,CACA,kC9Du9KJ,C8Dn9KE,SAKE,WAAA,CAFA,MAAA,CAFA,iBAAA,CACA,KAAA,CAEA,U9Ds9KJ,C8Dh9KE,WACE,sB9Dm9KJ,C8Dp9KE,WACE,qB9Du9KJ,C8Dx9KE,YACE,wB9D29KJ,C8D59KE,YACE,gC9D+9KJ,C+Dp/KA,WAEE,K/D0/KF,C+Dp/KA,yBAJE,MAAA,CAHA,cAAA,CAEA,OAAA,CAEA,Y/D+/KF,C+D5/KA,cAGE,Q/Dy/KF,C+D/+KI,YACE,eAAA,CACA,KAAA,CACA,Y/Dk/KN,Ce78KI,yBgDxCA,eACE,eAAA,CACA,KAAA,CACA,Y/Dy/KJ,CACF,Cer9KI,yBgDxCA,eACE,eAAA,CACA,KAAA,CACA,Y/DggLJ,CACF,Ce59KI,0BgDxCA,eACE,eAAA,CACA,KAAA,CACA,Y/DugLJ,CACF,Cen+KI,0BgDxCA,eACE,eAAA,CACA,KAAA,CACA,Y/D8gLJ,CACF,CgExiLA,QAGE,kBAAA,CADA,kBhE4iLF,CgEviLA,gBAHE,kBAAA,CAHA,YhEojLF,CgE9iLA,QAEE,aAAA,CACA,qBhE2iLF,CiEljLA,2ECUE,4BAAA,CAEA,kBAAA,CANA,oBAAA,CAEA,qBAAA,CACA,yBAAA,CAFA,mBAAA,CAHA,2BAAA,CAOA,4BAAA,CANA,mBlE0jLF,CmE9jLE,sBAIE,QAAA,CAGA,UAAA,CAFA,MAAA,CAJA,iBAAA,CAEA,OAAA,CADA,KAAA,CAIA,SnEkkLJ,CoEzkLA,eCAE,eAAA,CACA,sBAAA,CACA,kBrE6kLF,CsEnlLA,IAEE,kBAAA,CAGA,6BAAA,CAJA,oBAAA,CAGA,cAAA,CAEA,W/DggB4B,C+DngB5B,StEylLF,CuE5lLA,SACC,gBvEq/LD,CuEl/LA,yCACC,gBACC,oBAAA,CACA,eAAA,CACA,iBAAA,CACA,gBAAA,CACA,UvEq/LA,CuEn/LD,sBAGC,UAAA,CAFA,UAAA,CACA,avEs/LA,CACF,CwE/7LA,cACI,YAAA,CAGA,+BACI,CAHJ,0BAAA,CACA,iCxEqyRJ,CwE/xRI,6BACI,WAAA,CChFR,iBAAA,CAAA,czEi3RA,CwE/xRI,8BACI,WAAA,CCnFR,iBAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,czEo3RA,CwE/xRI,8BCrFJ,mBAAA,CDsFQ,WAAA,CCtFR,iBAAA,CAAA,iBAAA,CAAA,iBAAA,CAAA,cAAA,CAAA,czEu3RA,CwE9xRA,oDACI,cAGI,+BACA,CAHA,6BAAA,CACA,4BxEkyRN,CACF,CwE5xRA,8BACI,cAGI,2BAAA,CAFA,iCAAA,CACA,uBxE+xRN,CACF,CEljRA,kBACI,gKFmrTJ,C0ExgUA,KACI,mCxE0OQ,CwEzOR,cxEiPK,CwEjPL,c1E2gUJ,C0EzgUA,0CAMI,sCxE8NW,CwE7NX,+B1EihUJ,C0E9gUA,OACI,4B1EihUJ,C0E5gUA,EACI,gB1E+gUJ,C0E5gUA,MAEI,e1E+gUJ,C0ErgUA,kBAII,mC1EwgUJ,C2E9iUA,KACC,8B3EijUD,C2E/iUA,MAEC,4B3EojUD,C2EhjUA,mDAFC,kBAAA,CADA,iCzEkOS,CyEpOT,czE6OQ,CyE7OR,c3EikUD,C2EtjUA,kPAIC,8BAAA,CAEA,iBzEwMe,CyEzMf,iBAAA,CAHA,ezE8Oe,CyE7Of,gBAAA,CAFA,oB3E8kUD,C2ErkUC,wCACC,+PAAA,CACA,yE3E0kUF,C2EtkUA,kMACC,U3EslUD,C2E9kUA,6CAMC,qB3EilUD,C2ExkUA,aAIC,8BAAA,CAFA,WAAA,CAAA,aAAA,CACA,SAAA,CAFA,UAAA,CAAA,Y3E8kUD,C2EzkUA,6BAEC,kB3E4kUD,C2ExjUA,gDAMC,iBzEoIe,CyErIf,U3E2jUD,C2EvjUA,SAGC,6BAAA,CADA,cAAA,CADA,kB3E4jUD,C4E9oUA,MACC,iC1E4NS,C0E3NT,c1EoOQ,C0EpOR,c5EyvUD,C4ExvUC,cACC,a5E0vUF,C4EvvUA,MAEC,oBAAA,CACA,gB5E0vUD,C4ExvUA,MACC,4B1E+NW,C0E9NX,sB5E2vUD,C4EzvUA,MACC,e5E4vUD,C4E1vUA,cAEC,kB1EkNS,C0ElNT,wB1EkNS,C0EjNT,sB5E6vUD,C6E5xUC,qBACC,6C7EyoWF,C6EvoWC,kBACC,U7EyoWF,C6EtoWC,yBACC,a7EwoWF,C8EppWA,iBAEC,iB9E+1WD,C+E/1WC,oBAEC,e/Ek2WF,C+Eh2WC,iCACC,mC/Ek2WF,C+Eh2WC,aACC,uC/Ek2WF,C+E/1WE,0CACC,sB/Ei2WH,CgF92WA,KAEC,iC9EuOS,C8EtOT,8B9EsPa,C8ExPb,kBhF4zXD,CgFtzXA,WAEC,4BAAA,CACA,wBAAA,CAFA,4BhF2zXD,CgFxzXC,iBACC,6FhF0zXF,CgFtzXA,WAEC,gIAAA,CADA,oHhF0zXD,CgFxzXC,iBAEC,gIAAA,CADA,wHhF2zXF,CgFrzXA,YACC,wIhFwzXD,CgFvzXC,kBACC,oIhFyzXF,CgFrzXA,YACC,+ChFwzXD,CgFrzXA,kBACC,6ChFwzXD,CiFlxXA,cAGC,2FAAA,CACA,wBAAA,CACA,kBAAA,CAJA,eAAA,CACA,iBjFi2XD,CiF51XC,qBAEC,UAAA,CADA,aAAA,CAGA,0BAAA,CADA,UjF+1XF,CiF31XC,8BAIC,QAAA,CACA,MAAA,CAJA,iBAAA,CAEA,OAAA,CADA,KjFg2XF,CiF11XC,mCACC,+BAAA,CACA,WAAA,CAGA,MAAA,CAEA,QAAA,CADA,OAAA,CAFA,KAAA,CADA,UjFg2XF,CiF11XE,sCAGC,WAAA,CACA,kB/EgEmB,C+E/DnB,sBAAA,CAEA,WAAA,CAEA,iBAAA,CADA,cAAA,CANA,eAAA,CADA,mBAAA,CAKA,UjF+1XH,CiF31XG,6CAEC,8BAAA,CADA,0BjF81XJ,CiFt1XC,+DAKC,mBAAA,CAFA,eAAA,CAGA,wBAAA,CAGA,QAAA,CAFA,eAAA,CACA,OjFs1XF,CiFj1XE,uCADD,8BAEE,ejFo1XD,CiFl1XC,qCACC,0BjFo1XF,CiFj1XC,8CACC,SjFm1XF,CiFj1XE,6DAEC,WAAA,CACA,eAAA,CAFA,UjFq1XH,CiFl1XG,oEAMC,UAAA,CALA,oBAAA,CAGA,gBAAA,CACA,0BAAA,CAFA,SjFu1XJ,CiFl1XG,+DACC,UjFo1XJ,CiF/0XC,+DACC,SjFi1XF,CiF/0XC,mDAIC,QAAA,CAHA,YAAA,CACA,qBAAA,CACA,WAAA,CAMA,SAAA,CAFA,eAAA,CADA,OAAA,CADA,KAAA,CAGA,SjFk1XF,CiF/0XE,sDAKC,kIAAA,CAUA,gIAAA,CAXA,eAAA,CAEA,aAAA,CAJA,YAAA,CASA,qBAAA,CAMA,iBAAA,CARA,WAAA,CASA,QAAA,CARA,kBAAA,CAHA,iBAAA,CASA,eAAA,CAbA,aAAA,CAUA,8CAAA,CACA,iDAAA,CAFA,yCAAA,CAXA,UjFi2XH,CiF/0XG,kEACC,YjFi1XJ,CiF90XG,iEACC,ejFg1XJ,CiF70XG,6DACC,mIAAA,CAEA,qCAAA,CADA,UAAA,CAEA,kBjF+0XJ,CACF,CiFz0XA,8CAeC,4BAAA,CAJA,QAAA,CAEA,iBA7J4B,CA0J5B,MAAA,CAHA,cAAA,CAAA,cAAA,CACA,iBAAA,CAMA,iBAAA,CALA,KAAA,CAGA,SjF00XD,CiFn1XE,uCADD,wEAEE,YjFu1XD,CiF31XF,8CAiBE,SjFg1XA,CALF,CiFz0XC,wCAnBD,8CAoBE,QjFm1XA,CACF,CiFj1XC,oHAGC,mBAAA,CADA,SAAA,CAEA,oBjFo1XF,CiFh1XC,sDAKC,oBAAA,CAFA,gBAAA,CAFA,iBAAA,CACA,OAAA,CAEA,SjFo1XF,CiF90XC,2BACC,QAAA,CACA,iBjFi1XF,CiF70XA,uBAEC,SAAA,CACA,OjF+0XD,CiF90XC,2BAEC,kBAAA,CADA,SjFi1XF,CiF30XA,uCAIE,wDAIC,kBAAA,CAFA,eAAA,CACA,mBAAA,CAFA,cjF+0XD,CiFx0XD,2BACC,oBjF00XA,CiFv0XD,2BACC,qBjFy0XA,CACF,CkF5mYC,gCACO,WAAA,CACA,SlF8mYR,CkF5mYC,gCACC,SAAA,CACA,WlF+mYF,CkF7mYC,oCACC,SAAA,CACA,WlFgnYF,CkF5mYA,QACC,qClF+mYD,CkF7mYA,eACC,iClFgnYD,CkF9mYA,UAEC,mBhF+LW,CgF9LX,oBlFgnYD,CkF9mYA,mCAAmC,alFknYnC,CkFhnYA,uCACC,YlFmnYD,CkFjnYA,oCACC,alFonYD,CkFhnYC,wEAGC,qBAAA,CADA,wBAAA,CADA,8BAxCa,CA2Cb,gBlFmnYF,CkFjnYC,uCAPD,0BASE,qCAAA,CADA,kClFqnYA,CkFnnYA,wEAGC,qBAAA,CADA,wBAAA,CADA,8BAjDY,CAoDZ,gBlFqnYD,CACF,CkFhnYC,wCADD,sCAGE,qCAAA,CADA,kClFqnYA,CkFlnYC,oKACA,alFonYD,CkFlnYA,gGAGC,qBAAA,CADA,wBAAA,CADA,8BAlEY,CAqEZ,gBlFonYD,CkFlnYE,oYACC,alFonYH,CACF,CkF/mYA,wCACC,oBACC,alFknYA,CACF,CkF/mYA,eACC,kIlFinYD,CkFhnYC,kDAEC,8BAAA,CADA,UlFmnYF,CkF7mYA,iBACC,clFgnYD,CkF9mYA,uCACA,iBACC,elFinYC,CACF,CkF3mYC,6CAGC,sJA3Gc,CA0Gd,yJA1Gc,CAyGd,sJAzGc,CA4Gd,UlF6mYF,CkF3mYG,8DACC,alF6mYJ,CkF1mYE,mDACC,8BApHY,CAqHX,gBlF4mYJ,CmFjuYC,mCACO,SAAA,CACN,WnFouYF,CoFvuYA,eAMC,oJAAA,CACA,oBAAA,CALA,WAAA,CAMA,UAAA,CAPA,WAAA,CAGA,iBAAA,CADA,WAAA,CAEA,YpFy4ZD,CoFr4ZC,qBAMC,qBAAA,CACA,UAAA,CAFA,eAAA,CAHA,MAAA,CAEA,iBAAA,CAHA,iBAAA,CAEA,UpF24ZF,CoFr4ZC,sBAMC,iFAAA,CACA,QAAA,CAHA,WAAA,CAIA,eAAA,CAPA,iBAAA,CAEA,SAAA,CAMA,iBAAA,CAPA,OAAA,CAGA,UpF24ZF,CoFt4ZE,4BACC,cpFw4ZH,CoFr4ZC,8BACC,QpFu4ZF,CoFr4ZC,sCACC,sBpFu4ZF,CoFp4ZA,YAGC,UAAA,CADA,WAAA,CADA,UpFy4ZD,CoFr4ZA,kBAEC,eAAA,CADA,iBAAA,CAEA,iBpFw4ZD,CoFt4ZA,eASC,kBAAA,CACA,+BAAA,CAFA,0JAAA,CANA,aAAA,CACA,UAAA,CAGA,WAAA,CACA,eAAA,CAFA,qBAAA,CAJA,iBAAA,CAGA,WpF+4ZD,CoFv4ZC,sCACC,oBAAA,CACA,QAAA,CAMA,cAAA,CADA,eAAA,CAJA,eAAA,CACA,eAAA,CACA,sBAAA,CACA,kBpF24ZF,CoFt4ZE,iDAKC,2DAAA,CAHA,oBAAA,CAIA,UAAA,CALA,iBAAA,CAEA,UAAA,CACA,QAAA,CAGA,SpFw4ZH,CoFt4ZE,oDACC,cAAA,CACA,WAAA,CACA,MAAA,CACA,SAAA,CACA,KAAA,CACA,kBAAA,CACA,UpFw4ZH,CoFp4ZA,mBACC,qBAAA,CACA,UAAA,CACA,QAAA,CACA,QAAA,CACA,mBAAA,CACA,SAAA,CACA,iBAAA,CACA,OAAA,CACA,iBAAA,CACA,WpFu4ZD,CoFj4ZA,uBAEC,UAAA,CAEA,WAAA,CAHA,iBAAA,CAEA,WpFq4ZD,CoFj4ZA,qBACC,6CAAA,CACA,WAAA,CACA,kBAAA,CACA,mBAAA,CACA,SAAA,CACA,UpFo4ZD,CoFl4ZA,mBAOC,WAAA,CANA,QAAA,CACA,eAAA,CACA,iBAAA,CACA,iBAAA,CACA,OAAA,CACA,KAAA,CAEA,UpFq4ZD,CoFp4ZC,qCACC,WAAA,CACA,UAAA,CACA,cAAA,CACA,QAAA,CACA,SAAA,CACA,UpFs4ZF,CoFh4ZA,yCACI,WpFo4ZJ,CoFj4ZE,gCACE,cpFo4ZJ,CoFj4ZE,2CAEE,WAAA,CADA,SpFq4ZJ,CoFj4ZE,iDACE,WpFo4ZJ,CoFj4ZE,wCACE,WAAA,CACA,UpFo4ZJ,CoFj4ZE,oCACE,WpFo4ZJ,CoFj4ZE,oEACE,UpFo4ZJ,CoFj4ZE,iDACE,WAAA,CACA,gBpFo4ZJ,CoFj4ZI,wEACE,cpFo4ZN,CoF13ZE,oKAEE,cAAA,CADA,gBAAA,CAEA,gBAAA,CACA,gBpFo4ZJ,CqFtkaA,MACI,kBAAA,CAAA,qBAAA,CACA,yBAAA,CACA,2BAAA,CAAA,8BAAA,CACA,oBAAA,CACA,sDAAA,CACA,sDrFykaJ,CqFvkaI,uCARJ,MASQ,4BAAA,CACA,mBAAA,CACA,yBAAA,CACA,4DrF0kaN,CACF,CqFxkaI,wCAfJ,MAgBQ,4BAAA,CACA,qBrF2kaN,CACF,CqFvkaA,4BAII,YAAA,CACA,qQACI,CAIJ,iRACI,CAVJ,iCAAA,CACA,2BAAA,CACA,UrF6kaJ,CqF9jaI,uCAlBJ,4BAmBQ,kTACI,CAMJ,8NrF2jaN,CACF,CqFtjaI,wCAhCJ,4BAiCQ,+VACI,CAQJ,uNrFijaN,CACF,CqF5iaQ,uCADJ,qDAEQ,kTrF+iaV,CACF,CqFtiaQ,wCAZJ,qDAaQ,+VACI,CAQJ,uNrFiiaV,CACF,CqFxhaI,oGAEI,sBAAA,CACA,mBrF0haR,CqFvhaI,wDACI,2BAAA,CACA,wBrFyhaR,CqFthaI,0DACI,6BAAA,CACA,0BrFwhaR,CqFnhaA,oBACI,mBAAA,CACA,gBrFshaJ,CqFlhaI,6LACI,oCAAA,CACA,gBrFshaR,CqFjhaI,6LACI,oCAAA,CACA,gBrFqhaR,CqFhhaI,oHACI,kBAAA,CACA,erFmhaR,CqFv/ZI,4DAEI,8HACI,8BrFy/ZV,CqFt/ZM,uJAEI,0BrFu/ZV,CqFn/ZM,4HACI,kCrFq/ZV,CACF,CsF5qaA,gBACE,YtFmtbF,CsFjtbA,+BACE,uBAAA,CAAA,0BAAA,CACA,+BAAA,CACA,0BAAA,CACA,6FAAA,CACA,wBAAA,CAAA,0BAAA,CACA,2MACE,CAIF,6StFgtbF,CsFxsbE,uBAnBF,+BAoBI,wBAAA,CAQA,8OACE,CAPF,qPtF2sbF,CACF,CsF9rbE,wBApCF,+BAqCI,wBAAA,CACA,uNtFisbF,CACF,CsFxrbE,sDACE,2KACA,CAIA,uNtFsrbJ,CsF/qbQ,uBAbN,sDAmBQ,sNACE,CANF,6LtFmrbR,CACF,CsFvqbQ,wBA3BN,sDA4BQ,sNtF0qbR,CACF,CsFjqbA,+BAEE,iBAAA,CADA,atFqqbF,CsFnqbE,2CAAY,StFsqbd,CsFrqbE,sDAEE,eAAA,CADA,YAAA,CAEA,UtFuqbJ,CsFrqbE,sDAGE,sBAAA,CADA,mBtFuqbJ,CsFnqbE,iDAGE,iBAAA,CADA,ctFqqbJ,CsFlqbE,+CAEE,eAAA,CADA,YtFqqbJ,CsF/pbA,8DAEE,iBAAA,CADA,iBtFmqbF,CsFjqbE,0EAIE,8BAAA,CAFA,0CAAA,CADA,UAAA,CAKA,OAAA,CADA,uBAAA,CAFA,mCAAA,CAIA,iBAAA,CACA,UtFmqbJ,CsF3pbA,uBAME,0CAAA,CACA,kCAAA,CAAA,0BAAA,CANA,YAAA,CAOA,cAAA,CALA,kBAAA,CADA,cAAA,CAUA,iBAAA,CAEA,mBAAA,CATA,aAAA,CAIA,oBAAA,CACA,sBAAA,CANA,yBAAA,CAAA,yBAAA,CAOA,iBAAA,CAEA,uCtF+pbF,CsF3pbA,4CACE,yBtF8pbF,CsF5pbA,8BACE,iBtF+pbF","file":"../acc_boot.min.css","sourcesContent":["//\n// Headings\n//\n.h1 {\n  @extend h1;\n}\n\n.h2 {\n  @extend h2;\n}\n\n.h3 {\n  @extend h3;\n}\n\n.h4 {\n  @extend h4;\n}\n\n.h5 {\n  @extend h5;\n}\n\n.h6 {\n  @extend h6;\n}\n\n\n.lead {\n  @include font-size($lead-font-size);\n  font-weight: $lead-font-weight;\n}\n\n// Type display classes\n@each $display, $font-size in $display-font-sizes {\n  .display-#{$display} {\n    @include font-size($font-size);\n    font-weight: $display-font-weight;\n    line-height: $display-line-height;\n  }\n}\n\n//\n// Emphasis\n//\n.small {\n  @extend small;\n}\n\n.mark {\n  @extend mark;\n}\n\n//\n// Lists\n//\n\n.list-unstyled {\n  @include list-unstyled();\n}\n\n// Inline turns list items into inline-block\n.list-inline {\n  @include list-unstyled();\n}\n.list-inline-item {\n  display: inline-block;\n\n  &:not(:last-child) {\n    margin-right: $list-inline-padding;\n  }\n}\n\n\n//\n// Misc\n//\n\n// Builds on `abbr`\n.initialism {\n  @include font-size($initialism-font-size);\n  text-transform: uppercase;\n}\n\n// Blockquotes\n.blockquote {\n  margin-bottom: $blockquote-margin-y;\n  @include font-size($blockquote-font-size);\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n}\n\n.blockquote-footer {\n  margin-top: -$blockquote-margin-y;\n  margin-bottom: $blockquote-margin-y;\n  @include font-size($blockquote-footer-font-size);\n  color: $blockquote-footer-color;\n\n  &::before {\n    content: \"\\2014\\00A0\"; // em dash, nbsp\n  }\n}\n","@charset \"UTF-8\";\n/**\n * arches - Global style system focused on utility classes\n * @version v4.1.4x\n * @link https://github.com/ACC-Style/Arches/\n */\n/**  Build Comment: including file /setup/__preheader.scss  **/\n/** SCSS DOC: _preheader.scss **/\n/** SCSS DOC: _helpers.scss **/\n/** SCSS DOC: _utility-css.vars.scss **/\n.carousel-alt.chevron-on .carousel-indicators li.active:before {\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  line-height: 1;\n  font-family: \"Font Awesome 6 Pro\", \"Font Awesome 5 Pro\";\n  font-weight: 900;\n}\n\n/**  Build Comment: This Style Sheet was formatted to work best with the inclusion of Bootstrap ^5.1.0   **/\n/**  Build Comment: Set Active Class  **/\n/** SCSS DOC: __brand.base.scss **/\n/**  Colors  **/\n/** SCSS DOC: _colors.scss **/\n/** Setting link color variables in scss **/\n/*\n\nLink Colors: Light\n\nLink colors of a lighter shade in all of its states, default, hover, visited. Typically used to enhance visibility on dark backgrounds.\n\n$link-color-dark\t\t\t- #126657; Link Color dark\t\t\t\n$link-color-dark--hover\t- #051f1a; Link Color dark--hover\t\n$link-color-dark--visited\t- #42665f; Link Color dark--visited\t\n\nWeight:2\n\nStyleguide DesignBase.Colors.LinksLight\n */\n/*\n\nLink Colors\n\nLink colors  in all of its states, default, hover, visited.\n\n\n$link-color-light\t\t\t- #8cebda; Link Color light\t\t\t\n$link-color-light--hover\t- #e8fbf8; Link Color light--hover\t\n$link-color-light--visited\t- #84afa7; Link Color light--visited\t\n$link-color-dark\t\t\t- #126657; Link Color dark\t\t\t\n$link-color-dark--hover\t- #051f1a; Link Color dark--hover\t\n$link-color-dark--visited\t- #42665f; Link Color dark--visited\t\n\nWeight:1\n\nStyleguide DesignBase.Colors.Links\n */\n/**  Fonts  **/\n/* Define the \"system\" font family */\n@font-face {\n  font-family: system;\n  font-style: normal;\n  font-weight: 300;\n  src: local(\".SFNSText-Light\"), local(\".HelveticaNeueDeskInterface-Light\"), local(\".LucidaGrandeUI\"), local(\"Ubuntu Light\"), local(\"Segoe UI Light\"), local(\"Roboto-Light\"), local(\"DroidSans\"), local(\"Tahoma\");\n}\nhtml {\n  -webkit-font-smoothing: antialiased;\n  -webkit-line-break: after-white-space;\n  -webkit-locale: \"en\";\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  line-break: white-space;\n}\n\n/**  Textures  **/\n/**  logos  **/\n/** SCSS DOC: __brand.acc.scss **/\n/**  ACC Brands    *********************************/\n:root {\n  --code-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.05), calc(var(--accent-l) - var(--accent-l) * 0.5), 1);\n}\n\n/**  Build Comment: Overlay and alter for acc Branding 4.1.4x  **/\n/** SCSS DOC:_brand.compile.scss **/\n/** SCSS DOC: _root.cssvars.scss **/\n:root {\n  --primary-h: 193.288590604deg;\n  --primary-s: 74.8743718593%;\n  --primary-l: 39.0196078431%;\n  --primary: hsl( var(--primary-h),var(--primary-s),var(--primary-l) );\n  --secondary-h: 223.6363636364deg;\n  --secondary-s: 5.069124424%;\n  --secondary-l: 42.5490196078%;\n  --secondary: hsl( var(--secondary-h),var(--secondary-s),var(--secondary-l) );\n  --success-h: 137.8625954198deg;\n  --success-s: 90.3448275862%;\n  --success-l: 28.431372549%;\n  --success: hsl( var(--success-h),var(--success-s),var(--success-l) );\n  --shade-h: 0deg;\n  --shade-s: 0.826446281%;\n  --shade-l: 52.5490196078%;\n  --shade: hsl( var(--shade-h),var(--shade-s),var(--shade-l) );\n  --warning-h: 33.8613861386deg;\n  --warning-s: 86.3247863248%;\n  --warning-l: 45.8823529412%;\n  --warning: hsl( var(--warning-h),var(--warning-s),var(--warning-l) );\n  --alert-h: 0deg;\n  --alert-s: 78.9473684211%;\n  --alert-l: 48.431372549%;\n  --alert: hsl( var(--alert-h),var(--alert-s),var(--alert-l) );\n  --navigation-h: 221.8791946309deg;\n  --navigation-s: 63.4042553191%;\n  --navigation-l: 46.0784313725%;\n  --navigation: hsl( var(--navigation-h),var(--navigation-s),var(--navigation-l) );\n  --accent-h: 167.2340425532deg;\n  --accent-s: 76.2162162162%;\n  --accent-l: 36.2745098039%;\n  --accent: hsl( var(--accent-h),var(--accent-s),var(--accent-l) );\n  --info-h: 31.3043478261deg;\n  --info-s: 11.1111111111%;\n  --info-l: 59.4117647059%;\n  --info: hsl( var(--info-h),var(--info-s),var(--info-l) );\n  --highlight-h: 265.8536585366deg;\n  --highlight-s: 48.2352941176%;\n  --highlight-l: 50%;\n  --highlight: hsl( var(--highlight-h),var(--highlight-s),var(--highlight-l) );\n  --acc-h: 206.9491525424deg;\n  --acc-s: 100%;\n  --acc-l: 23.137254902%;\n  --acc: hsl( var(--acc-h),var(--acc-s),var(--acc-l) );\n  --link-color-light-h:169.2857142857deg;\n  --link-color-light-s:70%;\n  --link-color-light-l:73.5294117647%;\n  --link-color-light: hsl( var(--link-color-light-h),var(--link-color-light-s),var(--link-color-light-l) );\n  --link-color-light--hover-h:169.2857142857deg;\n  --link-color-light--hover-s:70%;\n  --link-color-light--hover-l:94.7058823529%;\n  --link-color-light--hover: hsl( var(--link-color-light--hover-h),var(--link-color-light--hover-s),var(--link-color-light--hover-l) );\n  --link-color-light--visited-h:169.2857142857deg;\n  --link-color-light--visited-s:21%;\n  --link-color-light--visited-l:60.2941176471%;\n  --link-color-light--visited: hsl( var(--link-color-light--visited-h),var(--link-color-light--visited-s),var(--link-color-light--visited-l) );\n  --link-color-dark-h:169.2857142857deg;\n  --link-color-dark-s:70%;\n  --link-color-dark-l:23.5294117647%;\n  --link-color-dark: hsl( var(--link-color-dark-h),var(--link-color-dark-s),var(--link-color-dark-l) );\n  --link-color-dark--hover-h:169.2857142857deg;\n  --link-color-dark--hover-s:70%;\n  --link-color-dark--hover-l:7.0588235294%;\n  --link-color-dark--hover: hsl( var(--link-color-dark--hover-h),var(--link-color-dark--hover-s),var(--link-color-dark--hover-l) );\n  --link-color-dark--visited-h:169.2857142857deg;\n  --link-color-dark--visited-s:21%;\n  --link-color-dark--visited-l:32.9411764706%;\n  --link-color-dark--visited: hsl( var(--link-color-dark--visited-h),var(--link-color-dark--visited-s),var(--link-color-dark--visited-l) );\n}\n\n.carousel-alt.chevron-on .carousel-indicators li.active:before {\n  -webkit-font-smoothing: antialiased;\n  display: inline-block;\n  font-style: normal;\n  font-variant: normal;\n  text-rendering: auto;\n  line-height: 1;\n  font-family: \"Font Awesome 6 Pro\", \"Font Awesome 5 Pro\";\n  font-weight: 900;\n}\n\n/**  Build Comment: Render Root Variables  **/\n/** SCSS DOC: __var.output.scss **/\n/** This needs to run later then brand **/\n/** SCSS DOC: _setup.boot.scss **/\n/*!\n * Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n:root {\n  --bs-blue: #2b58c0;\n  --bs-indigo: #6610f2;\n  --bs-purple: #976ad2;\n  --bs-pink: #e83e8c;\n  --bs-red: #dd1a1a;\n  --bs-orange: #da8210;\n  --bs-yellow: #ffc107;\n  --bs-green: #06a022;\n  --bs-teal: #198dae;\n  --bs-cyan: #17a2b8;\n  --bs-white: rgb(251, 247, 247);\n  --bs-gray: #9e9b9b;\n  --bs-gray-dark: #cdc9c9;\n  --bs-gray-100: #2a2929;\n  --bs-gray-200: #414040;\n  --bs-gray-300: #595757;\n  --bs-gray-400: #706e6e;\n  --bs-gray-500: #878585;\n  --bs-gray-600: #9e9b9b;\n  --bs-gray-700: #b5b2b2;\n  --bs-gray-800: #cdc9c9;\n  --bs-gray-900: #e4e0e0;\n  --bs-primary: #198dae;\n  --bs-secondary: #676a72;\n  --bs-success: #078a2e;\n  --bs-accent: #16a385;\n  --bs-info: #a3988c;\n  --bs-warning: #da8210;\n  --bs-alert: #dd1a1a;\n  --bs-primary-rgb: 25, 141, 174;\n  --bs-secondary-rgb: 103, 106, 114;\n  --bs-success-rgb: 7, 138, 46;\n  --bs-accent-rgb: 22, 163, 133;\n  --bs-info-rgb: 163, 152, 140;\n  --bs-warning-rgb: 218, 130, 16;\n  --bs-alert-rgb: 221, 26, 26;\n  --bs-white-rgb: 255, 255, 255;\n  --bs-black-rgb: 19, 18, 18;\n  --bs-body-color-rgb: 19, 18, 18;\n  --bs-body-bg-rgb: 255, 255, 255;\n  --bs-font-sans-serif: \"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));\n  --bs-body-font-family: var(--bs-font-sans-serif);\n  --bs-body-font-size: 1rem;\n  --bs-body-font-weight: 400;\n  --bs-body-line-height: 1.6;\n  --bs-body-color: rgb(19, 18, 18);\n  --bs-body-bg: rgb(255, 255, 255);\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  :root {\n    scroll-behavior: smooth;\n  }\n}\n\nbody {\n  margin: 0;\n  font-family: var(--bs-body-font-family);\n  font-size: var(--bs-body-font-size);\n  font-weight: var(--bs-body-font-weight);\n  line-height: var(--bs-body-line-height);\n  color: var(--bs-body-color);\n  text-align: var(--bs-body-text-align);\n  background-color: var(--bs-body-bg);\n  -webkit-text-size-adjust: 100%;\n  -webkit-tap-highlight-color: rgba(19, 18, 18, 0);\n}\n\nhr {\n  margin: 1rem 0;\n  color: inherit;\n  background-color: currentColor;\n  border: 0;\n  opacity: 0.25;\n}\n\nhr:not([size]) {\n  height: 1px;\n}\n\nh6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {\n  margin-top: 0;\n  margin-bottom: 0.5rem;\n  font-family: \"Maven Pro\",\"Muli\",\"Open Sans\",Verdana,Helvetica,sans-serif;\n  font-weight: 300;\n  line-height: 1.35;\n}\n\nh1, .h1 {\n  font-size: 1.8020324707rem;\n}\n\nh2, .h2 {\n  font-size: 1.6018066406rem;\n}\n\nh3, .h3 {\n  font-size: 1.423828125rem;\n}\n\nh4, .h4 {\n  font-size: 1.265625rem;\n}\n\nh5, .h5 {\n  font-size: 1.125rem;\n}\n\nh6, .h6 {\n  font-size: 1rem;\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nabbr[title],\nabbr[data-bs-original-title] {\n  text-decoration: underline dotted;\n  cursor: help;\n  text-decoration-skip-ink: none;\n}\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\nol,\nul {\n  padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: 700;\n}\n\ndd {\n  margin-bottom: 0.5rem;\n  margin-left: 0;\n}\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\nsmall, .small {\n  font-size: 0.875em;\n}\n\nmark, .mark {\n  padding: 0.2em;\n  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.05), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1), 1);\n}\n\nsub,\nsup {\n  position: relative;\n  font-size: 0.75em;\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\na {\n  color: #198dae;\n  text-decoration: none;\n}\na:hover {\n  color: #12637a;\n  text-decoration: underline;\n}\n\na:not([href]):not([class]), a:not([href]):not([class]):hover {\n  color: inherit;\n  text-decoration: none;\n}\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: var(--bs-font-monospace);\n  font-size: 1em;\n  direction: ltr /* rtl:ignore */;\n  unicode-bidi: bidi-override;\n}\n\npre {\n  display: block;\n  margin-top: 0;\n  margin-bottom: 1rem;\n  overflow: auto;\n  font-size: 0.875em;\n}\npre code {\n  font-size: inherit;\n  color: inherit;\n  word-break: normal;\n}\n\ncode {\n  font-size: 0.875em;\n  color: #e83e8c;\n  word-wrap: break-word;\n}\na > code {\n  color: inherit;\n}\n\nkbd {\n  padding: 0.2rem 0.4rem;\n  font-size: 0.875em;\n  color: rgb(255, 255, 255);\n  background-color: #e7e7e7;\n  border-radius: 3px;\n}\nkbd kbd {\n  padding: 0;\n  font-size: 1em;\n  font-weight: 700;\n}\n\nfigure {\n  margin: 0 0 1rem;\n}\n\nimg,\nsvg {\n  vertical-align: middle;\n}\n\ntable {\n  caption-side: bottom;\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  color: #b8b8b8;\n  text-align: left;\n}\n\nth {\n  text-align: inherit;\n  text-align: -webkit-match-parent;\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n  border-color: inherit;\n  border-style: solid;\n  border-width: 0;\n}\n\nlabel {\n  display: inline-block;\n}\n\nbutton {\n  border-radius: 0;\n}\n\nbutton:focus:not(:focus-visible) {\n  outline: 0;\n}\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n[role=button] {\n  cursor: pointer;\n}\n\nselect {\n  word-wrap: normal;\n}\nselect:disabled {\n  opacity: 1;\n}\n\n[list]::-webkit-calendar-picker-indicator {\n  display: none;\n}\n\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n  -webkit-appearance: button;\n}\nbutton:not(:disabled),\n[type=button]:not(:disabled),\n[type=reset]:not(:disabled),\n[type=submit]:not(:disabled) {\n  cursor: pointer;\n}\n\n::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\ntextarea {\n  resize: vertical;\n}\n\nfieldset {\n  min-width: 0;\n  padding: 0;\n  margin: 0;\n  border: 0;\n}\n\nlegend {\n  float: left;\n  width: 100%;\n  padding: 0;\n  margin-bottom: 0.5rem;\n  font-size: 1.5rem;\n  line-height: inherit;\n}\nlegend + * {\n  clear: left;\n}\n\n::-webkit-datetime-edit-fields-wrapper,\n::-webkit-datetime-edit-text,\n::-webkit-datetime-edit-minute,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-year-field {\n  padding: 0;\n}\n\n::-webkit-inner-spin-button {\n  height: auto;\n}\n\n[type=search] {\n  outline-offset: -2px;\n  -webkit-appearance: textfield;\n}\n\n/* rtl:raw:\n[type=\"tel\"],\n[type=\"url\"],\n[type=\"email\"],\n[type=\"number\"] {\n  direction: ltr;\n}\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n::file-selector-button {\n  font: inherit;\n}\n\n::-webkit-file-upload-button {\n  font: inherit;\n  -webkit-appearance: button;\n}\n\noutput {\n  display: inline-block;\n}\n\niframe {\n  border: 0;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n.lead {\n  font-size: 1.25rem;\n  font-weight: 300;\n}\n\n.display-1 {\n  font-size: 3.2473210255rem;\n  font-weight: 300;\n  line-height: 1.35;\n}\n\n.display-2 {\n  font-size: 2.8865075782rem;\n  font-weight: 300;\n  line-height: 1.35;\n}\n\n.display-3 {\n  font-size: 2.565784514rem;\n  font-weight: 300;\n  line-height: 1.35;\n}\n\n.display-4 {\n  font-size: 2.2806973457rem;\n  font-weight: 300;\n  line-height: 1.35;\n}\n\n.display-5 {\n  font-size: 2.0272865295rem;\n  font-weight: 300;\n  line-height: 1.35;\n}\n\n.display-6 {\n  font-size: 1.8020324707rem;\n  font-weight: 300;\n  line-height: 1.35;\n}\n\n.list-unstyled {\n  padding-left: 0;\n  list-style: none;\n}\n\n.list-inline {\n  padding-left: 0;\n  list-style: none;\n}\n\n.list-inline-item {\n  display: inline-block;\n}\n.list-inline-item:not(:last-child) {\n  margin-right: 0.5rem;\n}\n\n.initialism {\n  font-size: 0.875em;\n  text-transform: uppercase;\n}\n\n.blockquote {\n  margin-bottom: 1rem;\n  font-size: 1.25rem;\n}\n.blockquote > :last-child {\n  margin-bottom: 0;\n}\n\n.blockquote-footer {\n  margin-top: -1rem;\n  margin-bottom: 1rem;\n  font-size: 0.875em;\n  color: #a1a0a0;\n}\n.blockquote-footer::before {\n  content: \"— \";\n}\n\n.img-fluid {\n  max-width: 100%;\n  height: auto;\n}\n\n.img-thumbnail {\n  padding: 0.25rem;\n  background-color: rgb(255, 255, 255);\n  border: 1px solid #5a5959;\n  border-radius: 6px;\n  max-width: 100%;\n  height: auto;\n}\n\n.figure {\n  display: inline-block;\n}\n\n.figure-img {\n  margin-bottom: 0.5rem;\n  line-height: 1;\n}\n\n.figure-caption {\n  font-size: 0.875em;\n  color: #a1a0a0;\n}\n\n.container,\n.container-fluid,\n.container-xl,\n.container-lg,\n.container-md,\n.container-sm {\n  width: 100%;\n  padding-right: var(--bs-gutter-x, 1rem);\n  padding-left: var(--bs-gutter-x, 1rem);\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media (min-width: 460px) {\n  .container-sm, .container {\n    max-width: 540px;\n  }\n}\n@media (min-width: 768px) {\n  .container-md, .container-sm, .container {\n    max-width: 720px;\n  }\n}\n@media (min-width: 1024px) {\n  .container-lg, .container-md, .container-sm, .container {\n    max-width: 960px;\n  }\n}\n@media (min-width: 1200px) {\n  .container-xl, .container-lg, .container-md, .container-sm, .container {\n    max-width: 1140px;\n  }\n}\n.row {\n  --bs-gutter-x: 2rem;\n  --bs-gutter-y: 0;\n  display: flex;\n  flex-wrap: wrap;\n  margin-top: calc(-1 * var(--bs-gutter-y));\n  margin-right: calc(-0.5 * var(--bs-gutter-x));\n  margin-left: calc(-0.5 * var(--bs-gutter-x));\n}\n.row > * {\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 100%;\n  padding-right: calc(var(--bs-gutter-x) * 0.5);\n  padding-left: calc(var(--bs-gutter-x) * 0.5);\n  margin-top: var(--bs-gutter-y);\n}\n\n.col {\n  flex: 1 0 0%;\n}\n\n.row-cols-auto > * {\n  flex: 0 0 auto;\n  width: auto;\n}\n\n.row-cols-1 > * {\n  flex: 0 0 auto;\n  width: 100%;\n}\n\n.row-cols-2 > * {\n  flex: 0 0 auto;\n  width: 50%;\n}\n\n.row-cols-3 > * {\n  flex: 0 0 auto;\n  width: 33.3333333333%;\n}\n\n.row-cols-4 > * {\n  flex: 0 0 auto;\n  width: 25%;\n}\n\n.row-cols-5 > * {\n  flex: 0 0 auto;\n  width: 20%;\n}\n\n.row-cols-6 > * {\n  flex: 0 0 auto;\n  width: 16.6666666667%;\n}\n\n.col-auto {\n  flex: 0 0 auto;\n  width: auto;\n}\n\n.col-1 {\n  flex: 0 0 auto;\n  width: 8.33333333%;\n}\n\n.col-2 {\n  flex: 0 0 auto;\n  width: 16.66666667%;\n}\n\n.col-3 {\n  flex: 0 0 auto;\n  width: 25%;\n}\n\n.col-4 {\n  flex: 0 0 auto;\n  width: 33.33333333%;\n}\n\n.col-5 {\n  flex: 0 0 auto;\n  width: 41.66666667%;\n}\n\n.col-6 {\n  flex: 0 0 auto;\n  width: 50%;\n}\n\n.col-7 {\n  flex: 0 0 auto;\n  width: 58.33333333%;\n}\n\n.col-8 {\n  flex: 0 0 auto;\n  width: 66.66666667%;\n}\n\n.col-9 {\n  flex: 0 0 auto;\n  width: 75%;\n}\n\n.col-10 {\n  flex: 0 0 auto;\n  width: 83.33333333%;\n}\n\n.col-11 {\n  flex: 0 0 auto;\n  width: 91.66666667%;\n}\n\n.col-12 {\n  flex: 0 0 auto;\n  width: 100%;\n}\n\n.offset-1 {\n  margin-left: 8.33333333%;\n}\n\n.offset-2 {\n  margin-left: 16.66666667%;\n}\n\n.offset-3 {\n  margin-left: 25%;\n}\n\n.offset-4 {\n  margin-left: 33.33333333%;\n}\n\n.offset-5 {\n  margin-left: 41.66666667%;\n}\n\n.offset-6 {\n  margin-left: 50%;\n}\n\n.offset-7 {\n  margin-left: 58.33333333%;\n}\n\n.offset-8 {\n  margin-left: 66.66666667%;\n}\n\n.offset-9 {\n  margin-left: 75%;\n}\n\n.offset-10 {\n  margin-left: 83.33333333%;\n}\n\n.offset-11 {\n  margin-left: 91.66666667%;\n}\n\n.g-0,\n.gx-0 {\n  --bs-gutter-x: 0;\n}\n\n.g-0,\n.gy-0 {\n  --bs-gutter-y: 0;\n}\n\n.g-1,\n.gx-1 {\n  --bs-gutter-x: 0.25rem;\n}\n\n.g-1,\n.gy-1 {\n  --bs-gutter-y: 0.25rem;\n}\n\n.g-2,\n.gx-2 {\n  --bs-gutter-x: 0.5rem;\n}\n\n.g-2,\n.gy-2 {\n  --bs-gutter-y: 0.5rem;\n}\n\n.g-3,\n.gx-3 {\n  --bs-gutter-x: 1rem;\n}\n\n.g-3,\n.gy-3 {\n  --bs-gutter-y: 1rem;\n}\n\n.g-4,\n.gx-4 {\n  --bs-gutter-x: 2rem;\n}\n\n.g-4,\n.gy-4 {\n  --bs-gutter-y: 2rem;\n}\n\n.g-5,\n.gx-5 {\n  --bs-gutter-x: 3rem;\n}\n\n.g-5,\n.gy-5 {\n  --bs-gutter-y: 3rem;\n}\n\n@media (min-width: 460px) {\n  .col-sm {\n    flex: 1 0 0%;\n  }\n  .row-cols-sm-auto > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  .row-cols-sm-1 > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  .row-cols-sm-2 > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  .row-cols-sm-3 > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  .row-cols-sm-4 > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  .row-cols-sm-5 > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  .row-cols-sm-6 > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n  .col-sm-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  .col-sm-1 {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  .col-sm-2 {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  .col-sm-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  .col-sm-4 {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  .col-sm-5 {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  .col-sm-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  .col-sm-7 {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  .col-sm-8 {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  .col-sm-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  .col-sm-10 {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  .col-sm-11 {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  .col-sm-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  .offset-sm-0 {\n    margin-left: 0;\n  }\n  .offset-sm-1 {\n    margin-left: 8.33333333%;\n  }\n  .offset-sm-2 {\n    margin-left: 16.66666667%;\n  }\n  .offset-sm-3 {\n    margin-left: 25%;\n  }\n  .offset-sm-4 {\n    margin-left: 33.33333333%;\n  }\n  .offset-sm-5 {\n    margin-left: 41.66666667%;\n  }\n  .offset-sm-6 {\n    margin-left: 50%;\n  }\n  .offset-sm-7 {\n    margin-left: 58.33333333%;\n  }\n  .offset-sm-8 {\n    margin-left: 66.66666667%;\n  }\n  .offset-sm-9 {\n    margin-left: 75%;\n  }\n  .offset-sm-10 {\n    margin-left: 83.33333333%;\n  }\n  .offset-sm-11 {\n    margin-left: 91.66666667%;\n  }\n  .g-sm-0,\n  .gx-sm-0 {\n    --bs-gutter-x: 0;\n  }\n  .g-sm-0,\n  .gy-sm-0 {\n    --bs-gutter-y: 0;\n  }\n  .g-sm-1,\n  .gx-sm-1 {\n    --bs-gutter-x: 0.25rem;\n  }\n  .g-sm-1,\n  .gy-sm-1 {\n    --bs-gutter-y: 0.25rem;\n  }\n  .g-sm-2,\n  .gx-sm-2 {\n    --bs-gutter-x: 0.5rem;\n  }\n  .g-sm-2,\n  .gy-sm-2 {\n    --bs-gutter-y: 0.5rem;\n  }\n  .g-sm-3,\n  .gx-sm-3 {\n    --bs-gutter-x: 1rem;\n  }\n  .g-sm-3,\n  .gy-sm-3 {\n    --bs-gutter-y: 1rem;\n  }\n  .g-sm-4,\n  .gx-sm-4 {\n    --bs-gutter-x: 2rem;\n  }\n  .g-sm-4,\n  .gy-sm-4 {\n    --bs-gutter-y: 2rem;\n  }\n  .g-sm-5,\n  .gx-sm-5 {\n    --bs-gutter-x: 3rem;\n  }\n  .g-sm-5,\n  .gy-sm-5 {\n    --bs-gutter-y: 3rem;\n  }\n}\n@media (min-width: 768px) {\n  .col-md {\n    flex: 1 0 0%;\n  }\n  .row-cols-md-auto > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  .row-cols-md-1 > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  .row-cols-md-2 > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  .row-cols-md-3 > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  .row-cols-md-4 > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  .row-cols-md-5 > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  .row-cols-md-6 > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n  .col-md-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  .col-md-1 {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  .col-md-2 {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  .col-md-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  .col-md-4 {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  .col-md-5 {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  .col-md-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  .col-md-7 {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  .col-md-8 {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  .col-md-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  .col-md-10 {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  .col-md-11 {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  .col-md-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  .offset-md-0 {\n    margin-left: 0;\n  }\n  .offset-md-1 {\n    margin-left: 8.33333333%;\n  }\n  .offset-md-2 {\n    margin-left: 16.66666667%;\n  }\n  .offset-md-3 {\n    margin-left: 25%;\n  }\n  .offset-md-4 {\n    margin-left: 33.33333333%;\n  }\n  .offset-md-5 {\n    margin-left: 41.66666667%;\n  }\n  .offset-md-6 {\n    margin-left: 50%;\n  }\n  .offset-md-7 {\n    margin-left: 58.33333333%;\n  }\n  .offset-md-8 {\n    margin-left: 66.66666667%;\n  }\n  .offset-md-9 {\n    margin-left: 75%;\n  }\n  .offset-md-10 {\n    margin-left: 83.33333333%;\n  }\n  .offset-md-11 {\n    margin-left: 91.66666667%;\n  }\n  .g-md-0,\n  .gx-md-0 {\n    --bs-gutter-x: 0;\n  }\n  .g-md-0,\n  .gy-md-0 {\n    --bs-gutter-y: 0;\n  }\n  .g-md-1,\n  .gx-md-1 {\n    --bs-gutter-x: 0.25rem;\n  }\n  .g-md-1,\n  .gy-md-1 {\n    --bs-gutter-y: 0.25rem;\n  }\n  .g-md-2,\n  .gx-md-2 {\n    --bs-gutter-x: 0.5rem;\n  }\n  .g-md-2,\n  .gy-md-2 {\n    --bs-gutter-y: 0.5rem;\n  }\n  .g-md-3,\n  .gx-md-3 {\n    --bs-gutter-x: 1rem;\n  }\n  .g-md-3,\n  .gy-md-3 {\n    --bs-gutter-y: 1rem;\n  }\n  .g-md-4,\n  .gx-md-4 {\n    --bs-gutter-x: 2rem;\n  }\n  .g-md-4,\n  .gy-md-4 {\n    --bs-gutter-y: 2rem;\n  }\n  .g-md-5,\n  .gx-md-5 {\n    --bs-gutter-x: 3rem;\n  }\n  .g-md-5,\n  .gy-md-5 {\n    --bs-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1024px) {\n  .col-lg {\n    flex: 1 0 0%;\n  }\n  .row-cols-lg-auto > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  .row-cols-lg-1 > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  .row-cols-lg-2 > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  .row-cols-lg-3 > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  .row-cols-lg-4 > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  .row-cols-lg-5 > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  .row-cols-lg-6 > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n  .col-lg-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  .col-lg-1 {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  .col-lg-2 {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  .col-lg-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  .col-lg-4 {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  .col-lg-5 {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  .col-lg-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  .col-lg-7 {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  .col-lg-8 {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  .col-lg-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  .col-lg-10 {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  .col-lg-11 {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  .col-lg-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  .offset-lg-0 {\n    margin-left: 0;\n  }\n  .offset-lg-1 {\n    margin-left: 8.33333333%;\n  }\n  .offset-lg-2 {\n    margin-left: 16.66666667%;\n  }\n  .offset-lg-3 {\n    margin-left: 25%;\n  }\n  .offset-lg-4 {\n    margin-left: 33.33333333%;\n  }\n  .offset-lg-5 {\n    margin-left: 41.66666667%;\n  }\n  .offset-lg-6 {\n    margin-left: 50%;\n  }\n  .offset-lg-7 {\n    margin-left: 58.33333333%;\n  }\n  .offset-lg-8 {\n    margin-left: 66.66666667%;\n  }\n  .offset-lg-9 {\n    margin-left: 75%;\n  }\n  .offset-lg-10 {\n    margin-left: 83.33333333%;\n  }\n  .offset-lg-11 {\n    margin-left: 91.66666667%;\n  }\n  .g-lg-0,\n  .gx-lg-0 {\n    --bs-gutter-x: 0;\n  }\n  .g-lg-0,\n  .gy-lg-0 {\n    --bs-gutter-y: 0;\n  }\n  .g-lg-1,\n  .gx-lg-1 {\n    --bs-gutter-x: 0.25rem;\n  }\n  .g-lg-1,\n  .gy-lg-1 {\n    --bs-gutter-y: 0.25rem;\n  }\n  .g-lg-2,\n  .gx-lg-2 {\n    --bs-gutter-x: 0.5rem;\n  }\n  .g-lg-2,\n  .gy-lg-2 {\n    --bs-gutter-y: 0.5rem;\n  }\n  .g-lg-3,\n  .gx-lg-3 {\n    --bs-gutter-x: 1rem;\n  }\n  .g-lg-3,\n  .gy-lg-3 {\n    --bs-gutter-y: 1rem;\n  }\n  .g-lg-4,\n  .gx-lg-4 {\n    --bs-gutter-x: 2rem;\n  }\n  .g-lg-4,\n  .gy-lg-4 {\n    --bs-gutter-y: 2rem;\n  }\n  .g-lg-5,\n  .gx-lg-5 {\n    --bs-gutter-x: 3rem;\n  }\n  .g-lg-5,\n  .gy-lg-5 {\n    --bs-gutter-y: 3rem;\n  }\n}\n@media (min-width: 1200px) {\n  .col-xl {\n    flex: 1 0 0%;\n  }\n  .row-cols-xl-auto > * {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  .row-cols-xl-1 > * {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  .row-cols-xl-2 > * {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  .row-cols-xl-3 > * {\n    flex: 0 0 auto;\n    width: 33.3333333333%;\n  }\n  .row-cols-xl-4 > * {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  .row-cols-xl-5 > * {\n    flex: 0 0 auto;\n    width: 20%;\n  }\n  .row-cols-xl-6 > * {\n    flex: 0 0 auto;\n    width: 16.6666666667%;\n  }\n  .col-xl-auto {\n    flex: 0 0 auto;\n    width: auto;\n  }\n  .col-xl-1 {\n    flex: 0 0 auto;\n    width: 8.33333333%;\n  }\n  .col-xl-2 {\n    flex: 0 0 auto;\n    width: 16.66666667%;\n  }\n  .col-xl-3 {\n    flex: 0 0 auto;\n    width: 25%;\n  }\n  .col-xl-4 {\n    flex: 0 0 auto;\n    width: 33.33333333%;\n  }\n  .col-xl-5 {\n    flex: 0 0 auto;\n    width: 41.66666667%;\n  }\n  .col-xl-6 {\n    flex: 0 0 auto;\n    width: 50%;\n  }\n  .col-xl-7 {\n    flex: 0 0 auto;\n    width: 58.33333333%;\n  }\n  .col-xl-8 {\n    flex: 0 0 auto;\n    width: 66.66666667%;\n  }\n  .col-xl-9 {\n    flex: 0 0 auto;\n    width: 75%;\n  }\n  .col-xl-10 {\n    flex: 0 0 auto;\n    width: 83.33333333%;\n  }\n  .col-xl-11 {\n    flex: 0 0 auto;\n    width: 91.66666667%;\n  }\n  .col-xl-12 {\n    flex: 0 0 auto;\n    width: 100%;\n  }\n  .offset-xl-0 {\n    margin-left: 0;\n  }\n  .offset-xl-1 {\n    margin-left: 8.33333333%;\n  }\n  .offset-xl-2 {\n    margin-left: 16.66666667%;\n  }\n  .offset-xl-3 {\n    margin-left: 25%;\n  }\n  .offset-xl-4 {\n    margin-left: 33.33333333%;\n  }\n  .offset-xl-5 {\n    margin-left: 41.66666667%;\n  }\n  .offset-xl-6 {\n    margin-left: 50%;\n  }\n  .offset-xl-7 {\n    margin-left: 58.33333333%;\n  }\n  .offset-xl-8 {\n    margin-left: 66.66666667%;\n  }\n  .offset-xl-9 {\n    margin-left: 75%;\n  }\n  .offset-xl-10 {\n    margin-left: 83.33333333%;\n  }\n  .offset-xl-11 {\n    margin-left: 91.66666667%;\n  }\n  .g-xl-0,\n  .gx-xl-0 {\n    --bs-gutter-x: 0;\n  }\n  .g-xl-0,\n  .gy-xl-0 {\n    --bs-gutter-y: 0;\n  }\n  .g-xl-1,\n  .gx-xl-1 {\n    --bs-gutter-x: 0.25rem;\n  }\n  .g-xl-1,\n  .gy-xl-1 {\n    --bs-gutter-y: 0.25rem;\n  }\n  .g-xl-2,\n  .gx-xl-2 {\n    --bs-gutter-x: 0.5rem;\n  }\n  .g-xl-2,\n  .gy-xl-2 {\n    --bs-gutter-y: 0.5rem;\n  }\n  .g-xl-3,\n  .gx-xl-3 {\n    --bs-gutter-x: 1rem;\n  }\n  .g-xl-3,\n  .gy-xl-3 {\n    --bs-gutter-y: 1rem;\n  }\n  .g-xl-4,\n  .gx-xl-4 {\n    --bs-gutter-x: 2rem;\n  }\n  .g-xl-4,\n  .gy-xl-4 {\n    --bs-gutter-y: 2rem;\n  }\n  .g-xl-5,\n  .gx-xl-5 {\n    --bs-gutter-x: 3rem;\n  }\n  .g-xl-5,\n  .gy-xl-5 {\n    --bs-gutter-y: 3rem;\n  }\n}\n.table {\n  --bs-table-bg: transparent;\n  --bs-table-accent-bg: transparent;\n  --bs-table-striped-color: rgb(19, 18, 18);\n  --bs-table-striped-bg: rgba(19, 18, 18, 0.05);\n  --bs-table-active-color: rgb(19, 18, 18);\n  --bs-table-active-bg: rgba(19, 18, 18, 0.1);\n  --bs-table-hover-color: rgb(19, 18, 18);\n  --bs-table-hover-bg: rgba(19, 18, 18, 0.075);\n  width: 100%;\n  margin-bottom: 1rem;\n  color: rgb(19, 18, 18);\n  vertical-align: top;\n  border-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.45), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.9), 1);\n}\n.table > :not(caption) > * > * {\n  padding: 0.5rem 0.5rem;\n  background-color: var(--bs-table-bg);\n  border-bottom-width: 1px;\n  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);\n}\n.table > tbody {\n  vertical-align: inherit;\n}\n.table > thead {\n  vertical-align: bottom;\n}\n.table > :not(:first-child) {\n  border-top: 2px solid currentColor;\n}\n\n.caption-top {\n  caption-side: top;\n}\n\n.table-sm > :not(caption) > * > * {\n  padding: 0.25rem 0.25rem;\n}\n\n.table-bordered > :not(caption) > * {\n  border-width: 1px 0;\n}\n.table-bordered > :not(caption) > * > * {\n  border-width: 0 1px;\n}\n\n.table-borderless > :not(caption) > * > * {\n  border-bottom-width: 0;\n}\n.table-borderless > :not(:first-child) {\n  border-top-width: 0;\n}\n\n.table-striped > tbody > tr:nth-of-type(odd) > * {\n  --bs-table-accent-bg: var(--bs-table-striped-bg);\n  color: var(--bs-table-striped-color);\n}\n\n.table-active {\n  --bs-table-accent-bg: var(--bs-table-active-bg);\n  color: var(--bs-table-active-color);\n}\n\n.table-hover > tbody > tr:hover > * {\n  --bs-table-accent-bg: var(--bs-table-hover-bg);\n  color: var(--bs-table-hover-color);\n}\n\n.table-primary {\n  --bs-table-bg: #d1e8ef;\n  --bs-table-striped-bg: #c8dde4;\n  --bs-table-striped-color: rgb(19, 18, 18);\n  --bs-table-active-bg: #bed3d9;\n  --bs-table-active-color: rgb(19, 18, 18);\n  --bs-table-hover-bg: #c3d8de;\n  --bs-table-hover-color: rgb(19, 18, 18);\n  color: rgb(19, 18, 18);\n  border-color: #bed3d9;\n}\n\n.table-secondary {\n  --bs-table-bg: #e1e1e3;\n  --bs-table-striped-bg: #d7d7d9;\n  --bs-table-striped-color: rgb(19, 18, 18);\n  --bs-table-active-bg: #ccccce;\n  --bs-table-active-color: rgb(19, 18, 18);\n  --bs-table-hover-bg: #d2d1d3;\n  --bs-table-hover-color: rgb(19, 18, 18);\n  color: rgb(19, 18, 18);\n  border-color: #ccccce;\n}\n\n.table-success {\n  --bs-table-bg: #cde8d5;\n  --bs-table-striped-bg: #c4ddcb;\n  --bs-table-striped-color: rgb(19, 18, 18);\n  --bs-table-active-bg: #bad3c2;\n  --bs-table-active-color: rgb(19, 18, 18);\n  --bs-table-hover-bg: #bfd8c6;\n  --bs-table-hover-color: rgb(19, 18, 18);\n  color: rgb(19, 18, 18);\n  border-color: #bad3c2;\n}\n\n.table-accent {\n  --bs-table-bg: #d0ede7;\n  --bs-table-striped-bg: #c7e2dc;\n  --bs-table-striped-color: rgb(19, 18, 18);\n  --bs-table-active-bg: #bdd7d2;\n  --bs-table-active-color: rgb(19, 18, 18);\n  --bs-table-hover-bg: #c2ddd7;\n  --bs-table-hover-color: rgb(19, 18, 18);\n  color: rgb(19, 18, 18);\n  border-color: #bdd7d2;\n}\n\n.table-info {\n  --bs-table-bg: #edeae8;\n  --bs-table-striped-bg: #e2dfdd;\n  --bs-table-striped-color: rgb(19, 18, 18);\n  --bs-table-active-bg: #d7d4d3;\n  --bs-table-active-color: rgb(19, 18, 18);\n  --bs-table-hover-bg: #dddad8;\n  --bs-table-hover-color: rgb(19, 18, 18);\n  color: rgb(19, 18, 18);\n  border-color: #d7d4d3;\n}\n\n.table-warning {\n  --bs-table-bg: #f8e6cf;\n  --bs-table-striped-bg: #eddbc6;\n  --bs-table-striped-color: rgb(19, 18, 18);\n  --bs-table-active-bg: #e1d1bc;\n  --bs-table-active-color: rgb(19, 18, 18);\n  --bs-table-hover-bg: #e7d6c1;\n  --bs-table-hover-color: rgb(19, 18, 18);\n  color: rgb(19, 18, 18);\n  border-color: #e1d1bc;\n}\n\n.table-alert {\n  --bs-table-bg: #f8d1d1;\n  --bs-table-striped-bg: #edc7c7;\n  --bs-table-striped-color: rgb(19, 18, 18);\n  --bs-table-active-bg: #e1bebe;\n  --bs-table-active-color: rgb(19, 18, 18);\n  --bs-table-hover-bg: #e7c3c3;\n  --bs-table-hover-color: rgb(19, 18, 18);\n  color: rgb(19, 18, 18);\n  border-color: #e1bebe;\n}\n\n.table-responsive {\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n@media (max-width: 459.98px) {\n  .table-responsive-sm {\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n}\n@media (max-width: 767.98px) {\n  .table-responsive-md {\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n}\n@media (max-width: 1023.98px) {\n  .table-responsive-lg {\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n}\n@media (max-width: 1199.98px) {\n  .table-responsive-xl {\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n}\n.form-label {\n  margin-bottom: 0.5rem;\n}\n\n.col-form-label {\n  padding-top: calc(0.5rem + 1px);\n  padding-bottom: calc(0.5rem + 1px);\n  margin-bottom: 0;\n  font-size: inherit;\n  line-height: 1.6;\n}\n\n.col-form-label-lg {\n  padding-top: calc(0.5rem + 1px);\n  padding-bottom: calc(0.5rem + 1px);\n  font-size: 1.265625rem;\n}\n\n.col-form-label-sm {\n  padding-top: calc(0.25rem + 1px);\n  padding-bottom: calc(0.25rem + 1px);\n  font-size: 0.8888888889rem;\n}\n\n.form-text {\n  margin-top: 0.25rem;\n  font-size: 0.875em;\n  color: #b8b8b8;\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.6;\n  color: rgb(19, 18, 18);\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border: 1px solid #717171;\n  appearance: none;\n  border-radius: 6px;\n}\n.form-control[type=file] {\n  overflow: hidden;\n}\n.form-control[type=file]:not(:disabled):not([readonly]) {\n  cursor: pointer;\n}\n.form-control:focus {\n  color: rgb(19, 18, 18);\n  background-color: rgb(255, 255, 255);\n  border-color: #8cc6d7;\n  outline: 0;\n  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);\n}\n.form-control::-webkit-date-and-time-value {\n  height: 1.6em;\n}\n.form-control::placeholder {\n  color: #a1a0a0;\n  opacity: 1;\n}\n.form-control:disabled, .form-control[readonly] {\n  background-color: #e7e7e7;\n  opacity: 1;\n}\n.form-control::file-selector-button {\n  padding: 0.5rem 1rem;\n  margin: -0.5rem -1rem;\n  margin-inline-end: 1rem;\n  color: rgb(255, 255, 255);\n  background-color: var(--primary);\n  pointer-events: none;\n  border-color: inherit;\n  border-style: solid;\n  border-width: 0;\n  border-inline-end-width: 1px;\n  border-radius: 0;\n}\n.form-control:hover:not(:disabled):not([readonly])::file-selector-button {\n  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.03), calc(var(--primary-l) - var(--primary-l) * 0.3), 1);\n}\n.form-control::-webkit-file-upload-button {\n  padding: 0.5rem 1rem;\n  margin: -0.5rem -1rem;\n  margin-inline-end: 1rem;\n  color: rgb(255, 255, 255);\n  background-color: var(--primary);\n  pointer-events: none;\n  border-color: inherit;\n  border-style: solid;\n  border-width: 0;\n  border-inline-end-width: 1px;\n  border-radius: 0;\n}\n.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {\n  background-color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.03), calc(var(--primary-l) - var(--primary-l) * 0.3), 1);\n}\n\n.form-control-plaintext {\n  display: block;\n  width: 100%;\n  padding: 0.5rem 0;\n  margin-bottom: 0;\n  line-height: 1.6;\n  color: rgb(19, 18, 18);\n  background-color: transparent;\n  border: solid transparent;\n  border-width: 1px 0;\n}\n.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.form-control-sm {\n  min-height: calc(1.6em + 0.5rem + 2px);\n  padding: 0.25rem 0.5rem;\n  font-size: 0.8888888889rem;\n  border-radius: 3px;\n}\n.form-control-sm::file-selector-button {\n  padding: 0.25rem 0.5rem;\n  margin: -0.25rem -0.5rem;\n  margin-inline-end: 0.5rem;\n}\n.form-control-sm::-webkit-file-upload-button {\n  padding: 0.25rem 0.5rem;\n  margin: -0.25rem -0.5rem;\n  margin-inline-end: 0.5rem;\n}\n\n.form-control-lg {\n  min-height: calc(1.6em + 1rem + 2px);\n  padding: 0.5rem 1rem;\n  font-size: 1.265625rem;\n  border-radius: 6px;\n}\n.form-control-lg::file-selector-button {\n  padding: 0.5rem 1rem;\n  margin: -0.5rem -1rem;\n  margin-inline-end: 1rem;\n}\n.form-control-lg::-webkit-file-upload-button {\n  padding: 0.5rem 1rem;\n  margin: -0.5rem -1rem;\n  margin-inline-end: 1rem;\n}\n\ntextarea.form-control {\n  min-height: calc(1.6em + 1rem + 2px);\n}\ntextarea.form-control-sm {\n  min-height: calc(1.6em + 0.5rem + 2px);\n}\ntextarea.form-control-lg {\n  min-height: calc(1.6em + 1rem + 2px);\n}\n\n.form-control-color {\n  width: 3rem;\n  height: auto;\n  padding: 0.5rem;\n}\n.form-control-color:not(:disabled):not([readonly]) {\n  cursor: pointer;\n}\n.form-control-color::-moz-color-swatch {\n  height: 1.6em;\n  border-radius: 6px;\n}\n.form-control-color::-webkit-color-swatch {\n  height: 1.6em;\n  border-radius: 6px;\n}\n\n.form-select {\n  display: block;\n  width: 100%;\n  padding: 0.5rem 3rem 0.5rem 1rem;\n  -moz-padding-start: calc(1rem - 3px);\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.6;\n  color: rgb(19, 18, 18);\n  background-color: rgb(255, 255, 255);\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235a5959' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e\");\n  background-repeat: no-repeat;\n  background-position: right 1rem center;\n  background-size: 16px 12px;\n  border: 1px solid #717171;\n  border-radius: 6px;\n  appearance: none;\n}\n.form-select:focus {\n  border-color: #8cc6d7;\n  outline: 0;\n  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);\n}\n.form-select[multiple], .form-select[size]:not([size=\"1\"]) {\n  padding-right: 1rem;\n  background-image: none;\n}\n.form-select:disabled {\n  color: #e7e7e7;\n  background-color: #898989;\n}\n.form-select:-moz-focusring {\n  color: transparent;\n  text-shadow: 0 0 0 rgb(19, 18, 18);\n}\n\n.form-select-sm {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n  padding-left: 0.5rem;\n  font-size: 0.8888888889rem;\n  border-radius: 3px;\n}\n\n.form-select-lg {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n  padding-left: 1rem;\n  font-size: 1.265625rem;\n  border-radius: 6px;\n}\n\n.form-check {\n  display: block;\n  min-height: 1.6rem;\n  padding-left: 1.5em;\n  margin-bottom: 0.125rem;\n}\n.form-check .form-check-input {\n  float: left;\n  margin-left: -1.5em;\n}\n\n.form-check-input {\n  width: 1em;\n  height: 1em;\n  margin-top: 0.3em;\n  vertical-align: top;\n  background-color: rgb(255, 255, 255);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  border: 1px solid rgba(0, 0, 0, 0.25);\n  appearance: none;\n  color-adjust: exact;\n}\n.form-check-input[type=checkbox] {\n  border-radius: 0.25em;\n}\n.form-check-input[type=radio] {\n  border-radius: 50%;\n}\n.form-check-input:active {\n  filter: brightness(90%);\n}\n.form-check-input:focus {\n  border-color: #8cc6d7;\n  outline: 0;\n  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);\n}\n.form-check-input:checked {\n  background-color: #198dae;\n  border-color: #198dae;\n}\n.form-check-input:checked[type=checkbox] {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgb%28255, 255, 255%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e\");\n}\n.form-check-input:checked[type=radio] {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='rgb%28255, 255, 255%29'/%3e%3c/svg%3e\");\n}\n.form-check-input[type=checkbox]:indeterminate {\n  background-color: #198dae;\n  border-color: #198dae;\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgb%28255, 255, 255%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e\");\n}\n.form-check-input:disabled {\n  pointer-events: none;\n  filter: none;\n  opacity: 0.5;\n}\n.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {\n  opacity: 0.5;\n}\n\n.form-switch {\n  padding-left: 2.5em;\n}\n.form-switch .form-check-input {\n  width: 2em;\n  margin-left: -2.5em;\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e\");\n  background-position: left center;\n  border-radius: 2em;\n}\n.form-switch .form-check-input:focus {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238cc6d7'/%3e%3c/svg%3e\");\n}\n.form-switch .form-check-input:checked {\n  background-position: right center;\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgb%28255, 255, 255%29'/%3e%3c/svg%3e\");\n}\n\n.form-check-inline {\n  display: inline-block;\n  margin-right: 1rem;\n}\n\n.btn-check {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  pointer-events: none;\n}\n.btn-check[disabled] + .btn, .btn-check:disabled + .btn {\n  pointer-events: none;\n  filter: none;\n  opacity: 0.65;\n}\n\n.form-range {\n  width: 100%;\n  height: 1.4rem;\n  padding: 0;\n  background-color: transparent;\n  appearance: none;\n}\n.form-range:focus {\n  outline: 0;\n}\n.form-range:focus::-webkit-slider-thumb {\n  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 0.2rem rgba(25, 141, 174, 0.25);\n}\n.form-range:focus::-moz-range-thumb {\n  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 0.2rem rgba(25, 141, 174, 0.25);\n}\n.form-range::-moz-focus-outer {\n  border: 0;\n}\n.form-range::-webkit-slider-thumb {\n  width: 1rem;\n  height: 1rem;\n  margin-top: -0.25rem;\n  background-color: #198dae;\n  border: 0;\n  border-radius: 1rem;\n  appearance: none;\n}\n.form-range::-webkit-slider-thumb:active {\n  background-color: #badde7;\n}\n.form-range::-webkit-slider-runnable-track {\n  width: 100%;\n  height: 0.5rem;\n  color: transparent;\n  cursor: pointer;\n  background-color: #5a5959;\n  border-color: transparent;\n  border-radius: 1rem;\n}\n.form-range::-moz-range-thumb {\n  width: 1rem;\n  height: 1rem;\n  background-color: #198dae;\n  border: 0;\n  border-radius: 1rem;\n  appearance: none;\n}\n.form-range::-moz-range-thumb:active {\n  background-color: #badde7;\n}\n.form-range::-moz-range-track {\n  width: 100%;\n  height: 0.5rem;\n  color: transparent;\n  cursor: pointer;\n  background-color: #5a5959;\n  border-color: transparent;\n  border-radius: 1rem;\n}\n.form-range:disabled {\n  pointer-events: none;\n}\n.form-range:disabled::-webkit-slider-thumb {\n  background-color: #e7e7e7;\n}\n.form-range:disabled::-moz-range-thumb {\n  background-color: #e7e7e7;\n}\n\n.form-floating {\n  position: relative;\n}\n.form-floating > .form-control,\n.form-floating > .form-select {\n  height: calc(3.5rem + 2px);\n  line-height: 1.25;\n}\n.form-floating > label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  padding: 1rem 1rem;\n  pointer-events: none;\n  border: 1px solid transparent;\n  transform-origin: 0 0;\n}\n.form-floating > .form-control {\n  padding: 1rem 1rem;\n}\n.form-floating > .form-control::placeholder {\n  color: transparent;\n}\n.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {\n  padding-top: 1.625rem;\n  padding-bottom: 0.625rem;\n}\n.form-floating > .form-control:-webkit-autofill {\n  padding-top: 1.625rem;\n  padding-bottom: 0.625rem;\n}\n.form-floating > .form-select {\n  padding-top: 1.625rem;\n  padding-bottom: 0.625rem;\n}\n.form-floating > .form-control:focus ~ label,\n.form-floating > .form-control:not(:placeholder-shown) ~ label,\n.form-floating > .form-select ~ label {\n  opacity: 0.65;\n  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);\n}\n.form-floating > .form-control:-webkit-autofill ~ label {\n  opacity: 0.65;\n  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);\n}\n\n.input-group {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  width: 100%;\n}\n.input-group > .form-control,\n.input-group > .form-select {\n  position: relative;\n  flex: 1 1 auto;\n  width: 1%;\n  min-width: 0;\n}\n.input-group > .form-control:focus,\n.input-group > .form-select:focus {\n  z-index: 3;\n}\n.input-group .btn {\n  position: relative;\n  z-index: 2;\n}\n.input-group .btn:focus {\n  z-index: 3;\n}\n\n.input-group-text {\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.6;\n  color: rgb(19, 18, 18);\n  text-align: center;\n  white-space: nowrap;\n  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.375), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.75), 1);\n  border: 1px solid #717171;\n  border-radius: 6px;\n}\n\n.input-group-lg > .form-control,\n.input-group-lg > .form-select,\n.input-group-lg > .input-group-text,\n.input-group-lg > .btn {\n  padding: 0.5rem 1rem;\n  font-size: 1.265625rem;\n  border-radius: 6px;\n}\n\n.input-group-sm > .form-control,\n.input-group-sm > .form-select,\n.input-group-sm > .input-group-text,\n.input-group-sm > .btn {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.8888888889rem;\n  border-radius: 3px;\n}\n\n.input-group-lg > .form-select,\n.input-group-sm > .form-select {\n  padding-right: 4rem;\n}\n\n.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),\n.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),\n.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {\n  margin-left: -1px;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.valid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.25rem;\n  font-size: 0.875em;\n  color: #078a2e;\n}\n\n.valid-tooltip {\n  position: absolute;\n  top: 100%;\n  z-index: 5;\n  display: none;\n  max-width: 100%;\n  padding: 0.25rem 0.5rem;\n  margin-top: 0.1rem;\n  font-size: 0.8888888889rem;\n  color: rgb(255, 255, 255);\n  background-color: rgba(7, 138, 46, 0.9);\n  border-radius: 6px;\n}\n\n.was-validated :valid ~ .valid-feedback,\n.was-validated :valid ~ .valid-tooltip,\n.is-valid ~ .valid-feedback,\n.is-valid ~ .valid-tooltip {\n  display: block;\n}\n\n.was-validated .form-control:valid, .form-control.is-valid {\n  border-color: #078a2e;\n}\n.was-validated .form-control:valid:focus, .form-control.is-valid:focus {\n  border-color: #078a2e;\n  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.25);\n}\n\n.was-validated .form-select:valid, .form-select.is-valid {\n  border-color: #078a2e;\n}\n.was-validated .form-select:valid:focus, .form-select.is-valid:focus {\n  border-color: #078a2e;\n  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.25);\n}\n\n.was-validated .form-check-input:valid, .form-check-input.is-valid {\n  border-color: #078a2e;\n}\n.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {\n  background-color: #078a2e;\n}\n.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {\n  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.25);\n}\n.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {\n  color: #078a2e;\n}\n\n.form-check-inline .form-check-input ~ .valid-feedback {\n  margin-left: 0.5em;\n}\n\n.was-validated .input-group .form-control:valid, .input-group .form-control.is-valid,\n.was-validated .input-group .form-select:valid,\n.input-group .form-select.is-valid {\n  z-index: 1;\n}\n.was-validated .input-group .form-control:valid:focus, .input-group .form-control.is-valid:focus,\n.was-validated .input-group .form-select:valid:focus,\n.input-group .form-select.is-valid:focus {\n  z-index: 3;\n}\n\n.invalid-feedback {\n  display: none;\n  width: 100%;\n  margin-top: 0.25rem;\n  font-size: 0.875em;\n  color: #dd1a1a;\n}\n\n.invalid-tooltip {\n  position: absolute;\n  top: 100%;\n  z-index: 5;\n  display: none;\n  max-width: 100%;\n  padding: 0.25rem 0.5rem;\n  margin-top: 0.1rem;\n  font-size: 0.8888888889rem;\n  color: rgb(255, 255, 255);\n  background-color: rgba(221, 26, 26, 0.9);\n  border-radius: 6px;\n}\n\n.was-validated :invalid ~ .invalid-feedback,\n.was-validated :invalid ~ .invalid-tooltip,\n.is-invalid ~ .invalid-feedback,\n.is-invalid ~ .invalid-tooltip {\n  display: block;\n}\n\n.was-validated .form-control:invalid, .form-control.is-invalid {\n  border-color: #dd1a1a;\n}\n.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {\n  border-color: #dd1a1a;\n  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.25);\n}\n\n.was-validated .form-select:invalid, .form-select.is-invalid {\n  border-color: #dd1a1a;\n}\n.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {\n  border-color: #dd1a1a;\n  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.25);\n}\n\n.was-validated .form-check-input:invalid, .form-check-input.is-invalid {\n  border-color: #dd1a1a;\n}\n.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {\n  background-color: #dd1a1a;\n}\n.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {\n  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.25);\n}\n.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {\n  color: #dd1a1a;\n}\n\n.form-check-inline .form-check-input ~ .invalid-feedback {\n  margin-left: 0.5em;\n}\n\n.was-validated .input-group .form-control:invalid, .input-group .form-control.is-invalid,\n.was-validated .input-group .form-select:invalid,\n.input-group .form-select.is-invalid {\n  z-index: 2;\n}\n.was-validated .input-group .form-control:invalid:focus, .input-group .form-control.is-invalid:focus,\n.was-validated .input-group .form-select:invalid:focus,\n.input-group .form-select.is-invalid:focus {\n  z-index: 3;\n}\n\n.btn {\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.6;\n  color: rgb(19, 18, 18);\n  text-align: center;\n  vertical-align: middle;\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: 1px solid transparent;\n  padding: 0.5rem 1rem;\n  font-size: 1rem;\n  border-radius: 6px;\n}\n.btn:hover {\n  color: rgb(19, 18, 18);\n  text-decoration: none;\n}\n.btn-check:focus + .btn, .btn:focus {\n  outline: 0;\n  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);\n}\n.btn:disabled, .btn.disabled, fieldset:disabled .btn {\n  pointer-events: none;\n  opacity: 0.65;\n}\n\n.btn-primary {\n  color: rgb(255, 255, 255);\n  background-color: #198dae;\n  border-color: #198dae;\n}\n.btn-primary:hover {\n  color: rgb(255, 255, 255);\n  background-color: #157894;\n  border-color: #14718b;\n}\n.btn-check:focus + .btn-primary, .btn-primary:focus {\n  color: rgb(255, 255, 255);\n  background-color: #157894;\n  border-color: #14718b;\n  box-shadow: 0 0 0 0.2rem rgba(60, 158, 186, 0.5);\n}\n.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {\n  color: rgb(255, 255, 255);\n  background-color: #14718b;\n  border-color: #136a83;\n}\n.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {\n  box-shadow: 0 0 0 0.2rem rgba(60, 158, 186, 0.5);\n}\n.btn-primary:disabled, .btn-primary.disabled {\n  color: rgb(255, 255, 255);\n  background-color: #198dae;\n  border-color: #198dae;\n}\n\n.btn-secondary {\n  color: rgb(255, 255, 255);\n  background-color: #676a72;\n  border-color: #676a72;\n}\n.btn-secondary:hover {\n  color: rgb(255, 255, 255);\n  background-color: #585a61;\n  border-color: #52555b;\n}\n.btn-check:focus + .btn-secondary, .btn-secondary:focus {\n  color: rgb(255, 255, 255);\n  background-color: #585a61;\n  border-color: #52555b;\n  box-shadow: 0 0 0 0.2rem rgba(126, 128, 135, 0.5);\n}\n.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {\n  color: rgb(255, 255, 255);\n  background-color: #52555b;\n  border-color: #4d5056;\n}\n.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {\n  box-shadow: 0 0 0 0.2rem rgba(126, 128, 135, 0.5);\n}\n.btn-secondary:disabled, .btn-secondary.disabled {\n  color: rgb(255, 255, 255);\n  background-color: #676a72;\n  border-color: #676a72;\n}\n\n.btn-success {\n  color: rgb(255, 255, 255);\n  background-color: #078a2e;\n  border-color: #078a2e;\n}\n.btn-success:hover {\n  color: rgb(255, 255, 255);\n  background-color: #067527;\n  border-color: #066e25;\n}\n.btn-check:focus + .btn-success, .btn-success:focus {\n  color: rgb(255, 255, 255);\n  background-color: #067527;\n  border-color: #066e25;\n  box-shadow: 0 0 0 0.2rem rgba(44, 156, 77, 0.5);\n}\n.btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {\n  color: rgb(255, 255, 255);\n  background-color: #066e25;\n  border-color: #056823;\n}\n.btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus {\n  box-shadow: 0 0 0 0.2rem rgba(44, 156, 77, 0.5);\n}\n.btn-success:disabled, .btn-success.disabled {\n  color: rgb(255, 255, 255);\n  background-color: #078a2e;\n  border-color: #078a2e;\n}\n\n.btn-accent {\n  color: rgb(255, 255, 255);\n  background-color: #16a385;\n  border-color: #16a385;\n}\n.btn-accent:hover {\n  color: rgb(255, 255, 255);\n  background-color: #138b71;\n  border-color: #12826a;\n}\n.btn-check:focus + .btn-accent, .btn-accent:focus {\n  color: rgb(255, 255, 255);\n  background-color: #138b71;\n  border-color: #12826a;\n  box-shadow: 0 0 0 0.2rem rgba(57, 177, 151, 0.5);\n}\n.btn-check:checked + .btn-accent, .btn-check:active + .btn-accent, .btn-accent:active, .btn-accent.active, .show > .btn-accent.dropdown-toggle {\n  color: rgb(255, 255, 255);\n  background-color: #12826a;\n  border-color: #117a64;\n}\n.btn-check:checked + .btn-accent:focus, .btn-check:active + .btn-accent:focus, .btn-accent:active:focus, .btn-accent.active:focus, .show > .btn-accent.dropdown-toggle:focus {\n  box-shadow: 0 0 0 0.2rem rgba(57, 177, 151, 0.5);\n}\n.btn-accent:disabled, .btn-accent.disabled {\n  color: rgb(255, 255, 255);\n  background-color: #16a385;\n  border-color: #16a385;\n}\n\n.btn-info {\n  color: rgb(19, 18, 18);\n  background-color: #a3988c;\n  border-color: #a3988c;\n}\n.btn-info:hover {\n  color: rgb(19, 18, 18);\n  background-color: #b1a79d;\n  border-color: #aca298;\n}\n.btn-check:focus + .btn-info, .btn-info:focus {\n  color: rgb(19, 18, 18);\n  background-color: #b1a79d;\n  border-color: #aca298;\n  box-shadow: 0 0 0 0.2rem rgba(141, 132, 122, 0.5);\n}\n.btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {\n  color: rgb(19, 18, 18);\n  background-color: #b5ada3;\n  border-color: #aca298;\n}\n.btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {\n  box-shadow: 0 0 0 0.2rem rgba(141, 132, 122, 0.5);\n}\n.btn-info:disabled, .btn-info.disabled {\n  color: rgb(19, 18, 18);\n  background-color: #a3988c;\n  border-color: #a3988c;\n}\n\n.btn-warning {\n  color: rgb(19, 18, 18);\n  background-color: #da8210;\n  border-color: #da8210;\n}\n.btn-warning:hover {\n  color: rgb(19, 18, 18);\n  background-color: #e09534;\n  border-color: #de8f28;\n}\n.btn-check:focus + .btn-warning, .btn-warning:focus {\n  color: rgb(19, 18, 18);\n  background-color: #e09534;\n  border-color: #de8f28;\n  box-shadow: 0 0 0 0.2rem rgba(188, 113, 16, 0.5);\n}\n.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {\n  color: rgb(19, 18, 18);\n  background-color: #e19b40;\n  border-color: #de8f28;\n}\n.btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {\n  box-shadow: 0 0 0 0.2rem rgba(188, 113, 16, 0.5);\n}\n.btn-warning:disabled, .btn-warning.disabled {\n  color: rgb(19, 18, 18);\n  background-color: #da8210;\n  border-color: #da8210;\n}\n\n.btn-alert {\n  color: rgb(255, 255, 255);\n  background-color: #dd1a1a;\n  border-color: #dd1a1a;\n}\n.btn-alert:hover {\n  color: rgb(255, 255, 255);\n  background-color: #bc1616;\n  border-color: #b11515;\n}\n.btn-check:focus + .btn-alert, .btn-alert:focus {\n  color: rgb(255, 255, 255);\n  background-color: #bc1616;\n  border-color: #b11515;\n  box-shadow: 0 0 0 0.2rem rgba(226, 60, 60, 0.5);\n}\n.btn-check:checked + .btn-alert, .btn-check:active + .btn-alert, .btn-alert:active, .btn-alert.active, .show > .btn-alert.dropdown-toggle {\n  color: rgb(255, 255, 255);\n  background-color: #b11515;\n  border-color: #a61414;\n}\n.btn-check:checked + .btn-alert:focus, .btn-check:active + .btn-alert:focus, .btn-alert:active:focus, .btn-alert.active:focus, .show > .btn-alert.dropdown-toggle:focus {\n  box-shadow: 0 0 0 0.2rem rgba(226, 60, 60, 0.5);\n}\n.btn-alert:disabled, .btn-alert.disabled {\n  color: rgb(255, 255, 255);\n  background-color: #dd1a1a;\n  border-color: #dd1a1a;\n}\n\n.btn-outline-primary {\n  color: #198dae;\n  border-color: #198dae;\n}\n.btn-outline-primary:hover {\n  color: rgb(255, 255, 255);\n  background-color: #198dae;\n  border-color: #198dae;\n}\n.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {\n  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.5);\n}\n.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {\n  color: rgb(255, 255, 255);\n  background-color: #198dae;\n  border-color: #198dae;\n}\n.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {\n  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.5);\n}\n.btn-outline-primary:disabled, .btn-outline-primary.disabled {\n  color: #198dae;\n  background-color: transparent;\n}\n\n.btn-outline-secondary {\n  color: #676a72;\n  border-color: #676a72;\n}\n.btn-outline-secondary:hover {\n  color: rgb(255, 255, 255);\n  background-color: #676a72;\n  border-color: #676a72;\n}\n.btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus {\n  box-shadow: 0 0 0 0.2rem rgba(103, 106, 114, 0.5);\n}\n.btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {\n  color: rgb(255, 255, 255);\n  background-color: #676a72;\n  border-color: #676a72;\n}\n.btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {\n  box-shadow: 0 0 0 0.2rem rgba(103, 106, 114, 0.5);\n}\n.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {\n  color: #676a72;\n  background-color: transparent;\n}\n\n.btn-outline-success {\n  color: #078a2e;\n  border-color: #078a2e;\n}\n.btn-outline-success:hover {\n  color: rgb(255, 255, 255);\n  background-color: #078a2e;\n  border-color: #078a2e;\n}\n.btn-check:focus + .btn-outline-success, .btn-outline-success:focus {\n  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.5);\n}\n.btn-check:checked + .btn-outline-success, .btn-check:active + .btn-outline-success, .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {\n  color: rgb(255, 255, 255);\n  background-color: #078a2e;\n  border-color: #078a2e;\n}\n.btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {\n  box-shadow: 0 0 0 0.2rem rgba(7, 138, 46, 0.5);\n}\n.btn-outline-success:disabled, .btn-outline-success.disabled {\n  color: #078a2e;\n  background-color: transparent;\n}\n\n.btn-outline-accent {\n  color: #16a385;\n  border-color: #16a385;\n}\n.btn-outline-accent:hover {\n  color: rgb(255, 255, 255);\n  background-color: #16a385;\n  border-color: #16a385;\n}\n.btn-check:focus + .btn-outline-accent, .btn-outline-accent:focus {\n  box-shadow: 0 0 0 0.2rem rgba(22, 163, 133, 0.5);\n}\n.btn-check:checked + .btn-outline-accent, .btn-check:active + .btn-outline-accent, .btn-outline-accent:active, .btn-outline-accent.active, .btn-outline-accent.dropdown-toggle.show {\n  color: rgb(255, 255, 255);\n  background-color: #16a385;\n  border-color: #16a385;\n}\n.btn-check:checked + .btn-outline-accent:focus, .btn-check:active + .btn-outline-accent:focus, .btn-outline-accent:active:focus, .btn-outline-accent.active:focus, .btn-outline-accent.dropdown-toggle.show:focus {\n  box-shadow: 0 0 0 0.2rem rgba(22, 163, 133, 0.5);\n}\n.btn-outline-accent:disabled, .btn-outline-accent.disabled {\n  color: #16a385;\n  background-color: transparent;\n}\n\n.btn-outline-info {\n  color: #a3988c;\n  border-color: #a3988c;\n}\n.btn-outline-info:hover {\n  color: rgb(19, 18, 18);\n  background-color: #a3988c;\n  border-color: #a3988c;\n}\n.btn-check:focus + .btn-outline-info, .btn-outline-info:focus {\n  box-shadow: 0 0 0 0.2rem rgba(163, 152, 140, 0.5);\n}\n.btn-check:checked + .btn-outline-info, .btn-check:active + .btn-outline-info, .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {\n  color: rgb(19, 18, 18);\n  background-color: #a3988c;\n  border-color: #a3988c;\n}\n.btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {\n  box-shadow: 0 0 0 0.2rem rgba(163, 152, 140, 0.5);\n}\n.btn-outline-info:disabled, .btn-outline-info.disabled {\n  color: #a3988c;\n  background-color: transparent;\n}\n\n.btn-outline-warning {\n  color: #da8210;\n  border-color: #da8210;\n}\n.btn-outline-warning:hover {\n  color: rgb(19, 18, 18);\n  background-color: #da8210;\n  border-color: #da8210;\n}\n.btn-check:focus + .btn-outline-warning, .btn-outline-warning:focus {\n  box-shadow: 0 0 0 0.2rem rgba(218, 130, 16, 0.5);\n}\n.btn-check:checked + .btn-outline-warning, .btn-check:active + .btn-outline-warning, .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {\n  color: rgb(19, 18, 18);\n  background-color: #da8210;\n  border-color: #da8210;\n}\n.btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {\n  box-shadow: 0 0 0 0.2rem rgba(218, 130, 16, 0.5);\n}\n.btn-outline-warning:disabled, .btn-outline-warning.disabled {\n  color: #da8210;\n  background-color: transparent;\n}\n\n.btn-outline-alert {\n  color: #dd1a1a;\n  border-color: #dd1a1a;\n}\n.btn-outline-alert:hover {\n  color: rgb(255, 255, 255);\n  background-color: #dd1a1a;\n  border-color: #dd1a1a;\n}\n.btn-check:focus + .btn-outline-alert, .btn-outline-alert:focus {\n  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.5);\n}\n.btn-check:checked + .btn-outline-alert, .btn-check:active + .btn-outline-alert, .btn-outline-alert:active, .btn-outline-alert.active, .btn-outline-alert.dropdown-toggle.show {\n  color: rgb(255, 255, 255);\n  background-color: #dd1a1a;\n  border-color: #dd1a1a;\n}\n.btn-check:checked + .btn-outline-alert:focus, .btn-check:active + .btn-outline-alert:focus, .btn-outline-alert:active:focus, .btn-outline-alert.active:focus, .btn-outline-alert.dropdown-toggle.show:focus {\n  box-shadow: 0 0 0 0.2rem rgba(221, 26, 26, 0.5);\n}\n.btn-outline-alert:disabled, .btn-outline-alert.disabled {\n  color: #dd1a1a;\n  background-color: transparent;\n}\n\n.btn-link {\n  font-weight: 400;\n  color: #198dae;\n  text-decoration: none;\n}\n.btn-link:hover {\n  color: #12637a;\n  text-decoration: underline;\n}\n.btn-link:focus {\n  text-decoration: underline;\n}\n.btn-link:disabled, .btn-link.disabled {\n  color: #898989;\n}\n\n.btn-lg, .btn-group-lg > .btn {\n  padding: 0.5rem 1rem;\n  font-size: 1.265625rem;\n  border-radius: 6px;\n}\n\n.btn-sm, .btn-group-sm > .btn {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.8888888889rem;\n  border-radius: 3px;\n}\n\n.fade:not(.show) {\n  opacity: 0;\n}\n\n.collapse:not(.show) {\n  display: none;\n}\n\n.collapsing {\n  height: 0;\n  overflow: hidden;\n}\n.collapsing.collapse-horizontal {\n  width: 0;\n  height: auto;\n}\n\n.dropup,\n.dropend,\n.dropdown,\n.dropstart {\n  position: relative;\n}\n\n.dropdown-toggle {\n  white-space: nowrap;\n}\n.dropdown-toggle::after {\n  display: inline-block;\n  margin-left: 0.255em;\n  vertical-align: 0.255em;\n  content: \"\";\n  border-top: 0.3em solid;\n  border-right: 0.3em solid transparent;\n  border-bottom: 0;\n  border-left: 0.3em solid transparent;\n}\n.dropdown-toggle:empty::after {\n  margin-left: 0;\n}\n\n.dropdown-menu {\n  position: absolute;\n  z-index: 1000;\n  display: none;\n  min-width: 10rem;\n  padding: 0.5rem 0;\n  margin: 0;\n  font-size: 1rem;\n  color: rgb(19, 18, 18);\n  text-align: left;\n  list-style: none;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border: 1px solid rgba(19, 18, 18, 0.15);\n  border-radius: 6px;\n}\n.dropdown-menu[data-bs-popper] {\n  top: 100%;\n  left: 0;\n  margin-top: 0.125rem;\n}\n\n.dropdown-menu-start {\n  --bs-position: start;\n}\n.dropdown-menu-start[data-bs-popper] {\n  right: auto;\n  left: 0;\n}\n\n.dropdown-menu-end {\n  --bs-position: end;\n}\n.dropdown-menu-end[data-bs-popper] {\n  right: 0;\n  left: auto;\n}\n\n@media (min-width: 460px) {\n  .dropdown-menu-sm-start {\n    --bs-position: start;\n  }\n  .dropdown-menu-sm-start[data-bs-popper] {\n    right: auto;\n    left: 0;\n  }\n  .dropdown-menu-sm-end {\n    --bs-position: end;\n  }\n  .dropdown-menu-sm-end[data-bs-popper] {\n    right: 0;\n    left: auto;\n  }\n}\n@media (min-width: 768px) {\n  .dropdown-menu-md-start {\n    --bs-position: start;\n  }\n  .dropdown-menu-md-start[data-bs-popper] {\n    right: auto;\n    left: 0;\n  }\n  .dropdown-menu-md-end {\n    --bs-position: end;\n  }\n  .dropdown-menu-md-end[data-bs-popper] {\n    right: 0;\n    left: auto;\n  }\n}\n@media (min-width: 1024px) {\n  .dropdown-menu-lg-start {\n    --bs-position: start;\n  }\n  .dropdown-menu-lg-start[data-bs-popper] {\n    right: auto;\n    left: 0;\n  }\n  .dropdown-menu-lg-end {\n    --bs-position: end;\n  }\n  .dropdown-menu-lg-end[data-bs-popper] {\n    right: 0;\n    left: auto;\n  }\n}\n@media (min-width: 1200px) {\n  .dropdown-menu-xl-start {\n    --bs-position: start;\n  }\n  .dropdown-menu-xl-start[data-bs-popper] {\n    right: auto;\n    left: 0;\n  }\n  .dropdown-menu-xl-end {\n    --bs-position: end;\n  }\n  .dropdown-menu-xl-end[data-bs-popper] {\n    right: 0;\n    left: auto;\n  }\n}\n.dropup .dropdown-menu[data-bs-popper] {\n  top: auto;\n  bottom: 100%;\n  margin-top: 0;\n  margin-bottom: 0.125rem;\n}\n.dropup .dropdown-toggle::after {\n  display: inline-block;\n  margin-left: 0.255em;\n  vertical-align: 0.255em;\n  content: \"\";\n  border-top: 0;\n  border-right: 0.3em solid transparent;\n  border-bottom: 0.3em solid;\n  border-left: 0.3em solid transparent;\n}\n.dropup .dropdown-toggle:empty::after {\n  margin-left: 0;\n}\n\n.dropend .dropdown-menu[data-bs-popper] {\n  top: 0;\n  right: auto;\n  left: 100%;\n  margin-top: 0;\n  margin-left: 0.125rem;\n}\n.dropend .dropdown-toggle::after {\n  display: inline-block;\n  margin-left: 0.255em;\n  vertical-align: 0.255em;\n  content: \"\";\n  border-top: 0.3em solid transparent;\n  border-right: 0;\n  border-bottom: 0.3em solid transparent;\n  border-left: 0.3em solid;\n}\n.dropend .dropdown-toggle:empty::after {\n  margin-left: 0;\n}\n.dropend .dropdown-toggle::after {\n  vertical-align: 0;\n}\n\n.dropstart .dropdown-menu[data-bs-popper] {\n  top: 0;\n  right: 100%;\n  left: auto;\n  margin-top: 0;\n  margin-right: 0.125rem;\n}\n.dropstart .dropdown-toggle::after {\n  display: inline-block;\n  margin-left: 0.255em;\n  vertical-align: 0.255em;\n  content: \"\";\n}\n.dropstart .dropdown-toggle::after {\n  display: none;\n}\n.dropstart .dropdown-toggle::before {\n  display: inline-block;\n  margin-right: 0.255em;\n  vertical-align: 0.255em;\n  content: \"\";\n  border-top: 0.3em solid transparent;\n  border-right: 0.3em solid;\n  border-bottom: 0.3em solid transparent;\n}\n.dropstart .dropdown-toggle:empty::after {\n  margin-left: 0;\n}\n.dropstart .dropdown-toggle::before {\n  vertical-align: 0;\n}\n\n.dropdown-divider {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid rgba(19, 18, 18, 0.15);\n}\n\n.dropdown-item {\n  display: block;\n  width: 100%;\n  padding: 0.25rem 1rem;\n  clear: both;\n  font-weight: 400;\n  color: #e7e7e7;\n  text-align: inherit;\n  white-space: nowrap;\n  background-color: transparent;\n  border: 0;\n}\n.dropdown-item:hover, .dropdown-item:focus {\n  color: #d0d0d0;\n  text-decoration: none;\n  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.03), calc(var(--accent-l) - var(--accent-l) * 0.3), 1);\n}\n.dropdown-item.active, .dropdown-item:active {\n  color: rgb(255, 255, 255);\n  text-decoration: none;\n  background-color: #198dae;\n}\n.dropdown-item.disabled, .dropdown-item:disabled {\n  color: #898989;\n  pointer-events: none;\n  background-color: transparent;\n}\n\n.dropdown-menu.show {\n  display: block;\n}\n\n.dropdown-header {\n  display: block;\n  padding: 0.5rem 1rem;\n  margin-bottom: 0;\n  font-size: 0.8888888889rem;\n  color: #a1a0a0;\n  white-space: nowrap;\n}\n\n.dropdown-item-text {\n  display: block;\n  padding: 0.25rem 1rem;\n  color: #e7e7e7;\n}\n\n.dropdown-menu-dark {\n  color: #5a5959;\n  background-color: #d0d0d0;\n  border-color: rgba(19, 18, 18, 0.15);\n}\n.dropdown-menu-dark .dropdown-item {\n  color: #5a5959;\n}\n.dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus {\n  color: rgb(255, 255, 255);\n  background-color: rgba(255, 255, 255, 0.15);\n}\n.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {\n  color: rgb(255, 255, 255);\n  background-color: #198dae;\n}\n.dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled {\n  color: #5a5959;\n}\n.dropdown-menu-dark .dropdown-divider {\n  border-color: rgba(19, 18, 18, 0.15);\n}\n.dropdown-menu-dark .dropdown-item-text {\n  color: #5a5959;\n}\n.dropdown-menu-dark .dropdown-header {\n  color: #898989;\n}\n\n.btn-group,\n.btn-group-vertical {\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle;\n}\n.btn-group > .btn,\n.btn-group-vertical > .btn {\n  position: relative;\n  flex: 1 1 auto;\n}\n.btn-group > .btn-check:checked + .btn,\n.btn-group > .btn-check:focus + .btn,\n.btn-group > .btn:hover,\n.btn-group > .btn:focus,\n.btn-group > .btn:active,\n.btn-group > .btn.active,\n.btn-group-vertical > .btn-check:checked + .btn,\n.btn-group-vertical > .btn-check:focus + .btn,\n.btn-group-vertical > .btn:hover,\n.btn-group-vertical > .btn:focus,\n.btn-group-vertical > .btn:active,\n.btn-group-vertical > .btn.active {\n  z-index: 1;\n}\n\n.btn-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n}\n.btn-toolbar .input-group {\n  width: auto;\n}\n\n.btn-group > .btn:not(:first-child),\n.btn-group > .btn-group:not(:first-child) {\n  margin-left: -1px;\n}\n.btn-group > .btn:not(:last-child):not(.dropdown-toggle),\n.btn-group > .btn-group:not(:last-child) > .btn {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.btn-group > .btn:nth-child(n+3),\n.btn-group > :not(.btn-check) + .btn,\n.btn-group > .btn-group:not(:first-child) > .btn {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.dropdown-toggle-split {\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n}\n.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {\n  margin-left: 0;\n}\n.dropstart .dropdown-toggle-split::before {\n  margin-right: 0;\n}\n\n.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {\n  padding-right: 0.375rem;\n  padding-left: 0.375rem;\n}\n\n.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n}\n\n.btn-group-vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n}\n.btn-group-vertical > .btn,\n.btn-group-vertical > .btn-group {\n  width: 100%;\n}\n.btn-group-vertical > .btn:not(:first-child),\n.btn-group-vertical > .btn-group:not(:first-child) {\n  margin-top: -1px;\n}\n.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),\n.btn-group-vertical > .btn-group:not(:last-child) > .btn {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.btn-group-vertical > .btn ~ .btn,\n.btn-group-vertical > .btn-group:not(:first-child) > .btn {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.nav {\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 0;\n  margin-bottom: 0;\n  list-style: none;\n}\n\n.nav-link {\n  display: block;\n  padding: 0.5rem 1rem;\n  color: #198dae;\n}\n.nav-link:hover, .nav-link:focus {\n  color: #12637a;\n  text-decoration: none;\n}\n.nav-link.disabled {\n  color: #898989;\n  pointer-events: none;\n  cursor: default;\n}\n\n.nav-tabs {\n  border-bottom: 1px solid #5a5959;\n}\n.nav-tabs .nav-link {\n  margin-bottom: -1px;\n  background: none;\n  border: 1px solid transparent;\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n}\n.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {\n  border-color: #424141 #424141 #5a5959;\n  isolation: isolate;\n}\n.nav-tabs .nav-link.disabled {\n  color: #898989;\n  background-color: transparent;\n  border-color: transparent;\n}\n.nav-tabs .nav-link.active,\n.nav-tabs .nav-item.show .nav-link {\n  color: #b8b8b8;\n  background-color: rgb(255, 255, 255);\n  border-color: #5a5959 #5a5959 rgb(255, 255, 255);\n}\n.nav-tabs .dropdown-menu {\n  margin-top: -1px;\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.nav-pills .nav-link {\n  background: none;\n  border: 0;\n  border-radius: 6px;\n}\n.nav-pills .nav-link.active,\n.nav-pills .show > .nav-link {\n  color: rgb(255, 255, 255);\n  background-color: #198dae;\n}\n\n.nav-fill > .nav-link,\n.nav-fill .nav-item {\n  flex: 1 1 auto;\n  text-align: center;\n}\n\n.nav-justified > .nav-link,\n.nav-justified .nav-item {\n  flex-basis: 0;\n  flex-grow: 1;\n  text-align: center;\n}\n\n.nav-fill .nav-item .nav-link,\n.nav-justified .nav-item .nav-link {\n  width: 100%;\n}\n\n.tab-content > .tab-pane {\n  display: none;\n}\n.tab-content > .active {\n  display: block;\n}\n\n.navbar {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.navbar > .container,\n.navbar > .container-fluid,\n.navbar > .container-sm,\n.navbar > .container-md,\n.navbar > .container-lg,\n.navbar > .container-xl {\n  display: flex;\n  flex-wrap: inherit;\n  align-items: center;\n  justify-content: space-between;\n}\n.navbar-brand {\n  padding-top: 0.2875rem;\n  padding-bottom: 0.2875rem;\n  margin-right: 1rem;\n  font-size: 1.265625rem;\n  white-space: nowrap;\n}\n.navbar-brand:hover, .navbar-brand:focus {\n  text-decoration: none;\n}\n\n.navbar-nav {\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  margin-bottom: 0;\n  list-style: none;\n}\n.navbar-nav .nav-link {\n  padding-right: 0;\n  padding-left: 0;\n}\n.navbar-nav .dropdown-menu {\n  position: static;\n}\n\n.navbar-text {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.navbar-collapse {\n  flex-basis: 100%;\n  flex-grow: 1;\n  align-items: center;\n}\n\n.navbar-toggler {\n  padding: 0.25rem 0.75rem;\n  font-size: 1.265625rem;\n  line-height: 1;\n  background-color: transparent;\n  border: 1px solid transparent;\n  border-radius: 6px;\n}\n.navbar-toggler:hover {\n  text-decoration: none;\n}\n.navbar-toggler:focus {\n  text-decoration: none;\n  outline: 0;\n  box-shadow: 0 0 0 0.2rem;\n}\n\n.navbar-toggler-icon {\n  display: inline-block;\n  width: 1.5em;\n  height: 1.5em;\n  vertical-align: middle;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 100%;\n}\n\n.navbar-nav-scroll {\n  max-height: var(--bs-scroll-height, 75vh);\n  overflow-y: auto;\n}\n\n@media (min-width: 460px) {\n  .navbar-expand-sm {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n  }\n  .navbar-expand-sm .navbar-nav {\n    flex-direction: row;\n  }\n  .navbar-expand-sm .navbar-nav .dropdown-menu {\n    position: absolute;\n  }\n  .navbar-expand-sm .navbar-nav .nav-link {\n    padding-right: 0.5rem;\n    padding-left: 0.5rem;\n  }\n  .navbar-expand-sm .navbar-nav-scroll {\n    overflow: visible;\n  }\n  .navbar-expand-sm .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n  .navbar-expand-sm .navbar-toggler {\n    display: none;\n  }\n  .navbar-expand-sm .offcanvas-header {\n    display: none;\n  }\n  .navbar-expand-sm .offcanvas {\n    position: inherit;\n    bottom: 0;\n    z-index: 1000;\n    flex-grow: 1;\n    visibility: visible !important;\n    background-color: transparent;\n    border-right: 0;\n    border-left: 0;\n    transform: none;\n  }\n  .navbar-expand-sm .offcanvas-top,\n  .navbar-expand-sm .offcanvas-bottom {\n    height: auto;\n    border-top: 0;\n    border-bottom: 0;\n  }\n  .navbar-expand-sm .offcanvas-body {\n    display: flex;\n    flex-grow: 0;\n    padding: 0;\n    overflow-y: visible;\n  }\n}\n@media (min-width: 768px) {\n  .navbar-expand-md {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n  }\n  .navbar-expand-md .navbar-nav {\n    flex-direction: row;\n  }\n  .navbar-expand-md .navbar-nav .dropdown-menu {\n    position: absolute;\n  }\n  .navbar-expand-md .navbar-nav .nav-link {\n    padding-right: 0.5rem;\n    padding-left: 0.5rem;\n  }\n  .navbar-expand-md .navbar-nav-scroll {\n    overflow: visible;\n  }\n  .navbar-expand-md .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n  .navbar-expand-md .navbar-toggler {\n    display: none;\n  }\n  .navbar-expand-md .offcanvas-header {\n    display: none;\n  }\n  .navbar-expand-md .offcanvas {\n    position: inherit;\n    bottom: 0;\n    z-index: 1000;\n    flex-grow: 1;\n    visibility: visible !important;\n    background-color: transparent;\n    border-right: 0;\n    border-left: 0;\n    transform: none;\n  }\n  .navbar-expand-md .offcanvas-top,\n  .navbar-expand-md .offcanvas-bottom {\n    height: auto;\n    border-top: 0;\n    border-bottom: 0;\n  }\n  .navbar-expand-md .offcanvas-body {\n    display: flex;\n    flex-grow: 0;\n    padding: 0;\n    overflow-y: visible;\n  }\n}\n@media (min-width: 1024px) {\n  .navbar-expand-lg {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n  }\n  .navbar-expand-lg .navbar-nav {\n    flex-direction: row;\n  }\n  .navbar-expand-lg .navbar-nav .dropdown-menu {\n    position: absolute;\n  }\n  .navbar-expand-lg .navbar-nav .nav-link {\n    padding-right: 0.5rem;\n    padding-left: 0.5rem;\n  }\n  .navbar-expand-lg .navbar-nav-scroll {\n    overflow: visible;\n  }\n  .navbar-expand-lg .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n  .navbar-expand-lg .navbar-toggler {\n    display: none;\n  }\n  .navbar-expand-lg .offcanvas-header {\n    display: none;\n  }\n  .navbar-expand-lg .offcanvas {\n    position: inherit;\n    bottom: 0;\n    z-index: 1000;\n    flex-grow: 1;\n    visibility: visible !important;\n    background-color: transparent;\n    border-right: 0;\n    border-left: 0;\n    transform: none;\n  }\n  .navbar-expand-lg .offcanvas-top,\n  .navbar-expand-lg .offcanvas-bottom {\n    height: auto;\n    border-top: 0;\n    border-bottom: 0;\n  }\n  .navbar-expand-lg .offcanvas-body {\n    display: flex;\n    flex-grow: 0;\n    padding: 0;\n    overflow-y: visible;\n  }\n}\n@media (min-width: 1200px) {\n  .navbar-expand-xl {\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n  }\n  .navbar-expand-xl .navbar-nav {\n    flex-direction: row;\n  }\n  .navbar-expand-xl .navbar-nav .dropdown-menu {\n    position: absolute;\n  }\n  .navbar-expand-xl .navbar-nav .nav-link {\n    padding-right: 0.5rem;\n    padding-left: 0.5rem;\n  }\n  .navbar-expand-xl .navbar-nav-scroll {\n    overflow: visible;\n  }\n  .navbar-expand-xl .navbar-collapse {\n    display: flex !important;\n    flex-basis: auto;\n  }\n  .navbar-expand-xl .navbar-toggler {\n    display: none;\n  }\n  .navbar-expand-xl .offcanvas-header {\n    display: none;\n  }\n  .navbar-expand-xl .offcanvas {\n    position: inherit;\n    bottom: 0;\n    z-index: 1000;\n    flex-grow: 1;\n    visibility: visible !important;\n    background-color: transparent;\n    border-right: 0;\n    border-left: 0;\n    transform: none;\n  }\n  .navbar-expand-xl .offcanvas-top,\n  .navbar-expand-xl .offcanvas-bottom {\n    height: auto;\n    border-top: 0;\n    border-bottom: 0;\n  }\n  .navbar-expand-xl .offcanvas-body {\n    display: flex;\n    flex-grow: 0;\n    padding: 0;\n    overflow-y: visible;\n  }\n}\n.navbar-expand {\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n}\n.navbar-expand .navbar-nav {\n  flex-direction: row;\n}\n.navbar-expand .navbar-nav .dropdown-menu {\n  position: absolute;\n}\n.navbar-expand .navbar-nav .nav-link {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n}\n.navbar-expand .navbar-nav-scroll {\n  overflow: visible;\n}\n.navbar-expand .navbar-collapse {\n  display: flex !important;\n  flex-basis: auto;\n}\n.navbar-expand .navbar-toggler {\n  display: none;\n}\n.navbar-expand .offcanvas-header {\n  display: none;\n}\n.navbar-expand .offcanvas {\n  position: inherit;\n  bottom: 0;\n  z-index: 1000;\n  flex-grow: 1;\n  visibility: visible !important;\n  background-color: transparent;\n  border-right: 0;\n  border-left: 0;\n  transform: none;\n}\n.navbar-expand .offcanvas-top,\n.navbar-expand .offcanvas-bottom {\n  height: auto;\n  border-top: 0;\n  border-bottom: 0;\n}\n.navbar-expand .offcanvas-body {\n  display: flex;\n  flex-grow: 0;\n  padding: 0;\n  overflow-y: visible;\n}\n\n.navbar-light .navbar-brand {\n  color: rgba(19, 18, 18, 0.9);\n}\n.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {\n  color: rgba(19, 18, 18, 0.9);\n}\n.navbar-light .navbar-nav .nav-link {\n  color: rgba(19, 18, 18, 0.55);\n}\n.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {\n  color: rgba(19, 18, 18, 0.7);\n}\n.navbar-light .navbar-nav .nav-link.disabled {\n  color: rgba(19, 18, 18, 0.3);\n}\n.navbar-light .navbar-nav .show > .nav-link,\n.navbar-light .navbar-nav .nav-link.active {\n  color: rgba(19, 18, 18, 0.9);\n}\n.navbar-light .navbar-toggler {\n  color: rgba(19, 18, 18, 0.55);\n  border-color: rgba(19, 18, 18, 0.1);\n}\n.navbar-light .navbar-toggler-icon {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2819, 18, 18, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\");\n}\n.navbar-light .navbar-text {\n  color: rgba(19, 18, 18, 0.55);\n}\n.navbar-light .navbar-text a,\n.navbar-light .navbar-text a:hover,\n.navbar-light .navbar-text a:focus {\n  color: rgba(19, 18, 18, 0.9);\n}\n\n.navbar-dark .navbar-brand {\n  color: rgb(255, 255, 255);\n}\n.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {\n  color: rgb(255, 255, 255);\n}\n.navbar-dark .navbar-nav .nav-link {\n  color: white;\n}\n.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {\n  color: var(--acc);\n}\n.navbar-dark .navbar-nav .nav-link.disabled {\n  color: rgba(255, 255, 255, 0.25);\n}\n.navbar-dark .navbar-nav .show > .nav-link,\n.navbar-dark .navbar-nav .nav-link.active {\n  color: rgb(255, 255, 255);\n}\n.navbar-dark .navbar-toggler {\n  color: white;\n  border-color: rgba(255, 255, 255, 0.1);\n}\n.navbar-dark .navbar-toggler-icon {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\");\n}\n.navbar-dark .navbar-text {\n  color: white;\n}\n.navbar-dark .navbar-text a,\n.navbar-dark .navbar-text a:hover,\n.navbar-dark .navbar-text a:focus {\n  color: rgb(255, 255, 255);\n}\n\n.card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  word-wrap: break-word;\n  background-color: rgb(255, 255, 255);\n  background-clip: border-box;\n  border: 1px solid rgba(19, 18, 18, 0.125);\n  border-radius: 6px;\n}\n.card > hr {\n  margin-right: 0;\n  margin-left: 0;\n}\n.card > .list-group {\n  border-top: inherit;\n  border-bottom: inherit;\n}\n.card > .list-group:first-child {\n  border-top-width: 0;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n}\n.card > .list-group:last-child {\n  border-bottom-width: 0;\n  border-bottom-right-radius: 5px;\n  border-bottom-left-radius: 5px;\n}\n.card > .card-header + .list-group,\n.card > .list-group + .card-footer {\n  border-top: 0;\n}\n\n.card-body {\n  flex: 1 1 auto;\n  padding: 1rem 1rem;\n}\n\n.card-title {\n  margin-bottom: 0.5rem;\n}\n\n.card-subtitle {\n  margin-top: -0.25rem;\n  margin-bottom: 0;\n}\n\n.card-text:last-child {\n  margin-bottom: 0;\n}\n\n.card-link:hover {\n  text-decoration: none;\n}\n.card-link + .card-link {\n  margin-left: 1rem;\n}\n\n.card-header {\n  padding: 0.5rem 1rem;\n  margin-bottom: 0;\n  background-color: rgba(19, 18, 18, 0.03);\n  border-bottom: 1px solid rgba(19, 18, 18, 0.125);\n}\n.card-header:first-child {\n  border-radius: 5px 5px 0 0;\n}\n\n.card-footer {\n  padding: 0.5rem 1rem;\n  background-color: rgba(19, 18, 18, 0.03);\n  border-top: 1px solid rgba(19, 18, 18, 0.125);\n}\n.card-footer:last-child {\n  border-radius: 0 0 5px 5px;\n}\n\n.card-header-tabs {\n  margin-right: -0.5rem;\n  margin-bottom: -0.5rem;\n  margin-left: -0.5rem;\n  border-bottom: 0;\n}\n\n.card-header-pills {\n  margin-right: -0.5rem;\n  margin-left: -0.5rem;\n}\n\n.card-img-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  padding: 1rem;\n  border-radius: 5px;\n}\n\n.card-img,\n.card-img-top,\n.card-img-bottom {\n  width: 100%;\n}\n\n.card-img,\n.card-img-top {\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n}\n\n.card-img,\n.card-img-bottom {\n  border-bottom-right-radius: 5px;\n  border-bottom-left-radius: 5px;\n}\n\n.card-group > .card {\n  margin-bottom: 1rem;\n}\n@media (min-width: 460px) {\n  .card-group {\n    display: flex;\n    flex-flow: row wrap;\n  }\n  .card-group > .card {\n    flex: 1 0 0%;\n    margin-bottom: 0;\n  }\n  .card-group > .card + .card {\n    margin-left: 0;\n    border-left: 0;\n  }\n  .card-group > .card:not(:last-child) {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .card-group > .card:not(:last-child) .card-img-top,\n  .card-group > .card:not(:last-child) .card-header {\n    border-top-right-radius: 0;\n  }\n  .card-group > .card:not(:last-child) .card-img-bottom,\n  .card-group > .card:not(:last-child) .card-footer {\n    border-bottom-right-radius: 0;\n  }\n  .card-group > .card:not(:first-child) {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .card-group > .card:not(:first-child) .card-img-top,\n  .card-group > .card:not(:first-child) .card-header {\n    border-top-left-radius: 0;\n  }\n  .card-group > .card:not(:first-child) .card-img-bottom,\n  .card-group > .card:not(:first-child) .card-footer {\n    border-bottom-left-radius: 0;\n  }\n}\n\n.accordion-button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 1rem 1.25rem;\n  font-size: 1rem;\n  color: rgb(19, 18, 18);\n  text-align: left;\n  background-color: rgb(255, 255, 255);\n  border: 0;\n  border-radius: 0;\n  overflow-anchor: none;\n}\n.accordion-button:not(.collapsed) {\n  color: #177f9d;\n  background-color: #e8f4f7;\n  box-shadow: inset 0 -1px 0 rgba(19, 18, 18, 0.125);\n}\n.accordion-button:not(.collapsed)::after {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23177f9d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\");\n  transform: rotate(180deg);\n}\n.accordion-button::after {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  margin-left: auto;\n  content: \"\";\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%2819, 18, 18%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\");\n  background-repeat: no-repeat;\n  background-size: 1.25rem;\n}\n.accordion-button:hover {\n  z-index: 2;\n}\n.accordion-button:focus {\n  z-index: 3;\n  border-color: #8cc6d7;\n  outline: 0;\n  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);\n}\n\n.accordion-header {\n  margin-bottom: 0;\n}\n\n.accordion-item {\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(19, 18, 18, 0.125);\n}\n.accordion-item:first-of-type {\n  border-top-left-radius: 6px;\n  border-top-right-radius: 6px;\n}\n.accordion-item:first-of-type .accordion-button {\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n}\n.accordion-item:not(:first-of-type) {\n  border-top: 0;\n}\n.accordion-item:last-of-type {\n  border-bottom-right-radius: 6px;\n  border-bottom-left-radius: 6px;\n}\n.accordion-item:last-of-type .accordion-button.collapsed {\n  border-bottom-right-radius: 5px;\n  border-bottom-left-radius: 5px;\n}\n.accordion-item:last-of-type .accordion-collapse {\n  border-bottom-right-radius: 6px;\n  border-bottom-left-radius: 6px;\n}\n\n.accordion-body {\n  padding: 1rem 1.25rem;\n}\n\n.accordion-flush .accordion-collapse {\n  border-width: 0;\n}\n.accordion-flush .accordion-item {\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n.accordion-flush .accordion-item:first-child {\n  border-top: 0;\n}\n.accordion-flush .accordion-item:last-child {\n  border-bottom: 0;\n}\n.accordion-flush .accordion-item .accordion-button {\n  border-radius: 0;\n}\n\n.breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0 0;\n  margin-bottom: 1rem;\n  list-style: none;\n}\n\n.breadcrumb-item + .breadcrumb-item {\n  padding-left: 0.5rem;\n}\n.breadcrumb-item + .breadcrumb-item::before {\n  float: left;\n  padding-right: 0.5rem;\n  color: #a1a0a0;\n  content: var(--bs-breadcrumb-divider, \"/\") /* rtl: var(--bs-breadcrumb-divider, \"/\") */;\n}\n.breadcrumb-item.active {\n  color: #a1a0a0;\n}\n\n.pagination {\n  display: flex;\n  padding-left: 0;\n  list-style: none;\n}\n\n.page-link {\n  position: relative;\n  display: block;\n  color: #198dae;\n  background-color: rgb(255, 255, 255);\n  border: 1px solid #5a5959;\n}\n.page-link:hover {\n  z-index: 2;\n  color: #12637a;\n  text-decoration: none;\n  background-color: #424141;\n  border-color: #5a5959;\n}\n.page-link:focus {\n  z-index: 3;\n  color: #12637a;\n  background-color: #424141;\n  outline: 0;\n  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);\n}\n\n.page-item:not(:first-child) .page-link {\n  margin-left: -1px;\n}\n.page-item.active .page-link {\n  z-index: 3;\n  color: rgb(255, 255, 255);\n  background-color: #198dae;\n  border-color: #198dae;\n}\n.page-item.disabled .page-link {\n  color: #898989;\n  pointer-events: none;\n  background-color: #e7e7e7;\n  border-color: #5a5959;\n}\n\n.page-link {\n  padding: 0.375rem 0.75rem;\n}\n\n.page-item:first-child .page-link {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n}\n.page-item:last-child .page-link {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n}\n\n.pagination-lg .page-link {\n  padding: 0.75rem 1.5rem;\n  font-size: 1.265625rem;\n}\n.pagination-lg .page-item:first-child .page-link {\n  border-top-left-radius: 6px;\n  border-bottom-left-radius: 6px;\n}\n.pagination-lg .page-item:last-child .page-link {\n  border-top-right-radius: 6px;\n  border-bottom-right-radius: 6px;\n}\n\n.pagination-sm .page-link {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.8888888889rem;\n}\n.pagination-sm .page-item:first-child .page-link {\n  border-top-left-radius: 3px;\n  border-bottom-left-radius: 3px;\n}\n.pagination-sm .page-item:last-child .page-link {\n  border-top-right-radius: 3px;\n  border-bottom-right-radius: 3px;\n}\n\n.badge {\n  display: inline-block;\n  padding: 0.35em 0.65em;\n  font-size: 0.75em;\n  font-weight: 700;\n  line-height: 1;\n  color: rgb(255, 255, 255);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  border-radius: 6px;\n}\n.badge:empty {\n  display: none;\n}\n\n.btn .badge {\n  position: relative;\n  top: -1px;\n}\n\n.alert {\n  position: relative;\n  padding: 1rem 1rem;\n  margin-bottom: 1rem;\n  border: 1px solid transparent;\n  border-radius: 6px;\n}\n\n.alert-heading {\n  color: inherit;\n}\n\n.alert-link {\n  font-weight: 700;\n}\n\n.alert-dismissible {\n  padding-right: 3rem;\n}\n.alert-dismissible .btn-close {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  padding: 1.25rem 1rem;\n}\n\n.alert-primary {\n  color: #0f5568;\n  background-color: #d1e8ef;\n  border-color: #badde7;\n}\n.alert-primary .alert-link {\n  color: #0c4453;\n}\n\n.alert-secondary {\n  color: #3e4044;\n  background-color: #e1e1e3;\n  border-color: #d1d2d5;\n}\n.alert-secondary .alert-link {\n  color: #323336;\n}\n\n.alert-success {\n  color: #04531c;\n  background-color: #cde8d5;\n  border-color: #b5dcc0;\n}\n.alert-success .alert-link {\n  color: #034216;\n}\n\n.alert-accent {\n  color: #0d6250;\n  background-color: #d0ede7;\n  border-color: #b9e3da;\n}\n.alert-accent .alert-link {\n  color: #0a4e40;\n}\n\n.alert-info {\n  color: #625b54;\n  background-color: #edeae8;\n  border-color: #e3e0dd;\n}\n.alert-info .alert-link {\n  color: #4e4943;\n}\n\n.alert-warning {\n  color: #834e0a;\n  background-color: #f8e6cf;\n  border-color: #f4dab7;\n}\n.alert-warning .alert-link {\n  color: #693e08;\n}\n\n.alert-alert {\n  color: #851010;\n  background-color: #f8d1d1;\n  border-color: #f5baba;\n}\n.alert-alert .alert-link {\n  color: #6a0d0d;\n}\n\n.progress {\n  display: flex;\n  height: 1rem;\n  overflow: hidden;\n  font-size: 0.75rem;\n  background-color: #424141;\n  border-radius: 6px;\n}\n\n.progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: rgb(255, 255, 255);\n  text-align: center;\n  white-space: nowrap;\n  background-color: #198dae;\n}\n\n.progress-bar-striped {\n  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);\n  background-size: 1rem 1rem;\n}\n\n.list-group {\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  margin-bottom: 0;\n  border-radius: 6px;\n}\n\n.list-group-numbered {\n  list-style-type: none;\n  counter-reset: section;\n}\n.list-group-numbered > li::before {\n  content: counters(section, \".\") \". \";\n  counter-increment: section;\n}\n\n.list-group-item-action {\n  width: 100%;\n  color: #b8b8b8;\n  text-align: inherit;\n}\n.list-group-item-action:hover, .list-group-item-action:focus {\n  z-index: 1;\n  color: #b8b8b8;\n  text-decoration: none;\n  background-color: #2b2a2a;\n}\n.list-group-item-action:active {\n  color: rgb(19, 18, 18);\n  background-color: #424141;\n}\n\n.list-group-item {\n  position: relative;\n  display: block;\n  padding: 0.5rem 1rem;\n  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.07), calc(var(--primary-l) - var(--primary-l) * 0.7), 1);\n  background-color: rgb(255, 255, 255);\n  border: 1px solid rgba(19, 18, 18, 0.125);\n}\n.list-group-item:first-child {\n  border-top-left-radius: inherit;\n  border-top-right-radius: inherit;\n}\n.list-group-item:last-child {\n  border-bottom-right-radius: inherit;\n  border-bottom-left-radius: inherit;\n}\n.list-group-item.disabled, .list-group-item:disabled {\n  color: #898989;\n  pointer-events: none;\n  background-color: #e7e7e7;\n}\n.list-group-item.active {\n  z-index: 2;\n  color: rgb(255, 255, 255);\n  background-color: #198dae;\n  border-color: #198dae;\n}\n.list-group-item + .list-group-item {\n  border-top-width: 0;\n}\n.list-group-item + .list-group-item.active {\n  margin-top: -1px;\n  border-top-width: 1px;\n}\n\n.list-group-horizontal {\n  flex-direction: row;\n}\n.list-group-horizontal > .list-group-item:first-child {\n  border-bottom-left-radius: 6px;\n  border-top-right-radius: 0;\n}\n.list-group-horizontal > .list-group-item:last-child {\n  border-top-right-radius: 6px;\n  border-bottom-left-radius: 0;\n}\n.list-group-horizontal > .list-group-item.active {\n  margin-top: 0;\n}\n.list-group-horizontal > .list-group-item + .list-group-item {\n  border-top-width: 1px;\n  border-left-width: 0;\n}\n.list-group-horizontal > .list-group-item + .list-group-item.active {\n  margin-left: -1px;\n  border-left-width: 1px;\n}\n\n@media (min-width: 460px) {\n  .list-group-horizontal-sm {\n    flex-direction: row;\n  }\n  .list-group-horizontal-sm > .list-group-item:first-child {\n    border-bottom-left-radius: 6px;\n    border-top-right-radius: 0;\n  }\n  .list-group-horizontal-sm > .list-group-item:last-child {\n    border-top-right-radius: 6px;\n    border-bottom-left-radius: 0;\n  }\n  .list-group-horizontal-sm > .list-group-item.active {\n    margin-top: 0;\n  }\n  .list-group-horizontal-sm > .list-group-item + .list-group-item {\n    border-top-width: 1px;\n    border-left-width: 0;\n  }\n  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {\n    margin-left: -1px;\n    border-left-width: 1px;\n  }\n}\n@media (min-width: 768px) {\n  .list-group-horizontal-md {\n    flex-direction: row;\n  }\n  .list-group-horizontal-md > .list-group-item:first-child {\n    border-bottom-left-radius: 6px;\n    border-top-right-radius: 0;\n  }\n  .list-group-horizontal-md > .list-group-item:last-child {\n    border-top-right-radius: 6px;\n    border-bottom-left-radius: 0;\n  }\n  .list-group-horizontal-md > .list-group-item.active {\n    margin-top: 0;\n  }\n  .list-group-horizontal-md > .list-group-item + .list-group-item {\n    border-top-width: 1px;\n    border-left-width: 0;\n  }\n  .list-group-horizontal-md > .list-group-item + .list-group-item.active {\n    margin-left: -1px;\n    border-left-width: 1px;\n  }\n}\n@media (min-width: 1024px) {\n  .list-group-horizontal-lg {\n    flex-direction: row;\n  }\n  .list-group-horizontal-lg > .list-group-item:first-child {\n    border-bottom-left-radius: 6px;\n    border-top-right-radius: 0;\n  }\n  .list-group-horizontal-lg > .list-group-item:last-child {\n    border-top-right-radius: 6px;\n    border-bottom-left-radius: 0;\n  }\n  .list-group-horizontal-lg > .list-group-item.active {\n    margin-top: 0;\n  }\n  .list-group-horizontal-lg > .list-group-item + .list-group-item {\n    border-top-width: 1px;\n    border-left-width: 0;\n  }\n  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {\n    margin-left: -1px;\n    border-left-width: 1px;\n  }\n}\n@media (min-width: 1200px) {\n  .list-group-horizontal-xl {\n    flex-direction: row;\n  }\n  .list-group-horizontal-xl > .list-group-item:first-child {\n    border-bottom-left-radius: 6px;\n    border-top-right-radius: 0;\n  }\n  .list-group-horizontal-xl > .list-group-item:last-child {\n    border-top-right-radius: 6px;\n    border-bottom-left-radius: 0;\n  }\n  .list-group-horizontal-xl > .list-group-item.active {\n    margin-top: 0;\n  }\n  .list-group-horizontal-xl > .list-group-item + .list-group-item {\n    border-top-width: 1px;\n    border-left-width: 0;\n  }\n  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {\n    margin-left: -1px;\n    border-left-width: 1px;\n  }\n}\n.list-group-flush {\n  border-radius: 0;\n}\n.list-group-flush > .list-group-item {\n  border-width: 0 0 1px;\n}\n.list-group-flush > .list-group-item:last-child {\n  border-bottom-width: 0;\n}\n\n.list-group-item-primary {\n  color: #051c23;\n  background-color: #d1e8ef;\n}\n.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {\n  color: #051c23;\n  background-color: #bcd1d7;\n}\n.list-group-item-primary.list-group-item-action.active {\n  color: rgb(255, 255, 255);\n  background-color: #051c23;\n  border-color: #051c23;\n}\n\n.list-group-item-secondary {\n  color: #151517;\n  background-color: #e1e1e3;\n}\n.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {\n  color: #151517;\n  background-color: #cbcbcc;\n}\n.list-group-item-secondary.list-group-item-action.active {\n  color: rgb(255, 255, 255);\n  background-color: #151517;\n  border-color: #151517;\n}\n\n.list-group-item-success {\n  color: #011c09;\n  background-color: #cde8d5;\n}\n.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {\n  color: #011c09;\n  background-color: #b9d1c0;\n}\n.list-group-item-success.list-group-item-action.active {\n  color: rgb(255, 255, 255);\n  background-color: #011c09;\n  border-color: #011c09;\n}\n\n.list-group-item-accent {\n  color: #04211b;\n  background-color: #d0ede7;\n}\n.list-group-item-accent.list-group-item-action:hover, .list-group-item-accent.list-group-item-action:focus {\n  color: #04211b;\n  background-color: #bbd5d0;\n}\n.list-group-item-accent.list-group-item-action.active {\n  color: rgb(255, 255, 255);\n  background-color: #04211b;\n  border-color: #04211b;\n}\n\n.list-group-item-info {\n  color: #211e1c;\n  background-color: #edeae8;\n}\n.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {\n  color: #211e1c;\n  background-color: #d5d3d1;\n}\n.list-group-item-info.list-group-item-action.active {\n  color: rgb(255, 255, 255);\n  background-color: #211e1c;\n  border-color: #211e1c;\n}\n\n.list-group-item-warning {\n  color: #2c1a03;\n  background-color: #f8e6cf;\n}\n.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {\n  color: #2c1a03;\n  background-color: #dfcfba;\n}\n.list-group-item-warning.list-group-item-action.active {\n  color: rgb(255, 255, 255);\n  background-color: #2c1a03;\n  border-color: #2c1a03;\n}\n\n.list-group-item-alert {\n  color: #2c0505;\n  background-color: #f8d1d1;\n}\n.list-group-item-alert.list-group-item-action:hover, .list-group-item-alert.list-group-item-action:focus {\n  color: #2c0505;\n  background-color: #dfbcbc;\n}\n.list-group-item-alert.list-group-item-action.active {\n  color: rgb(255, 255, 255);\n  background-color: #2c0505;\n  border-color: #2c0505;\n}\n\n.btn-close {\n  box-sizing: content-box;\n  width: 1em;\n  height: 1em;\n  padding: 0.25em 0.25em;\n  color: rgb(19, 18, 18);\n  background: transparent url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%2819, 18, 18%29'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e\") center/1em auto no-repeat;\n  border: 0;\n  border-radius: 6px;\n  opacity: 0.5;\n}\n.btn-close:hover {\n  color: rgb(19, 18, 18);\n  text-decoration: none;\n  opacity: 0.75;\n}\n.btn-close:focus {\n  outline: 0;\n  box-shadow: 0 0 0 0.2rem rgba(25, 141, 174, 0.25);\n  opacity: 1;\n}\n.btn-close:disabled, .btn-close.disabled {\n  pointer-events: none;\n  user-select: none;\n  opacity: 0.25;\n}\n\n.btn-close-white {\n  filter: invert(1) grayscale(100%) brightness(200%);\n}\n\n.toast {\n  width: 350px;\n  max-width: 100%;\n  font-size: 0.875rem;\n  pointer-events: auto;\n  background-color: rgba(255, 255, 255, 0.85);\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: \"0 1px 10px rgba(0 0 0 / 5%), 0 2px 4px rgba(0 0 0 /15%), 1px 5px 5px rgba(18 56 136 / 5%)\";\n  border-radius: 6px;\n}\n.toast.showing {\n  opacity: 0;\n}\n.toast:not(.show) {\n  display: none;\n}\n\n.toast-container {\n  width: max-content;\n  max-width: 100%;\n  pointer-events: none;\n}\n.toast-container > :not(:last-child) {\n  margin-bottom: 1rem;\n}\n\n.toast-header {\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0.75rem;\n  color: #a1a0a0;\n  background-color: rgba(255, 255, 255, 0.85);\n  background-clip: padding-box;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n}\n.toast-header .btn-close {\n  margin-right: -0.375rem;\n  margin-left: 0.75rem;\n}\n\n.toast-body {\n  padding: 0.75rem;\n  word-wrap: break-word;\n}\n\n.modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1050;\n  display: none;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  outline: 0;\n}\n\n.modal-dialog {\n  position: relative;\n  width: auto;\n  margin: 0.5rem;\n  pointer-events: none;\n}\n.modal.fade .modal-dialog {\n  transform: translate(0, -50px);\n}\n.modal.show .modal-dialog {\n  transform: none;\n}\n.modal.modal-static .modal-dialog {\n  transform: scale(1.02);\n}\n\n.modal-dialog-scrollable {\n  height: calc(100% - 1rem);\n}\n.modal-dialog-scrollable .modal-content {\n  max-height: 100%;\n  overflow: hidden;\n}\n.modal-dialog-scrollable .modal-body {\n  overflow-y: auto;\n}\n\n.modal-dialog-centered {\n  display: flex;\n  align-items: center;\n  min-height: calc(100% - 1rem);\n}\n\n.modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  pointer-events: auto;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border: 1px solid rgba(19, 18, 18, 0.2);\n  border-radius: 6px;\n  outline: 0;\n}\n\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1040;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgb(19, 18, 18);\n}\n.modal-backdrop.fade {\n  opacity: 0;\n}\n.modal-backdrop.show {\n  opacity: 0.5;\n}\n\n.modal-header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1rem;\n  border-bottom: 1px solid hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.45), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.9), 1);\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n}\n.modal-header .btn-close {\n  padding: 0.5rem 0.5rem;\n  margin: -0.5rem -0.5rem -0.5rem auto;\n}\n\n.modal-title {\n  margin-bottom: 0;\n  line-height: 1.6;\n}\n\n.modal-body {\n  position: relative;\n  flex: 1 1 auto;\n  padding: 1rem;\n}\n\n.modal-footer {\n  display: flex;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.75rem;\n  border-top: 1px solid hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.45), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.9), 1);\n  border-bottom-right-radius: 5px;\n  border-bottom-left-radius: 5px;\n}\n.modal-footer > * {\n  margin: 0.25rem;\n}\n\n@media (min-width: 460px) {\n  .modal-dialog {\n    max-width: 500px;\n    margin: 1.75rem auto;\n  }\n  .modal-dialog-scrollable {\n    height: calc(100% - 3.5rem);\n  }\n  .modal-dialog-centered {\n    min-height: calc(100% - 3.5rem);\n  }\n  .modal-sm {\n    max-width: 300px;\n  }\n}\n@media (min-width: 1024px) {\n  .modal-lg,\n  .modal-xl {\n    max-width: 800px;\n  }\n}\n@media (min-width: 1200px) {\n  .modal-xl {\n    max-width: 1140px;\n  }\n}\n.modal-fullscreen {\n  width: 100vw;\n  max-width: none;\n  height: 100%;\n  margin: 0;\n}\n.modal-fullscreen .modal-content {\n  height: 100%;\n  border: 0;\n  border-radius: 0;\n}\n.modal-fullscreen .modal-header {\n  border-radius: 0;\n}\n.modal-fullscreen .modal-body {\n  overflow-y: auto;\n}\n.modal-fullscreen .modal-footer {\n  border-radius: 0;\n}\n\n@media (max-width: 459.98px) {\n  .modal-fullscreen-sm-down {\n    width: 100vw;\n    max-width: none;\n    height: 100%;\n    margin: 0;\n  }\n  .modal-fullscreen-sm-down .modal-content {\n    height: 100%;\n    border: 0;\n    border-radius: 0;\n  }\n  .modal-fullscreen-sm-down .modal-header {\n    border-radius: 0;\n  }\n  .modal-fullscreen-sm-down .modal-body {\n    overflow-y: auto;\n  }\n  .modal-fullscreen-sm-down .modal-footer {\n    border-radius: 0;\n  }\n}\n@media (max-width: 767.98px) {\n  .modal-fullscreen-md-down {\n    width: 100vw;\n    max-width: none;\n    height: 100%;\n    margin: 0;\n  }\n  .modal-fullscreen-md-down .modal-content {\n    height: 100%;\n    border: 0;\n    border-radius: 0;\n  }\n  .modal-fullscreen-md-down .modal-header {\n    border-radius: 0;\n  }\n  .modal-fullscreen-md-down .modal-body {\n    overflow-y: auto;\n  }\n  .modal-fullscreen-md-down .modal-footer {\n    border-radius: 0;\n  }\n}\n@media (max-width: 1023.98px) {\n  .modal-fullscreen-lg-down {\n    width: 100vw;\n    max-width: none;\n    height: 100%;\n    margin: 0;\n  }\n  .modal-fullscreen-lg-down .modal-content {\n    height: 100%;\n    border: 0;\n    border-radius: 0;\n  }\n  .modal-fullscreen-lg-down .modal-header {\n    border-radius: 0;\n  }\n  .modal-fullscreen-lg-down .modal-body {\n    overflow-y: auto;\n  }\n  .modal-fullscreen-lg-down .modal-footer {\n    border-radius: 0;\n  }\n}\n@media (max-width: 1199.98px) {\n  .modal-fullscreen-xl-down {\n    width: 100vw;\n    max-width: none;\n    height: 100%;\n    margin: 0;\n  }\n  .modal-fullscreen-xl-down .modal-content {\n    height: 100%;\n    border: 0;\n    border-radius: 0;\n  }\n  .modal-fullscreen-xl-down .modal-header {\n    border-radius: 0;\n  }\n  .modal-fullscreen-xl-down .modal-body {\n    overflow-y: auto;\n  }\n  .modal-fullscreen-xl-down .modal-footer {\n    border-radius: 0;\n  }\n}\n.tooltip {\n  position: absolute;\n  z-index: 1070;\n  display: block;\n  margin: 0;\n  font-family: var(--bs-font-sans-serif);\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.6;\n  text-align: left;\n  text-align: start;\n  text-decoration: none;\n  text-shadow: none;\n  text-transform: none;\n  letter-spacing: normal;\n  word-break: normal;\n  word-spacing: normal;\n  white-space: normal;\n  line-break: auto;\n  font-size: 0.8888888889rem;\n  word-wrap: break-word;\n  opacity: 0;\n}\n.tooltip.show {\n  opacity: 0.9;\n}\n.tooltip .tooltip-arrow {\n  position: absolute;\n  display: block;\n  width: 0.8rem;\n  height: 0.4rem;\n}\n.tooltip .tooltip-arrow::before {\n  position: absolute;\n  content: \"\";\n  border-color: transparent;\n  border-style: solid;\n}\n\n.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] {\n  padding: 0.4rem 0;\n}\n.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {\n  bottom: 0;\n}\n.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {\n  top: -1px;\n  border-width: 0.4rem 0.4rem 0;\n  border-top-color: rgb(19, 18, 18);\n}\n\n.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] {\n  padding: 0 0.4rem;\n}\n.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {\n  left: 0;\n  width: 0.4rem;\n  height: 0.8rem;\n}\n.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {\n  right: -1px;\n  border-width: 0.4rem 0.4rem 0.4rem 0;\n  border-right-color: rgb(19, 18, 18);\n}\n\n.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] {\n  padding: 0.4rem 0;\n}\n.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {\n  top: 0;\n}\n.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {\n  bottom: -1px;\n  border-width: 0 0.4rem 0.4rem;\n  border-bottom-color: rgb(19, 18, 18);\n}\n\n.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] {\n  padding: 0 0.4rem;\n}\n.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {\n  right: 0;\n  width: 0.4rem;\n  height: 0.8rem;\n}\n.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {\n  left: -1px;\n  border-width: 0.4rem 0 0.4rem 0.4rem;\n  border-left-color: rgb(19, 18, 18);\n}\n\n.tooltip-inner {\n  max-width: 200px;\n  padding: 0.25rem 0.5rem;\n  color: rgb(255, 255, 255);\n  text-align: center;\n  background-color: rgb(19, 18, 18);\n  border-radius: 6px;\n}\n\n.popover {\n  position: absolute;\n  top: 0;\n  left: 0 /* rtl:ignore */;\n  z-index: 1060;\n  display: block;\n  max-width: 276px;\n  font-family: var(--bs-font-sans-serif);\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1.6;\n  text-align: left;\n  text-align: start;\n  text-decoration: none;\n  text-shadow: none;\n  text-transform: none;\n  letter-spacing: normal;\n  word-break: normal;\n  word-spacing: normal;\n  white-space: normal;\n  line-break: auto;\n  font-size: 0.8888888889rem;\n  word-wrap: break-word;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border: 1px solid rgba(19, 18, 18, 0.2);\n  border-radius: 6px;\n}\n.popover .popover-arrow {\n  position: absolute;\n  display: block;\n  width: 1rem;\n  height: 0.5rem;\n}\n.popover .popover-arrow::before, .popover .popover-arrow::after {\n  position: absolute;\n  display: block;\n  content: \"\";\n  border-color: transparent;\n  border-style: solid;\n}\n\n.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {\n  bottom: calc(-0.5rem - 1px);\n}\n.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {\n  bottom: 0;\n  border-width: 0.5rem 0.5rem 0;\n  border-top-color: rgba(19, 18, 18, 0.25);\n}\n.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {\n  bottom: 1px;\n  border-width: 0.5rem 0.5rem 0;\n  border-top-color: rgb(255, 255, 255);\n}\n\n.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {\n  left: calc(-0.5rem - 1px);\n  width: 0.5rem;\n  height: 1rem;\n}\n.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {\n  left: 0;\n  border-width: 0.5rem 0.5rem 0.5rem 0;\n  border-right-color: rgba(19, 18, 18, 0.25);\n}\n.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {\n  left: 1px;\n  border-width: 0.5rem 0.5rem 0.5rem 0;\n  border-right-color: rgb(255, 255, 255);\n}\n\n.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {\n  top: calc(-0.5rem - 1px);\n}\n.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {\n  top: 0;\n  border-width: 0 0.5rem 0.5rem 0.5rem;\n  border-bottom-color: rgba(19, 18, 18, 0.25);\n}\n.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {\n  top: 1px;\n  border-width: 0 0.5rem 0.5rem 0.5rem;\n  border-bottom-color: rgb(255, 255, 255);\n}\n.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  display: block;\n  width: 1rem;\n  margin-left: -0.5rem;\n  content: \"\";\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {\n  right: calc(-0.5rem - 1px);\n  width: 0.5rem;\n  height: 1rem;\n}\n.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {\n  right: 0;\n  border-width: 0.5rem 0 0.5rem 0.5rem;\n  border-left-color: rgba(19, 18, 18, 0.25);\n}\n.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {\n  right: 1px;\n  border-width: 0.5rem 0 0.5rem 0.5rem;\n  border-left-color: rgb(255, 255, 255);\n}\n\n.popover-header {\n  padding: 0.5rem 1rem;\n  margin-bottom: 0;\n  font-size: 1rem;\n  background-color: #f0f0f0;\n  border-bottom: 1px solid rgba(19, 18, 18, 0.2);\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n}\n.popover-header:empty {\n  display: none;\n}\n\n.popover-body {\n  padding: 1rem 1rem;\n  color: rgb(19, 18, 18);\n}\n\n.carousel {\n  position: relative;\n}\n\n.carousel.pointer-event {\n  touch-action: pan-y;\n}\n\n.carousel-inner {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n.carousel-inner::after {\n  display: block;\n  clear: both;\n  content: \"\";\n}\n\n.carousel-item {\n  position: relative;\n  display: none;\n  float: left;\n  width: 100%;\n  margin-right: -100%;\n  backface-visibility: hidden;\n}\n\n.carousel-item.active,\n.carousel-item-next,\n.carousel-item-prev {\n  display: block;\n}\n\n/* rtl:begin:ignore */\n.carousel-item-next:not(.carousel-item-start),\n.active.carousel-item-end {\n  transform: translateX(100%);\n}\n\n.carousel-item-prev:not(.carousel-item-end),\n.active.carousel-item-start {\n  transform: translateX(-100%);\n}\n\n/* rtl:end:ignore */\n.carousel-fade .carousel-item {\n  opacity: 0;\n  transition-property: opacity;\n  transform: none;\n}\n.carousel-fade .carousel-item.active,\n.carousel-fade .carousel-item-next.carousel-item-start,\n.carousel-fade .carousel-item-prev.carousel-item-end {\n  z-index: 1;\n  opacity: 1;\n}\n.carousel-fade .active.carousel-item-start,\n.carousel-fade .active.carousel-item-end {\n  z-index: 0;\n  opacity: 0;\n}\n\n.carousel-control-prev,\n.carousel-control-next {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 15%;\n  padding: 0;\n  color: rgb(255, 255, 255);\n  text-align: center;\n  background: none;\n  border: 0;\n  opacity: 0.5;\n}\n.carousel-control-prev:hover, .carousel-control-prev:focus,\n.carousel-control-next:hover,\n.carousel-control-next:focus {\n  color: rgb(255, 255, 255);\n  text-decoration: none;\n  outline: 0;\n  opacity: 0.9;\n}\n\n.carousel-control-prev {\n  left: 0;\n}\n\n.carousel-control-next {\n  right: 0;\n}\n\n.carousel-control-prev-icon,\n.carousel-control-next-icon {\n  display: inline-block;\n  width: 2rem;\n  height: 2rem;\n  background-repeat: no-repeat;\n  background-position: 50%;\n  background-size: 100% 100%;\n}\n\n/* rtl:options: {\n  \"autoRename\": true,\n  \"stringMap\":[ {\n    \"name\"    : \"prev-next\",\n    \"search\"  : \"prev\",\n    \"replace\" : \"next\"\n  } ]\n} */\n.carousel-control-prev-icon {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28255, 255, 255%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\");\n}\n\n.carousel-control-next-icon {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgb%28255, 255, 255%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\");\n}\n\n.carousel-indicators {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  margin-right: 15%;\n  margin-bottom: 1rem;\n  margin-left: 15%;\n  list-style: none;\n}\n.carousel-indicators [data-bs-target] {\n  box-sizing: content-box;\n  flex: 0 1 auto;\n  width: 30px;\n  height: 3px;\n  padding: 0;\n  margin-right: 3px;\n  margin-left: 3px;\n  text-indent: -999px;\n  cursor: pointer;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  border: 0;\n  border-top: 10px solid transparent;\n  border-bottom: 10px solid transparent;\n  opacity: 0.5;\n}\n.carousel-indicators .active {\n  opacity: 1;\n}\n\n.carousel-caption {\n  position: absolute;\n  right: 15%;\n  bottom: 1.25rem;\n  left: 15%;\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n  color: rgb(255, 255, 255);\n  text-align: center;\n}\n\n.carousel-dark .carousel-control-prev-icon,\n.carousel-dark .carousel-control-next-icon {\n  filter: invert(1) grayscale(100);\n}\n.carousel-dark .carousel-indicators [data-bs-target] {\n  background-color: rgb(19, 18, 18);\n}\n.carousel-dark .carousel-caption {\n  color: rgb(19, 18, 18);\n}\n\n@keyframes spinner-border {\n  to {\n    transform: rotate(360deg) /* rtl:ignore */;\n  }\n}\n.spinner-border {\n  display: inline-block;\n  width: 2rem;\n  height: 2rem;\n  vertical-align: -0.125em;\n  border: 0.25em solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: 0.75s linear infinite spinner-border;\n}\n\n.spinner-border-sm {\n  width: 1rem;\n  height: 1rem;\n  border-width: 0.2em;\n}\n\n@keyframes spinner-grow {\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    opacity: 1;\n    transform: none;\n  }\n}\n.spinner-grow {\n  display: inline-block;\n  width: 2rem;\n  height: 2rem;\n  vertical-align: -0.125em;\n  background-color: currentColor;\n  border-radius: 50%;\n  opacity: 0;\n  animation: 0.75s linear infinite spinner-grow;\n}\n\n.spinner-grow-sm {\n  width: 1rem;\n  height: 1rem;\n}\n\n.offcanvas {\n  position: fixed;\n  bottom: 0;\n  z-index: 1045;\n  display: flex;\n  flex-direction: column;\n  max-width: 100%;\n  visibility: hidden;\n  background-color: rgb(255, 255, 255);\n  background-clip: padding-box;\n  outline: 0;\n}\n\n.offcanvas-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1040;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgb(19, 18, 18);\n}\n.offcanvas-backdrop.fade {\n  opacity: 0;\n}\n.offcanvas-backdrop.show {\n  opacity: 0.5;\n}\n\n.offcanvas-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 1rem;\n}\n.offcanvas-header .btn-close {\n  padding: 0.5rem 0.5rem;\n  margin-top: -0.5rem;\n  margin-right: -0.5rem;\n  margin-bottom: -0.5rem;\n}\n\n.offcanvas-title {\n  margin-bottom: 0;\n  line-height: 1.6;\n}\n\n.offcanvas-body {\n  flex-grow: 1;\n  padding: 1rem 1rem;\n  overflow-y: auto;\n}\n\n.offcanvas-start {\n  top: 0;\n  left: 0;\n  width: 400px;\n  border-right: 1px solid rgba(19, 18, 18, 0.2);\n  transform: translateX(-100%);\n}\n\n.offcanvas-end {\n  top: 0;\n  right: 0;\n  width: 400px;\n  border-left: 1px solid rgba(19, 18, 18, 0.2);\n  transform: translateX(100%);\n}\n\n.offcanvas-top {\n  top: 0;\n  right: 0;\n  left: 0;\n  height: 30vh;\n  max-height: 100%;\n  border-bottom: 1px solid rgba(19, 18, 18, 0.2);\n  transform: translateY(-100%);\n}\n\n.offcanvas-bottom {\n  right: 0;\n  left: 0;\n  height: 30vh;\n  max-height: 100%;\n  border-top: 1px solid rgba(19, 18, 18, 0.2);\n  transform: translateY(100%);\n}\n\n.offcanvas.show {\n  transform: none;\n}\n\n.clearfix::after {\n  display: block;\n  clear: both;\n  content: \"\";\n}\n\n.link-primary {\n  color: #198dae;\n}\n.link-primary:hover, .link-primary:focus {\n  color: #14718b;\n}\n\n.link-secondary {\n  color: #676a72;\n}\n.link-secondary:hover, .link-secondary:focus {\n  color: #52555b;\n}\n\n.link-success {\n  color: #078a2e;\n}\n.link-success:hover, .link-success:focus {\n  color: #066e25;\n}\n\n.link-accent {\n  color: #16a385;\n}\n.link-accent:hover, .link-accent:focus {\n  color: #12826a;\n}\n\n.link-info {\n  color: #a3988c;\n}\n.link-info:hover, .link-info:focus {\n  color: #b5ada3;\n}\n\n.link-warning {\n  color: #da8210;\n}\n.link-warning:hover, .link-warning:focus {\n  color: #e19b40;\n}\n\n.link-alert {\n  color: #dd1a1a;\n}\n.link-alert:hover, .link-alert:focus {\n  color: #b11515;\n}\n\n.ratio {\n  position: relative;\n  width: 100%;\n}\n.ratio::before {\n  display: block;\n  padding-top: var(--bs-aspect-ratio);\n  content: \"\";\n}\n.ratio > * {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.ratio-1x1 {\n  --bs-aspect-ratio: 100%;\n}\n\n.ratio-4x3 {\n  --bs-aspect-ratio: 75%;\n}\n\n.ratio-16x9 {\n  --bs-aspect-ratio: 56.25%;\n}\n\n.ratio-21x9 {\n  --bs-aspect-ratio: 42.8571428571%;\n}\n\n.fixed-top {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: 1030;\n}\n\n.fixed-bottom {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1030;\n}\n\n.sticky-top {\n  position: sticky;\n  top: 0;\n  z-index: 1020;\n}\n\n@media (min-width: 460px) {\n  .sticky-sm-top {\n    position: sticky;\n    top: 0;\n    z-index: 1020;\n  }\n}\n@media (min-width: 768px) {\n  .sticky-md-top {\n    position: sticky;\n    top: 0;\n    z-index: 1020;\n  }\n}\n@media (min-width: 1024px) {\n  .sticky-lg-top {\n    position: sticky;\n    top: 0;\n    z-index: 1020;\n  }\n}\n@media (min-width: 1200px) {\n  .sticky-xl-top {\n    position: sticky;\n    top: 0;\n    z-index: 1020;\n  }\n}\n.hstack {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n}\n\n.vstack {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  align-self: stretch;\n}\n\n.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important;\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n.stretched-link::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  content: \"\";\n}\n\n.text-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.vr {\n  display: inline-block;\n  align-self: stretch;\n  width: 1px;\n  min-height: 1em;\n  background-color: currentColor;\n  opacity: 0.25;\n}\n\n/*\nAgenda Item\n\nDescription:\nAgenda items are any event or sessions that are scheduled for a specific date, location, and time.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda\n*/\n/*\nTime Range\n\nDescription:\nThe range of time at which a Agenda item is in a certain state.\n\nMarkup: @ {{> Sub.Data.Agenda.Time.Start }} – {{> Sub.Data.Agenda.Time.End }} <abbr title=\"EASTERN TIME, UTC -4\">EDT</abbr>\n\nFORMAT: 12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.\n\nNOTE: The 'a.m.'/'p.m.' if the same should only occur on the last time mark.  11:15 a.m. - 11:30 a.m. should be shortened to 11:15  - 11:30 a.m.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.TimeRange\n*/\n/*\nTime Moment\n\nDescription:\nThe time at which a Agenda is item is scheduled to be active, give access,  or start playing.\n\nMarkup: 11:15 a.m.\n\nFORMAT: 12 hour with 'a.m.'/'p.m'.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.Time.Start\n*/\n/*\nTime Moment Start End\n\nDescription:\nThe time at which a Agenda item is scheduled to end.\n\nMarkup: 12:15 p.m.\n\nFORMAT: 12 hour with 'a.m.'/'p.m'.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.Time.End\n*/\n/*\nDate\n\nDescription:\nThere is usually a delay to when recording will make it to on demand. This is the time that recording will be available.\n\nMarkup: Saturday, Nov. 20, 2021 \n\nFORMAT: Day-of-Week, Month-Abbreviation.  Day, Year\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.Date\n*/\n/*\nDate and Time\n\nDescription:\nThis is when you need to show Date and Time\n\nMarkup: {{> Sub.Data.Agenda.Date }} @ {{> Sub.Data.Agenda.Time.Start }} <abbr title=\"EASTERN TIME, UTC -4\">EDT</abbr>\n\nFORMAT: Day-of-Week, Month-Abbreviation.  Day, Year @ Hour:Minute 'a.m.'/'p.m' Abbreviation-of-Timezone.  \n\nNOTE:  Use the simple abbreviation for the timezone without Daylight Savings Time. IE: ET not EDT or EST.\n\nDATA: \nSub.Data.Agenda.Date - Date\nSub.Data.Agenda.Time.Start - Start Time\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.DateTime\n*/\n/*\nMember \n\nDescription:\nOften we need to represent a member as a Faculty or Chair who created or participated an initative.\n\nWeight:1000\n\nStyleguide Sub.Data.Member\n*/\n/*\nPhoto\n\nDescription:\nA photo of the member\n\nMarkup:\n<img\n    class=\"aspect_1x1 w_100 {{modifier_class}}\"\n    src=\"https://i.pravatar.cc/300\"\n    alt=\"{{> \"Sub.Data.Member.FullName\" }}\"\n/>\n\nMarkupWrapperClasses: max-w_30\n\nFORMAT: 300px by 300px\n\nWeight:0\n\nStyleguide Sub.Data.Member.Photo\n*/\n/*\nFull Name\n\nThe full name of the Member member\n\nMarkup: Pepper H. Soda III, MD, FACC\n\n\nFORMAT: First Name MI (if known) Last Name Suffix (Jr., Sr., the III ), Optional Degree, Optional ACC Honorifics, Optional Exceptions Honorifics\n\nWeight:0\n\nStyleguide Sub.Data.Member.FullName\n*/\n/*\nLocation\n\nDescription:\nThe location of the Member member\n\nMarkup: New York, NY, USA\n\nWeight:0\n\nFORMAT: City, State, Country\n\nNOTE:  if the conference country is USA you can drop the country if it is USA.\n\nStyleguide Sub.Data.Member.Location\n*/\n/*\nTitle\n\nDescription:\nthe roles of the Member member within the session\n\nMarkup:\n{{> \"Sub.Data.Member.Title.InstitutionTitle\" }}, {{> \"Sub.Data.Member.Title.InstitutionDivision\" }}, {{> \"Sub.Data.Member.Title.Institution\" }}\n\n\n\nFORMAT: Institution Title, Institution Division, Institution\n\nNOTE: This format is currently not being enforced.\n\nWeight:100\n\nStyleguide Sub.Data.Member.Title\n*/\n/*\nInstitution\n\nDescription:\nInstitution of the Member member where they hold a title\n\nMarkup:\nMount SugarLoaf Hospital\n\nWeight:101\n\nStyleguide Sub.Data.Member.Title.Institution\n*/\n/*\nInstitution Division\n\nDescription:\nThe Division of the Institution of the Member member where they hold a title\n\nMarkup:\nDepartment of Cardiology\n\nWeight:102\n\nStyleguide Sub.Data.Member.Title.InstitutionDivision\n*/\n/*\nInstitutional Title\n\nDescription:\nthe roles of the Member member within the session\n\nMarkup:\nPhysician-in-Chief\n\nWeight:103\n\nStyleguide Sub.Data.Member.Title.InstitutionTitle\n*/\n/*\nSponsor\n\nDescription:\nSponsor are industry that has offered money or support.\n\nWeight:0\n\nStyleguide Sub.Data.Sponsor\n*/\n/*\nName\n\nMarkup:\nLogoIpsum\n\nWeight:-100\n\nStyleguide Sub.Data.Sponsor.Name\n*/\n/*\nAddress\n\nDescription:\nSponsor's Name\n\nMarkup:\n<address>\n    <!-- http://microformats.org/wiki/hcard -->\n    <div class=\"font_ui font_0\">\n        <ul class=\"ul_none  lh_2\">\n            <li><strong class=\"\">Contact:</strong></li>\n            <li class=\"\">\n                <span class=\"contact-person\">Carlton Dooley</span>\n            </li>\n            <li><strong class=\"\">Address:</strong></li>\n            <li class=\"\">\n                <span class=\"street-address\">3115 Clair Street</span>\n            </li>\n            <li cclass=\"locality\">\n                <span class=\"city-name\">Killeen</span>,\n                <span class=\"state-name\">\n                    <abbr title=\"Texas\">TX</abbr>\n                </span>\n                <span class=\"postal-code\">76543</span>\n            </li>\n        </ul>\n        <ul class=\"ul_none lh_2\">\n            <li class=\"\">\n            <strong class=\"p-r_2 inline block:md inline:lg undecorated\">Email:</strong>\n                <a href=\"mailto:MemberCare@acc.org\" class=\"email block:md inline:lg link\">\n                    <span class=\"\">MemberCare@acc.org</span></a>\n            </li>\n            <li class=\"\">\n            <strong class=\"p-r_2 block:md inline:lg\">Phone:</strong>\n                <a tel=\"+1254-690-2946\" href=\"tel:+1254-690-2946\" class=\"tel block:md inline:lg link\">\n                    <span class=\" \">(254) 690-2946</span>\n                    </a>\n            </li>\n        </ul>\n    </div>\n</address>\n\nWeight:20\n\nStyleguide Sub.Data.Sponsor.Address\n*/\n/*\nLogo\n\nDescription:\nLogo of the Company\n\nMarkup:\n<img  class=\"absolute t_0 r_0 l_0 b_0\" style=\"object-fit: contain;height: 100%;width: 100%;\" src=\"https://raw.githubusercontent.com/ACC-Style/Arches/refs/heads/master/src/img/temp/logo-1.svg\"/>\n\nMarkupWrapperClasses: max-w_40 relative h_20 w_100\n\n\nWeight:10\n\nStyleguide Sub.Data.Sponsor.Logo\n*/\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n\nWeight:25\n\nStyleguide Sub.Data.Sponsor.WebAddress\n*/\n/*\nWebsite Link\n\nMarkup:\n<a class=\"website {{modifier_class}}\" target=\"_blank\"  href=\"{{> 'Sub.Data.Sponsor.WebAddress'}}\">Website</a>\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.WebLink\n*/\n/* Nav Recipes.00x */\n/*\nCall to Action Buttons\n\nDescription: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.\n\nSign Up         - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.\nPurchase        - Used to prompt users to make a purchase. It creates a sense of urgency and directs users to complete a transaction for a product or service.\nLearn More      - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.\nSubscribe       - Used to encourage users to subscribe to a newsletter, mailing list, or updates from a website or company. It aims to build a relationship with users and keep them engaged.\nGet Started     - Used to initiate user onboarding or guide users through the first steps of using a product or service. It prompts users to begin their journey and experience the offering.\n\nMarkup:\n<button class=\"btn btn-primary btn-lg capitalize\">{{modifier_class}}</button>\n\n\nNOTE: The Call to Action Button component is ideal for creating prominent buttons that attract user attention and encourage them to take a specific action, such as signing up, making a purchase, or exploring more content.\n\n\nWeight:1000\n\nStyleguide HTML.Inputs.Button.CTA\n*/\n/*\nButtons\n\nDescription: Basic Buttons and modifiers.   \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n<button class=\"btn capitalize wrap wrap_balanced {{modifier_class}}\">{{modifier_class}}</button>\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button\n*/\n/*\nButtons Small\n\nDescription: Basic Buttons and modifiers.   \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n<button class=\"btn capitalize wrap wrap_balanced {{modifier_class}}\">{{modifier_class}}</button>\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.SM\n*/\n/*\nButtons Large\n\nDescription: Basic Buttons and modifiers.   \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n<button class=\"btn capitalize wrap wrap_balanced {{modifier_class}} btn-lg\">{{modifier_class}}</button>\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.LG\n*/\n/* Recipes.40 */\n.address {\n  font-style: unset;\n}\n\n@media only screen and (min-width: 640px) {\n  .reverse-indent {\n    display: inline-block;\n    margin-left: 1em;\n    padding-right: 1em;\n    text-indent: -1em;\n    width: 100%;\n  }\n  .reverse-indent:after {\n    content: \"\";\n    display: table;\n    clear: both;\n  }\n}\n/*\nGeneric Footer\n\nThis defines the web footer. \n\nMarkup:\n<div class=\"footer\">\n    <div class=\"p-t_3 p-b_3 p_4 flex br_0 br-t_3 lh_2 br_solid br_shade-n1 c_shade-1 texture_light bg_shade-1\">&nbsp;</div>\n    <div class=\"flex flex_column flex_row:lg justify_between p_4 p_5-large texture_dark\" style=\"\">\n        <div class=\"m_auto m-l_0:lg p-l_4:md p-r_5:md\">\n            <div class=\"logo_primary-alt  max-w_20\"><span class=\"alt\">logo_primary-alt max-w_10</span></div>\n            {{> \"Sub.Component.Navigation.Footer.Address\" modifier_class=\"\"}}\n            {{> \"Sub.Component.Navigation.Footer.Social\" modifier_class=\"\"}}\n        </div>\n        <div class=\"flex_shrink p-l_4:md p-r_4:md w_100 w_auto:md\">\n            {{> \"Sub.Component.Navigation.Footer.ACCProductLinks\" modifier_class=\"\"}}\n        </div>\n    </div>\n    {{> \"Sub.Component.Navigation.Footer.Subfooter\" modifier_class=\"\"}}\n    {{> \"Sub.Component.Navigation.Footer.Cite\" }}\n</div>\n\nSubComponents: \nSub.Component.Navigation.Footer.Address - Addresses\nSub.Component.Navigation.Footer.Social - Social Links\nSub.Component.Navigation.Footer.ACCProductLinks - Sister Sites\nSub.Component.Navigation.Footer.Subfooter - Sub Footer\nSub.Component.Navigation.Footer.Cite - Citation for the Site\n\nWeight: 40\n\nStyleguide Component.Navigation.Footer\n*/\n/*\nSub Footer\n\nDescription: ACC has some basic legal information that should be on every property. \n\nMarkup:\n<!-- subfooter -->\n<div id=\"subfooter\" class=\"bg_primary c_white font_n1 p-x_4 p-y_4\">\n    <ul class=\"block footer-bottom-links ul_none\">\n        <li class=\"inline p-r_2 p-y_2\"><a href=\"https://www.acc.org/Footer-Pages/Media-Center\"\n                    class=\"c_white-6 h:c_white\">Media Center</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Quick-Start-Guide\"\n                    class=\"c_white-6 h:c_white\">ACC.org Quick Start Guide</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Advertising-and-Sponsorship-Policy\"\n                    class=\"c_white-6 h:c_white\">Advertising &amp; Sponsorship Policy</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Clinical-Content-Disclaimer\"\n                    class=\"c_white-6 h:c_white\">Clinical Content Disclaimer</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Editorial-Board\"\n                    class=\"c_white-6 h:c_white\">Editorial Board</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Privacy-Policy\"\n                    class=\"c_white-6 h:c_white\">Privacy Policy</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Registered-User-Agreement\"\n                    class=\"c_white-6 h:c_white\">Registered User Agreement</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Terms-and-Conditions\"\n                    class=\"c_white-6 h:c_white\">Terms of Service</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Cookie-Policy\"\n                    class=\"c_white-6 h:c_white\">Cookie Policy</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/sitemap-acc.xml\" class=\"c_white-6 h:c_white\">Site\n                    Map</a></li>\n    </ul>\n    <!-- /footer-bottom-links -->\n</div>\n<!-- /subfooter -->\n\n\nWeight: 0\n\nStyleguide Sub.Component.Navigation.Footer.Subfooter\n*/\n/*\n\tCite and Copyright\n\n\tContains copy right \n\n\tMarkup:\n    <div class=\"texture_light bg_shade-1 p_4\">\n        <cite class=\"c_shade-1 font_italic font_bold font_n2 p_2 lh_2\">&copy; 2023 American College of Cardiology Foundation. All rights reserved.</cite>\n    </div>\n\n\n\tStyleguide Sub.Component.Navigation.Footer.Cite\n\n*/\n/*\nAddress\n\nAddress and contact information for Heart House\n\nMarkup:\n<section class=\"address c_white\">\n    <h3 class=\"font_accent font_1 m-b_0 font_normal font_regular\">American College of Cardiology</h3>\n    <address>\n        <!-- http://microformats.org/wiki/hcard -->\n        <h4 class=\"m-b_0 font_bold font_copy font_normal font_1 m-t_4\">Heart House</h4>\n        <div class=\"flex flex_column flex_row:md font_0 font_copy gap-x_5\">\n        <div class=\"flex_auto\">\n            <ul class=\"ul_none lh_0\">\n                <li class=\"m-b_1 m-b_3:md font_normal\">\n                    <span class=\"street-address\">2400 N St. NW</span>\n                </li>\n                <li class=\"m-b_1 m-b_3:md font_normal\">\n                    <span class=\"locality \">Washington</span>,\n                    <span class=\"city-name \">\n                <abbr title=\"District of Colombia\">DC</abbr>\n                </span>\n                    <span class=\"postal-code\">20037</span>\n                </li>\n                <li class=\"m-b_1 m-b_3:md font_normal\">\n                    <a href=\"mailto:MemberCare@acc.org\" class=\"email c_white text_underline  h:c_white \">\n                        <strong class=\"p-r_2 inline block:md inline:lg\">Email:</strong>\n                        <span class=\"inline block:md inline:lg\">membercare@acc.org</span></a>\n                </li>\n            </ul>\n        </div>\n        <div class=\"flex_auto\">\n        <ul class=\"ul_none lh_0\">\n            <li class=\"m-b_1 m-b_3:md font_normal\">\n                <a tel=\"+12023756000\" href=\"tel:+12023756000\" class=\"tel c_white h:c_white h:underline\">\n                <strong class=\"p-r_2 block inline:lg\">Phone:</strong><span class=\" block inline:lg\">1-202-375-6000</span></a>\n            </li>\n            <li class=\"m-b_1 m-b_3:md font_normal\">\n                <a tel=\"+18002534636\" href=\"tel:+18002534636\" class=\"tel c_white h:c_white h:underline\">\n                <strong class=\"p-r_2 block inline:lg\">Toll Free:</strong><span class=\" block inline:lg\">1-800-253-4636</span></a>\n            </li>\n            <li class=\"m-b_1 m-b_3:md font_normal\">\n                <a fax=\"+12023757000\" href=\"fax:+12023757000\" class=\"fax c_white h:c_white h:underline\">\n                <strong class=\"p-r_2 block inline:lg\">Fax:</strong>\n                <span class=\"block inline:lg\">1202-375-7000</span>\n                </a>\n            </li>\n        </ul>\n        </div>\n        </div>\n    </address>\n</section>\n\nMarkupWrapperClasses:\n    texture_dark p_4 max-w_30\n\nStyleguide Sub.Component.Navigation.Footer.Address\n\n*/\n/*\nFat Footers Links\n\nFooters in the ACC sometimes have fat footers with a list of categories and links. \n\nMarkup:\n<section class=\"flex_auto p-x_3 p-y_4:lg w_1-third:lg w_50:md font_ui is-active_toggle-function\">\n    <h2 class=\"font_2 font_3:lg font_accent p-t_2 m-b_0:md m-b_2 br_none:md \">\n        <span class=\"toggle display_none:md \">\n        <i class=\"fas fa-minus-square c_white-8 p-r_4\"></i></span>\n        <a class=\"c_accent h:c_secondary-3\" href=\"#\">Conditions &amp; Topics</a>\n    </h2>\n    <ul class=\"block:md display_none font_0:lg font_n1 m-b_4 ul_none a:_block\">\n        <li class=\"text-indent_n1 p-l_4\">\n            <a class=\"c_white h:c_secondary-3 h:underline\" href=\"foo.html\">Angina</a>\n        </li>\n        <li class=\"text-indent_n1 p-l_4\">\n            <a class=\"c_white h:c_secondary-3 h:underline\" href=\"foo.html\">Aortic Aneurysm</a>\n        </li>\n        <li class=\"text-indent_n1 p-l_4\">\n            <a class=\"c_white h:c_secondary-3 h:underline\" href=\"foo.html\">Atrial Fibrillation</a>\n        </li>\n        <li class=\"text-indent_n1 p-l_4\">\n            <a class=\"c_white h:c_secondary-3 h:underline\" href=\"foo.html\">Bradycardia</a>\n        </li>\n    </ul>\n</section>\n\nMarkupWrapperClasses:\n    texture_dark p_4\n\n\nStyleguide Component.Navigation.Footer.Fat-Footer-Links\n\n*/\n/*\nACC Product Links\n\nLinks to the other major products in the ACC portfolio \n\nMarkup:\n<!-- ACCProductLinks -->\n<section class=\"acc-websites flex_auto\">\n        <ul class=\"ul_none lh_2 font_0\">\n            <li class=\"c_white\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.jacc.org/\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">ACC.org</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1 br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.jacc.org/\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">JACC Journals</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>            \n            <li class=\"c_white br_solid br_0 br-t_1 br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"http://cvquality.acc.org/\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">Quality Improvement for Institutions</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"http://cvquality.acc.org/NCDR-Home\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">NCDR</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://cvquality.acc.org/accreditation\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">ACC Accreditation Services</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.cardiosmart.org/For-Clinicians\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">CardioSmart</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.medaxiom.com/\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">MedAxiom</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.acc.org/About-ACC/Contact-Us\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">Contact Us</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n        </ul>\n    </section>\n<!-- /ACCProductLinks -->\n\nMarkupWrapperClasses:\ntexture_dark p_4\n\nStyleguide Sub.Component.Navigation.Footer.ACCProductLinks\n\n*/\n/*\nSocial Links\n\nThe college has a collection of social or secondary platforms we interact with.\n\nMarkup:\n<!-- Social -->\n<h4 class=\"c_white font_regular font_accent m-b_3 m-b_4:lg text_center text_left:lg\">Stay Connected\n</h4>\n<ul class=\"flex social-bar ul_none c_white h:c_white m_0\">\n    <li class=\"flex_auto m-r_2\"><a href=\"http://www.youtube.com/user/ACCinTouch\" target=\"_blank\" class=\"bg_youtube social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-youtube\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://www.linkedin.com/company/american-college-of-cardiology/\" target=\"_blank\" class=\"bg_linkedin social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-linkedin-in\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://www.facebook.com/AmericanCollegeofCardiology\" target=\"_blank\" class=\"bg_facebook social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-facebook-square\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://twitter.com/accintouch\" target=\"_blank\" class=\"bg_twitter social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-square-x-twitter\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://www.instagram.com/americancollegeofcardiology\" target=\"_blank\" class=\"bg_instagram social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-instagram\"></i></a></li>\n    <!--<li class=\"flex_auto m-r_2\"><a href=\"https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US\" target=\"_blank\" class=\"bg_google-play social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-google-play\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps\" target=\"_blank\" class=\"bg_apple-store social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-apple\"></i></a></li>-->\n</ul>\n<!-- Social -->\n\nMarkupWrapperClasses:\ntexture_dark p_4 max-w_40\n\nStyleguide Sub.Component.Navigation.Footer.Social\n\n*/\n/* Nav Recipes.50 */\n/*\n    Quick Utility Links\n\n   Quick Links are only text links that are used for special cross marketing to sister sites and utility pages like about, home, extra.  \n\n    Markup:\n<nav data-attr=\"utility-nav\">\n\t<ul class=\"flex ul_none justify_end\">\n\t\t<li class=\"p-x_3 flex_shrink\">\n\t\t\t<a class=\"h:underline c_primary h:c_secondary-n1\"\n\t\t\t\thref=\"//www.acc.org/guidelines#doctype=Guidelines\"\n\t\t\t\ttitle=\"Access ACC guidelines and clinical policy documents as well as related resources\"\n\t\t\t\t>Guidelines</a\n\t\t\t>\n\t\t</li>\n\t\t<li class=\"p-x_3 flex_shrink br-l_1 br_solid br_black-4\">\n\t\t\t<a class=\"h:underline c_primary h:c_secondary-n1\" href=\"http://www.onlinejacc.org/\" target=\"_blank\" title=\"JACC.org\"\n\t\t\t\t>JACC</a\n\t\t\t>\n\t\t</li>\n\t\t<li class=\"p-x_3 flex_shrink br-l_1 br_solid br_black-4\">\n\t\t\t<a class=\"h:underline c_primary h:c_secondary-n1\"\n\t\t\t\thref=\"http://accscientificsession.acc.org\"\n\t\t\t\ttarget=\"_blank\"\n\t\t\t\ttitle=\"ACC Annual Scientific Session Together With World Congress of Cardiology Website\"\n\t\t\t\t>ACC.20/WCC</a\n\t\t\t>\n\t\t</li>\n\t\t<li class=\"p-x_3 flex_shrink br-l_1 br_solid br_black-4\">\n\t\t\t<a class=\"h:underline c_primary h:c_secondary-n1\"\n\t\t\t\thref=\"https://www.acc.org/membership/current-members?promo_creative=current_members&amp;promo_position=utility&amp;promo_name=navigation\"\n\t\t\t\t>Members</a\n\t\t\t>\n\t\t</li>\n\t\t<li class=\"p-x_3 flex_shrink br-l_1 br_solid br_black-4\">\n\t\t\t<a class=\"h:underline c_primary h:c_secondary-n1\"\n\t\t\t\thref=\"https://www.acc.org/membership/join-us?promo_creative=joinacc&amp;promo_position=utility&amp;promo_name=navigation\"\n\t\t\t\t>Join ACC</a\n\t\t\t>\n\t\t</li>\n\t</ul>\n</nav>\n\nWeight:50\n\n\n    Styleguide Component.Navigation.QuickLinks\n*/\n/* Nav Recipes.04x */\n/*\nAdvertisment Spaces\n\nAdvertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces.  \n\n    Markup:\n<div class=\"br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography {{modifier_class}}\">\n   <div id=\"Adslot-x\" style=\"width:300px; height:250px;\" class=\"bg_acc m_auto max-w_100\">\n      <a href=\"https://www.acc.org/\" target=\"_blank\"><img src=\"https://picsum.photos/300/250\"/></a>\n   </div>\n   <small class=\"block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase\">advertisment</small>\n</div>\n\nMarkupWrapperClasses:\n    max-w_30\n\nStyleguide Component.Advertisement\n*/\n/* content Recipes.100 */\n/*\nSocial Links\n\nThe social links From the Footer.\n\n\nMarkup:\n<section class=\"social p_4 m-y_2 bg_shade-n3 font_2\">\n    <ul class=\"flex social-bar ul_none c_white h:c_white m_0\">\n        <li class=\"flex_auto m-r_2\"><a href=\"https://twitter.com/accintouch\" target=\"_blank\" class=\"twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-square-x-twitter\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"https://www.facebook.com/AmericanCollegeofCardiology\" target=\"_blank\" class=\"facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-facebook-square\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"https://www.linkedin.com/company/american-college-of-cardiology/\" target=\"_blank\" class=\"linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-linkedin\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"http://www.youtube.com/user/ACCinTouch\" target=\"_blank\" class=\"youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-youtube\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US\" target=\"_blank\" class=\"google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-google-play\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps\" target=\"_blank\" class=\"apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-apple\"></i></a></li>\n    </ul>\n</section>\n\n\n\n\nStyleguide Component.Navigation.SocialLinks\n\n*/\n/*\nSocial Links Monochrome\n\nThe social links can be restyled to be smaller.\n\n\nMarkup:\n<section class=\"social p_4 m-y_2 font_n1 bg_white\">\n    <ul class=\"flex social-bar ul_none m_0\">\n        <li class=\"flex_shrink m-r_2\"><a href=\"https://twitter.com/accintouch\" target=\"_blank\" class=\" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-square-x-twitter\"></i></a></li>\n        <li class=\"flex_shrink m-r_2\"><a href=\"https://www.facebook.com/AmericanCollegeofCardiology\" target=\"_blank\" class=\" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-facebook-square\"></i></a></li>\n        <li class=\"flex_shrink m-r_2\"><a href=\"https://www.linkedin.com/company/american-college-of-cardiology/\" target=\"_blank\" class=\" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-linkedin\"></i></a></li>\n        <li class=\"flex_shrink m-r_2\"><a href=\"http://www.youtube.com/user/ACCinTouch\" target=\"_blank\" class=\" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-youtube\"></i></a></li>\n        <li class=\"flex_shrink m-r_2\"><a href=\"https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US\" target=\"_blank\" class=\" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-google-play\"></i></a></li>\n        <li class=\"flex_shrink m-r_2\"><a href=\"https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps\" target=\"_blank\" class=\" c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-apple\"></i></a></li>\n    </ul>\n</section>\n\n\n\n\nStyleguide Component.Navigation.SocialLinks.Mono Chrome\n\n*/\n/*\nSocial Links Smaller\n\nThe social links can be restyled to be smaller.\n\n\nMarkup:\n<section class=\"social p_4 m-y_2 font_0 max-w_20  bg_white\">\n    <ul class=\"flex social-bar ul_none c_white m_0\">\n        <li class=\"flex_auto m-r_2\"><a href=\"https://twitter.com/accintouch\" target=\"_blank\" class=\"twitter social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity\"><i class=\"fab fa-square-x-twitter\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"https://www.facebook.com/AmericanCollegeofCardiology\" target=\"_blank\" class=\"facebook social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity\"><i class=\"fab fa-facebook-square\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"https://www.linkedin.com/company/american-college-of-cardiology/\" target=\"_blank\" class=\"linkedin social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity\"><i class=\"fab fa-linkedin\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"http://www.youtube.com/user/ACCinTouch\" target=\"_blank\" class=\"youtube social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity\"><i class=\"fab fa-youtube\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US\" target=\"_blank\" class=\"google-play social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity\"><i class=\"fab fa-google-play\"></i></a></li>\n        <li class=\"flex_auto m-r_2\"><a href=\"https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps\" target=\"_blank\" class=\"apple-store social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity\"><i class=\"fab fa-apple\"></i></a></li>\n    </ul>\n</section>\n\n\nStyleguide Component.Navigation.SocialLinks.Smaller\n\n*/\n/*\nCookie Banner\n\nDescription: This page is the root of the page.  The cookie banner was used to display a message to the user that the site uses cookies.  The user can click on the banner to dismiss the message.<ul>\n    <li>The system will present user a pop-up banner that appears when first accessing the site, which will include text, links and an Accept/OK button.  </li>\n    <li>The system will allow the user to dismiss the pop up by clicking the Accept/OK button</li>\n    <li>The system will allow the ACC Admin to \"reset\" the pop up banner, which will show it to all users and require them to click accept again to dismiss it.  </li>\n    <li>The system will track and record the users date/time when they accepted the pop up.  </li>\n</ul>\n\nMarkup:\n<div class=\"'fixed' b_0 r_0 l_0 grid justify-content-center bg_acc opacity_8 z_5\">\n    <div class=\"flex_row:md flex_column flex\">\n        <div class=\"flex_auto c_white p_3 p_4:md\">\n            <h1>This site uses cookies to improve your experience. </h1>\n            <p>By continuing to use our site, you agree to our <a target=\"_blank\" class=\"link c_white underline h:undecorated\" href=\"https://www.acc.org/footer-pages/cookie-policy\" target=\"_blank\">Cookie Policy</a>, <a target=\"_blank\" class=\"link c_white underline h:undecorated\" href=\"https://www.acc.org/footer-pages/privacy-policy\">Privacy Policy</a> and <a target=\"_blank\" class=\"link c_white underline h:undecorated\" href=\"https://www.acc.org/footer-pages/terms-and-conditions\">Terms of Service</a></p></div>\n        <div class=\"flex_none grid justify_center p_5:md p_4 text_center\">\n            <a class=\"btn btn-primary self_center p-x_5 shadow_overlap-light\">OK</a>\n        </div>\n    </div>\n</div>\n\nMarkupWrapperClasses: relative\n\nNOTE: This design needs to have the 'fixed' class changed to fixed  in the parent container of the attached code when in real implementations.  'fixed' is used in the documentation page so it would not break free of the documentation area into the bottom of the browser page.\n\nWeight:100\n\nStyleguide Component.CookieBanner\n*/\n/* content Recipes.150 */\n/*\nOrdered Cards\n\nHaving cards order on page to help users find there way through steps can some times be very helpful. \n\nMarkup:\n<div class=\"flex texture_medium counter_reset p_5\">\n   <div class=\"card texture_light bg_white shadow_2 flex_auto m-x_3\">\n      <div class=\"flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_alert\">\n            <div class=\"flex_shrink p_3  bg_alert-n4\"><span class=\"counter counter_increment font_5 lh_0 font_display c_whsite\"></span></div>\n      <div class=\"flex_auto p_3\">First it is bad</div>\n      </div>\n      <div class=\"card-section p-x_4 p-y_3\">\n      <h4>This is a card.</h4>\n      <p>It has an easy to override visual style, and is appropriately subdued.</p>\n      </div>\n   </div>\n      <div class=\"card texture_light bg_white shadow_2 flex_auto m-x_3\">\n      <div class=\"flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_warning\">\n            <div class=\"flex_shrink p_3  bg_warning-n4\"><span class=\"counter counter_increment font_5 lh_0 font_display c_whsite\"></span></div>\n      <div class=\"flex_auto p_3\">Then it is not right</div>\n      </div>\n      <div class=\"card-section p-x_4 p-y_3\">\n      <h4>This is a card.</h4>\n      <p>It has an easy to override visual style, and is appropriately subdued.</p>\n      </div>\n   </div>\n      <div class=\"card texture_light bg_white shadow_2 flex_auto m-x_3\">\n      <div class=\"flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_success\">\n            <div class=\"flex_shrink p_3  bg_success-n4\"><span class=\"counter counter_increment font_5 lh_0 font_display c_whsite\"></span></div>\n      <div class=\"flex_auto p_3\">At last it is good</div>\n      </div>\n      <div class=\"card-section p-x_4 p-y_3\">\n      <h4>This is a card.</h4>\n      <p>It has an easy to override visual style, and is appropriately subdued.</p>\n      </div>\n   </div>\n</div>\n\nWeight: 150\n\nStyleguide Recipes.Ordered Cards\n*/\n/* content Recipes.250 */\n/*\n\nRead More Arrow\n\nThis stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.\n\nMarkup:\n<span class=\"fa-stack font_6 order_2\">\n        <i class=\"fa-ellipsis fas fa-stack-1x\" aria-hidden=\"true\"></i>\n        <i class=\"fa-chevron-right fa-solid fa-stack-1x\" aria-hidden=\"true\" style=\" left: 20%; font-size: 115%; \"></i>\n</span>\n\n\nStyleGuide Sub.Component.Common.ReadMoreArrow \n\n*/\n/*\n\n600w x 300h \n\nMarkup:\nhttps://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.600x300\n\n*/\n/*\n\n600w x 400h \n\nMarkup:\nhttps://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.600x400\n\n*/\n/*\n\n1200w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.1200x300\n\n*/\n/*\n\n375w x 250h\n\nMarkup:\nhttps://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.375x250\n\n*/\n/*\n320w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.320x300\n\n*/\n/*\n\n1024w x 256h\n\nMarkup:\nhttps://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.1024x256\n\n*/\n/*\nAspect 21x9\n\nMarkup:\nhttps://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42\n\n\nStyleguide  Sub.Placeholder.Image.21x9\n*/\n/*\nAspect 16x9\n\nMarkup:\nhttps://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42\n\n\nStyleguide  Sub.Placeholder.Image.16x9\n*/\n/*\n\n300w x 400h\n\nMarkup:\nhttps://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.300x400\n\n*/\n/*\n\nsquare\n\nMarkup:\nhttps://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.Square\n\n*/\n/*\n\nMax 20 Character\n\nMarkup:\nDi dolores (20&nbsp;Chars)\n\nStyleguide  Sub.Placeholder.Text.20ch\n\n*/\n/*\n\nMax 30 Character\n\nMarkup:\nCommodi dolores (30&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.30ch\n\n*/\n/*\n\nMax 40 Character\n\nMarkup:\nRerum libg dero pariatur (40&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.40ch\n\n*/\n/*\n\nMax 60 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.60ch\n\n*/\n/*\n\nMax 80 Character\n\nMarkup:\nEius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.80ch\n\n*/\n/*\n\nMax 100 Character\n\nMarkup:\nOfficia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.100ch\n\n*/\n/*\n\nMax 150 Character\n\nMarkup:\nSvel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.150ch\n\n*/\n/*\n\nMax 200 Character\n\nMarkup:\nDignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.200ch\n\n*/\n/*\n\nMax 250 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.250ch\n\n*/\n/*\n\nGrid - Triple Card Holder\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography\n\nNOTE:\nTriple up cards with shaded background are used only in full screen pages\n\nStyleguide Sub.ClassList.Grid.Card.Split-Triple \n\n*/\n/*\n\nTriple Split with Sidebar\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left\n\nNOTE:\nTriple up splits\n\nStyleguide Sub.ClassList.Grid.TripleLG\n\n*/\n/*\n\nGrid - Card Holder - 50 split\n\nMarkup:\ncolumns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid\n\nNOTE:\nsplit layouts great for half page cards\n\nStyleguide Sub.ClassList.Grid.Split-50\n\n*/\n/*\n\nGridList Triple on XL\n\nMarkup:\ncolumns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none\n\nStyleguide Sub.ClassList.Grid.TripleXL \n\n*/\n/*\n\nGridList Item Basic\n\nMarkup:\nflex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius\n\nNOTE:\nIcon and Header use differnt classes because they are a simpler component.\n\nStyleguide Sub.ClassList.Grid.Item \n\n*/\n/*\n\nSubs\n\n<div><p>Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as\n    sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data\n    points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone\n    but are composed into larger, reusable structures.</p>\n<p>These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,\n    or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials\n    (<code>{{> 'Sub.X' }}</code>) to render dynamic or variable content within patterns.</p>\n<p><strong>Common use cases:</strong><br> - <code>{{> 'Sub.Sub.Data.Duration'}}</code> — Displays session duration<br> -\n    <code>{{> 'Sub.Credit' modifier_class='CME'}}</code> — Outputs a credit tag with a modifier<br> -\n    <code>{{> 'Sub.ActionButtons.Favorite'}}</code> — Interactive favorite/save button</p>\n<p><strong>Naming Convention:</strong><br> <code>Sub.Type.Name</code> — Organized by category (e.g., <code>Data</code>,\n    <code>Credit</code>, <code>ActionButtons</code>, <code>ClassList</code>)</p></div>\n\n\n\nNOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.\n\nStyleguide Sub\n*/\n/*\nPlaceholders\n\nPlaceholders are just used across the styleguide. The can be either text or image stand ins for the UI.\n\nWeight: 9999\n\nStyleguide Sub.Placeholder\n*/\n/*\nRecipe\n\nPatterns that are used through out the refactors on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe\n*/\n/*\nArticles\n\nThere are multiple sub components that are used through out the most common page type on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe.Article\n*/\n/*\nData\n\nThere are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.\n\nWeight: 500\n\nStyleguide Sub.Data\n*/\n/*\nClass Lists\n\nArches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items\n\nWeight: 2000\n\nStyleguide Sub.ClassList\n*/\n/*\n\nRich Text \n\nMarkup:\n<div class=\"reading-typography {{modifier_class}}\">\n    <h1>Lorem Ipsum</h1>\n    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href=\"#random2\" target=\"_blank\">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href=\"#random\">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>\n    <h2>Header Level 2</h2>\n    <ol>\n        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n        <li>Aliquam tincidunt mauris eu risus.</li>\n    </ol>\n    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>\n    <h3>Header Level 3</h3>\n    <ul>\n        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n        <li>Aliquam tincidunt mauris eu risus.</li>\n    </ul>\n    <button class=\"btn btn-primary\">Button</button>\n\t<details>\n        <summary ><strong>Table of Contents</strong></summary>\n        <div>\n            <ol>\n                <li data-line=\"0\" dir=\"auto\">How to Prepare for the Boards</li>\n                <li data-line=\"1\" dir=\"auto\">General Principles of Cardiovascular Medicine\n                </li>\n                <li data-line=\"2\" dir=\"auto\">Arrhythmias</li>\n                <li data-line=\"3\" dir=\"auto\">Coronary Artery Disease</li>\n                <li data-line=\"4\" dir=\"auto\">Heart Failure &amp; Cardiomyopathy</li>\n                <li data-line=\"5\" dir=\"auto\">Valvular Disease</li>\n                <li data-line=\"6\" dir=\"auto\">Pericardial Disease</li>\n                <li data-line=\"7\" dir=\"auto\">Congenital Heart Disease</li>\n                <li data-line=\"8\" dir=\"auto\">Vascular Diseases</li>\n                <li data-line=\"9\" dir=\"auto\">Systemic Hypertension and Hypotension</li>\n                <li data-line=\"10\" dir=\"auto\">Pulmonary Circulation Disorders</li>\n                <li data-line=\"11\" dir=\"auto\">Systemic Disorders Affecting the Circulatory\n                    System</li>\n                <li data-line=\"12\" dir=\"auto\">\n                    Miscellaneous\n                    <ul>\n                        <li data-line=\"13\" dir=\"auto\">Cardiovascular Genetics</li>\n                        <li data-line=\"14\" dir=\"auto\">CPR, Post-Resuscitation Care</li>\n                        <li data-line=\"15\" dir=\"auto\">Cardiac Critical Care</li>\n                        <li data-line=\"16\" dir=\"auto\">Sleep Disordered Breathing</li>\n                        <li data-line=\"17\" dir=\"auto\">Sports Cardiology</li>\n                        <li data-line=\"18\" dir=\"auto\">Pregnancy and Cardiac Disease</li>\n                        <li data-line=\"19\" dir=\"auto\">Cardiovascular Operative Management\n                        </li>\n                        <li data-line=\"20\" dir=\"auto\">Pharmacology</li>\n                        <li data-line=\"21\" dir=\"auto\">General Principles of Cardiovascular\n                            Medicine</li>\n                    </ul>\n                </li>\n            </ol>\n        </div>\n    </details>\n</div>\n\nHideCodeBlock: display_none \n\nStyleguide  Sub.Placeholder.Typography\n\n*/\n/*\nPagination\n\nPagination Design\n\n<ul class=\"br-t_3 br_0 br_secondary br_solid font_n2 justify_end lh_2 pagination ul_none\">\n  <li class=\"disabled page-item\">\n    <a class=\"a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link disabled\" href=\"#\"><i class=\"fas fa-chevron-left\"></i></a>\n  </li>\n  <li class=\"page-item\">\n    <a class=\"a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link\" href=\"#\">1</a>\n  </li>\n  <li class=\"page-item active\">\n    <a class=\"a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link\"> 2 </a>\n  </li>\n  <li class=\"page-item\">\n    <a class=\"a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link\" href=\"#\">3</a>\n  </li>\n  <li class=\"page-item\">\n    <a class=\"a:bg_secondary a:c_white-9 br_none h:bg_primary-n2 h:c_white lh_2 p_2 p-x_3 m-l_1 page-link\" href=\"#\"><i class=\"fas fa-chevron-right\"></i></a>\n  </li>\n</ul>\n\nWeight: 100\n\nStyleguide  Bootstrap.Pagination\n\n*/\n/*\nTabs\n\nA simple way to show small groups of content that should have the same level of reading hierarchy.  \n\nMarkup:\n<nav class=\"bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light\" id=\"tabContentLight\" role=\"tablist\">\n    <ul class=\"flex_column flex_row:md  nav\">\n        {{> \"Sub.Component.Structures.Tabs.Tab.LinkActive\" }}\n        {{> \"Sub.Component.Structures.Tabs.Tab.Link\" }}\n        {{> \"Sub.Component.Structures.Tabs.Tab.LinkDisabled\" }}\n        </li>\n    </ul>\n</nav>\n<div class=\"bg_black-_05 br-bl_radius br-br_radius m-x_3 p_4 reading-typography shadow_emboss-light tab-content\" id=\"nav-tabContent\">\n    <div class=\"tab-pane fade show active\" id=\"ActiveLink\" role=\"tabpanel\" aria-labelledby=\"ActiveLink\">\n        <h2 class=\"capitalize\"> consectetur adipisicing elit </h2>\n        Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.</div>\n    <div class=\"tab-pane fade\" id=\"BasicLink\" role=\"tabpanel\" aria-labelledby=\"BasicLink\">\n        <h2 class=\"capitalize\">Lorem ipsum dolor sit </h2>\n        Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.</div>\n</div>\n\nMarkupWrapperClasses:\n\nSubComponents:\nSub.Component.Structures.Tabs.Tab.LinkActives - Active Tab\nSub.Component.Structures.Tabs.Tab.Link - Tab\nSub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab\n\nCaution:  This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Component.Structures.Tabs.\n*/\n/*\nSimple Tabs: Dark Mode\n\nReverse Colored Tabs for when on dark background\n\nMarkup:\n<div class=\"m-y_4 bg_acc p_4\" id=\"nav_jump\">\n    <nav class=\"bg_black-2 c_white br_3 br_radius br_solid br_black-5 font_0 font_bold font_ui p-x_0 p-x_4:md shadow_overlap-light\">\n        <ul class=\"flex_column flex_row:md ul_none nav\">\n        {{> \"Sub.Component.Structures.Tabs.TabDark.LinkActive\" }}\n        {{> \"Sub.Component.Structures.Tabs.TabDark.Link\" }}\n        {{> \"Sub.Component.Structures.Tabs.TabDark.Link\" }}\n        {{> \"Sub.Component.Structures.Tabs.TabDark.LinkDisabled\" }}\n        </ul>\n    </nav>\n</div>\n\nWeight: 0\n\nStyleguide  Sub.Component.Structures.Tabs.TabDark\n*/\n/*\nTab Dark: Active\n\nDescription: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n<li class=\"br-t_3 br_solid:md br_white-0 m-l_1 nav-item \">\n    <a class=\"a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4 active\">\n        Active\n    </a>\n</li>\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4\n\nWeight:0\n\nStyleguide  Sub.Component.Structures.Tabs.TabDark.LinkActive\n*/\n/*\nTab Dark: Basic\n\nDescription: Dark Tab Basic Nav\n\nMarkup:\n<li class=\"br-t_3 br_solid:md br_white-0 m-l_1 nav-item\">\n    <a class=\"a:bg_accent h:underline-none c_white text-shadow_black-1 br-b_3 br_white-0 br_solid:md h:bg_secondary h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4\">\n        Link\n    </a>\n</li>\n\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4\n\nWeight:0\n\n\nStyleguide  Sub.Component.Structures.Tabs.TabDark.Link\n*/\n/*\nTab Dark: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n<li class=\"br-t_3 br_solid:md br_white-0 m-l_1 nav-item \">\n    <a class=\"bg_white-2 br-b_3 br_solid:md br_white-0 c_white-4 cursor_not-allowed disabled h:underline-none m-y_n2:md nav-link opacity-5 p-x_4 p-y_3:md\" href=\"/on-demand/industry-stage#nav_jump\" target=\"_self\">\n        Disabled\n    </a>\n</li>\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4 \n\nWeight:0\n\n\nStyleguide  Sub.Component.Structures.Tabs.TabDark.LinkDisabled\n*/\n/*\nTab: Active\n\nDescription: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n<li class=\" br-t_3 br_solid:md br_white-0 m-l_1 nav-item\">\n    <a \n        id=\"ActiveLink-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#ActiveLink\"  role=\"tab\" aria-controls=\"ActiveLink\" aria-selected=\"true\"\n        class=\"active a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4\" \n        href=\"#\">Active</a>\n</li>\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light\n\nWeight:0\n\nStyleguide  Sub.Component.Structures.Tabs.Tab.LinkActive\n*/\n/*\nTab: Basic\n\nDescription: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n<li class=\"br-t_3 br_solid:md br_white-0 m-l_1 nav-item\">\n    <a \n    id=\"BasicLink-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#BasicLink\"  role=\"tab\" aria-controls=\"BasicLink\" aria-selected=\"true\"\n    class=\"a:bg_accent-n2 h:underline-none a:c_white br-b_3 br_white-0 br_solid:md c_primary h:bg_acc-n3 h:br_accent h:c_white m-y_n2:md nav-link p-y_3:md p-x_4\" href=\"#\">Link</a>\n</li>\n\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light\n\nWeight:0\n\nStyleguide  Sub.Component.Structures.Tabs.Tab.Link\n*/\n/*\nTab: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n<li class=\"br-t_3 br_white-0 br_solid:md m-l_1 nav-item\">\n    <a class=\"br-b_3 br_solid:md br_white-0 c_black-4 opacity-5 bg_black-1 disabled h:underline-none m-y_n2:md nav-link p-x_3 p-x_4\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">Disabled</a>\n</li>\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light\n\nWeight:0\n\nStyleguide  Sub.Component.Structures.Tabs.Tab.LinkDisabled\n*/\n/*\nUI Tabs\n\nThe application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.\n\nMarkup:\n<div class=\"br_solid br_1 br_black-3\">\n    <nav class=\"flex flex_row font_ui relative\" id=\"tabContentLight\" role=\"tablist\">\n        <ul class=\"flex flex_auto flex_nowrap flex_row:md flex_column nav overflow_hidden font-size_up ul_none\">\n            {{> \"Sub.Component.Structures.UITabs.Tab.LinkActive\" }}\n            {{> \"Sub.Component.Structures.UITabs.Tab\" }}\n            {{> \"Sub.Component.Structures.UITabs.Tab.LinkDisabled\" }}\n        </ul>\n    </nav>\n    <div class=\"p_4 reading-typography tab-content br-t_1 br_solid br_black-3\" id=\"nav-tabContent\">\n        <div class=\"tab-pane fade show active\" id=\"ActiveLinkUI\" role=\"tabpanel\" aria-labelledby=\"ActiveLinkUI\">\n            {{> Sub.Placeholder.Typography }}\n        </div>\n        <div class=\"tab-pane fade\" id=\"LinkUI\" role=\"tabpanel\" aria-labelledby=\"LinkUI\">\n            {{> Sub.Placeholder.Typography }}\n        </div>\n    </div>\n</div>\n\nMarkupWrapperClasses: p_4\n\ncaution:  This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Component.Structures.UITabs\n*/\n/*\nUI Tabs Overflow\n\nThe application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.\n\nMarkup:\n<div class=\"br_solid br_1 br_black-3\">\n    <nav class=\"flex flex_row font_ui relative\" id=\"tabOverflow\" role=\"tablist\"> \n        <a class=\"disabled flex_row flex text_center bg_disabled bg_white br-r_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3\">\n                <i class=\"flex_auto self_center far fa-chevron-left\"></i>\n        </a>\n        <ul class=\"flex flex_auto flex_nowrap flex_row:md nav overflow_hidden font-size_up ul_none\">\n            {{> \"Sub.Component.Structures.UITabs.Tab.LinkActive\" }}\n            {{> \"Sub.Component.Structures.UITabs.Tab\" }}\n            {{> \"Sub.Component.Structures.UITabs.Tab\" }}\n            {{> \"Sub.Component.Structures.UITabs.Tab\" }}\n            {{> \"Sub.Component.Structures.UITabs.Tab\" }}\n            {{> \"Sub.Component.Structures.UITabs.Tab\" }}\n            {{> \"Sub.Component.Structures.UITabs.Tab.LinkDisabled\" }}\n        </ul>\n        <a class=\"disabled flex_row flex text_center bg_disabled bg_white br-l_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3\">\n                <i class=\"flex_auto self_center far fa-chevron-right\"></i>\n        </a>\n    </nav>\n    <div class=\"p_4 reading-typography tab-content br-t_1 br_solid br_black-3\" id=\"nav-tabContent\">\n        <div class=\"tab-pane fade show active\" id=\"ActiveLinkUI\" role=\"tabpanel\" aria-labelledby=\"ActiveLinkUI\">\n            {{> Sub.Placeholder.Typography }}\n        </div>\n        <div class=\"tab-pane fade\" id=\"LinkUI\" role=\"tabpanel\" aria-labelledby=\"LinkUI\">\n            {{> Sub.Placeholder.Typography }}\n        </div>\n    </div>\n</div>\n\nMarkupWrapperClasses: p_4\n\ncaution:  This item is not finalized and might be subject to change\n\nNote: Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min. \n\nWeight:0\n\nStyleguide Component.Structures.UITabs.Overflow\n*/\n/*\nTab: Default\n\nDescription: Active State of Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n<li id=\"LinkUI-tab\" data-bs-toggle=\"tab\" data-bs-target=\"#LinkUI\"  role=\"tab\" aria-controls=\"LinkUI\" aria-selected=\"true\" class=\" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1\">\n    <span \n         class=\"c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black \" \n        >Link</span>\n</li>\n\n\n\ncaution:  This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nMarkupWrapperClasses: flex ul_none\n\nWeight:0\n\nStyleguide  Sub.Component.Structures.UITabs.Tab\n*/\n/*\nTab: Active\n\nDescription: Active State of Dark Tab.  Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n<li class=\"active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1\">\n    <a \n        id=\"ActiveLinkUI-tab\"\n        data-bs-toggle=\"tab\"\n        data-bs-target=\"#ActiveLinkUI\"\n        role=\"tab\"\n        aria-controls=\"ActiveLinkUI\"\n        aria-selected=\"true\"\n        class=\"c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black \" \n        href=\"#\">Active</a>\n</li>\n\nMarkupWrapperClasses: flex ul_none\n\ncaution:  This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide  Sub.Component.Structures.UITabs.Tab.LinkActive\n*/\n/*\nTab: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n<li class=\"disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1\">\n    <a class=\"c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black \"\n        href=\"#\"\n        tabindex=\"-1\"\n        aria-disabled=\"true\">\n        Disabled</a>\n</li>\n\n\ncaution:  This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nMarkupWrapperClasses: flex ul_none\n\nWeight:0\n\nStyleguide  Sub.Component.Structures.UITabs.Tab.LinkDisabled\n*/\n/*\nScroll Overflow Script\n\nDescription: Javascript is needed to make the scrolls work on the page\n\nMarkup:\n\nMarkupWrapperClasses: p_4\n\ncaution:  This item is not finalized and might be subject to change\n\nWeight:0\n\nStyleguide  Component.Structures.UITabs.Script\n*/\n/*\nSidebar Nav\n\nDescription: Side bar for any 3 layer nav on the site. the parent node is from the main nav.\n\nMarkup:\n<nav class=\"nav-sub bg_primary c_white font_2 font_ui \">\n    <ul class=\"ul_none flex_column flex\">\n        {{> \"Component.Navigation.Sidebar.Parent\"}}\n        {{> \"Component.Navigation.Sidebar.Child\"}}\n        {{> \"Component.Navigation.Sidebar.ChildWithChildren\"}}\n        {{> \"Component.Navigation.Sidebar.Child\"}}\n        {{> \"Component.Navigation.Sidebar.Child\"}}\n        {{> \"Component.Navigation.Sidebar.ChildWithGrandChildren\"}}\n    </ul>\n</nav>\n\nWeight:-1000\n\nMarkupWrapperClasses: max-w_25 m_auto \n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nStyleguide Component.Navigation.Sidebar\n*/\n/*\nParent NavItem\n\nDescription: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.\n\nMarkup:\n<li class=\"nav-item font-size_up\" data-nav=\"parent\">\n    <div class=\"bg_black-4 \">\n        <a class=\"text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center\">Parent Link: Tree starts from this node</a>\n    </div>\n</li>\n\nWeight: -100\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.Parent\n*/\n/*\nChild NavItem\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\ndefault     -  No added class \nactive      -  Nav Item changes its decoration if this the page the user is on.\n\nMarkup:\n<li class=\"nav-item {{modifier_class}}\" data-nav=\"child\">\n    <div class=\"flex flex_row\">\n        <div class=\"flex flex_column flex_none justify_start\">\n            <div class=\"flex_none\">\n                <span class=\"fa-stack\">\n                    <i class=\"fas fa-spacer fa-stack-1x\"></i>\n                </span>\n            </div>\n        </div>\n        <div class=\"flex_auto self_center\">\n            <a class=\"text-shadow_black-1 {{modifier_class}} c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3\">Child Link</a>\n        </div>\n    </div>\n</li>\n\nWeight: 10\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.Child\n*/\n/*\nToggle Child\n\nDescription: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.\n\ndefault     -  the toggle when it doesn't have an active class still shades on hover\nactive      -  shade the toggle\n\nMarkup:\n<div class=\"{{modifier_class}} br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white\">\n    {{> \"Component.Navigation.Toggle.Advanced\" modifier_class=\".childNavCollapse\" }}\n</div>\n\nWeight: -10\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.ChildToggle\n*/\n/*\nChild NavItem With Children\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\n\nMarkup:\n<li class=\"nav-item {{modifier_class}}\" data-nav=\"child\">\n    <div class=\"flex flex_row\">\n        {{> \"Component.Navigation.Sidebar.ChildToggle\" modifier_class=\"collapsed\"}}\n        <div class=\"flex_auto self_center\">\n            <a class=\"text-shadow_black-1 {{modifier_class}} c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3\">Child with Children Links</a>\n            <nav class=\"nav-sub-child bg_white-2 font-size_down collapse childNavCollapse\" >\n                <ul class=\"ul_none flex_column flex\">\n                    {{> \"Component.Navigation.Sidebar.Child\" }}\n                    {{> \"Component.Navigation.Sidebar.Child\" }}\n                    {{> \"Component.Navigation.Sidebar.Child\" }}\n                    {{> \"Component.Navigation.Sidebar.Child\" }}\n                </ul>\n            </nav>\n        </div>\n    </div>\n</li>\n\nWeight: 15\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.ChildWithChildren\n*/\n/*\nChild NavItem With Grand Children\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\nMarkup:\n<li class=\"nav-item active\" data-nav=\"child\">\n    <div class=\"flex flex_row\">\n        {{> \"Component.Navigation.Sidebar.ChildToggle\"  modifier_class=\"active\"}}\n        <div class=\"flex_auto self_center\">\n            <a class=\"text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3\">Child with Children Links</a>\n            <nav class=\"nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show\">\n                <ul class=\"ul_none flex_column flex\">\n                    {{> \"Component.Navigation.Sidebar.Child\" }}\n                    {{> \"Component.Navigation.Sidebar.Child\" }}\n                    {{> \"Component.Navigation.Sidebar.Child\" }}\n                    {{> \"Component.Navigation.Sidebar.Child\" }}\n                    <li class=\"nav-item  active \" data-nav=\"grandchild\">\n                        <div class=\"flex flex_row\">\n                            {{> \"Component.Navigation.Sidebar.ChildToggle\"  modifier_class=\"active\"}}\n                            <div class=\"flex_auto self_center\">\n                                <a class=\"text-shadow_black-1 active c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center  a:bg_black-3\">Child with Children Links</a>\n                                <nav class=\"nav-sub-child bg_white-2 collapse show childNavCollapse\">\n                                    <ul class=\"ul_none flex_column flex\">\n                                        {{> \"Component.Navigation.Sidebar.GreatGrandchild\"  }}\n                                        {{> \"Component.Navigation.Sidebar.GreatGrandchild\" }}\n                                        {{> \"Component.Navigation.Sidebar.GreatGrandchild\"  modifier_class=\"active\"}}\n                                        {{> \"Component.Navigation.Sidebar.GreatGrandchild\" }}\n                                    </ul>\n                                </nav>\n                            </div>\n                        </div>\n                    </li>\n                </ul>\n            </nav>\n        </div>\n    </div>\n</li>\n\nWeight: 15\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nStyleguide Component.Navigation.Sidebar.ChildWithGrandChildren\n*/\n/*\nGreat Grandchild NavItem\n\nDescription: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.\n\ndefault     -  No added class \nactive      -  Nav Item changes its decoration if this the page the user is on.\n\nMarkup:\n<li class=\"nav-item {{modifier_class}} \" data-nav=\"greatGrandChild\">\n    <div class=\"flex flex_row\"> \n        <div class=\"flex_auto self_center\">\n            <a class=\" {{modifier_class}} text-shadow_black-1  a:bg_black-3 c_white-9 p-y_2 p-r_3 p-l_4 w_100 h:c_white inline-block h:underline self_center\">Great Grand Child Links</a>\n        </div>\n    </div>\n</li>\n\nWeight: 100\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.GreatGrandchild\n*/\n/*\nBootstrap Toggle Rotation\n\nThe toggles for bootstrap collapses use a `+` icon that twists to an `x` when the elements doesn't have `collapsed` or `show` as a class. to reduce confusion the class has a set rotation and speed attached to it. `a:rotation` is applied to the tow specific icons `fa-times` and `fa-chevron-up` only.<div class=\"p-b_3\"><span class=\"bg_highlight br_radius c_white inline-block font_n1 p-y_3 p-x_5 sg\">These classes are effected by the parent having `collapsed` state.</span></div>\n\nexpanded                  - when the associated content is expanded the toggle will look like this\ncollapsed                       - when the associated content is collapsed the class is added to the toggle and it will look like this. \n\nMarkup:\n<div class=\"flex_none p_2 {{modifier_class}}\" aria-expanded=\"false\" data-bs-toggle=\"collapse\" data-bs-target=\"#pageHubChild\" aria-controls=\"#pageHubChild\">\n        <i class=\"a:rotation c_primary fa-fw fa-times fas self_center text_center\"></i>\n</div>\n<div class=\"flex_none p_2 {{modifier_class}}\" aria-expanded=\"false\" data-bs-toggle=\"collapse\" data-bs-target=\"#pageHubChild\" aria-controls=\"#pageHubChild\">\n        <i class=\"a:rotation c_primary fa-fw fa-chevron-up fas self_center text_center\"></i>\n</div>\n<div class=\"flex_none p_2 {{modifier_class}}\" aria-expanded=\"false\" data-bs-toggle=\"collapse\" data-bs-target=\"#pageHubChild\" aria-controls=\"#pageHubChild\">\n        <span class=\"fa-stack fa-2x\">\n        <i class=\"fas fa-minus fa-stack-1x\"></i>\n        <i class=\"fas fa-minus rotate_90 a:rotation fa-stack-1x \"></i>\n        </span>\n</div>\n<div class=\"flex_none p_2 {{modifier_class}}\" aria-expanded=\"false\" data-bs-toggle=\"collapse\" data-bs-target=\"#pageHubChild\" aria-controls=\"#pageHubChild\">\n        <span class=\"fa-stack fa-2x\">\n        <i class=\"fas fa-square fa-stack-2x c_black\"></i>\n        <i class=\"fas fa-minus fa-stack-1x c_white\"></i>\n        <i class=\"fas fa-minus rotate_90 a:rotation fa-stack-1x  c_white\"></i>\n        </span>\n</div>\n\n\nWeight: 100\n\nStyleguide Component.Navigation.Toggle.Rotation\n\n*/\n/*\nToggle \n\nToggle elements of a collapse with user feed back of the icon rotating.\n\n#targetName -  the name of the target of the collapse\n\nMarkup:\n<div class=\"flex_none p_2\" data-bs-toggle=\"collapse\" data-bs-target=\"{{modifier_class}}\" aria-controls=\"{{modifier_class}}\" aria-expanded=\"true\">\n        <i class=\"a:rotation fa-fw fa-times fas self_center text_center\"></i>\n</div>\n\nWeight: -10\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle\n*/\n/*\nToggle Chevron\n\nToggle elements of a collapse with user feed back of the icon rotating.\n\n#targetName -  the name of the target of the collapse\n\nMarkup:\n<div class=\"a:bg_black-3 h:bg_black-4 flex_none p_2\" data-bs-toggle=\"collapse\" data-bs-target=\"{{modifier_class}}\" aria-controls=\"{{modifier_class}}\" aria-expanded=\"true\">\n        <i class=\"a:rotation fa-fw fa-chevron-up fas self_center text_center\"></i>\n</div>\n\nWeight: -80\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.Chevron\n*/\n/*\nCollapse Toggle Advanced\n\nToggle elements of a collapse with user feed back of the icon morphing.\n\n#targetName -  the name of the target of the collapse\n\nMarkup:\n<div class=\"flex_none\" aria-expanded=\"false\" data-bs-toggle=\"collapse\" data-bs-target=\"{{modifier_class}}\" aria-controls=\"{{modifier_class}}\">\n        <span class=\"fa-stack\">\n        <i class=\"fas fa-minus fa-stack-1x\"></i>\n        <i class=\"fas fa-minus rotate_90 a:rotation fa-stack-1x \"></i>\n        </span>\n</div>\n\nWeight: -100\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.Advanced\n*/\n/*\nCollapse Toggle Advanced with Square\n\nToggle elements of a collapse with user feed back of the icon morphing.\n\n#targetName -  the name of the target of the collapse\n\nMarkup:\n<div class=\"flex_none\" aria-expanded=\"false\" data-bs-toggle=\"collapse\" data-bs-target=\"{{modifier_class}}\" aria-controls=\"{{modifier_class}}\">\n        <span class=\"fa-stack\">\n        <i class=\"fas fa-square fa-stack-2x\"></i>\n        <i class=\"fas fa-minus fa-stack-1x c_white\"></i>\n        <i class=\"fas fa-minus rotate_90 a:rotation fa-stack-1x  c_white\"></i>\n        </span>\n</div>\n\nWeight: -90\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.AdvancedSquare\n*/\n/*\nAccordion\n\nIn content accordions are styled differently to User interface accordions.  The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.\n\nMarkup:\n<div class=\"relative\">\n    <header id=\"accordion_header\" class=\"flex flex_row sticky t_n2 bg_white shadow_overlap-light br_solid br_1 br_black-2 z_2 \">\n        <div class=\"h:bg_primary-5 m_2 c_primary h:c_primary-n2 br_radius\">\n            {{> \"Component.Navigation.Toggle.Advanced\" modifier_class=\"#content_accordion\"}}\n        </div>\n        <div class=\" font-size_up flex_auto flex flex_row justify_center p-y_2\">\n            <div class=\"flex_auto self_center reading-typography no-margins\">\n               <h3> Accordion Header Level 3</h3>\n            </div>\n        </div>\n    </header>\n    <main id=\"content_accordion\" class=\"bg_black-_05 br-bl_radius br-br_radius m-x_0 m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light tab-content transition_4\"  aria-labelledby=\"accordion_header m-x_3\" >\n    {{> Sub.Placeholder.Typography }}\n    </main>\n</div>\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nWeight:0\n\nStyleguide  Component.Accordion\n*/\n/*\nAccordion Child\n\nDescription: Sometimes the content needs be collapsed at a secondary level to make it scannable. \n\nMarkup:\n<div class=\"relative m-b_2\">\n    <header id=\"accordion_header-child\" class=\"flex flex_row sticky t_5 bg_white shadow_bevel-light br_radius br_solid br_1 br_black-2 z_3 \">\n        <div class=\"h:bg_primary-4 m_2 c_primary h:c_primary-n3 br_radius\">\n            {{> \"Component.Navigation.Toggle\" modifier_class=\"#content_accordion-child\"}}\n        </div>\n        <div class=\" flex_auto flex flex_row justify_center p-y_2\">\n            <div class=\"flex_auto self_center reading-typography no-margins\">\n                <h4> Nested Accordion Header Level 4</h4>\n            </div>\n        </div>\n    </header>\n    <main id=\"content_accordion-child\" class=\"bg_black-1 m-t_n2 br_radius p-t_3 p-x_3 p-x_4:md p-b_4 reading-typography tab-content transition_4 shadow_emboss-light\"  aria-labelledby=\"accordion_header-child\" >\n    {{> Sub.Placeholder.Typography }}\n    </main>\n</div>\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nWeight:0\n\nStyleguide Component.Accordion.Child\n*/\n/*\nAccordion Nested Example\n\nIn content accordions are styled differently to User interface accordions.  The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.\n\nMarkup:\n<div class=\"relative\">\n    <header id=\"accordion_header-nested\" class=\"flex flex_row sticky t_n2 bg_white shadow_overlap-light br_solid br_1 br_black-2 z_2 \">\n        <div class=\"h:bg_primary-5 m_2 c_primary h:c_primary-n2 br_radius\">\n            {{> \"Component.Navigation.Toggle.Advanced\" modifier_class=\"#content_accordion-parent\"}}\n        </div>\n        <div class=\" font-size_up flex_auto flex flex_row justify_center p-y_2\">\n            <div class=\"flex_auto self_center reading-typography no-margins\">\n               <h3> Accordion Header Level 3</h3>\n            </div>\n        </div>\n    </header>\n    <main id=\"content_accordion-parent\" class=\"bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light tab-content transition_4\"  aria-labelledby=\"accordion_header-nested\" >\n        <h2>Aenean commodo ligula eget dolor aenean massa</h2>\n        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing \n        elit. Aenean commodo ligula eget dolor. Aenean massa. \n        Cum sociis natoque penatibus et magnis dis parturient \n        montes, nascetur ridiculus mus. Donec quam felis, \n        ultricies nec, pellentesque eu, pretium quis, sem.</p>    \n        {{> Component.Accordion.Child }}\n        {{> Component.Accordion.Child }}\n    </main>\n</div>\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nWeight:0\n\nStyleguide  Component.Accordion.Nested\n*/\n/*\nACC.org Footer\n\nThe Footer of ACC.org \n\nMarkup:\n<div id=\"footer-wrap\" class=\"max-w_90\">\n<!-- ********************************** breadcrumbs ********************************** -->\n<div id=\"breadcrumbs\" class=\"bg_acc breadcrumbs-container c_white font_0 font_ui p-x_4 p_3\">\n\t<b class=\"breadcrumbs-title\">YOU ARE HERE: </b>\n\tHome\n</div>\n<!-- This is the inner footer that we cache -->\n<div id=\"footer\" role=\"contentinfo\" class=\"flex bg_shade-n3 flex_column flex_inline flex_wrap flex_row:md p-x_3 p-y_4 p-y_0:lg w_100\">\n\t<div class=\"flex_auto p-x_3 p-y_4:lg w_25:lg w_50:md font_ui\">\n\t\t<h2 class=\"font_0 font_1:lg font_accent m-b_0:md m-b_2\">\n\t\t\t<a href=\"//www.acc.org/guidelines\" target=\"_parent\" title=\"Guidelines\" class=\"c_white h:c_primary-3\">Guidelines</a>\n\t\t</h2>\n\t\t<h2 class=\"font_0 font_1:lg font_accent m-b_0:md m-b_2  m-t_4:md\">\n\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/jacc-journals\">JACC Journals on ACC.org</a>\n\t\t</h2>\n\t\t<ul class=\"block:md display_none font_0:lg font_n1 m-b_4 ul_none\">\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"http://www.acc.org/jacc-journals?w_nav=FN#journal=Journal of the American College of Cardiology\">JACC Journals</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"http://www.acc.org/jacc-journals?w_nav=FN#journal=JACC: Basic to Translational Science\">JACC: Basic to Translational Science</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"http://www.onlinejacc.org/CardioOncology\" target=\"_blank\">JACC: CardioOncology</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/jacc-journals#journal=JACC: Cardiovascular Imaging\" target=\"_parent\" title=\"JACC: Cardiovascular Imaging\">JACC: Cardiovascular Imaging\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/jacc-journals#journal=JACC: Cardiovascular Interventions\" target=\"_parent\" title=\"JACC: Cardiovascular Interventions\">JACC: Cardiovascular Interventions\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"https://casereports.onlinejacc.org/\" target=\"_blank\">JACC: Case Reports</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"http://www.acc.org/jacc-journals?w_nav=FN#journal=JACC: Clinical Electrophysiology\">JACC: Clinical Electrophysiology</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/jacc-journals#journal=JACC: Heart Failure\" target=\"_parent\" title=\"JACC Heart Failure\">JACC Heart Failure</a>\n\t\t\t</li>\n\t\t</ul>\n\t\t<h2 class=\"font_0 font_1:lg font_accent m-b_0:md m-b_2 m-t_4:md\">\n\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/membership\" target=\"_parent\" title=\"Membership \">Membership\n\t\t\t</a>\n\t\t</h2>\n\t\t<ul class=\"block:md display_none font_0:lg font_n1 m-b_4 ul_none\">\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/membership/about-membership\">About Membership</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/membership/become-a-member\">Become a Member</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/membership/renew-your-membership\">Renew Your Membership</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/membership/member-benefits-and-resources\">Member Benefits and Resources</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/membership/sections-and-councils\">Member Sections</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\"><a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/membership/chapters\">Chapters</a></li>\n\t\t\t<li class=\"reverse-indent\"><a class=\"c_white h:c_primary-3\" href=\"//www.acc.org\">Member Directory</a></li>\n\t\t</ul>\n\t\t<h2 class=\"font_0 font_1:lg font_accent m-b_0:md m-b_2 m-t_4:md\">\n\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc\" title=\"About ACC\">About ACC</a>\n\t\t</h2>\n\t\t<ul class=\"block:md display_none font_0:lg font_n1 m-b_4 ul_none\">\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/our-strategic-direction\">Our Strategic Direction</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/our-history\" target=\"_parent\" title=\"Our History \">Our History\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/our-bylaws-and-code-of-ethics\">Our Bylaws and Code of Ethics</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/leadership\">Leadership and Governance</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/industry-relations\">Industry Relations</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/support-the-acc\">Support the ACC</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/jobs-at-the-acc\">Jobs at the ACC</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/press-releases\">Press Releases</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\"><a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/social-media\">Social Media</a></li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/about-acc/book-our-conference-center\">Book Our Conference Center</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\t<div class=\"flex_auto p-x_3 p-y_4:lg w_25:lg w_50:md font_ui\">\n\t\t<h2 class=\"font_0 font_1:lg font_accent m-b_0:md m-b_2\">\n\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics\">Clinical Topics</a>\n\t\t</h2>\n\t\t<ul class=\"block:md display_none font_0:lg font_n1 m-b_4 ul_none\">\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/acute-coronary-syndromes\">Acute Coronary Syndromes</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/anticoagulation-management\">Anticoagulation Management</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/arrhythmias-and-clinical-ep\">Arrhythmias and Clinical EP</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/cardiac-surgery\">Cardiac Surgery</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/cardio-oncology\">Cardio-Oncology</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/stable-ischemic-heart-disease/chronic-angina\">Chronic Angina</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/congenital-heart-disease-pediatric-cardiology\">Congenital Heart Disease and Pediatric Cardiology</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/diabetes-and-cardiometabolic-disease\">Diabetes and Cardiometabolic Disease</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/dyslipidemia\">Dyslipidemia</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/geriatric-cardiology\">Geriatric Cardiology</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/heart-failure-and-cardiomyopathies\">Heart Failure and Cardiomyopathies</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/dyslipidemia/hypertriglyceridemia\">Hypertriglyceridemia</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/invasive-cardiovascular-angiography-and-intervention\">Invasive Cardiovascular Angiography and Intervention</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/noninvasive-imaging\">Noninvasive Imaging</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/pericardial-disease\">Pericardial Disease</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\"><a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/prevention\">Prevention</a></li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/pulmonary-hypertension-and-venous-thromboembolism\">Pulmonary Hypertension and Venous Thromboembolism</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/sports-and-exercise-cardiology\">Sports and Exercise Cardiology</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/stable-ischemic-heart-disease\">Stable Ischemic Heart Disease</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/valvular-heart-disease\">Valvular Heart Disease</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/clinical-topics/vascular-medicine\">Vascular Medicine</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\t<div class=\"flex_auto p-x_3 p-y_4:lg w_25:lg w_50:md font_ui\">\n\t\t<h2 class=\"font_0 font_1:lg font_accent m-b_0:md m-b_2\">\n\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/latest-in-cardiology\">Latest in Cardiology</a>\n\t\t</h2>\n\t\t<ul class=\"block:md display_none font_0:lg font_n1 m-b_4 ul_none\">\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/latest-in-cardiology#theme=Clinical Updates and Discoveries\">Clinical Updates &amp; Discoveries</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/latest-in-cardiology#theme=Advocacy and Policy\">Advocacy &amp; Policy</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/latest-in-cardiology#theme=Perspectives and Analysis\">Perspectives &amp; Analysis</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/latest-in-cardiology#theme=Meeting Coverage\">Meeting Coverage</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/membership/member-benefits-and-resources/acc-member-publications\">ACC Member Publications</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/latest-in-cardiology/features/podcasts\">ACC Podcasts</a>\n\t\t\t</li>\n\t\t</ul>\n\t\t<h2 class=\"font_0 font_1:lg font_accent m-b_0:md m-b_2 m-t_4:md\">\n\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/education-and-meetings\">Education and Meetings</a>\n\t\t</h2>\n\t\t<ul class=\"block:md display_none font_0:lg font_n1 m-b_4 ul_none\">\n\t\t\t<li class=\"reverse-indent\"><a class=\"c_white h:c_primary-3\" href=\"//www.acc.org\">Online Learning Catalog</a></li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/education-and-meetings/maintenance-of-certification-information-hub\">Understanding MOC</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/education-and-meetings/products-and-resources\">Products and Resources</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/education-and-meetings/image-and-slide-gallery\">Image and Slide Gallery</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/education-and-meetings/meetings\">Meetings</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"https://accscientificsession.acc.org/\" target=\"_blank\">Annual Scientific Session</a>\n\t\t\t</li>\n\t\t</ul>\n\t\t<h2 class=\"font_0 font_1:lg font_accent m-b_0:md m-b_2 m-t_4:md\">\n\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/tools-and-practice-support\">Tools and Practice Support</a>\n\t\t</h2>\n\t\t<ul class=\"block:md display_none font_0:lg font_n1 m-b_4 ul_none\">\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"http://cvquality.acc.org/\">Quality Improvement for Institutions</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\"><a class=\"c_white h:c_primary-3 block\" href=\"https://www.ncdr.com/webncdr/\" target=\"_blank\">NCDR <i class=\"c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2\" style=\"text-indent: 0;\"></i></a></li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"https://www.cardiosmart.org/\" target=\"_blank\">CardioSmart  <i class=\"c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2\" style=\"text-indent: 0;\"></i></a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"https://cvquality.acc.org/Accreditation\" target=\"_blank\">Accreditation Services  <i class=\"c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2\" style=\"text-indent: 0;\"></i></a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/tools-and-practice-support/clinical-toolkits\">Clinical Toolkits</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/tools-and-practice-support/mobile-resources\">Mobile Resources</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/tools-and-practice-support/advocacy-at-the-acc\" target=\"_parent\">Advocacy at the ACC</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3 \" href=\"http://www.healthecareers.com/acc\" target=\"_blank\">Cardiology Careers <i class=\"c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2\" style=\"text-indent: 0;\"></i></a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/tools-and-practice-support/practice-solutions\">Practice Solutions</a>\n\t\t\t</li>\n\t\t\t<li class=\"reverse-indent\">\n\t\t\t\t<a class=\"c_white h:c_primary-3\" href=\"//www.acc.org/tools-and-practice-support/quality-programs\">Quality Programs</a>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n\t<!-- column 4 -->\n\t<div class=\"flex_auto p-x_3 p-y_4:lg w_25:lg w_50:md relative\">\n\t\t<section class=\"acc-websites m-y_3\">\n\t\t\t<nav class=\"clearfix block font_bold font_ui w_100\">\n\t\t\t\t<ul class=\"font_1 lh_4 ul_none\">\n\t\t\t\t\t<li class=\"\">\n\t\t\t\t\t\t<a target=\"_blank\" class=\"c_white block flex h:bg_black-2 h:c_white\" href=\"http://www.acc.org\">\n\t\t\t\t\t\t\t<span class=\"inline-block flex_auto p-l_3 self_center\">ACC</span>\n\t\t\t\t\t\t\t<i class=\"flex_shrink self_center fas p-r_3 c_white h:c_white fa-external-link-square \"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"\">\n\t\t\t\t\t\t<a target=\"_blank\" class=\"c_white block flex h:bg_black-2 h:c_white\" href=\"https://cvquality.acc.org/Accreditation?\">\n\t\t\t\t\t\t\t<span class=\"inline-block flex_auto p-l_3 self_center\">Accreditation Services</span>\n\t\t\t\t\t\t\t<i class=\"flex_shrink self_center fas p-r_3 c_white h:c_white fa-external-link-square \"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"\">\n\t\t\t\t\t\t<a target=\"_blank\" class=\"c_white block flex h:bg_black-2 h:c_white\" href=\"http://www.cardiosmart.org\">\n\t\t\t\t\t\t\t<span class=\"inline-block flex_auto p-l_3 self_center\">CardioSmart</span>\n\t\t\t\t\t\t\t<i class=\"flex_shrink self_center fas p-r_3 c_white h:c_white fa-external-link-square \"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"\">\n\t\t\t\t\t\t<a target=\"_blank\" class=\"c_white block flex h:bg_black-2 h:c_white\" href=\"http://www.onlinejacc.org/\">\n\t\t\t\t\t\t\t<span class=\"inline-block flex_auto p-l_3 self_center\">JACC Journals</span>\n\t\t\t\t\t\t\t<i class=\"flex_shrink self_center fas p-r_3 c_white fa-external-link-square \"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"\">\n\t\t\t\t\t\t<a target=\"_blank\" class=\"c_white block flex h:bg_black-2 h:c_white\" href=\"http://www.ncdr.com\">\n\t\t\t\t\t\t\t<span class=\"inline-block flex_auto p-l_3 self_center\">NCDR</span>\n\t\t\t\t\t\t\t<i class=\"flex_shrink self_center fas p-r_3 c_white h:c_white fa-external-link-square \"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t</section>\n\t\t<section class=\"address c_white\">\n\t\t\t<address>\n\t\t\t\t<!-- http://microformats.org/wiki/hcard -->\n\t\t\t\t<h4 class=\"m-b_0 font_bold font_copy font_normal font_1 m-t_4:md\">Heart House</h4>\n\t\t\t\t<div class=\"font_ui font_0\">\n\t\t\t\t\t<ul class=\"ul_none  lh_2\">\n\t\t\t\t\t\t<li class=\"m-b_1 m-b_3:md font_normal\">\n\t\t\t\t\t\t\t<span class=\"street-address\">2400 N. St. NW</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li class=\"m-b_1 m-b_3:md font_normal\">\n\t\t\t\t\t\t\t<span class=\"locality \">Washington</span>,\n\t\t\t\t\t\t\t<span class=\"city-name \">\n\t\t\t\t\t\t\t\t<abbr title=\"District of Colombia\">DC</abbr>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span class=\"postal-code\">20037</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li class=\"m-b_1 m-b_3:md font_normal\">\n\t\t\t\t\t\t\t<a href=\"mailto:MemberCare@acc.org\" class=\"email c_white text_underline  h:c_white \">\n\t\t\t\t\t\t\t\t<strong class=\"p-r_2 inline block:md inline:lg\">Email:</strong>\n\t\t\t\t\t\t\t\t<span class=\"inline block:md inline:lg\">MemberCare@acc.org</span></a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t\t<ul class=\"ul_none lh_2\">\n\t\t\t\t\t\t<li class=\"m-b_1 m-b_3:md font_normal\">\n\t\t\t\t\t\t\t<a tel=\"+12023756000\" href=\"tel:+12023756000\" class=\"tel c_white h:c_white h:underline\">\n\t\t\t\t\t\t\t\t<strong class=\"p-r_2 block:md inline:lg\">Phone:</strong><span class=\" block:md inline:lg\">(202) 375-6000, ext. 5603</span></a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li class=\"m-b_1 m-b_3:md font_normal\">\n\t\t\t\t\t\t\t<a tel=\"+18002574737\" href=\"tel:+18002534636.5603\" class=\"tel c_white h:c_white h:underline\">\n\t\t\t\t\t\t\t\t<strong class=\"p-r_2 block:md inline:lg\">Toll Free:</strong><span class=\" block:md inline:lg\">(800) 253-4636, ext. 5603</span></a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li class=\"m-b_1 m-b_3:md font_normal\">\n\t\t\t\t\t\t\t<a fax=\"+12023757000\" href=\"fax:+12023757000\" class=\"fax c_white h:c_white h:underline\">\n\t\t\t\t\t\t\t\t<strong class=\"p-r_2 block:md inline:lg\">Fax:</strong>\n\t\t\t\t\t\t\t\t<span class=\"block:md inline:lg\">(202) 375-7000</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t</address>\n\t\t\t<div class=\"logo_primary-alt max-w_30 bg_left\" style=\"max-height: 90px;\">\n\t\t\t\t<span class=\"alt-text\">logo_primary-alt max-w_10</span>\n\t\t\t</div>\n\t\t</section>\n\t\t<section class=\"absolute:md b_4 l_0 m-t_4 p-t_0:md p-t_5 r_0 relative social\">\n\t\t\t<ul class=\"flex social-bar ul_none c_white h:c_white m_0\">\n\t\t\t\t<li class=\"flex_auto m-r_2\"><a href=\"https://twitter.com/accintouch\" target=\"_blank\" class=\"twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-square-x-twitter\"></i></a></li>\n\t\t\t\t<li class=\"flex_auto m-r_2\"><a href=\"https://www.facebook.com/AmericanCollegeofCardiology\" target=\"_blank\" class=\"facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-facebook-square\"></i></a></li>\n\t\t\t\t<li class=\"flex_auto m-r_2\"><a href=\"https://www.linkedin.com/company/american-college-of-cardiology/\" target=\"_blank\" class=\"linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-linkedin\"></i></a></li>\n\t\t\t\t<li class=\"flex_auto m-r_2\"><a href=\"http://www.youtube.com/user/ACCinTouch\" target=\"_blank\" class=\"youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-youtube\"></i></a></li>\n\t\t\t\t<li class=\"flex_auto m-r_2\"><a href=\"https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US\" target=\"_blank\" class=\"google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-google-play\"></i></a></li>\n\t\t\t\t<li class=\"flex_auto m-r_2\"><a href=\"https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps\" target=\"_blank\" class=\"apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity\"><i class=\"fab fa-apple\"></i></a></li>\n\t\t\t</ul>\n\t\t</section>\n\t</div>\n</div>\n<!-- / footer -->\n<div id=\"subfooter bg_primary-n1 c_white\" class=\"bg_primary c_white font_n1 p-x_4 p-y_4\">\n\t<ul class=\"block footer-bottom-links ul_none\">\n\t\t<li class=\"inline p_2\">\n\t\t\t<a href=\"//www.acc.org/footer-pages/media-center\" class=\"c_white-6 h:c_white\">Media Center</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a href=\"//www.acc.org/footer-pages/quick-start-guide\" class=\"c_white-6 h:c_white\">ACC.org Quick Start Guide</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/advertising-and-sponsorship-policy\">Advertising &amp; Sponsorship Policy</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/clinical-content-disclaimer\">Clinical Content Disclaimer</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/editorial-board\">Editorial Board</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/privacy-policy\">Privacy Policy</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/registered-user-agreement\">Registered User Agreement</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/terms-and-conditions\">Terms of Service</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/cookie-policy\">Cookie Policy</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/member-hub-terms-of-use\">Member Hub Terms of Use</a>\n\t\t</li>\n\t\t<li class=\"inline p_2\">\n\t\t\t<a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/sitemap-acc.xml\">Site Map</a>\n\t\t</li>\n\t</ul>\n\t<!-- /footer-bottom-links -->\n\t<p class=\"c_white-5 font_italic font_n2 legal m-b_2 m-t_3\">\n\t\t© 2019 American College of Cardiology Foundation. All rights reserved.\n\t</p>\n</div>\n<!-- /subfooter -->\n</div>\n\nNote: \nWeight: -1\n\nStyleguide Component.Navigation.Footer.Complete\n\n*/\n/*\nPage Hub\n\nA collection of links that collapses the children of the nav item.\n\nMarkup:\n<nav class=\"flex flex_row:md flex_column gap-x_4 gap-y_4 gap_4\">\n    <div class=\"flex flex_column gap-y_4 flex_none:md w_50:md\">\n    {{> \"Component.Navigation.PageHub.Group\"}}\n    {{> \"Component.Navigation.PageHub.Group\"}}\n    {{> \"Component.Navigation.PageHub.Single\" }}\n    {{> \"Component.Navigation.PageHub.Group\"}}\n    </div>\n    <div class=\"flex flex_column gap-y_4 flex_none:md w_50:md\">\n    {{> \"Component.Navigation.PageHub.Group\"}}\n    {{> \"Component.Navigation.PageHub.Group\"}}\n    {{> \"Component.Navigation.PageHub.Group\"}}\n    </div>\n</nav>\n\nWeight: 0\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nStyleguide Component.Navigation.PageHub\n*/\n/*\nPage Hub Single\n\nA collection of links that collapses the children of the nav item.\n\nMarkup:\n<ul class=\"c_primary font_copy ul_none font_1\">\n    <li class=\"nav-item active\" data-nav=\"child\">\n        <div class=\"flex flex_row\">\n              <div class=\"opacity_0 flex flex_column flex_none font-size_down p-y_2 justify_start\" aria-expanded=\"false\">\n                <div class=\"flex_none \" >\n                        <span class=\"fa-stack\">\n                        <i class=\"fas fa-minus fa-stack-1x\"></i>\n                        <i class=\"fas fa-minus rotate_90 a:rotation fa-stack-1x \"></i>\n                        </span>\n                </div>\n            </div>\n            <div class=\"flex_auto self_center\">\n                <a class=\"active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3\">Parent Nav</a>\n            </div>\n        </div>\n    </li>\n</ul>\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight: 0\n\nStyleguide Component.Navigation.PageHub.Single\n*/\n/*\nPage Hub Group\n\nA collection of links that collapses the children of the nav item.\n\nMarkup:\n<ul class=\"c_primary font_copy ul_none font_1\">\n    <li class=\"nav-item active\" data-nav=\"child\">\n        <div class=\"flex flex_row\">\n              <div class=\"flex flex_column flex_none font-size_down p-y_2 justify_start c_primary h:c_primary-n3 br_radius h:bg_primary-5 collapsed\" aria-expanded=\"false\" data-bs-toggle=\"collapse\" data-bs-target=\"#pageHubChild\" aria-controls=\"#pageHubChild\">\n                <div class=\"flex_none\" >\n                        <span class=\"fa-stack\">\n                        <i class=\"fas fa-minus fa-stack-1x\"></i>\n                        <i class=\"fas fa-minus rotate_90 a:rotation fa-stack-1x \"></i>\n                        </span>\n                </div>\n            </div>\n            <div class=\"flex_auto self_center\">\n                <a class=\"active p-y_2 w_100 inline-block h:underline self_center font-size_up font_medium p-l_3\">Parent Nav</a>\n                <nav class=\"nav-sub-child font-size_down collapse \" id=\"pageHubChild\">\n                    <ul class=\"ul_none flex_column flex br-l_1 br_solid br_primary-5  m-t_3 p-l_3 gap-y_3 lh_1\">\n                        {{> \"Component.Navigation.PageHub.ChildrenLink\" modifier_class=\"Child Link\"}}\n                        {{> \"Component.Navigation.PageHub.ChildrenLink\" modifier_class=\"Est labore aut sed cumque voluptas fugit. Velit veritatis pariatur nulla. \"}}\n                        {{> \"Component.Navigation.PageHub.ChildrenLink\" modifier_class=\"Quia architecto aut sapiente vitae ad culpa. Ipsa tempore corporis ut dolor. Et minima inventore sapiente quia animi.\"}}\n                        {{> \"Component.Navigation.PageHub.ChildrenLink\" modifier_class=\" Est dolor recusandae aut exercitationem occaecati deleniti.\"}}\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </li>\n</ul>\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight: 0\n\nStyleguide Component.Navigation.PageHub.Group\n*/\n/*\nPage Hub Children\n\nChild link item for the page hub. \n\nChild Link      - Text of the link\n\nMarkup:\n<li class=\"nav-item\" data-nav=\"child\">\n    <div class=\"flex flex_row\"> \n        <div class=\"flex_auto self_center p-l_3\">\n            <a class=\"c_primary h:c_primary-n2 h:underline link self_center \">{{ modifier_class}}</a>\n        </div>\n    </div>\n</li>\n\nMarkupWrapperClasses: c_primary font_ui ul_none\n\nWeight:0\n\nStyleguide Component.Navigation.PageHub.ChildrenLink\n*/\n/*\nPage Break with Headline\n\nThis component represents a page break with a headline. It can be used to visually separate sections of a page or document. These Page Breaks are semanticaly an h2 with decorations. This shouldn't be used with other levels of Headlines. \n\nMarkup:\n<h2 class=\"c_primary-n1 flex flex_column flex_row:md font_display font_medium m_0 p-y_5:md p-y_4\">\n  <span class=\"flex_auto flex_shrink grid\">\n    <span class=\"br-t_1 br-tl_radius br_inherit br_solid self_center\"></span>\n  </span>\n  <span class=\"flex_50 flex_grow lh_1 p-x_4 p-x_5:lg text_center\">asdf fasdfa sd asdf s adffas dfsdasdf \n    Need Help\n  </span>\n  <span class=\"flex_auto flex_shrink grid\">\n    <span class=\"br_primary-1 br-tl_radius br-t_1 br_solid br_inherit self_center\"></span>\n  </span>\n</h2>\n\n\nNote: These are styled heavier then a normal h2 and there are for eaiser understanding that this is a sperator of major content areas.\n\nMarkupWrapperClasses: p_5 c_whtie\n\nWeight: 100\n\n\nStyleguide: Recipes.Page.BreakHeadline\n*/\n/*\nImage-Text Panel with CTA Link\n\n<p>This layout features an image  and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.</p>\n\nMarkup:\n<div label=\"split-panel\" class=\"bg_black-1 columns_1 columns_2:md gap_4 gap_5:md grid m-b_4 m-b_5:lg m-x_n4 p_4 p_5:md \">\n    <div class=\"grid items_center:lg items_start justify_center\">\n        <img src=\"{{> Sub.Placeholder.Image.600x400 }}\" alt=\"Fill me in!\" class=\"w_100 aspect_3x2 \">\n    </div>\n  <div class=\"font_n1 font_0:lg flex_column flex gap_4\">\n    <div zone-label=\"main-content\" class=\"\">\n        <h3 class=\"m-t_0\">{{> Sub.Placeholder.Text.80ch }}</h3>\n        <p>{{> Sub.Placeholder.Text.200ch }}</p>    </div>\n    <footer class=\"flex flex_row m-t_auto c_accent-n2\">\n      <div class=\"flex_auto grid items_center justify_end m-l_auto max-w_25  self_center text_right\"><a href=\"https://www.acc.org/About-ACC/Diversity-and-Inclusion\" class=\"link\">Panel's Call to Action</a></div>\n      {{> Sub.Component.Common.ReadMoreArrow  }}\n  </footer>\n  </div>\n</div>\n\nNote:\n<p><strong>Do use</strong> when it is a single directing action for the user, and when content would be too much for a card.</p><p><strong>Do NOT use</strong> when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.</p>\n\n\nSubComponents:\nSub.Component.Common.ReadMoreArrow  - Read More Arrow\nSub.Placeholder.Image.600x400 - 600x400 Image Placeholder\n\nFORMAT:\n<p><strong>Headline</strong> -  Max Characters 80</p>\n<p><strong>Content</strong> -  Max Characters 200</p> \n\nMarkupWrapperClasses:\np_4 reading-typography wrapper-container\n\nWeight:\n0\n\nStyleguide:\n Recipes.Page.Panel.image-text-cta\n*/\n/*\nImage-Text Panel with CTA Link Reverses\n\n<p>This layout features an image and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is formated so the image always stacks above the content when in mobile. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.</p>\n\nMarkup:\n<div label=\"split-panel\" class=\"bg_black-1 columns_1 columns_2:md gap_4 gap_5:md grid m-b_4 m-b_5:lg m-x_n4 p_4 p_5:md \">\n    <div class=\"grid items_center:lg items_start justify_center order_1 order_2:lg\">\n        <img src=\"{{> Sub.Placeholder.Image.600x400 }}\" alt=\"Fill me in!\" class=\"w_100 aspect_3x2 \">\n    </div>\n    <div class=\"font_n1 font_0:lg flex_column flex gap_4 order_1:lg order_2\">\n      <div zone-label=\"main-content\" class=\"\">\n        <h3 class=\"m-t_0\">{{> Sub.Placeholder.Text.80ch }}</h3>\n        <p>{{> Sub.Placeholder.Text.200ch }}</p>\n      </div>\n      <footer class=\"flex flex_row m-t_auto c_accent-n2\">\n        <div class=\"flex_auto grid items_center justify_end m-l_auto max-w_25  self_center text_right\"><a href=\"https://www.acc.org/About-ACC/Diversity-and-Inclusion\" class=\"link\">Panel's Call to Action</a></div>\n        {{> Sub.Component.Common.ReadMoreArrow  }}\n    </footer>\n    </div>\n</div>\n\nNote:\n<p><strong>Do use</strong> when it is a single directing action for the user, and when content would be too much for a card.</p><p><strong>Do NOT use</strong> when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.</p>\n\nSubComponents:\nSub.Component.Common.ReadMoreArrow  - Read More Arrow\nSub.Placeholder.Image.600x400 - 600x400 Image Placeholder\n\nFORMAT:\n<p><strong>Headline</strong> -  Max Characters 80</p>\n<p><strong>Content</strong> -  Max Characters 200</p>\n\n\nMarkupWrapperClasses:\np_4 reading-typography wrapper-container\n\nWeight:\n0\n\nStyleguide:\n Recipes.Page.Panel.image-text-cta.alt\n*/\n/*\nSmall Image-Text Panel with CTA Link\n\n<p>This is the alternate layout features an image  and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.</p>\n\nMarkup:\n<div label=\"CTA-Callout\" class=\"bg_black-1 br_radius columns_1 columns_2:lg block grid:lg m-x_0:lg m-x_auto m-y_4 m-y_5:lg max-w_25 max-w_unset:lg reading-typography\" style=\" --col-1:min(100%, 375px); --col-2:1fr; -row-1:250px;\">\n    <!-- Image Section -->\n    <div grid-label=\"image\" class=\"col-end_2:lg col_all\">\n        <img src=\"{{> Sub.Placeholder.Image.375x250 }}\" alt=\"Voluptas dolorem unde\" class=\"w_100 \">\n    </div>\n    <!-- Content Section -->\n    <div grid-label=\"content-container\" class=\"col-start_2:lg col_all columns_1 grid p-t_3 p-b_4 p-y_4:md\" style=\"--col-1: 1fr;\">\n        <div grid-label=\"content\" class=\"m_auto max-w_40 p-x_4\">\n            <h4 class=\"c_black font_accent lh_1 m-b_4 wrap_balance\">{{> Sub.Placeholder.Text.60ch}}</h4>\n            <p class=\"lh_2 wrap_pretty\">{{> Sub.Placeholder.Text.150ch}}</p>\n            {{> HTML.Inputs.Button.SM modifier_class=\"btn-shade float_right\" }}\n        </div>\n    </div>\n</div>\n\nNote:\n<p><strong>Do use</strong> when it is a single directing action for the user, and when content would be too much for a card.</p><p><strong>Do NOT use</strong> when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.</p>\n<p><strong>! Strict Content Constraints !</strong> this design is very structured and requires strict adhearnce.</p>\n\nFORMAT:\n<p><strong>Headline</strong> -  Max Characters 60</p>\n<p><strong>Content</strong> -  Max Characters 150</p>\n\n\nSubComponents:\nSub.Placeholder.Image.375x250  - Image 375w x 250w\nHTML.Inputs.Button.SM - Small Shade Button\n\nMarkupWrapperClasses:\nwrapper-container\n\nWeight:\n0\n\nStyleguide:\n Recipes.Page.Panel.small-image-text-cta\n*/\n/*\nSmall Image-Text Panel with CTA Link (Alternate)\n\n<p>This is the alternate layout features an image  and accompanying text content with a single call-to-action (CTA) in a horizontal format. It is ideal for promoting highlighted content, campaigns, or key user pathways. Use when you want to visually balance media and text while directing attention to a single user action.</p>\n\nMarkup:\n<div label=\"CTA-Callout\" class=\"bg_black-1 br_radius columns_1 columns_2:lg block grid:lg m-x_0:lg m-x_auto m-y_4 m-y_5:lg max-w_25 max-w_unset:lg reading-typography\" style=\" --col-2:min(100%, 375px); --col-1:1fr; -row-1:250px;\">\n    <!-- Image Section -->\n    <div grid-label=\"image\" class=\"col-start_2:lg col_all row-start_1\">\n        <img src=\"{{> Sub.Placeholder.Image.375x250 }}\" alt=\"Voluptas dolorem unde\" class=\"w_100 \">\n    </div>\n    <!-- Content Section -->\n    <div grid-label=\"content-container\" class=\"row-start_1 col-end_2:lg col_all columns_1 grid p-t_3 p-b_4 p-y_4:md\" style=\"--col-1: 1fr;\">\n        <div grid-label=\"content\" class=\"m_auto max-w_40 p-x_4\">\n            <h4 class=\"c_black font_accent lh_1 m-b_4 wrap_balance\">{{> Sub.Placeholder.Text.60ch}}</h4>\n            <p class=\"lh_2 wrap_pretty\">{{> Sub.Placeholder.Text.150ch}}</p>\n            {{> HTML.Inputs.Button.SM modifier_class=\"btn-shade float_right\" }}\n        </div>\n    </div>\n</div>\n\nNote:\n<p><strong>Do use</strong> when it is a single directing action for the user, and when content would be too much for a card.</p><p><strong>Do NOT use</strong> when it is a stepped or comparision action. When actions are compariable or stepped it should use shorter content in a set of cards.</p>\n<p><strong>! Strict Content Constraints !</strong> this design is very structured and requires strict adhearnce.</p>\n\nFORMAT:\n<p><strong>Headline</strong> -  Max Characters 60</p>\n<p><strong>Content</strong> -  Max Characters 150</p>\n\nSubComponents:\nSub.Placeholder.Image.375x250  - Image 375w x 250h\nHTML.Inputs.Button.SM - Small Shade Button\n\nMarkupWrapperClasses:\nwrapper-container\n\nWeight:\n0\n\nStyleguide:  Recipes.Page.Panel.small-image-text-cta-alt\n*/\n/*\nProduct Banner\n\nMarkup: \n<div class=\"columns_1 font_1 font_2:md font_3:lg grid isolation_isolate m-b_5 m-t_n4 m-x_n4:lg min-h_20 overflow_hidden relative rows_1\">\n  <div class=\"col_all row_all \">\n    <picture class=\"bg_cover flex flex_column inset_0 absolute\">\n      <source srcset=\"{{> Sub.Placeholder.Image.1200x300}}\" media=\"(min-width: 1024px)\" class=\"display_none\">\n      <source srcset=\"{{> Sub.Placeholder.Image.1024x256}}\" media=\"(min-width: 768px)\" class=\"display_none\">\n      <source srcset=\"{{> Sub.Placeholder.Image.600x300}}\" media=\"(min-width: 400px)\" class=\"display_none\">\n      <img src=\"{{> Sub.Placeholder.Image.320x300}}\" alt=\"Hero Image\" class=\"bg_cover flex_100\">\n    </picture>\n  </div>\n  <div class=\"col_all columns_1 font-size_up-2 grid inset_0 items_center justify_start p-y_3 p-y_4:md p-y_5:lg row_all self_center\">\n    <h1 class=\"c_white font-size_up-2 isolation_isolate lh_1 m_0 relative self_center\">\n      <span class=\"inline-block p-x_4 p-y_3 bg_acc-n3\" style=\"box-decoration-break: clone;\"><strong class=\"font_xbold c_special\" >ProductName</strong>SAP</span><br>\n      <span class=\"text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3\" style=\"box-decoration-break: clone;\">Product Description</span>\n    </h1>\n  </div>\n</div>\n\nNote: \nThe color in the product name uses the pathway color codes\n\nSubComponents: \nSub.Placeholder.Image.320x300   - Image 320x300\nSub.Placeholder.Image.600x300   - Image 600x300\nSub.Placeholder.Image.1024x256   - Image 1024x256\nSub.Placeholder.Image.1200x300   - Image 1200x300\n\nStyleguide:  Recipes.Page.Product.Banner\n\n*/\n/*\nProduct CTA\n\n<p>This call-to-action component highlights a specific product or educational resource, pairing branded imagery with concise promotional content and a prominent button. Use it to drive conversions for key offerings, such as board prep tools or certifications. Place in sidebars, landing pages, or learning resource hubs for maximum visibility.</p>\n\nMarkup: \n<div label=\"split-panel\" class=\"bg_primary-5 br_radius columns_1 columns_2:md gap_4 gap_5:md grid m-t_4 m-x_n4 p_4 p_5:md relative\">\n  <div class=\"col-end_2:md col_all columns_1 grid isolation_isolate overflow_hidden relative rows_1\">\n    <picture class=\"col_all row_all bg_cover flex flex_column inset_0 absolute\">\n      <source srcset=\"{{> Sub.Placeholder.Image.320x300 }}\" media=\"(min-width: 400px)\" class=\"display_none\">\n      <img src=\"{{> Sub.Placeholder.Image.16x9 }}\" alt=\"Hero Image\" loading=\"lazy\" class=\"bg_cover flex_100\">\n    </picture>\n    <div class=\"b_3 col_all font-size_up-2 grid inset_0 justify_start m-y_4 relative row_all self_center\">\n      <h2 class=\"font-size_up-2 lh_1 m_0 c_white isolation_isolate relative\">\n        <span class=\"inline-block p-x_4 p-y_3 bg_acc-n3 box-decoration_clone\"><strong class=\"font_xbold c_special\">ProductName</strong>SAP</span><br>\n        <span class=\"text wrap c_white lh_2 font-size_down-1 bg_acc-n3 p_3 box-decoration_clone\">Product Description</span>\n      </h2>\n    </div>\n  </div>\n  <div class=\"font_n1 font_0:lg flex_column flex gap_4\">\n    <div zone-label=\"main-content\" class=\"p-y_4\">\n      <h2 data-item=\"cta-title\" class=\"m-b_3 lh_1 font_medium font_display\"><strong class=\"font-size_up m-b_2 block\">Ready to Take the Next Step?</strong></h2>\n      <p class=\"font-size_up lh_3\">{{> Sub.Placeholder.Text.150ch }}</p>\n      {{> HTML.Inputs.Button.CTA modifier_class=\"Purchase\"}}\n    </div>\n  </div>\n</div>\n\nDATA: \n\nSubComponents: \nHTML.Inputs.Button.CTA   - CTA Button\nSub.Placeholder.Image.320x300 - Image 320x300\nSub.Placeholder.Image.16x9 - Image 455x195\n\nMarkupClasses:\n\nNote: \nThe color in the product name uses the pathway color codes\n\nStyleguide:  Recipes.Page.Product.Followup-CTA\n*/\n/*\nGrid List\n\nThis component presents a list of highlighted information, each item is accompanied by an icon. Each item in the grid combines an icon with the corrisponding content. \n\nMarkup:\n<div class=\"bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4\">\n    <h2>Icon and Header with Link</h2>\n    <ul class=\"columns_2:md columns_3:lg columns_1 gap-x_5:lg gap-x_4:md gap-x_3 gap-y_4 grid p-x_4:lg p-x_3:md p-x_0 ul_none\">\n        {{>  Sub.Recipe.GridList.Item }}\n        {{>  Sub.Recipe.GridList.Item }}\n        {{>  Sub.Recipe.GridList.Item }}\n        {{>  Sub.Recipe.GridList.Item }}\n    </ul>\n</div>\n\n\n\nNOTE: The read more is treated differently.\n\nMarkupWrapperClasses: reading-typography wrapper-container\n\nSubComponents:\nSub.Recipe.GridList.Item      - Icon and Header\n\nDATA:\nSub.ClassList.Grid.TripleXL        - GridList Triple Split on XL \n\nStyleguide Recipes.GridList\n\nWeight: 0\n*/\n/*\nGrid List with Descriptions\n\nThis component presents a list of highlighted information with descripition\n\nMarkup:\n<div class=\"bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4\">\n    <h2>Highlighted Content with Icon, Header, and Description. Links in descriptions optional</h2>\n    <div class=\"wrapper-container\">\n        <ul class=\"{{> Sub.ClassList.Grid.TripleXL }}\">\n            {{>  Sub.Recipe.GridList.IconText.Item }}\n            {{>  Sub.Recipe.GridList.IconText.ItemTextLink }}\n            {{>  Sub.Recipe.GridList.IconText.Item }}\n            {{>  Sub.Recipe.GridList.LinkedIconText.ItemReadMore }}\n       </ul>\n    </div>\n</div>\n\nSubComponents:\nSub.Recipe.GridList.IconText.Item                  - Icon with Discription\nSub.Recipe.GridList.IconText.Item                  - Icon with Discription with link\nSub.Recipe.GridList.LinkedIconText.ItemReadMore        - Icon with Read More\n\nMarkupWrapperClasses: reading-typography wrapper-container\n\nDATA:\nSub.ClassList.Grid.TripleXL        - GridList Triple Split on XL \n\nStyleguide Recipes.GridList.IconText\n\nWeight: 0\n*/\n/*\nGrid List with Linked Descriptions\n\nThis component presents linked description with a hover effect to help each item showcase it is clickable.\n\nMarkup:\n<div class=\"bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4\">\n    <h2>Linked Highlighted Content with Icon, Header, and Description. Links in descriptions optional</h2>\n    <div class=\"wrapper-container\">\n        <ul class=\"{{> Sub.ClassList.Grid.TripleXL }}\">\n            {{>  Sub.Recipe.GridList.LinkedIconText.Item }}\n            {{>  Sub.Recipe.GridList.LinkedIconText.Item }}\n            {{>  Sub.Recipe.GridList.LinkedIconText.Item }}\n            {{>  Sub.Recipe.GridList.LinkedIconText.Item }}\n        </ul>\n    </div>\n</div>\n\nSubComponents:\nSub.Recipe.GridList.IconText.Item      - Linked Icon and Text\n\nDATA:\nSub.ClassList.Grid.TripleXL        - GridList Triple Split on XL \n\nNOTE: The read more is treated differently.\n\nMarkupWrapperClasses: reading-typography \n\nStyleguide Recipes.GridList.LinkedIconText\n\nWeight: 0\n*/\n/*\nGrid List with Grouped List\n\nThis component presents a list of highlighted information, each item is accompanied by an icon. Each item in the grid combines an icon with the corrisponding content. \n\nMarkup:\n<div class=\"bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4\">\n    <h2>Highlighted Grouped List with Category Icon and Header</h2>\n    <ul class=\"{{> Sub.ClassList.Grid.TripleXL }}\">\n        {{> Sub.Recipe.GridList.GroupingList.Item }}\n        {{> Sub.Recipe.GridList.GroupingList.Item }}\n        {{> Sub.Recipe.GridList.GroupingList.Item }}\n    </ul>\n</div>\n\nNote:\nThese <b>shouldn't use</b> a read more.\n\nMarkupWrapperClasses: reading-typography wrapper-container\n\nSubComponents:\nSub.Recipe.GridList.GroupingList.Item      - Icon and Bulleted List\n\nDATA:\nSub.ClassList.Grid.TripleXL        - GridList Triple Split on XL \n\nStyleguide Recipes.GridList.GroupList\n\nWeight: 0\n*/\n/*\nIcon and Header\n\nThe Compound Icon and Header is the most basic of the grid list content items and needs to have a link for each item.\n\nMarkup:\n<li class=\"flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3\">\n    <i class=\"c_inherit font_7 p-r_4 far fa-solid fa-flag-usa\" aria-hidden=\"true\"></i>\n    <span class=\"font-size_up font_medium\">\n        <a rel=\"noopener noreferrer\" class=\"expanded-click-area c_inherit not-link h:underline\" target=\"_self\" href=\"https://www.acc.org//Membership/Chapters\">State Chapters</a>\n    </span>\n</li>\n\nMarkupWrapperClasses: reading-typography wrapper-container max-w_30\n\nStyleguide Sub.Recipe.GridList.Item\n\nWeight: 10\n*/\n/*\nIcon and Description\n\nThe Compound Icon and Text List Item is a reusable component designed to present key content alongside a relevant visual icon. This pattern supports skimmability, clarity, and strong information hierarchy, making it ideal for benefit statements, feature lists, or modular marketing blocks.\n\nMarkup:\n<li class=\"{{> Sub.ClassList.Grid.Item }}\">\n    <i class=\"c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-gears\" aria-hidden=\"true\"></i>\n    <div class=\"font-size_up text_center text_left:md\">\n        <strong class=\"block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md\" style=\"text-wrap-style: balance;\">\n           nihil amet distinctio\n        </strong>\n        <span class=\"block font-size_down opacity_8 c_black\">\n            <strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</strong>.\n        </span>\n    </div>\n</li>\n\nNOTE: If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.\n\nMarkupWrapperClasses: reading-typography wrapper-container max-w_30\n\nDATA:\nSub.ClassList.Grid.Item        - Gridlist Item Classes\n\nStyleguide Sub.Recipe.GridList.IconText.Item\n\nWeight: 10\n*/\n/*\nIcon and Description with Link\n\nThe Compound Icon and Text List Item is a reusable component designed to present key content alongside a relevant visual icon. This pattern supports skimmability, clarity, and strong information hierarchy, making it ideal for benefit statements, feature lists, or modular marketing blocks.\n\nMarkup:\n<li class=\"{{> Sub.ClassList.Grid.Item }}\">\n    <i class=\"c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-graduation-cap\" aria-hidden=\"true\"></i>\n    <div class=\"font-size_up text_center text_left:md\">\n        <strong class=\"block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md\" style=\"text-wrap-style: balance;\">\n            Pass Your Boards with Confidence\n        </strong>\n        <span class=\"block font-size_down opacity_8 c_black\">\n            <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt <a class=\"expanded-click-area link\" href=\"#\">Action Link</a></strong>.\n        </span>\n    </div>\n</li>\n\nNOTE: If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.\n\nMarkupWrapperClasses: reading-typography max-w_30\n\nDATA:\nSub.ClassList.Grid.Item        - Gridlist Item Classes\n\nStyleguide Sub.Recipe.GridList.IconText.ItemTextLink\n\nWeight: 10\n*/\n/*\nIcon & Description: Read More\n\nThe Read More Icon and Description is intentionally designed differntly.\n\nMarkup:\n<li class=\"{{> Sub.ClassList.Grid.Item }}\">\n    {{> Sub.Component.Common.ReadMoreArrow  }}\n    <div class=\"font-size_up text_center text_left:md order_1\">\n        <strong class=\"block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md\" style=\"text-wrap-style: balance;\">\n            Read More\n        </strong>\n        <span class=\"block font-size_down opacity_8 c_black\">\n            about our <a class=\"expanded-click-area link\" href=\"#\">Member Benefits</a>.\n        </span>\n    </div>    \n</li>\n\nNOTE: This should be the design when you are including a read more action to go with a Grid List with Text and Descriptions.\n\nMarkupWrapperClasses: reading-typography wrapper-container max-w_30\n\nDATA:\nSub.ClassList.Grid.Item        - Gridlist Item Classes\n\nSubComponents:\nSub.Component.Common.ReadMoreArrow  - Read More Arrow\n\nStyleguide Sub.Recipe.GridList.LinkedIconText.ItemReadMore\n\nWeight: 10\n*/\n/*\nLinked Icon & Description\n\nThe Compound Icon and Text List Item that is linked an assoicated action is styled differently with a background hover effect.\n\nMarkup:\n<li class=\"{{> Sub.ClassList.Grid.Item }} h:bg_primary-4\">\n    <i class=\"c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular  fa-graduation-cap\" aria-hidden=\"true\"></i>\n    <a  class=\"expanded-click-area not-link h:undecorated font-size_up block\" href=\"#\">\n        <strong class=\"font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md\" style=\"text-wrap-style: balance;\">\n            Pass Your Boards with Confidence\n        </strong>\n        <span class=\"block font-size_down opacity_8 c_black\" >\n            <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt.\n        </span>\n    </a>\n</li>\n\nNOTE: If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.\n\nMarkupWrapperClasses: reading-typography wrapper-container max-w_30\n\nDATA:\nSub.ClassList.Grid.Item        - Gridlist Item Classes\n\nStyleguide Sub.Recipe.GridList.LinkedIconText.Item\n\nWeight: 10\n*/\n/*\nGrouping List Item\n\n<p>A flexible layout pattern used to present concise feature groupings or content benefits in a visually structured way. Each group includes icon, group heading, and a short list of actionable or informative bullet points. Use this pattern to highlight service categories, user benefits, or grouped resources.</p><p> The consistent visual hierarchy ensures scannability and reinforces clarity, making it effective for marketing pages and dashboards.</p>\n\nMarkup:\n<li class=\"{{> Sub.ClassList.Grid.Item }}\">\n     <i class=\"c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-cup-straw\" aria-hidden=\"true\"></i>\n   <div class=\"font-size_up\">\n    <div class=\"font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md\" style=\"text-wrap-style: balance;\">\n        Distinctio et Consequatur\n    </div>\n        <ul class=\"ul_square marker_accent font-size_down opacity_8 c_black\">\n            <li>Non sed quaerat <a class=\"link\" href=\"#\">non repudiandae ipsa.</a></li>\n            <li>Aut consequatur inventore ipsum <a class=\"link\" href=\"#\">numquam tempore saepe.</a></li>\n            <li>In aut delectus cum laboriosam facilis qui neque <a class=\"link\" href=\"#\">sed corporis similique.</a></li>\n            <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class=\"link\" href=\"#\">voluptatem sint qui.</a></li>\n          </ul>\n    </div>\n</li>\n\nMarkupWrapperClasses: reading-typography wrapper-container max-w_30\n\nNote: <p>Each list time should be distinct and <strong>Only ONE Link</strong></p>\n\nDATA:\nSub.ClassList.Grid.Item        - Gridlist Item Classes\n\nStyleguide Sub.Recipe.GridList.GroupingList.Item\n\nWeight: 10\n*/\n/*\nQuotes\n\nMarkup:\n<h2>Single Icon Quote is for scannable and large collections</h2>\n<ul class=\"grid columns_2:md columns_1 ul_none gap_4\">\n  <li class=\"wrapper-container\">{{> Recipes.Quote.Scannable }}</li>\n  <li class=\"wrapper-container\">{{> Recipes.Quote.Scannable }}</li>\n  <li class=\"wrapper-container\">{{> Recipes.Quote.Scannable }}</li>\n  <li class=\"wrapper-container\">{{> Recipes.Quote.Scannable }}</li>\n</ul>\n<h2>Quotes with Photos are for visual interest max to 3</h2>\n<ul class=\"grid columns_3:lg columns_2:md columns_1 ul_none gap_4 gap_5:lg \">\n    <li class=\"wrapper-container\">{{> Recipes.Quote.Decrative }}</li>\n    <li class=\"wrapper-container\">{{> Recipes.Quote.Decrative }}</li>  \n    <li class=\"wrapper-container\">{{> Recipes.Quote.Decrative }}</li>   \n</ul>\n\nSubComponents:\nRecipes.Quote.Decrative - Quote Card\nRecipes.Quote.Scannable - Quote Single Icon\n\nNote: 250 characters on average about 40 words meaning it is 10 seconds or time to read. Quote should be valuable because our users time is valueable.\n\nFormat:\n<p><strong>Content</strong> - 250 characters should be able to caputure valuable informatioon in a quote.</p>\n\n\n\nMarkupWrapperClasses: reading-typography font-size_up\n\nStyleguide Recipes.Quote\n\nWeight: 0\n\n*/\n/*\nScannable Blockquote \n\nThis component presents a styled blockquote element. The blockquote starts with an iconic quotation mark, followed by the actual quote text and a citation. The design uses flexible box model to ensure icon and text alignment.\n\nMarkup:\n<blockquote class=\"flex flex_row:md flex_column br_solid br_radius br_black-2 shadow_overlap-light br_1 overflow_hidden\">\n    <div class=\"bg_acc-5 c_acc-n1 flex_none font_1 font_2:md font_3:md font_7:lg p_2\">\n        <i class=\"fas fa-quote-left fa-fw\"></i>\n    </div>\n    <div class=\"c_black flex_auto p_4\">\n        <p class=\"lh_3\">{{> Sub.Placeholder.Text.250ch }}</p>\n        <cite class=\"c_accent-n4 float_right font_ui font_bold font_n1 font-size_down-1 m-t_n3\">\n        <i class=\"fa-user-circle fa-solid p-r_3 c_acc-n1\"></i>\n        {{> Sub.Data.Member.FullName }}\n        </cite>\n    </div>\n</blockquote>\n\nMarkupWrapperClasses: reading-typography font-size_up wrapper-container\n\nData:\nSub.Data.Member.FullName - Full Name\n\nNOTE:\nThis design doesn't allow inclusion of photos because it is intentionally scannable.\n\nStyleguide Recipes.Quote.Scannable\n\nWeight: 0\n*/\n/*\nDecrative Blockquote\n\nThis component is a blockquote that has been designed with an emphasis on style. It starts and ends with iconic quotation marks, followed by the actual quote text and a citation. The design uses flexible box model to ensure that the text and the quote icons align correctly. It also applies shadows, borders, and background colors to make the blockquote visually distinct.\n\nMarkup:\n<blockquote class=\"Account bg_black-_05 block br_1 br_round br_solid br_white-5 col-end_end col-start_start flex font_display m-x_4:md m-x_0 p-y_5:md p_4 relative shadow_bevel-light z1\" aria-label=\"Testimonial from Myrrh Arobo\">\n  <em class=\"absolute t_3:md t_n3 l_3 l_n4:md c_accent-n1 fa-fw fa-quote-left fa-solid font_5 font_7:md font_9:lg  text-shadow_black-1 z_1\" aria-hidden=\"true\"></em>\n  <div class=\"flex_auto p-x_2  p-x_3:sm p-y_0 p-y_4:md p-x_4:md c_black z_2 flex flex_column\" role=\"article\">\n    <p class=\"lh_3\">\n      {{> Sub.Placeholder.Text.250ch }}\n    </p>\n    <cite class=\"c_accent-n3 flex flex_row:md flex_column font_normal m-t_auto:md m-t_3 m-l_n3 justify_end:md justify_start font-size_down-1\" itemprop=\"author\" itemscope=\"\" itemtype=\"https://schema.org/Person\">\n      <img src=\"https://i.pravatar.cc/50\" alt=\"Headshot of {{> Sub.Data.Member.FullName}}\" class=\"aspect_1x1 br_1 br_circle br_solid br_white-1 flex_none max-w_5 shadow_1 self_start\" itemprop=\"image\" style=\"width: 50px;\">\n      <span class=\"flex_shrink:md lh_2 m-l_3 self_center\">\n        <span class=\"block font_accent font_bold\" itemprop=\"name\">Sub.Data.Member.FullName</span>\n        <span class=\"font-size_down-1 opacity_8 font_ui block\" itemprop=\"jobTitle\">{{> Sub.Data.Member.Title}}</span>\n      </span>\n    </cite>\n  </div>\n  <em class=\"absolute b_3:md b_n4 r_3 r_n4:md c_accent-n1 fa-fw fa-quote-right fa-solid font_5 font_7:md font_9:lg text-shadow_black-1 z_1\" aria-hidden=\"true\"></em>\n</blockquote>\n\nMarkupWrapperClasses: reading-typography font-size_up p-x_5 wrapper-container\n\nNote: This component can drop the photo.\n\nData:\nSub.Data.Member.FullName - Full Name\nSub.Data.Member.Title - Title\n\nStyleguide Recipes.Quote.Decrative\n\nWeight: 0\n*/\n/*\nTriple Pricing Bento\n\n<div class=\"reading-typography\"> In web or UI design, this approach visually arranges content into clearly defined blocks or modules—usually of equal or complementary sizes—within a grid. It helps present multiple options, categories, or pieces of information in a compact, organized, and visually balanced way, often enhancing scannability and user choice.</p><p><strong>Use this component to display structured pricing options for multiple membership types.</strong> It visually distinguishes tiers like Member, Nonmember, and Fellows in Training or Emeritus Members using clear headings, large pricing, and consistent formatting.<ul><li>Adapts layout responsively from side-by-side (desktop) to stacked (mobile).</li><li>Color-coded backgrounds improve segmentation.</li><li>Use when side-by-side price comparisons are needed.</li><li>Avoid when only one price is shown — use a simple card instead.</li></ul></p></div>\n\nMarkup:\n<ul class=\"gap_4 gap_4:md gap_5:lg ul_none triple-bento font_n2 font_n1:md font_0:lg\">\n{{> Sub.Recipe.PriceTable.Bento.Card   modifier_class=\"primary\"}}\n{{> Sub.Recipe.PriceTable.Bento.Card   modifier_class=\"secondary\"}}\n{{> Sub.Recipe.PriceTable.Bento.Card  modifier_class=\"accent\"}}\n</ul>\n\nSubComponents:\nSub.Recipe.PriceTable.Bento.Card  - Price Card\n\nMarkupWrapperClasses: reading-typography m-b_4 wrapper-container\n\nWeight: 0\n\nStyleguide Recipes.PriceTable.Bento\n\n*/\n/*\nPrice Bento Price Card\n\n<p>The Bento Pricing Card is a flexible pricing presentation component designed for purchase plan options. It supports multiple price tiers and optional notes, accommodating varied member types and durations. This component ensures consistent styling, responsive behavior, and semantic clarity across different purchase contexts.</p><p><strong>Use when:</strong> you need to visually present one or more pricing options with supporting content like membership type and terms.</p><p><strong>Do not use when:</strong> displaying simple, single-line prices or ungrouped price information not related to purchasing tiers.</p>\n\nprimary         - Used for Member\nsecondary         - Used for Non-Member\naccent         - Used for Any Reduced Pricing\n\n\nMarkup: \n<li data-element=\"price-card\" class=\"flex flex_column m_0 justify_start br_round bg_{{ modifier_class }}-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit\">\n    <header item-label=\"price-tier\" class=\"items_top m-b_3:md m-b_4\">\n        <h2 data-element=\"price-card-title\" class=\"font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0\">{{ modifier_class }}</h2>\n    </header>\n    <main class=\"m-t_auto\">\n        <div item-label=\"price-cost-breakdown\">\n            <h3 class=\"flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap\"><span class=\"font_bold\">$900</span><span class=\"font_light\">/</span><span class=\"font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap\">5 year <br>purchase plan </span></h3>\n        </div>\n        <div class=\"c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3\">\n            <span class=\"flex_auto grid\">\n                <span class=\"br-t_1 br-tl_radius br_inherit br_solid self_center\"></span>\n            </span>\n            <span class=\"flex_shrink p-x_3 lh_1 text_center\">\n                or\n            </span>\n            <span class=\"flex_auto grid\">\n                <span class=\"br-t_1 br-tl_radius br_inherit br_solid self_center\"></span>\n            </span>\n        </div>\n        <div item-label=\"price-cost-breakdown\">\n            <h3 class=\"flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap\"><span class=\"font_bold\">$300</span><span class=\"font_light\">/</span><span class=\"font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap\">1 year <br />purchase plan </span></h3>\n        </div>       \n    </main>\n    <footer class=\"m-b_n3:md m-t_auto\"><div><i class=\"fa-solid fa-plus p-r_3\" aria-hidden=\"true\"></i>Annual ABIM MOC fee<sup class=\"font_bold\">*</sup></div></footer>\n</li>\n\nNote: This is a strict structured component so all cards must match eachother content models. Keep it Apples to Apples!\n\nWeight: 0\n\nStyleGuide Sub.Recipe.PriceTable.Bento.Card \n\n*/\n.triple-bento {\n  display: grid;\n  grid-template-columns: 100%;\n  grid-template-rows: auto auto auto;\n  grid-template-areas: \"a\" \"b\" \"c\";\n}\n.triple-bento li:nth-child(1) {\n  grid-area: a;\n}\n.triple-bento li:nth-child(2) {\n  grid-area: b;\n}\n.triple-bento li:nth-child(3) {\n  grid-area: c;\n}\n\n@container ((width > 460px) and (width < 1024px)  ) {\n  .triple-bento {\n    grid-template-columns: 7fr 5fr;\n    grid-template-rows: auto auto;\n    grid-template-areas: \"a c\" \"b c\";\n  }\n}\n@container ( width > 1024px ) {\n  .triple-bento {\n    grid-template-columns: 1fr 1fr 1fr;\n    grid-template-rows: auto;\n    grid-template-areas: \"a b c\";\n  }\n}\n/*\nPrice Table\n\nA collection of price points and the various features of each at a glance.\n\nMarkup:\n<ul class=\"{{> Sub.ClassList.Grid.TripleLG }}\">\n    {{> Sub.Recipe.PriceTable.Card.Light modifier_class=\"default\" }}\n    {{> Sub.Recipe.PriceTable.Card.Dark modifier_class=\"primary\" }}\n    {{> Sub.Recipe.PriceTable.Card.Dark modifier_class=\"secondary\" }}\n</ul>\n\nNOTE: Depending on the content and width of the area where these are being placed the amount of columns should be adjusted at different breakpoints.\n\nMarkupWrapperClasses: \nw_100 p_5:md p_4 bg_black-1 wrapper-container\n\nDATA: \nSub.ClassList.Grid.TripleLG     - Grid Classes Triple @ LG\n\nSubComponents:\nSub.Recipe.PriceTable.Card.Light - Light Background Card\nSub.Recipe.PriceTable.Card.Dark  - Dark Background Card\n\nWeight: -1000\n\nStyleguide Recipes.PriceTable.Comparison\n*/\n/*\nPrice Table Simple\n\nA collection of price points at a glance.\n\nMarkup:\n<ul class=\"{{> Sub.ClassList.Grid.TripleLG }}\">\n    {{> Sub.Recipe.PriceTable.Card.Simple.Light modifier_class=\"default\" }}\n    {{> Sub.Recipe.PriceTable.Card.Simple.Dark modifier_class=\"secondary\" }}\n    {{> Sub.Recipe.PriceTable.Card.Simple.Dark modifier_class=\"accent\" }}\n</ul>\n\nNOTE: Depending on the content and width of the area where these are being placed the amount of columns should be adjusted at different breakpoints.\n\nMarkupWrapperClasses: \nw_100 p_5:md p_4 bg_black-1 wrapper-container\n\nDATA: \nSub.ClassList.Grid.TripleLG     - Grid Classes Triple @ LG\n\nSubComponents:\nSub.Recipe.PriceTable.Card.Simple.Light - Light Background Card\nSub.Recipe.PriceTable.Card.Simple.Dark  - Dark Background Card\n\nWeight: -1000\n\nStyleguide Recipes.PriceTable.ComparisonSimple\n*/\n/*\nPrice Table Card Light\n\nA combination UI that shows the price point and value for a product with a nav button to start the purchase.\n\nMarkup:\n<li data-element=\"data-table\" class=\"flex flex_column justify_start font_0 font_copy br_round bg_white p_5:md p_4  shadow_bevel-light {{modifier_class}}\">\n    <header class=\"font_display font_4\">\n        <h2 data-element=\"table-title\" class=\"font-size_down-2 font_medium m-b_0 \">Basic</h2>\n        <h3 class=\"font-size_up-2 lh_2\"><span class=\"font_bold c_black\">$39</span><span>/Month</span></h3>\n    </header>\n    <main>\n        <p>{{> Sub.Placeholder.Text.150ch}}</p>\n        <ul class=\"ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_black-9\">\n            <li><i class=\"fas fa-check-circle m-r_2 c_primary\"></i> Quality-focused</li>\n            <li><i class=\"fas fa-check-circle m-r_2 c_primary\"></i> Phased</li>\n            <li><i class=\"fas fa-check-circle m-r_2 c_primary\"></i> Automated</li>\n            <li><i class=\"fas fa-times-circle m-r_2 c_alert-n2\"></i> Cross-platform</li>\n        </ul>\n    </main>\n    <footer class=\"m-b_n3:md m-t_auto\"><a href=\"\" class=\"btn btn-primary  h:undecorated\">Choose Plan</a></footer>\n</li>\n\n\nMarkupWrapperClasses: \nbg_black-1 p_4 max-w_30 flex flex_row:lg flex_column gap_5 ul_none c_black-6 font_copy font_0\n\nWeight: 0\n\nStyleguide Sub.Recipe.PriceTable.Card.Light\n*/\n/*\nPrice Table Card Dark\n\nThere is the preferred plan in the price table it is best to swap the colors and use the primary coloring.\n\nMarkup:\n<li data-element=\"data-table\" class=\"flex flex_column justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold  bg_{{modifier_class}}-n2\">\n    <header class=\"font_display font_4\">\n        <h2 data-element=\"table-title\" class=\"font-size_down-2 font_medium m-b_0 \">{{modifier_class}}</h2>\n        <h3 class=\"font-size_up-2 lh_2\"><span class=\"font_bold c_white\">$99</span><span>/Month</span></h3>\n    </header>\n    <main>\n        <p>{{> Sub.Placeholder.Text.150ch}}</p>\n        <ul class=\"ul_none flex flex_column gap-y_3 p-b_4 p-x_3 font-size_1 font_medium c_white-9\">\n            <li><i class=\"fas fa-check-circle m-r_2 c_primary-5\"></i>{{modifier_class}}</li>\n            <li><i class=\"fas fa-check-circle m-r_2 c_primary-5\"></i>Automated</li>\n            <li><i class=\"fas fa-check-circle m-r_2 c_primary-5\"></i>Cross-platform</li>\n        </ul>\n    </main>\n    <footer class=\"m-b_n3:md m-t_auto\"><a href=\"\" class=\"btn btn_primary bg_white h:bg_white-5 h:undecorated \">Choose Plan</a></footer>\n</li>\n\n\n\nMarkupWrapperClasses: \nbg_black-1 p_4 max-w_30 flex flex_row:lg flex_column gap_5 ul_none c_black-6 font_copy font_0\n\nWeight: -1000\n\nStyleguide Sub.Recipe.PriceTable.Card.Dark\n*/\n/*\nPrice Table SimpleCard Dark\n\n<p>Price tables can be simplified to but always should have the associated action button.</p>\n\n.primary         - Used for Member\n.secondary         - Used for Non-Member\n.accent         - Used for Any Reduced Pricing\n\n\nMarkup:\n<li data-element=\"data-table\" class=\"bg_{{modifier_class}}-n3 c_white br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light\">\n    <header class=\"font_display font_4\">\n        <h2 data-element=\"table-title\" class=\"font-size_down-2 font_medium m-b_0 capitalize\">{{modifier_class}}</h2>\n        <h3 data-element=\"table-price\" class=\"font-size_up-2 lh_2\">\n            <span class=\"font_bold c_white\">$860</span>\n            <span>/Annual Dues</span>\n        </h3>\n    </header>\n    <main>\n    </main>\n    <hr class=\"br_dashed br_solid br_white-4 m-t_2\">\n    <ul class=\"c_white-9 flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none\">\n        <li class=\"text-indent_n1\">\n        <span class=\"font_bold opacity_8\"><em class=\"fa-solid fa-usd m-r_2 \" aria-hidden=\"true\"></em>150</span> Application Fee\n        </li>\n    </ul>\n    <footer class=\"m-b_n3:md m-t_auto\">\n    <a class=\"btn btn-secondary bg_white-8 h:bg_white c_black-7 h:c_black-9\" href=\"#\">Join Now</a>\n    </footer>\n    <abbr title=\"United States Dollar\" class=\"absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1\">USD</abbr>\n</li>\n\nMarkupWrapperClasses: \nbg_black-1 p_4 max-w_30 flex flex_row:lg flex_column gap_5 ul_none c_black-6 font_copy font_0\n\nWeight: 0\n\nStyleguide Sub.Recipe.PriceTable.Card.Simple.Dark\n\n\n*/\n/*\nPrice Table SimpleCard Light\n\n<p>Price tables can be simplified to but always should have the associated action button.</p>\n\n.primary         - Used for Member\n.secondary         - Used for Non-Member\n.accent         - Used for Any Reduced Pricing\n\nMarkup:\n<li data-element=\"data-table\" class=\"bg_{{modifier_class}}-4 c_black br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light\">\n    <header class=\"font_display font_4\">\n    <h2 data-element=\"table-title\" class=\"font-size_down-2 font_medium m-b_0 capitalize\">{{modifier_class}}</h2>\n    <h3 data-element=\"table-price\" class=\"font-size_up-2 lh_2\">\n    <span class=\"font_bold\">$860</span>\n    <span>/Annual Dues</span>\n    </h3>\n    </header>\n    <main>\n    </main>\n    <hr class=\"br_dashed br_solid br_white-4 m-t_2\">\n    <ul class=\"flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none\">\n        <li class=\"text-indent_n1\">\n        <span class=\"font_bold opacity_8\"><em class=\"fa-solid fa-usd m-r_2 \" aria-hidden=\"true\"></em>150</span>Application Fee\n        </li>\n    </ul>\n    <footer class=\"m-b_n3:md m-t_auto\">\n    <a class=\"btn btn-secondary\" href=\"#\">Join Now</a>\n    </footer>\n    <abbr title=\"United States Dollar\" class=\"absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1\">USD</abbr>\n</li>\n\nMarkupWrapperClasses: \nbg_black-1 p_4 max-w_30 flex flex_row:lg flex_column gap_5 ul_none c_black-6 font_copy font_0\n\nWeight: 0\n\nStyleguide Sub.Recipe.PriceTable.Card.Simple.Light\n*/\n/*\nMobile App CTA\n\n<p>This callout highlights the availability of the associated mobile app, offering a quick path for users to download the app and access the product on the go. It typically features app store buttons, branded device imagery, a concise headline, and a supporting subtext. Use this component when promoting the app in educational or membership-driven contexts.</p><ul><li><strong>Headline:</strong> Emphasizes mobility and learning benefits.</li><li><strong>Subtext:</strong> Brief, informative, with brand reinforcement.</li><li><strong>App Store Buttons:</strong> Use official assets with proper spacing.</li><li><strong>Visuals:</strong> Incorporate realistic device mockups that align with ACC branding.</li></ul>\n\nMarkup:\n<aside class=\"columns_1 grid isolation_isolate rows_3 m-y_5:lg m-t_4 max-w_30 m_auto p-x_4\" style=\"--row-1:90px; --row-2:90px;\">\n    <div data-label=\"background\" class=\"bg_accent-5 row-end_end row-start_2 col_all flex shadow_bevel-light br_solid br_1 br_accent-4\" style=\"border-radius: 16px;\"></div>\n    <div data-label=\"product-image\" class=\"row_all col_all grid\">\n        <div class=\"bg_contain bg_no-repeat m-t_n3\" style=\"background-image: url( 'https://www.acc.org/~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/Learn-Mobile.png' ); background-position: center top;\"></div>\n    </div>\n    <div data-label=\"content-container\" class=\"bg_white br_radius m_3 p_4 reading-typography row-end_end row-start_n2 shadow_overlap-light z_2 col_all br_solid br_black-2 br_1\">\n        <h4 class=\"font_xbold text_center font_4:lg font_3\">Learn on the Go!</h4>\n        <p class=\"text_center\">Access you SAPs from anywhere on the mobile app ACC Learn.</p>\n        <div class=\"grid columns_2 content_center gap_2 justify_center\">\n            <a class=\"bg_black br_radius ga-external\" href=\"https://apps.apple.com/us/app/acc-learn/id1497013017\" target=\"_blank\"><img src=\"https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/appstore.svg\" alt=\"Download on the App Store\"></a>\n            <a class=\"bg_black br_radius ga-external\" href=\"https://play.google.com/store/apps/details?id=org.acc.learn.android&amp;hl=en_US&amp;pli=1\" target=\"_blank\"><img src=\"https://www.acc.org//~/media/Non-Clinical/Images/Education-and-Meetings/Products-and-Resources/ACHDSAP/googleplay.svg\" alt=\"Get it on Google Play\"></a>\n        </div>\n        <div class=\"text_center m-t_3 m-b_n2\"><a href=\"https://www.acc.org//-/media/Non-Clinical/Files-PDFs-Excel-MS-Word-etc/2020/10/01/G20147-ACC-Lifelong-Learning-App-Info-Sheet.pdf\" target=\"_blank\"><small>Learn\n                    More</small></a></div>\n    </div>\n</aside>\n\n\nWeight: 0\n\nStyleguide: Recipes.MobileAppCallout\n*/\n/*\n\nContent List\n\nContent List Subcomponents\n\nWeight: 0\n\nStyleguide Sub.Component.ContentList\n\n*/\n/*\n\nCalendar Block\n\nCalendars show the range of dates from start to end of the live moments of the date. It doesn't include the extended dates of on demand.\n\nMarkup:\n<div class=\"flex_none\" style=\"width: clamp(75px, 10vw, 125px);\">\n\t<div class=\"cal-date text_center font_3\">\n\t\t<a class=\"bg_primary block c_white flex_column flex justify_stretch h:bg_pimary-n2 h:undecorated\" href=\"\">\n\t\t\t<span class=\"block flex_none font-size_down p-y_1\">Apr</span>\n\t\t\t<span class=\"block br-b_2 br-t_2 br_solid flex_auto font-size_up-1 font_xbold grid items_center p-x_4 text_center aspect_16x9 \"><span class=\"nowrap\">22 - 23\n\t\t\t</span></span>\n\t\t\t<span class=\"block flex_none font-size_down p-y_1\">2022</span>\n\t\t</a>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Component.ContentList.Item.Calendar\n\n*/\n/*\n\nImage Thumbnails\n\nimages thumbnails are used to display the images associated with the content. the aspect of the images are 1:1.\n\nMarkup:\n<div class=\"aspect_1x1 flex_none\" style=\"width: clamp(75px, 10vw, 125px);\">\n\t<img src=\"https://picsum.photos/110/110\" alt=\"\" class=\"w_100\">\n</div>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Component.ContentList.Item.Thumbnail\n\n*/\n/*\n\nCredit Chiclets\n\nThis pattern is exactly the same with the needed markup class of the credit color. \n\nCNE \t- Nursing Education\nCME \t- Medical Education\n\nMarkup:\n<li class=\"block inline-block:md flex_shrink block:print m-y_2 m-x_2\">\n\t<div class=\"inline-block br_1 br_radius c_white  br_{{ modifier_class }}-n1 bg_{{ modifier_class }} br_solid\">\n\t\t<div class=\"flex flex_nowrap p-y_2 p-x_3 lh_2\">\n\t\t\t<span class=\"flex_auto\">{{ modifier_class }}</span> <span class=\"flex_shrink\"><i class=\"fa-horizontal-rule fa-rotate-90 far\"></i></span> <span class=\"flex_auto font_bold\">1</span>\n\t\t</div>\n\t</div>\n</li>\n\nNOTE:\nThis pattern relies on the the inclusion of the credit color codes style sheet.\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Component.ContentList.Item.SingleCredit\n*/\n/*\n\nCredits\n\nCredits are used to display the value of the content and what type of certification it offers.\n\nMarkup:\n<div class=\"credits\">\n\t<ul class=\"ul_none flex flex_wrap font_n2 font_n1:md font_n1:print self_end\">\n\t\t{{> Sub.Component.ContentList.Item.SingleCredit modifier_class=\"CNE\" }}\n\t\t{{> Sub.Component.ContentList.Item.SingleCredit modifier_class=\"CME\" }}\n\t\t{{> Sub.Component.ContentList.Item.SingleCredit modifier_class=\"COP\" }}\n\t</ul>\n</div>\n\nMarkupWrapperClasses: \n\nSubComponents:\nSub.Component.ContentList.Item.SingleCredit - Credit Chiclets\n\nWeight:0\n\nStyleguide Sub.Component.ContentList.Item.Credits\n*/\n/*\n\nContent List Item\n\nThis is how content items should be displayed in list form.\n\nMarkup:\n<article class=\"br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui\">\n    <div class=\"absolute r_n1 t_3 text_center flex flex_column:md justify_end align-right font_n2:md font_n3 overflow_hidden\">\n        <div class=\"flex flex_row justify_end c_white\"><span class=\"flex_shrink p-y_2 p-x_3 br_1 br_solid br_white-7 bg_acc-1\"><span class=\"p-x_2 m-t_1 m-b_2\">editor’s pick</span> <i class=\"fas fa-fw m-t_1 m-b_2 fa-thumbs-up\"></i></span></div>\n    </div>\n    <div class=\"flex flex_row:md flex_column gap-x_4\">\n        {{> Sub.Component.ContentList.Item.Thumbnail }}\n        <div class=\"flex_auto m-r_4:md\">\n            <span class=\"journal-title c_accent-2 font_bold uppercase wrap block:md font_n1\">Cardiovascular Team Section</span>\n            <h2 class=\"article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2\">Long-Term Cardiovascular Outcomes After Bariatric Surgery in the Medicare Population | Journal of the American College of Cardiology</h2>\n            <div class=\"meta m-t_2:md m-l_3 m-l_0:md m-b_3 m-b_0:md font_bold\">\n                <span class=\"c_black-7 m-r_3\">Apr 11, 2022</span>\n                <a href=\"/\">Julianne Fallon, PharmD</a>\n            </div>\n            <div class=\"font-size_down font_bold m-b_0:md m-b_3 m-l_0:md m-l_3 meta\">\n                <span class=\"c_black-6 font_italic m-r_3\"><strong class=\"p-r_3\">On Demand Till:</strong>June 11, 2022</span>\n            </div>\n            {{> Sub.Component.ContentList.Item.Credits }}\n        </div>\n    </div>\n    <div class=\"flex flex_row:md flex_column gap-x_4\">\n        <div class=\"flex flex_column-reverse flex_row:md gap-x_4\">\n            <div class=\"article-content\">\n                <p class=\"excerpt font_copy font_0 lh_2 m-b_3 m-t_2 z_1\">The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...</p>\n                <div class=\"authors-list p-y_1 font_n2:md font_n3\">\n                    <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Ty J. Gluckman, MD, MHA, FACC</a>\n                    <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Nicole M. Bhave, MD, FACC</a>\n                    <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Larry A. Allen, MD, MHS, FACC</a>\n                    <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Eugene H. Chung, MD, MSc, FACC</a>\n                    <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Erica S. Spatz, MD, MHS, FACC</a>\n                    <span class=\"collapse\" id=\"authorToggle\">\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Enrico Ammirati, MD, PhD</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Aaron L. Baggish, MD, FACC</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Biykem Bozkurt, MD, PhD, FACC</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>William K. Cornwell, III, MD, MSCS</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Kimberly G. Harmon, MD</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Jonathan H. Kim, MD, MSc, FACC</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Anuradha Lala, MD, FACC</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Benjamin D. Levine, MD, FACC</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Matthew W. Martinez, MD, FACC</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Oyere Onuma, MD, MSc</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Dermot Phelan, MD, PhD, FACC</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Valentina O. Puntmann, MD, PhD</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Saurabh Rajpal, MD, FACC</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Pam R. Taub, MD, FACC</a>\n                        <a class=\"link z_3 inline-block p-x_2  h:underline cursor_pointer\"><i class=\"fa fa-user p-r_2 opacity_5\"></i>Amanda K. Verma, MD, FACC</a>\n                    </span>\n                    <a class=\"font_bold\" data-bs-toggle=\"collapse\" href=\"#authorToggle\" role=\"button\" aria-expanded=\"false\" aria-controls=\"authorToggle\">Show More</a>\n                </div>\n                <div class=\"topics-list p-y_1 font_n2:md font_n3\">\n                    <ul class=\"ul_inline-comma\">\n                        <li class=\"no-after font_bold\">Clinical Topics: </li>\n                        <li><a href=\"/\">Acute Coronary Syndromes</a></li>\n                        <li><a href=\"/\">Arrhythmias and Clinical EP</a></li>\n                        <li><a href=\"/\">Cardiac Surgery</a></li>\n                        <li><a href=\"/\">Heart Failure and Cardiomyopathies</a></li>\n                        <li><a href=\"/\">Invasive Cardiovascular Angiography and Intervention</a></li>\n                        <li><a href=\"/\">Prevention</a></li>\n                    </ul>\n                    <div class=\"collapse\" id=\"topicsToggle\">\n                        <ul class=\"ul_inline-comma\">\n                            <li><a href=\"/\">Vascular Medicine</a></li>\n                            <li><a href=\"/\">Atherosclerotic Disease (CAD/PAD)</a></li>\n                            <li><a href=\"/\">Implantable Devices</a></li>\n                            <li><a href=\"/\">SCD/Ventricular Arrhythmias</a></li>\n                            <li><a href=\"/\">Aortic Surgery</a></li>\n                            <li><a href=\"/\">Cardiac Surgery and Arrhythmias</a></li>\n                            <li><a href=\"/\">Cardiac Surgery and Heart Failure</a></li>\n                            <li><a href=\"/\">Acute Heart Failure</a></li>\n                            <li><a href=\"/\">Interventions and ACS</a></li>\n                            <li><a href=\"/\">Interventions and Vascular Medicine</a></li>\n                        </ul>\n                    </div>\n                    <a class=\"font_bold\" data-bs-toggle=\"collapse\" href=\"#topicsToggle\" role=\"button\" aria-expanded=\"false\" aria-controls=\"topicsToggle\">Show More</a>\n                </div>\n                <div class=\"keywords-list p-y_1 font_n2:md font_n3\">\n                    <ul class=\"ul_inline-comma\">\n                        <li class=\"no-after font_bold\">Keywords: </li>\n                        <li>Acute Coronary Syndrome</li>\n                        <li>Cardiac Surgical Procedures</li>\n                        <li>Coronary Artery Bypass</li>\n                        <li>Heart Arrest</li>\n                        <li>Heart Failure</li>\n                    </ul>\n                    <div class=\"collapse\" id=\"keywordsToggle\">\n                        <ul class=\"ul_inline-comma\">\n                            <li>Hemorrhage</li>\n                            <li>Hospital Mortality</li>\n                            <li>Ischemic Attack, Transient</li>\n                            <li>Lower Extremity</li>\n                            <li>Myocardial Infarction</li>\n                            <li>Myocardial Revascularization</li>\n                            <li>Patient Care Team</li>\n                            <li>Percutaneous Coronary Intervention</li>\n                            <li>Peripheral Arterial Disease</li>\n                            <li>Risk Factors</li>\n                            <li>Secondary Prevention</li>\n                            <li>Shock, Cardiogenic</li>\n                            <li>Stroke</li>\n                            <li>Vascular Diseases</li>\n                        </ul>\n                    </div>\n                    <a class=\"font_bold\" data-bs-toggle=\"collapse\" href=\"#keywordsToggle\" role=\"button\" aria-expanded=\"false\" aria-controls=\"keywordsToggle\">Show More</a>\n                </div>\n                <div>\n                    <ul class=\"additional-details ul_none font_n1\">\n                        <li><span class=\"font_bold\">Webinars: </span> Live</li>\n                        <li><span class=\"font_bold\">Online: </span> Yes</li>\n                        <li><span class=\"font_bold\">Access Type:</span> Paid</li>\n                        <li><span class=\"font_bold\">Price: </span> $888</li>\n                        <li><span class=\"font_bold\">Document Type:</span> Guidelines</li>\n                        <li><span class=\"font_bold\">Publish Date:</span> Mar 28, 2014</li>\n                        <li><span class=\"font_bold\">Focused Update:</span> Jan 28, 2019 <a class=\"link c_primary h:c_primary-n2\" href=\"/\" target=\"_blank\">(Open Update)</a></li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"article-tools m-l_0 m-l_4:md m-y_2\">\n                <a href=\"/\" class=\"font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5\"><i class=\"fas fa-volume m-r_3\"></i> <span class=\"nowrap text\">Summary</span></a>\n                <a href=\"/\" class=\"font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5\"><i class=\"fas fa-calendar m-r_3\"></i> <span class=\"nowrap text\">iCal</span></a>\n                <a href=\"/\" class=\"font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5\"><i class=\"fas fa-file-pdf m-r_3\"></i> <span class=\"nowrap text\">PDF</span></a>\n                <a href=\"/\" class=\"font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5\"><i class=\"fas fa-file-pdf m-r_3\"></i> <span class=\"nowrap text\">PDF</span></a>\n                <a href=\"/\" class=\"font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5\"><i class=\"fas fa-book-open m-r_3\"></i> <span class=\"nowrap text\">JACC</span></a>\n                <a href=\"/\" class=\"font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5\"><i class=\"fas fa-search alt m-r_3\"></i> <span class=\"nowrap text\">Search</span></a>\n            </div>\n        </div>\n    </div>\n</article>\n\nWeight: 100\n\nSubComponents:\nSub.Component.ContentList.Item.Credits - Credits\nSub.Component.ContentList.Item.Thumbnail - Thumbnail\n\nNOTE: Merge all the things.\n\nStyleguide Component.ContentList\n\n*/\n/*\n\nContent List Item: Event\n\nMarkup:\n<article class=\"br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui\">\n    <div class=\"flex flex_row:md flex_column gap-x_4\">\n        {{> Sub.Component.ContentList.Item.Calendar }}\n        <div class=\"flex_auto m-r_4:md\">\n            <span class=\"journal-title c_accent-2 font_bold uppercase wrap block:md font_n1\">Live Meetings</span>\n            <h2 class=\"article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2\">ACC Anywhere is a comprehensive digital library of more than 220 sessions from ACC.22. Purchase today and start expanding your knowledge of the field!</h2>\n            <div class=\"meta m-t_2:md m-l_3 m-l_0:md m-b_3 m-b_0:md font_bold\">\n                <span class=\"c_black-7 m-r_3\">April 22, 2022 - March 01, 2023</span>\n            </div>\n            <div class=\"font-size_down font_bold m-b_0:md m-b_3 m-l_0:md m-l_3 meta\">\n                <span class=\"c_black-6 font_italic m-r_3\"><strong class=\"p-r_3\">On Demand Till:</strong>June 11, 2022</span>\n            </div>  \n            {{> Sub.Component.ContentList.Item.Credits }}\n        </div>\n    </div>\n    <div class=\"flex flex_row:md flex_column gap-x_4\">\n        <div class=\"flex flex_column-reverse flex_row:md gap-x_4\">\n            <div class=\"article-content\">\n                <p class=\"excerpt font_copy font_0 lh_2 m-b_3 m-t_2 z_1\">The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...</p>\n                <div>\n                    <ul class=\"additional-details list-unstyled font_n1\">\n                        <li><span class=\"font_bold\">Meeting Type: </span> Live Meetings</li>\n                        <li><span class=\"font_bold\">Meeting Venue: </span> Virtual (On Demand)</li>\n                        <li><span class=\"font_bold\">Price: </span> $888</li>\n                        <li><span class=\"font_bold\">Access Type: </span> Free</li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"article-tools m-l_0 m-l_4:md m-y_2\">\n                <a href=\"/\" class=\"font_ui p-x_4 p-y_2 c_primary h:c_white h:bg_primary font-medium block:md nowrap w_100:md text_left m-b_2 m-b_0:md h:undecorated bg_shade-5\"><i class=\"fas fa-calendar m-r_3\"></i> <span class=\"nowrap text\">iCal</span></a>\n            </div>\n        </div>\n    </div>\n</article>\n\nSubComponents:\nSub.Component.ContentList.Item.Calendar - Calendar\nSub.Component.ContentList.Item.Credits - Credits\n\n\nWeight: 0\n\nStyleguide Component.ContentList.Event\n\n*/\n/*\n\nContent List Item: Simple\n\nMarkup:\n<article class=\"br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui\">\n    <div class=\"flex flex_row:md flex_column gap-x_4\">\n        {{> Sub.Component.ContentList.Item.Thumbnail }}\n        <div class=\"flex_auto m-r_4:md\">\n            <span class=\"journal-title c_accent-2 font_bold uppercase wrap block:md font_n1\">Cardiovascular Team Section</span>\n            <h2 class=\"article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2\">Long-Term Cardiovascular Outcomes After Bariatric Surgery in the Medicare Population | Journal of the American College of Cardiology</h2>\n            <div class=\"meta m-t_2:md m-l_3 m-l_0:md m-b_3 m-b_0:md font_bold\">\n                <span class=\"c_black-7 m-r_3\">Apr 11, 2022</span>\n                <a href=\"/\">Julianne Fallon, PharmD</a><br>\n            </div>           \n        </div>\n    </div>\n    <div class=\"flex flex_row:md flex_column gap-x_4 w_100\">\n        <div class=\"flex flex_column-reverse flex_row:md gap-x_4 flex-grow_1\">\n            <div class=\"article-content\">\n                <p class=\"excerpt font_copy font_0 lh_2 m-b_3 m-t_2 z_1\">The patient is an 80-year-old male with a history of diabetes mellitus type 2, end stage renal disease, chronic obstructive pulmonary disease (COPD), and lung cancer with recent radiation therapy. He is seen in the emergency department because of...</p>       \n            </div>    \n        </div>\n    </div>\n</article>\n\nWeight: 0\n\nStyleguide Component.ContentList.Simple\n\n*/\n/*\n\nContent List Item: Guidelines\n\nMarkup:\n<article class=\"br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui\">\n    <div class=\"flex flex_row:md flex_column gap-x_4\">\n        <div class=\"flex flex_column flex_row:md gap-x_4 w_100\">\n            <div class=\"article-content flex-grow_1\">\n                <span class=\"journal-title c_accent-2 font_bold uppercase wrap block:md font_n1\">Guidelines</span>\n                <h2 class=\"article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2\">Atrial Fibrillation: Guideline For the Management of Patients</h2>\n                <div class=\"meta m-t_2:md m-l_0 m-b_3 m-b_0:md font_bold\">\n                    <span class=\"c_black-7 m-r_3\">Mar 28, 2014</span>\n                </div>\n                <div>\n                    <ul class=\"additional-details list-unstyled font_n1\">\n                        <li><span class=\"font_bold\">Focused Update:</span> Jan 28, 2019 <a class=\"link c_primary h:c_primary-n2\" href=\"/\" target=\"_blank\">(Open Update)</a></li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"article-tools flex flex_nowrap:lg flex_wrap m-l_0 m-l_4:md m-y_2 self_start:md self_stretch text_center\">\n                <a href=\"/\" class=\"br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5\">\n                    <i class=\"fas fa-book-open font_5 font_9:lg m-b_2:md\"></i>\n                    <span class=\"text block lh_2\">JACC</span>\n                </a>\n                <a href=\"/\" class=\"br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5\">\n                    <i class=\"fas fa-file-pdf font_5 font_9:lg m-b_2:md\"></i>\n                    <span class=\"text block lh_2\">PDF</span>\n                </a>\n                <a href=\"/\" class=\"br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5\">\n                    <i class=\"fab fa-hubspot font_5 font_9:lg m-b_2:md\"></i>\n                    <span class=\"text block lh_2\">Hub</span>\n                </a>\n                <a href=\"/\" class=\"br_2 br_solid br_square br_white-9 c_primary flex flex_50 flex_auto:md flex_column h:bg_primary h:c_white items_center justify_center p-x_4 p-x_5:md p-y_3:md p-y_4 h:undecorated bg_shade-5\">\n                    <i class=\"fas fa-search alt font_5 font_9:lg m-b_2:md\"></i>\n                    <span class=\"text block lh_2 max-w_10:md\">Search within Guidelines</span>\n                </a>\n            </div>\n        </div>\n    </div>\n</article>\n\nWeight: 0\n\nNOTE: This has only one content row, headline is moved down into the rest of the content area.\n\nStyleguide Component.ContentList.Guidelines\n\n*/\n/*\n\nContent List Item: Images\n\nMarkup:\n<article class=\"br_radius br_1 br_black-2 bg_black_-05 br_solid p_4 relative m-b_4 font_ui\">\n    <div class=\"flex flex_row:md flex_column gap-x_4\">\n        {{> Sub.Component.ContentList.Item.Thumbnail }}\n        <div class=\"flex_auto m-r_4:md\">\n            <span class=\"journal-title c_accent-2 font_bold uppercase wrap block:md font_n1\">Slides</span>\n            <h2 class=\"article-title c_primary-n2 cursor_pointer font_1 font_3:md font_display font_medium  h:underline lh_1 m-y_2\">Slide Set | 2022 AHA/ACC/HFSA Guideline for the Management of Heart Failure</h2>\n            <div class=\"meta m-t_2:md m-l_3 m-l_0:md m-b_3 m-b_0:md font_bold\">\n                <span class=\"c_black-7 m-r_3\">Apr 11, 2022</span>\n            </div>\n        </div>\n    </div>\n</article>\n\nWeight: 0\n\nStyleguide Component.ContentList.Images\n\n*/\n/*\nHalf Page Card - Dark\n\n<p>A vertically split card component ideal for highlighting key initiatives or promotional content. Each card features a visual header and a structured text block containing a title, description, and a CTA button. Use these cards in pairs or grids to present multiple pieces of information with equal weight and visual balance.</p>\n\nMarkup:\n<div data-type=\"card\" class=\"bg_acc br_rounder br-tr_radius br-tl_radius c_white color_inherit flex flex_column gap_3 reading-typography relative shadow_bevel-bold text_center\">\n    <header class=\"aspect_21x9 overflow_clip br-tr_radius br-tl_radius\">\n        <img src=\"https://www.acc.org//-/media/Non-Clinical/HeroImages/CMP/G25028-CMP-UX-Webpage-Graphics_455x195-V2A\" alt=\"Branding for the Annual Report\" width=\"100%\" height=\"100%\">\n    </header>\n    <div label=\"content\" class=\"p_4 p_5:lg\">\n    <h3 class=\"m-b_0\">{{> Sub.Placeholder.Text.40ch}}</h3>\n    <p>\n        {{> Sub.Placeholder.Text.250ch}}\n    </p>\n    </div>\n    <div class=\"flex flex_row gap_4 justify_around m-b_4 m-b_5:lg m-t_auto m-x_auto p-b_3 p-x_4 w_auto\">\n        {{> HTML.Inputs.Button modifier_class=\"btn-primary wrap\" }}\n        {{> HTML.Inputs.Button modifier_class=\"btn-shade wrap\" }}\n    </div>\n</div>\n\nNote:\nHalf Cards can have dual actions but the buttons should reflect the primary action as blue and the secondary should be the shade button.\n\nMarkupWrapperClasses: columns_2:md columns_1 gap_6:lg gap_4 grid\n\nSubComponents:\nSub.ClassList.Grid.Split-50 - Double Card Holder Classlist\nSub.Placeholder.Image.21x9 - Image 588w x 252w\n\nWeight: 0\n\nStyleguide: Recipes.Page.Cards.HalfPage\n*/\n/*\nHalf Page Card - Light\n\n<p>A vertically split card component ideal for highlighting key initiatives or promotional content. Each card features a visual header and a structured text block containing a title, description, and a CTA button. Use these cards in pairs or grids to present multiple pieces of information with equal weight and visual balance.</p>\n\nMarkup:\n<div data-type=\"card\" class=\"bg_white br-tr_radius br-tl_radius br_rounder flex flex_column gap_3 reading-typography relative shadow_bevel-bold text_center\">\n    <header class=\"aspect_21x9 overflow_clip br-tr_radius br-tl_radius\">\n        <img src=\"https://www.acc.org//-/media/Non-Clinical/HeroImages/CMP/G25028-CMP-UX-Webpage-Graphics_455x195-V2A\" alt=\"Branding for the Annual Report\" width=\"100%\" height=\"100%\">\n    </header>\n    <div label=\"content\" class=\"p_4 p_5:lg\">\n    <h3 class=\"m-b_0\">{{> Sub.Placeholder.Text.40ch }}</h3>\n    <p>\n        {{> Sub.Placeholder.Text.250ch}}\n    </p>\n    </div>\n    <div class=\"flex flex_row gap_4 justify_around m-b_4 m-b_5:lg m-t_auto m-x_auto p-b_3 p-x_4 w_auto\">\n        {{> HTML.Inputs.Button modifier_class=\"btn-primary\" }}\n        {{> HTML.Inputs.Button modifier_class=\"btn-secondary\" }}\n    </div>\n</div>\n\nNote:\nHalf Cards can have dual actions but the buttons should reflect the primary action as blue and the secondary should be the shade button.\n\nMarkupWrapperClasses: columns_2:md columns_1 gap_6:lg gap_4 grid\n\nDATA:\nSub.ClassList.Grid.Split-50 - Double Card Holder Classlist\n\nSubComponents:\nSub.Placeholder.Image.21x9 - Image 588w x 252w\n\nWeight: 0\n\nStyleguide: Recipes.Page.Cards.HalfPage.Light\n*/\n/*\nSimple Card\n\n<p>A simple card component ideal for summarizing key content with a clear call to action, it maintains vertical rhythm and visual hierarchy.</p>\n\nMarkup:\n<div  data-type=\"card\" class=\"br_solid br_black-3 br_1 br_round flex flex_column bg_white shadow_overlap-light wrapper-container\">\n    <div label=\"content\" class=\"p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md\">    \n        <h3>{{> Sub.Placeholder.Text.30ch }}\n            <small class=\"block font-size_down-2 font_medium m-t_3\"> {{> Sub.Placeholder.Text.40ch }}</small>\n        </h3>\n        <p>{{> Sub.Placeholder.Text.200ch }}</p>\n    </div>\n    <div class=\"flex flex_row gap_3 justify_around m-t_auto m-x_auto p-b_4 p-b_5:md p-x_3 p-x_4:sm p-x_5:md w_auto\">\n        {{> HTML.Inputs.Button modifier_class=\"btn-secondary\" }}\n    </div>\n</div>\n\nNote: \n<strong>Only 1 Action</strong> per card. This is to help with context of the action and focus.\n\n\nMarkupWrapperClasses: columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography\n\nWeight: 0\n\nDATA:\nSub.ClassList.Grid.Card.Split-Triple   - Triple Card Holder Classlist\n\n\nStyleguide: Recipes.Page.Cards.ThirdPage\n*/\n/*\nCard with Inset Image\n\n<p>A simple card component with an inset image. Because of the image the headers and text should be more consise then the Simple Card.</p>\n\nMarkup:\n<div  data-type=\"card\" class=\"br_solid br_black-3 br_1 br_round flex flex_column bg_white shadow_overlap-light wrapper-container\">\n    <div label=\"content\" class=\"p-x_3 p-x_4:md p-x_5:lg p-t_3 p-t_4:md p-t_5:lg\">\n        <img src=\"{{> Sub.Placeholder.Image.16x9 }}\" class=\"br_radius\" /> \n    </div>\n    <div label=\"content\" class=\"p-x_3 p-x_4:sm p-x_5:md p-t_4 p-t_5:md\">    \n        <h3>{{> Sub.Placeholder.Text.40ch }}\n        </h3>\n        <p>{{> Sub.Placeholder.Text.150ch }}</p>\n    </div>\n    <div class=\"flex flex_row gap_3 justify_around m-t_auto m-x_auto p-b_4 p-b_5:md p-x_3 p-x_4:sm p-x_5:md w_auto\">\n        {{> HTML.Inputs.Button modifier_class=\"btn-secondary\" }}\n    </div>\n</div>\n\nNote: \n<strong>Only 1 Action</strong> per card. This is to help with context of the action and focus.\n\n\nMarkupWrapperClasses: columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography\n\nWeight: 0\n\nFORMAT: \n<p><b>Header</b> - Max Characters of 40</p>\n<p><b>Content</b> - Max Characters of 150</p>\n\n\nDATA:\nSub.ClassList.Grid.Card.Split-Triple   - Triple Card Holder Classlist\n\nSubComponents:\nSub.Placeholder.Image.16x9        -  Image 360w x 162h\n\nStyleguide: Recipes.Page.Cards.ThirdPage.InsetImage\n*/\n/*\nFollow Up CTA – Basic\n\n<p>A promotional callout designed to encourage user engagement, typically placed after primary content. This basic variation uses minimal styling to emphasize clarity and focus on the call to action.</p>\n\nMarkup:\n<div label=\"CTA_follow_up\" class=\"reading-typography font-size_up p_4 p_5:md \" style=\"--custom-font-size-up: 1;\">\n  <div data-item=\"cta\" class=\" font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative\">\n    <h2 data-item=\"cta-title\" class=\"m-b_3 lh_1 font_medium font_display\">    \n    <strong class=\"font-size_up m-b_2 block\">\n        {{> Sub.Placeholder.Text.30ch}}\n        </strong>\n        <small class=\"font-size_down block\">\n        {{> Sub.Placeholder.Text.40ch}}\n        </small>\n    </h2>    \n    <div class=\"p-t_2 p-b_3\" data-item=\"cta-description\">\n      <p class=\"font-size_up wrap_balance\">\n      {{> Sub.Placeholder.Text.150ch }}\n      </p>\n    </div>\n    <div class=\"grid justify_center\">\n        {{> HTML.Inputs.Button.LG modifier_class=\"btn-primary expanded-click-area\"}}\n    </div>\n  </div>\n</div>\n\nNote: \nThe CTA Description is optional\n\nMarkupWrapperClasses: p_4\n\nWeight: 0\n\nStyleguide: Recipes.Page.FollowUpCTA.Basic\n*/\n/*\nFollow Up CTA – Beveled Card\n\n<p>This variation enhances the CTA with a beveled white card set against a shaded background, drawing user attention through elevated visual hierarchy. Ideal for page breaks or key engagement moments.</p>\n\nMarkup: \n<div label=\"CTA_follow_up\" class=\"reading-typography font-size_up p_4 p_5:md bg_black-2 p_4 p-y_5:md p-y_6:lg \"\n  style=\"--custom-font-size-up: 1;\">\n  <div data-item=\"cta\"\n    class=\"shadow_bevel-light p_4 p_5:lg bg_white br_round font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative\">\n    <h2 data-item=\"cta-title\" class=\"m-b_3 lh_1 font_medium font_display\">\n        <strong class=\"font-size_up m-b_2 block\">\n        {{> Sub.Placeholder.Text.30ch}}\n        </strong>\n        <small class=\"font-size_down block\">\n        {{> Sub.Placeholder.Text.40ch}}\n        </small>\n    </h2>\n    <div class=\"p-t_2 p-b_3\" data-item=\"cta-description\">\n      <p class=\"font-size_up wrap_balance\">{{> Sub.Placeholder.Text.200ch}}</p>\n    </div>\n    <div class=\"grid justify_center\">\n        {{> HTML.Inputs.Button.LG modifier_class=\"btn-primary expanded-click-area\"}}\n    </div>\n  </div>\n</div>\n\n\nNote: \nThe CTA Description is optional\n\nMarkupWrapperClasses: p_4\n\nWeight: 0\n\nStyleguide: Recipes.Page.FollowUpCTA.BeveledCard\n*/\n/*\nFollow Up CTA – Page Divider\n\n<p>Incorporates a horizontal divider to create a subtle transition between content blocks, maintaining visual flow while signaling the importance of the CTA.</p>\n\nMarkup: \n<div label=\"CTA_follow_up\" class=\"reading-typography font-size_up p_4 p_5:md p_4 p-y_5:md p-y_6:lg \"\n  style=\"--custom-font-size-up: 1;\">\n  <div data-item=\"cta\"\n    class=\"p_4 p-t_6 p-x_5:lg bg_white br-t_1 br_solid br_primary-1 font-size_up m-t_6:lg m-y_4 m-y_5:md m_auto max-w_60 relative text_center relative\">\n    <h2 data-item=\"cta-title\" class=\"m-b_3 lh_1 font_medium font_display\">\n        <strong class=\"font-size_up m-b_2 block\">\n        {{> Sub.Placeholder.Text.30ch}}\n        </strong>\n        <small class=\"font-size_down block\">\n        {{> Sub.Placeholder.Text.40ch}}\n        </small>\n    </h2>\n    <div class=\"grid justify_center\">\n        {{> HTML.Inputs.Button.LG modifier_class=\"btn-primary expanded-click-area\"}}\n    </div>\n  </div>\n</div>\n\nNote: \nThe CTA Description is optional\n\nMarkupWrapperClasses: p_4\n\nStyleguide: Recipes.Page.FollowUpCTA.PageDivider\n*/\n/*\n\nStructures Page Layouts\n\nThese are common pattern that are used to make column layouts on the page.\n\nHideCodeBlock: false\n\nStyleguide Structures.PageLayout\n\n*/\n/*\nBase Page Layout\n\n<p>This layout provides a foundational structure for standard pages. It includes consistent spacing and alignment patterns but omits additional navigational elements like sidebars or complex grid arrangements. Ideal for simple content pages that need a reliable baseline layout.</p>\n\nWeight: 0\n\nStyleguide Structures.PageLayout.Base\n*/\n/*\n\nFullscreen Patterns\n\nSome page layouts only work when placed in fullscreen context.\n\nWeight: 200\n\nStyleguide Structures.PageLayout.Fullscreen\n\n*/\n/*\n\nPage with Sidebar Patterns\n\nSome page layouts only work when placed in main context when there is also a sidebar on the page becuase of reduced space.\n\n\nStyleguide Structures.PageLayout.Sidebar\n\n*/\n/*\nIntro Block - Fullscreen Page\n\nMarkup:\n<div  id=\"introduction\" item-label=\"section\" class=\"columns_2 columns_4:md columns_5:lg gap_4 gap_5:lg grid isolation_isolate p-b_4 p-b_5:lg p-t_4 p-t_5:lg p-x_3 p-x_4:md p-x_5:lg relative\">\n    <div item-label=\"content\" class=\"col-end_3:md col-end_4:lg col-end_end col-start_start\">    \n        Main Content\n    </div>\n    <div item-label=\"sidebar-primary\"  class=\"relative col-start_n3:md col-start_start col-end_end font_n1 font_0:lg\">\n        Aside\n    </div>\n</div>\n{{> Component.Structures.PageLayout.demoStyles }}\n\n\nMarkupWrapperClasses: space-holder colored-zones\n\nStyleguide Structures.PageLayout.Fullscreen.Intro\n\n*/\n/*\nIntro Block - Page with Side Bar\n\nMarkup:\n<section id=\"introduction\" item-label=\"section\" class=\"grid columns_1 columns_5:lg gap_5:lg gap_4\">\n    <div item-label=\"content\"  class=\"col-start_start col-end_n3:lg col-end_end reading-typography font-size_up\" style=\"--custom-font-size-modifier: 1;\">content</div>\n    <div item-label=\"sidebar-primary\" class=\"col-start_start col-start_n3:lg col-end_end wrapper-container\">aside</div>\n</section>\n{{> Component.Structures.PageLayout.demoStyles }}\n\n\nMarkupWrapperClasses: space-holder colored-zones\n\nStyleguide Structures.PageLayout.Sidebar.Intro\n\n*/\n/*\nSplit Page - Pages with Side Bar\n\nMarkup:\n<section item-label=\"section\" class=\"m-x_n4 wrapper-container\">\n    <div class=\"{{> Sub.ClassList.Grid.Split-50 }}\">\n        <div item-label=\"content\" class=\"wrapper-container\">content</div>\n        <div item-label=\"content\" class=\"wrapper-container\">content</div>\n    </div>\n</section>\n{{> Component.Structures.PageLayout.demoStyles }}\n\n\nDATA: \nSub.ClassList.Grid.Split-50 - Grid Split Classes\n\nMarkupWrapperClasses: space-holder colored-zones\n\nStyleguide Structures.PageLayout.Base.SplitPage\n\n*/\n/*\nTriple Split Grid - full screen\n\nMarkup:\n<section item-label=\"section\" class=\"m-x_n4 wrapper-container\">\n    <div class=\"{{> Sub.ClassList.Grid.TripleXL  }}\">\n        <div item-label=\"content\" class=\"wrapper-container\">content</div>\n        <div item-label=\"content\" class=\"wrapper-container\">content</div>\n        <div item-label=\"content\" class=\"wrapper-container\">content</div>\n    </div>\n</section>\n{{> Component.Structures.PageLayout.demoStyles }}\n\n\nDATA: \nSub.ClassList.Grid.TripleXL  - Triple split on XL\n\nMarkupWrapperClasses: space-holder colored-zones\n\nStyleguide Structures.PageLayout.Fullscreen.TripleSplitGrid\n\n*/\n/*\nTriple Split Grid - Sidebar\n\nMarkup:\n<section item-label=\"section\" class=\"m-x_n4 wrapper-container\">\n    <div class=\"{{> Sub.ClassList.Grid.TripleLG  }}\">\n        <div item-label=\"content\" class=\"wrapper-container\">content</div>\n        <div item-label=\"content\" class=\"wrapper-container\">content</div>\n        <div item-label=\"content\" class=\"wrapper-container\">content</div>\n    </div>\n</section>\n{{> Component.Structures.PageLayout.demoStyles }}\n\n\nDATA: \nSub.ClassList.Grid.TripleLG  - Triple split on LG\n\nMarkupWrapperClasses: space-holder colored-zones\n\nStyleguide Structures.PageLayout.Sidebar.TripleSplitGrid\n\n*/\n/*\nPodcast\n\nA styled player for podcasts. Includes a content section, a list of related references, twitter links to the presenters, and an audio player interface with a Subscribe button.\n\nMarkup:\n<div class=\"reading-typography\">\n    <!-- STARRT: Content -->\n        <p>Content Goes here </p>\n    <!-- END: Content -->\n    <!-- STARRT: Related References -->\n        {{> Sub.Recipe.Article.Podcasts.References }}\n    <!-- END: Related References -->\n    <!-- START: Twitter List -->\n        {{> Sub.Recipe.Article.Podcasts.Twitter.List }}\n    <!-- END: Twitter List -->\n    <!-- START: Player -->\n        {{> Sub.Recipe.Article.Podcast.Player }}\n   <!-- END: Player -->\n</div>\n\nmarkupwrapperclasses:\np_4\n\nSubComponents:\nSub.Recipe.Article.Podcasts.References - Related References\nSub.Recipe.Article.Podcasts.Twitter.List - TwitterList\nSub.Recipe.Article.Podcast.Player - Player\n\nStyleguide Recipes.Article.Podcast\n\nWeight: 0\n*/\n/*\nRelated References\n\nAn organized list of references or citations. This structure helps users to find additional resources or sources related to the content.\n\nMarkup:\n<h3>Related References:</h3>\n<ol class=\"marker_primary\">\n    <li>0000000000000000000000</li>\n    <li>0000000000000000000000</li>\n    <li>0000000000000000000000</li>\n</ol>\n\nMarkupWrapperClasses: reading-typography p_4\n\nStyleguide Sub.Recipe.Article.Podcasts.References\n\nWeight: 1000\n*/\n/*\nTwitter Button\n\nA styled button for linking to a Twitter profile. The button includes a Twitter icon and a username.\n\nMarkup:\n<a class=\"bg_twitter br_twitter btn btn-primary expanded-click-area font-size_down-1 h:bg_secondary-n3 h:c_secondary-n3 c_white h:undecorated not-link\" href=\"https://www.twitter.com/Tweat_DrSoda\" target=\"_blank\">\n    <i class=\"br-r_1 br-white-5 br_solid fa-x-twitter fab m-l_n2 m-r_3 m-y_n2 p-r_3 p-r_3:lg p-y_2\"></i>\n    <i class=\"fa-at fas opacity_8 p-r_1\"></i>\n    Tweat_DrSoda\n</a>\n\nMarkupWrapperClasses: reading-typography\n\nStyleguide Sub.Recipe.Article.Podcasts.Twitter.Button\n\nWeight: 100\n*/\n/*\nTwitter Link List\n\nA list of Twitter profiles, each accompanied by a name. Provides an organized display for multiple Twitter links, which could be useful for events, authors, or featured users.\n\nMarkup:\n<h3>Twitter Links:</h3>\n<ul class=\"br-t_1 br_black-2 br_solid max-w_65 ul_none font_0\">\n<!-- START: Twitter Link: Duplicate as needed -->\n    <li class=\"br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative\">\n        <span class=\"font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center\"> Pepper H. Soda III, MD, FACC</span>\n        <span class=\"grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md\">\n            {{> Sub.Recipe.Article.Podcasts.Twitter.Button }}\n        </span>\n    </li>\n<!-- END: Twitter Link -->\n<!-- DELETE ME -->\n    <li class=\"br-b_1 br_black-2 br_solid flex flex_auto flex_column flex_row:md gap_3 gap_5:lg justify_start p-x_4 p-y_2 p-y_3:lg relative\">\n        <span class=\"font_copy font-size_up-1 lh_2 c_secondary-n2 font_medium inline-block self_center\"> Pepper H. Soda III, MD, FACC</span>\n        <span class=\"grid items_center justify_center:md justify_start m-b_0:md m-b_3 m-l_auto:md\">\n            {{> Sub.Recipe.Article.Podcasts.Twitter.Button }}\n        </span>\n    </li>\n<!-- END DELETE ME -->\n</ul>\n\nMarkupWrapperClasses: reading-typography\n\nSubComponents:\nSub.Recipe.Article.Podcasts.Twitter.Button  - Twitter Button\n\n\n\nStyleguide Sub.Recipe.Article.Podcasts.Twitter.List\n\nWeight: 0\n*/\n/*\nPodcast Player\n\nA multimedia component designed specifically for audio playback. This player features controls for playing, pausing, adjusting volume, and more. It includes a fallback link for browsers that don't support HTML5 audio, as well as a prominent call to action to encourage podcast Subscription.\n\nMarkup:\n<div class=\"bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light\">\n    <audio class=\"w_100\" controls=\"\">\n        <source src=\"http://traffic.libsyn.com/accelaccorg/00000000.mp3\" type=\"audio/mp3\">\n        <p>Your browser doesn't support HTML5 audio. Here is a <a class=\"link\" target=\"_blank\" href=\"http://traffic.libsyn.com/accelaccorg/00000000.mp3\">link to the audio</a> instead.</p>\n    </audio>\n    <div class=\"grid items_center justify_center\">\n        <a href=\"/Latest-in-Cardiology/Features/Podcasts\" class=\"btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light\">Subscribe\n            to the ACCEL Lite Podcast</a>\n    </div>\n</div>\n\nMarkupWrapperClasses: reading-typography p_4\n\nStyleguide Sub.Recipe.Article.Podcast.Player\n\nWeight: 0\n*/\n.updateDecoration {\n  background-color: hsla(var(--highlight-h), calc(var(--highlight-s) - var(--highlight-s) * 0.375), calc(var(--highlight-l) + (100% - var(--highlight-l)) * 0.75), 1) !important;\n}\n\nbody {\n  font-family: var(--font-family_copy);\n  font-size: 1rem;\n}\n\nh1, .h1,\nh2,\n.h2,\nh3,\n.h3,\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n  font-family: var(--font-family_display);\n  font-weight: var(--font_regular);\n}\n\nh6, .h6 {\n  font-weight: var(--font_bold);\n}\n\np {\n  line-height: 1.35;\n}\n\nul,\nol {\n  line-height: 1.6;\n}\n\nkbd,\ncode,\nsamp,\nvar {\n  font-family: var(--font-family_mono);\n}\n\nform {\n  border-color: rgba(19, 18, 18, 0.38);\n}\n\nlabel {\n  font-size: 1rem;\n  font-weight: var(--font_bold);\n  font-family: var(--font-family_ui);\n  color: currentColor;\n}\n\ninput,\nselect,\ntextarea,\nlegend,\nfieldset,\nbutton {\n  box-sizing: border-box;\n  font-size: 1rem;\n  font-family: var(--font-family_ui);\n  color: currentColor;\n}\n\nbutton,\n[type=button],\n[type=submit],\n[type=reset], [type=date],\n[type=datetime],\n[type=datetime-local],\n[type=email],\n[type=month],\n[type=number],\n[type=password],\n[type=search],\n[type=tel],\n[type=text],\n[type=url],\n[type=week],\n[type=time], select,\ntextarea {\n  padding: 0.25rem 0.5rem;\n  line-height: 1.6;\n  min-height: 1.5em;\n  border-color: rgba(19, 18, 18, 0.25);\n  border-width: thin;\n  border-radius: 6px;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n  box-shadow: inset 1px 1px 2px 2px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12), inset 2px 2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1), inset -2px -2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);\n  outline-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);\n}\n\n[type=date],\n[type=datetime],\n[type=datetime-local],\n[type=email],\n[type=month],\n[type=number],\n[type=password],\n[type=search],\n[type=tel],\n[type=text],\n[type=url],\n[type=week],\n[type=time], select,\ntextarea {\n  width: 100%;\n}\n\ninput,\nselect,\ntextarea,\nlegend,\nfieldset,\nbutton {\n  box-sizing: border-box;\n}\n\n[type=color] {\n  width: 1.5rem;\n  height: 1.5rem;\n  padding: 0;\n  border-color: rgba(19, 18, 18, 0.25);\n}\n\n[type=radio],\n[type=checkbox] {\n  padding-left: 0.5rem;\n}\n\nbutton,\n[type=button],\n[type=submit],\n[type=reset] {\n  width: auto;\n  border-radius: 6px;\n}\n\nfieldset {\n  padding: 0.5rem 1rem;\n  margin: 0.5rem 0;\n  border-color: rgba(19, 18, 18, 0.1);\n}\n\n/*\n\n Basic Inputs\n\n Arches is strongly based on utility classes styling everything so it commonly just builds on either the base of the browser defaults or the defaults of the framework that is built on. This is a kitchen sink of html elements so you can see how this variation will effect html. There is No basic styling around the pure DOM with the utility class only.  To get full brand styling use a framework based version of arches.  \n\n  Styleguide HTML.Inputs\n\n*/\n/*\n\n  Text Inputs \n\n  Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.\n\nMarkup:\n<div class=\"flex_row flex gap-x_5\">\n\t<div class=\"flex_auto\">\n\t\t<h3>Utility Class</h3>\n\t\t<label for=\"example-input-email\" class='m-b_3'>Email address</label> \n\t\t<input type=\"email\" id=\"example-input-email\" placeholder=\"Enter email\"/>\n\t</div>\n\t<div class=\"flex_auto\">\n\t\t<h3>Bootstrap</h3>\n\t\t<label for=\"exampleFormControlInput1\" class=\"form-label\">Email address</label>\n\t\t<input type=\"email\" class=\"form-control\" id=\"exampleFormControlInput1\" placeholder=\"name@example.com\"/>\n\t</div>\n</div>\n\n  Styleguide HTML.Inputs.Text\n\n*/\n/*\n\nInputs UC\n\nUtility Class only build inputs\n\nMarkup:\n<form>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-email\">Email address</label> <input type=\"email\" id=\"example-input-email\" placeholder=\"Enter email\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-password1\">Number</label> <input type=\"number\" id=\"example-input-number\" placeholder=\"Number\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-password\">Password</label> <input type=\"password\" id=\"example-input-password\" placeholder=\"Password\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-search\">Search</label> <input type=\"search\" id=\"example-input-serach\" placeholder=\"Search ..\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-tel\">Telephone number</label> <input type=\"tel\" id=\"example-input-tel\" placeholder=\"Telephone number\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-text\">Text</label> <input type=\"text\" id=\"example-input-text\" placeholder=\"Enter some text here\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-url\">Url</label> <input type=\"url\" id=\"example-input-url\" placeholder=\"Enter a url here\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-color\">Color</label> <input type=\"color\" id=\"example-inupt-color\" placeholder=\"#fff\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-date\">Date</label> <input type=\"date\" id=\"example-input-date\" placeholder=\"date\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-date-time\">Date / Time</label> <input type=\"datetime\" id=\"example-input-date-time\" placeholder=\"date / time\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-date-time-local\">Date / Time local</label> <input type=\"datetime-local\" id=\"example-input-date-time-local\" placeholder=\"date / time local\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-month\">Month</label> <input type=\"month\" id=\"example-input-month\" placeholder=\"Month\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-week\">Week</label> <input type=\"week\" id=\"example-input-week\" placeholder=\"Week\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-time\">Time</label> <input type=\"time\" id=\"example-input-time\" placeholder=\"Time\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-select1\">Example select</label> <select id=\"example-select1\">\n            <option>1</option>\n            <option>2</option>\n            <option>3</option>\n            <option>4</option>\n            <option>5</option>\n        </select></div>\n    <div><label for=\"example-select2\">Example multiple select</label> <select multiple=\"\" id=\"example-select2\">\n            <option>1</option>\n            <option>2</option>\n            <option>3</option>\n            <option>4</option>\n            <option>5</option>\n        </select></div>\n    <div><label for=\"example-textarea\">Example textarea</label> <textarea id=\"example-textarea\" rows=\"3\"></textarea></div>\n    <div><label for=\"example-input-file\">File input</label> <input type=\"file\" id=\"example-input-file\"></div>\n    <fieldset>\n        <legend>I am legend</legend>\n        <div><label><input type=\"radio\" name=\"options-radios\" id=\"optionsR-radios1\" value=\"option1\" checked=\"\"> Option one is this and that—be sure to include why it's great</label></div>\n        <div><label><input type=\"radio\" name=\"options-radios\" id=\"options-radios2\" value=\"option2\"> Option two can be something else and selecting it will deselect option one</label></div>\n        <div><label><input type=\"radio\" name=\"optionsRadios\" id=\"options-radios3\" value=\"option3\" disabled=\"\"> Option three is disabled</label></div>\n    </fieldset>\n    <fieldset>\n        <legend>I am also legend</legend><label for=\"checkbox-demo-1\"><input type=\"checkbox\" id=\"checkbox-demo-1\"> Check me out</label> <label for=\"checkbox-demo-2\"><input type=\"checkbox\" id=\"checkbox-demo-2\"> Or check me out</label>\n    </fieldset>\n    <div>\n        <button type=\"button\" name=\"button\">Button</button>\n        <input type=\"button\" name=\"input\" value=\"Input Button\">\n        <input type=\"submit\" name=\"submit\" value=\"Submit Button\">\n        <input type=\"reset\" name=\"reset\" value=\"Reset Button\">\n    </div>\n</form>\n\nWeight:100\n\nStyleguide HTML.Inputs.All\n\n*/\n/*\n\nTable\n\nBasic Tables with this variation of Arches. Please note that the html can have a different look depending on the brand or the framework the variation is built on.  \n\n<table><caption>Tables can have captions now.</caption><tbody><tr><th>Person</th><th>Number</th><th>Third Column</th></tr><tr><td>Someone Lastname</td><td>900</td><td>Nullam quis risus eget urna mollis ornare vel eu leo.</td></tr><tr><td><a href=\"#\">Person Name</a></td><td>1200</td><td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td></tr><tr><td>Another Person</td><td>1500</td><td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td></tr><tr><td>Last One</td><td>2800</td><td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td></tr></tbody></table>\n\n\nStyleguide HTML.BasicTable\n\n*/\ntable {\n  font-family: var(--font-family_ui);\n  font-size: 1rem;\n}\ntable caption {\n  padding: 0.5rem;\n}\n\nth,\ntd {\n  padding: 0.25rem 0.5rem;\n  text-align: start;\n}\n\nthead {\n  font-weight: var(--font_bold);\n  padding: 0.25rem 0.5rem 0;\n}\n\ntbody {\n  padding: 0 0.5rem;\n}\n\ntfoot,\ncaption {\n  font-size: 0.8888888889rem;\n  padding: 0 0.5rem 0.25rem;\n}\n\n/*\n Design Base\n\n Arches is design inspired by a pad of paper in the hand.  Subtle Textures and Layer shadows keep the readability very high. \n\n Weight: -1000\n\n Styleguide DesignBase\n*/\n/*\n\nFonts \n\nThe ACC is focused on stable, conservative, clean fonts.   Roboto Slab is the standard serif fonts across all products at the ACC.\n\n Styleguide DesignBase.Fonts\n*/\n/*\n\nAccent Roboto Slab\n\nA beautiful Accent font that shows a complexity and texture to the fonts used in the design. \n\n<div class=\"font_accent\">\n\t<h2 class=font_accent group-divide-bottom font--name small-12\">\n\t\tRoboto Slab\n\t\t<span class=\"sub-line\">font-family: \"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,serif, \"slab\"</span>\n\t</h2>\n\t<div class=\"font flex\">\n\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">RS<span></span></span></div>\n\t\t<div class=\"flex_auto font--example\">\n\t\t\t<h3 class=font_accent font_6\">Accent Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: -10\n\n Styleguide DesignBase.Fonts.Accent\n*/\n/*\n\nDisplay: Maven Pro\n\n A Slick font that has a slight interest used for headers and UI. \n\n<div class=\"font_display\">\n\t<h2 class=\"font_display group-divide-bottom font--name small-12\">\n\t\tMaven Pro\n\t\t<span class=\"sub-line\">font-family: \"Maven Pro\",\"Muli\",\"Open Sans\",Verdana,Helvetica,sans-serif</span>\n\t</h2>\n\t<div class=\"font flex grid-padding-x grid-padding-y\">\n\t\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">MP<span></span></span></div>\n\t\t<div class=\"flex_auto font--example\">\n\t\t\t<h3 class=\"font_display\">Display Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: -5\n\n Styleguide DesignBase.Fonts.Display\n*/\n/*\n\nCopy: Open Sans\n\n A clean font for content and text of none UI elements. \n\n<div class=\"font_copy\">\n\t<h2 class=\"group-divide-bottom font--name small-12\">\n\t\t\"Open Sans\"\n\t\t<span class=\"sub-line\">font-family: \"\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif\"</span>\n\t</h2>\n\t<div class=\"font flex grid-padding-x grid-padding-y\">\n\t\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">OS<span></span></span></div>\n\t\t<div class=\"felx_auto font--example\">\n\t\t\t<h3 class=\"\">Content Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: 0\n\n Styleguide DesignBase.Fonts.Copy\n*/\n/*\n\nUI: Open Sans\n\n A clean font for content and text of none UI elements. \n\n<div class=\"font_ui\">\n\t<h2 class=\" group-divide-bottom font--name small-12\">\n\t\t\"Open Sans\"\n\t\t<span class=\"sub-line\">font-family: \"\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif\"</span>\n\t</h2>\n\t<div class=\"font flex grid-padding-x grid-padding-y\">\n\t\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">OS<span></span></span></div>\n\t\t<div class=\"felx_auto font--example\">\n\t\t\t<h3 class=\"\">Content Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: 1\n\n Styleguide DesignBase.Fonts.UI\n*/\n/*\n\nIcons: Font Awesome\n\n<div>\n<h3>The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications.</h3><p> The organization uses <strong>version 6</strong> of Font Awesome's icon sets.</p><p> The ACC recognizes that icons convey meaning and has developed an icon dictionary to ensure consistent usage of icons throughout its digital platforms. This approach enhances the user experience by providing clear and concise communication through the use of symbols, while the Font Awesome library enables the ACC to quickly and efficiently incorporate high-quality icons into its digital content.<p><div class=\"text_center\"><a class=\"btn btn-primary m-x_3\" href=\"https://fontawesome.com/icons\">Font Awesome</a><a class=\"btn btn-primary m-x_3\" href=\"https://acc-style.github.io/IconDictionary/\">Icon Dictionary</a></div></div>\n\n\n\n\nStyleguide DesignBase.IconsTrue\n*/\n/*\n\nACC's Blue\n\n$acc-blue            -  #004176; acc\n\nStyleguide DesignBase.Colors.ACC\n*/\n/*\n\nTheme Colors \n\nColors are based off of the ACC Scrub Colors.\n\nmap-get($theme-palette, primary)              -  #198dae; primary\nmap-get($theme-palette, secondary)            -  #676a72; secondary\nmap-get($theme-palette, shade)           \t  - #878585; shade\nmap-get($theme-palette, accent)               -  #16a385;  accent\nmap-get($theme-palette, info)                 -  #a3988c; info\nmap-get($theme-palette, highlight)            -  #7742bd; highlight\n\nWeight:-1000\n\nStyleguide DesignBase.Colors\n */\n/*\n\nAction Colors  \n\nActionable colors used to respond to user inputs and messaging.\n\nmap-get($theme-palette, alert)                -  #dd1a1a; alert\nmap-get($theme-palette, warning)              -  #da8210; warning\nmap-get($theme-palette, success)              -  #078a2e;  success\nmap-get($theme-palette, navigation)           -  #2b58c0; navigation\n\nStyleguide DesignBase.Colors.Actions\n*/\n/*\n\nColor Coding  \n\nColor Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an associated meaning. All of these colors are just used for reference and have no associated decorator classes.  You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors. \n\nStyleguide DesignBase.Colors.ColorCoding\n\n */\n/*\n\nCOR Colors  \n\n(COR) Class of Recommendation is a color collect used in Guideline recommendations.\n\n$cor-green                 \t- #6fc284; I\n$cor-yellow              \t- #ffd44f; IIA\n$cor-yellow-orange          - #faa74b; IIA\n$cor-orange               \t- #f15d4c;III and III-NoHarm\n$cor-red               \t\t- #ed1c00; III-harm\n\nWeight: 10\n\nStyleguide DesignBase.Colors.ColorCoding.COR\n\n */\n/*\n\nLOE Colors  \n\n(LOE) level of Evidence is a color collect used in Guideline recommendations.\n\n$loe-dark-blue                 \t- rgb(62, 111, 183);LOE A\n$loe-mid-blue              \t\t- rgb(101, 156, 211);LOE B-R\n$loe-light-blue                \t- rgb(161, 193, 230);LOE B-NR\n$loe-pale-blue                \t- rgb(181, 213, 229); LOE C\n\nWeight: 10\n\nStyleguide DesignBase.Colors.ColorCoding.LOE\n\n */\n/*\n\nCredit Type Color Coding  \n\nCredit Types in the ACC have a specific color coding.\n\n$credit-AAPA                    - #e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit  \n$credit-ABP                     - #007a5b; ABP-MOC: American Board of Pediatrics   \n$credit-ABPMOCII                     - #0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2  \n$credit-ABPMOCIV                     - #105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4 \n$credit-ATCEU                   - #775744; ATCEU: Athletic Trainer Continuing Education Unit   \n$credit-CE                      - #a8a8a8; CE: Continuing CCA\\Tech Education  \n$credit-CME                     - #00a15b; CME: AMA PRA Category 1TM Credit(s)    \n$credit-CNE                     - #198dae; CNE: Continuing Nurse Education  \n$credit-CNErx                   - #52549e; CNErx: Continuing Nursing Education Pharmaceutical   \n$credit-COP                     - #775891; COP: Certificate of Participation  \n$credit-CPE                     - #992e2e; CPE: Continuing Pharmacy Education \n$credit-ECME                    - #d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit\n$credit-IPCE                    - #6c36b3; IPCE: Interprofessional Continuing Education Credit\n$credit-MOCII                   - #9a1267; MOC II: ABIM MOC Part II  \n$credit-MOCIV                   - #d3248d; MOC IV: ABIM MOC Part IV    \n\nWeight: 0\n\nStyleguide DesignBase.Colors.ColorCoding.Credits\n\n*/\n/*\n\nClinical Pathway Colors  \n\nEach of the clinical pathways has a distinctive color.  These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.\n\n$pathway-acute-coronary-syndromes \t\t\t\t\t\t- #009974;  Acute Coronary Syndromes\n$pathway-arrhythmias-EP \t\t\t\t\t\t\t\t- #005b37;  arrhythmias and Clinical EP\n$pathway-congenital-heart-disease \t\t\t\t\t\t- #fdb918;  Congenital Heart Disease\n$pathway-ecg-stress-test \t\t\t\t\t\t\t\t- #d9691f;  Standard ECG, Stress Test\n$pathway-heart-failure \t\t\t\t\t\t\t\t\t- #410d49;  Heart Failure and Cardiomyopathies\n$pathway-invasive-cardiology \t\t\t\t\t\t\t- #c8b02f;  Invasive Cardiology Angiography and Intervention\n$pathway-noninvasive-cardiology \t\t\t\t\t\t- #947b33;  Noninvasive Cardiology\n$pathway-pandemic \t\t\t\t\t\t\t\t\t\t- #8e2582;  Pandemic \"Covid\"\n$pathway-pericardial \t\t\t\t\t\t\t\t\t- #0079ad;  pericardial Disease\n$pathway-prevention \t\t\t\t\t\t\t\t\t- #a01d51;  Prevention\n$pathway-pulmonary-hypertension \t\t\t\t\t\t- #d60e7e;  Pulmonary Hypertension and Venous Thromboembolic Disease\n$pathway-special \t\t\t\t\t\t\t\t\t\t- #00b6f1;  Special\n$pathway-stable-ischemic-heart-disease \t\t\t\t- #0f3e65;  Stable ischemic Heart Disease\n$pathway-valvular-heart-disease \t\t\t\t\t\t- #4f4190;  Valvular Heart Disease\n$pathway-vascular-medicine \t\t\t\t\t\t\t\t- #ae171c;  Vascular Medicine\n\nWeight: -1\n\nStyleguide DesignBase.Colors.ColorCoding.Pathways\n\n*/\n/*\n\nRegistry CC\n\nCredit Type Color codes in the ACC have a specific color coding.\n\n$registry-cpmi                  -   #f22418;    Chest Pain MI Registry\n$registry-afib                  -   #ffb300;    AFib Ablation Registry\n$registry-cathpci               -   #0086d5;    CathPCI Registry\n$registry-icd                   -   #80b800;    ICD Registry\n$registry-impact                -   #4e1f73;    IMPACT Registry\n$registry-pinnacle-primary      -   #0e4f1b;    PINNACLE Registry (Primary)\n$registry-pinnacle-accent       -   #b3c4c4;    PINNACLE Registry (Accent)\n$registry-focus                 -   #d6560d;    Patient Navigator Focus MI\n$registry-pcibleeding           -   #c0268e;    Reducing Risk PCI Bleeding\n$registry-laao                  -   #00667a;    LAAO Registry\n$registry-pvi                   -   #00947f;    PVI Registry\n$registry-auxdata               -   #04adad;    Auxiliar Data Collection\n$registry-ststvt                -   #a20062;    STS ACC TVT Registry\n$registry-diabetes              -   #7893b8;    Diabetes Collaborative \n\nWeight: 2000\n\nStyleguide  DesignBase.Colors.ColorCoding.Registry\n\n*/\n/*\n\nJournal\n\nJournals of JACC have specific branding colors.\n\n$journal-jc             - #002e5a;                       Journal of the American College of Cardiology: (JC)\n$journal-adv            - #0000FF;                      JACC: Advances: (JC-ADV)\n$journal-asia           - #ec2939;                     JACC: Asia: (JC-ASIA)\n$journal-tran           - #1788c2;                     JACC: Basic to Translational Science: (JC-TRAN)\n$journal-cvonc          - #00ae81;                    JACC: CardioOncology: (JC-CVONC)\n$journal-case           - #f37321;                     JACC: Case Reports: (JC-CASE)\n$journal-ep             - #8a5e96;                       JACC: Clinical Electrophysiology: (JC-EP)\n$journal-hf             - #991326;                       JACC: Heart Failure: (JC-HF)\n$journal-invt             - #038e92;                   JACC: Cardiovascular Interventions: (JC-INVT)\n$journal-imag            - #c18a0e;                    JACC: Cardiovascular Imaging: (JC-IMAG)\n\n\nWeight: 2000\n\nStyleguide  DesignBase.Colors.ColorCoding.Journals\n\n*/\n/*\n\nSocial Network Colors  \n\nEach of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.\n\n$twitter            -   #000;  \t\ttwitter     \n$facebook           -   #3b5998;  \tfacebook    \n$linkedin           -   #007bb6;  \tlinkedin    \n$apple-store        -   #ea4cc0;  \tapple-store \n$google-play        -   #689f38;  \tgoogle-play \n$youtube            -   #bb0000;  \tyoutube     \n\n\n\nWeight: 100\n\nStyleguide DesignBase.Colors.ColorCoding.Social Networks\n\n*/\n/*\n\tTextures\n\n\tAll textures in the Arches design are a subtle variation of transparent.   Allowing for colors to bleed through from behind.  Different textures have intentions or are reserved for certain usagaes. \n\n\t.texture_light                       \t\t- Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of. \n\t.texture_medium            \t\t\t\t\t- medium texture are used for area that are hidden away.  Collapsable navs, areas, or sidebars ususaly use the medium texture.\n\t.texture_dust            \t\t\t\t\t- Dust is the most transparent texture allowing for the color of the background to show through the most.  This is used for the painted tops of cards, or score bars.\n\t.texture_dark              \t\t\t\t\t- This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.  \n\t.texture_cross            \t\t\t\t\t- A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.\n\t.texture_disabled              \t\t\t\t- This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand. \n\n\tMarkup:\n\t<div class=\"{{modifier_class}} p_5 border-c_black-8 border-width_1 border_solid text_center bg_primary-4\">{{modifier_class}} with a light primary color background</div>\n\n\tStyleguide DesignBase.Textures\n\n */\n/*\n\nprimary: Color Variations \n\nThe Modified versions of the primary color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_primary\"\n>\n\t\t<div class='p_3 bg_primary-n5'><h2 class= c_white >primary-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #04151a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#04151a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 4, 21, 26 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>4, 21, 26</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,77.0100502513%, 5.8529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,77.0100502513%, 5.8529411765%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-n4'><h2 class= c_white >primary-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #082a34;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#082a34</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 8, 42, 52 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>8, 42, 52</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,76.6331658291%, 11.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,76.6331658291%, 11.7058823529%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-n3'><h2 class= c_white >primary-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0d4757;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0d4757</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 13, 71, 87 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>13, 71, 87</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,76.1306532663%, 19.5098039216% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,76.1306532663%, 19.5098039216%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-n2'><h2 class= c_white >primary-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #12637a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#12637a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 18, 99, 122 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>18, 99, 122</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,75.6281407035%, 27.3137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,75.6281407035%, 27.3137254902%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-n1'><h2 class= c_white >primary-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #157894;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#157894</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 21, 120, 148 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>21, 120, 148</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,75.2512562814%, 33.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,75.2512562814%, 33.1666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-0'><h2 class= c_white >primary-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #198dae;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#198dae</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 25, 141, 174 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>25, 141, 174</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg, 74.8743718593%, 39.0196078431% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg, 74.8743718593%, 39.0196078431%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-1'><h2 class= c_black >primary-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #1da3c9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1da3c9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 29, 163, 201 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>29, 163, 201</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,71.1306532663%, 45.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,71.1306532663%, 45.1176470588%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-2'><h2 class= c_black >primary-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #33bbe2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#33bbe2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 51, 187, 226 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>51, 187, 226</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,65.5150753769%, 54.2647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,65.5150753769%, 54.2647058824%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-3'><h2 class= c_black >primary-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #77d2eb;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#77d2eb</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 119, 210, 235 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>119, 210, 235</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,56.1557788945%, 69.5098039216% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,56.1557788945%, 69.5098039216%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-4'><h2 class= c_black >primary-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bbe8f5;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bbe8f5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 187, 232, 245 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>187, 232, 245</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,46.7964824121%, 84.7549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,46.7964824121%, 84.7549019608%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-5'><h2 class= c_black >primary-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e4f6fb;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e4f6fb</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 228, 246, 251 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>228, 246, 251</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 193.288590604deg ,41.1809045226%, 93.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>193.288590604deg ,41.1809045226%, 93.9019607843%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.primary\n\n*/\n/*\n\nsecondary: Color Variations \n\nThe Modified versions of the secondary color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_secondary\"\n>\n\t\t<div class='p_3 bg_secondary-n5'><h2 class= c_white >secondary-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0f1011;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0f1011</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 15, 16, 17 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>15, 16, 17</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,13.1382488479%, 6.3823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,13.1382488479%, 6.3823529412%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-n4'><h2 class= c_white >secondary-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #1f2022;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1f2022</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 31, 32, 34 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>31, 32, 34</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,11.7142857143%, 12.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,11.7142857143%, 12.7647058824%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-n3'><h2 class= c_white >secondary-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #343539;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#343539</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 52, 53, 57 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>52, 53, 57</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,9.8156682028%, 21.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,9.8156682028%, 21.2745098039%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-n2'><h2 class= c_white >secondary-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #484a50;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#484a50</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 72, 74, 80 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>72, 74, 80</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,7.9170506912%, 29.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,7.9170506912%, 29.7843137255%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-n1'><h2 class= c_white >secondary-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #585a61;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#585a61</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 88, 90, 97 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>88, 90, 97</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,6.4930875576%, 36.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,6.4930875576%, 36.1666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-0'><h2 class= c_white >secondary-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #676a72;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#676a72</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 103, 106, 114 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>103, 106, 114</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg, 5.069124424%, 42.5490196078% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg, 5.069124424%, 42.5490196078%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-1'><h2 class= c_black >secondary-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #757881;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#757881</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 117, 120, 129 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>117, 120, 129</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,4.8156682028%, 48.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,4.8156682028%, 48.2941176471%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-2'><h2 class= c_black >secondary-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8c8f97;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8c8f97</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 140, 143, 151 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>140, 143, 151</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,4.435483871%, 56.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,4.435483871%, 56.9117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-3'><h2 class= c_black >secondary-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #b2b4b9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b2b4b9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 178, 180, 185 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>178, 180, 185</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,3.801843318%, 71.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,3.801843318%, 71.2745098039%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-4'><h2 class= c_black >secondary-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d9dadc;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d9dadc</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 217, 218, 220 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>217, 218, 220</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,3.168202765%, 85.637254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,3.168202765%, 85.637254902%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-5'><h2 class= c_black >secondary-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f0f0f1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f0f0f1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 240, 240, 241 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>240, 240, 241</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 223.6363636364deg ,2.7880184332%, 94.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>223.6363636364deg ,2.7880184332%, 94.2549019608%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.secondary\n\n*/\n/*\n\nsuccess: Color Variations \n\nThe Modified versions of the success color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_success\"\n>\n\t\t<div class='p_3 bg_success-n5'><h2 class= c_white >success-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #011507;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#011507</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 1, 21, 7 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>1, 21, 7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,91.1655172414%, 4.2647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,91.1655172414%, 4.2647058824%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-n4'><h2 class= c_white >success-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #02290e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#02290e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 2, 41, 14 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>2, 41, 14</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,91.0206896552%, 8.5294117647% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,91.0206896552%, 8.5294117647%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-n3'><h2 class= c_white >success-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #044517;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#044517</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 4, 69, 23 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>4, 69, 23</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,90.8275862069%, 14.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,90.8275862069%, 14.2156862745%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-n2'><h2 class= c_white >success-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #056120;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#056120</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 5, 97, 32 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>5, 97, 32</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,90.6344827586%, 19.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,90.6344827586%, 19.9019607843%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-n1'><h2 class= c_white >success-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #067527;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#067527</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 6, 117, 39 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>6, 117, 39</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,90.4896551724%, 24.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,90.4896551724%, 24.1666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-0'><h2 class= c_white >success-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #078a2e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#078a2e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 7, 138, 46 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>7, 138, 46</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg, 90.3448275862%, 28.431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg, 90.3448275862%, 28.431372549%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-1'><h2 class= c_black >success-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #09ad3a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#09ad3a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 9, 173, 58 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>9, 173, 58</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,85.8275862069%, 35.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,85.8275862069%, 35.5882352941%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-2'><h2 class= c_black >success-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #0be14b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0be14b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 11, 225, 75 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>11, 225, 75</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,79.0517241379%, 46.3235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,79.0517241379%, 46.3235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-3'><h2 class= c_black >success-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #51f682;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#51f682</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 81, 246, 130 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>81, 246, 130</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,67.7586206897%, 64.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,67.7586206897%, 64.2156862745%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-4'><h2 class= c_black >success-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #a8fbc1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a8fbc1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 168, 251, 193 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>168, 251, 193</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,56.4655172414%, 82.1078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,56.4655172414%, 82.1078431373%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-5'><h2 class= c_black >success-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #dcfde6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#dcfde6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 220, 253, 230 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>220, 253, 230</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 137.8625954198deg ,49.6896551724%, 92.8431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>137.8625954198deg ,49.6896551724%, 92.8431372549%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.success\n\n*/\n/*\n\nshade: Color Variations \n\nThe Modified versions of the shade color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_shade\"\n>\n\t\t<div class='p_3 bg_shade-n5'><h2 class= c_white >shade-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #141414;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#141414</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 20, 20, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>20, 20, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,9.2561983471%, 7.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,9.2561983471%, 7.8823529412%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-n4'><h2 class= c_white >shade-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #292828;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#292828</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 41, 40, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>41, 40, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,7.7685950413%, 15.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,7.7685950413%, 15.7647058824%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-n3'><h2 class= c_white >shade-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #444242;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#444242</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 68, 66, 66 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>68, 66, 66</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,5.7851239669%, 26.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,5.7851239669%, 26.2745098039%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-n2'><h2 class= c_white >shade-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #5f5d5d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#5f5d5d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 95, 93, 93 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>95, 93, 93</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,3.8016528926%, 36.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,3.8016528926%, 36.7843137255%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-n1'><h2 class= c_white >shade-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #737171;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#737171</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 115, 113, 113 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>115, 113, 113</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,2.3140495868%, 44.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,2.3140495868%, 44.6666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-0'><h2 class= c_white >shade-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #878585;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#878585</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 135, 133, 133 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>135, 133, 133</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg, 0.826446281%, 52.5490196078% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg, 0.826446281%, 52.5490196078%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-1'><h2 class= c_black >shade-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #939191;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#939191</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 147, 145, 145 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>147, 145, 145</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.7851239669%, 57.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.7851239669%, 57.2941176471%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-2'><h2 class= c_black >shade-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #a5a4a4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a5a4a4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 165, 164, 164 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>165, 164, 164</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.7231404959%, 64.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.7231404959%, 64.4117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-3'><h2 class= c_black >shade-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #c3c2c2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c3c2c2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 195, 194, 194 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>195, 194, 194</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.6198347107%, 76.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.6198347107%, 76.2745098039%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-4'><h2 class= c_black >shade-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e1e1e1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e1e1e1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 225, 225, 225 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>225, 225, 225</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.5165289256%, 88.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.5165289256%, 88.137254902%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-5'><h2 class= c_black >shade-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f3f3f3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f3f3f3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 243, 243, 243 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>243, 243, 243</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0.4545454545%, 95.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0.4545454545%, 95.2549019608%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.shade\n\n*/\n/*\n\nwarning: Color Variations \n\nThe Modified versions of the warning color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_warning\"\n>\n\t\t<div class='p_3 bg_warning-n5'><h2 class= c_white >warning-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #211402;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#211402</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 33, 20, 2 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>33, 20, 2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,87.4871794872%, 6.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,87.4871794872%, 6.8823529412%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-n4'><h2 class= c_white >warning-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #412705;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#412705</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 65, 39, 5 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>65, 39, 5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,87.2820512821%, 13.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,87.2820512821%, 13.7647058824%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-n3'><h2 class= c_white >warning-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #6d4108;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6d4108</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 109, 65, 8 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>109, 65, 8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,87.0085470085%, 22.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,87.0085470085%, 22.9411764706%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-n2'><h2 class= c_white >warning-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #995b0b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#995b0b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 153, 91, 11 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>153, 91, 11</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,86.735042735%, 32.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,86.735042735%, 32.1176470588%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-n1'><h2 class= c_white >warning-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #b96f0e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b96f0e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 185, 111, 14 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>185, 111, 14</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,86.5299145299%, 39% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,86.5299145299%, 39%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-0'><h2 class= c_white >warning-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #da8210;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#da8210</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 218, 130, 16 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>218, 130, 16</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg, 86.3247863248%, 45.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg, 86.3247863248%, 45.8823529412%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-1'><h2 class= c_black >warning-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ee9118;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ee9118</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 238, 145, 24 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>238, 145, 24</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,82.0085470085%, 51.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,82.0085470085%, 51.2941176471%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-2'><h2 class= c_black >warning-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f1a33e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f1a33e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 163, 62 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 163, 62</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,75.5341880342%, 59.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,75.5341880342%, 59.4117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-3'><h2 class= c_black >warning-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f6c27e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f6c27e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 246, 194, 126 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>246, 194, 126</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,64.7435897436%, 72.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,64.7435897436%, 72.9411764706%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-4'><h2 class= c_black >warning-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fae0bf;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fae0bf</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 250, 224, 191 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>250, 224, 191</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,53.952991453%, 86.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,53.952991453%, 86.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-5'><h2 class= c_black >warning-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fdf3e5;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fdf3e5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 253, 243, 229 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>253, 243, 229</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 33.8613861386deg ,47.4786324786%, 94.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>33.8613861386deg ,47.4786324786%, 94.5882352941%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.warning\n\n*/\n/*\n\nalert: Color Variations \n\nThe Modified versions of the alert color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_alert\"\n>\n\t\t<div class='p_3 bg_alert-n5'><h2 class= c_white >alert-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #210404;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#210404</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 33, 4, 4 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>33, 4, 4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,80.7368421053%, 7.2647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,80.7368421053%, 7.2647058824%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-n4'><h2 class= c_white >alert-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #420808;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#420808</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 66, 8, 8 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>66, 8, 8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,80.4210526316%, 14.5294117647% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,80.4210526316%, 14.5294117647%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-n3'><h2 class= c_white >alert-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #6f0d0d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6f0d0d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 111, 13, 13 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>111, 13, 13</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,80%, 24.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,80%, 24.2156862745%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-n2'><h2 class= c_white >alert-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #9b1212;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9b1212</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 155, 18, 18 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>155, 18, 18</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,79.5789473684%, 33.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,79.5789473684%, 33.9019607843%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-n1'><h2 class= c_white >alert-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #bc1616;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bc1616</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 188, 22, 22 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>188, 22, 22</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,79.2631578947%, 41.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,79.2631578947%, 41.1666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-0'><h2 class= c_white >alert-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #dd1a1a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#dd1a1a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 221, 26, 26 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>221, 26, 26</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg, 78.9473684211%, 48.431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg, 78.9473684211%, 48.431372549%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-1'><h2 class= c_black >alert-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e62b2b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e62b2b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 230, 43, 43 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>230, 43, 43</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,75%, 53.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,75%, 53.5882352941%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-2'><h2 class= c_black >alert-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ea4f4f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ea4f4f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 234, 79, 79 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>234, 79, 79</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,69.0789473684%, 61.3235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,69.0789473684%, 61.3235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-3'><h2 class= c_black >alert-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f18989;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f18989</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 137, 137 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 137, 137</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,59.2105263158%, 74.2156862745% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,59.2105263158%, 74.2156862745%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-4'><h2 class= c_black >alert-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f8c4c4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f8c4c4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 248, 196, 196 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>248, 196, 196</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,49.3421052632%, 87.1078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,49.3421052632%, 87.1078431373%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-5'><h2 class= c_black >alert-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fce7e7;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fce7e7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 252, 231, 231 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>252, 231, 231</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,43.4210526316%, 94.8431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,43.4210526316%, 94.8431372549%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.alert\n\n*/\n/*\n\nnavigation: Color Variations \n\nThe Modified versions of the navigation color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_navigation\"\n>\n\t\t<div class='p_3 bg_navigation-n5'><h2 class= c_white >navigation-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #060d1d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#060d1d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 6, 13, 29 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>6, 13, 29</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,66.514893617%, 6.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,66.514893617%, 6.9117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-n4'><h2 class= c_white >navigation-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0d1a3a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0d1a3a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 13, 26, 58 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>13, 26, 58</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,65.9659574468%, 13.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,65.9659574468%, 13.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-n3'><h2 class= c_white >navigation-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #162c60;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#162c60</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 22, 44, 96 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>22, 44, 96</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,65.2340425532%, 23.0392156863% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,65.2340425532%, 23.0392156863%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-n2'><h2 class= c_white >navigation-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #1e3e86;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1e3e86</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 30, 62, 134 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>30, 62, 134</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,64.5021276596%, 32.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,64.5021276596%, 32.2549019608%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-n1'><h2 class= c_white >navigation-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #254ba3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#254ba3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 37, 75, 163 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>37, 75, 163</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,63.9531914894%, 39.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,63.9531914894%, 39.1666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-0'><h2 class= c_white >navigation-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #2b58c0;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#2b58c0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 43, 88, 192 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>43, 88, 192</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg, 63.4042553191%, 46.0784313725% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg, 63.4042553191%, 46.0784313725%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-1'><h2 class= c_black >navigation-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #3564d2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3564d2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 53, 100, 210 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>53, 100, 210</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,60.2340425532%, 51.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,60.2340425532%, 51.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-2'><h2 class= c_black >navigation-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #567ed9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#567ed9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 86, 126, 217 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>86, 126, 217</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,55.4787234043%, 59.5588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,55.4787234043%, 59.5588235294%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-3'><h2 class= c_black >navigation-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8fa9e6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8fa9e6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 143, 169, 230 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>143, 169, 230</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,47.5531914894%, 73.0392156863% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,47.5531914894%, 73.0392156863%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-4'><h2 class= c_black >navigation-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #c7d4f2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c7d4f2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 199, 212, 242 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>199, 212, 242</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,39.6276595745%, 86.5196078431% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,39.6276595745%, 86.5196078431%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-5'><h2 class= c_black >navigation-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e9eefa;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e9eefa</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 233, 238, 250 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>233, 238, 250</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,34.8723404255%, 94.6078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,34.8723404255%, 94.6078431373%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.navigation\n\n*/\n/*\n\naccent: Color Variations \n\nThe Modified versions of the accent color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_accent\"\n>\n\t\t<div class='p_3 bg_accent-n5'><h2 class= c_white >accent-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #031814;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#031814</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 3, 24, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>3, 24, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,78.2378378378%, 5.4411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,78.2378378378%, 5.4411764706%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-n4'><h2 class= c_white >accent-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #073128;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#073128</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 7, 49, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>7, 49, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,77.8810810811%, 10.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,77.8810810811%, 10.8823529412%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-n3'><h2 class= c_white >accent-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0b5243;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0b5243</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 11, 82, 67 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>11, 82, 67</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,77.4054054054%, 18.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,77.4054054054%, 18.137254902%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-n2'><h2 class= c_white >accent-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0f725d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0f725d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 15, 114, 93 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>15, 114, 93</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,76.9297297297%, 25.3921568627% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,76.9297297297%, 25.3921568627%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-n1'><h2 class= c_white >accent-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #138b71;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#138b71</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 19, 139, 113 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>19, 139, 113</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,76.572972973%, 30.8333333333% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,76.572972973%, 30.8333333333%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-0'><h2 class= c_white >accent-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #16a385;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#16a385</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 22, 163, 133 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>22, 163, 133</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg, 76.2162162162%, 36.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg, 76.2162162162%, 36.2745098039%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-1'><h2 class= c_black >accent-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #1ac09c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1ac09c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 26, 192, 156 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>26, 192, 156</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,72.4054054054%, 42.6470588235% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,72.4054054054%, 42.6470588235%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-2'><h2 class= c_black >accent-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #28e2ba;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#28e2ba</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 40, 226, 186 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>40, 226, 186</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,66.6891891892%, 52.2058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,66.6891891892%, 52.2058823529%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-3'><h2 class= c_black >accent-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #70ecd1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#70ecd1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 112, 236, 209 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>112, 236, 209</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,57.1621621622%, 68.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,57.1621621622%, 68.137254902%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-4'><h2 class= c_black >accent-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #b7f5e8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b7f5e8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 183, 245, 232 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>183, 245, 232</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,47.6351351351%, 84.068627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,47.6351351351%, 84.068627451%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-5'><h2 class= c_black >accent-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e2fbf6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e2fbf6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 226, 251, 246 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>226, 251, 246</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 167.2340425532deg ,41.9189189189%, 93.6274509804% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>167.2340425532deg ,41.9189189189%, 93.6274509804%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.accent\n\n*/\n/*\n\ninfo: Color Variations \n\nThe Modified versions of the info color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_info\"\n>\n\t\t<div class='p_3 bg_info-n5'><h2 class= c_white >info-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #191714;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#191714</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 25, 23, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>25, 23, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,18.6666666667%, 8.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,18.6666666667%, 8.9117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-n4'><h2 class= c_white >info-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #332e28;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#332e28</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 51, 46, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>51, 46, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,17.3333333333%, 17.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,17.3333333333%, 17.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-n3'><h2 class= c_white >info-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #544c43;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#544c43</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 84, 76, 67 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>84, 76, 67</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,15.5555555556%, 29.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,15.5555555556%, 29.7058823529%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-n2'><h2 class= c_white >info-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #766b5e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#766b5e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 118, 107, 94 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>118, 107, 94</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,13.7777777778%, 41.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,13.7777777778%, 41.5882352941%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-n1'><h2 class= c_white >info-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #8f8173;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8f8173</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 143, 129, 115 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>143, 129, 115</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,12.4444444444%, 50.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,12.4444444444%, 50.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-0'><h2 class= c_white >info-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #a3988c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a3988c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 163, 152, 140 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>163, 152, 140</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg, 11.1111111111%, 59.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg, 11.1111111111%, 59.4117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-1'><h2 class= c_black >info-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #aca298;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#aca298</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 172, 162, 152 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>172, 162, 152</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,10.5555555556%, 63.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,10.5555555556%, 63.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-2'><h2 class= c_black >info-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bab2a9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bab2a9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 186, 178, 169 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>186, 178, 169</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,9.7222222222%, 69.5588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,9.7222222222%, 69.5588235294%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-3'><h2 class= c_black >info-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d1ccc6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d1ccc6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 209, 204, 198 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>209, 204, 198</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,8.3333333333%, 79.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,8.3333333333%, 79.7058823529%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-4'><h2 class= c_black >info-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e8e5e2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e8e5e2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 232, 229, 226 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>232, 229, 226</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,6.9444444444%, 89.8529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,6.9444444444%, 89.8529411765%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-5'><h2 class= c_black >info-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f6f5f4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f6f5f4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 246, 245, 244 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>246, 245, 244</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,6.1111111111%, 95.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,6.1111111111%, 95.9411764706%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.info\n\n*/\n/*\n\nhighlight: Color Variations \n\nThe Modified versions of the highlight color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_highlight\"\n>\n\t\t<div class='p_3 bg_highlight-n5'><h2 class= c_white >highlight-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #120a1c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#120a1c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 18, 10, 28 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>18, 10, 28</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,52.6352941176%, 7.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,52.6352941176%, 7.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-n4'><h2 class= c_white >highlight-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #241439;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#241439</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 36, 20, 57 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>36, 20, 57</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,51.8588235294%, 15% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,51.8588235294%, 15%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-n3'><h2 class= c_white >highlight-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #3c215f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3c215f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 60, 33, 95 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>60, 33, 95</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,50.8235294118%, 25% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,50.8235294118%, 25%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-n2'><h2 class= c_white >highlight-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #532e84;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#532e84</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 83, 46, 132 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>83, 46, 132</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,49.7882352941%, 35% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,49.7882352941%, 35%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-n1'><h2 class= c_white >highlight-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #6538a1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#6538a1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 101, 56, 161 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>101, 56, 161</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,49.0117647059%, 42.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,49.0117647059%, 42.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-0'><h2 class= c_white >highlight-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #7742bd;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#7742bd</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 119, 66, 189 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>119, 66, 189</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg, 48.2352941176%, 50% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg, 48.2352941176%, 50%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-1'><h2 class= c_black >highlight-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8555c4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8555c4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 133, 85, 196 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>133, 85, 196</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,45.8235294118%, 55% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,45.8235294118%, 55%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-2'><h2 class= c_black >highlight-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #9971ce;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9971ce</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 153, 113, 206 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>153, 113, 206</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,42.2058823529%, 62.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,42.2058823529%, 62.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-3'><h2 class= c_black >highlight-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bba1de;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bba1de</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 187, 161, 222 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>187, 161, 222</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,36.1764705882%, 75% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,36.1764705882%, 75%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-4'><h2 class= c_black >highlight-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ddd0ef;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ddd0ef</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 221, 208, 239 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>221, 208, 239</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,30.1470588235%, 87.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,30.1470588235%, 87.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-5'><h2 class= c_black >highlight-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f1ecf8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f1ecf8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 236, 248 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 236, 248</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 265.8536585366deg ,26.5294117647%, 95% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>265.8536585366deg ,26.5294117647%, 95%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.highlight\n\n*/\n/*\n\nacc: Color Variations \n\nThe Modified versions of the acc color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_acc\"\n>\n\t\t<div class='p_3 bg_acc-n5'><h2 class= c_white >acc-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #000a12;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#000a12</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 10, 18 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 10, 18</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 3.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 3.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-n4'><h2 class= c_white >acc-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #001423;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#001423</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 20, 35 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 20, 35</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 6.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 6.9411764706%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-n3'><h2 class= c_white >acc-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #00213b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00213b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 33, 59 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 33, 59</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 11.568627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 11.568627451%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-n2'><h2 class= c_white >acc-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #002e53;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#002e53</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 46, 83 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 46, 83</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 16.1960784314% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 16.1960784314%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-n1'><h2 class= c_white >acc-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #003764;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#003764</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 55, 100 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 55, 100</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 19.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 19.6666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-0'><h2 class= c_white >acc-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #004176;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#004176</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 65, 118 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 65, 118</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg, 100%, 23.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg, 100%, 23.137254902%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-1'><h2 class= c_black >acc-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #00579d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00579d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 87, 157 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 87, 157</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,95%, 30.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,95%, 30.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-2'><h2 class= c_black >acc-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #0077d8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0077d8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 119, 216 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 119, 216</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,87.5%, 42.3529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,87.5%, 42.3529411765%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-3'><h2 class= c_black >acc-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #3ba7ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3ba7ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 59, 167, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>59, 167, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,75%, 61.568627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,75%, 61.568627451%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-4'><h2 class= c_black >acc-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #9dd3ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9dd3ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 157, 211, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>157, 211, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,62.5%, 80.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,62.5%, 80.7843137255%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-5'><h2 class= c_black >acc-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d8edff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d8edff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 216, 237, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>216, 237, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,55%, 92.3137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,55%, 92.3137254902%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.acc\n\n*/\n/*\nCrayon Box\n\nThis is all of the colors of the theme broken out with its modifications written in hex code.\n\n\nWeight:0\n\nHideCodeBlock: display_none \n\nStyleguide DesignBase.CrayonBox\n*/\n/*Adobe XD Color Map*/\n/* $xd-color_primary-0: #198dae*/\n/* $xd-color_primary-n5: #04151a*/\n/* $xd-color_primary-n4: #082a34*/\n/* $xd-color_primary-n3: #0d4757*/\n/* $xd-color_primary-n2: #12637a*/\n/* $xd-color_primary-n1: #157894*/\n/* $xd-color_primary-1: #1da3c9*/\n/* $xd-color_primary-2: #33bbe2*/\n/* $xd-color_primary-3: #77d2eb*/\n/* $xd-color_primary-4: #bbe8f5*/\n/* $xd-color_primary-5: #e4f6fb*/\n/* $xd-color_secondary-0: #676a72*/\n/* $xd-color_secondary-n5: #0f1011*/\n/* $xd-color_secondary-n4: #1f2022*/\n/* $xd-color_secondary-n3: #343539*/\n/* $xd-color_secondary-n2: #484a50*/\n/* $xd-color_secondary-n1: #585a61*/\n/* $xd-color_secondary-1: #757881*/\n/* $xd-color_secondary-2: #8c8f97*/\n/* $xd-color_secondary-3: #b2b4b9*/\n/* $xd-color_secondary-4: #d9dadc*/\n/* $xd-color_secondary-5: #f0f0f1*/\n/* $xd-color_success-0: #078a2e*/\n/* $xd-color_success-n5: #011507*/\n/* $xd-color_success-n4: #02290e*/\n/* $xd-color_success-n3: #044517*/\n/* $xd-color_success-n2: #056120*/\n/* $xd-color_success-n1: #067527*/\n/* $xd-color_success-1: #09ad3a*/\n/* $xd-color_success-2: #0be14b*/\n/* $xd-color_success-3: #51f682*/\n/* $xd-color_success-4: #a8fbc1*/\n/* $xd-color_success-5: #dcfde6*/\n/* $xd-color_shade-0: #878585*/\n/* $xd-color_shade-n5: #141414*/\n/* $xd-color_shade-n4: #292828*/\n/* $xd-color_shade-n3: #444242*/\n/* $xd-color_shade-n2: #5f5d5d*/\n/* $xd-color_shade-n1: #737171*/\n/* $xd-color_shade-1: #939191*/\n/* $xd-color_shade-2: #a5a4a4*/\n/* $xd-color_shade-3: #c3c2c2*/\n/* $xd-color_shade-4: #e1e1e1*/\n/* $xd-color_shade-5: #f3f3f3*/\n/* $xd-color_warning-0: #da8210*/\n/* $xd-color_warning-n5: #211402*/\n/* $xd-color_warning-n4: #412705*/\n/* $xd-color_warning-n3: #6d4108*/\n/* $xd-color_warning-n2: #995b0b*/\n/* $xd-color_warning-n1: #b96f0e*/\n/* $xd-color_warning-1: #ee9118*/\n/* $xd-color_warning-2: #f1a33e*/\n/* $xd-color_warning-3: #f6c27e*/\n/* $xd-color_warning-4: #fae0bf*/\n/* $xd-color_warning-5: #fdf3e5*/\n/* $xd-color_alert-0: #dd1a1a*/\n/* $xd-color_alert-n5: #210404*/\n/* $xd-color_alert-n4: #420808*/\n/* $xd-color_alert-n3: #6f0d0d*/\n/* $xd-color_alert-n2: #9b1212*/\n/* $xd-color_alert-n1: #bc1616*/\n/* $xd-color_alert-1: #e62b2b*/\n/* $xd-color_alert-2: #ea4f4f*/\n/* $xd-color_alert-3: #f18989*/\n/* $xd-color_alert-4: #f8c4c4*/\n/* $xd-color_alert-5: #fce7e7*/\n/* $xd-color_navigation-0: #2b58c0*/\n/* $xd-color_navigation-n5: #060d1d*/\n/* $xd-color_navigation-n4: #0d1a3a*/\n/* $xd-color_navigation-n3: #162c60*/\n/* $xd-color_navigation-n2: #1e3e86*/\n/* $xd-color_navigation-n1: #254ba3*/\n/* $xd-color_navigation-1: #3564d2*/\n/* $xd-color_navigation-2: #567ed9*/\n/* $xd-color_navigation-3: #8fa9e6*/\n/* $xd-color_navigation-4: #c7d4f2*/\n/* $xd-color_navigation-5: #e9eefa*/\n/* $xd-color_accent-0: #16a385*/\n/* $xd-color_accent-n5: #031814*/\n/* $xd-color_accent-n4: #073128*/\n/* $xd-color_accent-n3: #0b5243*/\n/* $xd-color_accent-n2: #0f725d*/\n/* $xd-color_accent-n1: #138b71*/\n/* $xd-color_accent-1: #1ac09c*/\n/* $xd-color_accent-2: #28e2ba*/\n/* $xd-color_accent-3: #70ecd1*/\n/* $xd-color_accent-4: #b7f5e8*/\n/* $xd-color_accent-5: #e2fbf6*/\n/* $xd-color_info-0: #a3988c*/\n/* $xd-color_info-n5: #191714*/\n/* $xd-color_info-n4: #332e28*/\n/* $xd-color_info-n3: #544c43*/\n/* $xd-color_info-n2: #766b5e*/\n/* $xd-color_info-n1: #8f8173*/\n/* $xd-color_info-1: #aca298*/\n/* $xd-color_info-2: #bab2a9*/\n/* $xd-color_info-3: #d1ccc6*/\n/* $xd-color_info-4: #e8e5e2*/\n/* $xd-color_info-5: #f6f5f4*/\n/* $xd-color_highlight-0: #7742bd*/\n/* $xd-color_highlight-n5: #120a1c*/\n/* $xd-color_highlight-n4: #241439*/\n/* $xd-color_highlight-n3: #3c215f*/\n/* $xd-color_highlight-n2: #532e84*/\n/* $xd-color_highlight-n1: #6538a1*/\n/* $xd-color_highlight-1: #8555c4*/\n/* $xd-color_highlight-2: #9971ce*/\n/* $xd-color_highlight-3: #bba1de*/\n/* $xd-color_highlight-4: #ddd0ef*/\n/* $xd-color_highlight-5: #f1ecf8*/\n/* $xd-color_acc-0: #004176*/\n/* $xd-color_acc-n5: #000a12*/\n/* $xd-color_acc-n4: #001423*/\n/* $xd-color_acc-n3: #00213b*/\n/* $xd-color_acc-n2: #002e53*/\n/* $xd-color_acc-n1: #003764*/\n/* $xd-color_acc-1: #00579d*/\n/* $xd-color_acc-2: #0077d8*/\n/* $xd-color_acc-3: #3ba7ff*/\n/* $xd-color_acc-4: #9dd3ff*/\n/* $xd-color_acc-5: #d8edff*/\n.font .font--example {\n  background-image: url(http://basehold.it/i/24);\n}\n.font .font--name {\n  color: #000;\n}\n.font .font--dropcase_2x {\n  color: #198dae;\n}\n\n/*\n\nBasic HTML\n\nThe Arches Design System, at its core, is a Utility Class Styling Design.  It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles.  Arches rely on the browser or branding defaults for basic HTML styling.  Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation.  \n\nWeight: -100\n\nStyleguide HTML\n*/\n/*\n\nReading Typography\n\nReading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the \"reading-typography\" class is used on the parent container.  Please note that the reading typography can still look a bit different look depending on the brand or the framework. <table><thead><tr><th>modifier class</th><th>customization</th><th>usage</th></tr></thead><tbody><tr><td><code>.inherit_color</code></td><td>removes all color rules from colored typography and sets it to inherit.</td><td>inverting a block of typography where all text and headlines should be white.</td></tr><tr><td><code>.font-size_up</code></td><td>shifts all typography up one font size step</td><td>intro blocks of text where the text. Or in articles where you can shift all text up a size.</td></tr><tr><td>`.font-size_down`</td><td>shifts all typography down one font size step.</td><td>citation blocks or boiler plate content where the text should be smaller and less impactful.</td></tr><tr><td><code>.links_dark</code></td><td>turns all links to the dark color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class.</td></tr><tr><td><code>.links_light</code></td><td>turns all links to the light color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class when text is on a dark background.</td></tr></tbody></table><small class=\"c_highlight block\">* there are further advanced features if you want to apply CSS Property Overrides.</small> \n\nMarkup:\n<section class=\"max-w_65 reading-typography m_auto\">\n<div class=\"relative\">\n\t<picture class=\"w_100\">\n\t\t<source class=\"w_100\" srcset=\"{{> Sub.Placeholder.Image.1200x300 }}\" media=\"(min-width: 1200px)\">\n\t\t<source class=\"w_100\" srcset=\"{{> Sub.Placeholder.Image.1024x256 }}\" media=\"(min-width: 768px)\">\n\t\t<source class=\"w_100\" srcset=\"{{> Sub.Placeholder.Image.600x300 }}\" media=\"(min-width: 400px)\"> <source class=\"w_100\" srcset=\"https://placeholder.pics/svg/400x300/171C6A-5A6CFF/FFFAEE/300x400\" media=\"(min-width: 400px)\">\n\t\t<img src=\"{{> Sub.Placeholder.Image.300x400 }}\" class=\"w_100\" alt=\"\">\n\t</picture>\n    <div class=\"absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4\">\n        <div class=\"bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light\">\n            <span class=\"font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3\">User Name</span>\n            <a class=\"btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold\" href=\"#\">Log Out <i class=\"fas fa-sign-out p-l_2\"></i></a>\n        </div>\n    </div>\n</div>\n  <h1>This is the primary heading and there should only be one of these per page</h1>\n  <h6>sub heading</h6>\n    <p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>\n    <ul>\n        <li>This is a list item</li>\n        <li>So is this - there could be more</li>\n        <li>Make sure to style list items to:\n            <ul>\n                <li>Not forgetting child list items</li>\n                <li>Not forgetting child list items</li>\n                <li>Not forgetting child list items</li>\n                <li>Not forgetting child list items</li>\n            </ul>\n        </li>\n        <li>A couple more</li>\n        <li>top level list items</li>\n    </ul>\n    <p>Don't forget <strong>Ordered lists</strong>:</p>\n    <ol>\n       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n       <li>Aliquam tincidunt mauris eu risus.\n        <ol>\n            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n            <li>Aliquam tincidunt mauris eu risus.</li>\n        </ol>\n        </li>\n       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n       <li>Aliquam tincidunt mauris eu risus.\n    </li></ol>\n    <h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <table>\n    <thead><tr>\n            <th>Table Heading</th>\n            <th>Table Heading</th>\n        </tr></thead>\n        <tbody>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n    </tbody></table>    \t\n    <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <blockquote><p>“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”</p></blockquote>\n    <h4>A sub heading which is not as important as the second, but should be used with consideration</h4>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <pre><code>\n#header h1 a { \n    display: block; \n    width: 300px; \n    height: 80px; \n}\n</code></pre>\n    <h5>A sub heading which is not as important as the second, but should be used with consideration</h5>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <dl>\n   <dt>Definition list</dt>\n   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.</dd>\n\t   <dt>Lorem ipsum dolor sit amet</dt>\n\t   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.</dd>\n\t</dl>\n\t<h6>This heading plays a relatively small bit part role, if you use it at all</h6>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n<section>\n<details>\n        <summary ><strong>Table of Contents</strong></summary>\n        <div>\n            <ol>\n                <li data-line=\"0\" dir=\"auto\">How to Prepare for the Boards</li>\n                <li data-line=\"1\" dir=\"auto\">General Principles of Cardiovascular Medicine\n                </li>\n                <li data-line=\"2\" dir=\"auto\">Arrhythmias</li>\n                <li data-line=\"3\" dir=\"auto\">Coronary Artery Disease</li>\n                <li data-line=\"4\" dir=\"auto\">Heart Failure &amp; Cardiomyopathy</li>\n                <li data-line=\"5\" dir=\"auto\">Valvular Disease</li>\n                <li data-line=\"6\" dir=\"auto\">Pericardial Disease</li>\n                <li data-line=\"7\" dir=\"auto\">Congenital Heart Disease</li>\n                <li data-line=\"8\" dir=\"auto\">Vascular Diseases</li>\n                <li data-line=\"9\" dir=\"auto\">Systemic Hypertension and Hypotension</li>\n                <li data-line=\"10\" dir=\"auto\">Pulmonary Circulation Disorders</li>\n                <li data-line=\"11\" dir=\"auto\">Systemic Disorders Affecting the Circulatory\n                    System</li>\n                <li data-line=\"12\" dir=\"auto\">\n                    Miscellaneous\n                    <ul>\n                        <li data-line=\"13\" dir=\"auto\">Cardiovascular Genetics</li>\n                        <li data-line=\"14\" dir=\"auto\">CPR, Post-Resuscitation Care</li>\n                        <li data-line=\"15\" dir=\"auto\">Cardiac Critical Care</li>\n                        <li data-line=\"16\" dir=\"auto\">Sleep Disordered Breathing</li>\n                        <li data-line=\"17\" dir=\"auto\">Sports Cardiology</li>\n                        <li data-line=\"18\" dir=\"auto\">Pregnancy and Cardiac Disease</li>\n                        <li data-line=\"19\" dir=\"auto\">Cardiovascular Operative Management\n                        </li>\n                        <li data-line=\"20\" dir=\"auto\">Pharmacology</li>\n                        <li data-line=\"21\" dir=\"auto\">General Principles of Cardiovascular\n                            Medicine</li>\n                    </ul>\n                </li>\n            </ol>\n        </div>\n    </details>\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nStyleguide HTML.Typography\n\n*/\n/*\n\nReading Typography Modified\n\nThis text is used as a lorem content in many of our containers.  \n\n.color_inherit.bg_acc.c_white.p_4.links_light    - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.\n\nMarkup:\n{{> Sub.Placeholder.Typography  modifier_class=\" color_inherit bg_acc c_white p_4 links_light\"}}\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nMarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50\n\nStyleguide HTML.Typography.Sample\n\n*/\n/*\n\nLinks States\n\nThis shows the look and feel of all the states of a text link, color, underline and decoration.\n\nMarkup:\n<ul class=\"flex flex_column ul_none\">\n    <li class=\"p_3\"><a href=\"#random2\">NORMAL: Donec non enim</a></li>\n    <li class=\"p_3\"><a href=\"#random1\" class=\"pseudo-class-hover\">HOVER:  Normal Donec non enim</a>\n</li>\n    <li class=\"p_3\"><a href=\"#random3\" class=\"pseudo-class-visited\">VISITED: Normal Donec non enim</a>\n</li>\n</ul>\n\n\nMarkupWrapperClasses: reading-typography\n\nWeight:100\n\nStyleguide HTML.Typography.Links\n */\n.container,\n.card {\n  position: relative;\n}\n\n.table td,\n.table th {\n  text-align: left;\n}\n.table tbody tr:nth-of-type(odd) {\n  background-color: rgba(19, 18, 18, 0.0078431373);\n}\n.table tr + tr {\n  border-top: 1px solid rgba(19, 18, 18, 0.2509803922);\n}\n.table.unshaded tbody tr:nth-of-type(odd) {\n  background-color: unset;\n}\n\n/*\n\nBootstrap\n\n<div><h3>Bootstrap 5 is a complete UI framework with many features</h3>. <p>Please familiarize yourself with bootstrap framework as you build. It will give you access to grid, forms and other UI items. </p><a href=\"https://getbootstrap.com/\" class=\"btn btn-primary c_white m-t_4\">Bootstrap</a></div>\n\nWeight: -50\n\nStyleguide  Bootstrap\n*/\n/*\n\nTables\n\nThe collection of modifications you can do with tables out of the box from Bootstrap Arches.\n\nMarkup:\n<article class=\"m-y_3\" id=\"tables\"><div class=\"bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 bg_white z_3 p-b_3 self_start mt-5 m-b_3 mt-xl-0 mb-xl-2\"><h3>Tables</h3><a class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/content/tables/\">Documentation</a></div><div><div class=\"bd-example\"><table class=\"table table-striped\"><thead><tr><th scope=\"col\">#</th><th scope=\"col\">First</th><th scope=\"col\">Last</th><th scope=\"col\">Handle</th></tr></thead><tbody><tr><th scope=\"row\">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope=\"row\">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope=\"row\">3</th><td colspan=\"2\">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class=\"bd-example\"><table class=\"table table-dark table-borderless\"><thead><tr><th scope=\"col\">#</th><th scope=\"col\">First</th><th scope=\"col\">Last</th><th scope=\"col\">Handle</th></tr></thead><tbody><tr><th scope=\"row\">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope=\"row\">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope=\"row\">3</th><td colspan=\"2\">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div><div class=\"bd-example\"><table class=\"table table-hover\"><thead><tr><th scope=\"col\">Class</th><th scope=\"col\">Heading</th><th scope=\"col\">Heading</th></tr></thead><tbody><tr><th scope=\"row\">Default</th><td>Cell</td><td>Cell</td></tr><tr class=\"table-primary\"><th scope=\"row\">Primary</th><td>Cell</td><td>Cell</td></tr><tr class=\"table-secondary\"><th scope=\"row\">Secondary</th><td>Cell</td><td>Cell</td></tr><tr class=\"table-success\"><th scope=\"row\">Success</th><td>Cell</td><td>Cell</td></tr><tr class=\"table-alert\"><th scope=\"row\">alert</th><td>Cell</td><td>Cell</td></tr><tr class=\"table-warning\"><th scope=\"row\">Warning</th><td>Cell</td><td>Cell</td></tr><tr class=\"table-info\"><th scope=\"row\">Info</th><td>Cell</td><td>Cell</td></tr></tbody></table></div><div class=\"bd-example\"><table class=\"table table-sm table-bordered\"><thead><tr><th scope=\"col\">#</th><th scope=\"col\">First</th><th scope=\"col\">Last</th><th scope=\"col\">Handle</th></tr></thead><tbody><tr><th scope=\"row\">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><th scope=\"row\">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><th scope=\"row\">3</th><td colspan=\"2\">Larry the Bird</td><td>@twitter</td></tr></tbody></table></div></div></article>\n\nWeight: 500\n\nStyleguide  Bootstrap.Table\n*/\n/*\nForms\n\nOut of the box bootstrap forms. \n\nMarkup:\n<article class=\"m-y_3\"\n         id=\"overview\">\n    <div\n         class=\"bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2\">\n        <h3>Overview</h3><a\n           class=\"d-flex align-items-center\"\n           target=\"_blank\"\n           href=\"https://getbootstrap.com/docs/5.0/forms/overview/\">Documentation</a>\n    </div>\n    <div>\n        <div class=\"bd-example\">\n            <form>\n                <div class=\"m-b_3\"><label\n                           for=\"exampleInputEmail1\"\n                           class=\"form-label\">Email\n                        address</label> <input type=\"email\"\n                           class=\"form-control\"\n                           id=\"exampleInputEmail1\"\n                           aria-describedby=\"emailHelp\">\n                    <div id=\"emailHelp\"\n                         class=\"form-text\">We'll never share\n                        your email with anyone else.</div>\n                </div>\n                <div class=\"m-b_3\"><label\n                           for=\"exampleInputPassword1\"\n                           class=\"form-label\">Password</label>\n                    <input type=\"password\"\n                           class=\"form-control\"\n                           id=\"exampleInputPassword1\"></div>\n                <div class=\"m-b_3 form-check\"><input\n                           type=\"checkbox\"\n                           class=\"form-check-input\"\n                           id=\"exampleCheck1\"> <label\n                           class=\"form-check-label\"\n                           for=\"exampleCheck1\">Check me\n                        out</label></div>\n                <fieldset class=\"m-b_3\">\n                    <legend>Radios buttons</legend>\n                    <div class=\"form-check\"><input\n                               type=\"radio\"\n                               name=\"radios\"\n                               class=\"form-check-input\"\n                               id=\"exampleRadio1\"> <label\n                               class=\"form-check-label\"\n                               for=\"exampleRadio1\">Default\n                            radio</label></div>\n                    <div class=\"m-b_3 form-check\"><input\n                               type=\"radio\"\n                               name=\"radios\"\n                               class=\"form-check-input\"\n                               id=\"exampleRadio2\"> <label\n                               class=\"form-check-label\"\n                               for=\"exampleRadio2\">Another\n                            radio</label></div>\n                </fieldset>\n                <div class=\"m-b_3\"><label class=\"form-label\"\n                           for=\"customFile\">Upload</label>\n                    <input type=\"file\"\n                           class=\"form-control\"\n                           id=\"customFile\"></div>\n                <div class=\"m-b_3 form-check form-switch\">\n                    <input class=\"form-check-input\"\n                           type=\"checkbox\"\n                           id=\"flexSwitchCheckChecked\"\n                           checked> <label\n                           class=\"form-check-label\"\n                           for=\"flexSwitchCheckChecked\">Checked\n                        switch checkbox input</label></div>\n                <div class=\"m-b_3\"><label for=\"customRange3\"\n                           class=\"form-label\">Example\n                        range</label> <input type=\"range\"\n                           class=\"form-range\"\n                           min=\"0\"\n                           max=\"5\"\n                           step=\"0.5\"\n                           id=\"customRange3\"></div><button\n                        type=\"submit\"\n                        class=\"btn btn-primary\">Submit</button>\n            </form>\n        </div>\n    </div>\n</article>\n<article class=\"m-y_3\"\n         id=\"disabled-forms\">\n    <div\n         class=\"bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2\">\n        <h3>Disabled forms</h3><a\n           class=\"d-flex align-items-center\"\n           target=\"_blank\"\n           href=\"https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms\">Documentation</a>\n    </div>\n    <div>\n        <div class=\"bd-example\">\n            <form>\n                <fieldset disabled\n                          aria-label=\"Disabled fieldset example\">\n                    <div class=\"m-b_3\"><label\n                               for=\"disabledTextInput\"\n                               class=\"form-label\">Disabled\n                            input</label> <input type=\"text\"\n                               id=\"disabledTextInput\"\n                               class=\"form-control\"\n                               placeholder=\"Disabled input\">\n                    </div>\n                    <div class=\"m-b_3\"><label\n                               for=\"disabledSelect\"\n                               class=\"form-label\">Disabled\n                            select menu</label> <select\n                                id=\"disabledSelect\"\n                                class=\"form-select\">\n                            <option>Disabled select</option>\n                        </select></div>\n                    <div class=\"m-b_3\">\n                        <div class=\"form-check\"><input\n                                   class=\"form-check-input\"\n                                   type=\"checkbox\"\n                                   id=\"disabledFieldsetCheck\"\n                                   disabled> <label\n                                   class=\"form-check-label\"\n                                   for=\"disabledFieldsetCheck\">Can't\n                                check this</label></div>\n                    </div>\n                    <fieldset class=\"m-b_3\">\n                        <legend>Disabled radios buttons\n                        </legend>\n                        <div class=\"form-check\"><input\n                                   type=\"radio\"\n                                   name=\"radios\"\n                                   class=\"form-check-input\"\n                                   id=\"disabledRadio1\"\n                                   disabled> <label\n                                   class=\"form-check-label\"\n                                   for=\"disabledRadio1\">Disabled\n                                radio</label></div>\n                        <div class=\"m-b_3 form-check\"><input\n                                   type=\"radio\"\n                                   name=\"radios\"\n                                   class=\"form-check-input\"\n                                   id=\"disabledRadio2\"\n                                   disabled> <label\n                                   class=\"form-check-label\"\n                                   for=\"disabledRadio2\">Another\n                                radio</label></div>\n                    </fieldset>\n                    <div class=\"m-b_3\"><label\n                               class=\"form-label\"\n                               for=\"disabledCustomFile\">Upload</label>\n                        <input type=\"file\"\n                               class=\"form-control\"\n                               id=\"disabledCustomFile\"\n                               disabled></div>\n                    <div\n                         class=\"m-b_3 form-check form-switch\">\n                        <input class=\"form-check-input\"\n                               type=\"checkbox\"\n                               id=\"disabledSwitchCheckChecked\"\n                               checked\n                               disabled> <label\n                               class=\"form-check-label\"\n                               for=\"disabledSwitchCheckChecked\">Disabled\n                            checked switch checkbox\n                            input</label></div>\n                    <div class=\"m-b_3\"><label\n                               for=\"disabledRange\"\n                               class=\"form-label\">Disabled\n                            range</label> <input\n                               type=\"range\"\n                               class=\"form-range\"\n                               min=\"0\"\n                               max=\"5\"\n                               step=\"0.5\"\n                               id=\"disabledRange\"></div>\n                    <button type=\"submit\"\n                            class=\"btn btn-primary\">Submit</button>\n                </fieldset>\n            </form>\n        </div>\n    </div>\n</article>\n<article class=\"m-y_3\"\n         id=\"sizing\">\n    <div\n         class=\"bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2\">\n        <h3>Sizing</h3><a class=\"d-flex align-items-center\"\n           target=\"_blank\"\n           href=\"https://getbootstrap.com/docs/5.0/forms/form-control/#sizing\">Documentation</a>\n    </div>\n    <div>\n        <div class=\"bd-example\">\n            <div class=\"m-b_3\"><input\n                       class=\"form-control form-control-lg\"\n                       type=\"text\"\n                       placeholder=\".form-control-lg\"\n                       aria-label=\".form-control-lg example\">\n            </div>\n            <div class=\"m-b_3\"><select\n                        class=\"form-select form-select-lg m-b_3\"\n                        aria-label=\".form-select-lg example\">\n                    <option selected>Open this select menu\n                    </option>\n                    <option value=\"1\">One</option>\n                    <option value=\"2\">Two</option>\n                    <option value=\"3\">Three</option>\n                </select></div>\n            <div class=\"m-b_3\"><input type=\"file\"\n                       class=\"form-control form-control-lg\"\n                       aria-label=\"Large file input example\">\n            </div>\n        </div>\n        <div class=\"bd-example\">\n            <div class=\"m-b_3\"><input\n                       class=\"form-control form-control-sm\"\n                       type=\"text\"\n                       placeholder=\".form-control-sm\"\n                       aria-label=\".form-control-sm example\">\n            </div>\n            <div class=\"m-b_3\"><select\n                        class=\"form-select form-select-sm\"\n                        aria-label=\".form-select-sm example\">\n                    <option selected>Open this select menu\n                    </option>\n                    <option value=\"1\">One</option>\n                    <option value=\"2\">Two</option>\n                    <option value=\"3\">Three</option>\n                </select></div>\n            <div class=\"m-b_3\"><input type=\"file\"\n                       class=\"form-control form-control-sm\"\n                       aria-label=\"Small file input example\">\n            </div>\n        </div>\n    </div>\n</article>\n<article class=\"m-y_3\"\n         id=\"input-group\">\n    <div\n         class=\"bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2\">\n        <h3>Input group</h3><a\n           class=\"d-flex align-items-center\"\n           target=\"_blank\"\n           href=\"https://getbootstrap.com/docs/5.0/forms/input-group/\">Documentation</a>\n    </div>\n    <div>\n        <div class=\"bd-example\">\n            <div class=\"input-group m-b_3\"><span\n                      class=\"input-group-text\"\n                      id=\"basic-addon1\">@</span> <input\n                       type=\"text\"\n                       class=\"form-control\"\n                       placeholder=\"Username\"\n                       aria-label=\"Username\"\n                       aria-describedby=\"basic-addon1\">\n            </div>\n            <div class=\"input-group m-b_3\"><input type=\"text\"\n                       class=\"form-control\"\n                       placeholder=\"Recipient's username\"\n                       aria-label=\"Recipient's username\"\n                       aria-describedby=\"basic-addon2\">\n                <span class=\"input-group-text\"\n                      id=\"basic-addon2\">@example.com</span>\n            </div><label for=\"basic-url\"\n                   class=\"form-label\">Your vanity\n                URL</label>\n            <div class=\"input-group m-b_3\"><span\n                      class=\"input-group-text\"\n                      id=\"basic-addon3\">https://example.com/users/</span>\n                <input type=\"text\"\n                       class=\"form-control\"\n                       id=\"basic-url\"\n                       aria-describedby=\"basic-addon3\">\n            </div>\n            <div class=\"input-group m-b_3\"><span\n                      class=\"input-group-text\">$</span>\n                <input type=\"text\"\n                       class=\"form-control\"\n                       aria-label=\"Amount (to the nearest dollar)\">\n                <span class=\"input-group-text\">.00</span>\n            </div>\n            <div class=\"input-group\"><span\n                      class=\"input-group-text\">With\n                    textarea</span> <textarea\n                          class=\"form-control\"\n                          aria-label=\"With textarea\"></textarea>\n            </div>\n        </div>\n    </div>\n</article>\n<article class=\"m-y_3\"\n         id=\"floating-labels\">\n    <div\n         class=\"bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2\">\n        <h3>Floating labels</h3><a\n           class=\"d-flex align-items-center\"\n           target=\"_blank\"\n           href=\"https://getbootstrap.com/docs/5.0/forms/floating-labels/\">Documentation</a>\n    </div>\n    <div>\n        <div class=\"bd-example\">\n            <form>\n                <div class=\"form-floating m-b_3 input-group-lg\"><input\n                           type=\"email\"\n                           class=\"form-control\"\n                           id=\"floatingInput\"\n                           placeholder=\"name@example.com\">\n                    <label for=\"floatingInput\">Email\n                        address</label></div>\n                <div class=\"form-floating\"><input\n                           type=\"password\"\n                           class=\"form-control\"\n                           id=\"floatingPassword\"\n                           placeholder=\"Password\"> <label\n                           for=\"floatingPassword\">Password</label>\n                </div>\n            </form>\n        </div>\n    </div>\n</article>\n<article class=\"m-y_3\"\n         id=\"validation\">\n    <div\n         class=\"bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2\">\n        <h3>Validation</h3><a\n           class=\"d-flex align-items-center\"\n           target=\"_blank\"\n           href=\"https://getbootstrap.com/docs/5.0/forms/validation/\">Documentation</a>\n    </div>\n    <div>\n        <div class=\"bd-example\">\n            <form class=\"row g-3\">\n                <div class=\"col-md-4\"><label\n                           for=\"validationServer01\"\n                           class=\"form-label\">First\n                        name</label> <input type=\"text\"\n                           class=\"form-control is-valid\"\n                           id=\"validationServer01\"\n                           value=\"Mark\"\n                           required>\n                    <div class=\"valid-feedback\">Looks good!\n                    </div>\n                </div>\n                <div class=\"col-md-4\"><label\n                           for=\"validationServer02\"\n                           class=\"form-label\">Last\n                        name</label> <input type=\"text\"\n                           class=\"form-control is-valid\"\n                           id=\"validationServer02\"\n                           value=\"Otto\"\n                           required>\n                    <div class=\"valid-feedback\">Looks good!\n                    </div>\n                </div>\n                <div class=\"col-md-4\"><label\n                           for=\"validationServerUsername\"\n                           class=\"form-label\">Username</label>\n                    <div class=\"input-group has-validation\">\n                        <span class=\"input-group-text\"\n                              id=\"inputGroupPrepend3\">@</span>\n                        <input type=\"text\"\n                               class=\"form-control is-invalid\"\n                               id=\"validationServerUsername\"\n                               aria-describedby=\"inputGroupPrepend3\"\n                               required>\n                        <div class=\"invalid-feedback\">Please\n                            choose a username.</div>\n                    </div>\n                </div>\n                <div class=\"col-md-6 input-group-lg\"><label\n                           for=\"validationServer03\"\n                           class=\"form-label\">City</label>\n                    <input type=\"text\"\n                           class=\"form-control is-invalid\"\n                           id=\"validationServer03\"\n                           required>\n                    <div class=\"invalid-feedback\">Please\n                        provide a valid city.</div>\n                </div>\n                <div class=\"col-md-3\"><label\n                           for=\"validationServer04\"\n                           class=\"form-label\">State</label>\n                    <select class=\"form-select is-invalid\"\n                            id=\"validationServer04\"\n                            required>\n                        <option selected\n                                disabled\n                                value=\"\">Choose...</option>\n                        <option>...</option>\n                    </select>\n                    <div class=\"invalid-feedback\">Please\n                        select a valid state.</div>\n                </div>\n                <div class=\"col-md-3\"><label\n                           for=\"validationServer05\"\n                           class=\"form-label\">Zip</label>\n                    <input type=\"text\"\n                           class=\"form-control is-invalid\"\n                           id=\"validationServer05\"\n                           required>\n                    <div class=\"invalid-feedback\">Please\n                        provide a valid zip.</div>\n                </div>\n                <div class=\"col-12\">\n                    <div class=\"form-check\"><input\n                               class=\"form-check-input is-invalid\"\n                               type=\"checkbox\"\n                               value=\"\"\n                               id=\"invalidCheck3\"\n                               required> <label\n                               class=\"form-check-label\"\n                               for=\"invalidCheck3\">Agree to\n                            terms and conditions</label>\n                        <div class=\"invalid-feedback\">You\n                            must agree before submitting.\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-12\"><button\n                            class=\"btn btn-primary\"\n                            type=\"submit\">Submit\n                        form</button></div>\n            </form>\n        </div>\n    </div>\n</article>\n\n\nWeight: 800\n\nStyleguide  Bootstrap.Forms\n*/\n.btn {\n  white-space: nowrap;\n  font-family: var(--font-family_ui);\n  font-weight: var(--font_medium);\n}\n\n.btn.clear {\n  color: var(--link-color-dark);\n  background-color: transparent;\n  border-color: transparent;\n}\n.btn.clear:hover {\n  color: hsl(var(--link-color-dark-h), var(--link-color-dark-s), calc(var(-link-color-dark-l) * 0.5));\n}\n\n.btn-shade {\n  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.05), calc(var(--shade-l) - var(--shade-l) * 0.5), 1);\n  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1);\n}\n.btn-shade:hover {\n  color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.085), calc(var(--shade-l) - var(--shade-l) * 0.85), 1);\n  background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.05), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.1), 1);\n}\n\n.btn-accent {\n  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.015), calc(var(--accent-l) - var(--accent-l) * 0.15), 1);\n}\n.btn-accent:hover {\n  background-color: hsla(var(--accent-h), calc(var(--accent-s) + (100% - var(--accent-s)) * 0.05), calc(var(--accent-l) - var(--accent-l) * 0.5), 1);\n}\n\n.btn.shadow {\n  box-shadow: 1.5px 1.5px 6px 0.75px rgba(0, 0, 0, 0.4);\n}\n\n.btn.shadow:hover {\n  box-shadow: 0.5px 0.5px 2px 0.25px rgba(0, 0, 0, 0.1);\n}\n\n/*\nCarousel ALT\n\nA slide-show component for cycling through groups of images and text.\n\n.no-controls            Will remove left and right arrow\n.text-indicators        Converts the circle indicators to text tabs that lock to the right side of the images.\n.chevron-on             Adds a light orange chevron on the '.active' indicator to increase its impact.\n\n\nMarkup:\n<div\n\tid=\"carouselExampleFade\"\n\tclass=\"carousel carousel-alt slide no-controls text-indicators chevron-on\"\n>\n\t<ol class=\"carousel-indicators\">\n\t\t<li data-target=\"#carouselExampleFade\" data-slide-to=\"0\" class=\"wrap\" >\n\t\t\tquaerat odit assumenda\n\t\t</li>\n\t\t<li data-target=\"#carouselExampleFade\" data-slide-to=\"1\" class=\" wrap\">\n\t\t\tdelectus sunt optio\n\t\t</li>\n\t\t<li data-target=\"#carouselExampleFade\" data-slide-to=\"2\" class=\" wrap\">\n\t\t\tdeserunt quia quasi\n\t\t</li>\n\t</ol>\n\t<!-- Wrapper for slides -->\n\t<div class=\"carousel-inner\" role=\"listbox\">\n\t\t<div class=\"carousel-item active\">\n\t\t\t<a><img class=\"block w_100\" src=\"http://lorempixel.com/630/420/animals\" alt=\"...\"/></a>\n\t\t\t<div class=\"carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0\">\n                    <span class=\"title  font_display block m-b_2 font_4:md m-b_3:md\">Cardiac Syncope Program Launches!</span>\n                    <p><strong>NEW</strong>&nbsp;|&nbsp;Hear from an expert panel and complete four patient cases to test your knowledge on our Syncope Program! <a href=\"http://edu.acc.org/diweb/catalog/item/eid/SYNCOPE2019\" title=\"\" class=\"\" target=\"_blank\"><strong>Find out more!</strong></a></p>\n                </div>\n\t\t</div>\n\t\t<div class=\"carousel-item\">\n\t\t\t<a><img class=\"block w_100\" src=\"http://lorempixel.com/630/420/nature\" alt=\"...\"/></a>\n\t\t\t<div class=\"carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0\">\n\t\t\t\t<span class=\"title font_display block m-b_2 font_4:md m-b_3:md\">sint explicabo sequi</span> Earum nihil omnis.\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"carousel-item\">\n\t\t\t<a><img class=\"block w_100\" src=\"http://lorempixel.com/630/420/food\" alt=\"...\"/></a>\n\t\t\t<div class=\"carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0\">\n\t\t\t\t<span class=\"title font_display block m-b_2 font_4:md m-b_3:md\">sint explicabo sequi</span> Earum nihil omnis.\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<!-- Controls -->\n\t<a\n\t\tclass=\"left carousel-control-prev\"\n\t\thref=\"#carouselExampleFade\"\n\t\trole=\"button\"\n\t\tdata-slide=\"prev\"\n\t>\n\t\t<i class=\"fas fa-chevron-left\"></i>\n\t\t<span class=\"sr-only\">Previous</span>\n\t</a>\n\t<a\n\t\tclass=\"right carousel-control-next\"\n\t\thref=\"#carouselExampleFade\"\n\t\trole=\"button\"\n\t\tdata-slide=\"next\"\n\t>\n\t\t<i class=\"fas fa-chevron-right\"></i>\n\t\t<span class=\"sr-only\">Next</span>\n\t</a>\n</div>\n\n\nStyleguide  Bootstrap.Carousel\n\n*/\n.carousel-alt {\n  max-width: 630px;\n  position: relative;\n  background: url(\"http://cdn.backgroundhost.com/backgrounds/subtlepatterns/subtle_surface.png\");\n  background-repeat: repeat;\n  margin: 0 auto 1rem;\n}\n.carousel-alt:before {\n  display: block;\n  content: \"\";\n  width: 100%;\n  padding-top: 66.6666666667%;\n}\n.carousel-alt > .carousel-inner {\n  position: absolute;\n  top: 0px;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.carousel-alt .carousel-indicators {\n  background-color: rgba(0, 0, 0, 0.6);\n  bottom: auto;\n  width: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  margin: 0;\n}\n.carousel-alt .carousel-indicators li {\n  text-indent: -9999px;\n  overflow: hidden;\n  border: none;\n  border-radius: 12px;\n  box-sizing: content-box;\n  width: 12px;\n  height: 12px;\n  margin-top: 5px;\n  margin-bottom: 5px;\n}\n.carousel-alt .carousel-indicators li.active {\n  border-color: var(--accent);\n  background-color: var(--accent);\n}\n.carousel-alt.chevron-on .carousel-indicators li.active:before {\n  content: \"\\f054\";\n  color: var(--accent);\n  font-size: 1.6018066406em;\n  padding-top: 5px;\n  top: 4px;\n  left: 4px;\n}\n@media only screen and (width > 768px) {\n  .carousel-alt.text-indicators {\n    max-width: 900px;\n  }\n  .carousel-alt.text-indicators:before {\n    padding-top: 46.6666666667%;\n  }\n  .carousel-alt.text-indicators .carousel-inner {\n    width: 70%;\n  }\n  .carousel-alt.text-indicators .carousel-inner > .carousel-item {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n  .carousel-alt.text-indicators .carousel-inner > .carousel-item:before {\n    display: inline-block;\n    /* width: 100%; */\n    width: 1px;\n    margin-left: -1px;\n    padding-top: 66.6666666667%;\n    content: \"\";\n  }\n  .carousel-alt.text-indicators .carousel-inner > .carousel-item a {\n    float: left;\n  }\n  .carousel-alt.text-indicators a[class^=carousel-control].right {\n    right: 30%;\n  }\n  .carousel-alt.text-indicators .carousel-indicators {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    bottom: 0;\n    top: 0;\n    right: 0;\n    max-width: 300px;\n    width: 30%;\n    left: auto;\n  }\n  .carousel-alt.text-indicators .carousel-indicators li {\n    width: auto;\n    flex: 1 1 20%;\n    text-indent: 0;\n    border-radius: 0;\n    background-color: hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.375), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.75), 1);\n    display: block;\n    position: relative;\n    height: auto;\n    padding: 0.5rem 1rem;\n    flex-direction: column;\n    transition: background-color 0.25s ease-out;\n    -moz-transition: background-color 0.25s ease-out;\n    -webkit-transition: background-color 0.25s ease-out;\n    border: 1px solid hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.25), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.5), 1);\n    text-align: left;\n    font-size: 1.125em;\n    margin: 0;\n  }\n  .carousel-alt.text-indicators .carousel-indicators li:first-child {\n    border-top: 0;\n  }\n  .carousel-alt.text-indicators .carousel-indicators li:last-child {\n    border-bottom: 0;\n  }\n  .carousel-alt.text-indicators .carousel-indicators li.active {\n    background-color: hsla(var(--shade-h), calc(var(--shade-s) + (100% - var(--shade-s)) * 0.015), calc(var(--shade-l) - var(--shade-l) * 0.15), 1);\n    color: white;\n    border-right: var(--accent) 10px solid;\n    padding-right: 10px;\n  }\n}\n\n.carousel-control-prev,\n.carousel-control-next {\n  min-width: 3rem;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 20%;\n  font-size: 1.125em;\n  text-align: center;\n  background-color: rgba(0, 0, 0, 0);\n}\n@media only screen and (width > 768px) {\n  .no-controls .carousel-control-prev,\n  .no-controls .carousel-control-next {\n    display: none;\n  }\n}\n@media only screen and (width > 768px) {\n  .carousel-control-prev,\n  .carousel-control-next {\n    width: 10%;\n  }\n}\n@media only screen and (width > 1024px) {\n  .carousel-control-prev,\n  .carousel-control-next {\n    width: 5%;\n  }\n}\n.carousel-control-prev:hover, .carousel-control-prev:focus,\n.carousel-control-next:hover,\n.carousel-control-next:focus {\n  outline: 0;\n  color: var(--accent);\n  text-decoration: none;\n}\n.carousel-control-prev .fa,\n.carousel-control-next .fa {\n  position: absolute;\n  top: 50%;\n  margin-top: -10px;\n  z-index: 5;\n  display: inline-block;\n}\n\n.carousel-control-prev .fa {\n  left: 50%;\n  margin-left: -10px;\n}\n\n.carousel-control-next {\n  left: auto;\n  right: 0;\n}\n.carousel-control-next .fa {\n  right: 50%;\n  margin-right: -10px;\n}\n\n@media only screen and (width > 768px) {\n  .carousel-control-prev .fas,\n  .carousel-control-next .fas {\n    width: 1.6875em;\n    height: 1.6875em;\n    margin-top: -0.5625em;\n    font-size: 1.6875em;\n  }\n  .carousel-control-prev .fa {\n    margin-left: -0.5625em;\n  }\n  .carousel-control-next .fa {\n    margin-right: -0.5625em;\n  }\n}\n.navbar .icon-toggle_bars-times {\n  --_fa-b: \"\";\n  --_fa: \"\";\n}\n\n.navbar .icon-toggle_plus-minus {\n  --_fa: \"\";\n  --_fa-b: \"\";\n}\n\n.navbar .icon-toggle_plus-minus-sub {\n  --_fa: \"\";\n  --_fa-b: \"\";\n}\n\n.navbar {\n  font-family: var(--font-family_accent);\n}\n\n.dropdown-menu {\n  font-family: var(--font-family_ui);\n}\n\n.nav-link {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n\n.navbar-dark .navbar-nav .nav-link {\n  color: inherit;\n}\n\n.navbar-primary .dropdown-toggle:after {\n  display: none;\n}\n\n.navbar-primary .nav-item .nav-link {\n  color: inherit;\n}\n\n.navbar-primary .nav-item:hover, .navbar-primary .nav-item:focus-visible {\n  border-top-color: var(--accent);\n  border-bottom-color: #fff;\n  background-color: #fff;\n  color: var(--acc);\n}\n@media only screen and (width > 768px) {\n  .navbar-primary .nav-item {\n    border-top: 0.25rem var(--acc) solid;\n    border-bottom: 0.25rem var(--acc) solid;\n  }\n  .navbar-primary .nav-item:hover, .navbar-primary .nav-item:focus-visible {\n    border-top-color: var(--accent);\n    border-bottom-color: #fff;\n    background-color: #fff;\n    color: var(--acc);\n  }\n}\n\n@media only screen and (width > 1024px) {\n  .navbar-primary .navbar-nav .nav-item {\n    border-top: 0.25rem var(--acc) solid;\n    border-bottom: 0.25rem var(--acc) solid;\n  }\n  .navbar-primary .navbar-nav .nav-item .nav-link, .navbar-primary .navbar-nav .nav-item .nav-link:hover, .navbar-primary .navbar-nav .nav-item .nav-link:focus-visible {\n    color: inherit;\n  }\n  .navbar-primary .navbar-nav .nav-item:hover, .navbar-primary .navbar-nav .nav-item:focus-visible {\n    border-top-color: var(--accent);\n    border-bottom-color: #fff;\n    background-color: #fff;\n    color: var(--acc);\n  }\n  .navbar-primary .navbar-nav .nav-item:hover .nav-link, .navbar-primary .navbar-nav .nav-item:hover .nav-link:hover, .navbar-primary .navbar-nav .nav-item:hover .nav-link:focus-visible, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link:hover, .navbar-primary .navbar-nav .nav-item:focus-visible .nav-link:focus-visible {\n    color: inherit;\n  }\n}\n\n@media only screen and (width > 1024px) {\n  .collapse.block\\:lg {\n    display: block;\n  }\n}\n.dropdown-item {\n  color: hsla(var(--primary-h), calc(var(--primary-s) + (100% - var(--primary-s)) * 0.015), calc(var(--primary-l) - var(--primary-l) * 0.15), 1);\n}\n.dropdown-item:hover, .dropdown-item:focus-visible {\n  color: white;\n  background-color: var(--accent);\n}\n\n.dropdown_column {\n  min-width: 70vw;\n}\n\n@media only screen and (width > 768px) {\n  .dropdown_column {\n    min-width: 20rem;\n  }\n}\n.navbar-primary .navbar-nav .nav-item.active {\n  border-top-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.125), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25), 1);\n  border-bottom-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.125), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25), 1);\n  background-color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.125), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25), 1);\n  color: #fff;\n}\n.navbar-primary .navbar-nav .nav-item.active .nav-link.active {\n  color: inherit;\n}\n.navbar-primary .navbar-nav .nav-item.active:hover {\n  border-top-color: var(--accent);\n  color: var(--acc);\n}\n\n.accordion .icon-toggle_plus-minus {\n  --_fa: \"\";\n  --_fa-b: \"\";\n}\n\n/* \n\nHeader Nav\n\nThe Header Nav of ACC.org. <span class=\"font_n1 font_italic c_warning\">This is sample data and might not reflect the full design or content needed in production.</span>\n\nMarkup:\n<div class=\"flex c_white relative\">\n\t<nav class=\"flex_auto navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_2 font_1:lg relative\">\n\t\t{{> \"Component.Navigation.BrandedNav.Hamburger\" }}\n\t\t<div class=\"collapse navbar-collapse\" id=\"navBarMainNav\">\n\t\t\t<ul class=\"navbar-nav flex flex_row:lg flex_column justify_around w_100\">\n\t\t\t\t<li class=\"nav-item relative text_left text_center:lg  flex_shrink\">\n\t\t\t\t\t<a class=\"nav-link expanded-click-area nowrap p-l_4 p-l_0:lg\" href=\"//www.acc.org/\" title=\"Home of the American College of Cardiology\"><i class=\"fas fa-home p-x_3:lg\"></i><span class=\"display_none:lg\">&nbsp;Home</span></a>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"display_none:lg relative nav-item relative text_left text_center:lg  flex_auto\">\n\t\t\t\t\t<a class=\"nav-link expanded-click-area nowrap p-l_4 p-l_0:lg\" href=\"//www.acc.org/guidelines#doctype=Guidelines\" title=\"Access ACC guidelines and clinical policy documents as well as related resources\">Guidelines</a>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"nav-item relative text_left text_center:lg  flex_auto dropdown  [ active ]\">\n<a class=\"nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle [ a:c_white ] display_none:lg inline-block\"\n\tid=\"clinicalTopicsDropdown\"\n\trole=\"button\"\n\tdata-bs-toggle=\"dropdown\"\n\taria-haspopup=\"true\"\n\taria-expanded=\"false\"><i\n\t\tclass=\"far fa icon-toggle_plus-minus m-l_n2 m-r_2 \"></i></a>\n<a class=\"nav-link nowrap p-l_0  [ a:c_white ] inline-block\"\n\thref=\"/clinical-topics\">Clinical\n\tTopics</a>\n\t\t\t\t\t<div class=\"dropdown-menu font_copy br-t_0 br_none br_solid:lg br_square m-t_0 m-t_2:lg\" aria-labelledby=\"clinicalTopicsDropdown\">\n\t\t\t\t\t\t{{> \"Component.Navigation.BrandedNav.Dropdown.AltContent\" }}\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"nav-item relative text_left text_center:lg  flex_auto \">\n\t\t\t\t\t<a class=\"nav-link expanded-click-area nowrap p-l_4 p-l_0:lg\" href=\"#\">Latest In Cardiology</a>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"nav-item relative text_left text_center:lg  flex_auto dropdown \">\n\t\t\t\t\t<a class=\"nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle [a:c_white] display_none:lg inline-block\"\n\t\t\t\t\t\tid=\"eduDropdown\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tdata-bs-toggle=\"dropdown\"\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded=\"false\"><i\n\t\t\t\t\t\t\tclass=\"far fa icon-toggle_plus-minus m-l_n2 m-r_2 \"></i>\n\t\t\t\t\t</a>\n\t\t\t\t\t<a class=\"nav-link nowrap p-l_0  [a:c_white] inline-block\"\n\t\t\t\t\t\thref=\"/Edu-Edu\">Education and Meetings</a>\n\t\t\t\t\t<div class=\"dropdown-menu font_copy br-t_0 dropdown-menu-end  br_none br_solid:lg br_square m-t_0 m-t_2:lg\" aria-labelledby=\"eduDropdown\">\n\t\t\t\t\t\t{{> \"Component.Navigation.BrandedNav.Dropdown\" }}\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"nav-item relative text_left text_center:lg  flex_auto dropdown \">\n\t\t\t\t\t<a class=\"nav-link nowrap p-l_4 p-l_0:lg dropdown-toggle [a:c_white] display_none:lg inline-block\"\n\t\t\t\t\t\tid=\"toolDropdown\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tdata-bs-toggle=\"dropdown\"\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded=\"false\"><i\n\t\t\t\t\t\t\tclass=\"far fa icon-toggle_plus-minus m-l_n2 m-r_2 \"></i>\n\t\t\t\t\t</a>\n\t\t\t\t\t<a class=\"nav-link nowrap p-l_0  [a:c_white] inline-block\"\n\t\t\t\t\t\thref=\"/Edu-Edu\">Tools &amp; Practice Support</a>\t\n\t\t\t\t\t<div class=\"dropdown-menu font_copy br-t_0  dropdown-menu-end br_none br_solid:lg br_square m-t_0 m-t_2:lg\" aria-labelledby=\"toolDropdown\">\n\t\t\t\t\t\t{{> \"Component.Navigation.BrandedNav.Dropdown.DoubleColumn\" }}\n\t\t\t\t\t</div>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"display_none:lg nav-item relative text_left text_center:lg  flex_auto \">\n\t\t\t\t\t<a class=\"nav-link expanded-click-area nowrap p-l_4 p-l_0:lg\" href=\"//www.acc.org/membership\" title=\"Access exclusive member features and groups or learn about ACC membership\">Membership</a>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"display_none:lg nav-item relative text_left text_center:lg  flex_auto \">\n\t\t\t\t\t<a class=\"nav-link expanded-click-area nowrap p-l_4 p-l_0:lg\" href=\"//www.acc.org/about-acc\" title=\"Learn about the ACC organization\">About ACC</a>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"display_none:lg nav-item relative text_left text_center:lg  flex_auto \">\n\t\t\t\t\t<a class=\"nav-link expanded-click-area nowrap p-l_4 p-l_0:lg\" href=\"http://www.onlinejacc.org/\" target=\"_blank\" title=\"JACC.org\">JACC</a>\n\t\t\t\t</li>\n\t\t\t\t<li class=\"display_none:lg nav-item relative text_left text_center:lg  flex_auto \">\n\t\t\t\t\t<a class=\"nav-link expanded-click-area nowrap p-l_4 p-l_0:lg\" href=\"http://accscientificsession.acc.org\" target=\"_blank\" title=\"ACC Annual Scientific Session Website\">ACC.19</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</div>\n\t</nav>\n\t{{> \"Component.Navigation.BrandedNav.Login\" }}\n</div>\n\nMarkupWrapperClasses:\n    max-w_70 m_auto\n\nWeight: -100 \n\nStyleguide Component.Navigation.BrandedNav\n\n*/\n/*\nMobile Menu Nav (Hamburger)\n\nDescription: A button that triggers the menu to show or hide  with the site.\n\nMarkup:\n<div class=\"relative\"><button class=\"br_solid br_2 br_white-2 collapsed m-l_3 m-y_3 navbar-toggler p_2 expanded-click-area collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navBarMainNav\" aria-controls=\"navBarMainNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n\t<i class=\"icon-toggle_bars-times fas fa a:c_acc-2 c_white\"></i><span class=\"a:c_acc-2 c_white p-x_3 uppercase font_accent\">Menu</span>\n</button>\n</div>\n\nMarkupWrapperClasses:\nflex_auto navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_1 show\n\n\nWeight:0\n\nStyleguide Component.Navigation.BrandedNav.Hamburger\n*/\n/*\nLogin Nav\n\nThe ACC.org Nav has a shade nav that houses the login and profile nav with a shade color. To make sure it doesn't resize when the main nav expands the login nav needs to be placed absolutely. \n\nMarkup:\n<nav class=\"font_1 absolute bg_primary br-t_1 br_primary br_solid br_none flex_shrink font_0 font_0:lg m-l_auto navbar navbar-dark navbar-expand p-y_2 r_0 t_0 b_0:lg relative:lg\" >\n\t<ul class=\"navbar-nav\">\n\t\t<li class=\"nav-item relative flex_shrink dropdown\">\n\t\t\t<a class=\"nav-link expanded-click-area [a:c_white] h:c_white nowrap\"\n\t\t\t\t role=\"button\"\n\t\t\t\t id=\"dropdownMyACC\"\n\t\t\t\t data-bs-toggle=\"dropdown\"\n\t\t\t\t aria-expanded=\"false\"\n\t\t\t\t>My ACC <i class=\"far icon-toggle_chevron-up-down\"></i></a>\n\t\t\t<div \n\t\t\tclass=\"dropdown-menu font_copy br-t_0 dropdown-menu-end br_none br_solid:lg m-t_0 m-t_2:lg font_0\" aria-labelledby=\"dropdownMyACC\"  \n\t\t\t>\n\t\t\t\t<div class=\"flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg\">\n\t\t\t\t\t<div class=\"p-x_2 p-y_0 dropdown_column\">\n\t\t\t\t\t\t<ul class=\"ul_none lh_2 m_0\">\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"/my-acc/my-profile\">My Profile</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"/my-acc/my-training-program\">My Training Programs</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"/my-acc/my-membership\">My Membership</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"/my-acc/my-library\">My Library</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"http://edu.acc.org/diweb/dashboard\">My Learning Dashboard</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"http://edu.acc.org/diweb/grades\">My Transcript</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"/my-acc/ncdr-physician-dashboard\">NCDR Physician Dashboard</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"/my-acc/my-communication-preferences\">My Communication Preferences</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"https://memberhub.acc.org/\">ACC Member Hub</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"/my-acc/my-purchase-history\">My Purchases</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"/my-acc/personalization\">Personalize ACC.org</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t<div class=\"dropdown-divider m-y_3\"></div>\n\t\t\t\t\t\t\t<li class=\"\">\n\t\t\t\t\t\t\t\t<a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5 lh_2\" href=\"/RemoteLogOff\"> Logout</a>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t\t<li class=\"nav-item\">\n\t\t\t<a class=\" nav-link nowrap\" href=\"#\"><i class=\"far fa-shopping-cart\"></i></a>\n\t\t</li>\n\t\t<!--<li class=\"nav-item\">\n\t\t\t<a class=\" nav-link nowrap\" href=\"#\"><i class=\"fas fa-sign-out-alt\"></i></a>\n\t\t</li>-->\n\t\t<!--<li class=\"nav-item\">\n\t\t\t<a href=\"@loginlink\" class=\"nav-link nowrap\"><i class=\"fas fa-sign-in-alt\"></i> Log in to MyACC </a>\n\t\t</li>-->\n\t</ul>\n</nav>\n\nWeight: 100\n\nMarkupWrapperClasses:\n    flex max-w_60 m_auto\n\nStyleguide Component.Navigation.BrandedNav.Login\n\n*/\n/*\nJavaScript: Snippet to Show on Hover\n\nDescription: \n\nMarkup:\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function(){\n// make it as accordion for smaller screens\nif (window.innerWidth > 992) {\n\tdocument.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){\n\t\teveryitem.addEventListener('mouseover', function(e){\n\t\t\tlet el_link = this.querySelector('a[data-bs-toggle]');\n\t\t\tif(el_link != null){\n\t\t\t\tlet nextEl = this.querySelector('.dropdown-menu');\n\t\t\t\tel_link.classList.add('show');\n\t\t\t\tnextEl.classList.add('show');\n\t\t\t\tnextEl.setAttribute(\"data-bs-popper\", \"none\")\n\t\t\t}\n\t\t});\n\t\teveryitem.addEventListener('mouseleave', function(e){\n\t\t\tlet el_link = this.querySelector('a[data-bs-toggle]');\n\t\t\tif(el_link != null){\n\t\t\t\tlet nextEl = this.querySelector('.dropdown-menu');\n\t\t\t\tel_link.classList.remove('show');\n\t\t\t\tnextEl.classList.remove('show');\n\t\t\t\tnextEl.removeAttribute('data-bs-popper');\n\t\t\t}\n\t\t})\n\t});\n}\n// end if innerWidth\n}); \n</script>\n\n\nWeight:0\n\nStyleguide Component.Navigation.BrandedNav.JavaScript\n*/\n/*\nResponsive Top Nav with Single Layer Nav\n\nThe Header Nav with no dropdown navs but with elements that show up only in the mobile viewport\n\nMarkup:\n<nav class=\"navbar navbar-primary p_0 navbar-expand-lg navbar-dark bg_acc font_1\">\n\t{{> \"Component.Navigation.BrandedNav.Hamburger\" }}\n\t<div class=\"collapse navbar-collapse\" id=\"navBarMainNav\">\n\t\t<ul class=\"navbar-nav\">\n\t\t\t<li class=\"display_none:lg nav-item\">\n\t\t\t\t<a class=\"nav-link\" href=\"//www.acc.org/\" title=\"Home of the American College of Cardiology<span class=\"text-indent_n1 inline-block m-l_4\"><i class=\"fas fa-home\"></i><span class=\"display_none:lg\">&nbsp;Home</span></a\n\t\t\t\t>\n\t\t\t</li>\n\t\t\t<li class=\"display_none:lg nav-item\">\n\t\t\t\t<a\n\t\t\t\t\tclass=\"nav-link\" href=\"//www.acc.org/guidelines#doctype=Guidelines\" title=\"Access ACC guidelines and clinical policy documents as well as related resources\" >Guidelines</a\n\t\t\t\t>\n\t\t\t</li>\n\t\t\t<li class=\"nav-item\">\n\t\t\t\t<a class=\"nav-link\" href=\"/clinical-topics\" >Clinical Topics</a\n\t\t\t\t>\n\t\t\t</li>\t\n\t\t\t<li class=\"nav-item\">\n\t\t\t\t<a class=\"nav-link\" href=\"#\">Latest In Cardiology</a>\n\t\t\t</li>\n\t\t\t<li class=\"display_none:lg nav-item\">\n\t\t\t\t<a\n\t\t\t\t\tclass=\"nav-link\"\n\t\t\t\t\thref=\"//www.acc.org/membership\"\n\t\t\t\t\ttitle=\"Access exclusive member features and groups or learn about ACC membership\"\n\t\t\t\t\t>Membership</a\n\t\t\t\t>\n\t\t\t</li>\n\t\t\t<li class=\"display_none:lg nav-item\">\n\t\t\t\t<a class=\"nav-link\" href=\"//www.acc.org/about-acc\" title=\"Learn about the ACC organization\"\n\t\t\t\t\t>About ACC</a\n\t\t\t\t>\n\t\t\t</li>\n\t\t\t<li class=\"display_none:lg nav-item\">\n\t\t\t\t<a class=\"nav-link\" href=\"http://www.onlinejacc.org/\" target=\"_blank\" title=\"JACC.org\">JACC <i class=\"c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2\" style=\"text-indent: 0;\"></i></a>\n\t\t\t</li>\n\t\t\t<li class=\"display_none:lg nav-item\">\n\t\t\t\t<a\n\t\t\t\t\tclass=\"nav-link\"\n\t\t\t\t\thref=\"http://accscientificsession.acc.org\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\ttitle=\"ACC Annual Scientific Session Website\"\n\t\t\t\t\t>ACC.19 <i class=\"c_white fa-external-link-square fal h:c_white m-l_3 p-r_3 p-t_2\" style=\"text-indent: 0;\"></i></a\n\t\t\t\t>\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</nav>\n\nMarkupWrapperClasses:\n    max-w_60 m_auto\n\nWeight: 1\n\nStyleguide Component.Navigation.BrandedNav.Simple\n\n*/\n/*\nDropdown Double Column\n\nThe Header Nav of ACC.org\n\nMarkup:\n<div class=\"flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg\">\n\t<div class=\"p-x_2 p-y_0 p-y_2:md dropdown_column w_50:md\">\n\t\t{{> \"Component.Navigation.BrandedNav.Dropdown.List.Simple\" }}\n\t</div>\n\t<div\n\t\tclass=\"p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md dropdown_column w_50:md\"\n\t>\n\t\t{{> \"Component.Navigation.BrandedNav.Dropdown.List.SubLinks\" }}\n\t</div>\n</div>\n\n\nMarkupWrapperClasses:\n    br_none br_solid:lg dropdown-menu font_copy br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative\n\nWeight: 55\n\n\tStyleguide Component.Navigation.BrandedNav.Dropdown.DoubleColumn\n\n*/\n/*\nDropdown Single Column\n\nThe Header Nav of ACC.org\n\nMarkup:\n<div class=\"flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg\">\n\t<div class=\"p-x_2 p-y_0 p-y_2:md dropdown_column\">\n\t\t{{> \"Component.Navigation.BrandedNav.Dropdown.List.Simple\" }}\n\t</div>\n</div>\n\n\nMarkupWrapperClasses:\n    br_none br_solid:lg dropdown-menu font_copy br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative\n\nWeight: 50\n\n\tStyleguide Component.Navigation.BrandedNav.Dropdown\n\n*/\n/*\nDropdown with Sub Links\n\nThe Header Nav of ACC.org\n\nMarkup:\n<div class=\"flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg\">\n\t<div class=\"p-x_2 p-y_0 p-y_3:md dropdown_column\">\n\t\t{{> \"Component.Navigation.BrandedNav.Dropdown.List.SubLinks\" }}\n\t</div>\n</div>\n\nMarkupWrapperClasses:\n\tbr_none br_solid:lg dropdown-menu font_copy br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative\n\nWeight: 2\n\nStyleguide Component.Navigation.BrandedNav.Dropdown.SubLinks\n\n*/\n/*\nNav Dropdown with Alternate Content in Links\n\nIt is easy to add images in replace of text links in the navs.   \n\nMarkup:\n<div class=\"flex flex_column flex_row:md p-x_2:lg m-x_n1 m-x_0:lg\">\n\t<div class=\"p-x_2 p-y_0 p-y_2:md order_2 order_1:md dropdown_column w_50:md\">\n\t\t\t\t{{> \"Component.Navigation.BrandedNav.Dropdown.List.AltContent\" }}\n\t</div>\n\t<div\n\t\tclass=\"p-x_2 p-y_0 p-y_2:md br-l_1 br_none br_shade-4 br_solid:lg br_solid:md order_1 order_2:md dropdown_column w_50:md\"\n\t>\n\t\t\t{{> \"Component.Navigation.BrandedNav.Dropdown.List.SubLinks\" }}\n\t</div>\n</div>\n\nMarkupWrapperClasses:\n\tbr_none br_solid:lg dropdown-menu font_copy br-t_0 m-t_0 m-t_2:lg m-x_0:lg m-x_n4 shadow_overlap-light show relative\n\n\nWeight: 60\n\nStyleguide Component.Navigation.BrandedNav.Dropdown.AltContent\n\n*/\n/*\nDropdown Nav List\n\nDescription: Simple single layer of links in a drop down \n\nMarkup:\n<ul class=\"ul_none lh_2 m_0 max-w_25 w_100\">\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/acute-coronary-syndromes.pdf\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Acute Coronary Syndromes</span></span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/anticoagulation-management\"\n\t\t\ttitle=\"Anticoagulation Management\"\n\t\t\ttarget=\"_blank\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Anticoagulation Management</span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/arrhythmias-and-clinical-ep\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Arrhythmias and Clinical EP</span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/acute-coronary-syndromes/atherosclerotic-disease-cad-pad\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Atherosclerotic Disease (CAD/PAD)</span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/cardiac-surgery\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Cardiac Surgery</span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/cardio-oncology\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Cardio-Oncology</span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/congenital-heart-disease-pediatric-cardiology\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Congenital Heart Disease and Pediatric Cardiology</span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/diabetes-and-cardiometabolic-disease.zip\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Diabetes and Cardiometabolic Disease</span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/dyslipidemia\"\n\t\t\ttitle=\"Dyslipidemia\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Dyslipidemia</span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/geriatric-cardiology\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Geriatric Cardiology</span></a\n\t\t>\n\t</li>\n\t<li class=\"m-b_2\">\n\t\t<a\n\t\t\tclass=\"dropdown-item link transition_4 wrap\"\n\t\t\thref=\"/clinical-topics/heart-failure-and-cardiomyopathies\"\n\t\t\ttitle=\"Heart Failure and Cardiomyopathies\"\n\t\t\t><span class=\"text-indent_n1 inline-block m-l_4\">Heart Failure and Cardiomyopathies</span></a\n\t\t>\n\t</li>\n</ul>\n\n\nWeight:1000\n\nStyleguide Component.Navigation.BrandedNav.Dropdown.List.Simple\n*/\n/*\nDropdown Nav List with Sub Links\n\nDescription: Simple single layer of links in a drop down \n\nMarkup:\n<ul class=\"ul_none lh_2\"\n    id=\"SubLinkCollapseParent\">\n    <li class=\"m-b_2\">\n        <a class=\"dropdown-item link transition_4 wrap\"\n           href=\"/clinical-topics/acute-coronary-syndromes\"><span\n                  class=\"text-indent_n1 inline-block m-l_4\">Acute\n                Coronary Syndromes</span></span></a>\n    </li>\n    <li class=\"m-b_2\">\n        <a class=\"dropdown-item link transition_4 wrap\"\n           href=\"/clinical-topics/anticoagulation-management\"\n           title=\"Anticoagulation Management\"><span\n                  class=\"text-indent_n1 inline-block m-l_4\">Anticoagulation\n                Management</span></a>\n    </li>\n    <li class=\"m-b_2\">\n        <div\n             class=\"flex justify_start transition_4 dropdown-item link\">\n            <button class=\"flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg\"\n                    data-bs-toggle=\"collapse\"\n                    role=\"button\"\n                    aria-expanded=\"true\"\n                    aria-controls=\"learningCollapse\"\n                    data-bs-target=\"#learningCollapse\"\n                    onclick=\"event.stopPropagation()\">\n                <i\n                   class=\"far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2\"></i>\n            </button>\n            <a class=\"flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3\"\n               href=\"#\">Online Learning Catalog</a>\n        </div>\n        <ul class=\"ul_none lh_3 font-size_down collapse transition_4 block:lg\"\n            id=\"learningCollapse\">\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/earncredit\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">Earn\n                        Credit</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/board-prep-offerings\"\n                   title=\"Board Prep Offerings\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">Board\n                        Prep Offerings</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/education-catalog\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">View\n                        the Entire Catalog</span></a>\n            </li>\n        </ul>\n    </li>\n    <li class=\"m-b_2\">\n        <div\n             class=\"flex justify_start transition_4 dropdown-item link\">\n            <a class=\"flex_none p-r_2 p_0 self_center toggler inline-block br_none bg_transparent c_inherit-all h:undecorated display_none:lg\"\n                    data-bs-toggle=\"collapse\"\n                    role=\"button\"\n                    aria-expanded=\"true\"\n                    aria-controls=\"productsCollapse\"\n                    data-bs-target=\"#productsCollapse\"\n                    onclick=\"event.stopPropagation()\">\n                <i\n                   class=\"far fa icon-toggle_plus-minus-sub display_none:lg m-l_n2 m-r_2\"></i>\n            </a>\n            <a class=\"flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3\"\n               href=\"/education-and-meetings/education-catalog\">Products</a>\n        </div>\n        <ul class=\"ul_none lh_3 font-size_down collapse transition_4 block:lg\"\n            id=\"productsCollapse\">\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/accsap\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">ACCSAP</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/accel-audio\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">ACCEL</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/cardiosource-plus\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">CardioSource\n                        Plus for Institutions and\n                        Practices</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/cathsap\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">CathSAP</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/ecg-drill-and-practice\"\n                   title=\"ECG Drill and Practice\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">ECG\n                        Drill and Practice</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/echosap\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">EchoSAP</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/epsap\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">EP\n                        SAP</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/heart-songs-5\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">Heart\n                        Songs</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/iscience\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">iScience</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/recent-advances-in-clinical-nuclear-cardiology-and-cardiac-ct-mod\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">Nuclear\n                        Cardiology and Cardiac CT Meeting on\n                        Demand</span></a>\n            </li>\n            <li class=\"\">\n                <a class=\"dropdown-item link transition_4 wrap text-indent_n1 p-l_5\"\n                   href=\"/education-and-meetings/products-and-resources/rightsteps-optimizing-medical-therapy-for-chronic-heart-failure\"><span\n                          class=\"text-indent_n1 inline-block m-l_5\">RightSTEPS\n                        Optimizing Medical Therapy for\n                        Chronic Heart\n                        Failure</span></a>\n            </li>\n        </ul>\n    </li>\n</ul>\n\n\nWeight:1005\n\nMarkupWrapperClasses:\n flex_grow self_center wrap w_100 text-indent_n1 inline-block m-l_4 c_inherit-all h:undecorated p-r_3\n\n\nStyleguide Component.Navigation.BrandedNav.Dropdown.List.SubLinks\n*/\n/*\nDropdown Nav List with Alt Content\n\nDescription: Some columns take images instead of text in dropdown links \n\nMarkup:\n<ul class=\"ul_none lh_2\">\n\t<li class=\"relative m-x_2:md m-x_3\">\n\t\t<a\n\t\t\thref=\"http://cvquality.acc.org/?_ga=2.33577825.159963902.1562853382-843642371.1562007133\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"transition_1 h:opacity opacity_8\"\n\t\t\t><img\n\t\t\t\tsrc=\"https://www.acc.org/~/media/Non-Clinical/Images/External%20Site%20Logos/ACC_QII_logo.png\"\n\t\t\t\talt=\"QII\" class=\"w_100 max-w_20\"\n\t\t/></a>\n\t</li>\n\t<li class=\"relative m-x_2:md m-x_3\">\n\t\t<a href=\"http://cvquality.acc.org/NCDR-Home.aspx?_ga=2.91395290.159963902.1562853382-843642371.1562007133\" target=\"_blank\" class=\"transition_1 h:opacity opacity_8\"><img src=\"https://www.acc.org/~/media/Non-Clinical/Images/External Site Logos/ACC_NCDR_logo.png\" alt=\"NCDR\" class=\"w_100 max-w_20\"></a>\n\t</li>\n</ul>\n\nWeight:1010\n\nStyleguide Component.Navigation.BrandedNav.Dropdown.List.AltContent\n*/\n#search-holder {\n  float: right;\n  clear: right;\n  width: 400px;\n  position: relative;\n  z-index: 3000;\n  border: 1px solid hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.25), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5), 1);\n  border-radius: 1.98px;\n  clear: both;\n}\n#search-holder input {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  line-height: 1.5em;\n  font-size: 1.2em;\n  box-sizing: border-box;\n  color: #ccc;\n}\n#search-holder button {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  height: 26px;\n  width: 26px;\n  background: #fff url(https://www.acc.org/images/icon-search.png) 50% 50% no-repeat;\n  border: 0;\n  overflow: hidden;\n  text-indent: -99em;\n}\n#search-holder button:hover {\n  cursor: pointer;\n}\n#search-holder .coveo-omnibox {\n  top: 30px;\n}\n#search-holder .coveo-query-box-clear {\n  display: none !important;\n}\n\n.search-bar {\n  width: 100%;\n  height: auto;\n  float: left;\n}\n\n#nav-search-label {\n  position: absolute;\n  overflow: hidden;\n  text-indent: -99em;\n}\n\n#nav-search-in {\n  position: relative;\n  display: block;\n  float: left;\n  width: 200px;\n  padding: 0 24px 0 10px;\n  height: 30px;\n  overflow: hidden;\n  border-right: 1px hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.25), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5), 1) solid;\n  background: #e6e6e6;\n  border-radius: 1.98px 0 0 1.98px;\n}\n#nav-search-in #nav-search-in-content {\n  display: inline-block;\n  margin: 0;\n  padding: 6px 0 0 0;\n  text-indent: 1px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 90px;\n}\n#nav-search-in.nav-facade-active .nav-down-arrow {\n  position: absolute;\n  display: inline-block;\n  right: 10px;\n  top: 11px;\n  background: url(\"https://www.acc.org/images/search_arrow.png\");\n  height: 5px;\n  width: 9px;\n}\n#nav-search-in.nav-facade-active #searchDropdownBox {\n  cursor: pointer;\n  height: 29px;\n  left: 0;\n  opacity: 0;\n  top: 0;\n  visibility: visible;\n  width: auto;\n}\n\n#searchDropdownBox {\n  border: 1px solid #DDDDDD;\n  color: black;\n  left: 5px;\n  margin: 0;\n  outline: medium none;\n  padding: 0;\n  position: absolute;\n  top: 3px;\n  visibility: hidden;\n  width: 190px;\n}\n\n.nav-searchfield-outer {\n  position: relative;\n  float: left;\n  width: 245px;\n  height: 30px;\n}\n\n#twotabsearchtextbox {\n  background: none repeat scroll 0 0 transparent;\n  border: medium none;\n  margin: 6px 0 0 6px;\n  outline: medium none;\n  padding: 0;\n  width: 100%;\n}\n\n.nav-submit-button {\n  margin: 0;\n  overflow: hidden;\n  padding: 0 0 0 3px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  height: 28px;\n  width: 40px;\n}\n.nav-submit-button .nav-submit-input {\n  border: medium none;\n  color: white;\n  cursor: pointer;\n  margin: 0;\n  padding: 0;\n  width: 34px;\n}\n\n/*Coveo Changes*/\n#twotabsearchtextbox .magic-box-underlay {\n  height: auto;\n}\n\n#twotabsearchtextbox .magic-box {\n  border-width: 0;\n}\n\n#twotabsearchtextbox .CoveoSearchbox input {\n  padding: 0;\n  height: 30px;\n}\n\n#twotabsearchtextbox .magic-box .magic-box-input {\n  height: 30px;\n}\n\n#twotabsearchtextbox .CoveoSearchButton {\n  height: 30px;\n  width: 32px;\n}\n\n#twotabsearchtextbox #search-holder {\n  height: 32px;\n}\n\n#twotabsearchtextbox .magic-box.magic-box-notEmpty .magic-box-clear {\n  width: 32px;\n}\n\n#twotabsearchtextbox .magic-box .magic-box-clear {\n  height: 30px;\n  line-height: 24px;\n}\n\n#twotabsearchtextbox .magic-box .magic-box-clear .magic-box-icon:before {\n  font-size: 16px;\n}\n\n#twotabsearchtextbox .magic-box .magic-box-suggestions .magic-box-suggestion {\n  line-height: 14px;\n  font-size: 12px;\n  padding-bottom: 0;\n  padding-top: 0.5em;\n}\n\n#twotabsearchtextbox .magic-box .magic-box-suggestions .magic-box-suggestion-seperator {\n  line-height: 14px;\n  font-size: 12px;\n  padding-bottom: 0;\n  padding-top: 0.5em;\n}\n\n:root {\n  --page-padding: 0.5rem;\n  --outer-content-padding: 0;\n  --inner-content-padding: 0.5rem;\n  --sidebar-width: 100%;\n  --content-max-width: calc(100% - (var(--page-padding) * 2));\n  --content-min-width: calc(100% - (var(--page-padding) * 2));\n}\n@media only screen and (width > 768px) {\n  :root {\n    --inner-content-padding: 1rem;\n    --page-padding: 1rem;\n    --outer-content-padding: 0;\n    --sidebar-width: calc(300px + (var(--inner-content-padding) * 2));\n  }\n}\n@media only screen and (width > 1024px) {\n  :root {\n    --outer-content-padding: 1rem;\n    --sidebar-width: 300px;\n  }\n}\n\n[grid-template=page-layout] {\n  margin-bottom: var(--page-padding);\n  row-gap: var(--page-padding);\n  width: 100%;\n  display: grid;\n  grid-template-columns: [all-start fullscreen-start sidebar-secondary-start sidebar-primary-start] var(--page-padding) [content-start center-start] 1fr [content-end center-end] var(--page-padding) [fullscreen-end all-end sidebar-secondary-end sidebar-primary-end];\n  grid-template-rows: [fullscreen-start all-start] var(--page-padding) [center-start content-start] auto [center-end content-end sidebar-secondary-start] auto [sidebar-secondary-end sidebar-primary-start] auto [sidebar-primary-end] var(--page-padding) [fullscreen-end all-end];\n}\n@media only screen and (width > 768px) {\n  [grid-template=page-layout] {\n    grid-template-columns: [fullscreen-start all-start sidebar-primary-start sidebar-secondary-start] var(--page-padding) [content-start] var(--sidebar-width) [sidebar-primary-end] var(--page-padding) [center-start] 1fr [center-end content-end] var(--page-padding) [fullscreen-end all-end sidebar-secondary-end];\n    grid-template-rows: [all-start fullscreen-start content-start center-start sidebar-primary-start] auto [content-end sidebar-secondary-start center-end sidebar-primary-end] auto [sidebar-secondary-end fullscreen-end all-end];\n  }\n}\n@media only screen and (width > 1024px) {\n  [grid-template=page-layout] {\n    grid-template-columns: [fullscreen-start all-start sidebar-primary-start] var(--page-padding) [content-start] var(--sidebar-width) [sidebar-primary-end] var(--page-padding) [center-start] 1fr [center-end] var(--page-padding) [sidebar-secondary-start] var(--sidebar-width) [content-end] var(--page-padding) [fullscreen-end all-end sidebar-secondary-end];\n    grid-template-rows: [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];\n  }\n}\n@media only screen and (width > 768px) {\n  [grid-template=page-layout][template-option=reverse] {\n    grid-template-columns: [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) [content-start center-start] 1fr [center-end] var(--page-padding) [sidebar-primary-start] var(--sidebar-width) [content-end] var(--page-padding) [fullscreen-end all-end sidebar-primary-end sidebar-secondary-end];\n  }\n}\n@media only screen and (width > 1024px) {\n  [grid-template=page-layout][template-option=reverse] {\n    grid-template-columns: [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) [content-start] var(--sidebar-width) [sidebar-secondary-end] var(--page-padding) [center-start] 1fr [center-end] var(--page-padding) [sidebar-primary-start] var(--sidebar-width) [content-end] var(--page-padding) [fullscreen-end all-end sidebar-primary-end];\n    grid-template-rows: [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];\n  }\n}\n\n[grid-template=page-layout] > [grid-area=fullscreen], [grid-template=page-layout] > [grid-area=document] {\n  grid-column: fullscreen;\n  grid-row: fullscreen;\n}\n[grid-template=page-layout] > [grid-area=sidebar-primary] {\n  grid-column: sidebar-primary;\n  grid-row: sidebar-primary;\n}\n[grid-template=page-layout] > [grid-area=sidebar-secondary] {\n  grid-column: sidebar-secondary;\n  grid-row: sidebar-secondary;\n}\n\n[grid-area=content] {\n  grid-column: content;\n  grid-row: content;\n}\n\n[grid-template=page-layout]:has([grid-area=sidebar-primary]) > [grid-area=content],\n[grid-template=page-layout][template-option=reverse]:has([grid-area=sidebar-secondary]) > [grid-area=content] {\n  grid-column: center-start/content-end;\n  grid-row: content;\n}\n\n[grid-template=page-layout]:has([grid-area=sidebar-secondary]) > [grid-area=content],\n[grid-template=page-layout][template-option=reverse]:has([grid-area=sidebar-primary]) > [grid-area=content] {\n  grid-column: content-start/center-end;\n  grid-row: content;\n}\n\n[grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary]) [grid-area=content] {\n  grid-column: center;\n  grid-row: center;\n}\n\n@media only screen and (width > 768px) and (width < 1024px) {\n  [grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary]) [grid-area=sidebar-secondary] {\n    grid-column-start: center-start;\n  }\n  [grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary])[template-option=reverse] [grid-area=sidebar-secondary] {\n    grid-column-end: center-end;\n  }\n  [grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary]) [grid-area=sidebar-primary] {\n    grid-row-end: sidebar-secondary-end;\n  }\n}\n\n/*\n\nPage Layout\n\nDescripition:\n  <ol>\n    <li>\n        <strong>Overall Structure:</strong>\n        <ul>\n        <li>Design the layout to incorporate columns for content and sidebars.</li>\n        <li>\n        [sidebar]\n        [content]\n        [sidebar]</li>\n        <li>the parent uses `grid-template=\"page-layout\"`</li>\n        <li>the children uses `grid-area=\"content|sidebar-primary|sidebar-secondary\"`</li>\n        </ul>\n    </li>\n    <li>\n      <strong>Column Configuration:</strong>\n      <ul>\n        <li>Utilize 'sidebar-primary', 'sidebar-secondary', and 'content' classes to designate columns within the layout.</li>\n        <li>Define grid areas in the DOM structure for 'fullscreen', 'sidebar-primary','sidebar-secondary','container'.</li>\n      </ul>\n    </li>\n    <li>\n      <strong>Sidebar Specifications:</strong>\n      <ul>\n        <li>Sidebars are 300px wide with 1 rem padding on the left and right. (300px + 2rem)</li>\n        <li>Sidebars do not respect the page margin but adhere to margins between themselves and content.</li>\n        <li>Sidebars placed on the edge will extend to the edge of the container.</li>\n        </ul>\n        <ul>\n        <strong>Responsive Design:</strong>\n        <li>`Primary sidebar` remains fixed and aligned with the content area. It folds under the content on mobile viewports.</li>\n        <li>`Secondary sidebar` remains fixed and shifts below the content on tablet and smaller viewports.</li>\n        <li>The sidebar widths are constant when aligned with the content and changes its width to  the above content based on media breakpoints.</li>\n      </ul>\n    </li>\n    <li>\n      <strong>Content Area:</strong>\n      <ul>\n        <li>Allocate remaining space on the page for the content area, respecting a page margin.</li>\n      </ul>\n    </li>\n  </ol>\n\nMarkup:\n<h4>Document(fullscreen)</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"fullscreen\">Document</div>\n</section>\n<h4>Content No Sidebars</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"content\">Content</div>  \n</section>\n<h4>Content with Primary Sidebar</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"sidebar-primary\">sidebar primary</div> \n    <div grid-area=\"content\">content</div> \n</section>\n<h4>Content with Primary Sidebar - Reverse <code>template-option=\"reverse\"</code></h4>\n<section grid-template=\"page-layout\" template-option=\"reverse\" >\n    <div grid-area=\"sidebar-primary\">sidebar primary (reverse)</div> \n    <div grid-area=\"content\">content (reverse)</div> \n</section>\n<h4>Content with Secondary Sidebar</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"sidebar-secondary\">sidebar secondary</div> \n    <div grid-area=\"content\">content</div> \n</section>\n<h4>Content with Secondary Sidebar - Reverse <code>template-option=\"reverse\"</code></h4>\n<section grid-template=\"page-layout\" template-option=\"reverse\" >\n    <div grid-area=\"sidebar-secondary\">sidebar secondary</div> \n    <div grid-area=\"content\">content</div> \n</section>\n<h4>Both Sidebars</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"sidebar-secondary\">sidebar secondary</div> \n    <div grid-area=\"content\">content center</div> \n    <div grid-area=\"sidebar-primary\">sidebar primary</div> \n</section>\n<h4>Both Sidebars</h4>\n<section grid-template=\"page-layout\" template-option=\"reverse\" >\n    <div grid-area=\"sidebar-secondary\">sidebar secondary</div> \n    <div grid-area=\"content\">content center</div> \n    <div grid-area=\"sidebar-primary\">sidebar primary</div> \n</section>\n{{> \"Component.Structures.PageLayout.demoStyles\" }}\n\nMarkupWrapperClasses: space-holder colored-zones\n\nWeight: 0\n\nStyleguide Component.Structures.PageLayout\n*/\n/*\n\nDemo Styles\n\nDescripition:\nStyles needed for demo and to not be included in enteprise styles\n\nMarkup:\n<!-- Needed for Style Guide Only --> \n<style>.space-holder section,.space-holder [item-label=\"section\"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}\n.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}\n.colored-zones [grid-area=\"sidebar-secondary\"],.colored-zones [item-label=\"sidebar-secondary\"] {background-color: #0080001b;}\n.colored-zones [grid-area=\"sidebar-primary\"],.colored-zones [item-label=\"sidebar-primary\"] {background-color: #1668ff2d;}\n.colored-zones [grid-area=\"fullscreen\"],.colored-zones [item-label=\"fullscreen\"] {background-color:#ff260040;}\n.colored-zones [grid-area=\"content\"],.colored-zones [item-label=\"content\"] {background-color: #ffa6002b;}</style>\n</style>\n<!-- Needed for Style Guide Only --> \n\nMarkupWrapperClasses: space-holder colored-zones\n\nWeight: 0\n\nStyleguide Component.Structures.PageLayout.demoStyles\n*/\n/*\nPage Layout: Article\n\nhere is a short demo of how the content will work with the page layouts.\n\nMarkUp:\n<div grid-template=\"page-layout\">\n    <article grid-area=\"content\" id=\"archesArticle\" class=\"reading-typography\">\n        <h1>ACCEL Lite: Top Takeaways from the ACC 2023 Guideline for Chronic CAD for the\n            Practicing Clinician</h1>\n        <div class=\"article-meta\">\n            <p class=\"date m-y_2 font_n1 font_medium\">Feb 13, 2024 &nbsp;&nbsp;|&nbsp;&nbsp;<a\n                    href=\"http://www.acc.org/Membership/Person?id=f57aa35c-1898-4282-9223-d3703d9ee35c\">Alison\n                    Bailey, MD, FACC</a>; <a\n                    href=\"http://www.acc.org/Membership/Person?id=d49209b7-1a04-42c4-aed2-3a773acce82b\">Salim S.\n                    Virani, MD, FACC</a>; <a\n                    href=\"http://www.acc.org/Membership/Person?id=0e80b517-78fe-4960-9a3e-6a54fcb201f6\">Roger S.\n                    Blumenthal, MD, FACC</a></p>\n            <h5 class=\"m-y_0 font_bold\" style=\"clear: left;\">Podcast</h5>\n           <div class=\"flex flex_auto flex_row items_center p-t_0:md p-x_4 bg_secondary-5\">\n                <section class=\"font_n2 self_center social\">\n                    <ul class=\"flex items_center m_0 social-bar ul_none\">\n                        <li class=\"flex_shrink m_0\"><a class=\"bg_shade-4 font-size_down-1 block c_shade-n2 font-size_down h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0 twitter\"><i class=\"fab fa-square-x-twitter\" aria-hidden=\"true\"></i></a></li>\n                        <li class=\"flex_shrink\"><a class=\"facebook c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-facebook-square\" aria-hidden=\"true\"></i></a></li>\n                        <li class=\"flex_shrink\"><a class=\"linkedin c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-linkedin\" aria-hidden=\"true\"></i></a></li>\n                        <li class=\"flex_shrink\"><a class=\"youtube c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-youtube\" aria-hidden=\"true\"></i></a></li>\n                        <li class=\"flex_shrink\"><a class=\"google-play c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-google-play\" aria-hidden=\"true\"></i></a></li>\n                        <li class=\"flex_shrink\"><a class=\"apple-store c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0\"><i class=\"fab fa-apple\" aria-hidden=\"true\"></i></a></li>\n                    </ul>\n                </section>\n                    <div class=\"flex flex_auto self_center m-l_4\">\n                        <div id=\"print-page\" class=\"c_primary cursor_pointer flex\" onclick=\"window.print()\" ontouchstart=\"window.print()\"><span class=\"fa fa-print flex items_center m-r_2\" aria-hidden=\"true\"></span><span class=\"flex font_n2 items_center\">Print</span></div>\n                    </div>\n                    <dl id=\"font-resizer\" class=\"display_none flex:md items_baseline items_center m-y_0 p-t_1\">\n                        <dt class=\"font_n2 m-r_2\">Font Size</dt>\n                        <dd class=\"font_unset\"><span onclick=\"changeFontSize('font_unset')\" class=\"flex font_n3 m-b_n2 m-t_3 p-x_1 lh_4 cursor_pointer\">A</span></dd>\n                        <dd class=\"font-size_down\"><span onclick=\"changeFontSize('font-size_down')\" class=\"flex font_n1 m-t_3 p-x_1 lh_1 cursor_pointer\">A</span></dd>\n                        <dd class=\"font-size_up\"><span onclick=\"changeFontSize('font-size_up')\" class=\"flex font_1 m-t_2 p-x_1 lh_1 cursor_pointer\">A</span></dd>\n                    </dl>\n                </div>\n        </div>\n        <div class=\"the-text\">\n            <div>\n                <p>To improve our understanding of the basic principles in the treatment and management of patients\n                    with chronic heart disease, in this interview, <strong>Salim S. Virani, MD, PhD, FACC</strong>,\n                    and <strong>Roger S. Blumenthal, MD, FACC</strong>, discuss top takeaways from the ACC 2023\n                    Guideline for Chronic CAD. </p>\n                <h3>Related References:</h3>\n                <ol>\n                    <li>Writing Committee Members, Virani, S. S., Newby, L. K., Arnold, S. V., Bittner, V., Brewer,\n                        L. C., Demeter, S. H., Dixon, D. L., Fearon, W. F., Hess, B., Johnson, H. M., Kazi, D. S.,\n                        Kolte, D., Kumbhani, D. J., LoFaso, J., Mahtta, D., Mark, D. B., Minissian, M., Navar, A.\n                        M., Patel, A. R., … Williams, M. S. (2023). 2023 AHA/ACC/ACCP/ASPC/NLA/PCNA Guideline for\n                        the Management of Patients With Chronic Coronary Disease: A Report of the American Heart\n                        Association/American College of Cardiology Joint Committee on Clinical Practice Guidelines.\n                        Journal of the American College of Cardiology, 82(9), 833–955. <a\n                            href=\"https://doi.org/10.1016/j.jacc.2023.04.003\"\n                            target=\"_blank\">https://doi.org/10.1016/j.jacc.2023.04.003</a></li>\n                </ol>\n                <div\n                    class=\"bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light\">\n                    <audio class=\"w_100\" controls=\"\" id=\"html5_audio_jvtpc43x2e\">\n                        <source src=\"http://traffic.libsyn.com/accelaccorg/ACCEL_Lite_2.13.24_Final.mp3\"\n                            type=\"audio/mp3\">\n                        <p>Your browser doesn't support HTML5 audio. Here is a <a class=\"link\" target=\"_blank\"\n                                href=\"http://traffic.libsyn.com/accelaccorg/ACCEL_Lite_2.13.24_Final.mp3\">link to\n                                the audio</a>instead.</p>\n                    </audio>\n                    <div class=\"grid items_center justify_center\"><a href=\"/Latest-in-Cardiology/Features/Podcasts\"\n                            class=\"btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light\">Subscribe to\n                            the ACCEL Lite Podcast</a></div>\n                </div>\n            </div>\n            <p class=\"topics-list font_n1\"><b>Clinical Topics:</b><a\n                    href=\"/Clinical-Topics/Acute-Coronary-Syndromes\">Acute Coronary Syndromes, </a><a\n                    href=\"/Clinical-Topics/Dyslipidemia\">Dyslipidemia, </a><a\n                    href=\"/Clinical-Topics/Invasive-Cardiovascular-Angiography-and-Intervention\">Invasive\n                    Cardiovascular Angiography and Intervention</a></p>\n            <p class=\"keywords-list font_n1\"><b>Keywords:</b><i>ACCELLite, </i><i>Statins</i></p><br><a href=\"#\"\n                id=\"backToListings\" class=\"parent back-to-listing display_none:print\">&lt; Back to Listings</a><br>\n        </div>\n    </article>\n    <div grid-area=\"sidebar-secondary\" zone-label=\"sidebar\" class=\"columns-max_20 grid flex:md flex_column gap_4\">\n        <aside class=\"suggested-materials br_1 br_solid m-b_4 p-x_3 relative reading-typography\">\n            <h2 class=\"c_primary font_1 font_bold relative t_n4 m-b_4 text_center\"><span class=\"bg_white p-x_3\">Related\n                    Content</span></h2>\n            <ul class=\"font-size_down-1 m-t_n4 ul_none\">\n                <li class=\"m-b_4\"><a href=\"/Latest-in-Cardiology/Clinical-Trials/2023/08/23/19/37/lodestar\">Rosuvastatin\n                        vs. Atorvastatin Treatment in Patients With Coronary Artery Disease</a></li>\n                <li class=\"m-b_4\"><a\n                        href=\"/Latest-in-Cardiology/Articles/2023/09/01/01/42/new-in-clinical-documents-management-of-chronic-coronary-disease-focus-of-acc-aha-multi-society-guideline\">New\n                        in Clinical Documents | Management of Chronic Coronary Disease Focus of ACC, AHA, Multi-Society\n                        Guideline</a></li>\n                <li class=\"m-b_4\"><a\n                        href=\"/Latest-in-Cardiology/ten-points-to-remember/2023/07/17/19/06/2023-guideline-for-chronic-coronary-disease-gl-ccd\">2023\n                        Multisociety Guideline for Managing Chronic Coronary Disease: Key Perspectives</a></li>\n            </ul>\n        </aside>\n        <div class=\"br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography \">\n        <div id=\"Adslot-x\" style=\"width:300px; height:250px;\" class=\"bg_acc m_auto max-w_100\">\n        <a href=\"https://www.acc.org/\" target=\"_blank\"><img src=\"https://picsum.photos/300/250\"/></a>\n        </div>\n        <small class=\"block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase\">advertisment</small>\n        </div>\n        <aside id=\"recommended-for-you\" class=\"tabgroup br_1 br_solid m-b_4 p-x_3 relative\">\n            <h2 class=\"c_primary font_1 font_bold relative t_n4 text_center\"><span\n                    class=\"bg_white p-x_2\">Recommended Content for You</span></h2>\n            <div class=\"tab-content authenticated-nothing-selected active\">\n                <article class=\"article-recommended-tease flex font_unset\">\n                    <div class=\"main-image\"><img src=\"https://picsum.photos/53/53\"/></div>\n                    <div class=\"article-content p-l_3 font-size_down-2\">\n                        <p class=\"font-size_up-1\">Looking for content tailored to your interests?</p>\n                        <p><a href=\"/My-ACC/My-Profile#ClinicalTopics\">Add some topics</a>to receive personalized\n                            recommendations.</p>\n                    </div>\n                </article>\n            </div>\n        </aside>\n        <aside class=\"suggested-materials br_1 br_solid m-b_4 p-x_3 relative\">\n            <h2 class=\"c_primary font_1 font_bold relative t_n4 text_center\"><span class=\"bg_white p-x_2\">Similar\n                    Articles from ACC.org</span></h2>\n            <ul class=\"CoveoResultList font-size_down-1 m-t_n4 ul_none\" data-layout=\"list\" data-wait-animation=\"fade\"\n                data-enable-infinite-scroll=\"false\">\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span\n                            class=\"similar-article-date\">Feb 06, 2024</span><span>| </span><span\n                            class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a\n                            class=\"CoveoResultLink\"\n                            href=\"/latest-in-cardiology/articles/2024/02/06/14/13/accel-lite-06feb2024\">ACCEL Lite:\n                            Management of Worsening Heart Failure with Reduced Ejection Fraction</a></span>\n                    <div>&nbsp;</div>\n                </li>\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span\n                            class=\"similar-article-date\">Jan 23, 2024</span><span>| </span><span\n                            class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a\n                            class=\"CoveoResultLink\"\n                            href=\"/latest-in-cardiology/articles/2024/01/23/15/05/accel-lite-23jan2024\">ACCEL Lite: AHA\n                            Late-Breaker: SELECT – Semaglutide and CV Outcomes in Patients with Overweight or Obesity\n                            Who Do Not Have Diabetes</a></span>\n                    <div>&nbsp;</div>\n                </li>\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span\n                            class=\"similar-article-date\">Jan 16, 2024</span><span>| </span><span\n                            class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a\n                            class=\"CoveoResultLink\"\n                            href=\"/latest-in-cardiology/articles/2024/01/16/16/11/accel-lite-16jan2024\">ACCEL Lite: From\n                            JACC: Managing Patients with Moderate Aortic Stenosis</a></span>\n                    <div>&nbsp;</div>\n                </li>\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span\n                            class=\"similar-article-date\">Jan 09, 2024</span><span>| </span><span\n                            class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a\n                            class=\"CoveoResultLink\"\n                            href=\"/latest-in-cardiology/articles/2024/01/09/16/30/accel-lite-09jan2024\">ACCEL Lite: Top\n                            Takeaways from 2023: General Cardiology with Andrew Kates, MD, FACC</a></span>\n                    <div>&nbsp;</div>\n                </li>\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span\n                            class=\"similar-article-date\">Jan 03, 2024</span><span>| </span><span\n                            class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a\n                            class=\"CoveoResultLink\"\n                            href=\"/latest-in-cardiology/articles/2024/01/03/16/20/accel-lite-03jan2024\">ACCEL Lite:\n                            Pitavastatin to Prevent Cardiovascular Disease in HIV Infection</a></span>\n                    <div>&nbsp;</div>\n                </li>\n            </ul>\n        </aside>\n    </div>\n</div>\n{{> \"Component.Structures.PageLayout.demoStyles\" }}\n\nMarkupWrapperClasses: colored-zones\n\n\n\nWeight:1\n\nStyleguide Component.Structures.PageLayout.Article\n*/\n/*\nAdvanced Double Sidebar\n\nMarkUp:\n<div grid-template=\"page-layout\">\n    <main grid-area=\"content\" class=\"reading-typography\">\n        <h1 id=\"clinical-trials-research-pathway\">Clinical Trials Research Pathway</h1>\n        <p>The cardiology clinical trial research workforce is comprised of a wide spectrum of specialists and roles.\n            ACC members, including cardiologists, nurses, physician assistants and PharmDs have opportunities to develop\n            instrumental roles, including clinical research coordinator, investigator and principle investigators.</p>\n        <p>The ACC is committed to promoting clinical research in cardiovascular care. They established the Clinical\n            Trials Research Program to diversify leadership and workforce in cardiovascular clinical research. Over 150\n            learners, including almost 100 women, have enrolled since July 2022. The ACC offers career resources and\n            funding opportunities in clinical trials research.</p>\n        <h3 id=\"education\">Education</h3>\n        <ul>\n            <li><a href=\"#\">Webinar: ACC Research, Clinical Trials and Publishing Series</a></li>\n            <li><a href=\"#\">Live Education: How to Become a CV Investigator</a></li>\n            <li><a href=\"#\">Live Education: Clinical Trials Research: Upping Your Game Program</a></li>\n        </ul>\n        <h3 id=\"acc-award-opportunities\">ACC Award Opportunities</h3>\n        <ul>\n            <li><a href=\"#\">Douglas P. Zipes Distinguished Young Scientist Award</a></li>\n            <li><a href=\"#\">Young Investigator Awards at ACC.23/WCC</a></li>\n            <li><a href=\"#\">ACC/ABC Merck Research Fellowship Awards</a></li>\n            <li><a href=\"#\">ACC/ABC Bristol Myers Squibb Research Fellowship Awards</a></li>\n        </ul>\n        <h3 id=\"publications--articles\">Publications &amp; Articles</h3>\n        <ul>\n            <li><a href=\"#\">Gender Diversity in Cardiovascular Trial Research Begins at the Top (JACC)</a></li>\n            <li><a href=\"#\">Clinical Research in a Big Data, High-Tech World (Cardiology)</a></li>\n        </ul>\n        <hr>\n        <p><strong>Explore Cardiovascular Pathways:</strong><a href=\"../CardiologyCareers_Physician/\">Physician</a><code\n                class=\"language-plaintext highlighter-rouge\">|</code><a href=\"../CardiologyCareers_CVTeam/\">CV\n                Team</a><code class=\"language-plaintext highlighter-rouge\">|</code><a\n                href=\"../CardiologyCareers_ClinicalTrial/\">Clinical Trials Research</a></p>\n    </main>\n    <section grid-area=\"sidebar-primary\">\n        <nav class=\"nav-sub bg_primary c_white font_2 font_ui\">\n            <ul class=\"ul_none flex_column flex\">\n                <li class=\"nav-item font-size_up\" data-nav=\"parent\">\n                    <div class=\"bg_black-4\"><a href=\"../CardiologyCareers\"\n                            class=\"text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center\">A\n                            Career in Cardiology</a></div>\n                </li>\n                <li class=\"nav-item\" data-nav=\"child\">\n                    <div class=\"flex flex_row\">\n                        <div\n                            class=\"br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white\">\n                            <div class=\"flex_none\" aria-expanded=\"false\" data-bs-toggle=\"collapse\"\n                                data-bs-target=\".howToStart\" aria-controls=\".howToStart\"><span class=\"fa-stack\"><i\n                                        class=\"fas fa-minus fa-stack-1x\" aria-hidden=\"true\"></i><i\n                                        class=\"fas fa-minus rotate_90 a:rotation fa-stack-1x\"\n                                        aria-hidden=\"true\"></i></span></div>\n                        </div>\n                        <div class=\"flex_auto self_center\"><a href=\"../CardiologyCareers_Start/\"\n                                class=\"text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3\">How\n                                to Start</a>\n                            <nav class=\"nav-sub-child bg_white-2 font-size_down collapse howToStart show\">\n                                <ul class=\"ul_none flex_column flex\">\n                                    <li class=\"nav-item\" data-nav=\"child\">\n                                        <div class=\"flex flex_row\">\n                                            <div class=\"flex flex_column flex_none justify_start\">\n                                                <div class=\"flex_none\"><span class=\"fa-stack\"><i\n                                                            class=\"fas fa-spacer fa-stack-1x\"\n                                                            aria-hidden=\"true\"></i></span></div>\n                                            </div>\n                                            <div class=\"flex_auto self_center\"><a href=\"../CardiologyCareers_Physician/\"\n                                                    class=\"text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3\">Physician\n                                                    Pathway</a></div>\n                                        </div>\n                                    </li>\n                                    <li class=\"nav-item\" data-nav=\"child\">\n                                        <div class=\"flex flex_row\">\n                                            <div class=\"flex flex_column flex_none justify_start\">\n                                                <div class=\"flex_none\"><span class=\"fa-stack\"><i\n                                                            class=\"fas fa-spacer fa-stack-1x\"\n                                                            aria-hidden=\"true\"></i></span></div>\n                                            </div>\n                                            <div class=\"flex_auto self_center\"><a href=\"../CardiologyCareers_CVTeam/\"\n                                                    class=\"text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3\">CV\n                                                    Team Pathway</a></div>\n                                        </div>\n                                    </li>\n                                    <li class=\"nav-item\" data-nav=\"child\">\n                                        <div class=\"flex flex_row\">\n                                            <div class=\"flex flex_column flex_none justify_start\">\n                                                <div class=\"flex_none\"><span class=\"fa-stack\"><i\n                                                            class=\"fas fa-spacer fa-stack-1x\"\n                                                            aria-hidden=\"true\"></i></span></div>\n                                            </div>\n                                            <div class=\"flex_auto self_center\"><a\n                                                    href=\"../CardiologyCareers_ClinicalTrial/\"\n                                                    class=\"text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3\">Clinical\n                                                    Trial Pathway</a></div>\n                                        </div>\n                                    </li>\n                                </ul>\n                            </nav>\n                        </div>\n                    </div>\n                </li>\n                <li class=\"nav-item\" data-nav=\"child\">\n                    <div class=\"flex flex_row\">\n                        <div class=\"flex flex_column flex_none justify_start\">\n                            <div class=\"flex_none\"><span class=\"fa-stack\"><i class=\"fas fa-spacer fa-stack-1x\"\n                                        aria-hidden=\"true\"></i></span></div>\n                        </div>\n                        <div class=\"flex_auto self_center\"><a href=\"../CardiologyCareers_Development\"\n                                class=\"text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3\">Development\n                                &amp; Leadership Programs</a></div>\n                    </div>\n                </li>\n                <li class=\"nav-item\" data-nav=\"child\">\n                    <div class=\"flex flex_row\">\n                        <div\n                            class=\"br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white\">\n                            <div class=\"flex_none\" aria-expanded=\"false\" data-bs-toggle=\"collapse\"\n                                data-bs-target=\".childNavCollapse\" aria-controls=\".childNavCollapse\"><span\n                                    class=\"fa-stack\"><i class=\"fas fa-minus fa-stack-1x\" aria-hidden=\"true\"></i><i\n                                        class=\"fas fa-minus rotate_90 a:rotation fa-stack-1x\"\n                                        aria-hidden=\"true\"></i></span></div>\n                        </div>\n                        <div class=\"flex_auto self_center\"><a\n                                class=\"text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3\">Resources</a>\n                            <nav class=\"nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show\">\n                                <ul class=\"ul_none flex_column flex\">\n                                    <li class=\"nav-item\" data-nav=\"child\">\n                                        <div class=\"flex flex_row\">\n                                            <div class=\"flex flex_column flex_none justify_start\">\n                                                <div class=\"flex_none\"><span class=\"fa-stack\"><i\n                                                            class=\"fas fa-spacer fa-stack-1x\"\n                                                            aria-hidden=\"true\"></i></span></div>\n                                            </div>\n                                            <div class=\"flex_auto self_center\"><a href=\"../CardiologyCareers_Gallery/\"\n                                                    class=\"text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3\">Video\n                                                    Gallery</a></div>\n                                        </div>\n                                    </li>\n                                    <li class=\"nav-item\" data-nav=\"child\">\n                                        <div class=\"flex flex_row\">\n                                            <div class=\"flex flex_column flex_none justify_start\">\n                                                <div class=\"flex_none\"><span class=\"fa-stack\"><i\n                                                            class=\"fas fa-spacer fa-stack-1x\"\n                                                            aria-hidden=\"true\"></i></span></div>\n                                            </div>\n                                            <div class=\"flex_auto self_center\"><a\n                                                    href=\"../CardiologyCareers_PersonalStory/\"\n                                                    class=\"text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3\">Personal\n                                                    Stories</a></div>\n                                        </div>\n                                    </li>\n                                </ul>\n                            </nav>\n                        </div>\n                    </div>\n                </li>\n                <li class=\"nav-item\" data-nav=\"child\">\n                    <div class=\"flex flex_row\">\n                        <div class=\"flex flex_column flex_none justify_start\">\n                            <div class=\"flex_none\"><span class=\"fa-stack\"><i class=\"fas fa-spacer fa-stack-1x\"\n                                        aria-hidden=\"true\"></i></span></div>\n                        </div>\n                        <div class=\"flex_auto self_center\"><a href=\"../CardiologyCareers_ContactUs\"\n                                class=\"text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3\">Contact\n                                Us</a></div>\n                    </div>\n                </li>\n            </ul>\n        </nav>\n        <div class=\"br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography \">\n            <div id=\"Adslot-x\" style=\"width:300px; height:250px;\" class=\"bg_acc m_auto max-w_100\">\n            <a href=\"https://www.acc.org/\" target=\"_blank\"><img src=\"https://picsum.photos/300/250\"></a>\n            </div>\n            <small class=\"block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase\">advertisment</small>\n            </div>\n    </section>\n    <div grid-area=\"sidebar-secondary\" zone-label=\"sidebar\" class=\"columns-max_20 grid flex:md flex_column gap_4\">\n        <aside class=\"suggested-materials br_1 br_solid br_black-6 m-b_4 p-x_3 relative reading-typography\">\n            <h2 class=\"c_primary font_1 font_bold relative t_n4 m-b_4 text_center\"><span class=\"bg_white p-x_3\">Related\n                    Content</span></h2>\n            <ul class=\"font-size_down-1 m-t_n4 ul_none\">\n                <li class=\"m-b_4\"><a href=\"/Latest-in-Cardiology/Clinical-Trials/2023/08/23/19/37/lodestar\">Rosuvastatin\n                        vs. Atorvastatin Treatment in Patients With Coronary Artery Disease</a></li>\n                <li class=\"m-b_4\"><a href=\"/Latest-in-Cardiology/Articles/2023/09/01/01/42/new-in-clinical-documents-management-of-chronic-coronary-disease-focus-of-acc-aha-multi-society-guideline\">New\n                        in Clinical Documents | Management of Chronic Coronary Disease Focus of ACC, AHA, Multi-Society\n                        Guideline</a></li>\n                <li class=\"m-b_4\"><a href=\"/Latest-in-Cardiology/ten-points-to-remember/2023/07/17/19/06/2023-guideline-for-chronic-coronary-disease-gl-ccd\">2023\n                        Multisociety Guideline for Managing Chronic Coronary Disease: Key Perspectives</a></li>\n            </ul>\n        </aside>\n        <div class=\"br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography \">\n        <div id=\"Adslot-x\" style=\"width:300px; height:250px;\" class=\"bg_acc m_auto max-w_100\">\n        <a href=\"https://www.acc.org/\" target=\"_blank\"><img src=\"https://picsum.photos/300/250\"></a>\n        </div>\n        <small class=\"block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase\">advertisment</small>\n        </div>\n        <aside id=\"recommended-for-you\" class=\"tabgroup br_1 br_solid br_black-6 m-b_4 p-x_3 relative\">\n            <h2 class=\"c_primary font_1 font_bold relative t_n4 text_center\"><span class=\"bg_white p-x_2\">Recommended Content for You</span></h2>\n            <div class=\"tab-content authenticated-nothing-selected active\">\n                <article class=\"article-recommended-tease flex font_unset\">\n                    <div class=\"main-image\"><img src=\"https://picsum.photos/53/53\"></div>\n                    <div class=\"article-content p-l_3 font-size_down-2\">\n                        <p class=\"font-size_up-1\">Looking for content tailored to your interests?</p>\n                        <p><a href=\"/My-ACC/My-Profile#ClinicalTopics\">Add some topics</a>to receive personalized\n                            recommendations.</p>\n                    </div>\n                </article>\n            </div>\n        </aside>\n        <aside class=\"suggested-materials br_1 br_solid br_black-6 m-b_4 p-x_3 relative\">\n            <h2 class=\"c_primary font_1 font_bold relative t_n4 text_center\"><span class=\"bg_white p-x_2\">Similar\n                    Articles from ACC.org</span></h2>\n            <ul class=\"CoveoResultList font-size_down-1 m-t_n4 ul_none\" data-layout=\"list\" data-wait-animation=\"fade\" data-enable-infinite-scroll=\"false\">\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span class=\"similar-article-date\">Feb 06, 2024</span><span>| </span><span class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a class=\"CoveoResultLink\" href=\"/latest-in-cardiology/articles/2024/02/06/14/13/accel-lite-06feb2024\">ACCEL Lite:\n                            Management of Worsening Heart Failure with Reduced Ejection Fraction</a></span>\n                    <div>&nbsp;</div>\n                </li>\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span class=\"similar-article-date\">Jan 23, 2024</span><span>| </span><span class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a class=\"CoveoResultLink\" href=\"/latest-in-cardiology/articles/2024/01/23/15/05/accel-lite-23jan2024\">ACCEL Lite: AHA\n                            Late-Breaker: SELECT – Semaglutide and CV Outcomes in Patients with Overweight or Obesity\n                            Who Do Not Have Diabetes</a></span>\n                    <div>&nbsp;</div>\n                </li>\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span class=\"similar-article-date\">Jan 16, 2024</span><span>| </span><span class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a class=\"CoveoResultLink\" href=\"/latest-in-cardiology/articles/2024/01/16/16/11/accel-lite-16jan2024\">ACCEL Lite: From\n                            JACC: Managing Patients with Moderate Aortic Stenosis</a></span>\n                    <div>&nbsp;</div>\n                </li>\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span class=\"similar-article-date\">Jan 09, 2024</span><span>| </span><span class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a class=\"CoveoResultLink\" href=\"/latest-in-cardiology/articles/2024/01/09/16/30/accel-lite-09jan2024\">ACCEL Lite: Top\n                            Takeaways from 2023: General Cardiology with Andrew Kates, MD, FACC</a></span>\n                    <div>&nbsp;</div>\n                </li>\n                <li class=\"flex flex_column\"><span class=\"similar-article-header font_bold\"><span class=\"similar-article-date\">Jan 03, 2024</span><span>| </span><span class=\"similar-article-type\">Podcast </span></span><span class=\"similar-article-link\"><a class=\"CoveoResultLink\" href=\"/latest-in-cardiology/articles/2024/01/03/16/20/accel-lite-03jan2024\">ACCEL Lite:\n                            Pitavastatin to Prevent Cardiovascular Disease in HIV Infection</a></span>\n                    <div>&nbsp;</div>\n                </li>\n            </ul>\n        </aside>\n    </div>\n</div>\n{{> \"Component.Structures.PageLayout.demoStyles\" }}\n\nMarkupWrapperClasses: colored-zones\n\n\n\nWeight:100\n\nStyleguide Component.Structures.PageLayout.AdvancePage\n*/\n[grid-template] {\n  display: grid;\n}\n\n[grid-template=hero-image-cta] {\n  --container-padding: 0.5rem;\n  --hero-overlay-color: var(--acc);\n  --hero-overlay-opacity:.85;\n  --hero-title-overlay: hsla( var(--acc-h),var(--acc-s),var(--acc-l), var(--hero-overlay-opacity) );\n  --breadcrumb-height: 2.5rem;\n  grid-template-columns: [all-start breadcrumb-start title-start] var(--container-padding, 0) [content-start cta-start] 1fr [cta-end title-end content-end] var(--container-padding, 0) [all-end breadcrumb-end];\n  grid-template-rows: [all-start breadcrumb-start] minmax(var(--breadcrumb-height, 2.5rem), min-content) [breadcrumb-end] var(--container-padding, 0) [title-start content-start] auto [title-end] calc(var(--container-padding, 0) * 0.5) [cta-start] auto [cta-end content-end] var(--container-padding, 0) [all-end];\n}\n@media (width > 768px) {\n  [grid-template=hero-image-cta] {\n    --container-padding: 1rem;\n    grid-template-rows: [all-start breadcrumb-start] var(--breadcrumb-height, 2.5rem) [breadcrumb-end] calc(var(--container-padding, 0) * 0.5) [title-start cta-start content-start] auto [title-end cta-end content-end] var(--container-padding, 0) [all-end];\n    grid-template-columns: [all-start breadcrumb-start title-start] var(--container-padding, 0) [content-start] 1fr [title-end] var(--container-padding, 0) [cta-start] 1fr [cta-end content-end] var(--container-padding, 0) [all-end breadcrumb-end];\n  }\n}\n@media (width > 1024px) {\n  [grid-template=hero-image-cta] {\n    --container-padding: 2rem;\n    grid-template-columns: [all-start breadcrumb-start title-start] var(--container-padding, 0) [content-start] 3fr [title-end] 1fr [cta-start] 3fr [cta-end content-end] var(--container-padding, 0) [all-end breadcrumb-end];\n  }\n}\n[grid-template=hero-image-cta][template-option=micro] {\n  grid-template-columns: [all-start title-start] var(--container-padding, 0) [content-start cta-start] 1fr [cta-end title-end content-end] var(--container-padding, 0) [all-end];\n  grid-template-rows: [all-start] var(--container-padding, 0) [title-start content-start] auto [title-end] calc(var(--container-padding, 0) * 0.5) [cta-start] auto [cta-end content-end] var(--container-padding, 0) [all-end];\n}\n@media (width > 768px) {\n  [grid-template=hero-image-cta][template-option=micro] {\n    grid-template-rows: [all-start] calc(var(--container-padding, 0) * 0.5) [title-start cta-start content-start] auto [title-end cta-end content-end] calc(var(--container-padding, 0) * 0.5) [all-end];\n    grid-template-columns: [all-start title-start] var(--container-padding, 0) [content-start] 1fr [title-end] var(--container-padding, 0) [cta-start] min-content [cta-end content-end] var(--container-padding, 0) [all-end];\n  }\n}\n@media (width > 1024px) {\n  [grid-template=hero-image-cta][template-option=micro] {\n    grid-template-columns: [all-start title-start] var(--container-padding, 0) [content-start] 1fr [title-end] var(--container-padding, 0) [cta-start] min-content [cta-end content-end] var(--container-padding, 0) [all-end];\n  }\n}\n\n[grid-template=hero-image-cta] {\n  overflow: clip;\n  isolation: isolate;\n}\n[grid-template=hero-image-cta] [grid-area] {\n  z-index: 1;\n}\n[grid-template=hero-image-cta] [grid-area=background] {\n  grid-row: all;\n  grid-column: all;\n  z-index: -1;\n}\n[grid-template=hero-image-cta] [grid-area=breadcrumb] {\n  grid-row: breadcrumb;\n  grid-column: breadcrumb;\n}\n[grid-template=hero-image-cta] [grid-area=title] {\n  grid-row: title;\n  grid-column: title;\n}\n[grid-template=hero-image-cta] [grid-area=cta] {\n  grid-row: cta;\n  grid-column: cta;\n}\n\n[data-item=hero-image-breadcrumb-nav], [data-item=cta-callout] {\n  position: relative;\n  isolation: isolate;\n}\n[data-item=hero-image-breadcrumb-nav]::after, [data-item=cta-callout]::after {\n  content: \"\";\n  background-color: var(--hero-overlay-color);\n  opacity: var(--hero-overlay-opacity);\n  background-blend-mode: multiply;\n  mix-blend-mode: multiply;\n  inset: 0px;\n  position: absolute;\n  z-index: -1;\n}\n\n[data-item=hero-title] {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  padding-inline-start: 1rem;\n  overflow: clip;\n  background-color: var(--hero-title-overlay);\n  box-decoration-break: clone;\n  display: inline;\n  padding-block: 0.125em;\n  padding-inline: 0 0.25em;\n  position: relative;\n  isolation: isolate;\n  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);\n  line-height: 1.425em;\n}\n\n[data-item=hero-image-breadcrumb-nav]::after {\n  border-end-end-radius: 6px;\n}\n\n[data-item=cta-callout]::after {\n  border-radius: 6px;\n}\n\n/*\nMicroSite \n\n<div class=\"reading-typography\"><p>A MicroSite <strong>(Conversion Focused Sub-Section)</strong>, exists within a the larger website, but offers a strategic approach for encompassing a semi-independent initiative of the organization, all while retaining a robust link to the main site. While it upholds most of the branding guidelines of the main site, a MicroSite has its unique design, acting as a concentrated unit for user context.\n</p><p>The creation of a MicroSite enables businesses to effectively spotlight specific campaigns or products with a distinctive touch, cater to particular audience segments, and maintain a uniform user experience. Despite living relatively independently from the main site's structure and supplementary content, it still provides fluid navigation and integration with the primary website.\n</p><p>This arrangement presents a flexible and specialized platform for delivering customized messaging, engaging users in a personalized way, and accomplishing specific objectives that may necessitate a unique online presence.\n</p><h4>A Microsite Must</h4><ul><li>Have a user goal</li><li>Have a call to action for conversion.</li><li>Have a focused audience so the voice can be taylored to the action.</li><ul></div>\n\nStyleguide Component.MicroSite\n\n*/\n/*\nHero Image with CTA\n\n\nThe \"Hero Image with CTA\" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.\n\nMarkup:\n<div grid-template=\"hero-image-cta\" id=\"hero\" class=\"font_3:lg font_2:md font_1\">\n    <div grid-area=\"background\" class=\"col_all overflow_hidden row_all\">    \n      {{> \"Component.MicroSite.Sub.HeroImage.BackgroundImage\" modifier_class=\"\" }}\n    </div>\n    <div grid-area=\"breadcrumb\" class=\"z_1 flex flex_row justify_start\">\n        {{> \"Component.MicroSite.Sub.HeroImage.BreadcrumbNav\" modifier_class=\"font-size_down-2\" }}\n    </div>\n    <div grid-area=\"title\" class=\"relative font-size_up-2 m-y_6:lg m-y_5:md\">\n        {{> \"Component.MicroSite.Sub.PageTitleTreatment\" modifier_class=\"font-size_up-2 m_0\" }}\n    </div>\n    <div grid-area=\"cta\" class=\"relative font-size_down-1 grid justify_center items_center\">\n        {{> \"Component.MicroSite.Sub.HeroImage.CTAHighlight\" modifier_class=\"z_1 font-size_0\" }}\n    </div>\n</div>\n\nMarkupWrapperClasses: wrapper-container\n\nSubComponents:\nComponent.MicroSite.Sub.HeroImage.BackgroundImage - Hero Background Image\nComponent.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation\nComponent.MicroSite.Sub.PageTitleTreatment - Page Title Treatment\nComponent.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight\n\nWeight: 0\n\nNOTE: The Hero Image with CTA component is used to create impactful hero sections with a compelling call-to-action overlay. It combines a visually appealing hero image with a title, description, and call-to-action button.\n\n\n\nStyleguide Component.MicroSite.HeroImageWithCTA\n\n*/\n/*\nMicro Branding with CTA Button\n\n\nThe \"Hero Image with CTA\" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.\n\nMarkup:\n<div grid-template=\"hero-image-cta\" template-option=\"micro\" class=\"isolation_isolate overflow_hidden relative\"> \n  {{> \"Component.MicroSite.Sub.HeroImage.BackgroundImage\" }}\n  <div grid-area=\"title\">\n    {{> \"Component.MicroSite.Sub.PageTitleTreatmentMicro\" modifier_class=\"m_0 m-y_3 m-y_0:lg\" }}\n    </div>\n    <div grid-area=\"cta\" class=\"relative font-size_down-1 grid justify_center items_center\">\n      {{> \"Component.MicroSite.Sub.HeroImage.CTAButton\" modifier_class=\"\"}}\n  </div>\n</div>\n\nMarkupWrapperClasses: wrapper-container\n\nSubComponents:\nComponent.MicroSite.Sub.HeroImage.BackgroundImage - Background Image\nComponent.MicroSite.Sub.PageTitleTreatment - Page Title\nComponent.MicroSite.Sub.HeroImage.CTAButton - CTA Button\n\nWeight: 0\n\nNOTE: Micro Branding is used to create cohesive experiance by continuing the branding to children pages of a microiste. It combines a slice of hero image with just the single call-to-action button.\n\n\n\nStyleguide Component.MicroSite.MicroBrandingWithButtton\n\n*/\n/*\nCTA Highlight\n\nThe CTA Highlight component is used to create a highlighted call-to-action section.\n\nModifier: inverted - This modifier class is used to create an inverted version of the CTA Highlight component, which can be applied when a dark background is present.\n\nMarkup:\n<div data-item=\"cta-callout\" class=\"{{modifier_class}} c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1\">\n      <h2 data-item=\"cta-title\" class=\"font_medium m-t_0 m-b_3 font_display font-size_up-2\">Call to Action Title (CTA). You Should be Engaged</h2>\n      <p data-item=\"cta-description\" class=\"font-size_up-0 lh_3\">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>\n      {{> Component.MicroSite.Sub.HeroImage.CTAButton  modifier_class=\"\"}}\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background.\n\n\nStyleguide  Component.MicroSite.Sub.HeroImage.CTAHighlight\n\n*/\n/*\nCTA Button\n\nThe CTA Button is just a centered button for the highlighted call-to-action.\n\n\nMarkup:\n<div class=\"grid justify_center items_center {{modifier_class}}\">\n  <button class=\"br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold\">CTA ACTION LABEL</button>\n</div>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background.\n\n\nStyleguide  Component.MicroSite.Sub.HeroImage.CTAButton \n\n*/\n/*\nHero Image Breadcrumb Nav\n\nThe Hero Image Breadcrumb Nav is a sub-component used within the Hero Image with CTA component to display a breadcrumb navigation on top of the hero image.\n\nMarkup:\n<nav data-item=\"hero-image-breadcrumb-nav\" class=\"{{modifier_class}} relative isolation_isolate p-y_3 p-x_4 c_white-8\">\n\t<a href=\"#\" class=\"h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white\"><i class=\"fas fa-arrow-left\"></i> Back</a> |\n\tThe Parent of This Micro Section of the Site</a>\n</nav>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: The Hero Image Breadcrumb Nav sub-component is used to provide breadcrumb navigation on top of the hero image within the Hero Image with CTA component. It focuses on displaying the immediate parent only in the breadcrumb trail.\n\n\nStyleguide  Component.MicroSite.Sub.HeroImage.BreadcrumbNav\n\n*/\n/*\nPage Title Treatment\n\nMicroSite Page Title Treatment component is used to style and emphasize page titles.\n\nModifier: font-color - This modifier class is used to customize the font color of the page title.\n\nMarkup:\n<h1 data-item=\"hero-title\"\n  class=\"{{modifier_class}} c_white isolation_isolate relative\">\n  Hero Statement Mision of  the Page &trade;</h1>\n\n\nMarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40\n\nWeight: 0\n\nNOTE: The Page Title Treatment component is ideal for styling and emphasizing page titles. The \"font-color\" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience.\n\n\nStyleguide   Component.MicroSite.Sub.PageTitleTreatment\n\n*/\n/*\nPage Title Treatment Micro\n\nMicro MicroSite Page Title Treatment has a back button in mobile.\n\nMarkup:\n<h1 data-item=\"hero-title\"\n  class=\"{{modifier_class}} c_white isolation_isolate relative\">\n  <span class=\"display_none:lg\"><a href=\"#RootPage\" class=\"h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white\"><i class=\"fas fa-solid fa-arrow-left m-l_n3\" aria-hidden=\"true\"></i></a></span>\n  <span class=\"text display_contents\">Hero Statement Mision of  the Page&trade;<span>\n</h1>\n\n\nMarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40\n\nWeight: 0\n\nNOTE: The Page Title Treatment component is ideal for styling and emphasizing page titles. The \"font-color\" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience.\n\n\nStyleguide   Component.MicroSite.Sub.PageTitleTreatmentMicro\n\n*/\n/*\nResponsive Hero Image\n\nThe Responsive Hero Image component is used to display a responsive hero image that adapts to different screen sizes. the sizes are 1200/300, 1024/256,600/300, & 320/300\n\n\nMarkup:\n  <picture data-item=\"responsive-hero-image\" class=\"absolute bg_cover flex flex_column inset_0 {{modifier_class}}\">\n    <source srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png\"\n      media=\"(min-width: 1024px)\" class=\"display_none\">\n    <source srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png\"\n      media=\"(min-width: 768px)\" class=\"display_none\">\n    <source srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png\"\n      media=\"(min-width: 400px)\" class=\"display_none\">\n    <img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png\" alt=\"Hero Image\"\n      class=\"flex_100\">\n  </picture>\n\nMarkupWrapperClasses: columns_1 grid relative rows_1 w_100 overflow_hidden p_6\n\nWeight: 0\n\nNOTE: It utilizes the \"Lorem Picsum\" service for placeholder images. Replace all 4 images for best results.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.BackgroundImage\n\n\n*/\n/** SCSS DOC: __globalshame_framework.scss **/","/* Define the \"system\" font family */\n@font-face {\n\tfont-family: system;\n\tfont-style: normal;\n\tfont-weight: 300;\n\tsrc: local('.SFNSText-Light'), local('.HelveticaNeueDeskInterface-Light'), local('.LucidaGrandeUI'),\n\t\tlocal('Ubuntu Light'), local('Segoe UI Light'), local('Roboto-Light'), local('DroidSans'), local('Tahoma');\n}\n\n$fonts: (\n\taccent: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,serif, \"slab\"',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tdisplay: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Maven Pro\",\"Muli\",\"Open Sans\",\"system\",sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tcopy: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Muli\",\"Open Sans\",\"system\",sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tui: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n) !default;\n\n\n\nhtml {\n\t-webkit-font-smoothing: antialiased;\n\t-webkit-line-break: after-white-space;\n\t-webkit-locale: 'en';\n\t-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\tline-break: white-space;\n}\n","\n/**\n * arches - Global style system focused on utility classes\n * @version v4.1.4x\n * @link https://github.com/ACC-Style/Arches/\n */\n\n\n\n/**  Build Comment: including file /setup/__preheader.scss  **/ \n@use \"sass:math\";\n@use \"sass:color\";\n\n// Consider using https://www.purgecss.com/ to remove styles not used in the project.\n/** SCSS DOC: _preheader.scss **/\n$debug-trace: false !default;\n$name-mode: 'SHORT' !default; // $name-mode: \"SHORT\",\"LONG\",\"ALL\"\n$ms-base: 1rem !default; // needs to be in rem's\n$colors: ();\n$grays: ();\n$theme-palette: ();\n$usingFontAwesome:true;\n@import 'helpers/helpers';\n@import 'vendor/modular-scale';\n/** SCSS DOC: _utility-css.vars.scss **/\n@import 'setup/config/utility-css.vars';\n@import 'helpers/breakpoint';\n%font-awesome-pro {\n\t-webkit-font-smoothing: antialiased;\n\tdisplay: inline-block;\n\tfont-style: normal;\n\tfont-variant: normal;\n\ttext-rendering: auto;\n\tline-height: 1;\n\tfont-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro';\n\tfont-weight: 900;\n}\n\n\n\n\n/**  Build Comment: This Style Sheet was formatted to work best with the inclusion of Bootstrap ^5.1.0   **/ \n\n$active-class-name: 'active';\n\n\n/**  Build Comment: Set Active Class  **/ \n/** SCSS DOC: __brand.base.scss **/\n/**  Colors  **/\n\n@import 'setup/config/colors';\n/**  Fonts  **/\n@import 'setup/config/fonts';\n/**  Textures  **/\n@import 'setup/config/textures';\n\n/**  logos  **/\n@import 'setup/config/logo';\n\n\n\n// reading-typography\n$headline-color: inherit !default;\n$reading-min:16px;\n/** SCSS DOC: __brand.acc.scss **/\n/**  ACC Brands    *********************************/\n\n$teal: #198dae;\n$green-blue: #16a385;\n$dark-grey: #676a72;\n$alt-grey: #a3988c;\n$green: #078a2e;\n$orange: #da8210;\n$red: #dd1a1a;\n$blue: #2b58c0;\n$purple: #7742bd;\n$magenta: #c34198;\n$acc-blue: #004176;\n$white: rgb(255, 255, 255);\n$black: rgb(19, 18, 18);\n$real-black: #000;\n// Currently Un used in the design but part of bootstrap.\n$indigo: #6610f2 !default;\n$pink: #e83e8c !default;\n$yellow: #ffc107 !default;\n$cyan: #17a2b8 !default;\n$gray-100: mix($white, $black, 10%);\n$gray-200: mix($white, $black, 20%);\n$gray-300: mix($white, $black, 30%);\n$gray-400: mix($white, $black, 40%);\n$gray-500: mix($white, $black, 50%);\n$gray-600: mix($white, $black, 60%);\n$gray-700: mix($white, $black, 70%);\n$gray-800: mix($white, $black, 80%);\n$gray-900: mix($white, $black, 90%);\n$theme-palette: map-merge(\n    $theme-palette,\n    (\n        primary: $teal,\n        secondary: $dark-grey,\n        success: $green,\n        warning: $orange,\n        alert: $red,\n        //navigation: $blue,\n        accent: $green-blue,\n        info: $alt-grey,\n        highlight: $purple,\n        acc: $acc-blue,\n    )\n);\n$fonts: (\n    accent: (\n        name: 'Roboto Slab',\n        short-name:\"RS\",\n        stack: '\"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,serif, \"slab\"',\n        weight:(\n\t\t\tlight:200,\n\t\t\tregular:400,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n        ),\n    display: (\n        name: 'Maven Pro',\n        short-name:\"MP\",\n        stack: '\"Maven Pro\",\"Muli\",\"Open Sans\",Verdana,Helvetica,sans-serif',\n        weight:(\n\t\t\tlight:400,\n\t\t\tregular:450,\n\t\t\tmedium:550,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n    ),\n    copy: (\n        name: 'Open Sans',\n        short-name:\"OS\",\n        stack: '\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n        weight:(\n\t\t\tlight:300,\n\t\t\tregular:400,\n\t\t\tmedium:500,\n\t\t\tbold:675,\n\t\t\txbold:800\n\t\t)\n        ),\n    ui: (\n        name: 'Open Sans',\n        short-name:\"OS\",\n        stack: '\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n        weight:(\n\t\t\tlight:300,\n\t\t\tregular:400,\n\t\t\tmedium:500,\n\t\t\tbold:675,\n\t\t\txbold:800\n\t\t)\n    ),\n);\n// Reset Values of Utlity-css.vars.scss\n$value-to-unit: map-deep-set($value-to-unit, font-family accent, unquote(map-deep-get($fonts, accent, stack)));\n$value-to-unit: map-deep-set($value-to-unit, font-family display, unquote(map-deep-get($fonts, display, stack)));\n$value-to-unit: map-deep-set($value-to-unit, font-family copy, unquote(map-deep-get($fonts, copy, stack)));\n$value-to-unit: map-deep-set($value-to-unit, font-family ui, unquote(map-deep-get($fonts, ui, stack)));\n\n\n\n$font_display: get-css-size(font-family, display);\n$font_accent: get-css-size(font-family, accent);\n$font_ui: get-css-size(font-family, ui);\n$font_copy: get-css-size(font-family, copy);\n$font_mono: get-css-size(font-family, mono);\n$global-radius-on: false;\n$global-border-radius: 6px;\n$value-to-unit: map-deep-set($value-to-unit, 'radius' 'radius', $global-border-radius);\n$global-border-round: 12px;\n$value-to-unit: map-deep-set($value-to-unit, 'radius' 'round', $global-border-round);\n\n$basicSizeMultiplier: 1rem;\n\n$h1-font-size: map-deep-get($value-to-unit, font-size, 5);\n$h2-font-size: map-deep-get($value-to-unit, font-size, 4);\n$h3-font-size: map-deep-get($value-to-unit, font-size, 3);\n$h4-font-size: map-deep-get($value-to-unit, font-size, 2);\n$h5-font-size: map-deep-get($value-to-unit, font-size, 1);\n$h6-font-size: map-deep-get($value-to-unit, font-size, 0);\n$font-size-base: $base-font-size-rem; // Assumes the browser default, typically `16px`\n$font-size-lg: map-deep-get($value-to-unit, font-size, 2);\n$font-size-sm: map-deep-get($value-to-unit, font-size, n1);\n$headline-color: get-theme-color(primary, -1, CSSVAR);\n\n\n:root{\n    --code-color: #{get-theme-color(accent, -3,CSSVAR)};\n}\n\n/**  Build Comment: Overlay and alter for acc Branding 4.1.4x  **/ \n/** SCSS DOC:_brand.compile.scss **/\n@import 'setup/config/__root.cssvars';\n\n/**  Build Comment: Render Root Variables  **/ \n/** SCSS DOC: __var.output.scss **/\n/** This needs to run later then brand **/\n\n$margin_0: get-css-size(margin, 0);\n$margin_1: get-css-size(margin, 1);\n$margin_2: get-css-size(margin, 2);\n$margin_3: get-css-size(margin, 3);\n$margin_4: get-css-size(margin, 4);\n$margin_5: get-css-size(margin, 5);\n$margin_n1: get-css-size(margin, n1);\n$margin_n2: get-css-size(margin, n2);\n$margin_n3: get-css-size(margin, n3);\n$margin_n4: get-css-size(margin, n4);\n$margin_n5: get-css-size(margin, n5);\n$padding_0: get-css-size(padding, 0);\n$padding_1: get-css-size(padding, 1);\n$padding_2: get-css-size(padding, 2);\n$padding_3: get-css-size(padding, 3);\n$padding_4: get-css-size(padding, 4);\n$padding_5: get-css-size(padding, 5);\n$border_square: 0;\n$border_radius: get-css-size(border-radius, radius);\n$border_round: get-css-size(border-radius, round);\n$border_circle: get-css-size(border-radius, circle);\n$border-width_0: get-css-size(border-width, 0);\n$border-width_1: get-css-size(border-width, 1);\n$border-width_2: get-css-size(border-width, 2);\n$border-width_3: get-css-size(border-width, 3);\n$border-width_4: get-css-size(border-width, 4);\n$border-width_5: get-css-size(border-width, 5);\n$font_display: var(--font-family_display);\n$font_accent: var(--font-family_accent);\n$font_ui: var(--font-family_ui);\n$font_copy: var(--font-family_copy);\n$font_mono: var(--font-family_mono);\n$font_6: get-css-size(font-size, 6);\n$font_5: get-css-size(font-size, 5);\n$font_4: get-css-size(font-size, 4);\n$font_3: get-css-size(font-size, 3);\n$font_2: get-css-size(font-size, 2);\n$font_1: get-css-size(font-size, 1);\n$font_0: get-css-size(font-size, 0);\n$font_n1: get-css-size(font-size, n1);\n$font_n2: get-css-size(font-size, n2);\n$font_n3: get-css-size(font-size, n3);\n$font_n4: get-css-size(font-size, n4);\n$font_n5: get-css-size(font-size, n5);\n$font_bold: var(--font_bold);\n$font_medium: var(--font_medium);\n$font_xbold: var(--font_xbold);\n$font_light: var(--font_light);\n$font_regular: var(--font_regular);\n$line-height_0: get-css-size(line-height, 0);\n$line-height_1: get-css-size(line-height, 1);\n$line-height_2: get-css-size(line-height, 2);\n$line-height_3: get-css-size(line-height, 3);\n$line-height_4: get-css-size(line-height, 4);\n$line-height_5: get-css-size(line-height, 5);\n/** SCSS DOC: _setup.boot.scss **/\n\n/*!\n * Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\n// scss-docs-start import-stack\n// Configuration\n@import \"../../node_modules/bootstrap/scss/functions\";\n@import './setup/config/_config.boot';\n@import \"../../node_modules/bootstrap/scss/variables\";\n@import \"../../node_modules/bootstrap/scss/mixins\";\n@import \"../../node_modules/bootstrap/scss/utilities\";\n\n// Layout & components\n@import \"../../node_modules/bootstrap/scss/root\";\n@import \"../../node_modules/bootstrap/scss/reboot\";\n@import \"../../node_modules/bootstrap/scss/type\";\n@import \"../../node_modules/bootstrap/scss/images\";\n@import \"../../node_modules/bootstrap/scss/containers\";\n@import \"../../node_modules/bootstrap/scss/grid\";\n@import \"../../node_modules/bootstrap/scss/tables\";\n@import \"../../node_modules/bootstrap/scss/forms\";\n@import \"../../node_modules/bootstrap/scss/buttons\";\n@import \"../../node_modules/bootstrap/scss/transitions\";\n@import \"../../node_modules/bootstrap/scss/dropdown\";\n@import \"../../node_modules/bootstrap/scss/button-group\";\n@import \"../../node_modules/bootstrap/scss/nav\";\n@import \"../../node_modules/bootstrap/scss/navbar\";\n@import \"../../node_modules/bootstrap/scss/card\";\n@import \"../../node_modules/bootstrap/scss/accordion\";\n@import \"../../node_modules/bootstrap/scss/breadcrumb\";\n@import \"../../node_modules/bootstrap/scss/pagination\";\n@import \"../../node_modules/bootstrap/scss/badge\";\n@import \"../../node_modules/bootstrap/scss/alert\";\n@import \"../../node_modules/bootstrap/scss/progress\";\n@import \"../../node_modules/bootstrap/scss/list-group\";\n@import \"../../node_modules/bootstrap/scss/close\";\n@import \"../../node_modules/bootstrap/scss/toasts\";\n@import \"../../node_modules/bootstrap/scss/modal\";\n@import \"../../node_modules/bootstrap/scss/tooltip\";\n@import \"../../node_modules/bootstrap/scss/popover\";\n@import \"../../node_modules/bootstrap/scss/carousel\";\n@import \"../../node_modules/bootstrap/scss/spinners\";\n@import \"../../node_modules/bootstrap/scss/offcanvas\";\n\n// Helpers\n@import \"../../node_modules/bootstrap/scss/helpers\";\n\n// Utilities\n// @import \"../../node_modules/bootstrap/scss/utilities/api\";\n// scss-docs-end import-stack\n\n//  Base --\n\n@import \"recipes/__recipes.common\";\n\n @import \"recipes/boot/_boot.basic_nav\";\n@import \"recipes/boot/_boot.tabs\";\n@import \"recipes/boot/_boot.ui.tabs\";\n@import \"recipes/boot/_boot.sidebar_nav\";\n@import \"recipes/boot/_boot.toggle_icon\";\n@import \"recipes/boot/_boot.accordion\";\n@import \"recipes/acc/_acc.footer\";\n@import \"recipes/acc/_acc.navigation.page-hub\";\n@import \"recipes/acc/_acc.page-zones\";\n@import \"recipes/acc/_acc.lists\";\n@import \"recipes/acc/_acc.quotes\";\n@import \"bespoke/_bespoke.bento\";\n@import \"recipes/acc/_acc.price-table\";\n@import \"recipes/acc/_acc.mobile-app-cta\";\n@import \"recipes/acc/_acc.content-item\";\n@import \"recipes/acc/_acc.cards\";\n@import \"recipes/acc/_acc.follow-up-cta\";\n@import \"recipes/acc/_acc.page-layout\";\n@import \"recipes/acc/sitecore/__index\";\n\n.updateDecoration {\n    background-color: get-theme-color(highlight,4,CSSVAR) !important;\n}\n\n// ACC Design Alterations\n@import \"base/base\";\n\n@import \"components/interactive-extras\";\n@import \"styleguide/styleguide\";\n@import \"styleguide/__basic-html.base\";\n@import \"containers/containers\";\n\n@import 'base/table.boot';\n@import 'styleguide/__basic-html.boot';\n@import 'components/boot/_boot.buttons.override';\n@import 'components/boot/_boot.carousel.override';\n@import 'components/boot/_boot.navbar.override';\n@import 'components/boot/_boot.collapser.icon';\n@import \"components/acc/_acc.boot._navbar.override\";\n@import \"components/acc/_acc.boot._coveosearchbar.override\";\n@import \"bespoke/_bespoke.pagelayout\";\n@import \"bespoke/_bespoke.pagelayout.demo\";\n@import \"bespoke/_bespoke.microsite\";/** SCSS DOC: __globalshame_framework.scss **/","@use \"sass:map\";\n@use \"sass:selector\";\n@use \"sass:color\";\n@use \"sass:math\";\n/** SCSS DOC: _root.cssvars.scss **/\n:root {\n\t@each $color, $value in $theme-palette {\n\t\t--#{$color}-h: #{color.hue($value)};\n\t\t--#{$color}-s: #{color.saturation($value)};\n\t\t--#{$color}-l: #{color.lightness($value)};\n\t\t--#{$color}: hsl( var(--#{$color}-h),var(--#{$color}-s),var(--#{$color}-l) );\n\t}\n\t// $link-color-light:\t\t\t\t\tget-theme-color(highlight, 3) !default;\n\t// $link-color-light--hover:\t\t\tget-theme-color(highlight, 5) !default;\n\t// $link-color-light--visited:\t\t\tcolor.scale( get-theme-color(highlight, 2), $saturation: -70%) !default;\n\t// $link-color-dark:\t\t\t\t\tget-theme-color(highlight, -3) !default;\n\t// $link-color-dark--hover:\t\t\tget-theme-color(highlight, -5) !default;\n\t// $link-color-dark--visited:\t\t\tcolor.scale( get-theme-color(highlight, -2), $saturation: -70%) !default;\n\t\n\t\n\t--link-color-light-h:#{color.hue($link-color-light)};\n\t--link-color-light-s:#{color.saturation($link-color-light)};\n\t--link-color-light-l:#{color.lightness($link-color-light)};\n\t--link-color-light: hsl( var(--link-color-light-h),var(--link-color-light-s),var(--link-color-light-l) );\n\t--link-color-light--hover-h:#{color.hue($link-color-light--hover)};\n\t--link-color-light--hover-s:#{color.saturation($link-color-light--hover)};\n\t--link-color-light--hover-l:#{color.lightness($link-color-light--hover)};\n\t--link-color-light--hover: hsl( var(--link-color-light--hover-h),var(--link-color-light--hover-s),var(--link-color-light--hover-l) );\n\t--link-color-light--visited-h:#{color.hue($link-color-light--visited)};\n\t--link-color-light--visited-s:#{color.saturation($link-color-light--visited)};\n\t--link-color-light--visited-l:#{color.lightness($link-color-light--visited)};\n\t--link-color-light--visited: hsl( var(--link-color-light--visited-h),var(--link-color-light--visited-s),var(--link-color-light--visited-l) );\n\t\n\n\t--link-color-dark-h:#{color.hue($link-color-dark)};\n\t--link-color-dark-s:#{color.saturation($link-color-dark)};\n\t--link-color-dark-l:#{color.lightness($link-color-dark)};\n\t--link-color-dark: hsl( var(--link-color-dark-h),var(--link-color-dark-s),var(--link-color-dark-l) );\n\t--link-color-dark--hover-h:#{color.hue($link-color-dark--hover)};\n\t--link-color-dark--hover-s:#{color.saturation($link-color-dark--hover)};\n\t--link-color-dark--hover-l:#{color.lightness($link-color-dark--hover)};\n\t--link-color-dark--hover: hsl( var(--link-color-dark--hover-h),var(--link-color-dark--hover-s),var(--link-color-dark--hover-l) );\n\t--link-color-dark--visited-h:#{color.hue($link-color-dark--visited)};\n\t--link-color-dark--visited-s:#{color.saturation($link-color-dark--visited)};\n\t--link-color-dark--visited-l:#{color.lightness($link-color-dark--visited)};\n\t--link-color-dark--visited: hsl( var(--link-color-dark--visited-h),var(--link-color-dark--visited-s),var(--link-color-dark--visited-l) );\n\n}\n\n@if($usingFontAwesome){\n\t%font-awesome-pro {\n\t\t-webkit-font-smoothing: antialiased;\n\t\tdisplay: inline-block;\n\t\tfont-style: normal;\n\t\tfont-variant: normal;\n\t\ttext-rendering: auto;\n\t\tline-height: 1;\n\t\tfont-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro';\n\t\tfont-weight: 900;\n\t}\n}\n",":root {\n  // Note: Custom variable values only support SassScript inside `#{}`.\n\n  // Colors\n  //\n  // Generate palettes for full colors, grays, and theme colors.\n\n  @each $color, $value in $colors {\n    --#{$variable-prefix}#{$color}: #{$value};\n  }\n\n  @each $color, $value in $grays {\n    --#{$variable-prefix}gray-#{$color}: #{$value};\n  }\n\n  @each $color, $value in $theme-colors {\n    --#{$variable-prefix}#{$color}: #{$value};\n  }\n\n  @each $color, $value in $theme-colors-rgb {\n    --#{$variable-prefix}#{$color}-rgb: #{$value};\n  }\n\n  --#{$variable-prefix}white-rgb: #{to-rgb($white)};\n  --#{$variable-prefix}black-rgb: #{to-rgb($black)};\n  --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};\n  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};\n\n  // Fonts\n\n  // Note: Use `inspect` for lists so that quoted items keep the quotes.\n  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n  --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};\n  --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};\n  --#{$variable-prefix}gradient: #{$gradient};\n\n  // Root and body\n  // stylelint-disable custom-property-empty-line-before\n  // scss-docs-start root-body-variables\n  @if $font-size-root != null {\n    --#{$variable-prefix}root-font-size: #{$font-size-root};\n  }\n  --#{$variable-prefix}body-font-family: #{$font-family-base};\n  --#{$variable-prefix}body-font-size: #{$font-size-base};\n  --#{$variable-prefix}body-font-weight: #{$font-weight-base};\n  --#{$variable-prefix}body-line-height: #{$line-height-base};\n  --#{$variable-prefix}body-color: #{$body-color};\n  @if $body-text-align != null {\n    --#{$variable-prefix}body-text-align: #{$body-text-align};\n  }\n  --#{$variable-prefix}body-bg: #{$body-bg};\n  // scss-docs-end root-body-variables\n  // stylelint-enable custom-property-empty-line-before\n}\n","// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n\n// Root\n//\n// Ability to the value of the root font sizes, affecting the value of `rem`.\n// null by default, thus nothing is generated.\n\n:root {\n  @if $font-size-root != null {\n    font-size: var(--#{$variable-prefix}root-font-size);\n  }\n\n  @if $enable-smooth-scroll {\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n}\n\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Prevent adjustments of font size after orientation changes in iOS.\n// 4. Change the default tap highlight to be completely transparent in iOS.\n\n// scss-docs-start reboot-body-rules\nbody {\n  margin: 0; // 1\n  font-family: var(--#{$variable-prefix}body-font-family);\n  @include font-size(var(--#{$variable-prefix}body-font-size));\n  font-weight: var(--#{$variable-prefix}body-font-weight);\n  line-height: var(--#{$variable-prefix}body-line-height);\n  color: var(--#{$variable-prefix}body-color);\n  text-align: var(--#{$variable-prefix}body-text-align);\n  background-color: var(--#{$variable-prefix}body-bg); // 2\n  -webkit-text-size-adjust: 100%; // 3\n  -webkit-tap-highlight-color: rgba($black, 0); // 4\n}\n// scss-docs-end reboot-body-rules\n\n\n// Content grouping\n//\n// 1. Reset Firefox's gray color\n// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field\n\nhr {\n  margin: $hr-margin-y 0;\n  color: $hr-color; // 1\n  background-color: currentColor;\n  border: 0;\n  opacity: $hr-opacity;\n}\n\nhr:not([size]) {\n  height: $hr-height; // 2\n}\n\n\n// Typography\n//\n// 1. Remove top margins from headings\n//    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top\n//    margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n  margin-top: 0; // 1\n  margin-bottom: $headings-margin-bottom;\n  font-family: $headings-font-family;\n  font-style: $headings-font-style;\n  font-weight: $headings-font-weight;\n  line-height: $headings-line-height;\n  color: $headings-color;\n}\n\nh1 {\n  @extend %heading;\n  @include font-size($h1-font-size);\n}\n\nh2 {\n  @extend %heading;\n  @include font-size($h2-font-size);\n}\n\nh3 {\n  @extend %heading;\n  @include font-size($h3-font-size);\n}\n\nh4 {\n  @extend %heading;\n  @include font-size($h4-font-size);\n}\n\nh5 {\n  @extend %heading;\n  @include font-size($h5-font-size);\n}\n\nh6 {\n  @extend %heading;\n  @include font-size($h6-font-size);\n}\n\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `<p>`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n  margin-top: 0;\n  margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-bs-original-title] { // 1\n  text-decoration: underline dotted; // 2\n  cursor: help; // 3\n  text-decoration-skip-ink: none; // 4\n}\n\n\n// Address\n\naddress {\n  margin-bottom: 1rem;\n  font-style: normal;\n  line-height: inherit;\n}\n\n\n// Lists\n\nol,\nul {\n  padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n  margin-bottom: 0;\n}\n\ndt {\n  font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n  margin-bottom: .5rem;\n  margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n  margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n  font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n  @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n  padding: $mark-padding;\n  background-color: $mark-bg;\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n  position: relative;\n  @include font-size($sub-sup-font-size);\n  line-height: 0;\n  vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n  color: $link-color;\n  text-decoration: $link-decoration;\n\n  &:hover {\n    color: $link-hover-color;\n    text-decoration: $link-hover-decoration;\n  }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n  &,\n  &:hover {\n    color: inherit;\n    text-decoration: none;\n  }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n  font-family: $font-family-code;\n  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n  direction: ltr #{\"/* rtl:ignore */\"};\n  unicode-bidi: bidi-override;\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n  display: block;\n  margin-top: 0; // 1\n  margin-bottom: 1rem; // 2\n  overflow: auto; // 3\n  @include font-size($code-font-size);\n  color: $pre-color;\n\n  // Account for some code outputs that place code tags in pre tags\n  code {\n    @include font-size(inherit);\n    color: inherit;\n    word-break: normal;\n  }\n}\n\ncode {\n  @include font-size($code-font-size);\n  color: $code-color;\n  word-wrap: break-word;\n\n  // Streamline the style when inside anchors to avoid broken underline and more\n  a > & {\n    color: inherit;\n  }\n}\n\nkbd {\n  padding: $kbd-padding-y $kbd-padding-x;\n  @include font-size($kbd-font-size);\n  color: $kbd-color;\n  background-color: $kbd-bg;\n  @include border-radius($border-radius-sm);\n\n  kbd {\n    padding: 0;\n    @include font-size(1em);\n    font-weight: $nested-kbd-font-weight;\n  }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n  margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n  vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n  caption-side: bottom;\n  border-collapse: collapse;\n}\n\ncaption {\n  padding-top: $table-cell-padding-y;\n  padding-bottom: $table-cell-padding-y;\n  color: $table-caption-color;\n  text-align: left;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `<td>` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n  font-weight: $table-th-font-weight; // 1\n  text-align: inherit; // 2\n  text-align: -webkit-match-parent; // 3\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n  border-color: inherit;\n  border-style: solid;\n  border-width: 0;\n}\n\n\n// Forms\n//\n// 1. Allow labels to use `margin` for spacing.\n\nlabel {\n  display: inline-block; // 1\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n// See https://github.com/twbs/bootstrap/issues/24093\n\nbutton {\n  // stylelint-disable-next-line property-disallowed-list\n  border-radius: 0;\n}\n\n// Explicitly remove focus outline in Chromium when it shouldn't be\n// visible (e.g. as result of mouse click or touch tap). It already\n// should be doing this automatically, but seems to currently be\n// confused and applies its very visible two-tone outline anyway.\n\nbutton:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n// 1. Remove the margin in Firefox and Safari\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n  margin: 0; // 1\n  font-family: inherit;\n  @include font-size(inherit);\n  line-height: inherit;\n}\n\n// Remove the inheritance of text transform in Firefox\nbutton,\nselect {\n  text-transform: none;\n}\n// Set the cursor for non-`<button>` buttons\n//\n// Details at https://github.com/twbs/bootstrap/pull/30562\n[role=\"button\"] {\n  cursor: pointer;\n}\n\nselect {\n  // Remove the inheritance of word-wrap in Safari.\n  // See https://github.com/twbs/bootstrap/issues/24990\n  word-wrap: normal;\n\n  // Undo the opacity change from Chrome\n  &:disabled {\n    opacity: 1;\n  }\n}\n\n// Remove the dropdown arrow in Chrome from inputs built with datalists.\n// See https://stackoverflow.com/a/54997118\n\n[list]::-webkit-calendar-picker-indicator {\n  display: none;\n}\n\n// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n//    controls in Android 4.\n// 2. Correct the inability to style clickable types in iOS and Safari.\n// 3. Opinionated: add \"hand\" cursor to non-disabled button elements.\n\nbutton,\n[type=\"button\"], // 1\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button; // 2\n\n  @if $enable-button-pointers {\n    &:not(:disabled) {\n      cursor: pointer; // 3\n    }\n  }\n}\n\n// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.\n\n::-moz-focus-inner {\n  padding: 0;\n  border-style: none;\n}\n\n// 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.\n\ntextarea {\n  resize: vertical; // 1\n}\n\n// 1. Browsers set a default `min-width: min-content;` on fieldsets,\n//    unlike e.g. `<div>`s, which have `min-width: 0;` by default.\n//    So we reset that to ensure fieldsets behave more like a standard block element.\n//    See https://github.com/twbs/bootstrap/issues/12359\n//    and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements\n// 2. Reset the default outline behavior of fieldsets so they don't affect page layout.\n\nfieldset {\n  min-width: 0; // 1\n  padding: 0; // 2\n  margin: 0; // 2\n  border: 0; // 2\n}\n\n// 1. By using `float: left`, the legend will behave like a block element.\n//    This way the border of a fieldset wraps around the legend if present.\n// 2. Fix wrapping bug.\n//    See https://github.com/twbs/bootstrap/issues/29712\n\nlegend {\n  float: left; // 1\n  width: 100%;\n  padding: 0;\n  margin-bottom: $legend-margin-bottom;\n  @include font-size($legend-font-size);\n  font-weight: $legend-font-weight;\n  line-height: inherit;\n\n  + * {\n    clear: left; // 2\n  }\n}\n\n// Fix height of inputs with a type of datetime-local, date, month, week, or time\n// See https://github.com/twbs/bootstrap/issues/18842\n\n::-webkit-datetime-edit-fields-wrapper,\n::-webkit-datetime-edit-text,\n::-webkit-datetime-edit-minute,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-year-field {\n  padding: 0;\n}\n\n::-webkit-inner-spin-button {\n  height: auto;\n}\n\n// 1. Correct the outline style in Safari.\n// 2. This overrides the extra rounded corners on search inputs in iOS so that our\n//    `.form-control` class can properly style them. Note that this cannot simply\n//    be added to `.form-control` as it's not specific enough. For details, see\n//    https://github.com/twbs/bootstrap/issues/11586.\n\n[type=\"search\"] {\n  outline-offset: -2px; // 1\n  -webkit-appearance: textfield; // 2\n}\n\n// 1. A few input types should stay LTR\n// See https://rtlstyling.com/posts/rtl-styling#form-inputs\n// 2. RTL only output\n// See https://rtlcss.com/learn/usage-guide/control-directives/#raw\n\n/* rtl:raw:\n[type=\"tel\"],\n[type=\"url\"],\n[type=\"email\"],\n[type=\"number\"] {\n  direction: ltr;\n}\n*/\n\n// Remove the inner padding in Chrome and Safari on macOS.\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n// Remove padding around color pickers in webkit browsers\n\n::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n\n// Inherit font family and line height for file input buttons\n\n::file-selector-button {\n  font: inherit;\n}\n\n// 1. Change font properties to `inherit`\n// 2. Correct the inability to style clickable types in iOS and Safari.\n\n::-webkit-file-upload-button {\n  font: inherit; // 1\n  -webkit-appearance: button; // 2\n}\n\n// Correct element displays\n\noutput {\n  display: inline-block;\n}\n\n// Remove border from iframe\n\niframe {\n  border: 0;\n}\n\n// Summary\n//\n// 1. Add the correct display in all browsers\n\nsummary {\n  display: list-item; // 1\n  cursor: pointer;\n}\n\n\n// Progress\n//\n// Add the correct vertical alignment in Chrome, Firefox, and Opera.\n\nprogress {\n  vertical-align: baseline;\n}\n\n\n// Hidden attribute\n//\n// Always hide an element with the `hidden` HTML attribute.\n\n[hidden] {\n  display: none !important;\n}\n","// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated responsive values for font sizes, paddings, margins and much more\n//\n// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)\n\n// Configuration\n\n// Base value\n$rfs-base-value: 1.25rem !default;\n$rfs-unit: rem !default;\n\n@if $rfs-unit != rem and $rfs-unit != px {\n  @error \"`#{$rfs-unit}` is not a valid unit for $rfs-unit. Use `px` or `rem`.\";\n}\n\n// Breakpoint at where values start decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n@if $rfs-breakpoint-unit != px and $rfs-breakpoint-unit != em and $rfs-breakpoint-unit != rem {\n  @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n}\n\n// Resize values based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != number or $rfs-factor <= 1 {\n  @error \"`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.\";\n}\n\n// Mode. Possibilities: \"min-media-query\", \"max-media-query\"\n$rfs-mode: min-media-query !default;\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-rfs to false\n$enable-rfs: true !default;\n\n// Cache $rfs-base-value unit\n$rfs-base-value-unit: unit($rfs-base-value);\n\n@function divide($dividend, $divisor, $precision: 10) {\n  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);\n  $dividend: abs($dividend);\n  $divisor: abs($divisor);\n  @if $dividend == 0 {\n    @return 0;\n  }\n  @if $divisor == 0 {\n    @error \"Cannot divide by 0\";\n  }\n  $remainder: $dividend;\n  $result: 0;\n  $factor: 10;\n  @while ($remainder > 0 and $precision >= 0) {\n    $quotient: 0;\n    @while ($remainder >= $divisor) {\n      $remainder: $remainder - $divisor;\n      $quotient: $quotient + 1;\n    }\n    $result: $result * 10 + $quotient;\n    $factor: $factor * .1;\n    $remainder: $remainder * 10;\n    $precision: $precision - 1;\n    @if ($precision < 0 and $remainder >= $divisor * 5) {\n      $result: $result + 1;\n    }\n  }\n  $result: $result * $factor * $sign;\n  $dividend-unit: unit($dividend);\n  $divisor-unit: unit($divisor);\n  $unit-map: (\n    \"px\": 1px,\n    \"rem\": 1rem,\n    \"em\": 1em,\n    \"%\": 1%\n  );\n  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {\n    $result: $result * map-get($unit-map, $dividend-unit);\n  }\n  @return $result;\n}\n\n// Remove px-unit from $rfs-base-value for calculations\n@if $rfs-base-value-unit == px {\n  $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);\n}\n@else if $rfs-base-value-unit == rem {\n  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == px {\n  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == \"em\" {\n  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));\n}\n\n// Calculate the media query value\n$rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});\n$rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);\n$rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);\n\n// Internal mixin used to determine which media query needs to be used\n@mixin _rfs-media-query {\n  @if $rfs-two-dimensional {\n    @if $rfs-mode == max-media-query {\n      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}), (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n        @content;\n      }\n    }\n    @else {\n      @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) and (#{$rfs-mq-property-height}: #{$rfs-mq-value}) {\n        @content;\n      }\n    }\n  }\n  @else {\n    @media (#{$rfs-mq-property-width}: #{$rfs-mq-value}) {\n      @content;\n    }\n  }\n}\n\n// Internal mixin that adds disable classes to the selector if needed.\n@mixin _rfs-rule {\n  @if $rfs-class == disable and $rfs-mode == max-media-query {\n    // Adding an extra class increases specificity, which prevents the media query to override the property\n    &,\n    .disable-rfs &,\n    &.disable-rfs {\n      @content;\n    }\n  }\n  @else if $rfs-class == enable and $rfs-mode == min-media-query {\n    .enable-rfs &,\n    &.enable-rfs {\n      @content;\n    }\n  }\n  @else {\n    @content;\n  }\n}\n\n// Internal mixin that adds enable classes to the selector if needed.\n@mixin _rfs-media-query-rule {\n\n  @if $rfs-class == enable {\n    @if $rfs-mode == min-media-query {\n      @content;\n    }\n\n    @include _rfs-media-query {\n      .enable-rfs &,\n      &.enable-rfs {\n        @content;\n      }\n    }\n  }\n  @else {\n    @if $rfs-class == disable and $rfs-mode == min-media-query {\n      .disable-rfs &,\n      &.disable-rfs {\n        @content;\n      }\n    }\n    @include _rfs-media-query {\n      @content;\n    }\n  }\n}\n\n// Helper function to get the formatted non-responsive value\n@function rfs-value($values) {\n  // Convert to list\n  $values: if(type-of($values) != list, ($values,), $values);\n\n  $val: '';\n\n  // Loop over each value and calculate value\n  @each $value in $values {\n    @if $value == 0 {\n      $val: $val + ' 0';\n    }\n    @else {\n      // Cache $value unit\n      $unit: if(type-of($value) == \"number\", unit($value), false);\n\n      @if $unit == px {\n        // Convert to rem if needed\n        $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);\n      }\n      @else if $unit == rem {\n        // Convert to px if needed\n        $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);\n      }\n      @else {\n        // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n        $val: $val + ' ' + $value;\n      }\n    }\n  }\n\n  // Remove first space\n  @return unquote(str-slice($val, 2));\n}\n\n// Helper function to get the responsive value calculated by RFS\n@function rfs-fluid-value($values) {\n  // Convert to list\n  $values: if(type-of($values) != list, ($values,), $values);\n\n  $val: '';\n\n  // Loop over each value and calculate value\n  @each $value in $values {\n    @if $value == 0 {\n      $val: $val + ' 0';\n    }\n\n    @else {\n      // Cache $value unit\n      $unit: if(type-of($value) == \"number\", unit($value), false);\n\n      // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n      @if not $unit or $unit != px and $unit != rem {\n        $val: $val + ' ' + $value;\n      }\n\n      @else {\n        // Remove unit from $value for calculations\n        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));\n\n        // Only add the media query if the value is greater than the minimum value\n        @if abs($value) <= $rfs-base-value or not $enable-rfs {\n          $val: $val + ' ' +  if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);\n        }\n        @else {\n          // Calculate the minimum value\n          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);\n\n          // Calculate difference between $value and the minimum value\n          $value-diff: abs($value) - $value-min;\n\n          // Base value formatting\n          $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);\n\n          // Use negative value if needed\n          $min-width: if($value < 0, -$min-width, $min-width);\n\n          // Use `vmin` if two-dimensional is enabled\n          $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n          // Calculate the variable width between 0 and $rfs-breakpoint\n          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};\n\n          // Return the calculated value\n          $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';\n        }\n      }\n    }\n  }\n\n  // Remove first space\n  @return unquote(str-slice($val, 2));\n}\n\n// RFS mixin\n@mixin rfs($values, $property: font-size) {\n  @if $values != null {\n    $val: rfs-value($values);\n    $fluidVal: rfs-fluid-value($values);\n\n    // Do not print the media query if responsive & non-responsive values are the same\n    @if $val == $fluidVal {\n      #{$property}: $val;\n    }\n    @else {\n      @include _rfs-rule {\n        #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);\n\n        // Include safari iframe resize fix if needed\n        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);\n      }\n\n      @include _rfs-media-query-rule {\n        #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);\n      }\n    }\n  }\n}\n\n// Shorthand helper mixins\n@mixin font-size($value) {\n  @include rfs($value);\n}\n\n@mixin padding($value) {\n  @include rfs($value, padding);\n}\n\n@mixin padding-top($value) {\n  @include rfs($value, padding-top);\n}\n\n@mixin padding-right($value) {\n  @include rfs($value, padding-right);\n}\n\n@mixin padding-bottom($value) {\n  @include rfs($value, padding-bottom);\n}\n\n@mixin padding-left($value) {\n  @include rfs($value, padding-left);\n}\n\n@mixin margin($value) {\n  @include rfs($value, margin);\n}\n\n@mixin margin-top($value) {\n  @include rfs($value, margin-top);\n}\n\n@mixin margin-right($value) {\n  @include rfs($value, margin-right);\n}\n\n@mixin margin-bottom($value) {\n  @include rfs($value, margin-bottom);\n}\n\n@mixin margin-left($value) {\n  @include rfs($value, margin-left);\n}\n","// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Set the active state for this framework\n// Color system\n\n$white: #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black: #000 !default;\n\n$grays: () !default;\n\n\n$grays: map-merge(\n\t(\n\t\t'100': $gray-100,\n\t\t'200': $gray-200,\n\t\t'300': $gray-300,\n\t\t'400': $gray-400,\n\t\t'500': $gray-500,\n\t\t'600': $gray-600,\n\t\t'700': $gray-700,\n\t\t'800': $gray-800,\n\t\t'900': $gray-900,\n\t),\n\t$grays\n);\n\n$blue: #007bff !default;\n$indigo: #6610f2 !default;\n$purple: #6f42c1 !default;\n$pink: #e83e8c !default;\n$red: #dc3545 !default;\n$orange: #fd7e14 !default;\n$yellow: #ffc107 !default;\n$green: #28a745 !default;\n$teal: #20c997 !default;\n$cyan: #17a2b8 !default;\n\n$colors: () !default;\n\n\n$colors: map-merge(\n\t(\n\t\t'blue': $blue,\n\t\t'indigo': $indigo,\n\t\t'purple': $purple,\n\t\t'pink': $pink,\n\t\t'red': $red,\n\t\t'orange': $orange,\n\t\t'yellow': $yellow,\n\t\t'green': $green,\n\t\t'teal': $teal,\n\t\t'cyan': $cyan,\n\t\t'white': $white,\n\t\t'gray': $gray-600,\n\t\t'gray-dark': $gray-800,\n\t),\n\t$colors\n);\n\n$primary: map-get($theme-palette, primary);\n$secondary: map-get($theme-palette, secondary);\n$success:map-get($theme-palette, success);\n$info: map-get($theme-palette, info);\n$accent: map-get($theme-palette, accent);\n$warning: map-get($theme-palette, warning);\n$alert: map-get($theme-palette, alert);\n$light: $gray-100 !default;\n$dark: $gray-800 !default;\n\n$theme-colors: () !default;\n\n\n$theme-colors: map-merge(\n\t(\n\t\t'primary': map-get($theme-palette, primary),\n\t\t'secondary': map-get($theme-palette, secondary),\n\t\t'success': map-get($theme-palette, success),\n    'accent': map-get($theme-palette, accent),\n\t\t'info': map-get($theme-palette, info),\n\t\t'warning': map-get($theme-palette, warning),\n\t\t'alert': map-get($theme-palette, alert),\n\t),\n\t$theme-colors\n);\n\n// scss-docs-end theme-colors-map\n\n// The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n$min-contrast-ratio:   3.0 !default;\n\n// Customize the light and dark text colors for use in our color contrast function.\n$color-contrast-dark:      $black !default;\n$color-contrast-light:     $white !default;\n\n\n// fusv-disable\n$blue-100: tint-color($blue, 80%) !default;\n$blue-200: tint-color($blue, 60%) !default;\n$blue-300: tint-color($blue, 40%) !default;\n$blue-400: tint-color($blue, 20%) !default;\n$blue-500: $blue !default;\n$blue-600: shade-color($blue, 20%) !default;\n$blue-700: shade-color($blue, 40%) !default;\n$blue-800: shade-color($blue, 60%) !default;\n$blue-900: shade-color($blue, 80%) !default;\n\n$indigo-100: tint-color($indigo, 80%) !default;\n$indigo-200: tint-color($indigo, 60%) !default;\n$indigo-300: tint-color($indigo, 40%) !default;\n$indigo-400: tint-color($indigo, 20%) !default;\n$indigo-500: $indigo !default;\n$indigo-600: shade-color($indigo, 20%) !default;\n$indigo-700: shade-color($indigo, 40%) !default;\n$indigo-800: shade-color($indigo, 60%) !default;\n$indigo-900: shade-color($indigo, 80%) !default;\n\n$purple-100: tint-color($purple, 80%) !default;\n$purple-200: tint-color($purple, 60%) !default;\n$purple-300: tint-color($purple, 40%) !default;\n$purple-400: tint-color($purple, 20%) !default;\n$purple-500: $purple !default;\n$purple-600: shade-color($purple, 20%) !default;\n$purple-700: shade-color($purple, 40%) !default;\n$purple-800: shade-color($purple, 60%) !default;\n$purple-900: shade-color($purple, 80%) !default;\n\n$pink-100: tint-color($pink, 80%) !default;\n$pink-200: tint-color($pink, 60%) !default;\n$pink-300: tint-color($pink, 40%) !default;\n$pink-400: tint-color($pink, 20%) !default;\n$pink-500: $pink !default;\n$pink-600: shade-color($pink, 20%) !default;\n$pink-700: shade-color($pink, 40%) !default;\n$pink-800: shade-color($pink, 60%) !default;\n$pink-900: shade-color($pink, 80%) !default;\n\n$red-100: tint-color($red, 80%) !default;\n$red-200: tint-color($red, 60%) !default;\n$red-300: tint-color($red, 40%) !default;\n$red-400: tint-color($red, 20%) !default;\n$red-500: $red !default;\n$red-600: shade-color($red, 20%) !default;\n$red-700: shade-color($red, 40%) !default;\n$red-800: shade-color($red, 60%) !default;\n$red-900: shade-color($red, 80%) !default;\n\n$orange-100: tint-color($orange, 80%) !default;\n$orange-200: tint-color($orange, 60%) !default;\n$orange-300: tint-color($orange, 40%) !default;\n$orange-400: tint-color($orange, 20%) !default;\n$orange-500: $orange !default;\n$orange-600: shade-color($orange, 20%) !default;\n$orange-700: shade-color($orange, 40%) !default;\n$orange-800: shade-color($orange, 60%) !default;\n$orange-900: shade-color($orange, 80%) !default;\n\n$yellow-100: tint-color($yellow, 80%) !default;\n$yellow-200: tint-color($yellow, 60%) !default;\n$yellow-300: tint-color($yellow, 40%) !default;\n$yellow-400: tint-color($yellow, 20%) !default;\n$yellow-500: $yellow !default;\n$yellow-600: shade-color($yellow, 20%) !default;\n$yellow-700: shade-color($yellow, 40%) !default;\n$yellow-800: shade-color($yellow, 60%) !default;\n$yellow-900: shade-color($yellow, 80%) !default;\n\n$green-100: tint-color($green, 80%) !default;\n$green-200: tint-color($green, 60%) !default;\n$green-300: tint-color($green, 40%) !default;\n$green-400: tint-color($green, 20%) !default;\n$green-500: $green !default;\n$green-600: shade-color($green, 20%) !default;\n$green-700: shade-color($green, 40%) !default;\n$green-800: shade-color($green, 60%) !default;\n$green-900: shade-color($green, 80%) !default;\n\n$teal-100: tint-color($teal, 80%) !default;\n$teal-200: tint-color($teal, 60%) !default;\n$teal-300: tint-color($teal, 40%) !default;\n$teal-400: tint-color($teal, 20%) !default;\n$teal-500: $teal !default;\n$teal-600: shade-color($teal, 20%) !default;\n$teal-700: shade-color($teal, 40%) !default;\n$teal-800: shade-color($teal, 60%) !default;\n$teal-900: shade-color($teal, 80%) !default;\n\n$cyan-100: tint-color($cyan, 80%) !default;\n$cyan-200: tint-color($cyan, 60%) !default;\n$cyan-300: tint-color($cyan, 40%) !default;\n$cyan-400: tint-color($cyan, 20%) !default;\n$cyan-500: $cyan !default;\n$cyan-600: shade-color($cyan, 20%) !default;\n$cyan-700: shade-color($cyan, 40%) !default;\n$cyan-800: shade-color($cyan, 60%) !default;\n$cyan-900: shade-color($cyan, 80%) !default;\n// fusv-enable\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n  (\"<\", \"%3c\"),\n  (\">\", \"%3e\"),\n  (\"#\", \"%23\"),\n  (\"(\", \"%28\"),\n  (\")\", \"%29\"),\n) !default;\n\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret:                true !default;\n$enable-rounded:              true !default;\n$enable-shadows:              false !default;\n$enable-gradients:            false !default;\n$enable-transitions:          false !default;\n$enable-reduced-motion:       false !default;\n$enable-smooth-scroll:        true !default;\n$enable-grid-classes:         true !default;\n$enable-button-pointers:      true !default;\n$enable-rfs:                  false !default;\n$enable-validation-icons:     false !default;\n$enable-negative-margins:     false !default;\n$enable-deprecation-messages: false !default;\n$enable-important-utilities:  false !default;\n\n// Prefix for :root CSS variables\n\n$variable-prefix:             bs- !default;\n\n// Gradient\n//\n// The gradient which is added to components if `$enable-gradients` is `true`\n// This gradient is also added to elements with `.bg-gradient`\n// scss-docs-start variable-gradient\n$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;\n// scss-docs-end variable-gradient\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n// scss-docs-start spacer-variables-maps\n$spacer: 1rem !default;\n$spacers: (\n  0: 0,\n  1: $spacer * 0.25,\n  2: $spacer * 0.5,\n  3: $spacer,\n  4: $spacer * 2,\n  5: $spacer * 3,\n) !default;\n\n$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;\n// scss-docs-end spacer-variables-maps\n\n// Position\n//\n// Define the edge positioning anchors of the position utilities.\n\n// scss-docs-start position-map\n$position-values: (\n  0: 0,\n  50: 50%,\n  100: 100%\n) !default;\n// scss-docs-end position-map\n\n// Body\n//\n// Settings for the `<body>` element.\n\n$body-bg:                   $white;\n$body-color:                $black;\n$body-text-align:           null !default;\n\n\n\n// Links\n//\n// Style anchor elements.\n\n$link-color: map-get($theme-palette, primary);\n$link-shade-percentage:                   20% !default;\n$link-decoration: none !default;\n$link-hover-color: scale-color($link-color, $lightness: map-deep-get($value-to-unit, 'hover', 'dark'));\n$link-hover-decoration: underline !default;\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\n$emphasized-link-hover-darken-percentage: map-deep-get($value-to-unit, 'hover', 'dark') * -1;\n\n$stretched-link-pseudo-element:           after !default;\n$stretched-link-z-index:                  1 !default;\n\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom:   1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n// scss-docs-start grid-breakpoints\n$grid-breakpoints: (\n\txs: 0,\n\tsm: map-get($breakpoints, sm),\n\tmd: map-get($breakpoints, md),\n\tlg: map-get($breakpoints, lg),\n\txl: map-get($breakpoints, xl),\n) !default;\n// scss-docs-end grid-breakpoints\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n// scss-docs-start container-max-widths\n$container-max-widths: (\n  sm: 540px,\n  md: 720px,\n  lg: 960px,\n  xl: 1140px,\n  xxl: 1320px\n) !default;\n// scss-docs-end container-max-widths\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns:                12 !default;\n$grid-gutter-width:           2rem !default;\n$grid-row-columns:            6 !default;\n\n$gutters: $spacers !default;\n\n// Container padding\n\n$container-padding-x: $grid-gutter-width * 0.5 !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n// scss-docs-start border-variables\n$border-width: 1px;\n$border-widths: (\n  1:  map-deep-get($value-to-unit, 'border-width', '1'),\n  2:  map-deep-get($value-to-unit, 'border-width', '2'),\n  3:  map-deep-get($value-to-unit, 'border-width', '3'),\n  4:  map-deep-get($value-to-unit, 'border-width', '4'),\n  5:  map-deep-get($value-to-unit, 'border-width', '5')\n) !default;\n\n$border-color:                get-theme-color(secondary,5, CSSVAR) !default;\n// scss-docs-end border-variables\n\n// scss-docs-start border-radius-variables\n$border-radius:               map-deep-get($value-to-unit, 'radius', 'radius') !default;\n$border-radius-sm:            map-deep-get($value-to-unit, 'radius', 'radius')*0.5 !default;\n$border-radius-lg:            map-deep-get($value-to-unit, 'radius', 'radius')*1 !default;\n$border-radius-pill:          map-deep-get($value-to-unit, 'radius', 'round') !default;\n// scss-docs-end border-radius-variables\n\n\n\n// scss-docs-start box-shadow-variables\n$box-shadow-sm:               map-deep-get($value-to-unit, 'shadow', '1') !default;\n$box-shadow:               map-deep-get($value-to-unit, 'rich-shadow', 'overlap-light') !default;\n$box-shadow-lg:               map-deep-get($value-to-unit, 'rich-shadow', 'overlap-bold') !default;\n$box-shadow-inset:            map-deep-get($value-to-unit, 'rich-shadow', 'emboss-light') !default;\n\n\n$component-active-color:      $white !default;\n$component-active-bg:         $primary !default;\n\n// scss-docs-start caret-variables\n$caret-width:                 .3em !default;\n$caret-vertical-align:        $caret-width * .85 !default;\n$caret-spacing:               $caret-width * .85 !default;\n// scss-docs-end caret-variables\n\n$transition-base:             all .2s ease-in-out !default;\n$transition-fade:             opacity .15s linear !default;\n// scss-docs-start collapse-transition\n$transition-collapse:         height .35s ease !default;\n// scss-docs-end collapse-transition\n\n// stylelint-disable function-disallowed-list\n// scss-docs-start aspect-ratios\n$aspect-ratios: (\n  \"1x1\": 100%,\n  \"4x3\": calc(3 / 4 * 100%),\n  \"16x9\": calc(9 / 16 * 100%),\n  \"21x9\": calc(9 / 21 * 100%)\n) !default;\n// scss-docs-end aspect-ratios\n// stylelint-enable function-disallowed-list\n\n\n// stylelint-disable value-keyword-case\n$font-family-sans-serif: #{ get-css-size(font-family, copy)};\n$font-family-monospace: #{ get-css-size(font-family, mono) };\n\n// stylelint-enable value-keyword-case\n$font-family-base:            var(--#{$variable-prefix}font-sans-serif);\n$font-family-code:            var(--#{$variable-prefix}font-monospace);\n\n\n// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins\n// $font-size-base effects the font size of the body text\n$font-size-root:              null !default;\n$font-size-base:              $base-font-size-rem !default; // Assumes the browser default, typically `16px`\n\n$font-size-sm: map-deep-get($value-to-unit, font-size, n1) !default;\n$font-size-lg: map-deep-get($value-to-unit, font-size, 2) !default;\n\n$font-weight-lighter: lighter !default;\n$font-weight-light: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-bold: 700 !default;\n$font-weight-bolder: bolder !default;\n\n$font-weight-base: $font-weight-normal !default;\n\n$line-height-base:            map-deep-get($value-to-unit, line-height, 3) !default;\n$line-height-sm:             map-deep-get($value-to-unit, line-height, 2) !default;\n$line-height-lg:             map-deep-get($value-to-unit, line-height, 4) !default;\n\n$h1-font-size: map-deep-get($value-to-unit, font-size, 5) !default;\n$h2-font-size: map-deep-get($value-to-unit, font-size, 4) !default;\n$h3-font-size: map-deep-get($value-to-unit, font-size, 3) !default;\n$h4-font-size: map-deep-get($value-to-unit, font-size, 2) !default;\n$h5-font-size: map-deep-get($value-to-unit, font-size, 1) !default;\n$h6-font-size: map-deep-get($value-to-unit, font-size, 0) !default;\n\n// scss-docs-start font-sizes\n$font-sizes: (\n  1: $h1-font-size,\n  2: $h2-font-size,\n  3: $h3-font-size,\n  4: $h4-font-size,\n  5: $h5-font-size,\n  6: $h6-font-size\n) !default;\n\n$headings-margin-bottom: $spacer * 0.5 !default;\n$headings-font-family: #{map-deep-get($value-to-unit, font-family, display)};\n$headings-font-style:         null !default;\n$headings-font-weight: 300;\n$headings-line-height: map-deep-get($value-to-unit, line-height, 2);\n$headings-color: null !default;\n\n\n// scss-docs-start display-headings\n$display-font-sizes: (\n  1: map-deep-get($value-to-unit, font-size, 10),\n  2: map-deep-get($value-to-unit, font-size, 9),\n  3: map-deep-get($value-to-unit, font-size, 8),\n  4: map-deep-get($value-to-unit, font-size, 7),\n  5: map-deep-get($value-to-unit, font-size, 6),\n  6: map-deep-get($value-to-unit, font-size, 5)\n) !default;\n\n$display-font-weight: 300 !default;\n$display-line-height: $headings-line-height !default;\n\n\n// scss-docs-end display-headings\n\n// scss-docs-start type-variables\n$lead-font-size:              $font-size-base * 1.25 !default;\n$lead-font-weight:            300 !default;\n\n$small-font-size:             .875em !default;\n\n$sub-sup-font-size:           .75em !default;\n\n$text-muted:                  $gray-700 !default;\n\n$initialism-font-size:        $small-font-size !default;\n\n$blockquote-margin-y:         $spacer !default;\n$blockquote-font-size:        $font-size-base * 1.25 !default;\n$blockquote-footer-color:     $gray-600 !default;\n$blockquote-footer-font-size: $small-font-size !default;\n\n$hr-margin-y:                 $spacer !default;\n$hr-color:                    inherit !default;\n$hr-height:                   $border-width !default;\n$hr-opacity:                  .25 !default;\n\n$legend-margin-bottom:        .5rem !default;\n$legend-font-size:            1.5rem !default;\n$legend-font-weight:          null !default;\n\n$mark-padding:                .2em !default;\n\n$dt-font-weight:              $font-weight-bold !default;\n\n$nested-kbd-font-weight:      $font-weight-bold !default;\n\n$list-inline-padding:         .5rem !default;\n\n$mark-bg:                     get-theme-color(secondary,1, CSSVAR) !default;\n\n\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n// scss-docs-start table-variables\n$table-cell-padding-y:        .5rem !default;\n$table-cell-padding-x:        .5rem !default;\n$table-cell-padding-y-sm:     .25rem !default;\n$table-cell-padding-x-sm:     .25rem !default;\n\n$table-cell-vertical-align:   top !default;\n\n$table-color:                 $body-color !default;\n$table-bg:                    transparent !default;\n\n$table-th-font-weight:        null !default;\n\n$table-striped-color:         $table-color !default;\n$table-striped-bg-factor:     .05 !default;\n$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;\n\n$table-active-color:          $table-color !default;\n$table-active-bg-factor:      .1 !default;\n$table-active-bg:             rgba($black, $table-active-bg-factor) !default;\n\n$table-hover-color:           $table-color !default;\n$table-hover-bg-factor:       .075 !default;\n$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;\n\n$table-border-factor:         .1 !default;\n$table-border-width:          $border-width !default;\n$table-border-color:          $border-color !default;\n\n$table-striped-order:         odd !default;\n\n$table-group-separator-color: currentColor !default;\n\n$table-caption-color:         $text-muted !default;\n\n$table-bg-scale:              -80% !default;\n// scss-docs-end table-variables\n\n// scss-docs-start table-loop\n$table-variants: (\n  \"primary\":    shift-color($primary, $table-bg-scale),\n  \"secondary\":  shift-color($secondary, $table-bg-scale),\n  \"success\":    shift-color($success, $table-bg-scale),\n  \"accent\":       shift-color($accent, $table-bg-scale),\n  \"info\":       shift-color($info, $table-bg-scale),\n  \"warning\":    shift-color($warning, $table-bg-scale),\n  \"alert\":     shift-color($alert, $table-bg-scale),\n) !default;\n// scss-docs-end table-loop\n\n$input-bg:                              $white !default;\n$input-disabled-bg:                     $gray-900 !default;\n$input-disabled-color:                  $gray-500 !default;\n$input-disabled-border-color:           null !default;\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n$input-btn-padding-y: map-deep-get($value-to-unit, size-positive, 3); //.5rem;\n$input-btn-padding-x: map-deep-get($value-to-unit, size-positive, 4); //1rem;\n$input-btn-font-family: null !default;\n$input-btn-font-size: $font-size-base !default;\n$input-btn-line-height: $line-height-base !default;\n\n$input-btn-focus-width: 0.2rem !default;\n$input-btn-focus-color-opacity: .25 !default;\n$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;\n$input-btn-focus-blur:          0 !default;\n$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm: map-deep-get($value-to-unit, size-positive, 2); //.25rem;\n$input-btn-padding-x-sm: map-deep-get($value-to-unit, size-positive, 3); //.5rem;\n$input-btn-font-size-sm: $font-size-sm !default;\n\n\n$input-btn-padding-y-lg: map-deep-get($value-to-unit, size-positive, 3); //.5rem;\n$input-btn-padding-x-lg: map-deep-get($value-to-unit, size-positive, 4); //1rem;\n$input-btn-font-size-lg: $font-size-lg !default;\n\n$input-btn-border-width: $border-width !default;\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n// scss-docs-start btn-variables\n$btn-padding-y:               $input-btn-padding-y !default;\n$btn-padding-x:               $input-btn-padding-x !default;\n$btn-font-family:             $input-btn-font-family !default;\n$btn-font-size:               $input-btn-font-size !default;\n$btn-line-height:             $input-btn-line-height !default;\n$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping\n\n$btn-padding-y-sm:            $input-btn-padding-y-sm !default;\n$btn-padding-x-sm:            $input-btn-padding-x-sm !default;\n$btn-font-size-sm:            $input-btn-font-size-sm !default;\n\n$btn-padding-y-lg:            $input-btn-padding-y-lg !default;\n$btn-padding-x-lg:            $input-btn-padding-x-lg !default;\n$btn-font-size-lg:            $input-btn-font-size-lg !default;\n\n$btn-border-width:            $input-btn-border-width !default;\n\n$btn-font-weight:             $font-weight-normal !default;\n$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width:             $input-btn-focus-width !default;\n$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity:        .65 !default;\n$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-color:              $link-color !default;\n$btn-link-hover-color:        $link-hover-color !default;\n$btn-link-disabled-color:     $input-disabled-color;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius:           $border-radius !default;\n$btn-border-radius-sm:        $border-radius-sm !default;\n$btn-border-radius-lg:        $border-radius-lg !default;\n\n$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$btn-hover-bg-shade-amount:       15% !default;\n$btn-hover-bg-tint-amount:        15% !default;\n$btn-hover-border-shade-amount:   20% !default;\n$btn-hover-border-tint-amount:    10% !default;\n$btn-active-bg-shade-amount:      20% !default;\n$btn-active-bg-tint-amount:       20% !default;\n$btn-active-border-shade-amount:  25% !default;\n$btn-active-border-tint-amount:   10% !default;\n\n// Forms\n// Forms\n\n// scss-docs-start form-text-variables\n$form-text-margin-top:                  .25rem !default;\n$form-text-font-size:                   $small-font-size !default;\n$form-text-font-style:                  null !default;\n$form-text-font-weight:                 null !default;\n$form-text-color:                       $text-muted !default;\n// scss-docs-end form-text-variables\n\n// scss-docs-start form-label-variables\n$form-label-margin-bottom:              .5rem !default;\n$form-label-font-size:                  null !default;\n$form-label-font-style:                 null !default;\n$form-label-font-weight:                null !default;\n$form-label-color:                      null !default;\n// scss-docs-end form-label-variables\n\n// scss-docs-start form-input-variables\n$input-padding-y:                       $input-btn-padding-y !default;\n$input-padding-x:                       $input-btn-padding-x !default;\n$input-font-family:                     $input-btn-font-family !default;\n$input-font-size:                       $input-btn-font-size !default;\n$input-font-weight:                     $font-weight-base !default;\n$input-line-height:                     $input-btn-line-height !default;\n\n$input-padding-y-sm:                    $input-btn-padding-y-sm !default;\n$input-padding-x-sm:                    $input-btn-padding-x-sm !default;\n$input-font-size-sm:                    $input-btn-font-size-sm !default;\n\n$input-padding-y-lg:                    $input-btn-padding-y-lg !default;\n$input-padding-x-lg:                    $input-btn-padding-x-lg !default;\n$input-font-size-lg:                    $input-btn-font-size-lg !default;\n\n\n\n$input-color:                           $body-color !default;\n$input-border-color:                    $gray-400 !default;\n$input-border-width:                    $border-width;\n$input-box-shadow:                      $box-shadow-inset !default;\n\n$input-border-radius:                   $border-radius !default;\n$input-border-radius-sm:                $border-radius-sm !default;\n$input-border-radius-lg:                $border-radius-lg !default;\n\n$input-focus-bg:                        $input-bg !default;\n$input-focus-border-color:              tint-color($component-active-bg, 50%) !default;\n$input-focus-color:                     $input-color !default;\n$input-focus-width:                     $input-btn-focus-width !default;\n$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color:               $gray-600 !default;\n$input-plaintext-color:                 $body-color !default;\n\n$input-height-border:                   $border-width * 2 !default;\n\n$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;\n$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;\n$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * 0.5) !default;\n\n$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;\n$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;\n$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;\n\n$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n// scss-docs-end form-input-variables\n\n// scss-docs-start form-check-variables\n$form-check-input-width:                  1em !default;\n$form-check-min-height:                   $font-size-base * $line-height-base !default;\n$form-check-padding-start:                $form-check-input-width + .5em !default;\n$form-check-margin-bottom:                .125rem !default;\n$form-check-label-color:                  null !default;\n$form-check-label-cursor:                 null !default;\n$form-check-transition:                   null !default;\n\n$form-check-input-active-filter:          brightness(90%) !default;\n\n$form-check-input-bg:                     $input-bg !default;\n$form-check-input-border:                 1px solid rgba(0, 0, 0, .25) !default;\n$form-check-input-border-radius:          .25em !default;\n$form-check-radio-border-radius:          50% !default;\n$form-check-input-focus-border:           $input-focus-border-color !default;\n$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;\n\n$form-check-input-checked-color:          $component-active-color !default;\n$form-check-input-checked-bg-color:       $component-active-bg !default;\n$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;\n$form-check-input-checked-bg-image:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>\") !default;\n$form-check-radio-checked-bg-image:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>\") !default;\n\n$form-check-input-indeterminate-color:          $component-active-color !default;\n$form-check-input-indeterminate-bg-color:       $component-active-bg !default;\n$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;\n$form-check-input-indeterminate-bg-image:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>\") !default;\n\n$form-check-input-disabled-opacity:        .5 !default;\n$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;\n$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;\n\n$form-check-inline-margin-end:    1rem !default;\n// scss-docs-end form-check-variables\n\n// scss-docs-start form-switch-variables\n$form-switch-color:               rgba(0, 0, 0, .25) !default;\n$form-switch-width:               2em !default;\n$form-switch-padding-start:       $form-switch-width + .5em !default;\n$form-switch-bg-image:            url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>\") !default;\n$form-switch-border-radius:       $form-switch-width !default;\n$form-switch-transition:          background-position .15s ease-in-out !default;\n\n$form-switch-focus-color:         $input-focus-border-color !default;\n$form-switch-focus-bg-image:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>\") !default;\n\n$form-switch-checked-color:       $component-active-color !default;\n$form-switch-checked-bg-image:    url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>\") !default;\n$form-switch-checked-bg-position: right center !default;\n// scss-docs-end form-switch-variables\n\n// scss-docs-start input-group-variables\n$input-group-addon-padding-y:           $input-padding-y !default;\n$input-group-addon-padding-x:           $input-padding-x !default;\n$input-group-addon-font-weight:         $input-font-weight !default;\n$input-group-addon-color:               $input-color !default;\n$input-group-addon-bg:                  get-theme-color(secondary,4, CSSVAR);\n$input-group-addon-border-color:        $input-border-color !default;\n// scss-docs-end input-group-variables\n\n// scss-docs-start form-select-variables\n$form-select-padding-y:             $input-padding-y !default;\n$form-select-padding-x:             $input-padding-x !default;\n$form-select-font-family:           $input-font-family !default;\n$form-select-font-size:             $input-font-size !default;\n$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image\n$form-select-font-weight:           $input-font-weight !default;\n$form-select-line-height:           $input-line-height !default;\n$form-select-color:                 $input-color !default;\n$form-select-bg:                    $input-bg !default;\n$form-select-disabled-color:        $input-disabled-bg;\n$form-select-disabled-bg:           $input-disabled-color;\n$form-select-disabled-border-color: $input-disabled-border-color;\n$form-select-bg-position:           right $form-select-padding-x center !default;\n$form-select-bg-size:               16px 12px !default; // In pixels because image dimensions\n$form-select-indicator-color:       $gray-300 !default;\n$form-select-indicator:             url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>\") !default;\n\n$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;\n$form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;\n$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;\n\n$form-select-border-width:        $input-border-width !default;\n$form-select-border-color:        $input-border-color !default;\n$form-select-border-radius:       $border-radius !default;\n$form-select-box-shadow:          $box-shadow-inset !default;\n\n$form-select-focus-border-color:  $input-focus-border-color !default;\n$form-select-focus-width:         $input-focus-width !default;\n$form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color !default;\n\n$form-select-padding-y-sm:        $input-padding-y-sm !default;\n$form-select-padding-x-sm:        $input-padding-x-sm !default;\n$form-select-font-size-sm:        $input-font-size-sm !default;\n\n$form-select-padding-y-lg:        $input-padding-y-lg !default;\n$form-select-padding-x-lg:        $input-padding-x-lg !default;\n$form-select-font-size-lg:        $input-font-size-lg !default;\n// scss-docs-end form-select-variables\n\n// scss-docs-start form-range-variables\n$form-range-track-width:          100% !default;\n$form-range-track-height:         .5rem !default;\n$form-range-track-cursor:         pointer !default;\n$form-range-track-bg:             $gray-300 !default;\n$form-range-track-border-radius:  1rem !default;\n$form-range-track-box-shadow:     $box-shadow-inset !default;\n\n$form-range-thumb-width:                   1rem !default;\n$form-range-thumb-height:                  $form-range-thumb-width !default;\n$form-range-thumb-bg:                      $component-active-bg !default;\n$form-range-thumb-border:                  0 !default;\n$form-range-thumb-border-radius:           1rem !default;\n$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;\n$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;\n$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge\n$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;\n$form-range-thumb-disabled-bg:             $input-disabled-bg;\n$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n// scss-docs-end form-range-variables\n\n// scss-docs-start form-file-variables\n$form-file-button-color:          $white;\n$form-file-button-bg:             get-theme-color(primary, 0, CSSVAR);\n$form-file-button-hover-bg:       get-theme-color(primary, -2, CSSVAR);\n// scss-docs-end form-file-variables\n\n// scss-docs-start form-floating-variables\n$form-floating-height:            add(3.5rem, $input-height-border) !default;\n$form-floating-padding-x:         $input-padding-x !default;\n$form-floating-padding-y:         1rem !default;\n$form-floating-input-padding-t:   1.625rem !default;\n$form-floating-input-padding-b:   .625rem !default;\n$form-floating-label-opacity:     .65 !default;\n$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;\n$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;\n// scss-docs-end form-floating-variables\n\n// Form validation\n\n// scss-docs-start form-feedback-variables\n$form-feedback-margin-top:          $form-text-margin-top !default;\n$form-feedback-font-size:           $form-text-font-size !default;\n$form-feedback-font-style:          $form-text-font-style !default;\n$form-feedback-valid-color:         $success !default;\n$form-feedback-invalid-color:       $alert !default;\n\n$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;\n$form-feedback-icon-valid:          url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>\") !default;\n$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;\n$form-feedback-icon-invalid:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>\") !default;\n// scss-docs-end form-feedback-variables\n\n// scss-docs-start form-validation-states\n$form-validation-states: (\n  \"valid\": (\n    \"color\": $form-feedback-valid-color,\n    \"icon\": $form-feedback-icon-valid\n  ),\n  \"invalid\": (\n    \"color\": $form-feedback-invalid-color,\n    \"icon\": $form-feedback-icon-invalid\n  )\n) !default;\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown: 1000 !default;\n$zindex-sticky: 1020 !default;\n$zindex-fixed: 1030 !default;\n$zindex-modal-backdrop: 1040 !default;\n$zindex-modal: 1050 !default;\n$zindex-popover: 1060 !default;\n$zindex-tooltip: 1070 !default;\n\n// Navs\n\n// scss-docs-start nav-variables\n$nav-link-padding-y:                $padding_3 !default;\n$nav-link-padding-x:                $padding_4 !default;\n$nav-link-font-size:                null !default;\n$nav-link-font-weight:              null !default;\n$nav-link-color:                    null !default;\n$nav-link-hover-color:              null !default;\n$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;\n$nav-link-disabled-color:           $input-disabled-color;\n\n$nav-tabs-border-color:             $gray-300 !default;\n$nav-tabs-border-width:             $border-width !default;\n$nav-tabs-border-radius:            $border-radius !default;\n$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;\n$nav-tabs-link-active-color:        $gray-700 !default;\n$nav-tabs-link-active-bg:           $body-bg !default;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;\n\n$nav-pills-border-radius:           $border-radius !default;\n$nav-pills-link-active-color:       $component-active-color !default;\n$nav-pills-link-active-bg:          $component-active-bg !default;\n\n\n// Navbar\n\n// scss-docs-start navbar-variables\n$navbar-padding-y:                  $spacer * 0.5 !default;\n$navbar-padding-x:                  null !default;\n\n$navbar-nav-link-padding-x:         .5rem !default;\n\n$navbar-brand-font-size:            $font-size-lg !default;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;\n$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * 0.5 !default;\n$navbar-brand-margin-end:           1rem !default;\n\n$navbar-toggler-padding-y:          .25rem !default;\n$navbar-toggler-padding-x:          .75rem !default;\n$navbar-toggler-font-size:          $font-size-lg !default;\n$navbar-toggler-border-radius:      $btn-border-radius !default;\n$navbar-toggler-focus-width:        $btn-focus-width !default;\n$navbar-toggler-transition:         box-shadow .15s ease-in-out !default;\n// scss-docs-end navbar-variables\n\n// scss-docs-start navbar-theme-variables\n$navbar-dark-color:                 rgba($white, 1) !default;\n$navbar-dark-hover-color:           get-theme-color(acc,0, CSSVAR) !default;\n$navbar-dark-active-color:          $white !default;\n$navbar-dark-disabled-color:        rgba($white, .25) !default;\n$navbar-dark-toggler-icon-bg:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-dark-toggler-border-color:  rgba($white, .1) !default;\n\n$navbar-light-color:                rgba($black, .55) !default;\n$navbar-light-hover-color:          rgba($black, .7) !default;\n$navbar-light-active-color:         rgba($black, .9) !default;\n$navbar-light-disabled-color:       rgba($black, .3) !default;\n$navbar-light-toggler-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-light-toggler-border-color: rgba($black, .1) !default;\n\n$navbar-light-brand-color:                $navbar-light-active-color !default;\n$navbar-light-brand-hover-color:          $navbar-light-active-color !default;\n$navbar-dark-brand-color:                 $navbar-dark-active-color !default;\n$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;\n// scss-docs-end navbar-theme-variables\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n// scss-docs-start dropdown-variables\n$dropdown-min-width:                10rem !default;\n$dropdown-padding-x:                0 !default;\n$dropdown-padding-y:                .5rem !default;\n$dropdown-spacer:                   .125rem !default;\n$dropdown-font-size:                $font-size-base !default;\n$dropdown-color:                    $body-color !default;\n$dropdown-bg:                       $white !default;\n$dropdown-border-color:             rgba($black, .15) !default;\n$dropdown-border-radius:            $border-radius !default;\n$dropdown-border-width:             $border-width !default;\n$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;\n$dropdown-divider-bg:               $dropdown-border-color !default;\n$dropdown-divider-margin-y:         $spacer * 0.5 !default;\n$dropdown-box-shadow:               $box-shadow !default;\n\n$dropdown-link-color:               $gray-900 !default;\n$dropdown-link-hover-color:         shade-color($gray-900, 10%) !default;\n$dropdown-link-hover-bg:            get-theme-color(accent, -2, CSSVAR);\n\n$dropdown-link-active-color:        $component-active-color !default;\n$dropdown-link-active-bg:           $component-active-bg !default;\n\n$dropdown-link-disabled-color:      $input-disabled-color;\n\n$dropdown-item-padding-y:           $spacer * 0.25 !default;\n$dropdown-item-padding-x:           $spacer !default;\n\n$dropdown-header-color:             $gray-600 !default;\n$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;\n// scss-docs-end dropdown-variables\n\n// scss-docs-start dropdown-dark-variables\n$dropdown-dark-color:               $gray-300 !default;\n$dropdown-dark-bg:                  $gray-800 !default;\n$dropdown-dark-border-color:        $dropdown-border-color !default;\n$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;\n$dropdown-dark-box-shadow:          null !default;\n$dropdown-dark-link-color:          $dropdown-dark-color !default;\n$dropdown-dark-link-hover-color:    $white !default;\n$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;\n$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;\n$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;\n$dropdown-dark-link-disabled-color: $gray-300 !default;\n$dropdown-dark-header-color:        $gray-500 !default;\n// scss-docs-end dropdown-dark-variables\n\n\n// Pagination\n\n// scss-docs-start pagination-variables\n$pagination-padding-y:              .375rem !default;\n$pagination-padding-x:              .75rem !default;\n$pagination-padding-y-sm:           .25rem !default;\n$pagination-padding-x-sm:           .5rem !default;\n$pagination-padding-y-lg:           .75rem !default;\n$pagination-padding-x-lg:           1.5rem !default;\n\n$pagination-color:                  $link-color !default;\n$pagination-bg:                     $white !default;\n$pagination-border-width:           $border-width !default;\n$pagination-border-radius:          $border-radius !default;\n$pagination-margin-start:           -$pagination-border-width !default;\n$pagination-border-color:           $gray-300 !default;\n\n$pagination-focus-color:            $link-hover-color !default;\n$pagination-focus-bg:               $gray-200 !default;\n$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;\n$pagination-focus-outline:          0 !default;\n\n$pagination-hover-color:            $link-hover-color !default;\n$pagination-hover-bg:               $gray-200 !default;\n$pagination-hover-border-color:     $gray-300 !default;\n\n$pagination-active-color:           $component-active-color !default;\n$pagination-active-bg:              $component-active-bg !default;\n$pagination-active-border-color:    $pagination-active-bg !default;\n\n$pagination-disabled-color:         $input-disabled-color;\n$pagination-disabled-bg:            $input-disabled-bg;\n$pagination-disabled-border-color:  $gray-300 !default;\n\n$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$pagination-border-radius-sm:       $border-radius-sm !default;\n$pagination-border-radius-lg:       $border-radius-lg !default;\n// scss-docs-end pagination-variables\n\n\n\n// Cards\n\n// scss-docs-start card-variables\n$card-spacer-y:                     $spacer !default;\n$card-spacer-x:                     $spacer !default;\n$card-title-spacer-y:               $spacer * 0.5 !default;\n$card-border-width:                 $border-width !default;\n$card-border-radius:                $border-radius !default;\n$card-border-color:                 rgba($black, .125) !default;\n$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;\n$card-cap-padding-y:                $card-spacer-y * 0.5 !default;\n$card-cap-padding-x:                $card-spacer-x !default;\n$card-cap-bg:                       rgba($black, .03) !default;\n$card-cap-color:                    null !default;\n$card-height:                       null !default;\n$card-color:                        null !default;\n$card-bg:                           $white !default;\n$card-img-overlay-padding:          $spacer !default;\n$card-group-margin:                 $grid-gutter-width * 0.5 !default;\n// scss-docs-end card-variables\n\n\n// Accordion\n\n// scss-docs-start accordion-variables\n$accordion-padding-y:                     1rem !default;\n$accordion-padding-x:                     1.25rem !default;\n$accordion-color:                         $body-color !default;\n$accordion-bg:                            $body-bg !default;\n$accordion-border-width:                  $border-width !default;\n$accordion-border-color:                  rgba($black, .125) !default;\n$accordion-border-radius:                 $border-radius !default;\n$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;\n\n$accordion-body-padding-y:                $accordion-padding-y !default;\n$accordion-body-padding-x:                $accordion-padding-x !default;\n\n$accordion-button-padding-y:              $accordion-padding-y !default;\n$accordion-button-padding-x:              $accordion-padding-x !default;\n$accordion-button-color:                  $accordion-color !default;\n$accordion-button-bg:                     $accordion-bg !default;\n$accordion-transition:                    $btn-transition, border-radius .15s ease !default;\n$accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;\n$accordion-button-active-color:           shade-color($primary, 10%) !default;\n\n$accordion-button-focus-border-color:     $input-focus-border-color !default;\n$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;\n\n$accordion-icon-width:                    1.25rem !default;\n$accordion-icon-color:                    $accordion-color !default;\n$accordion-icon-active-color:             $accordion-button-active-color !default;\n$accordion-icon-transition:               transform .2s ease-in-out !default;\n$accordion-icon-transform:                rotate(180deg) !default;\n\n$accordion-button-icon:         url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>\") !default;\n$accordion-button-active-icon:  url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>\") !default;\n// scss-docs-end accordion-variables\n\n// Tooltips\n\n// scss-docs-start tooltip-variables\n$tooltip-font-size:                 $font-size-sm !default;\n$tooltip-max-width:                 200px !default;\n$tooltip-color:                     $white !default;\n$tooltip-bg:                        $black !default;\n$tooltip-border-radius:             $border-radius !default;\n$tooltip-opacity:                   .9 !default;\n$tooltip-padding-y:                 $spacer * 0.25 !default;\n$tooltip-padding-x:                 $spacer * 0.5 !default;\n$tooltip-margin:                    0 !default;\n\n$tooltip-arrow-width:               .8rem !default;\n$tooltip-arrow-height:              .4rem !default;\n$tooltip-arrow-color:               $tooltip-bg !default;\n// scss-docs-end tooltip-variables\n\n// Form tooltips must come after regular tooltips\n// scss-docs-start tooltip-feedback-variables\n$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;\n$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;\n$form-feedback-tooltip-font-size:     $tooltip-font-size !default;\n$form-feedback-tooltip-line-height:   null !default;\n$form-feedback-tooltip-opacity:       $tooltip-opacity !default;\n$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;\n// scss-docs-start tooltip-feedback-variables\n\n// Popovers\n\n// scss-docs-start popover-variables\n$popover-font-size:                 $font-size-sm !default;\n$popover-bg:                        $white !default;\n$popover-max-width:                 276px !default;\n$popover-border-width:              $border-width !default;\n$popover-border-color:              rgba($black, .2) !default;\n$popover-border-radius:             $border-radius-lg !default;\n$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;\n$popover-box-shadow:                $box-shadow !default;\n\n$popover-header-bg:                 shade-color($popover-bg, 6%) !default;\n$popover-header-color:              $headings-color !default;\n$popover-header-padding-y:          .5rem !default;\n$popover-header-padding-x:          $spacer !default;\n\n$popover-body-color:                $body-color !default;\n$popover-body-padding-y:            $spacer !default;\n$popover-body-padding-x:            $spacer !default;\n\n$popover-arrow-width:               1rem !default;\n$popover-arrow-height:              .5rem !default;\n$popover-arrow-color:               $popover-bg !default;\n\n$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;\n// scss-docs-end popover-variables\n\n\n// Toasts\n\n// scss-docs-start toast-variables\n$toast-max-width:                   350px !default;\n$toast-padding-x:                   .75rem !default;\n$toast-padding-y:                   .5rem !default;\n$toast-font-size:                   .875rem !default;\n$toast-color:                       null !default;\n$toast-background-color:            rgba($white, .85) !default;\n$toast-border-width:                1px !default;\n$toast-border-color:                rgba(0, 0, 0, .1) !default;\n$toast-border-radius:               $border-radius !default;\n$toast-box-shadow:                  $box-shadow !default;\n$toast-spacing:                     $container-padding-x !default;\n\n$toast-header-color:                $gray-600 !default;\n$toast-header-background-color:     rgba($white, .85) !default;\n$toast-header-border-color:         rgba(0, 0, 0, .05) !default;\n// scss-docs-end toast-variables\n\n\n// Badges\n\n// scss-docs-start badge-variables\n$badge-font-size:                   .75em !default;\n$badge-font-weight:                 $font-weight-bold !default;\n$badge-color:                       $white !default;\n$badge-padding-y:                   .35em !default;\n$badge-padding-x:                   .65em !default;\n$badge-border-radius:               $border-radius !default;\n// scss-docs-end badge-variables\n\n\n// Modals\n\n// scss-docs-start modal-variables\n$modal-inner-padding:               $spacer !default;\n\n$modal-footer-margin-between:       .5rem !default;\n\n$modal-dialog-margin:               .5rem !default;\n$modal-dialog-margin-y-sm-up:       1.75rem !default;\n\n$modal-title-line-height:           $line-height-base !default;\n\n$modal-content-color:               null !default;\n$modal-content-bg:                  $white !default;\n$modal-content-border-color:        rgba($black, .2) !default;\n$modal-content-border-width:        $border-width !default;\n$modal-content-border-radius:       $border-radius-lg !default;\n$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;\n$modal-content-box-shadow-xs:       $box-shadow-sm !default;\n$modal-content-box-shadow-sm-up:    $box-shadow !default;\n\n$modal-backdrop-bg:                 $black !default;\n$modal-backdrop-opacity:            .5 !default;\n$modal-header-border-color:         $border-color !default;\n$modal-footer-border-color:         $modal-header-border-color !default;\n$modal-header-border-width:         $modal-content-border-width !default;\n$modal-footer-border-width:         $modal-header-border-width !default;\n$modal-header-padding-y:            $modal-inner-padding !default;\n$modal-header-padding-x:            $modal-inner-padding !default;\n$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\n\n$modal-sm:                          300px !default;\n$modal-md:                          500px !default;\n$modal-lg:                          800px !default;\n$modal-xl:                          1140px !default;\n\n$modal-fade-transform:              translate(0, -50px) !default;\n$modal-show-transform:              none !default;\n$modal-transition:                  transform .3s ease-out !default;\n$modal-scale-transform:             scale(1.02) !default;\n// scss-docs-end modal-variables\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n// scss-docs-start alert-variables\n$alert-padding-y:               $spacer !default;\n$alert-padding-x:               $spacer !default;\n$alert-margin-bottom:           1rem !default;\n$alert-border-radius:           $border-radius !default;\n$alert-link-font-weight:        $font-weight-bold !default;\n$alert-border-width:            $border-width !default;\n$alert-bg-scale:                -80% !default;\n$alert-border-scale:            -70% !default;\n$alert-color-scale:             40% !default;\n$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side\n// scss-docs-end alert-variables\n\n\n// Progress bars\n\n// scss-docs-start progress-variables\n$progress-height:                   1rem !default;\n$progress-font-size:                $font-size-base * .75 !default;\n$progress-bg:                       $gray-200 !default;\n$progress-border-radius:            $border-radius !default;\n$progress-box-shadow:               $box-shadow-inset !default;\n$progress-bar-color:                $white !default;\n$progress-bar-bg:                   $primary !default;\n$progress-bar-animation-timing:     1s linear infinite !default;\n$progress-bar-transition:           width .6s ease !default;\n// scss-docs-end progress-variables\n\n\n// List group\n\n// scss-docs-start list-group-variables\n$list-group-color:                  get-theme-color(primary,-4, CSSVAR);\n$list-group-bg:                     $white !default;\n$list-group-border-color:           rgba($black, .125) !default;\n$list-group-border-width:           $border-width !default;\n$list-group-border-radius:          $border-radius !default;\n\n$list-group-item-padding-y:         $spacer * 0.5 !default;\n$list-group-item-padding-x:         $spacer !default;\n$list-group-item-bg-scale:          -80% !default;\n$list-group-item-color-scale:       80% !default;\n\n$list-group-hover-bg:               $gray-100 !default;\n$list-group-active-color:           $component-active-color !default;\n$list-group-active-bg:              $component-active-bg !default;\n$list-group-active-border-color:    $list-group-active-bg !default;\n\n$list-group-disabled-color:         $input-disabled-color;\n$list-group-disabled-bg:            $input-disabled-bg;\n\n$list-group-action-color:           $gray-700 !default;\n$list-group-action-hover-color:     $list-group-action-color !default;\n\n$list-group-action-active-color:    $body-color !default;\n$list-group-action-active-bg:       $gray-200 !default;\n// scss-docs-end list-group-variables\n\n\n// Image thumbnails\n\n// scss-docs-start thumbnail-variables\n$thumbnail-padding:                 .25rem !default;\n$thumbnail-bg:                      $body-bg !default;\n$thumbnail-border-width:            $border-width !default;\n$thumbnail-border-color:            $gray-300 !default;\n$thumbnail-border-radius:           $border-radius !default;\n$thumbnail-box-shadow:              $box-shadow-sm !default;\n// scss-docs-end thumbnail-variables\n\n\n// Figures\n\n// scss-docs-start figure-variables\n$figure-caption-font-size:          $small-font-size !default;\n$figure-caption-color:              $gray-600 !default;\n// scss-docs-end figure-variables\n\n\n// Breadcrumbs\n\n// scss-docs-start breadcrumb-variables\n$breadcrumb-font-size:              null !default;\n$breadcrumb-padding-y:              0 !default;\n$breadcrumb-padding-x:              0 !default;\n$breadcrumb-item-padding-x:         .5rem !default;\n$breadcrumb-margin-bottom:          1rem !default;\n$breadcrumb-bg:                     null !default;\n$breadcrumb-divider-color:          $gray-600 !default;\n$breadcrumb-active-color:           $gray-600 !default;\n$breadcrumb-divider:                quote(\"/\") !default;\n$breadcrumb-divider-flipped:        $breadcrumb-divider !default;\n$breadcrumb-border-radius:          null !default;\n// scss-docs-end breadcrumb-variables\n\n// Carousel\n\n// scss-docs-start carousel-variables\n$carousel-control-color:             $white !default;\n$carousel-control-width:             15% !default;\n$carousel-control-opacity:           .5 !default;\n$carousel-control-hover-opacity:     .9 !default;\n$carousel-control-transition:        opacity .15s ease !default;\n\n$carousel-indicator-width:           30px !default;\n$carousel-indicator-height:          3px !default;\n$carousel-indicator-hit-area-height: 10px !default;\n$carousel-indicator-spacer:          3px !default;\n$carousel-indicator-opacity:         .5 !default;\n$carousel-indicator-active-bg:       $white !default;\n$carousel-indicator-active-opacity:  1 !default;\n$carousel-indicator-transition:      opacity .6s ease !default;\n\n$carousel-caption-width:             70% !default;\n$carousel-caption-color:             $white !default;\n$carousel-caption-padding-y:         1.25rem !default;\n$carousel-caption-spacer:            1.25rem !default;\n\n$carousel-control-icon-width:        2rem !default;\n\n$carousel-control-prev-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>\") !default;\n$carousel-control-next-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>\") !default;\n\n$carousel-transition-duration:       .6s !default;\n$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n$carousel-dark-indicator-active-bg:  $black !default;\n$carousel-dark-caption-color:        $black !default;\n$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;\n// scss-docs-end carousel-variables\n\n\n// Spinners\n\n// scss-docs-start spinner-variables\n$spinner-width:           2rem !default;\n$spinner-height:          $spinner-width !default;\n$spinner-border-width:    .25em !default;\n$spinner-animation-speed: .75s !default;\n\n$spinner-width-sm:        1rem !default;\n$spinner-height-sm:       $spinner-width-sm !default;\n$spinner-border-width-sm: .2em !default;\n// scss-docs-end spinner-variables\n\n\n// Close\n\n// scss-docs-start close-variables\n$btn-close-width:            1em !default;\n$btn-close-height:           $btn-close-width !default;\n$btn-close-padding-x:        .25em !default;\n$btn-close-padding-y:        $btn-close-padding-x !default;\n$btn-close-color:            $black !default;\n$btn-close-bg:               url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>\") !default;\n$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;\n$btn-close-opacity:          .5 !default;\n$btn-close-hover-opacity:    .75 !default;\n$btn-close-focus-opacity:    1 !default;\n$btn-close-disabled-opacity: .25 !default;\n$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;\n// scss-docs-end close-variables\n\n\n// Offcanvas\n\n// scss-docs-start offcanvas-variables\n$offcanvas-padding-y:               $modal-inner-padding !default;\n$offcanvas-padding-x:               $modal-inner-padding !default;\n$offcanvas-horizontal-width:        400px !default;\n$offcanvas-vertical-height:         30vh !default;\n$offcanvas-transition-duration:     .3s !default;\n$offcanvas-border-color:            $modal-content-border-color !default;\n$offcanvas-border-width:            $modal-content-border-width !default;\n$offcanvas-title-line-height:       $modal-title-line-height !default;\n$offcanvas-bg-color:                $modal-content-bg !default;\n$offcanvas-color:                   $modal-content-color !default;\n$offcanvas-body-backdrop-color:     rgba($modal-backdrop-bg, $modal-backdrop-opacity) !default;\n$offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;\n// scss-docs-end offcanvas-variables\n\n// Code\n\n$code-font-size:                    $small-font-size !default;\n$code-color:                        $pink !default;\n\n$kbd-padding-y:                     .2rem !default;\n$kbd-padding-x:                     .4rem !default;\n$kbd-font-size:                     $code-font-size !default;\n$kbd-color:                         $white !default;\n$kbd-bg:                            $gray-900 !default;\n\n$pre-color:                         null !default;\n","@use \"sass:map\";\n@use \"sass:selector\";\n@use \"sass:color\";\n@use \"sass:math\";\n\n/** SCSS DOC: _colors.scss **/\n\n$acc-blue: #004176 !default;\n$teal: #198dae !default;\n$green-blue: #24ccae !default;\n$dark-grey: #676a72 !default;\n$alt-grey: #a3988c !default;\n$green: #06a022 !default;\n$orange: #da8210 !default;\n$red: #dd1a1a !default;\n$blue: #2b58c0 !default;\n$purple: #976ad2 !default;\n$magenta: #c34198 !default;\n$white: rgb(251, 247, 247) !default;\n$black: rgb(19, 18, 18) !default;\n// Currently Un used in the design but part of bootstrap.\n$indigo: #6610f2 !default;\n$pink: #e83e8c !default;\n$yellow: #ffc107 !default;\n$cyan: #17a2b8 !default;\n$gray-100: mix($white, $black, 10%) !default;\n$gray-200: mix($white, $black, 20%) !default;\n$gray-300: mix($white, $black, 30%) !default;\n$gray-400: mix($white, $black, 40%) !default;\n$gray-500: mix($white, $black, 50%) !default;\n$gray-600: mix($white, $black, 60%) !default;\n$gray-700: mix($white, $black, 70%) !default;\n$gray-800: mix($white, $black, 80%) !default;\n$gray-900: mix($white, $black, 90%) !default;\n$grays: () !default;\n$grays: map-merge(\n\t(\n\t\t\"100\": $gray-100,\n\t\t\"200\": $gray-200,\n\t\t\"300\": $gray-300,\n\t\t\"400\": $gray-400,\n\t\t\"500\": $gray-500,\n\t\t\"600\": $gray-600,\n\t\t\"700\": $gray-700,\n\t\t\"800\": $gray-800,\n\t\t\"900\": $gray-900,\n\t),\n\t$grays\n);\n$colors: () !default;\n$colors: map-merge(\n\t(\n\t\t\"blue\": $blue,\n\t\t\"indigo\": $indigo,\n\t\t\"purple\": $purple,\n\t\t\"pink\": $pink,\n\t\t\"red\": $red,\n\t\t\"orange\": $orange,\n\t\t\"yellow\": $yellow,\n\t\t\"green\": $green,\n\t\t\"teal\": $teal,\n\t\t\"cyan\": $cyan,\n\t\t\"white\": $white,\n\t\t\"gray\": $gray-600,\n\t\t\"gray-dark\": $gray-800,\n\t),\n\t$colors\n);\n$theme-palette: () !default;\n\n$theme-palette: map-merge(\n\t(\n\t\tprimary: $teal,\n\t\tsecondary: $dark-grey,\n\t\tsuccess: $green,\n\t\tshade: $gray-500,\n\t\twarning: $orange,\n\t\talert: $red,\n\t\tnavigation: $blue,\n\t\taccent: $green-blue,\n\t\tinfo: $alt-grey,\n\t\thighlight: $purple,\n\t\tacc: $acc-blue,\n\t),\n\t$theme-palette\n);\n/** Setting link color variables in scss **/\n$link-color-light:\t\t\t\t\tget-theme-color(accent, 3) !default;\n$link-color-light--hover:\t\t\tget-theme-color(accent, 5) !default;\n$link-color-light--visited:\t\t\tcolor.scale( get-theme-color(accent, 2), $saturation: -70%) !default;\n$link-color-dark:\t\t\t\t\tget-theme-color(accent, -3) !default;\n$link-color-dark--hover:\t\t\tget-theme-color(accent, -5) !default;\n$link-color-dark--visited:\t\t\tcolor.scale( get-theme-color(accent, -2), $saturation: -70%) !default;\n\n\n\n\n\n$cor-green: #6fc284;\n$cor-yellow: #ffd44f;\n$cor-yellow-orange: #faa74b;\n$cor-orange: #f15d4c;\n$cor-red: #ed1c00;\n$cor-pale-pink:#fcdbd8;\n$COR: () !default;\n$COR: map-merge(\n\t(\n\t\tI: $cor-green,\n\t\tIIA: $cor-yellow,\n\t\tIIB: $cor-yellow-orange,\n\t\tIII: $cor-orange,\n\t\tIII-NOBENIFIT: $cor-orange,\n\t\tIII-HARM: $cor-red,\n\t\tIII-4: $cor-pale-pink\n\t),\n\t$COR\n);\n$loe-dark-blue: rgb(62, 111, 183);\n$loe-mid-blue: rgb(101, 156, 211);\n$loe-light-blue: rgb(161, 193, 230);\n$loe-pale-blue: rgb(181, 213, 229);\n$LOE: () !default;\n$LOE: map-merge(\n\t(\n\t\tA: $loe-dark-blue,\n\t\tB-NR: $loe-mid-blue,\n\t\tB-BR: $loe-light-blue,\n\t\tC-LD: $loe-pale-blue,\n\t\tC-EO: $loe-pale-blue,\n\t),\n\t$LOE\n);\n\n$credit-AAPA: #e8c536;\n$credit-ABP: #007a5b;\n$credit-ABPMOCII: #0b6d4c;\n$credit-ABPMOCIV: #105a3b;\n$credit-ATCEU: #775744;\n$credit-CE: #a8a8a8;\n$credit-CME: #00a15b;\n$credit-CNE: #198dae;\n$credit-AANP: #2667b2;\n$credit-CNErx: #52549e;\n$credit-COP: #775891;\n$credit-CPE: #992e2e;\n$credit-ECME: #d16528;\n$credit-IPCE:#6c36b3;\n$credit-MOC: #9a1267;\n$credit-MOCII: #9a1267;\n$credit-MOCIV: #d3248d;\n$credit-ACHE : #9733a5;\n\n$CreditColors: () !default;\n$CreditColors: map-merge(\n\t(\n\t\tAANP: $credit-AANP,\n\t\tAAPA: $credit-AAPA,\n\t\tABP: $credit-ABP,\n\t\tABPMOCII: $credit-ABPMOCII,\n\t\tABPMOCIV: $credit-ABPMOCIV,\n\t\tATCEU: $credit-ATCEU,\n\t\tCE: $credit-CE,\n\t\tCME: $credit-CME,\n\t\tCNE: $credit-CNE,\n\t\tCNErx: $credit-CNErx,\n\t\tCOP: $credit-COP,\n\t\tCPE: $credit-CPE,\n\t\tECME: $credit-ECME,\n\t\tIPCE:$credit-IPCE,\n\t\tMOC: $credit-MOCII,\n\t\tMOCII: $credit-MOCII,\n\t\tMOCIV: $credit-MOCIV,\n\t\tACHE: $credit-ACHE,\n\t),\n\t$CreditColors\n);\n$pathway-invasive-cardiology: #c8b02f;\n$pathway-congenital-heart-disease: #fdb918;\n$pathway-noninvasive-cardiology: #947b33;\n$pathway-ecg-stress-test: #d9691f;\n$pathway-vascular-medicine: #ae171c;\n$pathway-pulmonary-hypertension: #d60e7e;\n$pathway-prevention: #a01d51;\n$pathway-heart-failure: #410d49;\n$pathway-valvular-heart-disease: #4f4190;\n$pathway-arrhythmias-EP: #005b37;\n$pathway-pericardial: #0079ad;\n$pathway-acute-coronary-syndromes: #009974;\n$pathway-stable-ischemic-heart-disease: #0f3e65;\n$pathway-special: #00b6f1;\n$pathway-pandemic: #8e2582;\n$PathwayColors: () !default;\n$PathwayColors: map-merge(\n\t(\n\t\tinvasive: $pathway-invasive-cardiology,\n\t\tcongenital: $pathway-congenital-heart-disease,\n\t\tnoninvasive: $pathway-noninvasive-cardiology,\n\t\tecg: $pathway-ecg-stress-test,\n\t\tvascular: $pathway-vascular-medicine,\n\t\tpulmonary: $pathway-pulmonary-hypertension,\n\t\tprevention: $pathway-prevention,\n\t\thf: $pathway-heart-failure,\n\t\tvalvular: $pathway-valvular-heart-disease,\n\t\tarrhythmias: $pathway-arrhythmias-EP,\n\t\tpericardial: $pathway-pericardial,\n\t\tacute: $pathway-acute-coronary-syndromes,\n\t\tischemic: $pathway-stable-ischemic-heart-disease,\n\t\tspecial: $pathway-special,\n\t\tpandemic: $pathway-pandemic,\n\t),\n\t$PathwayColors\n);\n\n$pathwayV2-invt: #c8b02f;\n$pathwayV2-pchd: #fdb918;\n$pathwayV2-imag: #947b33;\n$pathwayV2-vasc: #ae171c;\n$pathwayV2-pulmvd: #d60e7e;\n$pathwayV2-valv: #4f4190;\n$pathwayV2-ep: #005b37;\n$pathwayV2-ischem: #0f3e65;\n$pathwayV2-special: #00b6f1;\n$pathwayV2-prev: #a01d51;\n$pathwayV2-hf: #410d49;\n\n$PathwayColorsV2: () !default;\n$PathwayColorsV2: map-merge(\n\t(\n\t\tinvt: $pathwayV2-invt,\n\t\tpchd: $pathwayV2-pchd,\n\t\timag: $pathwayV2-imag,\n\t\tvasc: $pathwayV2-vasc,\n\t\tpulmvd: $pathwayV2-pulmvd,\n\t\tprev: $pathwayV2-prev,\n\t\thf: $pathwayV2-hf,\n\t\tvalv: $pathwayV2-valv,\n\t\tep: $pathwayV2-ep,\n\t\tischem: $pathwayV2-ischem,\n\t\tspecial: $pathwayV2-special\n\t),\n\t$PathwayColorsV2\n);\n\n$pathwayV3-arr: #c73d53;\n$pathwayV3-prev: #9f1d51;\n$pathwayV3-chd: #006838;\n$pathwayV3-invt: #b2c83a;\n$pathwayV3-hf: #935ca6;\n$pathwayV3-ischem: #0c4166;\n$pathwayV3-imag: #fdb913;\n$pathwayV3-pulmvd: #d50e7e;\n$pathwayV3-special: #00b6f1;\n$pathwayV3-vasc: #f15a29;\n$pathwayV3-valv: #400d49;\n\n\n$PathwayColorsV3: () !default;\n$PathwayColorsV3: map-merge(\n\t(\n\t\tarr: $pathwayV3-arr,\n\t\tprev: $pathwayV3-prev,\n\t\tchd: $pathwayV3-chd,\n\t\tinvt: $pathwayV3-invt,\n\t\thf: $pathwayV3-hf,\n\t\tischem: $pathwayV3-ischem,\n\t\timag: $pathwayV3-imag,\n\t\tpulmvd: $pathwayV3-pulmvd,\n\t\tspecial: $pathwayV3-special,\n\t\tvasc: $pathwayV3-vasc,\n\t\tvalv: $pathwayV3-valv\n\n\t),\n\t$PathwayColorsV3\n);\n\n\n$twitter: #000;\n$facebook: #3b5998;\n$linkedin: #0077b5;\n$apple-store: #ea4cc0;\n$google-play: #ef6c00;\n$youtube: #bb0000;\n$instagram: #8134af;\n$SocialColors: () !default;\n$SocialColors: map-merge(\n\t(\n\t\ttwitter: $twitter,\n\t\tfacebook: $facebook,\n\t\tlinkedin: $linkedin,\n\t\tapple-store: $apple-store,\n\t\tgoogle-play: $google-play,\n\t\tyoutube: $youtube,\n\t\tinstagram: $instagram,\n\t),\n\t$SocialColors\n);\n\n\n$registry-cpmi: #f22418;\n$registry-afib:#ffb300;\n$registry-cathpci: #0086d5;\n$registry-icd: #80b800;\n$registry-impact:#4e1f73;\n$registry-pinnacle-primary:#0e4f1b;\n$registry-pinnacle-accent:#b3c4c4;\n$registry-focus:#d6560d;\n$registry-pcibleeding:#c0268e;\n$registry-laao:#00667a;\n$registry-pvi:#00947f;\n$registry-auxdata:#04adad;\n$registry-ststvt:#a20062;\n$registry-diabetes:#7893b8;\n\n$RegistryColors: () !default;\n$RegistryColors: map-merge(\n\t(\n\t\tcpmi: $registry-cpmi,\n\t\tafib: $registry-afib,\n\t\tcathpci:$registry-cathpci,\n\t\ticd:$registry-icd,\n\t\timpact:$registry-impact,\n\t\tpinnacle:$registry-pinnacle-primary,\n\t\tpinnacle-accent:$registry-pinnacle-accent,\n\t\tfocus:$registry-focus,\n\t\tpcibleeding:$registry-pcibleeding,\n\t\tlaao:$registry-laao,\n\t\tpvi:$registry-pvi,\n\t\tauxdata:$registry-auxdata,\n\t\tststvt:$registry-ststvt,\n\t\tdiabetes:$registry-diabetes\n\t),\n\t$RegistryColors\n);\n\n\n\n$journal-jc: #002e5a; \n$journal-adv:#0000FF;\t\n$journal-asia:#ec2939;\t\n$journal-tran:#1788c2;\t\n$journal-cvonc:#00ae81;\n$journal-case:#f37321;\n$journal-ep:#8a5e96;\t\n$journal-hf:#991326;\t\n$journal-invt:#038e92;\t\n$journal-imag:#c18a0e;\t\n\n$journal-label-jc: \"Journal of the American College of Cardiology\"; \n$journal-label-adv:\"JACC: Advances\";\t\n$journal-label-asia:\"JACC: Asia\";\t\n$journal-label-tran:\"JACC: Basic to Translational Science\";\t\n$journal-label-cvonc:\"JACC: CardioOncology\";\n$journal-label-case:\"JACC: Case Reports\";\n$journal-label-ep:\"JACC: Clinical Electrophysiology\";\t\n$journal-label-hf:\"JACC: Heart Failure\";\t\n$journal-label-invt:\"JACC: Cardiovascular Interventions\";\t\n$journal-label-imag:\"JACC: Cardiovascular Imaging\";\t\n\n$JournalsJACC: () !default;\n$JournalsJACC: map-merge(\n\t(\n\tjc:$journal-jc,\n\tjc-adv:$journal-adv,\n\tjc-asia:$journal-asia,\n\tjc-tran:$journal-tran,\n\tjc-cvonc:$journal-cvonc,\n\tjc-case:$journal-case,\n\tjc-ep:$journal-ep,\n\tjc-hf:$journal-hf,\n\tjc-invt:$journal-invt,\n\tjc-imag:$journal-imag,\n\n\t),\n\t$JournalsJACC\n);\n\n\n/*\n\nLink Colors: Light\n\nLink colors of a lighter shade in all of its states, default, hover, visited. Typically used to enhance visibility on dark backgrounds.\n\n$link-color-dark\t\t\t- #{$link-color-dark}; Link Color dark\t\t\t\n$link-color-dark--hover\t- #{$link-color-dark--hover}; Link Color dark--hover\t\n$link-color-dark--visited\t- #{$link-color-dark--visited}; Link Color dark--visited\t\n\nWeight:2\n\nStyleguide DesignBase.Colors.LinksLight\n */\n/*\n\nLink Colors\n\nLink colors  in all of its states, default, hover, visited.\n\n\n$link-color-light\t\t\t- #{$link-color-light}; Link Color light\t\t\t\n$link-color-light--hover\t- #{$link-color-light--hover}; Link Color light--hover\t\n$link-color-light--visited\t- #{$link-color-light--visited}; Link Color light--visited\t\n$link-color-dark\t\t\t- #{$link-color-dark}; Link Color dark\t\t\t\n$link-color-dark--hover\t- #{$link-color-dark--hover}; Link Color dark--hover\t\n$link-color-dark--visited\t- #{$link-color-dark--visited}; Link Color dark--visited\t\n\nWeight:1\n\nStyleguide DesignBase.Colors.Links\n */","// stylelint-disable property-disallowed-list\n// Single side border-radius\n\n// Helper function to replace negative values with 0\n@function valid-radius($radius) {\n  $return: ();\n  @each $value in $radius {\n    @if type-of($value) == number {\n      $return: append($return, max($value, 0));\n    } @else {\n      $return: append($return, $value);\n    }\n  }\n  @return $return;\n}\n\n// scss-docs-start border-radius-mixins\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n  @if $enable-rounded {\n    border-radius: valid-radius($radius);\n  }\n  @else if $fallback-border-radius != false {\n    border-radius: $fallback-border-radius;\n  }\n}\n\n@mixin border-top-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n    border-top-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-right-radius: valid-radius($radius);\n    border-bottom-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-bottom-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-right-radius: valid-radius($radius);\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-top-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-left-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-top-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-top-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-bottom-end-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-right-radius: valid-radius($radius);\n  }\n}\n\n@mixin border-bottom-start-radius($radius: $border-radius) {\n  @if $enable-rounded {\n    border-bottom-left-radius: valid-radius($radius);\n  }\n}\n// scss-docs-end border-radius-mixins\n","// Lists\n\n// Unstyled keeps list items block level, just removes default browser padding and list-style\n@mixin list-unstyled {\n  padding-left: 0;\n  list-style: none;\n}\n","// Responsive images (ensure images don't scale beyond their parents)\n//\n// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.\n// We previously tried the \"images are responsive by default\" approach in Bootstrap v2,\n// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)\n// which weren't expecting the images within themselves to be involuntarily resized.\n// See also https://github.com/twbs/bootstrap/issues/18178\n.img-fluid {\n  @include img-fluid();\n}\n\n\n// Image thumbnails\n.img-thumbnail {\n  padding: $thumbnail-padding;\n  background-color: $thumbnail-bg;\n  border: $thumbnail-border-width solid $thumbnail-border-color;\n  @include border-radius($thumbnail-border-radius);\n  @include box-shadow($thumbnail-box-shadow);\n\n  // Keep them at most 100% wide\n  @include img-fluid();\n}\n\n//\n// Figures\n//\n\n.figure {\n  // Ensures the caption's text aligns with the image.\n  display: inline-block;\n}\n\n.figure-img {\n  margin-bottom: $spacer * .5;\n  line-height: 1;\n}\n\n.figure-caption {\n  @include font-size($figure-caption-font-size);\n  color: $figure-caption-color;\n}\n","// Image Mixins\n// - Responsive image\n// - Retina image\n\n\n// Responsive image\n//\n// Keep images from scaling beyond the width of their parents.\n\n@mixin img-fluid {\n  // Part 1: Set a maximum relative to the parent\n  max-width: 100%;\n  // Part 2: Override the height to auto, otherwise images will be stretched\n  // when setting a width and height attribute on the img element.\n  height: auto;\n}\n","// Container widths\n//\n// Set the container width, and override it for fixed navbars in media queries.\n\n@if $enable-grid-classes {\n  // Single container class with breakpoint max-widths\n  .container,\n  // 100% wide container at all breakpoints\n  .container-fluid {\n    @include make-container();\n  }\n\n  // Responsive containers that are 100% wide until a breakpoint\n  @each $breakpoint, $container-max-width in $container-max-widths {\n    .container-#{$breakpoint} {\n      @extend .container-fluid;\n    }\n\n    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {\n      %responsive-container-#{$breakpoint} {\n        max-width: $container-max-width;\n      }\n\n      // Extend each breakpoint which is smaller or equal to the current breakpoint\n      $extend-breakpoint: true;\n\n      @each $name, $width in $grid-breakpoints {\n        @if ($extend-breakpoint) {\n          .container#{breakpoint-infix($name, $grid-breakpoints)} {\n            @extend %responsive-container-#{$breakpoint};\n          }\n\n          // Once the current breakpoint is reached, stop extending\n          @if ($breakpoint == $name) {\n            $extend-breakpoint: false;\n          }\n        }\n      }\n    }\n  }\n}\n","// Container mixins\n\n@mixin make-container($gutter: $container-padding-x) {\n  width: 100%;\n  padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});\n  padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});\n  margin-right: auto;\n  margin-left: auto;\n}\n","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @if not $n {\n    @error \"breakpoint `#{$name}` not found in `#{$breakpoints}`\";\n  }\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n  $min: map-get($breakpoints, $name);\n  @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n  $max: map-get($breakpoints, $name);\n  @return if($max and $max > 0, $max - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($lower, $breakpoints);\n  $max: breakpoint-max($upper, $breakpoints);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($lower, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($upper, $breakpoints) {\n      @content;\n    }\n  }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n  $min:  breakpoint-min($name, $breakpoints);\n  $next: breakpoint-next($name, $breakpoints);\n  $max:  breakpoint-max($next);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($name, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($next, $breakpoints) {\n      @content;\n    }\n  }\n}\n","// Row\n//\n// Rows contain your columns.\n\n@if $enable-grid-classes {\n  .row {\n    @include make-row();\n\n    > * {\n      @include make-col-ready();\n    }\n  }\n}\n\n@if $enable-cssgrid {\n  .grid {\n    display: grid;\n    grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);\n    grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);\n    gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});\n\n    @include make-cssgrid();\n  }\n}\n\n\n// Columns\n//\n// Common styles for small and large grid columns\n\n@if $enable-grid-classes {\n  @include make-grid-columns();\n}\n","// Grid system\n//\n// Generate semantic grid columns with these mixins.\n\n@mixin make-row($gutter: $grid-gutter-width) {\n  --#{$variable-prefix}gutter-x: #{$gutter};\n  --#{$variable-prefix}gutter-y: 0;\n  display: flex;\n  flex-wrap: wrap;\n  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed\n  margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list\n  margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list\n  margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list\n}\n\n@mixin make-col-ready($gutter: $grid-gutter-width) {\n  // Add box sizing if only the grid is loaded\n  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);\n  // Prevent columns from becoming too narrow when at smaller grid tiers by\n  // always setting `width: 100%;`. This works because we set the width\n  // later on to override this initial width.\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid\n  padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list\n  padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list\n  margin-top: var(--#{$variable-prefix}gutter-y);\n}\n\n@mixin make-col($size: false, $columns: $grid-columns) {\n  @if $size {\n    flex: 0 0 auto;\n    width: percentage(divide($size, $columns));\n\n  } @else {\n    flex: 1 1 0;\n    max-width: 100%;\n  }\n}\n\n@mixin make-col-auto() {\n  flex: 0 0 auto;\n  width: auto;\n}\n\n@mixin make-col-offset($size, $columns: $grid-columns) {\n  $num: divide($size, $columns);\n  margin-left: if($num == 0, 0, percentage($num));\n}\n\n// Row columns\n//\n// Specify on a parent element(e.g., .row) to force immediate children into NN\n// numberof columns. Supports wrapping to new lines, but does not do a Masonry\n// style grid.\n@mixin row-cols($count) {\n  > * {\n    flex: 0 0 auto;\n    width: divide(100%, $count);\n  }\n}\n\n// Framework grid generation\n//\n// Used only by Bootstrap to generate the correct number of grid classes given\n// any value of `$grid-columns`.\n\n@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {\n  @each $breakpoint in map-keys($breakpoints) {\n    $infix: breakpoint-infix($breakpoint, $breakpoints);\n\n    @include media-breakpoint-up($breakpoint, $breakpoints) {\n      // Provide basic `.col-{bp}` classes for equal-width flexbox columns\n      .col#{$infix} {\n        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4\n      }\n\n      .row-cols#{$infix}-auto > * {\n        @include make-col-auto();\n      }\n\n      @if $grid-row-columns > 0 {\n        @for $i from 1 through $grid-row-columns {\n          .row-cols#{$infix}-#{$i} {\n            @include row-cols($i);\n          }\n        }\n      }\n\n      .col#{$infix}-auto {\n        @include make-col-auto();\n      }\n\n      @if $columns > 0 {\n        @for $i from 1 through $columns {\n          .col#{$infix}-#{$i} {\n            @include make-col($i, $columns);\n          }\n        }\n\n        // `$columns - 1` because offsetting by the width of an entire row isn't possible\n        @for $i from 0 through ($columns - 1) {\n          @if not ($infix == \"\" and $i == 0) { // Avoid emitting useless .offset-0\n            .offset#{$infix}-#{$i} {\n              @include make-col-offset($i, $columns);\n            }\n          }\n        }\n      }\n\n      // Gutters\n      //\n      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.\n      @each $key, $value in $gutters {\n        .g#{$infix}-#{$key},\n        .gx#{$infix}-#{$key} {\n          --#{$variable-prefix}gutter-x: #{$value};\n        }\n\n        .g#{$infix}-#{$key},\n        .gy#{$infix}-#{$key} {\n          --#{$variable-prefix}gutter-y: #{$value};\n        }\n      }\n    }\n  }\n}\n\n@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {\n  @each $breakpoint in map-keys($breakpoints) {\n    $infix: breakpoint-infix($breakpoint, $breakpoints);\n\n    @include media-breakpoint-up($breakpoint, $breakpoints) {\n      @if $columns > 0 {\n        @for $i from 1 through $columns {\n          .g-col#{$infix}-#{$i} {\n            grid-column: auto / span $i;\n          }\n        }\n\n        // Start with `1` because `0` is and invalid value.\n        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.\n        @for $i from 1 through ($columns - 1) {\n          .g-start#{$infix}-#{$i} {\n            grid-column-start: $i;\n          }\n        }\n      }\n    }\n  }\n}\n","//\n// Basic Bootstrap table\n//\n\n.table {\n  --#{$variable-prefix}table-bg: #{$table-bg};\n  --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};\n  --#{$variable-prefix}table-striped-color: #{$table-striped-color};\n  --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};\n  --#{$variable-prefix}table-active-color: #{$table-active-color};\n  --#{$variable-prefix}table-active-bg: #{$table-active-bg};\n  --#{$variable-prefix}table-hover-color: #{$table-hover-color};\n  --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};\n\n  width: 100%;\n  margin-bottom: $spacer;\n  color: $table-color;\n  vertical-align: $table-cell-vertical-align;\n  border-color: $table-border-color;\n\n  // Target th & td\n  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.\n  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).\n  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.\n  // stylelint-disable-next-line selector-max-universal\n  > :not(caption) > * > * {\n    padding: $table-cell-padding-y $table-cell-padding-x;\n    background-color: var(--#{$variable-prefix}table-bg);\n    border-bottom-width: $table-border-width;\n    box-shadow: inset 0 0 0 9999px var(--#{$variable-prefix}table-accent-bg);\n  }\n\n  > tbody {\n    vertical-align: inherit;\n  }\n\n  > thead {\n    vertical-align: bottom;\n  }\n\n  // Highlight border color between thead, tbody and tfoot.\n  > :not(:first-child) {\n    border-top: (2 * $table-border-width) solid $table-group-separator-color;\n  }\n}\n\n\n//\n// Change placement of captions with a class\n//\n\n.caption-top {\n  caption-side: top;\n}\n\n\n//\n// Condensed table w/ half padding\n//\n\n.table-sm {\n  // stylelint-disable-next-line selector-max-universal\n  > :not(caption) > * > * {\n    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;\n  }\n}\n\n\n// Border versions\n//\n// Add or remove borders all around the table and between all the columns.\n//\n// When borders are added on all sides of the cells, the corners can render odd when\n// these borders do not have the same color or if they are semi-transparent.\n// Therefor we add top and border bottoms to the `tr`s and left and right borders\n// to the `td`s or `th`s\n\n.table-bordered {\n  > :not(caption) > * {\n    border-width: $table-border-width 0;\n\n    // stylelint-disable-next-line selector-max-universal\n    > * {\n      border-width: 0 $table-border-width;\n    }\n  }\n}\n\n.table-borderless {\n  // stylelint-disable-next-line selector-max-universal\n  > :not(caption) > * > * {\n    border-bottom-width: 0;\n  }\n\n  > :not(:first-child) {\n    border-top-width: 0;\n  }\n}\n\n// Zebra-striping\n//\n// Default zebra-stripe styles (alternating gray and transparent backgrounds)\n\n.table-striped {\n  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {\n    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);\n    color: var(--#{$variable-prefix}table-striped-color);\n  }\n}\n\n// Active table\n//\n// The `.table-active` class can be added to highlight rows or cells\n\n.table-active {\n  --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);\n  color: var(--#{$variable-prefix}table-active-color);\n}\n\n// Hover effect\n//\n// Placed here since it has to come after the potential zebra striping\n\n.table-hover {\n  > tbody > tr:hover > * {\n    --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);\n    color: var(--#{$variable-prefix}table-hover-color);\n  }\n}\n\n\n// Table variants\n//\n// Table variants set the table cell backgrounds, border colors\n// and the colors of the striped, hovered & active tables\n\n@each $color, $value in $table-variants {\n  @include table-variant($color, $value);\n}\n\n// Responsive tables\n//\n// Generate series of `.table-responsive-*` classes for configuring the screen\n// size of where your table will overflow.\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n  @include media-breakpoint-down($breakpoint) {\n    .table-responsive#{$infix} {\n      overflow-x: auto;\n      -webkit-overflow-scrolling: touch;\n    }\n  }\n}\n","// scss-docs-start table-variant\n@mixin table-variant($state, $background) {\n  .table-#{$state} {\n    $color: color-contrast(opaque($body-bg, $background));\n    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));\n    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));\n    $active-bg: mix($color, $background, percentage($table-active-bg-factor));\n\n    --#{$variable-prefix}table-bg: #{$background};\n    --#{$variable-prefix}table-striped-bg: #{$striped-bg};\n    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};\n    --#{$variable-prefix}table-active-bg: #{$active-bg};\n    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};\n    --#{$variable-prefix}table-hover-bg: #{$hover-bg};\n    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};\n\n    color: $color;\n    border-color: mix($color, $background, percentage($table-border-factor));\n  }\n}\n// scss-docs-end table-variant\n","//\n// Labels\n//\n\n.form-label {\n  margin-bottom: $form-label-margin-bottom;\n  @include font-size($form-label-font-size);\n  font-style: $form-label-font-style;\n  font-weight: $form-label-font-weight;\n  color: $form-label-color;\n}\n\n// For use with horizontal and inline forms, when you need the label (or legend)\n// text to align with the form controls.\n.col-form-label {\n  padding-top: add($input-padding-y, $input-border-width);\n  padding-bottom: add($input-padding-y, $input-border-width);\n  margin-bottom: 0; // Override the `<legend>` default\n  @include font-size(inherit); // Override the `<legend>` default\n  font-style: $form-label-font-style;\n  font-weight: $form-label-font-weight;\n  line-height: $input-line-height;\n  color: $form-label-color;\n}\n\n.col-form-label-lg {\n  padding-top: add($input-padding-y-lg, $input-border-width);\n  padding-bottom: add($input-padding-y-lg, $input-border-width);\n  @include font-size($input-font-size-lg);\n}\n\n.col-form-label-sm {\n  padding-top: add($input-padding-y-sm, $input-border-width);\n  padding-bottom: add($input-padding-y-sm, $input-border-width);\n  @include font-size($input-font-size-sm);\n}\n","//\n// Form text\n//\n\n.form-text {\n  margin-top: $form-text-margin-top;\n  @include font-size($form-text-font-size);\n  font-style: $form-text-font-style;\n  font-weight: $form-text-font-weight;\n  color: $form-text-color;\n}\n","//\n// General form controls (plus a few specific high-level interventions)\n//\n\n.form-control {\n  display: block;\n  width: 100%;\n  padding: $input-padding-y $input-padding-x;\n  font-family: $input-font-family;\n  @include font-size($input-font-size);\n  font-weight: $input-font-weight;\n  line-height: $input-line-height;\n  color: $input-color;\n  background-color: $input-bg;\n  background-clip: padding-box;\n  border: $input-border-width solid $input-border-color;\n  appearance: none; // Fix appearance for date inputs in Safari\n\n  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.\n  @include border-radius($input-border-radius, 0);\n\n  @include box-shadow($input-box-shadow);\n  @include transition($input-transition);\n\n  &[type=\"file\"] {\n    overflow: hidden; // prevent pseudo element button overlap\n\n    &:not(:disabled):not([readonly]) {\n      cursor: pointer;\n    }\n  }\n\n  // Customize the `:focus` state to imitate native WebKit styles.\n  &:focus {\n    color: $input-focus-color;\n    background-color: $input-focus-bg;\n    border-color: $input-focus-border-color;\n    outline: 0;\n    @if $enable-shadows {\n      @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n    } @else {\n      // Avoid using mixin so we can pass custom focus shadow properly\n      box-shadow: $input-focus-box-shadow;\n    }\n  }\n\n  // Add some height to date inputs on iOS\n  // https://github.com/twbs/bootstrap/issues/23307\n  // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved\n  &::-webkit-date-and-time-value {\n    // Multiply line-height by 1em if it has no unit\n    height: if(unit($input-line-height) == \"\", $input-line-height * 1em, $input-line-height);\n  }\n\n  // Placeholder\n  &::placeholder {\n    color: $input-placeholder-color;\n    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.\n    opacity: 1;\n  }\n\n  // Disabled and read-only inputs\n  //\n  // HTML5 says that controls under a fieldset > legend:first-child won't be\n  // disabled if the fieldset is disabled. Due to implementation difficulty, we\n  // don't honor that edge case; we style them as disabled anyway.\n  &:disabled,\n  &[readonly] {\n    background-color: $input-disabled-bg;\n    border-color: $input-disabled-border-color;\n    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n    opacity: 1;\n  }\n\n  // File input buttons theming\n  &::file-selector-button {\n    padding: $input-padding-y $input-padding-x;\n    margin: (-$input-padding-y) (-$input-padding-x);\n    margin-inline-end: $input-padding-x;\n    color: $form-file-button-color;\n    @include gradient-bg($form-file-button-bg);\n    pointer-events: none;\n    border-color: inherit;\n    border-style: solid;\n    border-width: 0;\n    border-inline-end-width: $input-border-width;\n    border-radius: 0; // stylelint-disable-line property-disallowed-list\n    @include transition($btn-transition);\n  }\n\n  &:hover:not(:disabled):not([readonly])::file-selector-button {\n    background-color: $form-file-button-hover-bg;\n  }\n\n  &::-webkit-file-upload-button {\n    padding: $input-padding-y $input-padding-x;\n    margin: (-$input-padding-y) (-$input-padding-x);\n    margin-inline-end: $input-padding-x;\n    color: $form-file-button-color;\n    @include gradient-bg($form-file-button-bg);\n    pointer-events: none;\n    border-color: inherit;\n    border-style: solid;\n    border-width: 0;\n    border-inline-end-width: $input-border-width;\n    border-radius: 0; // stylelint-disable-line property-disallowed-list\n    @include transition($btn-transition);\n  }\n\n  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {\n    background-color: $form-file-button-hover-bg;\n  }\n}\n\n// Readonly controls as plain text\n//\n// Apply class to a readonly input to make it appear like regular plain\n// text (without any border, background color, focus indicator)\n\n.form-control-plaintext {\n  display: block;\n  width: 100%;\n  padding: $input-padding-y 0;\n  margin-bottom: 0; // match inputs if this class comes on inputs with default margins\n  line-height: $input-line-height;\n  color: $input-plaintext-color;\n  background-color: transparent;\n  border: solid transparent;\n  border-width: $input-border-width 0;\n\n  &.form-control-sm,\n  &.form-control-lg {\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n\n// Form control sizing\n//\n// Build on `.form-control` with modifier classes to decrease or increase the\n// height and font-size of form controls.\n//\n// Repeated in `_input_group.scss` to avoid Sass extend issues.\n\n.form-control-sm {\n  min-height: $input-height-sm;\n  padding: $input-padding-y-sm $input-padding-x-sm;\n  @include font-size($input-font-size-sm);\n  @include border-radius($input-border-radius-sm);\n\n  &::file-selector-button {\n    padding: $input-padding-y-sm $input-padding-x-sm;\n    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);\n    margin-inline-end: $input-padding-x-sm;\n  }\n\n  &::-webkit-file-upload-button {\n    padding: $input-padding-y-sm $input-padding-x-sm;\n    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);\n    margin-inline-end: $input-padding-x-sm;\n  }\n}\n\n.form-control-lg {\n  min-height: $input-height-lg;\n  padding: $input-padding-y-lg $input-padding-x-lg;\n  @include font-size($input-font-size-lg);\n  @include border-radius($input-border-radius-lg);\n\n  &::file-selector-button {\n    padding: $input-padding-y-lg $input-padding-x-lg;\n    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);\n    margin-inline-end: $input-padding-x-lg;\n  }\n\n  &::-webkit-file-upload-button {\n    padding: $input-padding-y-lg $input-padding-x-lg;\n    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);\n    margin-inline-end: $input-padding-x-lg;\n  }\n}\n\n// Make sure textareas don't shrink too much when resized\n// https://github.com/twbs/bootstrap/pull/29124\n// stylelint-disable selector-no-qualifying-type\ntextarea {\n  &.form-control {\n    min-height: $input-height;\n  }\n\n  &.form-control-sm {\n    min-height: $input-height-sm;\n  }\n\n  &.form-control-lg {\n    min-height: $input-height-lg;\n  }\n}\n// stylelint-enable selector-no-qualifying-type\n\n.form-control-color {\n  width: $form-color-width;\n  height: auto; // Override fixed browser height\n  padding: $input-padding-y;\n\n  &:not(:disabled):not([readonly]) {\n    cursor: pointer;\n  }\n\n  &::-moz-color-swatch {\n    height: if(unit($input-line-height) == \"\", $input-line-height * 1em, $input-line-height);\n    @include border-radius($input-border-radius);\n  }\n\n  &::-webkit-color-swatch {\n    height: if(unit($input-line-height) == \"\", $input-line-height * 1em, $input-line-height);\n    @include border-radius($input-border-radius);\n  }\n}\n","// Gradients\n\n// scss-docs-start gradient-bg-mixin\n@mixin gradient-bg($color: null) {\n  background-color: $color;\n\n  @if $enable-gradients {\n    background-image: var(--#{$variable-prefix}gradient);\n  }\n}\n// scss-docs-end gradient-bg-mixin\n\n// scss-docs-start gradient-mixins\n// Horizontal gradient, from left to right\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);\n}\n\n// Vertical gradient, from top to bottom\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {\n  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);\n}\n\n@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {\n  background-image: linear-gradient($deg, $start-color, $end-color);\n}\n\n@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);\n}\n\n@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);\n}\n\n@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {\n  background-image: radial-gradient(circle, $inner-color, $outer-color);\n}\n\n@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {\n  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);\n}\n// scss-docs-end gradient-mixins\n","// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n// scss-docs-start gray-color-variables\n$white:    #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black:    #000 !default;\n// scss-docs-end gray-color-variables\n\n// fusv-disable\n// scss-docs-start gray-colors-map\n$grays: (\n  \"100\": $gray-100,\n  \"200\": $gray-200,\n  \"300\": $gray-300,\n  \"400\": $gray-400,\n  \"500\": $gray-500,\n  \"600\": $gray-600,\n  \"700\": $gray-700,\n  \"800\": $gray-800,\n  \"900\": $gray-900\n) !default;\n// scss-docs-end gray-colors-map\n// fusv-enable\n\n// scss-docs-start color-variables\n$blue:    #0d6efd !default;\n$indigo:  #6610f2 !default;\n$purple:  #6f42c1 !default;\n$pink:    #d63384 !default;\n$red:     #dc3545 !default;\n$orange:  #fd7e14 !default;\n$yellow:  #ffc107 !default;\n$green:   #198754 !default;\n$teal:    #20c997 !default;\n$cyan:    #0dcaf0 !default;\n// scss-docs-end color-variables\n\n// scss-docs-start colors-map\n$colors: (\n  \"blue\":       $blue,\n  \"indigo\":     $indigo,\n  \"purple\":     $purple,\n  \"pink\":       $pink,\n  \"red\":        $red,\n  \"orange\":     $orange,\n  \"yellow\":     $yellow,\n  \"green\":      $green,\n  \"teal\":       $teal,\n  \"cyan\":       $cyan,\n  \"white\":      $white,\n  \"gray\":       $gray-600,\n  \"gray-dark\":  $gray-800\n) !default;\n// scss-docs-end colors-map\n\n// scss-docs-start theme-color-variables\n$primary:       $blue !default;\n$secondary:     $gray-600 !default;\n$success:       $green !default;\n$info:          $cyan !default;\n$warning:       $yellow !default;\n$danger:        $red !default;\n$light:         $gray-100 !default;\n$dark:          $gray-900 !default;\n// scss-docs-end theme-color-variables\n\n// scss-docs-start theme-colors-map\n$theme-colors: (\n  \"primary\":    $primary,\n  \"secondary\":  $secondary,\n  \"success\":    $success,\n  \"info\":       $info,\n  \"warning\":    $warning,\n  \"danger\":     $danger,\n  \"light\":      $light,\n  \"dark\":       $dark\n) !default;\n// scss-docs-end theme-colors-map\n\n// scss-docs-start theme-colors-rgb\n$theme-colors-rgb: map-loop($theme-colors, to-rgb, \"$value\") !default;\n// scss-docs-end theme-colors-rgb\n\n// The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n$min-contrast-ratio:   4.5 !default;\n\n// Customize the light and dark text colors for use in our color contrast function.\n$color-contrast-dark:      $black !default;\n$color-contrast-light:     $white !default;\n\n// fusv-disable\n$blue-100: tint-color($blue, 80%) !default;\n$blue-200: tint-color($blue, 60%) !default;\n$blue-300: tint-color($blue, 40%) !default;\n$blue-400: tint-color($blue, 20%) !default;\n$blue-500: $blue !default;\n$blue-600: shade-color($blue, 20%) !default;\n$blue-700: shade-color($blue, 40%) !default;\n$blue-800: shade-color($blue, 60%) !default;\n$blue-900: shade-color($blue, 80%) !default;\n\n$indigo-100: tint-color($indigo, 80%) !default;\n$indigo-200: tint-color($indigo, 60%) !default;\n$indigo-300: tint-color($indigo, 40%) !default;\n$indigo-400: tint-color($indigo, 20%) !default;\n$indigo-500: $indigo !default;\n$indigo-600: shade-color($indigo, 20%) !default;\n$indigo-700: shade-color($indigo, 40%) !default;\n$indigo-800: shade-color($indigo, 60%) !default;\n$indigo-900: shade-color($indigo, 80%) !default;\n\n$purple-100: tint-color($purple, 80%) !default;\n$purple-200: tint-color($purple, 60%) !default;\n$purple-300: tint-color($purple, 40%) !default;\n$purple-400: tint-color($purple, 20%) !default;\n$purple-500: $purple !default;\n$purple-600: shade-color($purple, 20%) !default;\n$purple-700: shade-color($purple, 40%) !default;\n$purple-800: shade-color($purple, 60%) !default;\n$purple-900: shade-color($purple, 80%) !default;\n\n$pink-100: tint-color($pink, 80%) !default;\n$pink-200: tint-color($pink, 60%) !default;\n$pink-300: tint-color($pink, 40%) !default;\n$pink-400: tint-color($pink, 20%) !default;\n$pink-500: $pink !default;\n$pink-600: shade-color($pink, 20%) !default;\n$pink-700: shade-color($pink, 40%) !default;\n$pink-800: shade-color($pink, 60%) !default;\n$pink-900: shade-color($pink, 80%) !default;\n\n$red-100: tint-color($red, 80%) !default;\n$red-200: tint-color($red, 60%) !default;\n$red-300: tint-color($red, 40%) !default;\n$red-400: tint-color($red, 20%) !default;\n$red-500: $red !default;\n$red-600: shade-color($red, 20%) !default;\n$red-700: shade-color($red, 40%) !default;\n$red-800: shade-color($red, 60%) !default;\n$red-900: shade-color($red, 80%) !default;\n\n$orange-100: tint-color($orange, 80%) !default;\n$orange-200: tint-color($orange, 60%) !default;\n$orange-300: tint-color($orange, 40%) !default;\n$orange-400: tint-color($orange, 20%) !default;\n$orange-500: $orange !default;\n$orange-600: shade-color($orange, 20%) !default;\n$orange-700: shade-color($orange, 40%) !default;\n$orange-800: shade-color($orange, 60%) !default;\n$orange-900: shade-color($orange, 80%) !default;\n\n$yellow-100: tint-color($yellow, 80%) !default;\n$yellow-200: tint-color($yellow, 60%) !default;\n$yellow-300: tint-color($yellow, 40%) !default;\n$yellow-400: tint-color($yellow, 20%) !default;\n$yellow-500: $yellow !default;\n$yellow-600: shade-color($yellow, 20%) !default;\n$yellow-700: shade-color($yellow, 40%) !default;\n$yellow-800: shade-color($yellow, 60%) !default;\n$yellow-900: shade-color($yellow, 80%) !default;\n\n$green-100: tint-color($green, 80%) !default;\n$green-200: tint-color($green, 60%) !default;\n$green-300: tint-color($green, 40%) !default;\n$green-400: tint-color($green, 20%) !default;\n$green-500: $green !default;\n$green-600: shade-color($green, 20%) !default;\n$green-700: shade-color($green, 40%) !default;\n$green-800: shade-color($green, 60%) !default;\n$green-900: shade-color($green, 80%) !default;\n\n$teal-100: tint-color($teal, 80%) !default;\n$teal-200: tint-color($teal, 60%) !default;\n$teal-300: tint-color($teal, 40%) !default;\n$teal-400: tint-color($teal, 20%) !default;\n$teal-500: $teal !default;\n$teal-600: shade-color($teal, 20%) !default;\n$teal-700: shade-color($teal, 40%) !default;\n$teal-800: shade-color($teal, 60%) !default;\n$teal-900: shade-color($teal, 80%) !default;\n\n$cyan-100: tint-color($cyan, 80%) !default;\n$cyan-200: tint-color($cyan, 60%) !default;\n$cyan-300: tint-color($cyan, 40%) !default;\n$cyan-400: tint-color($cyan, 20%) !default;\n$cyan-500: $cyan !default;\n$cyan-600: shade-color($cyan, 20%) !default;\n$cyan-700: shade-color($cyan, 40%) !default;\n$cyan-800: shade-color($cyan, 60%) !default;\n$cyan-900: shade-color($cyan, 80%) !default;\n\n$blues: (\n  \"blue-100\": $blue-100,\n  \"blue-200\": $blue-200,\n  \"blue-300\": $blue-300,\n  \"blue-400\": $blue-400,\n  \"blue-500\": $blue-500,\n  \"blue-600\": $blue-600,\n  \"blue-700\": $blue-700,\n  \"blue-800\": $blue-800,\n  \"blue-900\": $blue-900\n) !default;\n\n$indigos: (\n  \"indigo-100\": $indigo-100,\n  \"indigo-200\": $indigo-200,\n  \"indigo-300\": $indigo-300,\n  \"indigo-400\": $indigo-400,\n  \"indigo-500\": $indigo-500,\n  \"indigo-600\": $indigo-600,\n  \"indigo-700\": $indigo-700,\n  \"indigo-800\": $indigo-800,\n  \"indigo-900\": $indigo-900\n) !default;\n\n$purples: (\n  \"purple-100\": $purple-200,\n  \"purple-200\": $purple-100,\n  \"purple-300\": $purple-300,\n  \"purple-400\": $purple-400,\n  \"purple-500\": $purple-500,\n  \"purple-600\": $purple-600,\n  \"purple-700\": $purple-700,\n  \"purple-800\": $purple-800,\n  \"purple-900\": $purple-900\n) !default;\n\n$pinks: (\n  \"pink-100\": $pink-100,\n  \"pink-200\": $pink-200,\n  \"pink-300\": $pink-300,\n  \"pink-400\": $pink-400,\n  \"pink-500\": $pink-500,\n  \"pink-600\": $pink-600,\n  \"pink-700\": $pink-700,\n  \"pink-800\": $pink-800,\n  \"pink-900\": $pink-900\n) !default;\n\n$reds: (\n  \"red-100\": $red-100,\n  \"red-200\": $red-200,\n  \"red-300\": $red-300,\n  \"red-400\": $red-400,\n  \"red-500\": $red-500,\n  \"red-600\": $red-600,\n  \"red-700\": $red-700,\n  \"red-800\": $red-800,\n  \"red-900\": $red-900\n) !default;\n\n$oranges: (\n  \"orange-100\": $orange-100,\n  \"orange-200\": $orange-200,\n  \"orange-300\": $orange-300,\n  \"orange-400\": $orange-400,\n  \"orange-500\": $orange-500,\n  \"orange-600\": $orange-600,\n  \"orange-700\": $orange-700,\n  \"orange-800\": $orange-800,\n  \"orange-900\": $orange-900\n) !default;\n\n$yellows: (\n  \"yellow-100\": $yellow-100,\n  \"yellow-200\": $yellow-200,\n  \"yellow-300\": $yellow-300,\n  \"yellow-400\": $yellow-400,\n  \"yellow-500\": $yellow-500,\n  \"yellow-600\": $yellow-600,\n  \"yellow-700\": $yellow-700,\n  \"yellow-800\": $yellow-800,\n  \"yellow-900\": $yellow-900\n) !default;\n\n$greens: (\n  \"green-100\": $green-100,\n  \"green-200\": $green-200,\n  \"green-300\": $green-300,\n  \"green-400\": $green-400,\n  \"green-500\": $green-500,\n  \"green-600\": $green-600,\n  \"green-700\": $green-700,\n  \"green-800\": $green-800,\n  \"green-900\": $green-900\n) !default;\n\n$teals: (\n  \"teal-100\": $teal-100,\n  \"teal-200\": $teal-200,\n  \"teal-300\": $teal-300,\n  \"teal-400\": $teal-400,\n  \"teal-500\": $teal-500,\n  \"teal-600\": $teal-600,\n  \"teal-700\": $teal-700,\n  \"teal-800\": $teal-800,\n  \"teal-900\": $teal-900\n) !default;\n\n$cyans: (\n  \"cyan-100\": $cyan-100,\n  \"cyan-200\": $cyan-200,\n  \"cyan-300\": $cyan-300,\n  \"cyan-400\": $cyan-400,\n  \"cyan-500\": $cyan-500,\n  \"cyan-600\": $cyan-600,\n  \"cyan-700\": $cyan-700,\n  \"cyan-800\": $cyan-800,\n  \"cyan-900\": $cyan-900\n) !default;\n// fusv-enable\n\n// Characters which are escaped by the escape-svg function\n$escaped-characters: (\n  (\"<\", \"%3c\"),\n  (\">\", \"%3e\"),\n  (\"#\", \"%23\"),\n  (\"(\", \"%28\"),\n  (\")\", \"%29\"),\n) !default;\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret:                true !default;\n$enable-rounded:              true !default;\n$enable-shadows:              false !default;\n$enable-gradients:            false !default;\n$enable-transitions:          true !default;\n$enable-reduced-motion:       true !default;\n$enable-smooth-scroll:        true !default;\n$enable-grid-classes:         true !default;\n$enable-cssgrid:              false !default;\n$enable-button-pointers:      true !default;\n$enable-rfs:                  true !default;\n$enable-validation-icons:     true !default;\n$enable-negative-margins:     false !default;\n$enable-deprecation-messages: true !default;\n$enable-important-utilities:  true !default;\n\n// Prefix for :root CSS variables\n\n$variable-prefix:             bs- !default;\n\n// Gradient\n//\n// The gradient which is added to components if `$enable-gradients` is `true`\n// This gradient is also added to elements with `.bg-gradient`\n// scss-docs-start variable-gradient\n$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;\n// scss-docs-end variable-gradient\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n// scss-docs-start spacer-variables-maps\n$spacer: 1rem !default;\n$spacers: (\n  0: 0,\n  1: $spacer * .25,\n  2: $spacer * .5,\n  3: $spacer,\n  4: $spacer * 1.5,\n  5: $spacer * 3,\n) !default;\n\n$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;\n// scss-docs-end spacer-variables-maps\n\n// Position\n//\n// Define the edge positioning anchors of the position utilities.\n\n// scss-docs-start position-map\n$position-values: (\n  0: 0,\n  50: 50%,\n  100: 100%\n) !default;\n// scss-docs-end position-map\n\n// Body\n//\n// Settings for the `<body>` element.\n\n$body-bg:                   $white !default;\n$body-color:                $gray-900 !default;\n$body-text-align:           null !default;\n\n// Utilities maps\n//\n// Extends the default `$theme-colors` maps to help create our utilities.\n\n// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.\n// scss-docs-start utilities-colors\n$utilities-colors: $theme-colors-rgb !default;\n// scss-docs-end utilities-colors\n\n// scss-docs-start utilities-text-colors\n$utilities-text: map-merge(\n  $utilities-colors,\n  (\n    \"black\": to-rgb($black),\n    \"white\": to-rgb($white),\n    \"body\": to-rgb($body-color)\n  )\n) !default;\n$utilities-text-colors: map-loop($utilities-text, rgba-css-var, \"$key\", \"text\") !default;\n// scss-docs-end utilities-text-colors\n\n// scss-docs-start utilities-bg-colors\n$utilities-bg: map-merge(\n  $utilities-colors,\n  (\n    \"black\": to-rgb($black),\n    \"white\": to-rgb($white),\n    \"body\": to-rgb($body-bg)\n  )\n) !default;\n$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, \"$key\", \"bg\") !default;\n// scss-docs-end utilities-bg-colors\n\n// Links\n//\n// Style anchor elements.\n\n$link-color:                              $primary !default;\n$link-decoration:                         underline !default;\n$link-shade-percentage:                   20% !default;\n$link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;\n$link-hover-decoration:                   null !default;\n\n$stretched-link-pseudo-element:           after !default;\n$stretched-link-z-index:                  1 !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom:   1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n// scss-docs-start grid-breakpoints\n$grid-breakpoints: (\n  xs: 0,\n  sm: 576px,\n  md: 768px,\n  lg: 992px,\n  xl: 1200px,\n  xxl: 1400px\n) !default;\n// scss-docs-end grid-breakpoints\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n// scss-docs-start container-max-widths\n$container-max-widths: (\n  sm: 540px,\n  md: 720px,\n  lg: 960px,\n  xl: 1140px,\n  xxl: 1320px\n) !default;\n// scss-docs-end container-max-widths\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns:                12 !default;\n$grid-gutter-width:           1.5rem !default;\n$grid-row-columns:            6 !default;\n\n$gutters: $spacers !default;\n\n// Container padding\n\n$container-padding-x: $grid-gutter-width * .5 !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n// scss-docs-start border-variables\n$border-width:                1px !default;\n$border-widths: (\n  1: 1px,\n  2: 2px,\n  3: 3px,\n  4: 4px,\n  5: 5px\n) !default;\n\n$border-color:                $gray-300 !default;\n// scss-docs-end border-variables\n\n// scss-docs-start border-radius-variables\n$border-radius:               .25rem !default;\n$border-radius-sm:            .2rem !default;\n$border-radius-lg:            .3rem !default;\n$border-radius-pill:          50rem !default;\n// scss-docs-end border-radius-variables\n\n// scss-docs-start box-shadow-variables\n$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;\n$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;\n// scss-docs-end box-shadow-variables\n\n$component-active-color:      $white !default;\n$component-active-bg:         $primary !default;\n\n// scss-docs-start caret-variables\n$caret-width:                 .3em !default;\n$caret-vertical-align:        $caret-width * .85 !default;\n$caret-spacing:               $caret-width * .85 !default;\n// scss-docs-end caret-variables\n\n$transition-base:             all .2s ease-in-out !default;\n$transition-fade:             opacity .15s linear !default;\n// scss-docs-start collapse-transition\n$transition-collapse:         height .35s ease !default;\n$transition-collapse-width:   width .35s ease !default;\n// scss-docs-end collapse-transition\n\n// stylelint-disable function-disallowed-list\n// scss-docs-start aspect-ratios\n$aspect-ratios: (\n  \"1x1\": 100%,\n  \"4x3\": calc(3 / 4 * 100%),\n  \"16x9\": calc(9 / 16 * 100%),\n  \"21x9\": calc(9 / 21 * 100%)\n) !default;\n// scss-docs-end aspect-ratios\n// stylelint-enable function-disallowed-list\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// scss-docs-start font-variables\n// stylelint-disable value-keyword-case\n$font-family-sans-serif:      system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n// stylelint-enable value-keyword-case\n$font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;\n$font-family-code:            var(--#{$variable-prefix}font-monospace) !default;\n\n// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins\n// $font-size-base affects the font size of the body text\n$font-size-root:              null !default;\n$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`\n$font-size-sm:                $font-size-base * .875 !default;\n$font-size-lg:                $font-size-base * 1.25 !default;\n\n$font-weight-lighter:         lighter !default;\n$font-weight-light:           300 !default;\n$font-weight-normal:          400 !default;\n$font-weight-bold:            700 !default;\n$font-weight-bolder:          bolder !default;\n\n$font-weight-base:            $font-weight-normal !default;\n\n$line-height-base:            1.5 !default;\n$line-height-sm:              1.25 !default;\n$line-height-lg:              2 !default;\n\n$h1-font-size:                $font-size-base * 2.5 !default;\n$h2-font-size:                $font-size-base * 2 !default;\n$h3-font-size:                $font-size-base * 1.75 !default;\n$h4-font-size:                $font-size-base * 1.5 !default;\n$h5-font-size:                $font-size-base * 1.25 !default;\n$h6-font-size:                $font-size-base !default;\n// scss-docs-end font-variables\n\n// scss-docs-start font-sizes\n$font-sizes: (\n  1: $h1-font-size,\n  2: $h2-font-size,\n  3: $h3-font-size,\n  4: $h4-font-size,\n  5: $h5-font-size,\n  6: $h6-font-size\n) !default;\n// scss-docs-end font-sizes\n\n// scss-docs-start headings-variables\n$headings-margin-bottom:      $spacer * .5 !default;\n$headings-font-family:        null !default;\n$headings-font-style:         null !default;\n$headings-font-weight:        500 !default;\n$headings-line-height:        1.2 !default;\n$headings-color:              null !default;\n// scss-docs-end headings-variables\n\n// scss-docs-start display-headings\n$display-font-sizes: (\n  1: 5rem,\n  2: 4.5rem,\n  3: 4rem,\n  4: 3.5rem,\n  5: 3rem,\n  6: 2.5rem\n) !default;\n\n$display-font-weight: 300 !default;\n$display-line-height: $headings-line-height !default;\n// scss-docs-end display-headings\n\n// scss-docs-start type-variables\n$lead-font-size:              $font-size-base * 1.25 !default;\n$lead-font-weight:            300 !default;\n\n$small-font-size:             .875em !default;\n\n$sub-sup-font-size:           .75em !default;\n\n$text-muted:                  $gray-600 !default;\n\n$initialism-font-size:        $small-font-size !default;\n\n$blockquote-margin-y:         $spacer !default;\n$blockquote-font-size:        $font-size-base * 1.25 !default;\n$blockquote-footer-color:     $gray-600 !default;\n$blockquote-footer-font-size: $small-font-size !default;\n\n$hr-margin-y:                 $spacer !default;\n$hr-color:                    inherit !default;\n$hr-height:                   $border-width !default;\n$hr-opacity:                  .25 !default;\n\n$legend-margin-bottom:        .5rem !default;\n$legend-font-size:            1.5rem !default;\n$legend-font-weight:          null !default;\n\n$mark-padding:                .2em !default;\n\n$dt-font-weight:              $font-weight-bold !default;\n\n$nested-kbd-font-weight:      $font-weight-bold !default;\n\n$list-inline-padding:         .5rem !default;\n\n$mark-bg:                     #fcf8e3 !default;\n// scss-docs-end type-variables\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n// scss-docs-start table-variables\n$table-cell-padding-y:        .5rem !default;\n$table-cell-padding-x:        .5rem !default;\n$table-cell-padding-y-sm:     .25rem !default;\n$table-cell-padding-x-sm:     .25rem !default;\n\n$table-cell-vertical-align:   top !default;\n\n$table-color:                 $body-color !default;\n$table-bg:                    transparent !default;\n$table-accent-bg:             transparent !default;\n\n$table-th-font-weight:        null !default;\n\n$table-striped-color:         $table-color !default;\n$table-striped-bg-factor:     .05 !default;\n$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;\n\n$table-active-color:          $table-color !default;\n$table-active-bg-factor:      .1 !default;\n$table-active-bg:             rgba($black, $table-active-bg-factor) !default;\n\n$table-hover-color:           $table-color !default;\n$table-hover-bg-factor:       .075 !default;\n$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;\n\n$table-border-factor:         .1 !default;\n$table-border-width:          $border-width !default;\n$table-border-color:          $border-color !default;\n\n$table-striped-order:         odd !default;\n\n$table-group-separator-color: currentColor !default;\n\n$table-caption-color:         $text-muted !default;\n\n$table-bg-scale:              -80% !default;\n// scss-docs-end table-variables\n\n// scss-docs-start table-loop\n$table-variants: (\n  \"primary\":    shift-color($primary, $table-bg-scale),\n  \"secondary\":  shift-color($secondary, $table-bg-scale),\n  \"success\":    shift-color($success, $table-bg-scale),\n  \"info\":       shift-color($info, $table-bg-scale),\n  \"warning\":    shift-color($warning, $table-bg-scale),\n  \"danger\":     shift-color($danger, $table-bg-scale),\n  \"light\":      $light,\n  \"dark\":       $dark,\n) !default;\n// scss-docs-end table-loop\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n// scss-docs-start input-btn-variables\n$input-btn-padding-y:         .375rem !default;\n$input-btn-padding-x:         .75rem !default;\n$input-btn-font-family:       null !default;\n$input-btn-font-size:         $font-size-base !default;\n$input-btn-line-height:       $line-height-base !default;\n\n$input-btn-focus-width:         .25rem !default;\n$input-btn-focus-color-opacity: .25 !default;\n$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;\n$input-btn-focus-blur:          0 !default;\n$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm:      .25rem !default;\n$input-btn-padding-x-sm:      .5rem !default;\n$input-btn-font-size-sm:      $font-size-sm !default;\n\n$input-btn-padding-y-lg:      .5rem !default;\n$input-btn-padding-x-lg:      1rem !default;\n$input-btn-font-size-lg:      $font-size-lg !default;\n\n$input-btn-border-width:      $border-width !default;\n// scss-docs-end input-btn-variables\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n// scss-docs-start btn-variables\n$btn-padding-y:               $input-btn-padding-y !default;\n$btn-padding-x:               $input-btn-padding-x !default;\n$btn-font-family:             $input-btn-font-family !default;\n$btn-font-size:               $input-btn-font-size !default;\n$btn-line-height:             $input-btn-line-height !default;\n$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping\n\n$btn-padding-y-sm:            $input-btn-padding-y-sm !default;\n$btn-padding-x-sm:            $input-btn-padding-x-sm !default;\n$btn-font-size-sm:            $input-btn-font-size-sm !default;\n\n$btn-padding-y-lg:            $input-btn-padding-y-lg !default;\n$btn-padding-x-lg:            $input-btn-padding-x-lg !default;\n$btn-font-size-lg:            $input-btn-font-size-lg !default;\n\n$btn-border-width:            $input-btn-border-width !default;\n\n$btn-font-weight:             $font-weight-normal !default;\n$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width:             $input-btn-focus-width !default;\n$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity:        .65 !default;\n$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-color:              $link-color !default;\n$btn-link-hover-color:        $link-hover-color !default;\n$btn-link-disabled-color:     $gray-600 !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius:           $border-radius !default;\n$btn-border-radius-sm:        $border-radius-sm !default;\n$btn-border-radius-lg:        $border-radius-lg !default;\n\n$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$btn-hover-bg-shade-amount:       15% !default;\n$btn-hover-bg-tint-amount:        15% !default;\n$btn-hover-border-shade-amount:   20% !default;\n$btn-hover-border-tint-amount:    10% !default;\n$btn-active-bg-shade-amount:      20% !default;\n$btn-active-bg-tint-amount:       20% !default;\n$btn-active-border-shade-amount:  25% !default;\n$btn-active-border-tint-amount:   10% !default;\n// scss-docs-end btn-variables\n\n\n// Forms\n\n// scss-docs-start form-text-variables\n$form-text-margin-top:                  .25rem !default;\n$form-text-font-size:                   $small-font-size !default;\n$form-text-font-style:                  null !default;\n$form-text-font-weight:                 null !default;\n$form-text-color:                       $text-muted !default;\n// scss-docs-end form-text-variables\n\n// scss-docs-start form-label-variables\n$form-label-margin-bottom:              .5rem !default;\n$form-label-font-size:                  null !default;\n$form-label-font-style:                 null !default;\n$form-label-font-weight:                null !default;\n$form-label-color:                      null !default;\n// scss-docs-end form-label-variables\n\n// scss-docs-start form-input-variables\n$input-padding-y:                       $input-btn-padding-y !default;\n$input-padding-x:                       $input-btn-padding-x !default;\n$input-font-family:                     $input-btn-font-family !default;\n$input-font-size:                       $input-btn-font-size !default;\n$input-font-weight:                     $font-weight-base !default;\n$input-line-height:                     $input-btn-line-height !default;\n\n$input-padding-y-sm:                    $input-btn-padding-y-sm !default;\n$input-padding-x-sm:                    $input-btn-padding-x-sm !default;\n$input-font-size-sm:                    $input-btn-font-size-sm !default;\n\n$input-padding-y-lg:                    $input-btn-padding-y-lg !default;\n$input-padding-x-lg:                    $input-btn-padding-x-lg !default;\n$input-font-size-lg:                    $input-btn-font-size-lg !default;\n\n$input-bg:                              $body-bg !default;\n$input-disabled-bg:                     $gray-200 !default;\n$input-disabled-border-color:           null !default;\n\n$input-color:                           $body-color !default;\n$input-border-color:                    $gray-400 !default;\n$input-border-width:                    $input-btn-border-width !default;\n$input-box-shadow:                      $box-shadow-inset !default;\n\n$input-border-radius:                   $border-radius !default;\n$input-border-radius-sm:                $border-radius-sm !default;\n$input-border-radius-lg:                $border-radius-lg !default;\n\n$input-focus-bg:                        $input-bg !default;\n$input-focus-border-color:              tint-color($component-active-bg, 50%) !default;\n$input-focus-color:                     $input-color !default;\n$input-focus-width:                     $input-btn-focus-width !default;\n$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color:               $gray-600 !default;\n$input-plaintext-color:                 $body-color !default;\n\n$input-height-border:                   $input-border-width * 2 !default;\n\n$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;\n$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;\n$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;\n\n$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;\n$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;\n$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;\n\n$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$form-color-width:                      3rem !default;\n// scss-docs-end form-input-variables\n\n// scss-docs-start form-check-variables\n$form-check-input-width:                  1em !default;\n$form-check-min-height:                   $font-size-base * $line-height-base !default;\n$form-check-padding-start:                $form-check-input-width + .5em !default;\n$form-check-margin-bottom:                .125rem !default;\n$form-check-label-color:                  null !default;\n$form-check-label-cursor:                 null !default;\n$form-check-transition:                   null !default;\n\n$form-check-input-active-filter:          brightness(90%) !default;\n\n$form-check-input-bg:                     $input-bg !default;\n$form-check-input-border:                 1px solid rgba($black, .25) !default;\n$form-check-input-border-radius:          .25em !default;\n$form-check-radio-border-radius:          50% !default;\n$form-check-input-focus-border:           $input-focus-border-color !default;\n$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;\n\n$form-check-input-checked-color:          $component-active-color !default;\n$form-check-input-checked-bg-color:       $component-active-bg !default;\n$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;\n$form-check-input-checked-bg-image:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>\") !default;\n$form-check-radio-checked-bg-image:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>\") !default;\n\n$form-check-input-indeterminate-color:          $component-active-color !default;\n$form-check-input-indeterminate-bg-color:       $component-active-bg !default;\n$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;\n$form-check-input-indeterminate-bg-image:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>\") !default;\n\n$form-check-input-disabled-opacity:        .5 !default;\n$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;\n$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;\n\n$form-check-inline-margin-end:    1rem !default;\n// scss-docs-end form-check-variables\n\n// scss-docs-start form-switch-variables\n$form-switch-color:               rgba($black, .25) !default;\n$form-switch-width:               2em !default;\n$form-switch-padding-start:       $form-switch-width + .5em !default;\n$form-switch-bg-image:            url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>\") !default;\n$form-switch-border-radius:       $form-switch-width !default;\n$form-switch-transition:          background-position .15s ease-in-out !default;\n\n$form-switch-focus-color:         $input-focus-border-color !default;\n$form-switch-focus-bg-image:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>\") !default;\n\n$form-switch-checked-color:       $component-active-color !default;\n$form-switch-checked-bg-image:    url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>\") !default;\n$form-switch-checked-bg-position: right center !default;\n// scss-docs-end form-switch-variables\n\n// scss-docs-start input-group-variables\n$input-group-addon-padding-y:           $input-padding-y !default;\n$input-group-addon-padding-x:           $input-padding-x !default;\n$input-group-addon-font-weight:         $input-font-weight !default;\n$input-group-addon-color:               $input-color !default;\n$input-group-addon-bg:                  $gray-200 !default;\n$input-group-addon-border-color:        $input-border-color !default;\n// scss-docs-end input-group-variables\n\n// scss-docs-start form-select-variables\n$form-select-padding-y:             $input-padding-y !default;\n$form-select-padding-x:             $input-padding-x !default;\n$form-select-font-family:           $input-font-family !default;\n$form-select-font-size:             $input-font-size !default;\n$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image\n$form-select-font-weight:           $input-font-weight !default;\n$form-select-line-height:           $input-line-height !default;\n$form-select-color:                 $input-color !default;\n$form-select-bg:                    $input-bg !default;\n$form-select-disabled-color:        null !default;\n$form-select-disabled-bg:           $gray-200 !default;\n$form-select-disabled-border-color: $input-disabled-border-color !default;\n$form-select-bg-position:           right $form-select-padding-x center !default;\n$form-select-bg-size:               16px 12px !default; // In pixels because image dimensions\n$form-select-indicator-color:       $gray-800 !default;\n$form-select-indicator:             url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>\") !default;\n\n$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;\n$form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;\n$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;\n\n$form-select-border-width:        $input-border-width !default;\n$form-select-border-color:        $input-border-color !default;\n$form-select-border-radius:       $input-border-radius !default;\n$form-select-box-shadow:          $box-shadow-inset !default;\n\n$form-select-focus-border-color:  $input-focus-border-color !default;\n$form-select-focus-width:         $input-focus-width !default;\n$form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color !default;\n\n$form-select-padding-y-sm:        $input-padding-y-sm !default;\n$form-select-padding-x-sm:        $input-padding-x-sm !default;\n$form-select-font-size-sm:        $input-font-size-sm !default;\n$form-select-border-radius-sm:    $input-border-radius-sm !default;\n\n$form-select-padding-y-lg:        $input-padding-y-lg !default;\n$form-select-padding-x-lg:        $input-padding-x-lg !default;\n$form-select-font-size-lg:        $input-font-size-lg !default;\n$form-select-border-radius-lg:    $input-border-radius-lg !default;\n\n$form-select-transition:          $input-transition !default;\n// scss-docs-end form-select-variables\n\n// scss-docs-start form-range-variables\n$form-range-track-width:          100% !default;\n$form-range-track-height:         .5rem !default;\n$form-range-track-cursor:         pointer !default;\n$form-range-track-bg:             $gray-300 !default;\n$form-range-track-border-radius:  1rem !default;\n$form-range-track-box-shadow:     $box-shadow-inset !default;\n\n$form-range-thumb-width:                   1rem !default;\n$form-range-thumb-height:                  $form-range-thumb-width !default;\n$form-range-thumb-bg:                      $component-active-bg !default;\n$form-range-thumb-border:                  0 !default;\n$form-range-thumb-border-radius:           1rem !default;\n$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;\n$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;\n$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge\n$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;\n$form-range-thumb-disabled-bg:             $gray-500 !default;\n$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n// scss-docs-end form-range-variables\n\n// scss-docs-start form-file-variables\n$form-file-button-color:          $input-color !default;\n$form-file-button-bg:             $input-group-addon-bg !default;\n$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;\n// scss-docs-end form-file-variables\n\n// scss-docs-start form-floating-variables\n$form-floating-height:            add(3.5rem, $input-height-border) !default;\n$form-floating-line-height:       1.25 !default;\n$form-floating-padding-x:         $input-padding-x !default;\n$form-floating-padding-y:         1rem !default;\n$form-floating-input-padding-t:   1.625rem !default;\n$form-floating-input-padding-b:   .625rem !default;\n$form-floating-label-opacity:     .65 !default;\n$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;\n$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;\n// scss-docs-end form-floating-variables\n\n// Form validation\n\n// scss-docs-start form-feedback-variables\n$form-feedback-margin-top:          $form-text-margin-top !default;\n$form-feedback-font-size:           $form-text-font-size !default;\n$form-feedback-font-style:          $form-text-font-style !default;\n$form-feedback-valid-color:         $success !default;\n$form-feedback-invalid-color:       $danger !default;\n\n$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;\n$form-feedback-icon-valid:          url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>\") !default;\n$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;\n$form-feedback-icon-invalid:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>\") !default;\n// scss-docs-end form-feedback-variables\n\n// scss-docs-start form-validation-states\n$form-validation-states: (\n  \"valid\": (\n    \"color\": $form-feedback-valid-color,\n    \"icon\": $form-feedback-icon-valid\n  ),\n  \"invalid\": (\n    \"color\": $form-feedback-invalid-color,\n    \"icon\": $form-feedback-icon-invalid\n  )\n) !default;\n// scss-docs-end form-validation-states\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n// scss-docs-start zindex-stack\n$zindex-dropdown:                   1000 !default;\n$zindex-sticky:                     1020 !default;\n$zindex-fixed:                      1030 !default;\n$zindex-offcanvas-backdrop:         1040 !default;\n$zindex-offcanvas:                  1045 !default;\n$zindex-modal-backdrop:             1050 !default;\n$zindex-modal:                      1055 !default;\n$zindex-popover:                    1070 !default;\n$zindex-tooltip:                    1080 !default;\n// scss-docs-end zindex-stack\n\n\n// Navs\n\n// scss-docs-start nav-variables\n$nav-link-padding-y:                .5rem !default;\n$nav-link-padding-x:                1rem !default;\n$nav-link-font-size:                null !default;\n$nav-link-font-weight:              null !default;\n$nav-link-color:                    $link-color !default;\n$nav-link-hover-color:              $link-hover-color !default;\n$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;\n$nav-link-disabled-color:           $gray-600 !default;\n\n$nav-tabs-border-color:             $gray-300 !default;\n$nav-tabs-border-width:             $border-width !default;\n$nav-tabs-border-radius:            $border-radius !default;\n$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;\n$nav-tabs-link-active-color:        $gray-700 !default;\n$nav-tabs-link-active-bg:           $body-bg !default;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;\n\n$nav-pills-border-radius:           $border-radius !default;\n$nav-pills-link-active-color:       $component-active-color !default;\n$nav-pills-link-active-bg:          $component-active-bg !default;\n// scss-docs-end nav-variables\n\n\n// Navbar\n\n// scss-docs-start navbar-variables\n$navbar-padding-y:                  $spacer * .5 !default;\n$navbar-padding-x:                  null !default;\n\n$navbar-nav-link-padding-x:         .5rem !default;\n\n$navbar-brand-font-size:            $font-size-lg !default;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;\n$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5 !default;\n$navbar-brand-margin-end:           1rem !default;\n\n$navbar-toggler-padding-y:          .25rem !default;\n$navbar-toggler-padding-x:          .75rem !default;\n$navbar-toggler-font-size:          $font-size-lg !default;\n$navbar-toggler-border-radius:      $btn-border-radius !default;\n$navbar-toggler-focus-width:        $btn-focus-width !default;\n$navbar-toggler-transition:         box-shadow .15s ease-in-out !default;\n// scss-docs-end navbar-variables\n\n// scss-docs-start navbar-theme-variables\n$navbar-dark-color:                 rgba($white, .55) !default;\n$navbar-dark-hover-color:           rgba($white, .75) !default;\n$navbar-dark-active-color:          $white !default;\n$navbar-dark-disabled-color:        rgba($white, .25) !default;\n$navbar-dark-toggler-icon-bg:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-dark-toggler-border-color:  rgba($white, .1) !default;\n\n$navbar-light-color:                rgba($black, .55) !default;\n$navbar-light-hover-color:          rgba($black, .7) !default;\n$navbar-light-active-color:         rgba($black, .9) !default;\n$navbar-light-disabled-color:       rgba($black, .3) !default;\n$navbar-light-toggler-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>\") !default;\n$navbar-light-toggler-border-color: rgba($black, .1) !default;\n\n$navbar-light-brand-color:                $navbar-light-active-color !default;\n$navbar-light-brand-hover-color:          $navbar-light-active-color !default;\n$navbar-dark-brand-color:                 $navbar-dark-active-color !default;\n$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;\n// scss-docs-end navbar-theme-variables\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n// scss-docs-start dropdown-variables\n$dropdown-min-width:                10rem !default;\n$dropdown-padding-x:                0 !default;\n$dropdown-padding-y:                .5rem !default;\n$dropdown-spacer:                   .125rem !default;\n$dropdown-font-size:                $font-size-base !default;\n$dropdown-color:                    $body-color !default;\n$dropdown-bg:                       $white !default;\n$dropdown-border-color:             rgba($black, .15) !default;\n$dropdown-border-radius:            $border-radius !default;\n$dropdown-border-width:             $border-width !default;\n$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;\n$dropdown-divider-bg:               $dropdown-border-color !default;\n$dropdown-divider-margin-y:         $spacer * .5 !default;\n$dropdown-box-shadow:               $box-shadow !default;\n\n$dropdown-link-color:               $gray-900 !default;\n$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%) !default;\n$dropdown-link-hover-bg:            $gray-200 !default;\n\n$dropdown-link-active-color:        $component-active-color !default;\n$dropdown-link-active-bg:           $component-active-bg !default;\n\n$dropdown-link-disabled-color:      $gray-500 !default;\n\n$dropdown-item-padding-y:           $spacer * .25 !default;\n$dropdown-item-padding-x:           $spacer !default;\n\n$dropdown-header-color:             $gray-600 !default;\n$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;\n// scss-docs-end dropdown-variables\n\n// scss-docs-start dropdown-dark-variables\n$dropdown-dark-color:               $gray-300 !default;\n$dropdown-dark-bg:                  $gray-800 !default;\n$dropdown-dark-border-color:        $dropdown-border-color !default;\n$dropdown-dark-divider-bg:          $dropdown-divider-bg !default;\n$dropdown-dark-box-shadow:          null !default;\n$dropdown-dark-link-color:          $dropdown-dark-color !default;\n$dropdown-dark-link-hover-color:    $white !default;\n$dropdown-dark-link-hover-bg:       rgba($white, .15) !default;\n$dropdown-dark-link-active-color:   $dropdown-link-active-color !default;\n$dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;\n$dropdown-dark-link-disabled-color: $gray-500 !default;\n$dropdown-dark-header-color:        $gray-500 !default;\n// scss-docs-end dropdown-dark-variables\n\n\n// Pagination\n\n// scss-docs-start pagination-variables\n$pagination-padding-y:              .375rem !default;\n$pagination-padding-x:              .75rem !default;\n$pagination-padding-y-sm:           .25rem !default;\n$pagination-padding-x-sm:           .5rem !default;\n$pagination-padding-y-lg:           .75rem !default;\n$pagination-padding-x-lg:           1.5rem !default;\n\n$pagination-color:                  $link-color !default;\n$pagination-bg:                     $white !default;\n$pagination-border-width:           $border-width !default;\n$pagination-border-radius:          $border-radius !default;\n$pagination-margin-start:           -$pagination-border-width !default;\n$pagination-border-color:           $gray-300 !default;\n\n$pagination-focus-color:            $link-hover-color !default;\n$pagination-focus-bg:               $gray-200 !default;\n$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;\n$pagination-focus-outline:          0 !default;\n\n$pagination-hover-color:            $link-hover-color !default;\n$pagination-hover-bg:               $gray-200 !default;\n$pagination-hover-border-color:     $gray-300 !default;\n\n$pagination-active-color:           $component-active-color !default;\n$pagination-active-bg:              $component-active-bg !default;\n$pagination-active-border-color:    $pagination-active-bg !default;\n\n$pagination-disabled-color:         $gray-600 !default;\n$pagination-disabled-bg:            $white !default;\n$pagination-disabled-border-color:  $gray-300 !default;\n\n$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$pagination-border-radius-sm:       $border-radius-sm !default;\n$pagination-border-radius-lg:       $border-radius-lg !default;\n// scss-docs-end pagination-variables\n\n\n// Placeholders\n\n// scss-docs-start placeholders\n$placeholder-opacity-max:           .5 !default;\n$placeholder-opacity-min:           .2 !default;\n// scss-docs-end placeholders\n\n// Cards\n\n// scss-docs-start card-variables\n$card-spacer-y:                     $spacer !default;\n$card-spacer-x:                     $spacer !default;\n$card-title-spacer-y:               $spacer * .5 !default;\n$card-border-width:                 $border-width !default;\n$card-border-color:                 rgba($black, .125) !default;\n$card-border-radius:                $border-radius !default;\n$card-box-shadow:                   null !default;\n$card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;\n$card-cap-padding-y:                $card-spacer-y * .5 !default;\n$card-cap-padding-x:                $card-spacer-x !default;\n$card-cap-bg:                       rgba($black, .03) !default;\n$card-cap-color:                    null !default;\n$card-height:                       null !default;\n$card-color:                        null !default;\n$card-bg:                           $white !default;\n$card-img-overlay-padding:          $spacer !default;\n$card-group-margin:                 $grid-gutter-width * .5 !default;\n// scss-docs-end card-variables\n\n// Accordion\n\n// scss-docs-start accordion-variables\n$accordion-padding-y:                     1rem !default;\n$accordion-padding-x:                     1.25rem !default;\n$accordion-color:                         $body-color !default;\n$accordion-bg:                            $body-bg !default;\n$accordion-border-width:                  $border-width !default;\n$accordion-border-color:                  rgba($black, .125) !default;\n$accordion-border-radius:                 $border-radius !default;\n$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;\n\n$accordion-body-padding-y:                $accordion-padding-y !default;\n$accordion-body-padding-x:                $accordion-padding-x !default;\n\n$accordion-button-padding-y:              $accordion-padding-y !default;\n$accordion-button-padding-x:              $accordion-padding-x !default;\n$accordion-button-color:                  $accordion-color !default;\n$accordion-button-bg:                     $accordion-bg !default;\n$accordion-transition:                    $btn-transition, border-radius .15s ease !default;\n$accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;\n$accordion-button-active-color:           shade-color($primary, 10%) !default;\n\n$accordion-button-focus-border-color:     $input-focus-border-color !default;\n$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;\n\n$accordion-icon-width:                    1.25rem !default;\n$accordion-icon-color:                    $accordion-button-color !default;\n$accordion-icon-active-color:             $accordion-button-active-color !default;\n$accordion-icon-transition:               transform .2s ease-in-out !default;\n$accordion-icon-transform:                rotate(-180deg) !default;\n\n$accordion-button-icon:         url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>\") !default;\n$accordion-button-active-icon:  url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>\") !default;\n// scss-docs-end accordion-variables\n\n// Tooltips\n\n// scss-docs-start tooltip-variables\n$tooltip-font-size:                 $font-size-sm !default;\n$tooltip-max-width:                 200px !default;\n$tooltip-color:                     $white !default;\n$tooltip-bg:                        $black !default;\n$tooltip-border-radius:             $border-radius !default;\n$tooltip-opacity:                   .9 !default;\n$tooltip-padding-y:                 $spacer * .25 !default;\n$tooltip-padding-x:                 $spacer * .5 !default;\n$tooltip-margin:                    0 !default;\n\n$tooltip-arrow-width:               .8rem !default;\n$tooltip-arrow-height:              .4rem !default;\n$tooltip-arrow-color:               $tooltip-bg !default;\n// scss-docs-end tooltip-variables\n\n// Form tooltips must come after regular tooltips\n// scss-docs-start tooltip-feedback-variables\n$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;\n$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;\n$form-feedback-tooltip-font-size:     $tooltip-font-size !default;\n$form-feedback-tooltip-line-height:   null !default;\n$form-feedback-tooltip-opacity:       $tooltip-opacity !default;\n$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;\n// scss-docs-end tooltip-feedback-variables\n\n\n// Popovers\n\n// scss-docs-start popover-variables\n$popover-font-size:                 $font-size-sm !default;\n$popover-bg:                        $white !default;\n$popover-max-width:                 276px !default;\n$popover-border-width:              $border-width !default;\n$popover-border-color:              rgba($black, .2) !default;\n$popover-border-radius:             $border-radius-lg !default;\n$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;\n$popover-box-shadow:                $box-shadow !default;\n\n$popover-header-bg:                 shade-color($popover-bg, 6%) !default;\n$popover-header-color:              $headings-color !default;\n$popover-header-padding-y:          .5rem !default;\n$popover-header-padding-x:          $spacer !default;\n\n$popover-body-color:                $body-color !default;\n$popover-body-padding-y:            $spacer !default;\n$popover-body-padding-x:            $spacer !default;\n\n$popover-arrow-width:               1rem !default;\n$popover-arrow-height:              .5rem !default;\n$popover-arrow-color:               $popover-bg !default;\n\n$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;\n// scss-docs-end popover-variables\n\n\n// Toasts\n\n// scss-docs-start toast-variables\n$toast-max-width:                   350px !default;\n$toast-padding-x:                   .75rem !default;\n$toast-padding-y:                   .5rem !default;\n$toast-font-size:                   .875rem !default;\n$toast-color:                       null !default;\n$toast-background-color:            rgba($white, .85) !default;\n$toast-border-width:                1px !default;\n$toast-border-color:                rgba($black, .1) !default;\n$toast-border-radius:               $border-radius !default;\n$toast-box-shadow:                  $box-shadow !default;\n$toast-spacing:                     $container-padding-x !default;\n\n$toast-header-color:                $gray-600 !default;\n$toast-header-background-color:     rgba($white, .85) !default;\n$toast-header-border-color:         rgba($black, .05) !default;\n// scss-docs-end toast-variables\n\n\n// Badges\n\n// scss-docs-start badge-variables\n$badge-font-size:                   .75em !default;\n$badge-font-weight:                 $font-weight-bold !default;\n$badge-color:                       $white !default;\n$badge-padding-y:                   .35em !default;\n$badge-padding-x:                   .65em !default;\n$badge-border-radius:               $border-radius !default;\n// scss-docs-end badge-variables\n\n\n// Modals\n\n// scss-docs-start modal-variables\n$modal-inner-padding:               $spacer !default;\n\n$modal-footer-margin-between:       .5rem !default;\n\n$modal-dialog-margin:               .5rem !default;\n$modal-dialog-margin-y-sm-up:       1.75rem !default;\n\n$modal-title-line-height:           $line-height-base !default;\n\n$modal-content-color:               null !default;\n$modal-content-bg:                  $white !default;\n$modal-content-border-color:        rgba($black, .2) !default;\n$modal-content-border-width:        $border-width !default;\n$modal-content-border-radius:       $border-radius-lg !default;\n$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;\n$modal-content-box-shadow-xs:       $box-shadow-sm !default;\n$modal-content-box-shadow-sm-up:    $box-shadow !default;\n\n$modal-backdrop-bg:                 $black !default;\n$modal-backdrop-opacity:            .5 !default;\n$modal-header-border-color:         $border-color !default;\n$modal-footer-border-color:         $modal-header-border-color !default;\n$modal-header-border-width:         $modal-content-border-width !default;\n$modal-footer-border-width:         $modal-header-border-width !default;\n$modal-header-padding-y:            $modal-inner-padding !default;\n$modal-header-padding-x:            $modal-inner-padding !default;\n$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\n\n$modal-sm:                          300px !default;\n$modal-md:                          500px !default;\n$modal-lg:                          800px !default;\n$modal-xl:                          1140px !default;\n\n$modal-fade-transform:              translate(0, -50px) !default;\n$modal-show-transform:              none !default;\n$modal-transition:                  transform .3s ease-out !default;\n$modal-scale-transform:             scale(1.02) !default;\n// scss-docs-end modal-variables\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n// scss-docs-start alert-variables\n$alert-padding-y:               $spacer !default;\n$alert-padding-x:               $spacer !default;\n$alert-margin-bottom:           1rem !default;\n$alert-border-radius:           $border-radius !default;\n$alert-link-font-weight:        $font-weight-bold !default;\n$alert-border-width:            $border-width !default;\n$alert-bg-scale:                -80% !default;\n$alert-border-scale:            -70% !default;\n$alert-color-scale:             40% !default;\n$alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side\n// scss-docs-end alert-variables\n\n\n// Progress bars\n\n// scss-docs-start progress-variables\n$progress-height:                   1rem !default;\n$progress-font-size:                $font-size-base * .75 !default;\n$progress-bg:                       $gray-200 !default;\n$progress-border-radius:            $border-radius !default;\n$progress-box-shadow:               $box-shadow-inset !default;\n$progress-bar-color:                $white !default;\n$progress-bar-bg:                   $primary !default;\n$progress-bar-animation-timing:     1s linear infinite !default;\n$progress-bar-transition:           width .6s ease !default;\n// scss-docs-end progress-variables\n\n\n// List group\n\n// scss-docs-start list-group-variables\n$list-group-color:                  $gray-900 !default;\n$list-group-bg:                     $white !default;\n$list-group-border-color:           rgba($black, .125) !default;\n$list-group-border-width:           $border-width !default;\n$list-group-border-radius:          $border-radius !default;\n\n$list-group-item-padding-y:         $spacer * .5 !default;\n$list-group-item-padding-x:         $spacer !default;\n$list-group-item-bg-scale:          -80% !default;\n$list-group-item-color-scale:       40% !default;\n\n$list-group-hover-bg:               $gray-100 !default;\n$list-group-active-color:           $component-active-color !default;\n$list-group-active-bg:              $component-active-bg !default;\n$list-group-active-border-color:    $list-group-active-bg !default;\n\n$list-group-disabled-color:         $gray-600 !default;\n$list-group-disabled-bg:            $list-group-bg !default;\n\n$list-group-action-color:           $gray-700 !default;\n$list-group-action-hover-color:     $list-group-action-color !default;\n\n$list-group-action-active-color:    $body-color !default;\n$list-group-action-active-bg:       $gray-200 !default;\n// scss-docs-end list-group-variables\n\n\n// Image thumbnails\n\n// scss-docs-start thumbnail-variables\n$thumbnail-padding:                 .25rem !default;\n$thumbnail-bg:                      $body-bg !default;\n$thumbnail-border-width:            $border-width !default;\n$thumbnail-border-color:            $gray-300 !default;\n$thumbnail-border-radius:           $border-radius !default;\n$thumbnail-box-shadow:              $box-shadow-sm !default;\n// scss-docs-end thumbnail-variables\n\n\n// Figures\n\n// scss-docs-start figure-variables\n$figure-caption-font-size:          $small-font-size !default;\n$figure-caption-color:              $gray-600 !default;\n// scss-docs-end figure-variables\n\n\n// Breadcrumbs\n\n// scss-docs-start breadcrumb-variables\n$breadcrumb-font-size:              null !default;\n$breadcrumb-padding-y:              0 !default;\n$breadcrumb-padding-x:              0 !default;\n$breadcrumb-item-padding-x:         .5rem !default;\n$breadcrumb-margin-bottom:          1rem !default;\n$breadcrumb-bg:                     null !default;\n$breadcrumb-divider-color:          $gray-600 !default;\n$breadcrumb-active-color:           $gray-600 !default;\n$breadcrumb-divider:                quote(\"/\") !default;\n$breadcrumb-divider-flipped:        $breadcrumb-divider !default;\n$breadcrumb-border-radius:          null !default;\n// scss-docs-end breadcrumb-variables\n\n// Carousel\n\n// scss-docs-start carousel-variables\n$carousel-control-color:             $white !default;\n$carousel-control-width:             15% !default;\n$carousel-control-opacity:           .5 !default;\n$carousel-control-hover-opacity:     .9 !default;\n$carousel-control-transition:        opacity .15s ease !default;\n\n$carousel-indicator-width:           30px !default;\n$carousel-indicator-height:          3px !default;\n$carousel-indicator-hit-area-height: 10px !default;\n$carousel-indicator-spacer:          3px !default;\n$carousel-indicator-opacity:         .5 !default;\n$carousel-indicator-active-bg:       $white !default;\n$carousel-indicator-active-opacity:  1 !default;\n$carousel-indicator-transition:      opacity .6s ease !default;\n\n$carousel-caption-width:             70% !default;\n$carousel-caption-color:             $white !default;\n$carousel-caption-padding-y:         1.25rem !default;\n$carousel-caption-spacer:            1.25rem !default;\n\n$carousel-control-icon-width:        2rem !default;\n\n$carousel-control-prev-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>\") !default;\n$carousel-control-next-icon-bg:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>\") !default;\n\n$carousel-transition-duration:       .6s !default;\n$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n$carousel-dark-indicator-active-bg:  $black !default;\n$carousel-dark-caption-color:        $black !default;\n$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;\n// scss-docs-end carousel-variables\n\n\n// Spinners\n\n// scss-docs-start spinner-variables\n$spinner-width:           2rem !default;\n$spinner-height:          $spinner-width !default;\n$spinner-vertical-align:  -.125em !default;\n$spinner-border-width:    .25em !default;\n$spinner-animation-speed: .75s !default;\n\n$spinner-width-sm:        1rem !default;\n$spinner-height-sm:       $spinner-width-sm !default;\n$spinner-border-width-sm: .2em !default;\n// scss-docs-end spinner-variables\n\n\n// Close\n\n// scss-docs-start close-variables\n$btn-close-width:            1em !default;\n$btn-close-height:           $btn-close-width !default;\n$btn-close-padding-x:        .25em !default;\n$btn-close-padding-y:        $btn-close-padding-x !default;\n$btn-close-color:            $black !default;\n$btn-close-bg:               url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>\") !default;\n$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;\n$btn-close-opacity:          .5 !default;\n$btn-close-hover-opacity:    .75 !default;\n$btn-close-focus-opacity:    1 !default;\n$btn-close-disabled-opacity: .25 !default;\n$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;\n// scss-docs-end close-variables\n\n\n// Offcanvas\n\n// scss-docs-start offcanvas-variables\n$offcanvas-padding-y:               $modal-inner-padding !default;\n$offcanvas-padding-x:               $modal-inner-padding !default;\n$offcanvas-horizontal-width:        400px !default;\n$offcanvas-vertical-height:         30vh !default;\n$offcanvas-transition-duration:     .3s !default;\n$offcanvas-border-color:            $modal-content-border-color !default;\n$offcanvas-border-width:            $modal-content-border-width !default;\n$offcanvas-title-line-height:       $modal-title-line-height !default;\n$offcanvas-bg-color:                $modal-content-bg !default;\n$offcanvas-color:                   $modal-content-color !default;\n$offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;\n$offcanvas-backdrop-bg:             $modal-backdrop-bg !default;\n$offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;\n// scss-docs-end offcanvas-variables\n\n// Code\n\n$code-font-size:                    $small-font-size !default;\n$code-color:                        $pink !default;\n\n$kbd-padding-y:                     .2rem !default;\n$kbd-padding-x:                     .4rem !default;\n$kbd-font-size:                     $code-font-size !default;\n$kbd-color:                         $white !default;\n$kbd-bg:                            $gray-900 !default;\n\n$pre-color:                         null !default;\n","// Select\n//\n// Replaces the browser default select with a custom one, mostly pulled from\n// https://primer.github.io/.\n\n.form-select {\n  display: block;\n  width: 100%;\n  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;\n  // stylelint-disable-next-line property-no-vendor-prefix\n  -moz-padding-start: subtract($form-select-padding-x, 3px); // See https://github.com/twbs/bootstrap/issues/32636\n  font-family: $form-select-font-family;\n  @include font-size($form-select-font-size);\n  font-weight: $form-select-font-weight;\n  line-height: $form-select-line-height;\n  color: $form-select-color;\n  background-color: $form-select-bg;\n  background-image: escape-svg($form-select-indicator);\n  background-repeat: no-repeat;\n  background-position: $form-select-bg-position;\n  background-size: $form-select-bg-size;\n  border: $form-select-border-width solid $form-select-border-color;\n  @include border-radius($form-select-border-radius, 0);\n  @include box-shadow($form-select-box-shadow);\n  @include transition($form-select-transition);\n  appearance: none;\n\n  &:focus {\n    border-color: $form-select-focus-border-color;\n    outline: 0;\n    @if $enable-shadows {\n      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);\n    } @else {\n      // Avoid using mixin so we can pass custom focus shadow properly\n      box-shadow: $form-select-focus-box-shadow;\n    }\n  }\n\n  &[multiple],\n  &[size]:not([size=\"1\"]) {\n    padding-right: $form-select-padding-x;\n    background-image: none;\n  }\n\n  &:disabled {\n    color: $form-select-disabled-color;\n    background-color: $form-select-disabled-bg;\n    border-color: $form-select-disabled-border-color;\n  }\n\n  // Remove outline from select box in FF\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 $form-select-color;\n  }\n}\n\n.form-select-sm {\n  padding-top: $form-select-padding-y-sm;\n  padding-bottom: $form-select-padding-y-sm;\n  padding-left: $form-select-padding-x-sm;\n  @include font-size($form-select-font-size-sm);\n  @include border-radius($form-select-border-radius-sm);\n}\n\n.form-select-lg {\n  padding-top: $form-select-padding-y-lg;\n  padding-bottom: $form-select-padding-y-lg;\n  padding-left: $form-select-padding-x-lg;\n  @include font-size($form-select-font-size-lg);\n  @include border-radius($form-select-border-radius-lg);\n}\n","//\n// Check/radio\n//\n\n.form-check {\n  display: block;\n  min-height: $form-check-min-height;\n  padding-left: $form-check-padding-start;\n  margin-bottom: $form-check-margin-bottom;\n\n  .form-check-input {\n    float: left;\n    margin-left: $form-check-padding-start * -1;\n  }\n}\n\n.form-check-input {\n  width: $form-check-input-width;\n  height: $form-check-input-width;\n  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height\n  vertical-align: top;\n  background-color: $form-check-input-bg;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  border: $form-check-input-border;\n  appearance: none;\n  color-adjust: exact; // Keep themed appearance for print\n  @include transition($form-check-transition);\n\n  &[type=\"checkbox\"] {\n    @include border-radius($form-check-input-border-radius);\n  }\n\n  &[type=\"radio\"] {\n    // stylelint-disable-next-line property-disallowed-list\n    border-radius: $form-check-radio-border-radius;\n  }\n\n  &:active {\n    filter: $form-check-input-active-filter;\n  }\n\n  &:focus {\n    border-color: $form-check-input-focus-border;\n    outline: 0;\n    box-shadow: $form-check-input-focus-box-shadow;\n  }\n\n  &:checked {\n    background-color: $form-check-input-checked-bg-color;\n    border-color: $form-check-input-checked-border-color;\n\n    &[type=\"checkbox\"] {\n      @if $enable-gradients {\n        background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);\n      } @else {\n        background-image: escape-svg($form-check-input-checked-bg-image);\n      }\n    }\n\n    &[type=\"radio\"] {\n      @if $enable-gradients {\n        background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);\n      } @else {\n        background-image: escape-svg($form-check-radio-checked-bg-image);\n      }\n    }\n  }\n\n  &[type=\"checkbox\"]:indeterminate {\n    background-color: $form-check-input-indeterminate-bg-color;\n    border-color: $form-check-input-indeterminate-border-color;\n\n    @if $enable-gradients {\n      background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);\n    } @else {\n      background-image: escape-svg($form-check-input-indeterminate-bg-image);\n    }\n  }\n\n  &:disabled {\n    pointer-events: none;\n    filter: none;\n    opacity: $form-check-input-disabled-opacity;\n  }\n\n  // Use disabled attribute in addition of :disabled pseudo-class\n  // See: https://github.com/twbs/bootstrap/issues/28247\n  &[disabled],\n  &:disabled {\n    ~ .form-check-label {\n      opacity: $form-check-label-disabled-opacity;\n    }\n  }\n}\n\n.form-check-label {\n  color: $form-check-label-color;\n  cursor: $form-check-label-cursor;\n}\n\n//\n// Switch\n//\n\n.form-switch {\n  padding-left: $form-switch-padding-start;\n\n  .form-check-input {\n    width: $form-switch-width;\n    margin-left: $form-switch-padding-start * -1;\n    background-image: escape-svg($form-switch-bg-image);\n    background-position: left center;\n    @include border-radius($form-switch-border-radius);\n    @include transition($form-switch-transition);\n\n    &:focus {\n      background-image: escape-svg($form-switch-focus-bg-image);\n    }\n\n    &:checked {\n      background-position: $form-switch-checked-bg-position;\n\n      @if $enable-gradients {\n        background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);\n      } @else {\n        background-image: escape-svg($form-switch-checked-bg-image);\n      }\n    }\n  }\n}\n\n.form-check-inline {\n  display: inline-block;\n  margin-right: $form-check-inline-margin-end;\n}\n\n.btn-check {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  pointer-events: none;\n\n  &[disabled],\n  &:disabled {\n    + .btn {\n      pointer-events: none;\n      filter: none;\n      opacity: $form-check-btn-check-disabled-opacity;\n    }\n  }\n}\n","// Range\n//\n// Style range inputs the same across browsers. Vendor-specific rules for pseudo\n// elements cannot be mixed. As such, there are no shared styles for focus or\n// active states on prefixed selectors.\n\n.form-range {\n  width: 100%;\n  height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);\n  padding: 0; // Need to reset padding\n  background-color: transparent;\n  appearance: none;\n\n  &:focus {\n    outline: 0;\n\n    // Pseudo-elements must be split across multiple rulesets to have an effect.\n    // No box-shadow() mixin for focus accessibility.\n    &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }\n    &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }\n  }\n\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-webkit-slider-thumb {\n    width: $form-range-thumb-width;\n    height: $form-range-thumb-height;\n    margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific\n    @include gradient-bg($form-range-thumb-bg);\n    border: $form-range-thumb-border;\n    @include border-radius($form-range-thumb-border-radius);\n    @include box-shadow($form-range-thumb-box-shadow);\n    @include transition($form-range-thumb-transition);\n    appearance: none;\n\n    &:active {\n      @include gradient-bg($form-range-thumb-active-bg);\n    }\n  }\n\n  &::-webkit-slider-runnable-track {\n    width: $form-range-track-width;\n    height: $form-range-track-height;\n    color: transparent; // Why?\n    cursor: $form-range-track-cursor;\n    background-color: $form-range-track-bg;\n    border-color: transparent;\n    @include border-radius($form-range-track-border-radius);\n    @include box-shadow($form-range-track-box-shadow);\n  }\n\n  &::-moz-range-thumb {\n    width: $form-range-thumb-width;\n    height: $form-range-thumb-height;\n    @include gradient-bg($form-range-thumb-bg);\n    border: $form-range-thumb-border;\n    @include border-radius($form-range-thumb-border-radius);\n    @include box-shadow($form-range-thumb-box-shadow);\n    @include transition($form-range-thumb-transition);\n    appearance: none;\n\n    &:active {\n      @include gradient-bg($form-range-thumb-active-bg);\n    }\n  }\n\n  &::-moz-range-track {\n    width: $form-range-track-width;\n    height: $form-range-track-height;\n    color: transparent;\n    cursor: $form-range-track-cursor;\n    background-color: $form-range-track-bg;\n    border-color: transparent; // Firefox specific?\n    @include border-radius($form-range-track-border-radius);\n    @include box-shadow($form-range-track-box-shadow);\n  }\n\n  &:disabled {\n    pointer-events: none;\n\n    &::-webkit-slider-thumb {\n      background-color: $form-range-thumb-disabled-bg;\n    }\n\n    &::-moz-range-thumb {\n      background-color: $form-range-thumb-disabled-bg;\n    }\n  }\n}\n",".form-floating {\n  position: relative;\n\n  > .form-control,\n  > .form-select {\n    height: $form-floating-height;\n    line-height: $form-floating-line-height;\n  }\n\n  > label {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%; // allow textareas\n    padding: $form-floating-padding-y $form-floating-padding-x;\n    pointer-events: none;\n    border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model\n    transform-origin: 0 0;\n    @include transition($form-floating-transition);\n  }\n\n  // stylelint-disable no-duplicate-selectors\n  > .form-control {\n    padding: $form-floating-padding-y $form-floating-padding-x;\n\n    &::placeholder {\n      color: transparent;\n    }\n\n    &:focus,\n    &:not(:placeholder-shown) {\n      padding-top: $form-floating-input-padding-t;\n      padding-bottom: $form-floating-input-padding-b;\n    }\n    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped\n    &:-webkit-autofill {\n      padding-top: $form-floating-input-padding-t;\n      padding-bottom: $form-floating-input-padding-b;\n    }\n  }\n\n  > .form-select {\n    padding-top: $form-floating-input-padding-t;\n    padding-bottom: $form-floating-input-padding-b;\n  }\n\n  > .form-control:focus,\n  > .form-control:not(:placeholder-shown),\n  > .form-select {\n    ~ label {\n      opacity: $form-floating-label-opacity;\n      transform: $form-floating-label-transform;\n    }\n  }\n  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped\n  > .form-control:-webkit-autofill {\n    ~ label {\n      opacity: $form-floating-label-opacity;\n      transform: $form-floating-label-transform;\n    }\n  }\n  // stylelint-enable no-duplicate-selectors\n}\n","//\n// Base styles\n//\n\n.input-group {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap; // For form validation feedback\n  align-items: stretch;\n  width: 100%;\n\n  > .form-control,\n  > .form-select {\n    position: relative; // For focus state's z-index\n    flex: 1 1 auto;\n    width: 1%;\n    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size\n  }\n\n  // Bring the \"active\" form control to the top of surrounding elements\n  > .form-control:focus,\n  > .form-select:focus {\n    z-index: 3;\n  }\n\n  // Ensure buttons are always above inputs for more visually pleasing borders.\n  // This isn't needed for `.input-group-text` since it shares the same border-color\n  // as our inputs.\n  .btn {\n    position: relative;\n    z-index: 2;\n\n    &:focus {\n      z-index: 3;\n    }\n  }\n}\n\n\n// Textual addons\n//\n// Serves as a catch-all element for any text or radio/checkbox input you wish\n// to prepend or append to an input.\n\n.input-group-text {\n  display: flex;\n  align-items: center;\n  padding: $input-group-addon-padding-y $input-group-addon-padding-x;\n  @include font-size($input-font-size); // Match inputs\n  font-weight: $input-group-addon-font-weight;\n  line-height: $input-line-height;\n  color: $input-group-addon-color;\n  text-align: center;\n  white-space: nowrap;\n  background-color: $input-group-addon-bg;\n  border: $input-border-width solid $input-group-addon-border-color;\n  @include border-radius($input-border-radius);\n}\n\n\n// Sizing\n//\n// Remix the default form control sizing classes into new ones for easier\n// manipulation.\n\n.input-group-lg > .form-control,\n.input-group-lg > .form-select,\n.input-group-lg > .input-group-text,\n.input-group-lg > .btn {\n  padding: $input-padding-y-lg $input-padding-x-lg;\n  @include font-size($input-font-size-lg);\n  @include border-radius($input-border-radius-lg);\n}\n\n.input-group-sm > .form-control,\n.input-group-sm > .form-select,\n.input-group-sm > .input-group-text,\n.input-group-sm > .btn {\n  padding: $input-padding-y-sm $input-padding-x-sm;\n  @include font-size($input-font-size-sm);\n  @include border-radius($input-border-radius-sm);\n}\n\n.input-group-lg > .form-select,\n.input-group-sm > .form-select {\n  padding-right: $form-select-padding-x + $form-select-indicator-padding;\n}\n\n\n// Rounded corners\n//\n// These rulesets must come after the sizing ones to properly override sm and lg\n// border-radius values when extending. They're more specific than we'd like\n// with the `.input-group >` part, but without it, we cannot override the sizing.\n\n// stylelint-disable-next-line no-duplicate-selectors\n.input-group {\n  &:not(.has-validation) {\n    > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),\n    > .dropdown-toggle:nth-last-child(n + 3) {\n      @include border-end-radius(0);\n    }\n  }\n\n  &.has-validation {\n    > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu),\n    > .dropdown-toggle:nth-last-child(n + 4) {\n      @include border-end-radius(0);\n    }\n  }\n\n  $validation-messages: \"\";\n  @each $state in map-keys($form-validation-states) {\n    $validation-messages: $validation-messages + \":not(.\" + unquote($state) + \"-tooltip)\" + \":not(.\" + unquote($state) + \"-feedback)\";\n  }\n\n  > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {\n    margin-left: -$input-border-width;\n    @include border-start-radius(0);\n  }\n}\n","// This mixin uses an `if()` technique to be compatible with Dart Sass\n// See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details\n\n// scss-docs-start form-validation-mixins\n@mixin form-validation-state-selector($state) {\n  @if ($state == \"valid\" or $state == \"invalid\") {\n    .was-validated #{if(&, \"&\", \"\")}:#{$state},\n    #{if(&, \"&\", \"\")}.is-#{$state} {\n      @content;\n    }\n  } @else {\n    #{if(&, \"&\", \"\")}.is-#{$state} {\n      @content;\n    }\n  }\n}\n\n@mixin form-validation-state(\n  $state,\n  $color,\n  $icon,\n  $tooltip-color: color-contrast($color),\n  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),\n  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity)\n) {\n  .#{$state}-feedback {\n    display: none;\n    width: 100%;\n    margin-top: $form-feedback-margin-top;\n    @include font-size($form-feedback-font-size);\n    font-style: $form-feedback-font-style;\n    color: $color;\n  }\n\n  .#{$state}-tooltip {\n    position: absolute;\n    top: 100%;\n    z-index: 5;\n    display: none;\n    max-width: 100%; // Contain to parent when possible\n    padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;\n    margin-top: .1rem;\n    @include font-size($form-feedback-tooltip-font-size);\n    line-height: $form-feedback-tooltip-line-height;\n    color: $tooltip-color;\n    background-color: $tooltip-bg-color;\n    @include border-radius($form-feedback-tooltip-border-radius);\n  }\n\n  @include form-validation-state-selector($state) {\n    ~ .#{$state}-feedback,\n    ~ .#{$state}-tooltip {\n      display: block;\n    }\n  }\n\n  .form-control {\n    @include form-validation-state-selector($state) {\n      border-color: $color;\n\n      @if $enable-validation-icons {\n        padding-right: $input-height-inner;\n        background-image: escape-svg($icon);\n        background-repeat: no-repeat;\n        background-position: right $input-height-inner-quarter center;\n        background-size: $input-height-inner-half $input-height-inner-half;\n      }\n\n      &:focus {\n        border-color: $color;\n        box-shadow: $focus-box-shadow;\n      }\n    }\n  }\n\n  // stylelint-disable-next-line selector-no-qualifying-type\n  textarea.form-control {\n    @include form-validation-state-selector($state) {\n      @if $enable-validation-icons {\n        padding-right: $input-height-inner;\n        background-position: top $input-height-inner-quarter right $input-height-inner-quarter;\n      }\n    }\n  }\n\n  .form-select {\n    @include form-validation-state-selector($state) {\n      border-color: $color;\n\n      @if $enable-validation-icons {\n        &:not([multiple]):not([size]),\n        &:not([multiple])[size=\"1\"] {\n          padding-right: $form-select-feedback-icon-padding-end;\n          background-image: escape-svg($form-select-indicator), escape-svg($icon);\n          background-position: $form-select-bg-position, $form-select-feedback-icon-position;\n          background-size: $form-select-bg-size, $form-select-feedback-icon-size;\n        }\n      }\n\n      &:focus {\n        border-color: $color;\n        box-shadow: $focus-box-shadow;\n      }\n    }\n  }\n\n  .form-check-input {\n    @include form-validation-state-selector($state) {\n      border-color: $color;\n\n      &:checked {\n        background-color: $color;\n      }\n\n      &:focus {\n        box-shadow: $focus-box-shadow;\n      }\n\n      ~ .form-check-label {\n        color: $color;\n      }\n    }\n  }\n  .form-check-inline .form-check-input {\n    ~ .#{$state}-feedback {\n      margin-left: .5em;\n    }\n  }\n\n  .input-group .form-control,\n  .input-group .form-select {\n    @include form-validation-state-selector($state) {\n      @if $state == \"valid\" {\n        z-index: 1;\n      } @else if $state == \"invalid\" {\n        z-index: 2;\n      }\n      &:focus {\n        z-index: 3;\n      }\n    }\n  }\n}\n// scss-docs-end form-validation-mixins\n","//\n// Base styles\n//\n\n.btn {\n  display: inline-block;\n  font-family: $btn-font-family;\n  font-weight: $btn-font-weight;\n  line-height: $btn-line-height;\n  color: $body-color;\n  text-align: center;\n  text-decoration: if($link-decoration == none, null, none);\n  white-space: $btn-white-space;\n  vertical-align: middle;\n  cursor: if($enable-button-pointers, pointer, null);\n  user-select: none;\n  background-color: transparent;\n  border: $btn-border-width solid transparent;\n  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);\n  @include transition($btn-transition);\n\n  &:hover {\n    color: $body-color;\n    text-decoration: if($link-hover-decoration == underline, none, null);\n  }\n\n  .btn-check:focus + &,\n  &:focus {\n    outline: 0;\n    box-shadow: $btn-focus-box-shadow;\n  }\n\n  .btn-check:checked + &,\n  .btn-check:active + &,\n  &:active,\n  &.active {\n    @include box-shadow($btn-active-box-shadow);\n\n    &:focus {\n      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);\n    }\n  }\n\n  &:disabled,\n  &.disabled,\n  fieldset:disabled & {\n    pointer-events: none;\n    opacity: $btn-disabled-opacity;\n    @include box-shadow(none);\n  }\n}\n\n\n//\n// Alternate buttons\n//\n\n// scss-docs-start btn-variant-loops\n@each $color, $value in $theme-colors {\n  .btn-#{$color} {\n    @include button-variant($value, $value);\n  }\n}\n\n@each $color, $value in $theme-colors {\n  .btn-outline-#{$color} {\n    @include button-outline-variant($value);\n  }\n}\n// scss-docs-end btn-variant-loops\n\n\n//\n// Link buttons\n//\n\n// Make a button look and behave like a link\n.btn-link {\n  font-weight: $font-weight-normal;\n  color: $btn-link-color;\n  text-decoration: $link-decoration;\n\n  &:hover {\n    color: $btn-link-hover-color;\n    text-decoration: $link-hover-decoration;\n  }\n\n  &:focus {\n    text-decoration: $link-hover-decoration;\n  }\n\n  &:disabled,\n  &.disabled {\n    color: $btn-link-disabled-color;\n  }\n\n  // No need for an active state here\n}\n\n\n//\n// Button Sizes\n//\n\n.btn-lg {\n  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);\n}\n\n.btn-sm {\n  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);\n}\n","// Button variants\n//\n// Easily pump out default styles, as well as :hover, :focus, :active,\n// and disabled options for all buttons\n\n// scss-docs-start btn-variant-mixin\n@mixin button-variant(\n  $background,\n  $border,\n  $color: color-contrast($background),\n  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),\n  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),\n  $hover-color: color-contrast($hover-background),\n  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),\n  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),\n  $active-color: color-contrast($active-background),\n  $disabled-background: $background,\n  $disabled-border: $border,\n  $disabled-color: color-contrast($disabled-background)\n) {\n  color: $color;\n  @include gradient-bg($background);\n  border-color: $border;\n  @include box-shadow($btn-box-shadow);\n\n  &:hover {\n    color: $hover-color;\n    @include gradient-bg($hover-background);\n    border-color: $hover-border;\n  }\n\n  .btn-check:focus + &,\n  &:focus {\n    color: $hover-color;\n    @include gradient-bg($hover-background);\n    border-color: $hover-border;\n    @if $enable-shadows {\n      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n    } @else {\n      // Avoid using mixin so we can pass custom focus shadow properly\n      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n    }\n  }\n\n  .btn-check:checked + &,\n  .btn-check:active + &,\n  &:active,\n  &.active,\n  .show > &.dropdown-toggle {\n    color: $active-color;\n    background-color: $active-background;\n    // Remove CSS gradients if they're enabled\n    background-image: if($enable-gradients, none, null);\n    border-color: $active-border;\n\n    &:focus {\n      @if $enable-shadows {\n        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n      } @else {\n        // Avoid using mixin so we can pass custom focus shadow properly\n        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n      }\n    }\n  }\n\n  &:disabled,\n  &.disabled {\n    color: $disabled-color;\n    background-color: $disabled-background;\n    // Remove CSS gradients if they're enabled\n    background-image: if($enable-gradients, none, null);\n    border-color: $disabled-border;\n  }\n}\n// scss-docs-end btn-variant-mixin\n\n// scss-docs-start btn-outline-variant-mixin\n@mixin button-outline-variant(\n  $color,\n  $color-hover: color-contrast($color),\n  $active-background: $color,\n  $active-border: $color,\n  $active-color: color-contrast($active-background)\n) {\n  color: $color;\n  border-color: $color;\n\n  &:hover {\n    color: $color-hover;\n    background-color: $active-background;\n    border-color: $active-border;\n  }\n\n  .btn-check:focus + &,\n  &:focus {\n    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n  }\n\n  .btn-check:checked + &,\n  .btn-check:active + &,\n  &:active,\n  &.active,\n  &.dropdown-toggle.show {\n    color: $active-color;\n    background-color: $active-background;\n    border-color: $active-border;\n\n    &:focus {\n      @if $enable-shadows {\n        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));\n      } @else {\n        // Avoid using mixin so we can pass custom focus shadow properly\n        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n    }\n  }\n\n  &:disabled,\n  &.disabled {\n    color: $color;\n    background-color: transparent;\n  }\n}\n// scss-docs-end btn-outline-variant-mixin\n\n// scss-docs-start btn-size-mixin\n@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {\n  padding: $padding-y $padding-x;\n  @include font-size($font-size);\n  // Manually declare to provide an override to the browser default\n  @include border-radius($border-radius, 0);\n}\n// scss-docs-end btn-size-mixin\n",".fade {\n  @include transition($transition-fade);\n\n  &:not(.show) {\n    opacity: 0;\n  }\n}\n\n// scss-docs-start collapse-classes\n.collapse {\n  &:not(.show) {\n    display: none;\n  }\n}\n\n.collapsing {\n  height: 0;\n  overflow: hidden;\n  @include transition($transition-collapse);\n\n  &.collapse-horizontal {\n    width: 0;\n    height: auto;\n    @include transition($transition-collapse-width);\n  }\n}\n// scss-docs-end collapse-classes\n","// The dropdown wrapper (`<div>`)\n.dropup,\n.dropend,\n.dropdown,\n.dropstart {\n  position: relative;\n}\n\n.dropdown-toggle {\n  white-space: nowrap;\n\n  // Generate the caret automatically\n  @include caret();\n}\n\n// The dropdown menu\n.dropdown-menu {\n  position: absolute;\n  z-index: $zindex-dropdown;\n  display: none; // none by default, but block on \"open\" of the menu\n  min-width: $dropdown-min-width;\n  padding: $dropdown-padding-y $dropdown-padding-x;\n  margin: 0; // Override default margin of ul\n  @include font-size($dropdown-font-size);\n  color: $dropdown-color;\n  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n  list-style: none;\n  background-color: $dropdown-bg;\n  background-clip: padding-box;\n  border: $dropdown-border-width solid $dropdown-border-color;\n  @include border-radius($dropdown-border-radius);\n  @include box-shadow($dropdown-box-shadow);\n\n  &[data-bs-popper] {\n    top: 100%;\n    left: 0;\n    margin-top: $dropdown-spacer;\n  }\n}\n\n// scss-docs-start responsive-breakpoints\n// We deliberately hardcode the `bs-` prefix because we check\n// this custom property in JS to determine Popper's positioning\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n  @include media-breakpoint-up($breakpoint) {\n    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n    .dropdown-menu#{$infix}-start {\n      --bs-position: start;\n\n      &[data-bs-popper] {\n        right: auto;\n        left: 0;\n      }\n    }\n\n    .dropdown-menu#{$infix}-end {\n      --bs-position: end;\n\n      &[data-bs-popper] {\n        right: 0;\n        left: auto;\n      }\n    }\n  }\n}\n// scss-docs-end responsive-breakpoints\n\n// Allow for dropdowns to go bottom up (aka, dropup-menu)\n// Just add .dropup after the standard .dropdown class and you're set.\n.dropup {\n  .dropdown-menu[data-bs-popper] {\n    top: auto;\n    bottom: 100%;\n    margin-top: 0;\n    margin-bottom: $dropdown-spacer;\n  }\n\n  .dropdown-toggle {\n    @include caret(up);\n  }\n}\n\n.dropend {\n  .dropdown-menu[data-bs-popper] {\n    top: 0;\n    right: auto;\n    left: 100%;\n    margin-top: 0;\n    margin-left: $dropdown-spacer;\n  }\n\n  .dropdown-toggle {\n    @include caret(end);\n    &::after {\n      vertical-align: 0;\n    }\n  }\n}\n\n.dropstart {\n  .dropdown-menu[data-bs-popper] {\n    top: 0;\n    right: 100%;\n    left: auto;\n    margin-top: 0;\n    margin-right: $dropdown-spacer;\n  }\n\n  .dropdown-toggle {\n    @include caret(start);\n    &::before {\n      vertical-align: 0;\n    }\n  }\n}\n\n\n// Dividers (basically an `<hr>`) within the dropdown\n.dropdown-divider {\n  height: 0;\n  margin: $dropdown-divider-margin-y 0;\n  overflow: hidden;\n  border-top: 1px solid $dropdown-divider-bg;\n}\n\n// Links, buttons, and more within the dropdown menu\n//\n// `<button>`-specific styles are denoted with `// For <button>s`\n.dropdown-item {\n  display: block;\n  width: 100%; // For `<button>`s\n  padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n  clear: both;\n  font-weight: $font-weight-normal;\n  color: $dropdown-link-color;\n  text-align: inherit; // For `<button>`s\n  text-decoration: if($link-decoration == none, null, none);\n  white-space: nowrap; // prevent links from randomly breaking onto new lines\n  background-color: transparent; // For `<button>`s\n  border: 0; // For `<button>`s\n\n  // Prevent dropdown overflow if there's no padding\n  // See https://github.com/twbs/bootstrap/pull/27703\n  @if $dropdown-padding-y == 0 {\n    &:first-child {\n      @include border-top-radius($dropdown-inner-border-radius);\n    }\n\n    &:last-child {\n      @include border-bottom-radius($dropdown-inner-border-radius);\n    }\n  }\n\n  &:hover,\n  &:focus {\n    color: $dropdown-link-hover-color;\n    text-decoration: if($link-hover-decoration == underline, none, null);\n    @include gradient-bg($dropdown-link-hover-bg);\n  }\n\n  &.active,\n  &:active {\n    color: $dropdown-link-active-color;\n    text-decoration: none;\n    @include gradient-bg($dropdown-link-active-bg);\n  }\n\n  &.disabled,\n  &:disabled {\n    color: $dropdown-link-disabled-color;\n    pointer-events: none;\n    background-color: transparent;\n    // Remove CSS gradients if they're enabled\n    background-image: if($enable-gradients, none, null);\n  }\n}\n\n.dropdown-menu.show {\n  display: block;\n}\n\n// Dropdown section headers\n.dropdown-header {\n  display: block;\n  padding: $dropdown-header-padding;\n  margin-bottom: 0; // for use with heading elements\n  @include font-size($font-size-sm);\n  color: $dropdown-header-color;\n  white-space: nowrap; // as with > li > a\n}\n\n// Dropdown text\n.dropdown-item-text {\n  display: block;\n  padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n  color: $dropdown-link-color;\n}\n\n// Dark dropdowns\n.dropdown-menu-dark {\n  color: $dropdown-dark-color;\n  background-color: $dropdown-dark-bg;\n  border-color: $dropdown-dark-border-color;\n  @include box-shadow($dropdown-dark-box-shadow);\n\n  .dropdown-item {\n    color: $dropdown-dark-link-color;\n\n    &:hover,\n    &:focus {\n      color: $dropdown-dark-link-hover-color;\n      @include gradient-bg($dropdown-dark-link-hover-bg);\n    }\n\n    &.active,\n    &:active {\n      color: $dropdown-dark-link-active-color;\n      @include gradient-bg($dropdown-dark-link-active-bg);\n    }\n\n    &.disabled,\n    &:disabled {\n      color: $dropdown-dark-link-disabled-color;\n    }\n  }\n\n  .dropdown-divider {\n    border-color: $dropdown-dark-divider-bg;\n  }\n\n  .dropdown-item-text {\n    color: $dropdown-dark-link-color;\n  }\n\n  .dropdown-header {\n    color: $dropdown-dark-header-color;\n  }\n}\n","// scss-docs-start caret-mixins\n@mixin caret-down {\n  border-top: $caret-width solid;\n  border-right: $caret-width solid transparent;\n  border-bottom: 0;\n  border-left: $caret-width solid transparent;\n}\n\n@mixin caret-up {\n  border-top: 0;\n  border-right: $caret-width solid transparent;\n  border-bottom: $caret-width solid;\n  border-left: $caret-width solid transparent;\n}\n\n@mixin caret-end {\n  border-top: $caret-width solid transparent;\n  border-right: 0;\n  border-bottom: $caret-width solid transparent;\n  border-left: $caret-width solid;\n}\n\n@mixin caret-start {\n  border-top: $caret-width solid transparent;\n  border-right: $caret-width solid;\n  border-bottom: $caret-width solid transparent;\n}\n\n@mixin caret($direction: down) {\n  @if $enable-caret {\n    &::after {\n      display: inline-block;\n      margin-left: $caret-spacing;\n      vertical-align: $caret-vertical-align;\n      content: \"\";\n      @if $direction == down {\n        @include caret-down();\n      } @else if $direction == up {\n        @include caret-up();\n      } @else if $direction == end {\n        @include caret-end();\n      }\n    }\n\n    @if $direction == start {\n      &::after {\n        display: none;\n      }\n\n      &::before {\n        display: inline-block;\n        margin-right: $caret-spacing;\n        vertical-align: $caret-vertical-align;\n        content: \"\";\n        @include caret-start();\n      }\n    }\n\n    &:empty::after {\n      margin-left: 0;\n    }\n  }\n}\n// scss-docs-end caret-mixins\n","// Make the div behave like a button\n.btn-group,\n.btn-group-vertical {\n  position: relative;\n  display: inline-flex;\n  vertical-align: middle; // match .btn alignment given font-size hack above\n\n  > .btn {\n    position: relative;\n    flex: 1 1 auto;\n  }\n\n  // Bring the hover, focused, and \"active\" buttons to the front to overlay\n  // the borders properly\n  > .btn-check:checked + .btn,\n  > .btn-check:focus + .btn,\n  > .btn:hover,\n  > .btn:focus,\n  > .btn:active,\n  > .btn.active {\n    z-index: 1;\n  }\n}\n\n// Optional: Group multiple button groups together for a toolbar\n.btn-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n\n  .input-group {\n    width: auto;\n  }\n}\n\n.btn-group {\n  // Prevent double borders when buttons are next to each other\n  > .btn:not(:first-child),\n  > .btn-group:not(:first-child) {\n    margin-left: -$btn-border-width;\n  }\n\n  // Reset rounded corners\n  > .btn:not(:last-child):not(.dropdown-toggle),\n  > .btn-group:not(:last-child) > .btn {\n    @include border-end-radius(0);\n  }\n\n  // The left radius should be 0 if the button is:\n  // - the \"third or more\" child\n  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)\n  // - part of a btn-group which isn't the first child\n  > .btn:nth-child(n + 3),\n  > :not(.btn-check) + .btn,\n  > .btn-group:not(:first-child) > .btn {\n    @include border-start-radius(0);\n  }\n}\n\n// Sizing\n//\n// Remix the default button sizing classes into new ones for easier manipulation.\n\n.btn-group-sm > .btn { @extend .btn-sm; }\n.btn-group-lg > .btn { @extend .btn-lg; }\n\n\n//\n// Split button dropdowns\n//\n\n.dropdown-toggle-split {\n  padding-right: $btn-padding-x * .75;\n  padding-left: $btn-padding-x * .75;\n\n  &::after,\n  .dropup &::after,\n  .dropend &::after {\n    margin-left: 0;\n  }\n\n  .dropstart &::before {\n    margin-right: 0;\n  }\n}\n\n.btn-sm + .dropdown-toggle-split {\n  padding-right: $btn-padding-x-sm * .75;\n  padding-left: $btn-padding-x-sm * .75;\n}\n\n.btn-lg + .dropdown-toggle-split {\n  padding-right: $btn-padding-x-lg * .75;\n  padding-left: $btn-padding-x-lg * .75;\n}\n\n\n// The clickable button for toggling the menu\n// Set the same inset shadow as the :active state\n.btn-group.show .dropdown-toggle {\n  @include box-shadow($btn-active-box-shadow);\n\n  // Show no shadow for `.btn-link` since it has no other button styles.\n  &.btn-link {\n    @include box-shadow(none);\n  }\n}\n\n\n//\n// Vertical button groups\n//\n\n.btn-group-vertical {\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n\n  > .btn,\n  > .btn-group {\n    width: 100%;\n  }\n\n  > .btn:not(:first-child),\n  > .btn-group:not(:first-child) {\n    margin-top: -$btn-border-width;\n  }\n\n  // Reset rounded corners\n  > .btn:not(:last-child):not(.dropdown-toggle),\n  > .btn-group:not(:last-child) > .btn {\n    @include border-bottom-radius(0);\n  }\n\n  > .btn ~ .btn,\n  > .btn-group:not(:first-child) > .btn {\n    @include border-top-radius(0);\n  }\n}\n","// Base class\n//\n// Kickstart any navigation component with a set of style resets. Works with\n// `<nav>`s, `<ul>`s or `<ol>`s.\n\n.nav {\n  display: flex;\n  flex-wrap: wrap;\n  padding-left: 0;\n  margin-bottom: 0;\n  list-style: none;\n}\n\n.nav-link {\n  display: block;\n  padding: $nav-link-padding-y $nav-link-padding-x;\n  @include font-size($nav-link-font-size);\n  font-weight: $nav-link-font-weight;\n  color: $nav-link-color;\n  text-decoration: if($link-decoration == none, null, none);\n  @include transition($nav-link-transition);\n\n  &:hover,\n  &:focus {\n    color: $nav-link-hover-color;\n    text-decoration: if($link-hover-decoration == underline, none, null);\n  }\n\n  // Disabled state lightens text\n  &.disabled {\n    color: $nav-link-disabled-color;\n    pointer-events: none;\n    cursor: default;\n  }\n}\n\n//\n// Tabs\n//\n\n.nav-tabs {\n  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;\n\n  .nav-link {\n    margin-bottom: -$nav-tabs-border-width;\n    background: none;\n    border: $nav-tabs-border-width solid transparent;\n    @include border-top-radius($nav-tabs-border-radius);\n\n    &:hover,\n    &:focus {\n      border-color: $nav-tabs-link-hover-border-color;\n      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link\n      isolation: isolate;\n    }\n\n    &.disabled {\n      color: $nav-link-disabled-color;\n      background-color: transparent;\n      border-color: transparent;\n    }\n  }\n\n  .nav-link.active,\n  .nav-item.show .nav-link {\n    color: $nav-tabs-link-active-color;\n    background-color: $nav-tabs-link-active-bg;\n    border-color: $nav-tabs-link-active-border-color;\n  }\n\n  .dropdown-menu {\n    // Make dropdown border overlap tab border\n    margin-top: -$nav-tabs-border-width;\n    // Remove the top rounded corners here since there is a hard edge above the menu\n    @include border-top-radius(0);\n  }\n}\n\n\n//\n// Pills\n//\n\n.nav-pills {\n  .nav-link {\n    background: none;\n    border: 0;\n    @include border-radius($nav-pills-border-radius);\n  }\n\n  .nav-link.active,\n  .show > .nav-link {\n    color: $nav-pills-link-active-color;\n    @include gradient-bg($nav-pills-link-active-bg);\n  }\n}\n\n\n//\n// Justified variants\n//\n\n.nav-fill {\n  > .nav-link,\n  .nav-item {\n    flex: 1 1 auto;\n    text-align: center;\n  }\n}\n\n.nav-justified {\n  > .nav-link,\n  .nav-item {\n    flex-basis: 0;\n    flex-grow: 1;\n    text-align: center;\n  }\n}\n\n.nav-fill,\n.nav-justified {\n  .nav-item .nav-link {\n    width: 100%; // Make sure button will grow\n  }\n}\n\n\n// Tabbable tabs\n//\n// Hide tabbable panes to start, show them when `.active`\n\n.tab-content {\n  > .tab-pane {\n    display: none;\n  }\n  > .active {\n    display: block;\n  }\n}\n","// Contents\n//\n// Navbar\n// Navbar brand\n// Navbar nav\n// Navbar text\n// Responsive navbar\n// Navbar position\n// Navbar themes\n\n\n// Navbar\n//\n// Provide a static navbar from which we expand to create full-width, fixed, and\n// other navbar variations.\n\n.navbar {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap; // allow us to do the line break for collapsing content\n  align-items: center;\n  justify-content: space-between; // space out brand from logo\n  padding-top: $navbar-padding-y;\n  padding-right: $navbar-padding-x; // default: null\n  padding-bottom: $navbar-padding-y;\n  padding-left: $navbar-padding-x; // default: null\n  @include gradient-bg();\n\n  // Because flex properties aren't inherited, we need to redeclare these first\n  // few properties so that content nested within behave properly.\n  // The `flex-wrap` property is inherited to simplify the expanded navbars\n  %container-flex-properties {\n    display: flex;\n    flex-wrap: inherit;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  > .container,\n  > .container-fluid {\n    @extend %container-flex-properties;\n  }\n\n  @each $breakpoint, $container-max-width in $container-max-widths {\n    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {\n      @extend %container-flex-properties;\n    }\n  }\n}\n\n\n// Navbar brand\n//\n// Used for brand, project, or site names.\n\n.navbar-brand {\n  padding-top: $navbar-brand-padding-y;\n  padding-bottom: $navbar-brand-padding-y;\n  margin-right: $navbar-brand-margin-end;\n  @include font-size($navbar-brand-font-size);\n  text-decoration: if($link-decoration == none, null, none);\n  white-space: nowrap;\n\n  &:hover,\n  &:focus {\n    text-decoration: if($link-hover-decoration == underline, none, null);\n  }\n}\n\n\n// Navbar nav\n//\n// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).\n\n.navbar-nav {\n  display: flex;\n  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value\n  padding-left: 0;\n  margin-bottom: 0;\n  list-style: none;\n\n  .nav-link {\n    padding-right: 0;\n    padding-left: 0;\n  }\n\n  .dropdown-menu {\n    position: static;\n  }\n}\n\n\n// Navbar text\n//\n//\n\n.navbar-text {\n  padding-top: $nav-link-padding-y;\n  padding-bottom: $nav-link-padding-y;\n}\n\n\n// Responsive navbar\n//\n// Custom styles for responsive collapsing and toggling of navbar contents.\n// Powered by the collapse Bootstrap JavaScript plugin.\n\n// When collapsed, prevent the toggleable navbar contents from appearing in\n// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`\n// on the `.navbar` parent.\n.navbar-collapse {\n  flex-basis: 100%;\n  flex-grow: 1;\n  // For always expanded or extra full navbars, ensure content aligns itself\n  // properly vertically. Can be easily overridden with flex utilities.\n  align-items: center;\n}\n\n// Button for toggling the navbar when in its collapsed state\n.navbar-toggler {\n  padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;\n  @include font-size($navbar-toggler-font-size);\n  line-height: 1;\n  background-color: transparent; // remove default button style\n  border: $border-width solid transparent; // remove default button style\n  @include border-radius($navbar-toggler-border-radius);\n  @include transition($navbar-toggler-transition);\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &:focus {\n    text-decoration: none;\n    outline: 0;\n    box-shadow: 0 0 0 $navbar-toggler-focus-width;\n  }\n}\n\n// Keep as a separate element so folks can easily override it with another icon\n// or image file as needed.\n.navbar-toggler-icon {\n  display: inline-block;\n  width: 1.5em;\n  height: 1.5em;\n  vertical-align: middle;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 100%;\n}\n\n.navbar-nav-scroll {\n  max-height: var(--#{$variable-prefix}scroll-height, 75vh);\n  overflow-y: auto;\n}\n\n// scss-docs-start navbar-expand-loop\n// Generate series of `.navbar-expand-*` responsive classes for configuring\n// where your navbar collapses.\n.navbar-expand {\n  @each $breakpoint in map-keys($grid-breakpoints) {\n    $next: breakpoint-next($breakpoint, $grid-breakpoints);\n    $infix: breakpoint-infix($next, $grid-breakpoints);\n\n    // stylelint-disable-next-line scss/selector-no-union-class-name\n    &#{$infix} {\n      @include media-breakpoint-up($next) {\n        flex-wrap: nowrap;\n        justify-content: flex-start;\n\n        .navbar-nav {\n          flex-direction: row;\n\n          .dropdown-menu {\n            position: absolute;\n          }\n\n          .nav-link {\n            padding-right: $navbar-nav-link-padding-x;\n            padding-left: $navbar-nav-link-padding-x;\n          }\n        }\n\n        .navbar-nav-scroll {\n          overflow: visible;\n        }\n\n        .navbar-collapse {\n          display: flex !important; // stylelint-disable-line declaration-no-important\n          flex-basis: auto;\n        }\n\n        .navbar-toggler {\n          display: none;\n        }\n\n        .offcanvas-header {\n          display: none;\n        }\n\n        .offcanvas {\n          position: inherit;\n          bottom: 0;\n          z-index: 1000;\n          flex-grow: 1;\n          visibility: visible !important; // stylelint-disable-line declaration-no-important\n          background-color: transparent;\n          border-right: 0;\n          border-left: 0;\n          @include transition(none);\n          transform: none;\n        }\n        .offcanvas-top,\n        .offcanvas-bottom {\n          height: auto;\n          border-top: 0;\n          border-bottom: 0;\n        }\n\n        .offcanvas-body {\n          display: flex;\n          flex-grow: 0;\n          padding: 0;\n          overflow-y: visible;\n        }\n      }\n    }\n  }\n}\n// scss-docs-end navbar-expand-loop\n\n// Navbar themes\n//\n// Styles for switching between navbars with light or dark background.\n\n// Dark links against a light background\n.navbar-light {\n  .navbar-brand {\n    color: $navbar-light-brand-color;\n\n    &:hover,\n    &:focus {\n      color: $navbar-light-brand-hover-color;\n    }\n  }\n\n  .navbar-nav {\n    .nav-link {\n      color: $navbar-light-color;\n\n      &:hover,\n      &:focus {\n        color: $navbar-light-hover-color;\n      }\n\n      &.disabled {\n        color: $navbar-light-disabled-color;\n      }\n    }\n\n    .show > .nav-link,\n    .nav-link.active {\n      color: $navbar-light-active-color;\n    }\n  }\n\n  .navbar-toggler {\n    color: $navbar-light-color;\n    border-color: $navbar-light-toggler-border-color;\n  }\n\n  .navbar-toggler-icon {\n    background-image: escape-svg($navbar-light-toggler-icon-bg);\n  }\n\n  .navbar-text {\n    color: $navbar-light-color;\n\n    a,\n    a:hover,\n    a:focus  {\n      color: $navbar-light-active-color;\n    }\n  }\n}\n\n// White links against a dark background\n.navbar-dark {\n  .navbar-brand {\n    color: $navbar-dark-brand-color;\n\n    &:hover,\n    &:focus {\n      color: $navbar-dark-brand-hover-color;\n    }\n  }\n\n  .navbar-nav {\n    .nav-link {\n      color: $navbar-dark-color;\n\n      &:hover,\n      &:focus {\n        color: $navbar-dark-hover-color;\n      }\n\n      &.disabled {\n        color: $navbar-dark-disabled-color;\n      }\n    }\n\n    .show > .nav-link,\n    .nav-link.active {\n      color: $navbar-dark-active-color;\n    }\n  }\n\n  .navbar-toggler {\n    color: $navbar-dark-color;\n    border-color: $navbar-dark-toggler-border-color;\n  }\n\n  .navbar-toggler-icon {\n    background-image: escape-svg($navbar-dark-toggler-icon-bg);\n  }\n\n  .navbar-text {\n    color: $navbar-dark-color;\n    a,\n    a:hover,\n    a:focus {\n      color: $navbar-dark-active-color;\n    }\n  }\n}\n","//\n// Base styles\n//\n\n.card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106\n  height: $card-height;\n  word-wrap: break-word;\n  background-color: $card-bg;\n  background-clip: border-box;\n  border: $card-border-width solid $card-border-color;\n  @include border-radius($card-border-radius);\n  @include box-shadow($card-box-shadow);\n\n  > hr {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  > .list-group {\n    border-top: inherit;\n    border-bottom: inherit;\n\n    &:first-child {\n      border-top-width: 0;\n      @include border-top-radius($card-inner-border-radius);\n    }\n\n    &:last-child  {\n      border-bottom-width: 0;\n      @include border-bottom-radius($card-inner-border-radius);\n    }\n  }\n\n  // Due to specificity of the above selector (`.card > .list-group`), we must\n  // use a child selector here to prevent double borders.\n  > .card-header + .list-group,\n  > .list-group + .card-footer {\n    border-top: 0;\n  }\n}\n\n.card-body {\n  // Enable `flex-grow: 1` for decks and groups so that card blocks take up\n  // as much space as possible, ensuring footers are aligned to the bottom.\n  flex: 1 1 auto;\n  padding: $card-spacer-y $card-spacer-x;\n  color: $card-color;\n}\n\n.card-title {\n  margin-bottom: $card-title-spacer-y;\n}\n\n.card-subtitle {\n  margin-top: -$card-title-spacer-y * .5;\n  margin-bottom: 0;\n}\n\n.card-text:last-child {\n  margin-bottom: 0;\n}\n\n.card-link {\n  &:hover {\n    text-decoration: if($link-hover-decoration == underline, none, null);\n  }\n\n  + .card-link {\n    margin-left: $card-spacer-x;\n  }\n}\n\n//\n// Optional textual caps\n//\n\n.card-header {\n  padding: $card-cap-padding-y $card-cap-padding-x;\n  margin-bottom: 0; // Removes the default margin-bottom of <hN>\n  color: $card-cap-color;\n  background-color: $card-cap-bg;\n  border-bottom: $card-border-width solid $card-border-color;\n\n  &:first-child {\n    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);\n  }\n}\n\n.card-footer {\n  padding: $card-cap-padding-y $card-cap-padding-x;\n  color: $card-cap-color;\n  background-color: $card-cap-bg;\n  border-top: $card-border-width solid $card-border-color;\n\n  &:last-child {\n    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);\n  }\n}\n\n\n//\n// Header navs\n//\n\n.card-header-tabs {\n  margin-right: -$card-cap-padding-x * .5;\n  margin-bottom: -$card-cap-padding-y;\n  margin-left: -$card-cap-padding-x * .5;\n  border-bottom: 0;\n\n  @if $nav-tabs-link-active-bg != $card-bg {\n    .nav-link.active {\n      background-color: $card-bg;\n      border-bottom-color: $card-bg;\n    }\n  }\n}\n\n.card-header-pills {\n  margin-right: -$card-cap-padding-x * .5;\n  margin-left: -$card-cap-padding-x * .5;\n}\n\n// Card image\n.card-img-overlay {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  padding: $card-img-overlay-padding;\n  @include border-radius($card-inner-border-radius);\n}\n\n.card-img,\n.card-img-top,\n.card-img-bottom {\n  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch\n}\n\n.card-img,\n.card-img-top {\n  @include border-top-radius($card-inner-border-radius);\n}\n\n.card-img,\n.card-img-bottom {\n  @include border-bottom-radius($card-inner-border-radius);\n}\n\n\n//\n// Card groups\n//\n\n.card-group {\n  // The child selector allows nested `.card` within `.card-group`\n  // to display properly.\n  > .card {\n    margin-bottom: $card-group-margin;\n  }\n\n  @include media-breakpoint-up(sm) {\n    display: flex;\n    flex-flow: row wrap;\n    // The child selector allows nested `.card` within `.card-group`\n    // to display properly.\n    > .card {\n      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4\n      flex: 1 0 0%;\n      margin-bottom: 0;\n\n      + .card {\n        margin-left: 0;\n        border-left: 0;\n      }\n\n      // Handle rounded corners\n      @if $enable-rounded {\n        &:not(:last-child) {\n          @include border-end-radius(0);\n\n          .card-img-top,\n          .card-header {\n            // stylelint-disable-next-line property-disallowed-list\n            border-top-right-radius: 0;\n          }\n          .card-img-bottom,\n          .card-footer {\n            // stylelint-disable-next-line property-disallowed-list\n            border-bottom-right-radius: 0;\n          }\n        }\n\n        &:not(:first-child) {\n          @include border-start-radius(0);\n\n          .card-img-top,\n          .card-header {\n            // stylelint-disable-next-line property-disallowed-list\n            border-top-left-radius: 0;\n          }\n          .card-img-bottom,\n          .card-footer {\n            // stylelint-disable-next-line property-disallowed-list\n            border-bottom-left-radius: 0;\n          }\n        }\n      }\n    }\n  }\n}\n","//\n// Base styles\n//\n\n.accordion-button {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: $accordion-button-padding-y $accordion-button-padding-x;\n  @include font-size($font-size-base);\n  color: $accordion-button-color;\n  text-align: left; // Reset button style\n  background-color: $accordion-button-bg;\n  border: 0;\n  @include border-radius(0);\n  overflow-anchor: none;\n  @include transition($accordion-transition);\n\n  &:not(.collapsed) {\n    color: $accordion-button-active-color;\n    background-color: $accordion-button-active-bg;\n    box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;\n\n    &::after {\n      background-image: escape-svg($accordion-button-active-icon);\n      transform: $accordion-icon-transform;\n    }\n  }\n\n  // Accordion icon\n  &::after {\n    flex-shrink: 0;\n    width: $accordion-icon-width;\n    height: $accordion-icon-width;\n    margin-left: auto;\n    content: \"\";\n    background-image: escape-svg($accordion-button-icon);\n    background-repeat: no-repeat;\n    background-size: $accordion-icon-width;\n    @include transition($accordion-icon-transition);\n  }\n\n  &:hover {\n    z-index: 2;\n  }\n\n  &:focus {\n    z-index: 3;\n    border-color: $accordion-button-focus-border-color;\n    outline: 0;\n    box-shadow: $accordion-button-focus-box-shadow;\n  }\n}\n\n.accordion-header {\n  margin-bottom: 0;\n}\n\n.accordion-item {\n  background-color: $accordion-bg;\n  border: $accordion-border-width solid $accordion-border-color;\n\n  &:first-of-type {\n    @include border-top-radius($accordion-border-radius);\n\n    .accordion-button {\n      @include border-top-radius($accordion-inner-border-radius);\n    }\n  }\n\n  &:not(:first-of-type) {\n    border-top: 0;\n  }\n\n  // Only set a border-radius on the last item if the accordion is collapsed\n  &:last-of-type {\n    @include border-bottom-radius($accordion-border-radius);\n\n    .accordion-button {\n      &.collapsed {\n        @include border-bottom-radius($accordion-inner-border-radius);\n      }\n    }\n\n    .accordion-collapse {\n      @include border-bottom-radius($accordion-border-radius);\n    }\n  }\n}\n\n.accordion-body {\n  padding: $accordion-body-padding-y $accordion-body-padding-x;\n}\n\n\n// Flush accordion items\n//\n// Remove borders and border-radius to keep accordion items edge-to-edge.\n\n.accordion-flush {\n  .accordion-collapse {\n    border-width: 0;\n  }\n\n  .accordion-item {\n    border-right: 0;\n    border-left: 0;\n    @include border-radius(0);\n\n    &:first-child { border-top: 0; }\n    &:last-child { border-bottom: 0; }\n\n    .accordion-button {\n      @include border-radius(0);\n    }\n  }\n}\n",".breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  padding: $breadcrumb-padding-y $breadcrumb-padding-x;\n  margin-bottom: $breadcrumb-margin-bottom;\n  @include font-size($breadcrumb-font-size);\n  list-style: none;\n  background-color: $breadcrumb-bg;\n  @include border-radius($breadcrumb-border-radius);\n}\n\n.breadcrumb-item {\n  // The separator between breadcrumbs (by default, a forward-slash: \"/\")\n  + .breadcrumb-item {\n    padding-left: $breadcrumb-item-padding-x;\n\n    &::before {\n      float: left; // Suppress inline spacings and underlining of the separator\n      padding-right: $breadcrumb-item-padding-x;\n      color: $breadcrumb-divider-color;\n      content: var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{\"/* rtl:\"} var(--#{$variable-prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{\"*/\"};\n    }\n  }\n\n  &.active {\n    color: $breadcrumb-active-color;\n  }\n}\n",".pagination {\n  display: flex;\n  @include list-unstyled();\n}\n\n.page-link {\n  position: relative;\n  display: block;\n  color: $pagination-color;\n  text-decoration: if($link-decoration == none, null, none);\n  background-color: $pagination-bg;\n  border: $pagination-border-width solid $pagination-border-color;\n  @include transition($pagination-transition);\n\n  &:hover {\n    z-index: 2;\n    color: $pagination-hover-color;\n    text-decoration: if($link-hover-decoration == underline, none, null);\n    background-color: $pagination-hover-bg;\n    border-color: $pagination-hover-border-color;\n  }\n\n  &:focus {\n    z-index: 3;\n    color: $pagination-focus-color;\n    background-color: $pagination-focus-bg;\n    outline: $pagination-focus-outline;\n    box-shadow: $pagination-focus-box-shadow;\n  }\n}\n\n.page-item {\n  &:not(:first-child) .page-link {\n    margin-left: $pagination-margin-start;\n  }\n\n  &.active .page-link {\n    z-index: 3;\n    color: $pagination-active-color;\n    @include gradient-bg($pagination-active-bg);\n    border-color: $pagination-active-border-color;\n  }\n\n  &.disabled .page-link {\n    color: $pagination-disabled-color;\n    pointer-events: none;\n    background-color: $pagination-disabled-bg;\n    border-color: $pagination-disabled-border-color;\n  }\n}\n\n\n//\n// Sizing\n//\n@include pagination-size($pagination-padding-y, $pagination-padding-x, null, $pagination-border-radius);\n\n.pagination-lg {\n  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);\n}\n\n.pagination-sm {\n  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);\n}\n","// Pagination\n\n// scss-docs-start pagination-mixin\n@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {\n  .page-link {\n    padding: $padding-y $padding-x;\n    @include font-size($font-size);\n  }\n\n  .page-item {\n    @if $pagination-margin-start == (-$pagination-border-width) {\n      &:first-child {\n        .page-link {\n          @include border-start-radius($border-radius);\n        }\n      }\n\n      &:last-child {\n        .page-link {\n          @include border-end-radius($border-radius);\n        }\n      }\n    } @else {\n      //Add border-radius to all pageLinks in case they have left margin\n      .page-link {\n        @include border-radius($border-radius);\n      }\n    }\n  }\n}\n// scss-docs-end pagination-mixin\n","// Base class\n//\n// Requires one of the contextual, color modifier classes for `color` and\n// `background-color`.\n\n.badge {\n  display: inline-block;\n  padding: $badge-padding-y $badge-padding-x;\n  @include font-size($badge-font-size);\n  font-weight: $badge-font-weight;\n  line-height: 1;\n  color: $badge-color;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  @include border-radius($badge-border-radius);\n  @include gradient-bg();\n\n  // Empty badges collapse automatically\n  &:empty {\n    display: none;\n  }\n}\n\n// Quick fix for badges in buttons\n.btn .badge {\n  position: relative;\n  top: -1px;\n}\n","//\n// Base styles\n//\n\n.alert {\n  position: relative;\n  padding: $alert-padding-y $alert-padding-x;\n  margin-bottom: $alert-margin-bottom;\n  border: $alert-border-width solid transparent;\n  @include border-radius($alert-border-radius);\n}\n\n// Headings for larger alerts\n.alert-heading {\n  // Specified to prevent conflicts of changing $headings-color\n  color: inherit;\n}\n\n// Provide class for links that match alerts\n.alert-link {\n  font-weight: $alert-link-font-weight;\n}\n\n\n// Dismissible alerts\n//\n// Expand the right padding and account for the close button's positioning.\n\n.alert-dismissible {\n  padding-right: $alert-dismissible-padding-r;\n\n  // Adjust close link position\n  .btn-close {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: $stretched-link-z-index + 1;\n    padding: $alert-padding-y * 1.25 $alert-padding-x;\n  }\n}\n\n\n// scss-docs-start alert-modifiers\n// Generate contextual modifier classes for colorizing the alert.\n\n@each $state, $value in $theme-colors {\n  $alert-background: shift-color($value, $alert-bg-scale);\n  $alert-border: shift-color($value, $alert-border-scale);\n  $alert-color: shift-color($value, $alert-color-scale);\n  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {\n    $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale));\n  }\n  .alert-#{$state} {\n    @include alert-variant($alert-background, $alert-border, $alert-color);\n  }\n}\n// scss-docs-end alert-modifiers\n","// scss-docs-start alert-variant-mixin\n@mixin alert-variant($background, $border, $color) {\n  color: $color;\n  @include gradient-bg($background);\n  border-color: $border;\n\n  .alert-link {\n    color: shade-color($color, 20%);\n  }\n}\n// scss-docs-end alert-variant-mixin\n","// Disable animation if transitions are disabled\n\n// scss-docs-start progress-keyframes\n@if $enable-transitions {\n  @keyframes progress-bar-stripes {\n    0% { background-position-x: $progress-height; }\n  }\n}\n// scss-docs-end progress-keyframes\n\n.progress {\n  display: flex;\n  height: $progress-height;\n  overflow: hidden; // force rounded corners by cropping it\n  @include font-size($progress-font-size);\n  background-color: $progress-bg;\n  @include border-radius($progress-border-radius);\n  @include box-shadow($progress-box-shadow);\n}\n\n.progress-bar {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  overflow: hidden;\n  color: $progress-bar-color;\n  text-align: center;\n  white-space: nowrap;\n  background-color: $progress-bar-bg;\n  @include transition($progress-bar-transition);\n}\n\n.progress-bar-striped {\n  @include gradient-striped();\n  background-size: $progress-height $progress-height;\n}\n\n@if $enable-transitions {\n  .progress-bar-animated {\n    animation: $progress-bar-animation-timing progress-bar-stripes;\n\n    @if $enable-reduced-motion {\n      @media (prefers-reduced-motion: reduce) {\n        animation: none;\n      }\n    }\n  }\n}\n","// Base class\n//\n// Easily usable on <ul>, <ol>, or <div>.\n\n.list-group {\n  display: flex;\n  flex-direction: column;\n\n  // No need to set list-style: none; since .list-group-item is block level\n  padding-left: 0; // reset padding because ul and ol\n  margin-bottom: 0;\n  @include border-radius($list-group-border-radius);\n}\n\n.list-group-numbered {\n  list-style-type: none;\n  counter-reset: section;\n\n  > li::before {\n    // Increments only this instance of the section counter\n    content: counters(section, \".\") \". \";\n    counter-increment: section;\n  }\n}\n\n\n// Interactive list items\n//\n// Use anchor or button elements instead of `li`s or `div`s to create interactive\n// list items. Includes an extra `.active` modifier class for selected items.\n\n.list-group-item-action {\n  width: 100%; // For `<button>`s (anchors become 100% by default though)\n  color: $list-group-action-color;\n  text-align: inherit; // For `<button>`s (anchors inherit)\n\n  // Hover state\n  &:hover,\n  &:focus {\n    z-index: 1; // Place hover/focus items above their siblings for proper border styling\n    color: $list-group-action-hover-color;\n    text-decoration: none;\n    background-color: $list-group-hover-bg;\n  }\n\n  &:active {\n    color: $list-group-action-active-color;\n    background-color: $list-group-action-active-bg;\n  }\n}\n\n\n// Individual list items\n//\n// Use on `li`s or `div`s within the `.list-group` parent.\n\n.list-group-item {\n  position: relative;\n  display: block;\n  padding: $list-group-item-padding-y $list-group-item-padding-x;\n  color: $list-group-color;\n  text-decoration: if($link-decoration == none, null, none);\n  background-color: $list-group-bg;\n  border: $list-group-border-width solid $list-group-border-color;\n\n  &:first-child {\n    @include border-top-radius(inherit);\n  }\n\n  &:last-child {\n    @include border-bottom-radius(inherit);\n  }\n\n  &.disabled,\n  &:disabled {\n    color: $list-group-disabled-color;\n    pointer-events: none;\n    background-color: $list-group-disabled-bg;\n  }\n\n  // Include both here for `<a>`s and `<button>`s\n  &.active {\n    z-index: 2; // Place active items above their siblings for proper border styling\n    color: $list-group-active-color;\n    background-color: $list-group-active-bg;\n    border-color: $list-group-active-border-color;\n  }\n\n  & + & {\n    border-top-width: 0;\n\n    &.active {\n      margin-top: -$list-group-border-width;\n      border-top-width: $list-group-border-width;\n    }\n  }\n}\n\n\n// Horizontal\n//\n// Change the layout of list group items from vertical (default) to horizontal.\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n  @include media-breakpoint-up($breakpoint) {\n    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n    .list-group-horizontal#{$infix} {\n      flex-direction: row;\n\n      > .list-group-item {\n        &:first-child {\n          @include border-bottom-start-radius($list-group-border-radius);\n          @include border-top-end-radius(0);\n        }\n\n        &:last-child {\n          @include border-top-end-radius($list-group-border-radius);\n          @include border-bottom-start-radius(0);\n        }\n\n        &.active {\n          margin-top: 0;\n        }\n\n        + .list-group-item {\n          border-top-width: $list-group-border-width;\n          border-left-width: 0;\n\n          &.active {\n            margin-left: -$list-group-border-width;\n            border-left-width: $list-group-border-width;\n          }\n        }\n      }\n    }\n  }\n}\n\n\n// Flush list items\n//\n// Remove borders and border-radius to keep list group items edge-to-edge. Most\n// useful within other components (e.g., cards).\n\n.list-group-flush {\n  @include border-radius(0);\n\n  > .list-group-item {\n    border-width: 0 0 $list-group-border-width;\n\n    &:last-child {\n      border-bottom-width: 0;\n    }\n  }\n}\n\n\n// scss-docs-start list-group-modifiers\n// List group contextual variants\n//\n// Add modifier classes to change text and background color on individual items.\n// Organizationally, this must come after the `:hover` states.\n\n@each $state, $value in $theme-colors {\n  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);\n  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);\n  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {\n    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));\n  }\n\n  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);\n}\n// scss-docs-end list-group-modifiers\n","// List Groups\n\n// scss-docs-start list-group-mixin\n@mixin list-group-item-variant($state, $background, $color) {\n  .list-group-item-#{$state} {\n    color: $color;\n    background-color: $background;\n\n    &.list-group-item-action {\n      &:hover,\n      &:focus {\n        color: $color;\n        background-color: shade-color($background, 10%);\n      }\n\n      &.active {\n        color: $white;\n        background-color: $color;\n        border-color: $color;\n      }\n    }\n  }\n}\n// scss-docs-end list-group-mixin\n","// transparent background and border properties included for button version.\n// iOS requires the button element instead of an anchor tag.\n// If you want the anchor version, it requires `href=\"#\"`.\n// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\n\n.btn-close {\n  box-sizing: content-box;\n  width: $btn-close-width;\n  height: $btn-close-height;\n  padding: $btn-close-padding-y $btn-close-padding-x;\n  color: $btn-close-color;\n  background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements\n  border: 0; // for button elements\n  @include border-radius();\n  opacity: $btn-close-opacity;\n\n  // Override <a>'s hover style\n  &:hover {\n    color: $btn-close-color;\n    text-decoration: none;\n    opacity: $btn-close-hover-opacity;\n  }\n\n  &:focus {\n    outline: 0;\n    box-shadow: $btn-close-focus-shadow;\n    opacity: $btn-close-focus-opacity;\n  }\n\n  &:disabled,\n  &.disabled {\n    pointer-events: none;\n    user-select: none;\n    opacity: $btn-close-disabled-opacity;\n  }\n}\n\n.btn-close-white {\n  filter: $btn-close-white-filter;\n}\n",".toast {\n  width: $toast-max-width;\n  max-width: 100%;\n  @include font-size($toast-font-size);\n  color: $toast-color;\n  pointer-events: auto;\n  background-color: $toast-background-color;\n  background-clip: padding-box;\n  border: $toast-border-width solid $toast-border-color;\n  box-shadow: $toast-box-shadow;\n  @include border-radius($toast-border-radius);\n\n  &.showing {\n    opacity: 0;\n  }\n\n  &:not(.show) {\n    display: none;\n  }\n}\n\n.toast-container {\n  width: max-content;\n  max-width: 100%;\n  pointer-events: none;\n\n  > :not(:last-child) {\n    margin-bottom: $toast-spacing;\n  }\n}\n\n.toast-header {\n  display: flex;\n  align-items: center;\n  padding: $toast-padding-y $toast-padding-x;\n  color: $toast-header-color;\n  background-color: $toast-header-background-color;\n  background-clip: padding-box;\n  border-bottom: $toast-border-width solid $toast-header-border-color;\n  @include border-top-radius(subtract($toast-border-radius, $toast-border-width));\n\n  .btn-close {\n    margin-right: $toast-padding-x * -.5;\n    margin-left: $toast-padding-x;\n  }\n}\n\n.toast-body {\n  padding: $toast-padding-x; // apply to both vertical and horizontal\n  word-wrap: break-word;\n}\n","// .modal-open      - body class for killing the scroll\n// .modal           - container to scroll within\n// .modal-dialog    - positioning shell for the actual modal\n// .modal-content   - actual modal w/ bg and corners and stuff\n\n\n// Container that the modal scrolls within\n.modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: $zindex-modal;\n  display: none;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  // Prevent Chrome on Windows from adding a focus outline. For details, see\n  // https://github.com/twbs/bootstrap/pull/10951.\n  outline: 0;\n  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a\n  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n  // See also https://github.com/twbs/bootstrap/issues/17695\n}\n\n// Shell div to position the modal with bottom padding\n.modal-dialog {\n  position: relative;\n  width: auto;\n  margin: $modal-dialog-margin;\n  // allow clicks to pass through for custom click handling to close modal\n  pointer-events: none;\n\n  // When fading in the modal, animate it to slide down\n  .modal.fade & {\n    @include transition($modal-transition);\n    transform: $modal-fade-transform;\n  }\n  .modal.show & {\n    transform: $modal-show-transform;\n  }\n\n  // When trying to close, animate focus to scale\n  .modal.modal-static & {\n    transform: $modal-scale-transform;\n  }\n}\n\n.modal-dialog-scrollable {\n  height: subtract(100%, $modal-dialog-margin * 2);\n\n  .modal-content {\n    max-height: 100%;\n    overflow: hidden;\n  }\n\n  .modal-body {\n    overflow-y: auto;\n  }\n}\n\n.modal-dialog-centered {\n  display: flex;\n  align-items: center;\n  min-height: subtract(100%, $modal-dialog-margin * 2);\n}\n\n// Actual modal\n.modal-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`\n  // counteract the pointer-events: none; in the .modal-dialog\n  color: $modal-content-color;\n  pointer-events: auto;\n  background-color: $modal-content-bg;\n  background-clip: padding-box;\n  border: $modal-content-border-width solid $modal-content-border-color;\n  @include border-radius($modal-content-border-radius);\n  @include box-shadow($modal-content-box-shadow-xs);\n  // Remove focus outline from opened modal\n  outline: 0;\n}\n\n// Modal background\n.modal-backdrop {\n  @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);\n}\n\n// Modal header\n// Top section of the modal w/ title and dismiss\n.modal-header {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends\n  padding: $modal-header-padding;\n  border-bottom: $modal-header-border-width solid $modal-header-border-color;\n  @include border-top-radius($modal-content-inner-border-radius);\n\n  .btn-close {\n    padding: ($modal-header-padding-y * .5) ($modal-header-padding-x * .5);\n    margin: ($modal-header-padding-y * -.5) ($modal-header-padding-x * -.5) ($modal-header-padding-y * -.5) auto;\n  }\n}\n\n// Title text within header\n.modal-title {\n  margin-bottom: 0;\n  line-height: $modal-title-line-height;\n}\n\n// Modal body\n// Where all modal content resides (sibling of .modal-header and .modal-footer)\n.modal-body {\n  position: relative;\n  // Enable `flex-grow: 1` so that the body take up as much space as possible\n  // when there should be a fixed height on `.modal-dialog`.\n  flex: 1 1 auto;\n  padding: $modal-inner-padding;\n}\n\n// Footer (for actions)\n.modal-footer {\n  display: flex;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n  align-items: center; // vertically center\n  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items\n  padding: $modal-inner-padding - $modal-footer-margin-between * .5;\n  border-top: $modal-footer-border-width solid $modal-footer-border-color;\n  @include border-bottom-radius($modal-content-inner-border-radius);\n\n  // Place margin between footer elements\n  // This solution is far from ideal because of the universal selector usage,\n  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800\n  > * {\n    margin: $modal-footer-margin-between * .5;\n  }\n}\n\n// Scale up the modal\n@include media-breakpoint-up(sm) {\n  // Automatically set modal's width for larger viewports\n  .modal-dialog {\n    max-width: $modal-md;\n    margin: $modal-dialog-margin-y-sm-up auto;\n  }\n\n  .modal-dialog-scrollable {\n    height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);\n  }\n\n  .modal-dialog-centered {\n    min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);\n  }\n\n  .modal-content {\n    @include box-shadow($modal-content-box-shadow-sm-up);\n  }\n\n  .modal-sm { max-width: $modal-sm; }\n}\n\n@include media-breakpoint-up(lg) {\n  .modal-lg,\n  .modal-xl {\n    max-width: $modal-lg;\n  }\n}\n\n@include media-breakpoint-up(xl) {\n  .modal-xl { max-width: $modal-xl; }\n}\n\n// scss-docs-start modal-fullscreen-loop\n@each $breakpoint in map-keys($grid-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n  $postfix: if($infix != \"\", $infix + \"-down\", \"\");\n\n  @include media-breakpoint-down($breakpoint) {\n    .modal-fullscreen#{$postfix} {\n      width: 100vw;\n      max-width: none;\n      height: 100%;\n      margin: 0;\n\n      .modal-content {\n        height: 100%;\n        border: 0;\n        @include border-radius(0);\n      }\n\n      .modal-header {\n        @include border-radius(0);\n      }\n\n      .modal-body {\n        overflow-y: auto;\n      }\n\n      .modal-footer {\n        @include border-radius(0);\n      }\n    }\n  }\n}\n// scss-docs-end modal-fullscreen-loop\n","// Shared between modals and offcanvases\n@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: $zindex;\n  width: 100vw;\n  height: 100vh;\n  background-color: $backdrop-bg;\n\n  // Fade for backdrop\n  &.fade { opacity: 0; }\n  &.show { opacity: $backdrop-opacity; }\n}\n","// Base class\n.tooltip {\n  position: absolute;\n  z-index: $zindex-tooltip;\n  display: block;\n  margin: $tooltip-margin;\n  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n  // So reset our font and text properties to avoid inheriting weird values.\n  @include reset-text();\n  @include font-size($tooltip-font-size);\n  // Allow breaking very long words so they don't overflow the tooltip's bounds\n  word-wrap: break-word;\n  opacity: 0;\n\n  &.show { opacity: $tooltip-opacity; }\n\n  .tooltip-arrow {\n    position: absolute;\n    display: block;\n    width: $tooltip-arrow-width;\n    height: $tooltip-arrow-height;\n\n    &::before {\n      position: absolute;\n      content: \"\";\n      border-color: transparent;\n      border-style: solid;\n    }\n  }\n}\n\n.bs-tooltip-top {\n  padding: $tooltip-arrow-height 0;\n\n  .tooltip-arrow {\n    bottom: 0;\n\n    &::before {\n      top: -1px;\n      border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;\n      border-top-color: $tooltip-arrow-color;\n    }\n  }\n}\n\n.bs-tooltip-end {\n  padding: 0 $tooltip-arrow-height;\n\n  .tooltip-arrow {\n    left: 0;\n    width: $tooltip-arrow-height;\n    height: $tooltip-arrow-width;\n\n    &::before {\n      right: -1px;\n      border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;\n      border-right-color: $tooltip-arrow-color;\n    }\n  }\n}\n\n.bs-tooltip-bottom {\n  padding: $tooltip-arrow-height 0;\n\n  .tooltip-arrow {\n    top: 0;\n\n    &::before {\n      bottom: -1px;\n      border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;\n      border-bottom-color: $tooltip-arrow-color;\n    }\n  }\n}\n\n.bs-tooltip-start {\n  padding: 0 $tooltip-arrow-height;\n\n  .tooltip-arrow {\n    right: 0;\n    width: $tooltip-arrow-height;\n    height: $tooltip-arrow-width;\n\n    &::before {\n      left: -1px;\n      border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;\n      border-left-color: $tooltip-arrow-color;\n    }\n  }\n}\n\n.bs-tooltip-auto {\n  &[data-popper-placement^=\"top\"] {\n    @extend .bs-tooltip-top;\n  }\n  &[data-popper-placement^=\"right\"] {\n    @extend .bs-tooltip-end;\n  }\n  &[data-popper-placement^=\"bottom\"] {\n    @extend .bs-tooltip-bottom;\n  }\n  &[data-popper-placement^=\"left\"] {\n    @extend .bs-tooltip-start;\n  }\n}\n\n// Wrapper for the tooltip content\n.tooltip-inner {\n  max-width: $tooltip-max-width;\n  padding: $tooltip-padding-y $tooltip-padding-x;\n  color: $tooltip-color;\n  text-align: center;\n  background-color: $tooltip-bg;\n  @include border-radius($tooltip-border-radius);\n}\n","@mixin reset-text {\n  font-family: $font-family-base;\n  // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.\n  font-style: normal;\n  font-weight: $font-weight-normal;\n  line-height: $line-height-base;\n  text-align: left; // Fallback for where `start` is not supported\n  text-align: start;\n  text-decoration: none;\n  text-shadow: none;\n  text-transform: none;\n  letter-spacing: normal;\n  word-break: normal;\n  word-spacing: normal;\n  white-space: normal;\n  line-break: auto;\n}\n",".popover {\n  position: absolute;\n  top: 0;\n  left: 0 #{\"/* rtl:ignore */\"};\n  z-index: $zindex-popover;\n  display: block;\n  max-width: $popover-max-width;\n  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n  // So reset our font and text properties to avoid inheriting weird values.\n  @include reset-text();\n  @include font-size($popover-font-size);\n  // Allow breaking very long words so they don't overflow the popover's bounds\n  word-wrap: break-word;\n  background-color: $popover-bg;\n  background-clip: padding-box;\n  border: $popover-border-width solid $popover-border-color;\n  @include border-radius($popover-border-radius);\n  @include box-shadow($popover-box-shadow);\n\n  .popover-arrow {\n    position: absolute;\n    display: block;\n    width: $popover-arrow-width;\n    height: $popover-arrow-height;\n\n    &::before,\n    &::after {\n      position: absolute;\n      display: block;\n      content: \"\";\n      border-color: transparent;\n      border-style: solid;\n    }\n  }\n}\n\n.bs-popover-top {\n  > .popover-arrow {\n    bottom: subtract(-$popover-arrow-height, $popover-border-width);\n\n    &::before {\n      bottom: 0;\n      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;\n      border-top-color: $popover-arrow-outer-color;\n    }\n\n    &::after {\n      bottom: $popover-border-width;\n      border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;\n      border-top-color: $popover-arrow-color;\n    }\n  }\n}\n\n.bs-popover-end {\n  > .popover-arrow {\n    left: subtract(-$popover-arrow-height, $popover-border-width);\n    width: $popover-arrow-height;\n    height: $popover-arrow-width;\n\n    &::before {\n      left: 0;\n      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;\n      border-right-color: $popover-arrow-outer-color;\n    }\n\n    &::after {\n      left: $popover-border-width;\n      border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;\n      border-right-color: $popover-arrow-color;\n    }\n  }\n}\n\n.bs-popover-bottom {\n  > .popover-arrow {\n    top: subtract(-$popover-arrow-height, $popover-border-width);\n\n    &::before {\n      top: 0;\n      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);\n      border-bottom-color: $popover-arrow-outer-color;\n    }\n\n    &::after {\n      top: $popover-border-width;\n      border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);\n      border-bottom-color: $popover-arrow-color;\n    }\n  }\n\n  // This will remove the popover-header's border just below the arrow\n  .popover-header::before {\n    position: absolute;\n    top: 0;\n    left: 50%;\n    display: block;\n    width: $popover-arrow-width;\n    margin-left: -$popover-arrow-width * .5;\n    content: \"\";\n    border-bottom: $popover-border-width solid $popover-header-bg;\n  }\n}\n\n.bs-popover-start {\n  > .popover-arrow {\n    right: subtract(-$popover-arrow-height, $popover-border-width);\n    width: $popover-arrow-height;\n    height: $popover-arrow-width;\n\n    &::before {\n      right: 0;\n      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;\n      border-left-color: $popover-arrow-outer-color;\n    }\n\n    &::after {\n      right: $popover-border-width;\n      border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;\n      border-left-color: $popover-arrow-color;\n    }\n  }\n}\n\n.bs-popover-auto {\n  &[data-popper-placement^=\"top\"] {\n    @extend .bs-popover-top;\n  }\n  &[data-popper-placement^=\"right\"] {\n    @extend .bs-popover-end;\n  }\n  &[data-popper-placement^=\"bottom\"] {\n    @extend .bs-popover-bottom;\n  }\n  &[data-popper-placement^=\"left\"] {\n    @extend .bs-popover-start;\n  }\n}\n\n// Offset the popover to account for the popover arrow\n.popover-header {\n  padding: $popover-header-padding-y $popover-header-padding-x;\n  margin-bottom: 0; // Reset the default from Reboot\n  @include font-size($font-size-base);\n  color: $popover-header-color;\n  background-color: $popover-header-bg;\n  border-bottom: $popover-border-width solid $popover-border-color;\n  @include border-top-radius($popover-inner-border-radius);\n\n  &:empty {\n    display: none;\n  }\n}\n\n.popover-body {\n  padding: $popover-body-padding-y $popover-body-padding-x;\n  color: $popover-body-color;\n}\n","// Notes on the classes:\n//\n// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)\n//    even when their scroll action started on a carousel, but for compatibility (with Firefox)\n//    we're preventing all actions instead\n// 2. The .carousel-item-start and .carousel-item-end is used to indicate where\n//    the active slide is heading.\n// 3. .active.carousel-item is the current slide.\n// 4. .active.carousel-item-start and .active.carousel-item-end is the current\n//    slide in its in-transition state. Only one of these occurs at a time.\n// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end\n//    is the upcoming slide in transition.\n\n.carousel {\n  position: relative;\n}\n\n.carousel.pointer-event {\n  touch-action: pan-y;\n}\n\n.carousel-inner {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  @include clearfix();\n}\n\n.carousel-item {\n  position: relative;\n  display: none;\n  float: left;\n  width: 100%;\n  margin-right: -100%;\n  backface-visibility: hidden;\n  @include transition($carousel-transition);\n}\n\n.carousel-item.active,\n.carousel-item-next,\n.carousel-item-prev {\n  display: block;\n}\n\n/* rtl:begin:ignore */\n.carousel-item-next:not(.carousel-item-start),\n.active.carousel-item-end {\n  transform: translateX(100%);\n}\n\n.carousel-item-prev:not(.carousel-item-end),\n.active.carousel-item-start {\n  transform: translateX(-100%);\n}\n\n/* rtl:end:ignore */\n\n\n//\n// Alternate transitions\n//\n\n.carousel-fade {\n  .carousel-item {\n    opacity: 0;\n    transition-property: opacity;\n    transform: none;\n  }\n\n  .carousel-item.active,\n  .carousel-item-next.carousel-item-start,\n  .carousel-item-prev.carousel-item-end {\n    z-index: 1;\n    opacity: 1;\n  }\n\n  .active.carousel-item-start,\n  .active.carousel-item-end {\n    z-index: 0;\n    opacity: 0;\n    @include transition(opacity 0s $carousel-transition-duration);\n  }\n}\n\n\n//\n// Left/right controls for nav\n//\n\n.carousel-control-prev,\n.carousel-control-next {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  z-index: 1;\n  // Use flex for alignment (1-3)\n  display: flex; // 1. allow flex styles\n  align-items: center; // 2. vertically center contents\n  justify-content: center; // 3. horizontally center contents\n  width: $carousel-control-width;\n  padding: 0;\n  color: $carousel-control-color;\n  text-align: center;\n  background: none;\n  border: 0;\n  opacity: $carousel-control-opacity;\n  @include transition($carousel-control-transition);\n\n  // Hover/focus state\n  &:hover,\n  &:focus {\n    color: $carousel-control-color;\n    text-decoration: none;\n    outline: 0;\n    opacity: $carousel-control-hover-opacity;\n  }\n}\n.carousel-control-prev {\n  left: 0;\n  background-image: if($enable-gradients, linear-gradient(90deg, rgba($black, .25), rgba($black, .001)), null);\n}\n.carousel-control-next {\n  right: 0;\n  background-image: if($enable-gradients, linear-gradient(270deg, rgba($black, .25), rgba($black, .001)), null);\n}\n\n// Icons for within\n.carousel-control-prev-icon,\n.carousel-control-next-icon {\n  display: inline-block;\n  width: $carousel-control-icon-width;\n  height: $carousel-control-icon-width;\n  background-repeat: no-repeat;\n  background-position: 50%;\n  background-size: 100% 100%;\n}\n\n/* rtl:options: {\n  \"autoRename\": true,\n  \"stringMap\":[ {\n    \"name\"    : \"prev-next\",\n    \"search\"  : \"prev\",\n    \"replace\" : \"next\"\n  } ]\n} */\n.carousel-control-prev-icon {\n  background-image: escape-svg($carousel-control-prev-icon-bg);\n}\n.carousel-control-next-icon {\n  background-image: escape-svg($carousel-control-next-icon-bg);\n}\n\n// Optional indicator pips/controls\n//\n// Add a container (such as a list) with the following class and add an item (ideally a focusable control,\n// like a button) with data-bs-target for each slide your carousel holds.\n\n.carousel-indicators {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 2;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  // Use the .carousel-control's width as margin so we don't overlay those\n  margin-right: $carousel-control-width;\n  margin-bottom: 1rem;\n  margin-left: $carousel-control-width;\n  list-style: none;\n\n  [data-bs-target] {\n    box-sizing: content-box;\n    flex: 0 1 auto;\n    width: $carousel-indicator-width;\n    height: $carousel-indicator-height;\n    padding: 0;\n    margin-right: $carousel-indicator-spacer;\n    margin-left: $carousel-indicator-spacer;\n    text-indent: -999px;\n    cursor: pointer;\n    background-color: $carousel-indicator-active-bg;\n    background-clip: padding-box;\n    border: 0;\n    // Use transparent borders to increase the hit area by 10px on top and bottom.\n    border-top: $carousel-indicator-hit-area-height solid transparent;\n    border-bottom: $carousel-indicator-hit-area-height solid transparent;\n    opacity: $carousel-indicator-opacity;\n    @include transition($carousel-indicator-transition);\n  }\n\n  .active {\n    opacity: $carousel-indicator-active-opacity;\n  }\n}\n\n\n// Optional captions\n//\n//\n\n.carousel-caption {\n  position: absolute;\n  right: (100% - $carousel-caption-width) * .5;\n  bottom: $carousel-caption-spacer;\n  left: (100% - $carousel-caption-width) * .5;\n  padding-top: $carousel-caption-padding-y;\n  padding-bottom: $carousel-caption-padding-y;\n  color: $carousel-caption-color;\n  text-align: center;\n}\n\n// Dark mode carousel\n\n.carousel-dark {\n  .carousel-control-prev-icon,\n  .carousel-control-next-icon {\n    filter: $carousel-dark-control-icon-filter;\n  }\n\n  .carousel-indicators [data-bs-target] {\n    background-color: $carousel-dark-indicator-active-bg;\n  }\n\n  .carousel-caption {\n    color: $carousel-dark-caption-color;\n  }\n}\n","// scss-docs-start clearfix\n@mixin clearfix() {\n  &::after {\n    display: block;\n    clear: both;\n    content: \"\";\n  }\n}\n// scss-docs-end clearfix\n","//\n// Rotating border\n//\n\n// scss-docs-start spinner-border-keyframes\n@keyframes spinner-border {\n  to { transform: rotate(360deg) #{\"/* rtl:ignore */\"}; }\n}\n// scss-docs-end spinner-border-keyframes\n\n.spinner-border {\n  display: inline-block;\n  width: $spinner-width;\n  height: $spinner-height;\n  vertical-align: $spinner-vertical-align;\n  border: $spinner-border-width solid currentColor;\n  border-right-color: transparent;\n  // stylelint-disable-next-line property-disallowed-list\n  border-radius: 50%;\n  animation: $spinner-animation-speed linear infinite spinner-border;\n}\n\n.spinner-border-sm {\n  width: $spinner-width-sm;\n  height: $spinner-height-sm;\n  border-width: $spinner-border-width-sm;\n}\n\n//\n// Growing circle\n//\n\n// scss-docs-start spinner-grow-keyframes\n@keyframes spinner-grow {\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    opacity: 1;\n    transform: none;\n  }\n}\n// scss-docs-end spinner-grow-keyframes\n\n.spinner-grow {\n  display: inline-block;\n  width: $spinner-width;\n  height: $spinner-height;\n  vertical-align: $spinner-vertical-align;\n  background-color: currentColor;\n  // stylelint-disable-next-line property-disallowed-list\n  border-radius: 50%;\n  opacity: 0;\n  animation: $spinner-animation-speed linear infinite spinner-grow;\n}\n\n.spinner-grow-sm {\n  width: $spinner-width-sm;\n  height: $spinner-height-sm;\n}\n\n@if $enable-reduced-motion {\n  @media (prefers-reduced-motion: reduce) {\n    .spinner-border,\n    .spinner-grow {\n      animation-duration: $spinner-animation-speed * 2;\n    }\n  }\n}\n",".offcanvas {\n  position: fixed;\n  bottom: 0;\n  z-index: $zindex-offcanvas;\n  display: flex;\n  flex-direction: column;\n  max-width: 100%;\n  color: $offcanvas-color;\n  visibility: hidden;\n  background-color: $offcanvas-bg-color;\n  background-clip: padding-box;\n  outline: 0;\n  @include box-shadow($offcanvas-box-shadow);\n  @include transition(transform $offcanvas-transition-duration ease-in-out);\n}\n\n.offcanvas-backdrop {\n  @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);\n}\n\n.offcanvas-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: $offcanvas-padding-y $offcanvas-padding-x;\n\n  .btn-close {\n    padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);\n    margin-top: $offcanvas-padding-y * -.5;\n    margin-right: $offcanvas-padding-x * -.5;\n    margin-bottom: $offcanvas-padding-y * -.5;\n  }\n}\n\n.offcanvas-title {\n  margin-bottom: 0;\n  line-height: $offcanvas-title-line-height;\n}\n\n.offcanvas-body {\n  flex-grow: 1;\n  padding: $offcanvas-padding-y $offcanvas-padding-x;\n  overflow-y: auto;\n}\n\n.offcanvas-start {\n  top: 0;\n  left: 0;\n  width: $offcanvas-horizontal-width;\n  border-right: $offcanvas-border-width solid $offcanvas-border-color;\n  transform: translateX(-100%);\n}\n\n.offcanvas-end {\n  top: 0;\n  right: 0;\n  width: $offcanvas-horizontal-width;\n  border-left: $offcanvas-border-width solid $offcanvas-border-color;\n  transform: translateX(100%);\n}\n\n.offcanvas-top {\n  top: 0;\n  right: 0;\n  left: 0;\n  height: $offcanvas-vertical-height;\n  max-height: 100%;\n  border-bottom: $offcanvas-border-width solid $offcanvas-border-color;\n  transform: translateY(-100%);\n}\n\n.offcanvas-bottom {\n  right: 0;\n  left: 0;\n  height: $offcanvas-vertical-height;\n  max-height: 100%;\n  border-top: $offcanvas-border-width solid $offcanvas-border-color;\n  transform: translateY(100%);\n}\n\n.offcanvas.show {\n  transform: none;\n}\n","@each $color, $value in $theme-colors {\n  .link-#{$color} {\n    color: $value;\n\n    @if $link-shade-percentage != 0 {\n      &:hover,\n      &:focus {\n        color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));\n      }\n    }\n  }\n}\n","// Credit: Nicolas Gallagher and SUIT CSS.\n\n.ratio {\n  position: relative;\n  width: 100%;\n\n  &::before {\n    display: block;\n    padding-top: var(--#{$variable-prefix}aspect-ratio);\n    content: \"\";\n  }\n\n  > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n\n@each $key, $ratio in $aspect-ratios {\n  .ratio-#{$key} {\n    --#{$variable-prefix}aspect-ratio: #{$ratio};\n  }\n}\n","// Shorthand\n\n.fixed-top {\n  position: fixed;\n  top: 0;\n  right: 0;\n  left: 0;\n  z-index: $zindex-fixed;\n}\n\n.fixed-bottom {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: $zindex-fixed;\n}\n\n// Responsive sticky top\n@each $breakpoint in map-keys($grid-breakpoints) {\n  @include media-breakpoint-up($breakpoint) {\n    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n    .sticky#{$infix}-top {\n      position: sticky;\n      top: 0;\n      z-index: $zindex-sticky;\n    }\n  }\n}\n","// scss-docs-start stacks\n.hstack {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n}\n\n.vstack {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  align-self: stretch;\n}\n// scss-docs-end stacks\n","//\n// Visually hidden\n//\n\n.visually-hidden,\n.visually-hidden-focusable:not(:focus):not(:focus-within) {\n  @include visually-hidden();\n}\n","// stylelint-disable declaration-no-important\n\n// Hide content visually while keeping it accessible to assistive technologies\n//\n// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/\n// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/\n\n@mixin visually-hidden() {\n  position: absolute !important;\n  width: 1px !important;\n  height: 1px !important;\n  padding: 0 !important;\n  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686\n  overflow: hidden !important;\n  clip: rect(0, 0, 0, 0) !important;\n  white-space: nowrap !important;\n  border: 0 !important;\n}\n\n// Use to only display content when it's focused, or one of its child elements is focused\n// (i.e. when focus is within the element/container that the class was applied to)\n//\n// Useful for \"Skip to main content\" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1\n\n@mixin visually-hidden-focusable() {\n  &:not(:focus):not(:focus-within) {\n    @include visually-hidden();\n  }\n}\n","//\n// Stretched link\n//\n\n.stretched-link {\n  &::#{$stretched-link-pseudo-element} {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: $stretched-link-z-index;\n    content: \"\";\n  }\n}\n","//\n// Text truncation\n//\n\n.text-truncate {\n  @include text-truncate();\n}\n","// Text truncate\n// Requires inline-block or block for proper styling\n\n@mixin text-truncate() {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n",".vr {\n  display: inline-block;\n  align-self: stretch;\n  width: 1px;\n  min-height: 1em;\n  background-color: currentColor;\n  opacity: $hr-opacity;\n}\n",".address {\n\tfont-style: unset;\n}\n\n@media only screen and (min-width: 640px) {\n\t.reverse-indent {\n\t\tdisplay: inline-block;\n\t\tmargin-left: 1em;\n\t\tpadding-right: 1em;\n\t\ttext-indent: -1em;\n\t\twidth: 100%;\n\t}\n\t.reverse-indent:after {\n\t\tcontent: '';\n\t\tdisplay: table;\n\t\tclear: both;\n\t}\n}\n\n/*\nGeneric Footer\n\nThis defines the web footer. \n\nMarkup:\n<div class=\"footer\">\n    <div class=\"p-t_3 p-b_3 p_4 flex br_0 br-t_3 lh_2 br_solid br_shade-n1 c_shade-1 texture_light bg_shade-1\">&nbsp;</div>\n    <div class=\"flex flex_column flex_row:lg justify_between p_4 p_5-large texture_dark\" style=\"\">\n        <div class=\"m_auto m-l_0:lg p-l_4:md p-r_5:md\">\n            <div class=\"logo_primary-alt  max-w_20\"><span class=\"alt\">logo_primary-alt max-w_10</span></div>\n            {{> \"Sub.Component.Navigation.Footer.Address\" modifier_class=\"\"}}\n            {{> \"Sub.Component.Navigation.Footer.Social\" modifier_class=\"\"}}\n        </div>\n        <div class=\"flex_shrink p-l_4:md p-r_4:md w_100 w_auto:md\">\n            {{> \"Sub.Component.Navigation.Footer.ACCProductLinks\" modifier_class=\"\"}}\n        </div>\n    </div>\n    {{> \"Sub.Component.Navigation.Footer.Subfooter\" modifier_class=\"\"}}\n    {{> \"Sub.Component.Navigation.Footer.Cite\" }}\n</div>\n\nSubComponents: \nSub.Component.Navigation.Footer.Address - Addresses\nSub.Component.Navigation.Footer.Social - Social Links\nSub.Component.Navigation.Footer.ACCProductLinks - Sister Sites\nSub.Component.Navigation.Footer.Subfooter - Sub Footer\nSub.Component.Navigation.Footer.Cite - Citation for the Site\n\nWeight: 40\n\nStyleguide Component.Navigation.Footer\n*/\n\n\n/*\nSub Footer\n \nDescription: ACC has some basic legal information that should be on every property. \n \nMarkup:\n<!-- subfooter -->\n<div id=\"subfooter\" class=\"bg_primary c_white font_n1 p-x_4 p-y_4\">\n    <ul class=\"block footer-bottom-links ul_none\">\n        <li class=\"inline p-r_2 p-y_2\"><a href=\"https://www.acc.org/Footer-Pages/Media-Center\"\n                    class=\"c_white-6 h:c_white\">Media Center</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Quick-Start-Guide\"\n                    class=\"c_white-6 h:c_white\">ACC.org Quick Start Guide</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Advertising-and-Sponsorship-Policy\"\n                    class=\"c_white-6 h:c_white\">Advertising &amp; Sponsorship Policy</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Clinical-Content-Disclaimer\"\n                    class=\"c_white-6 h:c_white\">Clinical Content Disclaimer</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Editorial-Board\"\n                    class=\"c_white-6 h:c_white\">Editorial Board</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Privacy-Policy\"\n                    class=\"c_white-6 h:c_white\">Privacy Policy</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Registered-User-Agreement\"\n                    class=\"c_white-6 h:c_white\">Registered User Agreement</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Terms-and-Conditions\"\n                    class=\"c_white-6 h:c_white\">Terms of Service</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/Footer-Pages/Cookie-Policy\"\n                    class=\"c_white-6 h:c_white\">Cookie Policy</a></li>\n            <li class=\"inline p_2\"><a href=\"https://www.acc.org/sitemap-acc.xml\" class=\"c_white-6 h:c_white\">Site\n                    Map</a></li>\n    </ul>\n    <!-- /footer-bottom-links -->\n</div>\n<!-- /subfooter -->\n\n \nWeight: 0\n \nStyleguide Sub.Component.Navigation.Footer.Subfooter\n*/\n/*\n\tCite and Copyright\n\n\tContains copy right \n\n\tMarkup:\n    <div class=\"texture_light bg_shade-1 p_4\">\n        <cite class=\"c_shade-1 font_italic font_bold font_n2 p_2 lh_2\">&copy; 2023 American College of Cardiology Foundation. All rights reserved.</cite>\n    </div>\n\t\n\n\tStyleguide Sub.Component.Navigation.Footer.Cite\n\n*/\n\n/*\nAddress\n\nAddress and contact information for Heart House\n\nMarkup:\n<section class=\"address c_white\">\n    <h3 class=\"font_accent font_1 m-b_0 font_normal font_regular\">American College of Cardiology</h3>\n    <address>\n        <!-- http://microformats.org/wiki/hcard -->\n        <h4 class=\"m-b_0 font_bold font_copy font_normal font_1 m-t_4\">Heart House</h4>\n        <div class=\"flex flex_column flex_row:md font_0 font_copy gap-x_5\">\n        <div class=\"flex_auto\">\n            <ul class=\"ul_none lh_0\">\n                <li class=\"m-b_1 m-b_3:md font_normal\">\n                    <span class=\"street-address\">2400 N St. NW</span>\n                </li>\n                <li class=\"m-b_1 m-b_3:md font_normal\">\n                    <span class=\"locality \">Washington</span>,\n                    <span class=\"city-name \">\n                <abbr title=\"District of Colombia\">DC</abbr>\n                </span>\n                    <span class=\"postal-code\">20037</span>\n                </li>\n                <li class=\"m-b_1 m-b_3:md font_normal\">\n                    <a href=\"mailto:MemberCare@acc.org\" class=\"email c_white text_underline  h:c_white \">\n                        <strong class=\"p-r_2 inline block:md inline:lg\">Email:</strong>\n                        <span class=\"inline block:md inline:lg\">membercare@acc.org</span></a>\n                </li>\n            </ul>\n        </div>\n        <div class=\"flex_auto\">\n        <ul class=\"ul_none lh_0\">\n            <li class=\"m-b_1 m-b_3:md font_normal\">\n                <a tel=\"+12023756000\" href=\"tel:+12023756000\" class=\"tel c_white h:c_white h:underline\">\n                <strong class=\"p-r_2 block inline:lg\">Phone:</strong><span class=\" block inline:lg\">1-202-375-6000</span></a>\n            </li>\n            <li class=\"m-b_1 m-b_3:md font_normal\">\n                <a tel=\"+18002534636\" href=\"tel:+18002534636\" class=\"tel c_white h:c_white h:underline\">\n                <strong class=\"p-r_2 block inline:lg\">Toll Free:</strong><span class=\" block inline:lg\">1-800-253-4636</span></a>\n            </li>\n            <li class=\"m-b_1 m-b_3:md font_normal\">\n                <a fax=\"+12023757000\" href=\"fax:+12023757000\" class=\"fax c_white h:c_white h:underline\">\n                <strong class=\"p-r_2 block inline:lg\">Fax:</strong>\n                <span class=\"block inline:lg\">1202-375-7000</span>\n                </a>\n            </li>\n        </ul>\n        </div>\n        </div>\n    </address>\n</section>\n\nMarkupWrapperClasses:\n    texture_dark p_4 max-w_30\n\nStyleguide Sub.Component.Navigation.Footer.Address\n\n*/\n\n/*\nFat Footers Links\n\nFooters in the ACC sometimes have fat footers with a list of categories and links. \n\nMarkup:\n<section class=\"flex_auto p-x_3 p-y_4:lg w_1-third:lg w_50:md font_ui is-active_toggle-function\">\n    <h2 class=\"font_2 font_3:lg font_accent p-t_2 m-b_0:md m-b_2 br_none:md \">\n        <span class=\"toggle display_none:md \">\n        <i class=\"fas fa-minus-square c_white-8 p-r_4\"></i></span>\n        <a class=\"c_accent h:c_secondary-3\" href=\"#\">Conditions &amp; Topics</a>\n    </h2>\n    <ul class=\"block:md display_none font_0:lg font_n1 m-b_4 ul_none a:_block\">\n        <li class=\"text-indent_n1 p-l_4\">\n            <a class=\"c_white h:c_secondary-3 h:underline\" href=\"foo.html\">Angina</a>\n        </li>\n        <li class=\"text-indent_n1 p-l_4\">\n            <a class=\"c_white h:c_secondary-3 h:underline\" href=\"foo.html\">Aortic Aneurysm</a>\n        </li>\n        <li class=\"text-indent_n1 p-l_4\">\n            <a class=\"c_white h:c_secondary-3 h:underline\" href=\"foo.html\">Atrial Fibrillation</a>\n        </li>\n        <li class=\"text-indent_n1 p-l_4\">\n            <a class=\"c_white h:c_secondary-3 h:underline\" href=\"foo.html\">Bradycardia</a>\n        </li>\n    </ul>\n</section>\n\nMarkupWrapperClasses:\n    texture_dark p_4\n\n\nStyleguide Component.Navigation.Footer.Fat-Footer-Links\n\n*/\n\n/*\nACC Product Links\n\nLinks to the other major products in the ACC portfolio \n\nMarkup:\n<!-- ACCProductLinks -->\n<section class=\"acc-websites flex_auto\">\n        <ul class=\"ul_none lh_2 font_0\">\n            <li class=\"c_white\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.jacc.org/\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">ACC.org</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1 br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.jacc.org/\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">JACC Journals</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>            \n            <li class=\"c_white br_solid br_0 br-t_1 br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"http://cvquality.acc.org/\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">Quality Improvement for Institutions</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"http://cvquality.acc.org/NCDR-Home\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">NCDR</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://cvquality.acc.org/accreditation\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">ACC Accreditation Services</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.cardiosmart.org/For-Clinicians\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">CardioSmart</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.medaxiom.com/\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">MedAxiom</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n            <li class=\"c_white br_solid br_0 br-t_1  br_white-5\">\n                <a target=\"_blank\" class=\"c_white flex flex_row h:bg_black-2 h:c_white justify_between p-x_2 p_3\" href=\"https://www.acc.org/About-ACC/Contact-Us\">\n                    <span class=\"flex_shrink inline-block p-r_4:lg p-r_3 p-l_3\">Contact Us</span>\n                    <i class=\"c_white m-l_auto fa-external-link-square fas flex_shrink float_right h:c_white p-r_3\"></i>\n                </a>\n            </li>\n        </ul>\n    </section>\n<!-- /ACCProductLinks -->\n\nMarkupWrapperClasses:\ntexture_dark p_4\n\nStyleguide Sub.Component.Navigation.Footer.ACCProductLinks\n\n*/\n/*\nSocial Links\n\nThe college has a collection of social or secondary platforms we interact with.\n\nMarkup:\n<!-- Social -->\n<h4 class=\"c_white font_regular font_accent m-b_3 m-b_4:lg text_center text_left:lg\">Stay Connected\n</h4>\n<ul class=\"flex social-bar ul_none c_white h:c_white m_0\">\n    <li class=\"flex_auto m-r_2\"><a href=\"http://www.youtube.com/user/ACCinTouch\" target=\"_blank\" class=\"bg_youtube social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-youtube\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://www.linkedin.com/company/american-college-of-cardiology/\" target=\"_blank\" class=\"bg_linkedin social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-linkedin-in\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://www.facebook.com/AmericanCollegeofCardiology\" target=\"_blank\" class=\"bg_facebook social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-facebook-square\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://twitter.com/accintouch\" target=\"_blank\" class=\"bg_twitter social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-square-x-twitter\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://www.instagram.com/americancollegeofcardiology\" target=\"_blank\" class=\"bg_instagram social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-instagram\"></i></a></li>\n    <!--<li class=\"flex_auto m-r_2\"><a href=\"https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US\" target=\"_blank\" class=\"bg_google-play social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-google-play\"></i></a></li>\n    <li class=\"flex_auto m-r_2\"><a href=\"https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps\" target=\"_blank\" class=\"bg_apple-store social-bar--button block m-b_0 p_3 c_white-8 h:c_white text_center h:bg_primary-n1\"><i class=\"fab fa-apple\"></i></a></li>-->\n</ul>\n<!-- Social -->\n\nMarkupWrapperClasses:\ntexture_dark p_4 max-w_40\n\nStyleguide Sub.Component.Navigation.Footer.Social\n\n*/\n","/*\nTriple Pricing Bento\n\n<div class=\"reading-typography\"> In web or UI design, this approach visually arranges content into clearly defined blocks or modules—usually of equal or complementary sizes—within a grid. It helps present multiple options, categories, or pieces of information in a compact, organized, and visually balanced way, often enhancing scannability and user choice.</p><p><strong>Use this component to display structured pricing options for multiple membership types.</strong> It visually distinguishes tiers like Member, Nonmember, and Fellows in Training or Emeritus Members using clear headings, large pricing, and consistent formatting.<ul><li>Adapts layout responsively from side-by-side (desktop) to stacked (mobile).</li><li>Color-coded backgrounds improve segmentation.</li><li>Use when side-by-side price comparisons are needed.</li><li>Avoid when only one price is shown — use a simple card instead.</li></ul></p></div>\n\nMarkup:\n<ul class=\"gap_4 gap_4:md gap_5:lg ul_none triple-bento font_n2 font_n1:md font_0:lg\">\n{{> Sub.Recipe.PriceTable.Bento.Card   modifier_class=\"primary\"}}\n{{> Sub.Recipe.PriceTable.Bento.Card   modifier_class=\"secondary\"}}\n{{> Sub.Recipe.PriceTable.Bento.Card  modifier_class=\"accent\"}}\n</ul>\n\nSubComponents:\nSub.Recipe.PriceTable.Bento.Card  - Price Card\n\nMarkupWrapperClasses: reading-typography m-b_4 wrapper-container\n\nWeight: 0\n\nStyleguide Recipes.PriceTable.Bento\n\n*/\n\n\n/*\nPrice Bento Price Card\n\n<p>The Bento Pricing Card is a flexible pricing presentation component designed for purchase plan options. It supports multiple price tiers and optional notes, accommodating varied member types and durations. This component ensures consistent styling, responsive behavior, and semantic clarity across different purchase contexts.</p><p><strong>Use when:</strong> you need to visually present one or more pricing options with supporting content like membership type and terms.</p><p><strong>Do not use when:</strong> displaying simple, single-line prices or ungrouped price information not related to purchasing tiers.</p>\n\nprimary         - Used for Member\nsecondary         - Used for Non-Member\naccent         - Used for Any Reduced Pricing\n\n\nMarkup: \n<li data-element=\"price-card\" class=\"flex flex_column m_0 justify_start br_round bg_{{ modifier_class }}-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit\">\n    <header item-label=\"price-tier\" class=\"items_top m-b_3:md m-b_4\">\n        <h2 data-element=\"price-card-title\" class=\"font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0\">{{ modifier_class }}</h2>\n    </header>\n    <main class=\"m-t_auto\">\n        <div item-label=\"price-cost-breakdown\">\n            <h3 class=\"flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap\"><span class=\"font_bold\">$900</span><span class=\"font_light\">/</span><span class=\"font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap\">5 year <br>purchase plan </span></h3>\n        </div>\n        <div class=\"c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3\">\n            <span class=\"flex_auto grid\">\n                <span class=\"br-t_1 br-tl_radius br_inherit br_solid self_center\"></span>\n            </span>\n            <span class=\"flex_shrink p-x_3 lh_1 text_center\">\n                or\n            </span>\n            <span class=\"flex_auto grid\">\n                <span class=\"br-t_1 br-tl_radius br_inherit br_solid self_center\"></span>\n            </span>\n        </div>\n        <div item-label=\"price-cost-breakdown\">\n            <h3 class=\"flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap\"><span class=\"font_bold\">$300</span><span class=\"font_light\">/</span><span class=\"font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap\">1 year <br />purchase plan </span></h3>\n        </div>       \n    </main>\n    <footer class=\"m-b_n3:md m-t_auto\"><div><i class=\"fa-solid fa-plus p-r_3\" aria-hidden=\"true\"></i>Annual ABIM MOC fee<sup class=\"font_bold\">*</sup></div></footer>\n</li>\n\nNote: This is a strict structured component so all cards must match eachother content models. Keep it Apples to Apples!\n\nWeight: 0\n\nStyleGuide Sub.Recipe.PriceTable.Bento.Card \n\n*/\n\n\n.triple-bento{\n    display:grid;\n    grid-template-columns:100%;\n    grid-template-rows: auto auto auto;\n    grid-template-areas:\n        \"a\"\n        \"b\"\n        \"c\";\n\n    & li:nth-child(1){\n        grid-area: a;\n    }\n    & li:nth-child(2){\n        grid-area: b;\n    }\n    & li:nth-child(3){\n        grid-area: c;\n    }\n}\n@container ((width > #{map-get($breakpoints, sm)}) and (width < #{map-get($breakpoints, lg)})  ) {\n    .triple-bento{\n        grid-template-columns: 7fr 5fr;\n        grid-template-rows: auto auto;\n        grid-template-areas:\n        \"a c\"\n        \"b c\";\n    }\n}\n\n@container ( width > #{map-get($breakpoints, lg)} ) {\n    .triple-bento{\n        grid-template-columns: 1fr 1fr 1fr;\n        grid-template-rows: auto;\n        grid-template-areas:\"a b c\";\n    }\n}\n\n\n\n",null,"body {\n    font-family: $font_copy;\n    font-size: $font_0;\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n    font-family: $font_display;\n    font-weight: $font_regular;\n}\n\nh6 {\n    font-weight: $font_bold;\n}\n\n\n\np {\n    line-height: $line-height_2;\n}\n\nul,\nol {\n    line-height: $line-height_3;\n}\n\n\n\n// Need to move to a point were it can only clean when it is on top of a second build. \n// a,\n// a:hover {\n// \tcolor: unset;\n// }\nkbd,\ncode,\nsamp,\nvar {\n    font-family: $font_mono;\n}","@use \"sass:color\";\n\nform {\n\tborder-color: rgba($black, get-css-size(opacity, 4));\n}\nlabel {\n\tfont-size: $font_0;\n\tfont-weight: $font_bold;\n\tfont-family: $font_ui;\n\tcolor: currentColor;\n}\n%input-font {\n\tbox-sizing: border-box;\n\tfont-size: $font_0;\n\tfont-family: $font_ui;\n\tcolor: currentColor;\n}\n%input-text-base {\n\tpadding: $padding_2 $padding_3;\n\tline-height: $line-height_3;\n\tmin-height: 1.5em;\n\tborder-color: rgba($black, get-css-size(opacity, 3));\n\tborder-width: thin;\n\tborder-radius: $border_radius;\n\t\n}\n%input-focus{\n\t&:focus {\n\t\tbox-shadow: inset 1px 1px 2px 2px get-theme-color('primary', 0, CSSVAR,.12), inset 2px 2px 3px 0px get-theme-color('primary', 0, CSSVAR,.1), inset -2px -2px 3px 0px get-theme-color('primary', 0, CSSVAR,.1);\n\t\toutline-color:get-theme-color('primary', 0, CSSVAR,.5);\n\t}\n}\n\n%input-expand-to-container {\n\twidth: 100%;\n}\ninput,\nselect,\ntextarea{\n\t@extend %input-focus;\n}\n\ninput,\nselect,\ntextarea,\nlegend,\nfieldset,\nbutton {\n\tbox-sizing: border-box;\n\t@extend %input-font;\n}\nselect,\ntextarea {\n\t@extend %input-text-base;\n\t@extend %input-expand-to-container;\n}\n\n[type='color'] {\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tpadding: 0;\n\tborder-color: rgba($black, get-css-size(opacity, 3));\n}\n[type='radio'],\n[type='checkbox'] {\n\tpadding-left: $padding_3;\n}\n[type='date'],\n[type='datetime'],\n[type='datetime-local'],\n[type='email'],\n[type='month'],\n[type='number'],\n[type='password'],\n[type='search'],\n[type='tel'],\n[type='text'],\n[type='url'],\n[type='week'],\n[type='time'] {\n\t@extend %input-text-base;\n\t@extend %input-expand-to-container;\n\t\n}\n\nbutton,\n[type='button'],\n[type='submit'],\n[type='reset'] {\n\t@extend %input-text-base;\n\twidth: auto;\n\tborder-radius: $border_radius;\n}\n\nfieldset {\n\tpadding: $padding_3 $padding_4;\n\tmargin: $margin_3 0;\n\tborder-color: rgba($black, get-css-size(opacity, 2));\n}\n/*\n\n Basic Inputs\n\n Arches is strongly based on utility classes styling everything so it commonly just builds on either the base of the browser defaults or the defaults of the framework that is built on. This is a kitchen sink of html elements so you can see how this variation will effect html. There is No basic styling around the pure DOM with the utility class only.  To get full brand styling use a framework based version of arches.  \n\n  Styleguide HTML.Inputs\n\n*/\n\n/*\n\n  Text Inputs \n\n  Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.\n\nMarkup:\n<div class=\"flex_row flex gap-x_5\">\n\t<div class=\"flex_auto\">\n\t\t<h3>Utility Class</h3>\n\t\t<label for=\"example-input-email\" class='m-b_3'>Email address</label> \n\t\t<input type=\"email\" id=\"example-input-email\" placeholder=\"Enter email\"/>\n\t</div>\n\t<div class=\"flex_auto\">\n\t\t<h3>Bootstrap</h3>\n\t\t<label for=\"exampleFormControlInput1\" class=\"form-label\">Email address</label>\n\t\t<input type=\"email\" class=\"form-control\" id=\"exampleFormControlInput1\" placeholder=\"name@example.com\"/>\n\t</div>\n</div>\n\n  Styleguide HTML.Inputs.Text\n  \n*/\n\n\n/*\n\nInputs UC\n \nUtility Class only build inputs\n \nMarkup:\n<form>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-email\">Email address</label> <input type=\"email\" id=\"example-input-email\" placeholder=\"Enter email\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-password1\">Number</label> <input type=\"number\" id=\"example-input-number\" placeholder=\"Number\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-password\">Password</label> <input type=\"password\" id=\"example-input-password\" placeholder=\"Password\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-search\">Search</label> <input type=\"search\" id=\"example-input-serach\" placeholder=\"Search ..\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-tel\">Telephone number</label> <input type=\"tel\" id=\"example-input-tel\" placeholder=\"Telephone number\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-text\">Text</label> <input type=\"text\" id=\"example-input-text\" placeholder=\"Enter some text here\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-url\">Url</label> <input type=\"url\" id=\"example-input-url\" placeholder=\"Enter a url here\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-color\">Color</label> <input type=\"color\" id=\"example-inupt-color\" placeholder=\"#fff\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-date\">Date</label> <input type=\"date\" id=\"example-input-date\" placeholder=\"date\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-date-time\">Date / Time</label> <input type=\"datetime\" id=\"example-input-date-time\" placeholder=\"date / time\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-date-time-local\">Date / Time local</label> <input type=\"datetime-local\" id=\"example-input-date-time-local\" placeholder=\"date / time local\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-month\">Month</label> <input type=\"month\" id=\"example-input-month\" placeholder=\"Month\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-week\">Week</label> <input type=\"week\" id=\"example-input-week\" placeholder=\"Week\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-input-time\">Time</label> <input type=\"time\" id=\"example-input-time\" placeholder=\"Time\"></div>\n    <div class=\"m-b_3\"><label class=\"m-b_3\" for=\"example-select1\">Example select</label> <select id=\"example-select1\">\n            <option>1</option>\n            <option>2</option>\n            <option>3</option>\n            <option>4</option>\n            <option>5</option>\n        </select></div>\n    <div><label for=\"example-select2\">Example multiple select</label> <select multiple=\"\" id=\"example-select2\">\n            <option>1</option>\n            <option>2</option>\n            <option>3</option>\n            <option>4</option>\n            <option>5</option>\n        </select></div>\n    <div><label for=\"example-textarea\">Example textarea</label> <textarea id=\"example-textarea\" rows=\"3\"></textarea></div>\n    <div><label for=\"example-input-file\">File input</label> <input type=\"file\" id=\"example-input-file\"></div>\n    <fieldset>\n        <legend>I am legend</legend>\n        <div><label><input type=\"radio\" name=\"options-radios\" id=\"optionsR-radios1\" value=\"option1\" checked=\"\"> Option one is this and that—be sure to include why it's great</label></div>\n        <div><label><input type=\"radio\" name=\"options-radios\" id=\"options-radios2\" value=\"option2\"> Option two can be something else and selecting it will deselect option one</label></div>\n        <div><label><input type=\"radio\" name=\"optionsRadios\" id=\"options-radios3\" value=\"option3\" disabled=\"\"> Option three is disabled</label></div>\n    </fieldset>\n    <fieldset>\n        <legend>I am also legend</legend><label for=\"checkbox-demo-1\"><input type=\"checkbox\" id=\"checkbox-demo-1\"> Check me out</label> <label for=\"checkbox-demo-2\"><input type=\"checkbox\" id=\"checkbox-demo-2\"> Or check me out</label>\n    </fieldset>\n    <div>\n        <button type=\"button\" name=\"button\">Button</button>\n        <input type=\"button\" name=\"input\" value=\"Input Button\">\n        <input type=\"submit\" name=\"submit\" value=\"Submit Button\">\n        <input type=\"reset\" name=\"reset\" value=\"Reset Button\">\n    </div>\n</form>\n \nWeight:100\n \nStyleguide HTML.Inputs.All\n\n*/","/*\n\nTable\n\nBasic Tables with this variation of Arches. Please note that the html can have a different look depending on the brand or the framework the variation is built on.  \n\n<table><caption>Tables can have captions now.</caption><tbody><tr><th>Person</th><th>Number</th><th>Third Column</th></tr><tr><td>Someone Lastname</td><td>900</td><td>Nullam quis risus eget urna mollis ornare vel eu leo.</td></tr><tr><td><a href=\"#\">Person Name</a></td><td>1200</td><td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td></tr><tr><td>Another Person</td><td>1500</td><td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td></tr><tr><td>Last One</td><td>2800</td><td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td></tr></tbody></table>\n\n\nStyleguide HTML.BasicTable\n\n*/\n\ntable {\n\tfont-family: $font_ui;\n\tfont-size: $font_0;\n\tcaption {\n\t\tpadding: $padding_3;\n\t}\n}\nth,\ntd {\n\tpadding: $padding_2 $padding_3;\n\ttext-align: start;\n}\nthead {\n\tfont-weight: $font_bold;\n\tpadding: $padding_2 $padding_3 $padding_0; \n}\ntbody{\n\tpadding: $padding_0 $padding_3;\n}\ntfoot,\ncaption {\n\tfont-size: $font_n1;\n\tpadding: $padding_0 $padding_3 $padding_2; \n}\n","@import \"design-base\";\n@import \"crayonbox\";\n\n.font {\n\t.font--example {\n\t\tbackground-image: url(http://basehold.it/i/24);\n\t}\n\t.font--name {\n\t\tcolor: #000;\n\t}\n\n\t.font--dropcase_2x {\n\t\tcolor: map-get($theme-palette, primary);\n\t}\n}\n\n",".container,\n.card {\n\tposition: relative;\n}\n",".table {\n\t\n\ttd,\n\tth {\n\t\ttext-align: left;\n\t}\n\ttbody tr:nth-of-type(odd) {\n\t\tbackground-color: #13121202; //bg_black-_05\n\t}\n\ttr+tr{\n\t\tborder-top: 1px solid #13121240;//br_black-3\n\t}\n\t&.unshaded {\n\t\ttbody tr:nth-of-type(odd) {\n\t\t\tbackground-color: unset;\n\t\t}\n\t}\n}\n","\n.btn {\n\twhite-space: nowrap;\n\tfont-family: $font_ui;\n\tfont-weight: $font_medium;\n}\n\n\n.btn.clear {\n\tcolor: var(--link-color-dark);\n\tbackground-color: transparent;\n\tborder-color: transparent;\n\t&:hover {\n\t\tcolor: hsl(var(--link-color-dark-h),var(--link-color-dark-s),calc( var(-link-color-dark-l ) * .5 ));\n\t}\n}\n\n.btn-shade {\n\tcolor:  get-theme-color('shade', -3, CSSVAR);\n\tbackground-color: get-theme-color('shade', 3, CSSVAR);\n\t&:hover {\n\t\tcolor:  get-theme-color('shade', -5, CSSVAR);\n\t\tbackground-color: get-theme-color('shade', 1, CSSVAR);\n\t}\n}\n\n\n.btn-accent {\n\tbackground-color: get-theme-color('accent', -1, CSSVAR);\n\t&:hover {\n\t\tbackground-color: get-theme-color('accent', -3, CSSVAR);\n\t}\n}\n\n.btn.shadow {\n\tbox-shadow: make-shadow(3, 'drop', #000, 0.4);\n}\n\n.btn.shadow:hover {\n\tbox-shadow: make-shadow(1, 'drop', #000, 0.1);\n}\n","/*\nCarousel ALT\n\nA slide-show component for cycling through groups of images and text.\n\n.no-controls            Will remove left and right arrow\n.text-indicators        Converts the circle indicators to text tabs that lock to the right side of the images.\n.chevron-on             Adds a light orange chevron on the '.active' indicator to increase its impact.\n\n\nMarkup:\n<div\n\tid=\"carouselExampleFade\"\n\tclass=\"carousel carousel-alt slide no-controls text-indicators chevron-on\"\n>\n\t<ol class=\"carousel-indicators\">\n\t\t<li data-target=\"#carouselExampleFade\" data-slide-to=\"0\" class=\"wrap\" >\n\t\t\tquaerat odit assumenda\n\t\t</li>\n\t\t<li data-target=\"#carouselExampleFade\" data-slide-to=\"1\" class=\" wrap\">\n\t\t\tdelectus sunt optio\n\t\t</li>\n\t\t<li data-target=\"#carouselExampleFade\" data-slide-to=\"2\" class=\" wrap\">\n\t\t\tdeserunt quia quasi\n\t\t</li>\n\t</ol>\n\t<!-- Wrapper for slides -->\n\t<div class=\"carousel-inner\" role=\"listbox\">\n\t\t<div class=\"carousel-item active\">\n\t\t\t<a><img class=\"block w_100\" src=\"http://lorempixel.com/630/420/animals\" alt=\"...\"/></a>\n\t\t\t<div class=\"carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0\">\n                    <span class=\"title  font_display block m-b_2 font_4:md m-b_3:md\">Cardiac Syncope Program Launches!</span>\n                    <p><strong>NEW</strong>&nbsp;|&nbsp;Hear from an expert panel and complete four patient cases to test your knowledge on our Syncope Program! <a href=\"http://edu.acc.org/diweb/catalog/item/eid/SYNCOPE2019\" title=\"\" class=\"\" target=\"_blank\"><strong>Find out more!</strong></a></p>\n                </div>\n\t\t</div>\n\t\t<div class=\"carousel-item\">\n\t\t\t<a><img class=\"block w_100\" src=\"http://lorempixel.com/630/420/nature\" alt=\"...\"/></a>\n\t\t\t<div class=\"carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0\">\n\t\t\t\t<span class=\"title font_display block m-b_2 font_4:md m-b_3:md\">sint explicabo sequi</span> Earum nihil omnis.\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"carousel-item\">\n\t\t\t<a><img class=\"block w_100\" src=\"http://lorempixel.com/630/420/food\" alt=\"...\"/></a>\n\t\t\t<div class=\"carousel-caption bg_black-7 text-shadow_black-1 text_center text_left:md font_2:md c_white p_3:lg p-b_4:lg p-y_3 lh_1 b_0 r_0 l_0\">\n\t\t\t\t<span class=\"title font_display block m-b_2 font_4:md m-b_3:md\">sint explicabo sequi</span> Earum nihil omnis.\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<!-- Controls -->\n\t<a\n\t\tclass=\"left carousel-control-prev\"\n\t\thref=\"#carouselExampleFade\"\n\t\trole=\"button\"\n\t\tdata-slide=\"prev\"\n\t>\n\t\t<i class=\"fas fa-chevron-left\"></i>\n\t\t<span class=\"sr-only\">Previous</span>\n\t</a>\n\t<a\n\t\tclass=\"right carousel-control-next\"\n\t\thref=\"#carouselExampleFade\"\n\t\trole=\"button\"\n\t\tdata-slide=\"next\"\n\t>\n\t\t<i class=\"fas fa-chevron-right\"></i>\n\t\t<span class=\"sr-only\">Next</span>\n\t</a>\n</div>\n\n\nStyleguide  Bootstrap.Carousel\n\n*/\n\n@use \"sass:math\";\n\n$carousel-control-font-size: ms(1);\n.carousel-alt {\n\tmax-width: 630px;\n\tposition: relative;\n\tbackground: url(\"http://cdn.backgroundhost.com/backgrounds/subtlepatterns/subtle_surface.png\");\n\tbackground-repeat: repeat;\n\tmargin: 0 auto 1rem;\n\n\t&:before {\n\t\tdisplay: block;\n\t\tcontent: \"\";\n\t\twidth: 100%;\n\t\tpadding-top: math.div(2, 3) * 100%;\n\t}\n\n\t> .carousel-inner {\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tleft: 0;\n\t}\n\n\t.carousel-indicators {\n\t\tbackground-color: rgba(0, 0, 0, 0.6);\n\t\tbottom: auto;\n\t\twidth: 100%;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tmargin: 0;\n\n\t\tli {\n\t\t\ttext-indent: -9999px;\n\t\t\toverflow: hidden;\n\t\t\tborder: none;\n\t\t\tborder-radius: $global-border-round;\n\t\t\tbox-sizing: content-box;\n\t\t\twidth: 12px;\n\t\t\theight: 12px;\n\t\t\tmargin-top: 5px;\n\t\t\tmargin-bottom: 5px;\n\t\t\t&.active {\n\t\t\t\tborder-color: get-theme-color(accent,0,CSSVAR);\n\t\t\t\tbackground-color: get-theme-color(accent,0,CSSVAR);\n\t\t\t}\n\t\t}\n\t}\n\n\t.carousel-caption {\n\t}\n\t&.chevron-on .carousel-indicators li.active:before {\n\t\t@if($usingFontAwesome){\n\t\t@extend %font-awesome-pro !optional;\n\t\tcontent: \"\\f054\";\n\t\t}\n\t\tcolor: get-theme-color(accent,0,CSSVAR);\n\t\tfont-size: ms(4);\n\t\tpadding-top: 5px;\n\t\ttop: 4px;\n\t\tleft: 4px;\n\t}\n\n\t&.text-indicators {\n\t\t@media #{$medium-up} {\n\t\t\tmax-width: 900px;\n\n\t\t\t&:before {\n\t\t\t\tpadding-top: math.div(7, 15) * 100%;\n\t\t\t}\n\n\t\t\t.carousel-inner {\n\t\t\t\twidth: 70%;\n\n\t\t\t\t> .carousel-item {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t&:before {\n\t\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\t\t/* width: 100%; */\n\t\t\t\t\t\twidth: 1px;\n\t\t\t\t\t\tmargin-left: -1px;\n\t\t\t\t\t\tpadding-top: 66.6666666667%;\n\t\t\t\t\t\tcontent: \"\";\n\t\t\t\t\t}\n\t\t\t\t\ta {\n\t\t\t\t\t\tfloat: left;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ta[class^=\"carousel-control\"].right {\n\t\t\t\tright: 30%;\n\t\t\t}\n\t\t\t.carousel-indicators {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\theight: 100%;\n\t\t\t\tbottom: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tright: 0;\n\t\t\t\tmax-width: 300px;\n\t\t\t\twidth: 30%;\n\t\t\t\tleft: auto;\n\n\t\t\t\tli {\n\t\t\t\t\twidth: auto;\n\t\t\t\t\tflex: 1 1 20%;\n\t\t\t\t\ttext-indent: 0;\n\t\t\t\t\tborder-radius: 0;\n\t\t\t\t\tbackground-color: get-theme-color(shade, 4,CSSVAR);\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: relative;\n\n\t\t\t\t\theight: auto;\n\t\t\t\t\tpadding: $padding_3 $padding_4;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\ttransition: background-color 0.25s ease-out;\n\t\t\t\t\t-moz-transition: background-color 0.25s ease-out;\n\t\t\t\t\t-webkit-transition: background-color 0.25s ease-out;\n\t\t\t\t\tborder: 1px solid get-theme-color(shade, 3,CSSVAR);\n\t\t\t\t\ttext-align: left;\n\t\t\t\t\tfont-size: ms(1);\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\t&:first-child {\n\t\t\t\t\t\tborder-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t&:last-child {\n\t\t\t\t\t\tborder-bottom: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t&.active {\n\t\t\t\t\t\tbackground-color: get-theme-color(shade, -1, CSSVAR);\n\t\t\t\t\t\tcolor: white;\n\t\t\t\t\t\tborder-right: get-theme-color(accent, 0, CSSVAR) 10px solid;\n\t\t\t\t\t\tpadding-right: 10px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n.carousel-control-prev,\n.carousel-control-next {\n\t.no-controls & {\n\t\t@media #{$medium-up} {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\tmin-width: 3rem;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\twidth: 20%;\n\tfont-size: $carousel-control-font-size;\n\ttext-align: center;\n\tbackground-color: rgba(0, 0, 0, 0);\n\t@media #{$medium-up} {\n\t\twidth: 10%;\n\t}\n\t@media #{$large-up} {\n\t\twidth: 5%;\n\t}\n\t// Hover/focus state\n\t&:hover,\n\t&:focus {\n\t\toutline: 0;\n\t\tcolor: get-theme-color(accent, 0,CSSVAR);\n\t\ttext-decoration: none;\n\t}\n\n\t// Toggles\n\t.fa {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tmargin-top: -10px;\n\t\tz-index: 5;\n\t\tdisplay: inline-block;\n\t}\n}\n.carousel-control-prev {\n\t// // @include gradient-horizontal($start-color: rgba(0, 0, 0, 0.5), $end-color: rgba(0, 0, 0, 0.0001));\n\t.fa {\n\t\tleft: 50%;\n\t\tmargin-left: -10px;\n\t}\n}\n\n.carousel-control-next {\n\t// // @include gradient-horizontal($start-color: rgba(0, 0, 0, 0.0001), $end-color: rgba(0, 0, 0, 0.5));\n\tleft: auto;\n\tright: 0;\n\t.fa {\n\t\tright: 50%;\n\t\tmargin-right: -10px;\n\t}\n}\n\n// Scale up controls for tablets and up\n@media #{$medium-up} {\n\t// Scale up the controls a smidge\n\t.carousel-control-prev,\n\t.carousel-control-next {\n\t\t.fas {\n\t\t\twidth: $carousel-control-font-size * 1.5;\n\t\t\theight: $carousel-control-font-size * 1.5;\n\t\t\tmargin-top: math.div($carousel-control-font-size, -2);\n\t\t\tfont-size: $carousel-control-font-size * 1.5;\n\t\t}\n\t}\n\n\t.carousel-control-prev .fa {\n\t\tmargin-left: math.div($carousel-control-font-size, -2);\n\t}\n\n\t.carousel-control-next .fa {\n\t\tmargin-right: math.div($carousel-control-font-size, -2);\n\t}\n}\n","$navbar_primary:get-theme-color(acc,0,CSSVAR);\n$navbar_hover: get-theme-color(accent,0,CSSVAR);\n$navbar_active: get-theme-color(secondary,2,CSSVAR);\n\n@if($usingFontAwesome){\t\n\t.navbar .icon-toggle_bars-times{\n        --_fa-b: '\\f0c9';\n        --_fa: \"\\f00d\";\n\t}\n\t.navbar .icon-toggle_plus-minus {\n\t\t--_fa: '\\f0fe';\n\t\t--_fa-b: '\\f146';\n\t}\n\t.navbar .icon-toggle_plus-minus-sub{\n\t\t--_fa: '\\f068';\n\t\t--_fa-b: '\\f067';\n\n\t}\n}\n.navbar {\n\tfont-family:  $font_accent;\n}\n.dropdown-menu{\n\tfont-family:  $font_ui;\n}\n.nav-link {\n\t\n\tpadding-left: $padding_2;\n\tpadding-right: $padding_2;\n}\n.navbar-dark .navbar-nav .nav-link{color: inherit;}\n\n.navbar-primary .dropdown-toggle:after {\n\tdisplay: none;\n}\n.navbar-primary .nav-item .nav-link{\n\tcolor:inherit;\n}\n\n.navbar-primary .nav-item {\n\t&:hover, &:focus-visible{\n\t\tborder-top-color: $navbar_hover;\n\t\tborder-bottom-color: #fff;\n\t\tbackground-color: #fff;\n\t\tcolor:$navbar_primary;\n\t}\n\t@media #{$medium-up} {\n\t\tborder-top: $border-width_3 $navbar_primary solid;\n\t\tborder-bottom: $border-width_3 $navbar_primary solid;\n\t\t&:hover, &:focus-visible {\n\t\t\tborder-top-color: $navbar_hover;\n\t\t\tborder-bottom-color: #fff;\n\t\t\tbackground-color: #fff;\n\t\t\tcolor: $navbar_primary;\n\n\t\t}\n\t}\n}\n.navbar-primary .navbar-nav .nav-item {\n\t@media #{$large-up} {\n\t\tborder-top: $border-width_3 $navbar_primary solid;\n\t\tborder-bottom: $border-width_3 $navbar_primary solid;\n\t\t.nav-link{ \n\t\t\t&, &:hover, &:focus-visible{\n\t\t\tcolor:inherit; }\n\t\t}\n\t\t&:hover, &:focus-visible{\n\t\t\tborder-top-color: $navbar_hover;\n\t\t\tborder-bottom-color: #fff;\n\t\t\tbackground-color: #fff;\n\t\t\tcolor: $navbar_primary;\n\t\t\t.nav-link{ \n\t\t\t\t&, &:hover, &:focus-visible{\n\t\t\t\t\tcolor:inherit;\n\t\t\t\t }\t\n\t\t\t}\n\t\t}\n\t}\n}\n@media #{$large-up} {\n\t.collapse.block\\:lg {\n\t\tdisplay: block;\n\t}\n}\n\n.dropdown-item{\n\tcolor: get-theme-color(primary, -1, CSSVAR);\n\t&:hover, &:focus-visible {\n\t\tcolor: white;\n\t\tbackground-color: get-theme-color(accent,0,CSSVAR);\n\t}\n}\n\n\n.dropdown_column{\n\tmin-width: 70vw;\n}\n@media #{$medium-up} {\n.dropdown_column{\n\tmin-width: 20rem;\n}\n}\n\n// Active /*\n\n.navbar-primary .navbar-nav .nav-item {\n\t&.active {\n\t\tborder-top-color: $navbar_active;\n\t\tborder-bottom-color: $navbar_active;\n\t\tbackground-color: $navbar_active;\n\t\tcolor: #fff;\n\t\t.nav-link{ \n\t\t\t&.active {\n\t\t\t\tcolor:inherit;\n\t\t\t\t}\t\n\t\t}\n\t\t&:hover{\n\t\t\tborder-top-color: $navbar_hover;\n\t\t\t color:$navbar_primary;\n\t\t\t}\n\t}\n}","@if($usingFontAwesome){\t\n\t.accordion .icon-toggle_plus-minus {\n        --_fa: \"\\f146\";\n\t\t--_fa-b: '\\f0fe';\n\n\t}\n}\n","#search-holder {\n\tfloat: right;\n\tclear: right;\n\twidth: 400px;\n\tposition: relative;\n\tz-index: 3000;\n\tborder: 1px solid get-theme-color(secondary,3,CSSVAR);\n\tborder-radius: $border_radius * 0.33;\n\tclear:both;\n\tinput{\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\tline-height: 1.5em;\n\t\tfont-size: 1.2em;\n\t\tbox-sizing: border-box;\n\t\tcolor: #ccc;\n\t}\n\tbutton{\n\t\tposition: absolute;\n\t\ttop: 3px;\n\t\tright: 3px;\n\t\theight: 26px;\n\t\twidth: 26px;\n\t\tbackground: #fff url(https://www.acc.org/images/icon-search.png) 50% 50% no-repeat;\n\t\tborder: 0;\n\t\toverflow: hidden;\n\t\ttext-indent: -99em;\n\t\t&:hover{\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\t.coveo-omnibox{\n\t\ttop: 30px;\n\t}\n\t.coveo-query-box-clear{\n\t\tdisplay: none !important;//this is problematic in the header search\n\t}\n}\n.search-bar {\n\twidth: 100%;\n\theight:auto;\n\tfloat:left;\n}\n#nav-search-label {\n\tposition: absolute;\n\toverflow: hidden;\n\ttext-indent: -99em;\n}\n#nav-search-in {\n\tposition: relative;\n\tdisplay: block;\n\tfloat: left;\n\twidth: 200px;\n\tpadding: 0 24px 0 10px;\n\theight: 30px;\n\toverflow: hidden;\n\tborder-right: 1px get-theme-color(secondary,3,CSSVAR) solid;\n\tbackground: #e6e6e6;\n\tborder-radius: $border_radius*0.33 0 0 $border_radius*0.33;\n\n\t#nav-search-in-content {\n\t\tdisplay: inline-block;\n\t\tmargin: 0;\n\t\tpadding: 6px 0 0 0;\n\t\ttext-indent: 1px;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\t\t\n\t\toverflow: hidden;\n\t\tmax-width: 90px;\n\t}\n\t&.nav-facade-active{\n\t\t.nav-down-arrow {\n\t\t\tposition: absolute;\n\t\t\tdisplay:inline-block;\n\t\t\tright: 10px;\n\t\t\ttop: 11px;\n\t\t\tbackground:url(\"https://www.acc.org/images/search_arrow.png\");\n\t\t\theight:5px;\n\t\t\twidth:9px;\n\t\t}\n\t\t#searchDropdownBox {\n\t\t\tcursor: pointer;\n\t\t\theight: 29px;\n\t\t\tleft: 0;\n\t\t\topacity: 0;\n\t\t\ttop: 0;\n\t\t\tvisibility: visible;\n\t\t\twidth: auto;\n\t\t}\n\t} \n}\n#searchDropdownBox {\n\tborder: 1px solid #DDDDDD;\n\tcolor: black;\n\tleft: 5px;\n\tmargin: 0;\n\toutline: medium none;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 3px;\n\tvisibility: hidden;\n\twidth: 190px;\n}\n.nav-sprite {\n\n}\n\n.nav-searchfield-outer {\n\tposition: relative;\n\tfloat: left;\n\twidth: 245px;\n\theight: 30px;\n}\n\n#twotabsearchtextbox {\n\tbackground: none repeat scroll 0 0 transparent;\n\tborder: medium none;\n\tmargin: 6px 0 0 6px;\n\toutline: medium none;\n\tpadding: 0;\n\twidth: 100%;\n}\n.nav-submit-button {\n\tmargin: 0;\n\toverflow: hidden;\n\tpadding: 0 0 0 3px;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\theight: 28px;\n\twidth: 40px;\n\t.nav-submit-input {\n\t\tborder: medium none;\n\t\tcolor: white;\n\t\tcursor: pointer;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 34px;\n\t}\n}\n\n\n/*Coveo Changes*/\n#twotabsearchtextbox .magic-box-underlay {\n    height: auto;\n  }\n  \n  #twotabsearchtextbox .magic-box {\n    border-width: 0;\n  }\n  \n  #twotabsearchtextbox .CoveoSearchbox input {\n    padding: 0;\n    height: 30px;\n  }\n  \n  #twotabsearchtextbox .magic-box .magic-box-input {\n    height: 30px;\n  }\n  \n  #twotabsearchtextbox .CoveoSearchButton {\n    height: 30px;\n    width: 32px;\n  }\n  \n  #twotabsearchtextbox #search-holder {\n    height: 32px;\n  }\n  \n  #twotabsearchtextbox .magic-box.magic-box-notEmpty .magic-box-clear {\n    width: 32px;\n  }\n  \n  #twotabsearchtextbox .magic-box .magic-box-clear {\n    height: 30px;\n    line-height: 24px;\n  }\n  \n    #twotabsearchtextbox .magic-box .magic-box-clear .magic-box-icon:before {\n      font-size: 16px;\n    }\n  \n  #twotabsearchtextbox .magic-box .magic-box-suggestions .magic-box-suggestion {\n    line-height: 14px;\n    font-size: 12px;\n    padding-bottom: 0;\n    padding-top: 0.5em;\n  }\n  \n  #twotabsearchtextbox .magic-box .magic-box-suggestions .magic-box-suggestion-seperator {\n    line-height: 14px;\n    font-size: 12px;\n    padding-bottom: 0;\n    padding-top: 0.5em;\n  }",":root {\n    --page-padding: #{get-css-size(padding, 3)};\n    --outer-content-padding: 0;\n    --inner-content-padding: #{get-css-size(padding, 3)};\n    --sidebar-width: 100%;\n    --content-max-width: calc(100% - (var(--page-padding) * 2));\n    --content-min-width: calc(100% - (var(--page-padding) * 2));\n\n    @media #{$medium-up} {\n        --inner-content-padding: #{get-css-size(padding, 4)};\n        --page-padding: #{get-css-size(padding, 4)};\n        --outer-content-padding: 0;\n        --sidebar-width: calc(300px + (var(--inner-content-padding) * 2));\n    }\n\n    @media #{$large-up} {\n        --outer-content-padding: #{get-css-size(padding, 4)};\n        --sidebar-width: 300px;\n    }\n}\n\n\n[grid-template=\"page-layout\"] {\n    margin-bottom: var(--page-padding);\n    row-gap: var(--page-padding);\n    width: 100%;\n    display: grid;\n    grid-template-columns:\n        [all-start fullscreen-start sidebar-secondary-start sidebar-primary-start] var(--page-padding) \n        [content-start center-start] 1fr \n        [content-end center-end] var(--page-padding) \n        [fullscreen-end all-end sidebar-secondary-end sidebar-primary-end];\n    grid-template-rows:\n        [fullscreen-start all-start] var(--page-padding) \n        [center-start content-start] auto \n        [center-end content-end sidebar-secondary-start] auto \n        [sidebar-secondary-end sidebar-primary-start] auto \n        [sidebar-primary-end] var(--page-padding) \n        [ fullscreen-end all-end];\n\n    @media #{$medium-up} {\n        grid-template-columns:\n            [fullscreen-start all-start sidebar-primary-start sidebar-secondary-start] var(--page-padding) \n            [content-start] var(--sidebar-width) \n            [sidebar-primary-end] var(--page-padding) \n            [ center-start] 1fr \n            [center-end content-end] var(--page-padding) \n            [fullscreen-end all-end sidebar-secondary-end];\n        grid-template-rows:\n            [all-start fullscreen-start content-start center-start sidebar-primary-start] auto \n            [content-end sidebar-secondary-start center-end sidebar-primary-end] auto \n            [sidebar-secondary-end fullscreen-end all-end];\n    }\n\n    @media #{$large-up} {\n        grid-template-columns:\n            [fullscreen-start all-start sidebar-primary-start] var(--page-padding) \n            [content-start] var(--sidebar-width) \n            [sidebar-primary-end] var(--page-padding) \n            [center-start] 1fr \n            [center-end] var(--page-padding) \n            [sidebar-secondary-start] var(--sidebar-width) \n            [content-end] var(--page-padding) \n            [fullscreen-end all-end sidebar-secondary-end];\n        grid-template-rows:\n            [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto \n            [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];\n    }\n\n    &[template-option=\"reverse\"] {\n        @media #{$medium-up} {\n            grid-template-columns:\n                [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) \n                [content-start center-start] 1fr \n                [center-end] var(--page-padding) \n                [sidebar-primary-start] var(--sidebar-width) \n                [content-end] var(--page-padding) \n                [fullscreen-end all-end sidebar-primary-end sidebar-secondary-end];\n\n        }\n\n        @media #{$large-up} {\n            grid-template-columns:\n                [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) \n                [content-start] var(--sidebar-width) \n                [sidebar-secondary-end] var(--page-padding) \n                [center-start] 1fr \n                [center-end] var(--page-padding) \n                [sidebar-primary-start] var(--sidebar-width) \n                [content-end] var(--page-padding) \n                [fullscreen-end all-end sidebar-primary-end];\n            grid-template-rows:\n                [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto \n                [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];\n        }\n    }\n}\n\n\n[grid-template=\"page-layout\"] {\n\n    & > [grid-area=\"fullscreen\"],\n    & > [grid-area=\"document\"] {\n        grid-column: fullscreen;\n        grid-row: fullscreen;\n    }\n\n    & > [grid-area=\"sidebar-primary\"] {\n        grid-column: sidebar-primary;\n        grid-row: sidebar-primary;\n    }\n\n    & > [grid-area=\"sidebar-secondary\"] {\n        grid-column: sidebar-secondary;\n        grid-row: sidebar-secondary;\n    }\n}\n\n\n[grid-area=\"content\"] {\n    grid-column: content;\n    grid-row: content;\n}\n\n%content-right {\n    & > [grid-area=\"content\"] {\n        grid-column: center-start / content-end;\n        grid-row: content;\n    }\n}\n\n%content-left {\n    & > [grid-area=\"content\"] {\n        grid-column: content-start / center-end;\n        grid-row: content;\n    }\n}\n\n%center {\n    & [grid-area=\"content\"] {\n        grid-column: center;\n        grid-row: center;\n    }\n}\n\n\n[grid-template=\"page-layout\"]:has(\n    [grid-area=\"sidebar-primary\"]),\n\n[grid-template=\"page-layout\"][template-option=\"reverse\"]:has(\n    [grid-area=\"sidebar-secondary\"]) {\n    @extend %content-right;\n}\n\n\n[grid-template=\"page-layout\"]:has(\n    [grid-area=\"sidebar-secondary\"]),\n\n[grid-template=\"page-layout\"][template-option=\"reverse\"]:has(\n    [grid-area=\"sidebar-primary\"]) {\n    @extend %content-left;\n}\n\n\n[grid-template=\"page-layout\"]:has(\n    [grid-area=\"sidebar-secondary\"]):has(\n    [grid-area=\"sidebar-primary\"]) {\n    @extend %center;\n\n    @media #{$medium-only} {\n        \n        [grid-area=\"sidebar-secondary\"] {\n            grid-column-start: center-start;\n        }\n\n        &[template-option=\"reverse\"] \n        [grid-area=\"sidebar-secondary\"] {\n            grid-column-end: center-end;\n        }\n\n        \n        [grid-area=\"sidebar-primary\"] {\n            grid-row-end: sidebar-secondary-end;\n        }\n    }\n}\n\n\n\n\n\n/*\n\nPage Layout\n\nDescripition:\n  <ol>\n    <li>\n        <strong>Overall Structure:</strong>\n        <ul>\n        <li>Design the layout to incorporate columns for content and sidebars.</li>\n        <li>\n        [sidebar]\n        [content]\n        [sidebar]</li>\n        <li>the parent uses `grid-template=\"page-layout\"`</li>\n        <li>the children uses `grid-area=\"content|sidebar-primary|sidebar-secondary\"`</li>\n        </ul>\n    </li>\n    <li>\n      <strong>Column Configuration:</strong>\n      <ul>\n        <li>Utilize 'sidebar-primary', 'sidebar-secondary', and 'content' classes to designate columns within the layout.</li>\n        <li>Define grid areas in the DOM structure for 'fullscreen', 'sidebar-primary','sidebar-secondary','container'.</li>\n      </ul>\n    </li>\n    <li>\n      <strong>Sidebar Specifications:</strong>\n      <ul>\n        <li>Sidebars are 300px wide with 1 rem padding on the left and right. (300px + 2rem)</li>\n        <li>Sidebars do not respect the page margin but adhere to margins between themselves and content.</li>\n        <li>Sidebars placed on the edge will extend to the edge of the container.</li>\n        </ul>\n        <ul>\n        <strong>Responsive Design:</strong>\n        <li>`Primary sidebar` remains fixed and aligned with the content area. It folds under the content on mobile viewports.</li>\n        <li>`Secondary sidebar` remains fixed and shifts below the content on tablet and smaller viewports.</li>\n        <li>The sidebar widths are constant when aligned with the content and changes its width to  the above content based on media breakpoints.</li>\n      </ul>\n    </li>\n    <li>\n      <strong>Content Area:</strong>\n      <ul>\n        <li>Allocate remaining space on the page for the content area, respecting a page margin.</li>\n      </ul>\n    </li>\n  </ol>\n\nMarkup:\n<h4>Document(fullscreen)</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"fullscreen\">Document</div>\n</section>\n<h4>Content No Sidebars</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"content\">Content</div>  \n</section>\n<h4>Content with Primary Sidebar</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"sidebar-primary\">sidebar primary</div> \n    <div grid-area=\"content\">content</div> \n</section>\n<h4>Content with Primary Sidebar - Reverse <code>template-option=\"reverse\"</code></h4>\n<section grid-template=\"page-layout\" template-option=\"reverse\" >\n    <div grid-area=\"sidebar-primary\">sidebar primary (reverse)</div> \n    <div grid-area=\"content\">content (reverse)</div> \n</section>\n<h4>Content with Secondary Sidebar</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"sidebar-secondary\">sidebar secondary</div> \n    <div grid-area=\"content\">content</div> \n</section>\n<h4>Content with Secondary Sidebar - Reverse <code>template-option=\"reverse\"</code></h4>\n<section grid-template=\"page-layout\" template-option=\"reverse\" >\n    <div grid-area=\"sidebar-secondary\">sidebar secondary</div> \n    <div grid-area=\"content\">content</div> \n</section>\n<h4>Both Sidebars</h4>\n<section grid-template=\"page-layout\" >\n    <div grid-area=\"sidebar-secondary\">sidebar secondary</div> \n    <div grid-area=\"content\">content center</div> \n    <div grid-area=\"sidebar-primary\">sidebar primary</div> \n</section>\n<h4>Both Sidebars</h4>\n<section grid-template=\"page-layout\" template-option=\"reverse\" >\n    <div grid-area=\"sidebar-secondary\">sidebar secondary</div> \n    <div grid-area=\"content\">content center</div> \n    <div grid-area=\"sidebar-primary\">sidebar primary</div> \n</section>\n{{> \"Component.Structures.PageLayout.demoStyles\" }}\n\nMarkupWrapperClasses: space-holder colored-zones\n\nWeight: 0\n\nStyleguide Component.Structures.PageLayout\n*/\n\n\n/*\n\nDemo Styles\n\nDescripition:\nStyles needed for demo and to not be included in enteprise styles\n\nMarkup:\n<!-- Needed for Style Guide Only --> \n<style>.space-holder section,.space-holder [item-label=\"section\"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}\n.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}\n.colored-zones [grid-area=\"sidebar-secondary\"],.colored-zones [item-label=\"sidebar-secondary\"] {background-color: #0080001b;}\n.colored-zones [grid-area=\"sidebar-primary\"],.colored-zones [item-label=\"sidebar-primary\"] {background-color: #1668ff2d;}\n.colored-zones [grid-area=\"fullscreen\"],.colored-zones [item-label=\"fullscreen\"] {background-color:#ff260040;}\n.colored-zones [grid-area=\"content\"],.colored-zones [item-label=\"content\"] {background-color: #ffa6002b;}</style>\n</style>\n<!-- Needed for Style Guide Only --> \n\nMarkupWrapperClasses: space-holder colored-zones\n\nWeight: 0\n\nStyleguide Component.Structures.PageLayout.demoStyles\n*/\n","[grid-template]{\n  display:grid;\n}\n[grid-template=\"hero-image-cta\"]{\n  --container-padding:  #{get-css-size(padding, 3)}; \n  --hero-overlay-color: var(--acc);\n  --hero-overlay-opacity:.85;\n  --hero-title-overlay: hsla( var(--acc-h),var(--acc-s),var(--acc-l), var(--hero-overlay-opacity) );\n  --breadcrumb-height: 2.5rem;\n  grid-template-columns: \n    [all-start breadcrumb-start title-start] var(--container-padding, 0) \n    [content-start cta-start ] 1fr \n    [ cta-end title-end content-end] var(--container-padding, 0) \n    [all-end breadcrumb-end];\n  grid-template-rows:\n      [all-start breadcrumb-start] minmax(var(--breadcrumb-height, 2.5rem), min-content)\n      [breadcrumb-end ] var(--container-padding, 0)\n      [title-start content-start] auto \n      [title-end] calc( var(--container-padding, 0)* .5)\n      [cta-start] auto\n      [cta-end content-end] var(--container-padding, 0)\n      [all-end];\n  @media #{$medium-up-cq} {\n    --container-padding:  #{get-css-size(padding, 4)};\n    // rows_2:md columns_4:md --row-1:2.5rem; --row-2:min-content  \n    grid-template-rows: \n      [all-start breadcrumb-start] var(--breadcrumb-height, 2.5rem) \n      [breadcrumb-end] calc( var(--container-padding, 0)* .5)\n      [title-start cta-start content-start] auto \n      [title-end cta-end content-end] var(--container-padding, 0) \n      [all-end];\n    grid-template-columns: \n      [all-start breadcrumb-start title-start] var(--container-padding, 0)\n      [content-start ] 1fr\n      [title-end] var(--container-padding, 0)\n      [cta-start] 1fr \n      [cta-end content-end] var(--container-padding, 0)\n      [all-end breadcrumb-end];\n  }\n  @media #{$large-up-cq} {\n    --container-padding:  #{get-css-size(padding, 5)};  \n    grid-template-columns: \n    [all-start breadcrumb-start title-start]  var(--container-padding, 0)\n    [content-start ] 3fr\n    [title-end] 1fr\n    [cta-start] 3fr\n    [cta-end content-end] var(--container-padding, 0) \n    [all-end breadcrumb-end];\n    // class=\"hero relative isolation_isolate grid rows_3 rows_2:md columns_4:md columns_5:lg columns_2 m-t_n4 m-x_n4  overflow_hidden \" style=\"--hero-overlay-opacity:.9; --row-1:2.5rem; --row-2:min-content;\"\n    \n  }\n  &[template-option=\"micro\"]{\n    grid-template-columns: \n    [all-start title-start] var(--container-padding, 0) \n    [content-start cta-start ] 1fr \n    [cta-end title-end content-end] var(--container-padding, 0) \n    [all-end];\n    grid-template-rows:\n        [all-start] var(--container-padding, 0)\n        [title-start content-start] auto \n        [title-end] calc( var(--container-padding, 0)* .5)\n        [cta-start] auto\n        [cta-end content-end] var(--container-padding, 0)\n        [all-end];\n        @media #{$medium-up-cq} { \n          grid-template-rows: \n            [all-start] calc( var(--container-padding, 0)* .5)\n            [title-start cta-start content-start] auto \n            [title-end cta-end content-end] calc( var(--container-padding, 0)* .5)\n            [all-end];\n          grid-template-columns: \n            [all-start title-start] var(--container-padding, 0)\n            [content-start ] 1fr\n            [title-end] var(--container-padding, 0)\n            [cta-start] min-content\n            [cta-end content-end] var(--container-padding, 0)\n            [all-end ];\n        }\n        @media #{$large-up-cq} { \n          grid-template-columns: \n            [all-start title-start] var(--container-padding, 0)\n            [content-start ] 1fr\n            [title-end] var(--container-padding, 0)\n            [cta-start] min-content\n            [cta-end content-end] var(--container-padding, 0)\n            [all-end ];\n        }\n    }\n}\n[grid-template=hero-image-cta]{\n  overflow: clip;\n  isolation: isolate;\n  [grid-area]{z-index: 1;}\n  [grid-area=\"background\"]{\n    grid-row: all;\n    grid-column: all;\n    z-index: -1;\n  }\n  [grid-area=\"breadcrumb\"]\n  {\n    grid-row: breadcrumb;\n    grid-column: breadcrumb;\n\n  }\n  [grid-area=\"title\"]{\n\n    grid-row: title;\n    grid-column: title;\n  }\n  [grid-area=\"cta\"]{\n    grid-row: cta;\n    grid-column: cta;\n  }\n}\n\n\n%after-background-transparency{\n  position: relative;\n  isolation: isolate;\n  &::after{\n    content:'';\n    background-color: var(--hero-overlay-color);\n    opacity: var(--hero-overlay-opacity);\n    background-blend-mode: multiply;\n    mix-blend-mode: multiply;\n    inset:0px;\n    position: absolute;\n    z-index: -1;\n  }\n}\n\n[data-item=\"hero-image-breadcrumb-nav\"],[data-item=\"cta-callout\"]{\n  @extend %after-background-transparency;\n}\n\n[data-item=\"hero-title\"]{\n  display:flex;\n  flex-wrap: wrap;\n  flex-direction:row;\n  padding-inline-start: 1rem;\n  overflow:clip;\n  background-color: var(--hero-title-overlay);\n  box-decoration-break: clone;\n  display: inline;\n  padding-block: 0.125em;\n  padding-inline: 0 0.25em;\n  position: relative;\n  isolation: isolate;\n  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);\n  line-height: 1.425em;\n}\n\n[data-item=\"hero-image-breadcrumb-nav\"]::after{\n  border-end-end-radius: $border_radius;\n}\n[data-item=\"cta-callout\"]::after{\n  border-radius:  $border_radius;\n}\n\n\n/*\nMicroSite \n\n<div class=\"reading-typography\"><p>A MicroSite <strong>(Conversion Focused Sub-Section)</strong>, exists within a the larger website, but offers a strategic approach for encompassing a semi-independent initiative of the organization, all while retaining a robust link to the main site. While it upholds most of the branding guidelines of the main site, a MicroSite has its unique design, acting as a concentrated unit for user context.\n</p><p>The creation of a MicroSite enables businesses to effectively spotlight specific campaigns or products with a distinctive touch, cater to particular audience segments, and maintain a uniform user experience. Despite living relatively independently from the main site's structure and supplementary content, it still provides fluid navigation and integration with the primary website.\n</p><p>This arrangement presents a flexible and specialized platform for delivering customized messaging, engaging users in a personalized way, and accomplishing specific objectives that may necessitate a unique online presence.\n</p><h4>A Microsite Must</h4><ul><li>Have a user goal</li><li>Have a call to action for conversion.</li><li>Have a focused audience so the voice can be taylored to the action.</li><ul></div>\n\nStyleguide Component.MicroSite\n\n*/\n\n/*\nHero Image with CTA\n\n\nThe \"Hero Image with CTA\" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.\n\nMarkup:\n<div grid-template=\"hero-image-cta\" id=\"hero\" class=\"font_3:lg font_2:md font_1\">\n    <div grid-area=\"background\" class=\"col_all overflow_hidden row_all\">    \n      {{> \"Component.MicroSite.Sub.HeroImage.BackgroundImage\" modifier_class=\"\" }}\n    </div>\n    <div grid-area=\"breadcrumb\" class=\"z_1 flex flex_row justify_start\">\n        {{> \"Component.MicroSite.Sub.HeroImage.BreadcrumbNav\" modifier_class=\"font-size_down-2\" }}\n    </div>\n    <div grid-area=\"title\" class=\"relative font-size_up-2 m-y_6:lg m-y_5:md\">\n        {{> \"Component.MicroSite.Sub.PageTitleTreatment\" modifier_class=\"font-size_up-2 m_0\" }}\n    </div>\n    <div grid-area=\"cta\" class=\"relative font-size_down-1 grid justify_center items_center\">\n        {{> \"Component.MicroSite.Sub.HeroImage.CTAHighlight\" modifier_class=\"z_1 font-size_0\" }}\n    </div>\n</div>\n\nMarkupWrapperClasses: wrapper-container\n\nSubComponents:\nComponent.MicroSite.Sub.HeroImage.BackgroundImage - Hero Background Image\nComponent.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation\nComponent.MicroSite.Sub.PageTitleTreatment - Page Title Treatment\nComponent.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight\n\nWeight: 0\n\nNOTE: The Hero Image with CTA component is used to create impactful hero sections with a compelling call-to-action overlay. It combines a visually appealing hero image with a title, description, and call-to-action button.\n\n\n\nStyleguide Component.MicroSite.HeroImageWithCTA\n\n*/\n\n/*\nMicro Branding with CTA Button\n\n\nThe \"Hero Image with CTA\" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.\n\nMarkup:\n<div grid-template=\"hero-image-cta\" template-option=\"micro\" class=\"isolation_isolate overflow_hidden relative\"> \n  {{> \"Component.MicroSite.Sub.HeroImage.BackgroundImage\" }}\n  <div grid-area=\"title\">\n    {{> \"Component.MicroSite.Sub.PageTitleTreatmentMicro\" modifier_class=\"m_0 m-y_3 m-y_0:lg\" }}\n    </div>\n    <div grid-area=\"cta\" class=\"relative font-size_down-1 grid justify_center items_center\">\n      {{> \"Component.MicroSite.Sub.HeroImage.CTAButton\" modifier_class=\"\"}}\n  </div>\n</div>\n\nMarkupWrapperClasses: wrapper-container\n\nSubComponents:\nComponent.MicroSite.Sub.HeroImage.BackgroundImage - Background Image\nComponent.MicroSite.Sub.PageTitleTreatment - Page Title\nComponent.MicroSite.Sub.HeroImage.CTAButton - CTA Button\n\nWeight: 0\n\nNOTE: Micro Branding is used to create cohesive experiance by continuing the branding to children pages of a microiste. It combines a slice of hero image with just the single call-to-action button.\n\n\n\nStyleguide Component.MicroSite.MicroBrandingWithButtton\n\n*/\n\n/*\nCTA Highlight\n\nThe CTA Highlight component is used to create a highlighted call-to-action section.\n\nModifier: inverted - This modifier class is used to create an inverted version of the CTA Highlight component, which can be applied when a dark background is present.\n\nMarkup:\n<div data-item=\"cta-callout\" class=\"{{modifier_class}} c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1\">\n      <h2 data-item=\"cta-title\" class=\"font_medium m-t_0 m-b_3 font_display font-size_up-2\">Call to Action Title (CTA). You Should be Engaged</h2>\n      <p data-item=\"cta-description\" class=\"font-size_up-0 lh_3\">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>\n      {{> Component.MicroSite.Sub.HeroImage.CTAButton  modifier_class=\"\"}}\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background.\n\n\nStyleguide  Component.MicroSite.Sub.HeroImage.CTAHighlight\n\n*/\n\n/*\nCTA Button\n\nThe CTA Button is just a centered button for the highlighted call-to-action.\n\n\nMarkup:\n<div class=\"grid justify_center items_center {{modifier_class}}\">\n  <button class=\"br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold\">CTA ACTION LABEL</button>\n</div>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background.\n\n\nStyleguide  Component.MicroSite.Sub.HeroImage.CTAButton \n\n*/\n\n/*\nHero Image Breadcrumb Nav\n\nThe Hero Image Breadcrumb Nav is a sub-component used within the Hero Image with CTA component to display a breadcrumb navigation on top of the hero image.\n\nMarkup:\n<nav data-item=\"hero-image-breadcrumb-nav\" class=\"{{modifier_class}} relative isolation_isolate p-y_3 p-x_4 c_white-8\">\n\t<a href=\"#\" class=\"h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white\"><i class=\"fas fa-arrow-left\"></i> Back</a> |\n\tThe Parent of This Micro Section of the Site</a>\n</nav>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: The Hero Image Breadcrumb Nav sub-component is used to provide breadcrumb navigation on top of the hero image within the Hero Image with CTA component. It focuses on displaying the immediate parent only in the breadcrumb trail.\n\n\nStyleguide  Component.MicroSite.Sub.HeroImage.BreadcrumbNav\n\n*/\n\n\n/*\nPage Title Treatment\n\nMicroSite Page Title Treatment component is used to style and emphasize page titles.\n\nModifier: font-color - This modifier class is used to customize the font color of the page title.\n\nMarkup:\n<h1 data-item=\"hero-title\"\n  class=\"{{modifier_class}} c_white isolation_isolate relative\">\n  Hero Statement Mision of  the Page &trade;</h1>\n\n\nMarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40\n\nWeight: 0\n\nNOTE: The Page Title Treatment component is ideal for styling and emphasizing page titles. The \"font-color\" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience.\n\n\nStyleguide   Component.MicroSite.Sub.PageTitleTreatment\n\n*/\n/*\nPage Title Treatment Micro\n\nMicro MicroSite Page Title Treatment has a back button in mobile.\n\nMarkup:\n<h1 data-item=\"hero-title\"\n  class=\"{{modifier_class}} c_white isolation_isolate relative\">\n  <span class=\"display_none:lg\"><a href=\"#RootPage\" class=\"h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white\"><i class=\"fas fa-solid fa-arrow-left m-l_n3\" aria-hidden=\"true\"></i></a></span>\n  <span class=\"text display_contents\">Hero Statement Mision of  the Page&trade;<span>\n</h1>\n\n\nMarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40\n\nWeight: 0\n\nNOTE: The Page Title Treatment component is ideal for styling and emphasizing page titles. The \"font-color\" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience.\n\n\nStyleguide   Component.MicroSite.Sub.PageTitleTreatmentMicro\n\n*/\n\n\n\n/*\nResponsive Hero Image\n\nThe Responsive Hero Image component is used to display a responsive hero image that adapts to different screen sizes. the sizes are 1200/300, 1024/256,600/300, & 320/300\n\n\nMarkup:\n  <picture data-item=\"responsive-hero-image\" class=\"absolute bg_cover flex flex_column inset_0 {{modifier_class}}\">\n    <source srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png\"\n      media=\"(min-width: 1024px)\" class=\"display_none\">\n    <source srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png\"\n      media=\"(min-width: 768px)\" class=\"display_none\">\n    <source srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png\"\n      media=\"(min-width: 400px)\" class=\"display_none\">\n    <img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png\" alt=\"Hero Image\"\n      class=\"flex_100\">\n  </picture>\n\nMarkupWrapperClasses: columns_1 grid relative rows_1 w_100 overflow_hidden p_6\n\nWeight: 0\n\nNOTE: It utilizes the \"Lorem Picsum\" service for placeholder images. Replace all 4 images for best results.\n\n\nStyleguide Component.MicroSite.Sub.HeroImage.BackgroundImage\n\n\n*/\n\n\n\n\n"]}