{"version":3,"sources":["library_boot.css","library_boot.scss","helpers/_helpers.scss","setup/config/_colors.scss","setup/config/_fonts.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","../../node_modules/bootstrap/scss/mixins/_border-radius.scss","../../node_modules/bootstrap/scss/_type.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","setup/config/_utility-css.vars.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","data/_data.Agenda.DateTime.scss","data/_data.Faculty.Member.scss","data/_data.Sponsor.scss","recipes/__recipes.common.scss","recipes/base/_buttons.scss","recipes/base/_web-footer.scss","recipes/base/_quicklinks.scss","recipes/base/_advertisement.scss","recipes/base/_social-nav.scss","recipes/base/_cookie-banner.scss","recipes/base/_ordered-cards.scss","recipes/sub/_common.scss","recipes/sub/_image-placeholder.scss","recipes/sub/_text-placholder.scss","recipes/sub/_class-list.scss","recipes/sub/__index.scss","recipes/boot/_boot.basic_nav.scss","recipes/boot/_boot.tabs.scss","recipes/boot/_boot.ui.tabs.scss","recipes/boot/_boot.sidebar_nav.scss","recipes/boot/_boot.toggle_icon.scss","recipes/boot/_boot.accordion.scss","recipes/base/_base.page.layouts.scss","recipes/virtual/data/_virtual.data.scss","recipes/virtual/_virtual.sub.search.scss","recipes/library/_library.sub.search.scss","recipes/virtual/_virtual.sub.faculty.scss","recipes/virtual/_virtual.sub.system.scss","recipes/library/_library.sub.classLists.scss","recipes/library/_library.sub.scss","recipes/library/_library.page.layouts.scss","<no source>","recipes/library/_library.page.scss","recipes/library/_library.page.home.scss","recipes/library/_library.navigation.scss","recipes/library/_library.program.scss","base/_typography.scss","base/_forms.scss","base/_table.scss","styleguide/_design-base.scss","styleguide/_crayonbox.scss","styleguide/_styleguide.scss","styleguide/__basic-html.base.scss","containers/_containers.scss","base/_table.boot.scss","styleguide/__basic-html.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"],"names":[],"mappings":"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PLF;;AW9kBA;EAEE,gBFsd4B;ED/MxB,eALI;EAKJ,kBALI;AR+UV;;AW5kBE;EHkQI,mBALI;EAKJ,0BALI;ARqVV;;AWllBE;EAEE,gBFuckB;EEtclB,iBFwbmB;AT6JvB;;AWxlBE;EHkQI,mBALI;EAKJ,0BALI;AR2VV;;AWxlBE;EHkQI,mBALI;EAKJ,yBALI;ARiWV;;AW9lBE;EAEE,gBFuckB;EEtclB,iBFwbmB;ATyKvB;;AWpmBE;EHkQI,mBALI;EAKJ,0BALI;ARuWV;;AWpmBE;EHkQI,mBALI;EAKJ,0BALI;AR6WV;;AW1mBE;EAEE,gBFuckB;EEtclB,iBFwbmB;ATqLvB;;AWhnBE;EHkQI,mBALI;EAKJ,0BALI;ARmXV;;AWrlBA;EC1DE,eAAA;EACA,gBAAA;AZwpBF;;AW5lBA;EACE,qBAAA;AX+lBF;AW7lBE;EACE,iBF6c0B;EE7c1B,oBF6c0B;ATkJ9B;;AWrlBA;EHsNM,kBALI;EG/MR,yBAAA;AXwlBF;;AWplBA;EACE,mBF4KO;EE5KP,mBF4KO;EDmCH,eALI;EAKJ,kBALI;AR8YV;AWrlBE;EACE,gBAAA;AXulBJ;;AWnlBA;EACE,iBAAA;EAAA,iBAAA;EACA,mBFkKO;EElKP,mBFkKO;EEhKP,cVRS;EO2ML,kBALI;ARwZV;AWplBE;EACE,aAAA;AXslBJ;;Aa9qBA;ECFE,eAAA;EAGA,YAAA;Ad2rBF;;Aa5rBA;EACE,YJ6yCkC;EI7yClC,gBJ6yCkC;EI3yClC,yBAAA;EHGE,kBAAA;EGJF,oCZ8DM;AD4nBR;;Aa7qBA;EAEE,qBAAA;Ab+qBF;;Aa5qBA;EACE,kBAAA;EAAA,qBAAA;EACA,cAAA;Ab+qBF;;Aa5qBA;EAEE,cZkDS;EO2ML,kBALI;ARubV;;AejtBE;;;;;;ECHA,WAAA;EAGA,kBAAA;EACA,iBAAA;EAHA,uCAAA;EAAA,uCAAA;EACA,sCAAA;EAAA,sCAAA;AhB+tBF;;AiBrqBI;EF5CE;IACE,gBGMe;ElB+sBrB;AACF;AiB3qBI;EF5CE;IACE,gBGMe;ElBotBrB;AACF;AiBhrBI;EF5CE;IACE,gBGMe;ElBytBrB;AACF;AiBrrBI;EF5CE;I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I;EAKJ,0BALI;AR+oDV;AyBzxDE;EAEE,iBAAA;EAAA,wBAAA;EACA,sBhB6cqB;EgB7crB,yBhB6cqB;EgB/crB,gBAAA;EAAA,uBAAA;AzB6xDJ;AyBxxDE;EAEE,iBAAA;EAAA,wBAAA;EACA,sBhBucqB;EgBvcrB,yBhBucqB;EgBzcrB,gBAAA;EAAA,uBAAA;AzB4xDJ;;AyBtxDA;EACE,oChB2jBsC;EgB1jBtC,iBAAA;EAAA,oBAAA;EflJE,kBAAA;EFkRE,kBALI;EAKJ,sBALI;ARgqDV;AyBvxDE;EAEE,kBAAA;EAAA,qBAAA;EACA,uBhB+bqB;EgB/brB,uBhB+bqB;EgBjcrB,iBAAA;EAAA,oBAAA;AzB2xDJ;AyBtxDE;EAEE,kBAAA;EAAA,qBAAA;EACA,uBhBybqB;EgBzbrB,uBhBybqB;EgB3brB,iBAAA;EAAA,oBAAA;AzB0xDJ;;AyBhxDE;EACE,oChBkiBoC;ATivCxC;AyBhxDE;EACE,sChB+hBoC;ATmvCxC;AyB/wDE;EACE,oChB4hBoC;ATqvCxC;;AyB5wDA;EACE,WE6qBsC;EF7qBtC,WE6qBsC;EF5qBtC,YAAA;EACA,YhB8YoB;EgB9YpB,ehB8YoB;ATi4CtB;AyB7wDE;EACE,eAAA;AzB+wDJ;AyB5wDE;EACE,aAAA;Ef/LA,kBAAA;AV88DJ;AyB3wDE;EACE,aAAA;EfpMA,kBAAA;AVk9DJ;;A4Bh+DA;EAKE,oCAAA;EAJA,cAAA;EAmBA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EAlBA,WAAA;EACA,0BAAA;EAAA,gCAAA;EAaA,yBAAA;ElBFE,kBAAA;EkBFF,iPAAA;EAEA,sCnB2xBkC;EmB3xBlC,sCnB2xBkC;EmB1xBlC,0BnB2xBkC;EmB7xBlC,4BAAA;EAFA,oC3B6DM;E2B9DN,sB3B+DM;E2BjEN,gBnBkbmB;ED1Jf,eALI;EAKJ,eALI;EoBlRR,gBnBub4B;ATmjD9B;A4B79DE;EACE,qBnBmrBoC;EmBlrBpC,UAAA;EAKE,iDnB4xB4B;AT+rClC;A4Bv9DE;EAEE,mBnBkjBkB;EmBljBlB,mBnBkjBkB;EmBjjBlB,sBAAA;A5Bw9DJ;A4Br9DE;EAEE,yB3B2CO;E2B5CP,c3BgDO;ADw6DX;A4Bl9DE;EACE,kBAAA;EACA,kCAAA;A5Bo9DJ;;A4Bh9DA;EACE,gBnB2iBuB;EmB3iBvB,oBnB2iBuB;EmB1iBvB,mBnB0iBuB;EmB1iBvB,uBnB0iBuB;EmBziBvB,iBnB0iBuB;EmB1iBvB,oBnB0iBuB;ECnlBrB,kBAAA;EFkRE,mBALI;EAKJ,0BALI;ARivDV;;A4Bh9DA;EACE,gBnBwiBuB;EmBxiBvB,mBnBwiBuB;EmBviBvB,mBnBuiBuB;EmBviBvB,sBnBuiBuB;EmBtiBvB,kBnBuiBuB;EmBviBvB,kBnBuiBuB;ECxlBrB,kBAAA;EFkRE,kBALI;EAKJ,sBALI;ARyvDV;;A6BrhEA;EACE,cAAA;EACA,kBpBguBwC;EoBhuBxC,kBpBguBwC;EoB9tBxC,kBpBguBwC;EoBhuBxC,uBpBguBwC;EoBjuBxC,mBpBguBwC;ATyzC1C;A6BthEE;EAEE,mBAAA;EADA,WAAA;A7ByhEJ;;A6BphEA;EAUE,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EATA,UpBotBwC;EoBntBxC,WpBmtBwC;EoBltBxC,iBAAA;EAMA,qCpButBwC;EoBztBxC,2BAAA;EACA,wBAAA;EAFA,4BAAA;EADA,oC5BwDM;E4BlDN,iCAAA;UAAA,mBAAA;EAPA,mBAAA;A7B8hEF;A6BphEE;EnBXE,qBAAA;AVkiEJ;A6BnhEE;EAEE,kBpB8sBsC;ATs0C1C;A6BjhEE;EACE,uBpBqsBsC;AT80C1C;A6BhhEE;EACE,qBpBmqBoC;EoBlqBpC,UAAA;EACA,iDpBqjB4B;AT69ChC;A6B/gEE;EAEE,qBpBoBM;EoBrBN,yBpBqBM;AT6/DV;A6B/gEI;EAII,+PAAA;A7B8gER;A6B1gEI;EAII,uKAAA;A7BygER;A6BpgEE;EAEE,qBpBDM;EoBMJ,yPAAA;EANF,yBAAA;A7BwgEJ;A6B9/DE;EAEE,YAAA;EACA,YpB6qBuC;EoB/qBvC,oBAAA;A7BkgEJ;A6Bz/DI;EACE,YpBqqBqC;ATs1C3C;;A6B7+DA;EACE,mBpBgqBgC;ATg1ClC;A6B9+DE;EACE,UpB4pB8B;EoB3pB9B,mBAAA;EnB5FA,kBAAA;EmB6FA,wKAAA;EACA,gCAAA;A7Bi/DJ;A6B7+DI;EACE,0JAAA;A7B++DN;A6B5+DI;EAMI,uKAAA;EALF,iCpB2pB4B;ATo1ClC;;A6Bp+DA;EACE,qBAAA;EACA,kBpB8nBgC;EoB9nBhC,kBpB8nBgC;ATy2ClC;;A6Bp+DA;EAEE,sBAAA;EADA,kBAAA;EAEA,oBAAA;A7Bu+DF;A6Bn+DI;EAEE,YAAA;EACA,apBqfwB;EoBvfxB,oBAAA;A7Bu+DN;;A8BnnEA;EAKE,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EAJA,WAAA;EACA,cAAA;EAAA,cAAA;EACA,UAAA;EACA,6BAAA;A9BunEF;A8BpnEE;EACE,UAAA;A9BsnEJ;A8BlnEI;EAA0B,+ErBq0Ba;ATgzC3C;A8BpnEI;EAA0B,+ErBo0Ba;ATmzC3C;A8BpnEE;EACE,SAAA;A9BsnEJ;A8BnnEE;EASE,wBAAA;UAAA,gBAAA;EARA,WrBszBuC;EqBtzBvC,WrBszBuC;EqBrzBvC,YrBqzBuC;EqBrzBvC,YrBqzBuC;EqBpzBvC,gBAAA;EAAA,oBAAA;EAEA,SrBqzBuC;ECj0BvC,mBAAA;EgBfF,yBjBmEQ;AT+kEV;A8BjnEI;EJjCF,yBjBq1ByC;ATg0C3C;A8B/mEE;EACE,WrB+xB8B;EqB9xB9B,WrB+xB8B;EqB/xB9B,crB+xB8B;ECxzB9B,mBAAA;EoB6BA,yBAAA;EADA,yB7BwCO;E6B1CP,kBAAA;EACA,erB8xB8B;ATs1ClC;A8B7mEE;EAQE,qBAAA;OAAA,gBAAA;EAPA,WrB2xBuC;EqB3xBvC,WrB2xBuC;EqB1xBvC,YrB0xBuC;EqB1xBvC,YrB0xBuC;EqBxxBvC,SrB2xBuC;ECj0BvC,mBAAA;EgBfF,yBjBmEQ;ATmmEV;A8B3mEI;EJ3DF,yBjBq1ByC;ATo1C3C;A8BzmEE;EACE,WrBqwB8B;EqBpwB9B,WrBqwB8B;EqBrwB9B,crBqwB8B;ECxzB9B,mBAAA;EoBuDA,yBAAA;EADA,yB7BcO;E6BhBP,kBAAA;EACA,erBowB8B;AT02ClC;A8BvmEE;EACE,oBAAA;A9BymEJ;A8BvmEI;EACE,yB7BUK;AD+lEX;A8BtmEI;EACE,yB7BMK;ADkmEX;;A+B/rEA;EACE,kBAAA;A/BksEF;A+BhsEE;;EAEE,0BtBg2B8B;EsB/1B9B,iBJy/B8B;A3BysClC;A+B/rEE;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;EAIA,qBAAA;EADA,6BAAA;EADA,oBAAA;A/BmsEJ;A+B5rEE;EARE,kBAAA;EAAA,kBAAA;A/BusEJ;A+B5rEI;EACE,kBAAA;A/B8rEN;A+B/rEI;EACE,kBAAA;A/B8rEN;A+B3rEI;EAEE,iBtBy0B4B;EsBz0B5B,qBtBy0B4B;EsBx0B5B,oBtBy0B4B;EsBz0B5B,wBtBy0B4B;ATm3ClC;A+B/rEI;EAEE,iBtBy0B4B;EsBz0B5B,qBtBy0B4B;EsBx0B5B,oBtBy0B4B;EsBz0B5B,wBtBy0B4B;ATm3ClC;A+BzrEI;EACE,iBtBo0B4B;EsBp0B5B,qBtBo0B4B;EsBn0B5B,oBtBo0B4B;EsBp0B5B,wBtBo0B4B;ATu3ClC;A+BvrEE;EACE,iBtB8zB8B;EsB9zB9B,qBtB8zB8B;EsB7zB9B,oBtB8zB8B;EsB9zB9B,wBtB8zB8B;AT23ClC;A+BnrEI;EAEE,8DtBwzB4B;EsBzzB5B,atBwzB4B;ATg4ClC;A+BzrEI;;;EAEE,8DtBwzB4B;EsBzzB5B,atBwzB4B;ATg4ClC;A+BlrEI;EAEE,8DtBizB4B;EsBlzB5B,atBizB4B;ATo4ClC;;AgC1uEA;EAEE,aAAA;EADA,kBAAA;EAEA,eAAA;EACA,oBAAA;EACA,WAAA;AhC6uEF;AgC3uEE;;EAEE,kBAAA;EACA,cAAA;EACA,SAAA;EACA,YAAA;AhC6uEJ;AgCzuEE;;EAEE,UAAA;AhC2uEJ;AgCruEE;EAEE,UAAA;EADA,kBAAA;AhCwuEJ;AgCruEI;EACE,UAAA;AhCuuEN;;AgC5tEA;EACE,aAAA;EACA,mBAAA;EACA,iBAAA;EAAA,oBAAA;EAQA,yBAAA;EtBpCE,kBAAA;EsBmCF,mKvBuuBsC;EuB1uBtC,sB/B2BM;E+B7BN,gBvB8YmB;ED1Jf,eALI;EAKJ,eALI;EwB9OR,gBvBmZ4B;EuBjZ5B,kBAAA;EACA,mBAAA;AhCkuEF;;AgCttEA;;;;EAIE,iBAAA;EAAA,oBAAA;EtBlDE,kBAAA;EFkRE,kBALI;EAKJ,sBALI;ARggEV;;AgCttEA;;;;EAIE,gBAAA;EAAA,uBAAA;EtB3DE,kBAAA;EFkRE,mBALI;EAKJ,0BALI;ARygEV;;AgCttEA;;EAEE,mBAAA;EAAA,mBAAA;AhCytEF;AgCrsEI;;;EtBtEA,0BAAA;EACA,6BAAA;AVqxEJ;AgCrsEE;EACE,iBAAA;EtBpEA,yBAAA;EACA,4BAAA;AV4wEJ;;AiCryEE;EACE,aAAA;EACA,WAAA;EACA,exBwoBoC;EwBxoBpC,mBxBwoBoC;EwBroBpC,cxBg2BqB;ED1lBnB,kBALI;ARsiEV;;AiCpyEE;EAIE,aAAA;EADA,UAAA;EAFA,kBAAA;EACA,SAAA;EAGA,eAAA;EAEA,iBAAA;EAAA,kBAAA;EADA,gBAAA;EAAA,uBAAA;EvBrBA,kBAAA;EuB0BA,uCAvBiB;EAsBjB,yBAvBc;EzBgRZ,mBALI;EAKJ,0BALI;ARojEV;;AiClyEI;;;;EAEE,cAAA;AjCuyEN;;AiCr1EI;EAoDE,qBxBq0BmB;ATg+CzB;AiC3xEM;EACE,qBxB0zBiB;EwBzzBjB,+CA/Ca;AjC40ErB;;AiC71EI;EAiFE,qBxBwyBmB;ATw+CzB;AiCpwEM;EACE,qBxB2xBiB;EwB1xBjB,+CA9Ea;AjCo1ErB;;AiCr2EI;EAsGE,qBxBmxBmB;ATg/CzB;AiCjwEM;EACE,yBxBgxBiB;ATm/CzB;AiChwEM;EACE,+CA5Fa;AjC81ErB;AiC/vEM;EACE,cxBwwBiB;ATy/CzB;;AiC5vEI;EACE,kBAAA;AjC+vEN;;AiCt3EI;;;EA+HI,UAAA;AjC6vER;AiCzvEM;;;EACE,UAAA;AjC6vER;;AiC92EE;EACE,aAAA;EACA,WAAA;EACA,exBwoBoC;EwBxoBpC,mBxBwoBoC;EwBroBpC,cxBg2BqB;ED1lBnB,kBALI;AR+mEV;;AiC72EE;EAIE,aAAA;EADA,UAAA;EAFA,kBAAA;EACA,SAAA;EAGA,eAAA;EAEA,iBAAA;EAAA,kBAAA;EADA,gBAAA;EAAA,uBAAA;EvBrBA,kBAAA;EuB0BA,wCAvBiB;EAsBjB,yBAvBc;EzBgRZ,mBALI;EAKJ,0BALI;AR6nEV;;AiC32EI;;;;EAEE,cAAA;AjCg3EN;;AiC95EI;EAoDE,qBxBq0BmB;ATyiDzB;AiCp2EM;EACE,qBxB0zBiB;EwBzzBjB,gDA/Ca;AjCq5ErB;;AiCt6EI;EAiFE,qBxBwyBmB;ATijDzB;AiC70EM;EACE,qBxB2xBiB;EwB1xBjB,gDA9Ea;AjC65ErB;;AiC96EI;EAsGE,qBxBmxBmB;ATyjDzB;AiC10EM;EACE,yBxBgxBiB;AT4jDzB;AiCz0EM;EACE,gDA5Fa;AjCu6ErB;AiCx0EM;EACE,cxBwwBiB;ATkkDzB;;AiCr0EI;EACE,kBAAA;AjCw0EN;;AiC/7EI;;;EAiII,UAAA;AjCo0ER;AiCl0EM;;;EACE,UAAA;AjCs0ER;;AkC58EA;EACE,qBAAA;EC0HA,iBAAA;EAAA,oBAAA;ED9GA,6BAAA;ExBEE,kBAAA;EwBHF,6BAAA;EATA,gBzBwbmB;ED1Jf,eALI;EAKJ,eALI;E0BxRR,gBzB6b4B;EyB3b5B,kBAAA;EAGA,sBAAA;EACA,eAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AlCi9EF;AkC38EE;EAZA,sBjCqEM;ADs5ER;AkC/8EE;EAEE,qBAAA;AlC68EJ;AkC18EE;EAEE,UAAA;EACA,iDzBskB4B;ATq4DhC;AkC77EE;EAIE,azB0lB0B;EyB3lB1B,oBAAA;AlC87EJ;;AkCj7EE;ECrCA,qB1B8Da;EiBhFb,yBjBgFa;E0BhEb,yBAXQ;AnCy+EV;AmCn9EE;EAHE,qBAjBa;ETPf,yBSMmB;EAgBjB,yBAdY;AnCi/EhB;AmC99EE;EASI,gDAAA;AnCq9EN;AmCj9EE;EASE,qBAvCc;EAoCd,yBArCkB;EAoClB,yBAlCa;AnCm/EjB;AmC38EI;EAKI,gDAAA;AnCy8ER;AmCp8EE;EAME,qB1BaW;E0BhBX,yB1BgBW;E0BjBX,yBAjDe;AnCw/EnB;;AkC/8EE;ECrCA,qB1B8Da;EiBhFb,yBjBgFa;E0BhEb,yBAXQ;AnCugFV;AmCj/EE;EAHE,qBAjBa;ETPf,yBSMmB;EAgBjB,yBAdY;AnC+gFhB;AmC5/EE;EASI,iDAAA;AnCm/EN;AmC/+EE;EASE,qBAvCc;EAoCd,yBArCkB;EAoClB,yBAlCa;AnCihFjB;AmCz+EI;EAKI,iDAAA;AnCu+ER;AmCl+EE;EAME,qB1BaW;E0BhBX,yB1BgBW;E0BjBX,yBAjDe;AnCshFnB;;AkC7+EE;ECrCA,qB1B8Da;EiBhFb,yBjBgFa;E0BhEb,yBAXQ;AnCqiFV;AmC/gFE;EAHE,qBAjBa;ETPf,yBSMmB;EAgBjB,yBAdY;AnC6iFhB;AmC1hFE;EASI,+CAAA;AnCihFN;AmC7gFE;EASE,qBAvCc;EAoCd,yBArCkB;EAoClB,yBAlCa;AnC+iFjB;AmCvgFI;EAKI,+CAAA;AnCqgFR;AmChgFE;EAME,qB1BaW;E0BhBX,yB1BgBW;E0BjBX,yBAjDe;AnCojFnB;;AkC3gFE;ECrCA,qB1B8Da;EiBhFb,yBjBgFa;E0BhEb,yBAXQ;AnCmkFV;AmC7iFE;EAHE,qBAjBa;ETPf,yBSMmB;EAgBjB,yBAdY;AnC2kFhB;AmCxjFE;EASI,gDAAA;AnC+iFN;AmC3iFE;EASE,qBAvCc;EAoCd,yBArCkB;EAoClB,yBAlCa;AnC6kFjB;AmCriFI;EAKI,gDAAA;AnCmiFR;AmC9hFE;EAME,qB1BaW;E0BhBX,yB1BgBW;E0BjBX,yBAjDe;AnCklFnB;;AkCziFE;ECrCA,qB1B8Da;EiBhFb,yBjBgFa;E0BhEb,sBAXQ;AnCimFV;AmC3kFE;EAHE,qBAjBa;ETPf,yBSMmB;EAgBjB,sBAdY;AnCymFhB;AmCtlFE;EASI,iDAAA;AnC6kFN;AmCzkFE;EASE,qBAvCc;EAoCd,yBArCkB;EAoClB,sBAlCa;AnC2mFjB;AmCnkFI;EAKI,iDAAA;AnCikFR;AmC5jFE;EAME,qB1BaW;E0BhBX,yB1BgBW;E0BjBX,sBAjDe;AnCgnFnB;;AkCvkFE;ECrCA,qB1B8Da;EiBhFb,yBjBgFa;E0BhEb,sBAXQ;AnC+nFV;AmCzmFE;EAHE,qBAjBa;ETPf,yBSMmB;EAgBjB,sBAdY;AnCuoFhB;AmCpnFE;EASI,gDAAA;AnC2mFN;AmCvmFE;EASE,qBAvCc;EAoCd,yBArCkB;EAoClB,sBAlCa;AnCyoFjB;AmCjmFI;EAKI,gDAAA;AnC+lFR;AmC1lFE;EAME,qB1BaW;E0BhBX,yB1BgBW;E0BjBX,sBAjDe;AnC8oFnB;;AkCrmFE;ECrCA,qB1B8Da;EiBhFb,yBjBgFa;E0BhEb,yBAXQ;AnC6pFV;AmCvoFE;EAHE,qBAjBa;ETPf,yBSMmB;EAgBjB,yBAdY;AnCqqFhB;AmClpFE;EASI,+CAAA;AnCyoFN;AmCroFE;EASE,qBAvCc;EAoCd,yBArCkB;EAoClB,yBAlCa;AnCuqFjB;AmC/nFI;EAKI,+CAAA;AnC6nFR;AmCxnFE;EAME,qB1BaW;E0BhBX,yB1BgBW;E0BjBX,yBAjDe;AnC4qFnB;;AkC7nFE;ECoBA,qB1BDa;E0BAb,cAAA;AnC+mFF;AmC5mFE;EAGE,qB1BNW;E0BKX,yB1BLW;E0BIX,yBATY;AnCynFhB;AmC3mFE;EAEE,gDAAA;AnC4mFJ;AmCzmFE;EAOE,qB1BrBW;E0BoBX,yB1BpBW;E0BmBX,yBArBa;AnC8nFjB;AmCrmFI;EAKI,gDAAA;AnCmmFR;AmC9lFE;EAGE,6BAAA;EADA,c1BnCW;ATmoFf;;AkCtpFE;ECoBA,qB1BDa;E0BAb,cAAA;AnCwoFF;AmCroFE;EAGE,qB1BNW;E0BKX,yB1BLW;E0BIX,yBATY;AnCkpFhB;AmCpoFE;EAEE,iDAAA;AnCqoFJ;AmCloFE;EAOE,qB1BrBW;E0BoBX,yB1BpBW;E0BmBX,yBArBa;AnCupFjB;AmC9nFI;EAKI,iDAAA;AnC4nFR;AmCvnFE;EAGE,6BAAA;EADA,c1BnCW;AT4pFf;;AkC/qFE;ECoBA,qB1BDa;E0BAb,cAAA;AnCiqFF;AmC9pFE;EAGE,qB1BNW;E0BKX,yB1BLW;E0BIX,yBATY;AnC2qFhB;AmC7pFE;EAEE,8CAAA;AnC8pFJ;AmC3pFE;EAOE,qB1BrBW;E0BoBX,yB1BpBW;E0BmBX,yBArBa;AnCgrFjB;AmCvpFI;EAKI,8CAAA;AnCqpFR;AmChpFE;EAGE,6BAAA;EADA,c1BnCW;ATqrFf;;AkCxsFE;ECoBA,qB1BDa;E0BAb,cAAA;AnC0rFF;AmCvrFE;EAGE,qB1BNW;E0BKX,yB1BLW;E0BIX,yBATY;AnCosFhB;AmCtrFE;EAEE,gDAAA;AnCurFJ;AmCprFE;EAOE,qB1BrBW;E0BoBX,yB1BpBW;E0BmBX,yBArBa;AnCysFjB;AmChrFI;EAKI,gDAAA;AnC8qFR;AmCzqFE;EAGE,6BAAA;EADA,c1BnCW;AT8sFf;;AkCjuFE;ECoBA,qB1BDa;E0BAb,cAAA;AnCmtFF;AmChtFE;EAGE,qB1BNW;E0BKX,yB1BLW;E0BIX,sBATY;AnC6tFhB;AmC/sFE;EAEE,iDAAA;AnCgtFJ;AmC7sFE;EAOE,qB1BrBW;E0BoBX,yB1BpBW;E0BmBX,sBArBa;AnCkuFjB;AmCzsFI;EAKI,iDAAA;AnCusFR;AmClsFE;EAGE,6BAAA;EADA,c1BnCW;ATuuFf;;AkC1vFE;ECoBA,qB1BDa;E0BAb,cAAA;AnC4uFF;AmCzuFE;EAGE,qB1BNW;E0BKX,yB1BLW;E0BIX,sBATY;AnCsvFhB;AmCxuFE;EAEE,gDAAA;AnCyuFJ;AmCtuFE;EAOE,qB1BrBW;E0BoBX,yB1BpBW;E0BmBX,sBArBa;AnC2vFjB;AmCluFI;EAKI,gDAAA;AnCguFR;AmC3tFE;EAGE,6BAAA;EADA,c1BnCW;ATgwFf;;AkCnxFE;ECoBA,qB1BDa;E0BAb,cAAA;AnCqwFF;AmClwFE;EAGE,qB1BNW;E0BKX,yB1BLW;E0BIX,yBATY;AnC+wFhB;AmCjwFE;EAEE,+CAAA;AnCkwFJ;AmC/vFE;EAOE,qB1BrBW;E0BoBX,yB1BpBW;E0BmBX,yBArBa;AnCoxFjB;AmC3vFI;EAKI,+CAAA;AnCyvFR;AmCpvFE;EAGE,6BAAA;EADA,c1BnCW;ATyxFf;;AkChyFA;EAEE,czB0NW;EyB3NX,gBzBiXmB;EyB/WnB,qBzB2NgB;ATwkFlB;AkCjyFE;EACE,czByNe;AT2kFnB;AkChyFE;EAHE,0BzByNoB;AT6kFxB;AkC/xFE;EAEE,cjCJO;ADoyFX;;AkCrxFA;ECuBE,iBAAA;EAAA,oBAAA;EzB5GE,kBAAA;EFkRE,kBALI;EAKJ,sBALI;ARmmFV;;AkCvxFA;ECmBE,gBAAA;EAAA,uBAAA;EzB5GE,kBAAA;EFkRE,mBALI;EAKJ,0BALI;ARymFV;;AoCt4FE;EACE,UAAA;ApC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aAAA;IACA,gBAAA;EzC47GR;EyCz7GM;IACE,aAAA;IACA,YAAA;IACA,UAAA;IACA,mBAAA;EzC27GR;AACF;AyCt/GI;EAEI,iBAAA;EACA,2BAAA;AzCu/GR;AyCr/GQ;EACE,mBAAA;AzCu/GV;AyCr/GU;EACE,kBAAA;AzCu/GZ;AyCp/GU;EACE,kBhCmwBwB;EgCnwBxB,qBhCmwBwB;EgClwBxB,iBhCkwBwB;EgClwBxB,oBhCkwBwB;ATovFpC;AyCl/GQ;EACE,iBAAA;AzCo/GV;AyCj/GQ;EACE,wBAAA;EACA,gBAAA;AzCm/GV;AyC5+GQ;EACE,aAAA;AzCi/GV;AyC9+GQ;EAKE,8BAAA;EAFA,aAAA;EAFA,iBAAA;EACA,SAAA;EAEA,YAAA;EAMA,eAAA;EAHA,eAAA;EACA,cAAA;EAFA,6BAAA;AzCm/GV;AyC7+GQ;;EAEE,YAAA;EACA,aAAA;EACA,gBAAA;AzC++GV;AyC5+GQ;EACE,aAAA;EACA,YAAA;EACA,UAAA;EACA,mBAAA;AzC8+GV;AyC79GI;EAEE,4BhC8tB8B;ATowFpC;AyC79GI;EACE,6BhCstB8B;ATywFpC;AyC79GM;EAEE,4BhCmtB4B;AT2wFpC;AyC39GM;EACE,4BhCitB4B;AT4wFpC;AyCz9GI;;EAEE,4BhC0sB8B;ATixFpC;AyCv9GE;EAEE,mChCusBgC;EgCxsBhC,6BhCmsBgC;ATuxFpC;AyCt9GE;EACE,gQAAA;AzCw9GJ;AyCr9GE;EACE,6BhC0rBgC;AT6xFpC;AyCr9GI;;;EAGE,4BhCurB8B;ATgyFpC;AyC78GI;EAEE,yBxCxNE;AD0qHR;AyC78GI;EACE,YhC4pB8B;ATmzFpC;AyC78GM;EAEE,iBhCypB4B;ATqzFpC;AyC38GM;EACE,gChCupB4B;ATszFpC;AyCz8GI;;EAEE,yBxC5OE;ADurHR;AyCv8GE;EAEE,sChC6oBgC;EgC9oBhC,YhCyoBgC;ATi0FpC;AyCt8GE;EACE,2OAAA;AzCw8GJ;AyCr8GE;EACE,YhCgoBgC;ATu0FpC;AyCt8GI;;;EAGE,yBxC9PE;ADssHR;;A0C/wHA;EAME,qBAAA;EAJA,aAAA;EADA,kBAAA;EAEA,sBAAA;EACA,YAAA;EAKA,yCAAA;EhCME,kBAAA;EgCPF,2BAAA;EADA,oCzCkEM;ADktHR;A0C9wHE;EACE,eAAA;EACA,cAAA;A1CgxHJ;A0C7wHE;EACE,mBAAA;EACA,sBAAA;A1C+wHJ;A0C7wHI;EACE,mBAAA;EhCEF,4BAAA;EADA,2BAAA;AVgxHJ;A0C7wHI;EACE,sBAAA;EhCUF,+BAAA;EACA,8BAAA;AVswHJ;A0C1wHE;;EAEE,aAAA;A1C4wHJ;;A0CxwHA;EAGE,cAAA;EACA,kBAAA;EAAA,kBAAA;A1CywHF;;A0CrwHA;EACE,kBjCygCkC;EiCzgClC,qBjCygCkC;AT+vFpC;;A0CrwHA;EACE,gBAAA;EAAA,oBAAA;A1CywHF;;A0CrwHA;EAHE,gBAAA;A1C4wHF;;A0CpwHE;EACE,qBAAA;A1CuwHJ;A0CpwHE;EACE,iBjC0LK;EiC1LL,iBjC0LK;AT4kHT;;A0C9vHA;EAEE,gBAAA;EADA,iBAAA;EAAA,oBAAA;EAIA,gDAAA;EADA,wCjCk/BkC;AT+wFpC;A0C9vHE;EhCpEE,0BAAA;AVq0HJ;;A0C5vHA;EACE,iBAAA;EAAA,oBAAA;EAGA,6CAAA;EADA,wCjCu+BkC;ATwxFpC;A0C5vHE;EhC/EE,0BAAA;AV80HJ;;A0CrvHA;EAEE,mBAAA;EAAA,sBAAA;EAEA,gBAAA;A1CwvHF;;A0C9uHA;EAbE,kBAAA;EAAA,qBAAA;EAEA,iBAAA;EAAA,oBAAA;A1C8vHF;;A0C7uHA;EACE,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EACA,ajC4HO;EiC5HP,ajC4HO;EC/OL,kBAAA;AVo2HJ;;A0C7uHA;;;EAGE,WAAA;A1CgvHF;;A0C7uHA;;EhCnHI,4BAAA;EADA,2BAAA;AVu2HJ;;A0C9uHA;;EhC3GI,+BAAA;EACA,8BAAA;AV81HJ;;A0CvuHE;EACE,mBjCy6BgC;EiCz6BhC,mBjCy6BgC;ATi0FpC;AiB90HI;EyBgGJ;IAQI,aAAA;IACA,mBAAA;E1C0uHF;E0CvuHE;IAEE,YAAA;IACA,gBAAA;E1CwuHJ;E0CtuHI;IACE,cAAA;IACA,cAAA;E1CwuHN;E0CnuHM;IhCpJJ,0BAAA;IACA,6BAAA;EV03HF;E0CpuHQ;;IAGE,0BAAA;E1CquHV;E0CnuHQ;;IAGE,6BAAA;E1CouHV;E0ChuHM;IhCrJJ,yBAAA;IACA,4BAAA;EVw3HF;E0CjuHQ;;IAGE,yBAAA;E1CkuHV;E0ChuHQ;;IAGE,4BAAA;E1CiuHV;AACF;;A2C/6HA;EAEE,aAAA;EADA,kBAAA;EAEA,mBAAA;EACA,WAAA;EACA,kBAAA;EAAA,qBAAA;EAOA,qBAAA;EAFA,SAAA;EjCKE,gBAAA;EiCNF,oC1CgEM;E0ClEN,sB1CmEM;EOuNF,eALI;EAKJ,eALI;EmCpRR,gBAAA;A3Cs7HF;A2C/6HE;EAEE,yBlC+kCsC;EkC9kCtC,kDAAA;EAFA,clCilCsC;ATk2F1C;A2C/6HI;EAEE,yBlColCoC;EkCrlCpC,iSAAA;A3Ck7HN;A2C56HE;EACE,cAAA;EACA,WlCykCsC;EkCzkCtC,clCykCsC;EkCxkCtC,YlCwkCsC;EkCxkCtC,elCwkCsC;EkCvkCtC,iBAAA;EAEA,2SAAA;EAEA,wBlCmkCsC;EkCpkCtC,4BAAA;EAFA,WAAA;A3Ci7HJ;A2C16HE;EACE,UAAA;A3C46HJ;A2Cz6HE;EACE,UAAA;EACA,qBlC8pBoC;EkC7pBpC,UAAA;EACA,iDlCgjB4B;AT23GhC;;A2Cv6HA;EACE,gBAAA;A3C06HF;;A2Cv6HA;EAEE,yCAAA;EADA,oC1CiBM;AD05HR;A2Cx6HE;EjClCE,4BAAA;EADA,2BAAA;AV+8HJ;A2Cz6HI;EjCrCA,4BAAA;EADA,2BAAA;AVm9HJ;A2Cx6HE;EACE,aAAA;A3C06HJ;A2Ct6HE;EjClCE,+BAAA;EACA,8BAAA;AV28HJ;A2Ct6HM;EjCtCF,+BAAA;EACA,8BAAA;AV+8HJ;A2Cr6HI;EjC3CA,+BAAA;EACA,8BAAA;AVm9HJ;;A2Cn6HA;EACE,kBAAA;EAAA,qBAAA;A3Cs6HF;;A2C75HE;EACE,eAAA;A3Cg6HJ;A2C75HE;EACE,eAAA;EACA,cAAA;EjCxFA,gBAAA;AVw/HJ;A2C75HI;EAAgB,aAAA;A3Cg6HpB;A2C/5HI;EAAe,gBAAA;A3Ck6HnB;A2Ch6HI;EjC9FA,gBAAA;AVigIJ;;A4CphIA;EACE,aAAA;EACA,eAAA;EAEA,mBnC+0CkC;EmC/0ClC,mBnC+0CkC;EmCh1ClC,YAAA;EAGA,gBAAA;A5CshIF;;A4C/gIE;EACE,iBnCo0CgC;EmCp0ChC,oBnCo0CgC;AT8sFpC;A4ChhII;EAEE,kBnCg0C8B;EmCh0C9B,qBnCg0C8B;EmCj0C9B,WAAA;EAGA,uFAAA;EADA,c3CuEK;AD48HX;A4C9gIE;EACE,c3CiEO;AD+8HX;;A6CziIA;EACE,aAAA;EjCGA,eAAA;EACA,gBAAA;AZ0iIF;;A6C1iIA;EAEE,cAAA;EADA,kBAAA;EAKA,yBAAA;EADA,oC5CmEM;E4CrEN,cpCiSW;AT8wHb;A6CziIE;EACE,UAAA;EAIA,qB5CoEO;E4CtEP,qBAAA;A7C6iIJ;A6CxiIE;EAJE,yB5CoEO;E4CtEP,cpC4Re;ATyxHnB;A6C/iIE;EACE,UAAA;EAGA,UpC0gCgC;EoCzgChC,iDpCwkB4B;ATk+GhC;;A6CriIE;EACE,iBpC6/BgC;AT2iGpC;A6CriIE;EACE,UAAA;EAGA,qBpC+BM;EiBnER,yBjBmEQ;EoCjCN,yB5CuCI;ADkgIR;A6CpiIE;EAIE,qB5CwCO;E4CzCP,yB5C+CO;E4CjDP,c5C6CO;E4C5CP,oBAAA;A7CwiIJ;;A8CjlIE;EACE,iBAAA;EAAA,yBAAA;A9ColIJ;;A8C7kIQ;EpCqCJ,2BAAA;EACA,8BAAA;AV4iIJ;A8C5kIQ;EpCiBJ,4BAAA;EACA,+BAAA;AV8jIJ;;A8C9lIE;EACE,kBAAA;EAAA,uBAAA;EtCgSE,kBALI;EAKJ,sBALI;ARu0HV;A8C3lIQ;EpCqCJ,2BAAA;EACA,8BAAA;AVyjIJ;A8CzlIQ;EpCiBJ,4BAAA;EACA,+BAAA;AV2kIJ;;A8C3mIE;EACE,gBAAA;EAAA,uBAAA;EtCgSE,mBALI;EAKJ,0BALI;ARo1HV;A8CxmIQ;EpCqCJ,2BAAA;EACA,8BAAA;AVskIJ;A8CtmIQ;EpCiBJ,4BAAA;EACA,+BAAA;AVwlIJ;;A+CvnIA;EACE,qBAAA;EACA,sBAAA;ErCYE,kBAAA;EqCRF,yB9CkEM;E8CpEN,gBtCubiB;ED3Jb,iBALI;EuCtRR,cAAA;EAEA,kBAAA;EAEA,wBAAA;EADA,mBAAA;A/C4nIF;A+CtnIE;EACE,aAAA;A/CwnIJ;;A+CnnIA;EACE,kBAAA;EACA,SAAA;A/CsnIF;;AgD7oIA;EACE,kBAAA;EAEA,mBvCyvC8B;EuCzvC9B,mBvCyvC8B;EuC1vC9B,kBAAA;EAAA,kBAAA;EAEA,6BAAA;EtCWE,kBAAA;AVsoIJ;;AgD5oIA;EAEE,cAAA;AhD8oIF;;AgD1oIA;EACE,gBvC4aiB;ATiuHnB;;AgDroIA;EACE,mBvC0uC8B;EuC1uC9B,mBvC0uC8B;AT85FhC;AgDroIE;EAIE,UAAA;EAHA,kBAAA;EACA,MAAA;EACA,QAAA;EAEA,kBAAA;EAAA,qBAAA;AhDuoIJ;;AgDxnIE;EChDA,qBD2Ce;EtB3Cf,yBsB0CmB;EC5CnB,cD8Cc;AhDkoIhB;AiD5qIE;EACE,cAAA;AjD8qIJ;;AgDjoIE;EChDA,qBD2Ce;EtB3Cf,yBsB0CmB;EC5CnB,cD8Cc;AhD2oIhB;AiDrrIE;EACE,cAAA;AjDurIJ;;AgD1oIE;EChDA,qBD2Ce;EtB3Cf,yBsB0CmB;EC5CnB,cD8Cc;AhDopIhB;AiD9rIE;EACE,cAAA;AjDgsIJ;;AgDnpIE;EChDA,qBD2Ce;EtB3Cf,yBsB0CmB;EC5CnB,cD8Cc;AhD6pIhB;AiDvsIE;EACE,cAAA;AjDysIJ;;AgD5pIE;EChDA,qBD2Ce;EtB3Cf,yBsB0CmB;EC5CnB,cD8Cc;AhDsqIhB;AiDhtIE;EACE,cAAA;AjDktIJ;;AgDrqIE;EChDA,qBD2Ce;EtB3Cf,yBsB0CmB;EC5CnB,cD8Cc;AhD+qIhB;AiDztIE;EACE,cAAA;AjD2tIJ;;AgD9qIE;EChDA,qBD2Ce;EtB3Cf,yBsB0CmB;EC5CnB,cD8Cc;AhDwrIhB;AiDluIE;EACE,cAAA;AjDouIJ;;AkDjuIA;EAEE,YzCkwCkC;EyClwClC,YzCkwCkC;EC3vChC,kBAAA;EwCJF,yBjDuES;EO+ML,eALI;EAKJ,kBALI;ARo9HV;;AkDhuIA;EATE,aAAA;EAEA,gBAAA;AlDkvIF;;AkD3uIA;EAEE,sBAAA;EACA,uBAAA;EAKA,yBzC2CQ;EyC9CR,yBjDoDM;EiDnDN,kBAAA;EACA,mBAAA;AlDouIF;;AkD/tIA;ExBYE,qMAAA;EwBVA,0BAAA;AlDkuIF;;AmDhwIA;EACE,aAAA;EACA,sBAAA;EAIA,gBAAA;EADA,eAAA;EzCUE,kBAAA;AVyvIJ;;AmD9vIA;EACE,qBAAA;EACA,sBAAA;AnDiwIF;AmD/vIE;EAEE,oCAAA;EACA,0BAAA;AnDgwIJ;;AmDtvIA;EACE,WAAA;EACA,clD0DS;EkDzDT,mBAAA;AnDyvIF;AmDtvIE;EAEE,UAAA;EAGA,yBlD2CO;EkD7CP,clDmDO;EkDlDP,qBAAA;AnDwvIJ;AmDpvIE;EAEE,yBlDuCO;EkDxCP,sBlDgCI;ADutIR;;AmD7uIA;EAEE,cAAA;EADA,kBAAA;EAEA,iBAAA;EAAA,oBAAA;EAIA,yCAAA;EADA,oClDeM;EkDjBN,4I1CiuCkC;ATihGpC;AmD7uIE;EzCpCE,gCAAA;EADA,+BAAA;AVsxIJ;AmD7uIE;EzC3BE,mCAAA;EACA,kCAAA;AV2wIJ;AmD7uIE;EAIE,yBlDgBO;EkDlBP,clDcO;EkDbP,oBAAA;AnD+uIJ;AmD1uIE;EACE,UAAA;EAGA,qB1CdM;E0CaN,yB1CbM;E0CYN,yBlDNI;ADovIR;AmDzuIE;EACE,mBAAA;AnD2uIJ;AmDzuII;EACE,gBAAA;EACA,qB1CwRS;ATm9Hf;;AmD7tII;EACE,mBAAA;AnDguIN;AmD7tIQ;EzCjDJ,0BAAA;EAYA,8BAAA;AVswIJ;AmD5tIQ;EzCtDJ,4BAAA;EAYA,4BAAA;AV0wIJ;AmD3tIQ;EACE,aAAA;AnD6tIV;AmD1tIQ;EACE,qB1CuPK;E0CtPL,oBAAA;AnD4tIV;AmD1tIU;EACE,iBAAA;EACA,sB1CkPG;AT0+Hf;;AiBhyII;EkC4CA;IACE,mBAAA;EnDwvIJ;EmDrvIM;IzCjDJ,0BAAA;IAYA,8BAAA;EV8xIF;EmDpvIM;IzCtDJ,4BAAA;IAYA,4BAAA;EVkyIF;EmDnvIM;IACE,aAAA;EnDqvIR;EmDlvIM;IACE,qB1CuPK;I0CtPL,oBAAA;EnDovIR;EmDlvIQ;IACE,iBAAA;IACA,sB1CkPG;ETkgIb;AACF;AiBzzII;EkC4CA;IACE,mBAAA;EnDgxIJ;EmD7wIM;IzCjDJ,0BAAA;IAYA,8BAAA;EVszIF;EmD5wIM;IzCtDJ,4BAAA;IAYA,4BAAA;EV0zIF;EmD3wIM;IACE,aAAA;EnD6wIR;EmD1wIM;IACE,qB1CuPK;I0CtPL,oBAAA;EnD4wIR;EmD1wIQ;IACE,iBAAA;IACA,sB1CkPG;ET0hIb;AACF;AiBj1II;EkC4CA;IACE,mBAAA;EnDwyIJ;EmDryIM;IzCjDJ,0BAAA;IAYA,8BAAA;EV80IF;EmDpyIM;IzCtDJ,4BAAA;IAYA,4BAAA;EVk1IF;EmDnyIM;IACE,aAAA;EnDqyIR;EmDlyIM;IACE,qB1CuPK;I0CtPL,oBAAA;EnDoyIR;EmDlyIQ;IACE,iBAAA;IACA,sB1CkPG;ETkjIb;AACF;AiBz2II;EkC4CA;IACE,mBAAA;EnDg0IJ;EmD7zIM;IzCjDJ,0BAAA;IAYA,8BAAA;EVs2IF;EmD5zIM;IzCtDJ,4BAAA;IAYA,4BAAA;EV02IF;EmD3zIM;IACE,aAAA;EnD6zIR;EmD1zIM;IACE,qB1CuPK;I0CtPL,oBAAA;EnD4zIR;EmD1zIQ;IACE,iBAAA;IACA,sB1CkPG;ET0kIb;AACF;AmD/yIA;EzC9HI,gBAAA;AVg7IJ;AmD/yIE;EACE,qBAAA;AnDizIJ;AmD/yII;EACE,sBAAA;AnDizIN;;AoDr8IE;EAEE,yBD+JsB;EChKtB,cDiKyB;AnDwyI7B;AoDr8IM;EAGE,yBAAA;EADA,cD2JqB;AnD4yI7B;AoDn8IM;EAGE,qBDoJqB;ECrJrB,yBDqJqB;ECtJrB,yBnD6DA;AD04IR;;AoDn9IE;EAEE,yBD+JsB;EChKtB,cDiKyB;AnDszI7B;AoDn9IM;EAGE,yBAAA;EADA,cD2JqB;AnD0zI7B;AoDj9IM;EAGE,qBDoJqB;ECrJrB,yBDqJqB;ECtJrB,yBnD6DA;ADw5IR;;AoDj+IE;EAEE,yBD+JsB;EChKtB,cDiKyB;AnDo0I7B;AoDj+IM;EAGE,yBAAA;EADA,cD2JqB;AnDw0I7B;AoD/9IM;EAGE,qBDoJqB;ECrJrB,yBDqJqB;ECtJrB,yBnD6DA;ADs6IR;;AoD/+IE;EAEE,yBD+JsB;EChKtB,cDiKyB;AnDk1I7B;AoD/+IM;EAGE,yBAAA;EADA,cD2JqB;AnDs1I7B;AoD7+IM;EAGE,qBDoJqB;ECrJrB,yBDqJqB;ECtJrB,yBnD6DA;ADo7IR;;AoD7/IE;EAEE,yBD+JsB;EChKtB,cDiKyB;AnDg2I7B;AoD7/IM;EAGE,yBAAA;EADA,cD2JqB;AnDo2I7B;AoD3/IM;EAGE,qBDoJqB;ECrJrB,yBDqJqB;ECtJrB,yBnD6DA;ADk8IR;;AoD3gJE;EAEE,yBD+JsB;EChKtB,cDiKyB;AnD82I7B;AoD3gJM;EAGE,yBAAA;EADA,cD2JqB;AnDk3I7B;AoDzgJM;EAGE,qBDoJqB;ECrJrB,yBDqJqB;ECtJrB,yBnD6DA;ADg9IR;;AoDzhJE;EAEE,yBD+JsB;EChKtB,cDiKyB;AnD43I7B;AoDzhJM;EAGE,yBAAA;EADA,cD2JqB;AnDg4I7B;AoDvhJM;EAGE,qBDoJqB;ECrJrB,yBDqJqB;ECtJrB,yBnD6DA;AD89IR;;AqDtiJA;EACE,uBAAA;EACA,U5C24C2B;E4C14C3B,W5C04C2B;E4Cz4C3B,sBAAA;EAGA,SAAA;E3COE,kBAAA;E2CRF,wXAAA;EADA,sBpDoEM;EoDhEN,Y5C24C2B;AT8pG7B;AqDtiJE;EACE,sBpD4DI;EoD3DJ,qBAAA;EACA,a5Cs4CyB;ATkqG7B;AqDriJE;EACE,UAAA;EACA,iD5C0kB4B;E4CzkB5B,U5Ci4CyB;ATsqG7B;AqDpiJE;EAIE,a5C23CyB;E4C73CzB,oBAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ArDsiJJ;;AqDjiJA;EACE,kD5Cu3C2B;AT6qG7B;;AsD1kJA;EACE,Y7C+qCkC;E6C9qClC,eAAA;EAMA,oCAAA;E5CWE,kBAAA;E4CZF,4BAAA;EADA,2C7C+qCkC;E6C5qClC,uG7CmYyB;EDvGrB,eALI;EAKJ,mBALI;E8C3RR,oBAAA;AtDilJF;AsD1kJE;EACE,UAAA;AtD4kJJ;AsDzkJE;EACE,aAAA;AtD2kJJ;;AsDvkJA;EACE,uBAAA;EAAA,kBAAA;EACA,eAAA;EACA,oBAAA;AtD0kJF;AsDxkJE;EACE,mB7Ck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","file":"../library_boot.css","sourcesContent":["@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/**  ACC Brands    *********************************/\n/** SCSS DOC: __brand.library.scss **/\n/**  Build Comment: Overlay and alter for library 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/*\n\nContent Filler\n\nThis is a styleguide only element to show structure edges.\n\nMarkup:\n<div class=\"h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center\">Layout Zone: {{ modifier_class }}</div>\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts.Filler\n*/\n/*\n\nGrid Filler\n\nThis is a styleguide only element to show structure edges.\n\nMarkup:\n<div class=\"w_auto h_100p c_highlight-n4 font_xbold font_3 br_dotted br_highlight bg_highlight-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis\">Grid Area: {{ modifier_class }}</div>\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts.GridFiller\n*/\n/*\n\nSub Grid Filler\n\nThis is a styleguide only element to show structure edges.\n\nMarkup:\n<div class=\"w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis\">Grid Area: {{ modifier_class }}</div>\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts.SubGridFiller\n*/\n/*\n\nSide Bar Area\n\nThis pattern is often used to push the sidebar bellow the main content area. \n\n\nMarkup:\n<div class=\"flex flex_row:md flex_column-reverse gap_4 gap_5:lg\">\n    <div class=\"flex_auto flex_100 max-w_20:lg\">\n    {{> \"Page.Layouts.Filler\"  modifier_class=\"Sidebar\"}}\n    </div>\n    <div class=\"flex_auto flex_100 \">\n    {{> \"Page.Layouts.Filler\"  modifier_class=\"Main\"}}\n    </div>\n</div>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Page.Layouts.Sidebar\n*/\n/*\n\nSide Bar Area With Ad\n\nThis pattern is often used to push the sidebar bellow the main content area. \n\n\nMarkup:\n<div class=\"flex flex_row:lg flex_column gap_4 gap_5:lg\">\n    <div class=\"flex_auto flex_100 flex flex_row:md flex_column-reverse gap_4 gap_5:lg\">\n        <div class=\"flex_auto flex_100 max-w_20:md\">\n            {{> \"Page.Layouts.Filler\" modifier_class=\"Sidebar\"}}\n        </div>\n        <div class=\"flex_auto flex_100\">\n            {{> \"Page.Layouts.Filler\" modifier_class=\"Main\"}}\n        </div>\n    </div>\n    <div class=\"flex_auto flex_100 max_w-100 max-w_10:lg\">\n        {{> \"Page.Layouts.Filler\" modifier_class=\"Ad Rail\"}}\n    </div>\n</div>   \n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Page.Layouts.SidebarAndAd\n*/\n/*\nAgenda Item\n\nDescription:\nAgenda items are sessions that are scheduled for a specific date, location, and time.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda\n*/\n/*\nAgenda ID\n\nDescription:\nThe ID given to an Agenda. This number is unique to the Agenda and is incremented for each new Agenda created.\n\nMarkup:\n101\n\nWeight:1\n\nStyleguide Sub.Data.Agenda.ID\n*/\n/*\nChannel Name\n\nDescription:\nA channel is a visible category that an Agenda Item belongs to.\n\nMarkup:\nNavigating Health Care Economics \n\n\nWeight:1\n\nStyleguide Sub.Data.Agenda.ChannelName\n*/\n/*\nLive Time\n\nDescription:\nThe time at which a Agenda is live.\n\nMarkup: @ {{> Sub.Data.Agenda.ReleaseTime }} – {{> Sub.Data.Agenda.ReleaseTime }} <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.LiveTime\n*/\n/*\nRelease Time\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.ReleaseTime\n*/\n/*\nEnd Time\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.EndTime\n*/\n/*\nLive Date\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.LiveDate\n*/\n/*\nOn Demand Release Date and Time\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 @ 8:00 p.m. <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\nWeight:0\n\nStyleguide Sub.Data.Agenda.onDemandReleaseTime\n*/\n/*\nSession \n\nA Session is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.\n\nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:100\n\nStyleguide Sub.Data.Session\n*/\n/*\nSession Subtitle\n\nThe subtitle of a Session.\n\nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:2\n\nStyleguide Sub.Data.Session.Subtitle\n*/\n/*\nSession Title\n\nDescription:\nThe title of a Session.\n\nMarkup:\nCardiovascular Update for the Clinician III\n\nWeight:1\n\nStyleguide Sub.Data.Session.Title\n*/\n/*\nSession Identifier\n\nDescription:\nThe ID given to a session\n\nMarkup:\n3652\n\nWeight:0\n\nStyleguide Sub.Data.Session.ID\n*/\n/*\nSession Description\n\nThe description of a session.\n\nMarkup:\n<p>Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.</p>\n\nWeight:3\n\nStyleguide Sub.Data.Session.Description\n*/\n/*\nPresentation \n\nDescription:\nA presentation is a single part of education that can not be subdivided.\n\nWeight:0\n\nStyleguide Sub.Data.Presentation\n*/\n/*\nPresentation Description\n\nDescription:\nThe Description of a presentation\n\nMarkup:Drug Coated Balloons\n\nWeight:500\n\nStyleguide Sub.Data.Presentation.Description\n*/\n/*\nPresentation Title\n\nDescription:\nThe title of a presentation\n\nMarkup:\nNew York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty\n\nWeight:0\n\nStyleguide Sub.Data.Presentation.Title\n*/\n/*\nPresentation Live Time\n\nDescription:\nThe Live Time of a Presentation\n\nMarkup:\n11:45 – 11:49 a.m. <abbr title=\"EASTERN DAYLIGHT TIME, UTC -4\">ET</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\n\nWeight:0\n\nStyleguide Sub.Data.Presentation.LiveTime\n*/\n/*\nPresentation ID\n\nDescription:\nUnique system generated identifier for a presentation.\n\nMarkup:\n15612\n\nWeight:0\n\nStyleguide Sub.Data.Presentation.ID\n*/\n/*\nFaculty \n\nDescription:\nAn educator who created or participated in a presentation\n\nWeight:1000\n\nStyleguide Sub.Data.Faculty\n*/\n/*\nPhoto\n\nDescription:\nA photo of the faculty member\n\nMarkup:\n<img\n    class=\"aspect_1x1 w_100\"\n    src=\"https://i.pravatar.cc/300\"\n    alt=\"{{> \"Sub.Data.Faculty.FullName\" }}\"\n/>\n\nMarkupWrapperClasses: max-w_30\n\nFORMAT: 300px by 300px\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.Photo\n*/\n/*\nFull Name\n\nThe full name of the faculty 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.Faculty.FullName\n*/\n/*\nLocation\n\nDescription:\nThe location of the faculty 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.Faculty.Location\n*/\n/*\nTitle\n\nDescription:\nthe roles of the faculty member within the session\n\nMarkup:\n{{> \"Sub.Data.Faculty.Title.InstitutionTitle\" }}, {{> \"Sub.Data.Faculty.Title.InstitutionDivision\" }}, {{> \"Sub.Data.Faculty.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.Faculty.Title\n*/\n/*\nInstitution\n\nDescription:\nInstitution of the faculty member where they hold a title\n\nMarkup:\nMount SugarLoaf Hospital\n\nWeight:101\n\nStyleguide Sub.Data.Faculty.Title.Institution\n*/\n/*\nInstitution Division\n\nDescription:\nThe Division of the Institution of the faculty member where they hold a title\n\nMarkup:\nDepartment of Cardiology\n\nWeight:102\n\nStyleguide Sub.Data.Faculty.Title.InstitutionDivision\n*/\n/*\nInstitutional Title\n\nDescription:\nthe roles of the faculty member within the session\n\nMarkup:\nPhysician-in-Chief\n\nWeight:103\n\nStyleguide Sub.Data.Faculty.Title.InstitutionTitle\n*/\n/*\nTwitter Handle\n\nDescription:\nThe handle of the faculty member on twitter\n\nMarkup:\nTweat_DrSoda\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.TwitterHandle\n*/\n/*\nRole\n\nDescription:\nthe roles of the faculty member within the session\n\nMarkup:\nCo-Chair\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.Role\n*/\n/*\nBio\n\nDescription:\nsimple html text that describes the faculty member\n\nMarkup:\n<p>Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.</p>\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.Bio\n*/\n/*\nIdentification Number\n\nDescription:\nthis id can both be used to link to the faculty member's page, the member's image, and disclosures\n\nMarkup:\n122154254\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.ID\n*/\n/*\nSponsor\n\nDescription:\nSponsor are industry that has offered money or support to an event.\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://cdn.jsdelivr.net/gh/ACC-Style/Arches/dist/img/LoremIpsum.png\"/>\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/*\nWebsite Link\n\nMarkup:\n<a class=\"website {{modifier_class}}\" target=\"_blank\"  href=\"{{> 'Sub.Data.Sponsor.WebAddress'}}\">More</a>\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.MoreLink\n*/\n/*\nPDF Link\n\nMarkup:\n<a class=\"pdf {{modifier_class}}\" target=\"_blank\" href=\"{{> 'Sub.Data.Sponsor.WebAddress'}}.pdf\">PDF</a>\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.PDFLink\n*/\n/*\nDescription\n\nDescription: Short html description of the sponsor or the product.\n\nMarkup:\n<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>\n<ul>\n    <li>Ut reiciendis et possimus rerum animi.</li>\n<li>Reprehenderit quia et eaque cupiditate illo explicabo architecto.</li>\n<li>Et cumque distinctio maxime maiores aut labore ut est esse.</li>\n</ul>\n<p>Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.</p>\n\nWeight:3\n\nStyleguide Sub.Data.Sponsor.Description\n*/\n/*\nAward\n\nDescription: Awards and Recognition \n\nWeight:5\n\nStyleguide Sub.Data.Award\n\n*/\n/*\nAward Title\n\nDescription: Title of the award\n\nMarkup:\nPamela S. Douglas Distinguished Award for Leaderiship in Diversity and Inclusion\n\nWeight:5\n\nStyleguide Sub.Data.Award.Title\n\n*/\n/*\nAward Description\n\nDescription: Description of the award can be html or text and may include a link.\n\nMarkup:\n<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>\n<ul>\n<li>Ut reiciendis et possimus rerum animi.</li>\n<li>Reprehenderit quia et eaque cupiditate illo explicabo architecto.</li>\n<li>Et cumque distinctio maxime maiores aut labore ut est esse.</li>\n</ul>\n<p>Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.</p>\n<a href=\"https://acc.org\" target=\"_blank\">Watch Video</a>\n\nWeight:5\n\nStyleguide Sub.Data.Award.Description\n\n*/\n/*\nAbstract \n\nA Abstract is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.\n\nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:100\n\nStyleguide Sub.Data.Abstract\n*/\n/*\nAbstract Subtitle\n\nThe subtitle of a Abstract.\n\nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:2\n\nStyleguide Sub.Data.Abstract.Subtitle\n*/\n/*\nAbstract Title\n\nDescription:\nThe title of a Abstract.\n\nMarkup:\nAbstract on Cardiovascular Update for the Clinician Success H<sub>2</sub>\n\nWeight:1\n\nStyleguide Sub.Data.Abstract.Title\n*/\n/*\nAbstract Identifier\n\nDescription:\nThe ID given to a Abstract\n\nMarkup:\n3652\n\nWeight:0\n\nStyleguide Sub.Data.Abstract.ID\n*/\n/*\nAbstract Description\n\nThe description of a Abstract.\n\nMarkup:\n<p>Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.</p>\n\nWeight:3\n\nStyleguide Sub.Data.Abstract.Description\n*/\n/*\nAction Buttons Clear Search\n\nThis action button is used to clear the search filters and parameters.\n\n\nMarkup:\n<aside class=\"flex flex_none flex_column gap-y_3 m-l_auto:md  max-w_30:md p-b_4 p-b_4:md w_100\">\n      <nav aria-label=\"session actions\" class=\"flex flex_none flex_row gap-x_2 gap-y_3 justify_between\">\n        <a href=\"#\" aria-label=\"navigate to\" class=\"br_1 br_solid br_white-3 btn btn-secondary flex_auto shadow_overlap-light\">Clear Search <i class=\"fas fa-times p-l_3\"></i></a>\n      </nav>\n</aside>\n\nWeight:0\n\nStyleguide Sub.ActionButtons.ClearSearch\n\n*/\n/*\n\nFaceted Search\n\nFacet Groups\n\nMarkup:\n<li data-name=\"library-search-facet\" class=\"bg_white-8 br_radius m-t_3 p_3  max-w_20:md {{ modifier_class }}\" >\n    <header class=\"flex font-size_up m-y_2\">\n        <div class=\"flex_auto  self_center p-l_0 lh_1 font-size_up font_medium\">Drugs Generic </div>\n          {{> \"Sub.CollapseIcon\" modifier_class=\"#CollapseFacetGroupID\" }}\n    </header>\n    <main id=\"CollapseFacetGroupID\" class=\"p_1 collapse show\" style=\"\">\n        <ul class=\"p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid\">\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_5091\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_2516\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_8342\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_8813\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_9372\" }}\n        </ul>\n        <footer class=\"text_center font-size_down c_primary-n1 p-t_3\"><span class=\"cursor_not-allowed c_black-3\">less</span><span class=\"c_primary\"> | </span><span class=\"link h:underline h:black link h:underline h:black cursor_pointer\">more</span></footer>\n    </main>\n</li>\n\nMarkupWrapperClasses: max-w_30 ul_none\n\nNOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count.  The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.\n\nSubComponents: \nSub.Search.FacetCheckbox - Single Facet Checkbox\nSub.CollapseIcon - Collapse Icon\n\nWeight:0\n\nStyleguide Sub.Search.Faceted\n*/\n/*\n\nFaceted Search\n\nFacet Groups\n\nMarkup:\n<li data-name=\"library-search-facet\" class=\"bg_white-8 br_radius m-t_3 p_3  max-w_20:md {{ modifier_class }}\" >\n    <header class=\"flex font-size_up m-y_2\">\n        <div class=\"flex_auto  self_center p-l_0 lh_1 font-size_up font_medium\">Primary Category </div>\n         {{> \"Sub.CollapseIcon\" modifier_class=\"#CollapseFacetGroupPrimaryID\" }}\n    </header>\n    <main id=\"CollapseFacetGroupPrimaryID\" class=\"p_1 collapse show\" style=\"\">\n        <ul class=\"p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid\">\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_2777\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_7799\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_3859\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_5116\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_0779\" }}\n        </ul>\n        <footer class=\"text_center font-size_down c_primary-n1 p-t_3\"><span class=\"cursor_not-allowed c_black-3\">less</span><span class=\"c_primary\"> | </span><span class=\"link h:underline h:black link h:underline h:black cursor_pointer\">more</span></footer>\n    </main>\n</li>\n\nMarkupWrapperClasses: max-w_30 ul_none\n\nNOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count.  The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.\n\nSubComponents: \nSub.Search.FacetCheckbox - Single Facet Checkbox\nSub.CollapseIcon - Collapse Icon\n\nWeight:0\n\nStyleguide Sub.Search.FacetedPrimary\n*/\n/*\n\nFaceted Type Ahead\n\nA type ahead search that adds a selected faceted filter to the search page. This is used when filters are exceptionally long and could be difficult to read when listed out.  Authors, and mesh terms can use this pattern to add them as a filter to the search page.\n\nMarkup:\n<li data-name=\"library-search-facet\" class=\"bg_white-8 br_radius m-t_3 p_3 max-w_20:md {{ modifier_class }}\">\n    <header class=\"flex font-size_up m-y_2\">\n        <div class=\"flex_auto  self_center p-l_0 lh_1 font-size_up font_medium\">Type Ahead Filter</div>\n    </header>\n    <main class=\"p_1 collapse show\">\n        <div class=\"p_3 flex flex_row\">\n            <input class=\"br-tr_square br-br_square\" type=\"text\" name=\"\" id=\"\" placeholder=\"Filter Name\">\n            <button class=\"btn btn-secondary br-tl_square br-bl_square\"><i class=\"fas fa-users\"></i></button>\n        </div>\n    </main>\n    <header class=\"flex font-size_up m-y_2\">\n        <div class=\"flex_auto self_center p-l_2 lh_1 font-size_down font_bold opacity_8\">Filtering By</div>\n        {{> \"Sub.CollapseIcon\" modifier_class=\"#collapseTypeAhead\" }}\n    </header>\n    <main id=\"collapseTypeAhead\" class=\"p_1 collapse show\" style=\"\">\n        <ul class=\"p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid\">\n            {{>  \"Sub.Search.FacetCheckboxWithTrash\" modifier_class=\"facet_0922\" }}\n            {{>  \"Sub.Search.FacetCheckboxWithTrash\" modifier_class=\"facet_1777\" }}\n        </ul>\n        <footer class=\"text_center font-size_down c_primary-n1 p-t_3\"><span class=\"cursor_not-allowed c_black-3\">less</span><span class=\"c_primary\"> | </span><span class=\"link h:underline h:black link h:underline h:black cursor_pointer\">more</span></footer>\n    </main>\n</li> \n\nMarkupWrapperClasses:\n\n\n\nWeight:100\n\nStyleguide Sub.Search.Faceted.TypeAhead\n*/\n/*\n\nCollapse/Expand\n\nThe collapse/expand icon is used to collapse and expand the facet group.\n\nMarkup:\n<div class=\"c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4\" data-bs-toggle=\"collapse\" data-bs-target=\"{{modifier_class}}\" role=\"button\" aria-expanded=\"true\" aria-controls=\"{{modifier_class}}\">\n  <div class=\"flex_none self_center\"> collapse </div>\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\nWeight:0\n\nStyleguide Sub.CollapseIcon\n*/\n/*\n\nCollapse/Expand No Text\n\nThe collapse/expand icon is used to collapse and expand the facet group.\n\nMarkup:\n<div class=\"toggle user-select_none\" data-bs-toggle=\"collapse\" data-bs-target=\"{{modifier_class}}\" role=\"button\" aria-expanded=\"true\" 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\n\nWeight:0\n\nStyleguide Sub.CollapseIcon.NoText\n*/\n/*\n\nFacet Checkbox\n\nThe single checkbox for a facet.\n\nMarkup:\n<li class=\"m-y_2\">\n    <div class=\"input flex user-select_none relative h:bg_black-1 br_radius\">\n        <div class=\"flex_none p-l_3 p-r_3 self_center\"><input type=\"checkbox\" name=\"check{{modifier_class}}\" id=\"check{{modifier_class}}\" class=\"font-size_up\"></div>\n        <div class=\"flex_auto self_center p-l_2 p-y_2\"><label for=\"check{{modifier_class}}\" class=\"font-size_up lh_2 block\"><span class=\"font_regular p-y_2 inline-block p-y_1:md\"> {{ modifier_class }}ut nobis est<small class=\"flex_auto p-l_2 font_light c_accent font-size_down-1\">58</small></span></label></div>\n        <!---->\n    </div>\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight:0\n\nStyleguide Sub.Search.FacetCheckbox\n*/\n/*\n\nFacet Checkbox With Trash\n\nThe single checkbox that is generated by the type ahead filter search. The trash button removes the filter. \n\nMarkup:\n<li class=\"m-y_2\">\n    <div class=\"input flex user-select_none relative h:bg_black-1 br_radius\">\n        <div class=\"flex_none p-l_3 p-r_3 self_center\"><input type=\"checkbox\" name=\"checkfacet{{modifier_class}}\" id=\"checkfacet{{modifier_class}}\" class=\"font-size_up\"></div>\n        <div class=\"flex_auto self_center p-l_2 p-y_2\"><label for=\"checkfacet{{modifier_class}}\" class=\"font-size_up lh_2 block\"><span class=\"font_regular p-y_2 inline-block p-y_1:md\">  type ahead filter {{ modifier_class }}</span></label></div>\n        <div class=\"\">\n            <button class=\"bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2\"><i class=\"fas fa-trash\"></i></button>\n        </div>\n        <!---->\n    </div>\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight:0\n\nStyleguide Sub.Search.FacetCheckboxWithTrash\n*/\n/*\n\n\nSearch Bar\n\nSimple Search Bar\n\n\nMarkup:\n<div class=\" sticky jump-buttons_top  r_0 z_1\">\n<div class=\"absolute r_4 t_0  flex flex_row flex_nowrap gap-x_3\">\n<!--  Helper Jump links -->\n  <a class=\"br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#SearchBarTop\">\n  <span><i class=\"fas fa-arrow-up\"></i><i class=\"m-l_2 fas fa-search\"></i></span>\n  </a>\n  <a href=\"#FilterNavContainer\" class=\"br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3\">\n  <span><i class=\"fas fa-arrow-down\"></i><i class=\"m-l_2 fas fa-filter\"></i></span>\n  </a>\n<!--  Helper Jump links -->  \n</div>\n</div>\n<div class=\"bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative\" >\n    <h1 class=\"c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between\"><span>Program</span>\n      <a href=\"#FilterNavContainer\" class=\"absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0\">\n      <span><i class=\"fas fa-arrow-down\"></i><i class=\"fas fa-filter\"></i></span>\n      </a>\n    </h1>\n    <div class=\"flex_row flex gap-x_3\">\n      <div class=\"input-holder flex_auto flex flex_row self_end relative w_100\">\n          <input id=\"input_uniqueTextAnda\" name=\"input_uniqueTextAnda\" type=\"text\" placeholder=\"Search\" class=\" br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 font_2:lg font_1:md font_0\">\n          <button class=\"absolute b_0 br-bl_square br-tl_square btn btn-primary flex_none grid items_center justify_center r_0 t_0\" onClick=\"Search()\">\n          <i class=\"fas fa-search\"></i>\n          </button>\n      </div>\n      <button class=\"disabled flex_none grid items_center justify_center btn btn-alert\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide  Sub.Search.Bar\n*/\n.jump-buttons_top {\n  top: 0;\n}\n\n/*\n\n\nProgram Bar\n\nSome events don't need a search bar the program bar remains because it is need to hide the jump links.\n\n\nMarkup:\n<div class=\" sticky t_0 r_0 z_1\">\n<div class=\"absolute r_4 t_0  flex flex_row flex_nowrap gap-x_3\">\n<!--  Helper Jump links -->\n  <a class=\"br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#SearchBarTop\">\n  <span><i class=\"fas fa-arrow-up\"></i> top</span>\n  </a>\n  <a href=\"#FilterNavContainer\" class=\"br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3\">\n  <span><i class=\"fas fa-arrow-down\"></i><i class=\"m-l_2 fas fa-filter\"></i></span>\n  </a>\n<!--  Helper Jump links -->  \n</div>\n</div>\n<div class=\"bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative\" >\n    <h1 class=\"c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between\"><span>Program</span>\n      <a href=\"#FilterNavContainer\" class=\"absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0\">\n      <span><i class=\"fas fa-arrow-down\"></i><i class=\"fas fa-filter\"></i></span>\n      </a>\n    </h1>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide  Sub.Search.NoBar\n*/\n/*\n\nResult Overview\n\nSmall strip of data that shows the number of results and the time it took to search.\n\nMarkup:\n<div class=\"c_secondary-n1 font_medium font-size_down-2 font_ui p_2 {{modifier_class}}\">\n  <ul class=\"ul_inline-pipe\">\n      <li>\n        <ul class=\"ul_inline-comma\">\n            <li class=\"font_bold   no-after uppercase\">Results:</li>\n            <li class=\"c_accent-n1\">230</li>  \n        </ul>\n      </li>\n      <li>\n        <ul class=\"ul_inline-comma\">\n            <li class=\"font_bold no-after uppercase\">Filters:</li>\n            <li><a class=\"h:underline c_primary-n1 c_primary-n2\">Category A <i class=\"fas fa-times c_alert-n1 p_2\"></i></a></li>\n            <li><a class=\"h:underline c_primary-n1 c_primary-n2\">Tag B  <i class=\"fas fa-times c_alert-n1 p_2\"></i></a></li>\n            <li><a class=\"h:underline c_primary-n1 c_primary-n2\">Tag C <i class=\"fas fa-times c_alert-n1 p_2\"></i></a></li>\n        </ul>\n      </li>\n  </ul>\n</div>\n\n\n\nWeight:0\n\nStyleguide Sub.Search.ResultOverview\n*/\n/*\n\nPagination\n\nPagination is used to navigate through the results.\n\nMarkup:\n<nav aria-label=\"Pagination\" class=\"flex flex_row p-b_5:lg p-b_4\">\n    <ul class=\"pagination flex flex_row ul_none justify_stretch relative lh_0 font_n1 font_medium m-x_auto shadow_bevel-light br_radius overflow_hidden\">\n        <li class=\"flex pagination-previous \">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br-tl_radius br-bl_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">\n                        <div class=\"flex flex_row nowrap\"><i class=\"fas fa-arrow-left p-r_3 self_center\"></i> <span class=\"show-for-sr display_none inline:md self_center\">Prev</span></div>\n                    </div>\n                </div>\n            </a>\n        </li>\n        <!---->\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\"><i class=\"fas  fa-ellipsis-h left\"></i></div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">50 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"active ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">51 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">52 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">53 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">54 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\"><i class=\"fas  fa-ellipsis-h right\"></i></div>\n                </div>\n            </a>\n        </li>\n        <!---->\n        <li class=\"flex pagination-next\">                        \n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br-tr_radius br-br_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" aria-label=\"Next Page\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">\n                        <div class=\"flex flex_row nowrap\"><span class=\"show-for-sr display_none inline:md self_center\">Next</span> <i class=\"fas fa-arrow-right p-l_3 self_center\"></i></div>\n                    </div>\n                </div>\n            </a>\n        </li>\n    </ul>\n</nav>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Pagination\n*/\n/*\nFaculty List\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li class=\"no-after font_medium c_primary-n1 block w_100 {{ modifier_class }}\">Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li class=\"no-after font_medium c_primary-n1 block w_100  {{ modifier_class }}\">Role Type 2:</li>\n  <li>Dianna Denesik III <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n\nData:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.FullName - Location\n\nFORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.\n\nWeight:0\n\nStyleguide Sub.FacultyList\n\n*/\n/*\nAux Session Faculty List\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<h4 class=\"font-size_up c_black-6 font_medium capitalize\"><i class=\"fas fa-users p-r_3\"></i> Role Type 1</h4>\n<div class=\"p-y_3 br-t_1  br_primary-2 br_solid font-size_down\">\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li>Marty Little <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Eileen Marvin <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Chelsea Dach DVM <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n</div>\n<h4 class=\"font-size_up c_black-6 font_medium capitalize\"><i class=\"fas fa-users p-r_3\"></i> Role Type 2</h4>\n<div class=\"p-y_3 br-t_1  br_primary-2 br_solid font-size_down\">\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li>Wm Price<span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Mrs. Jeffrey Cartwright <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>CEmmett Spencer<span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n</div>\n\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.Location - Location\n\n\nWeight:0\n\nStyleguide Sub.FacultyList.AuxSession\n\n*/\n/*\nCombined Faculty List\n\nWhen a presentation is in a single state the combination of session roles and presentation roles are shown.\n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Session Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li class=\"no-after font_medium c_primary-n1  {{ modifier_class }}\">Session Role Type 2:</li>\n  <li>Dianna Denesik III <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n    <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li class=\"no-after font_medium c_primary-n1  {{ modifier_class }}\">Role Type 2:</li>\n  <li>Dianna Denesik III <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.FullName - Location\n\n\nWeight:0\n\nStyleguide Sub.FacultyList.SessionAndPresentation\n\n*/\n/*\nSession Faculty List\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Session Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li class=\"no-after font_medium c_primary-n1  {{ modifier_class }}\">Session Role Type 2:</li>\n  <li>Dianna Denesik III <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.FullName - Location\n\n\nWeight:0\n\nStyleguide Sub.FacultyList.Session\n\n*/\n/*\nNo Location Faculty List\n\nWhen you list non-event areas like Posters, and Abstracts the list removes the location of the person. \n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }}</li>\n  <li class=\"no-after font_medium c_primary-n1  {{ modifier_class }}\">Role Type 2:</li>\n  <li>Dianna Denesik III</li>\n  <li>Miguel Romaguera</li>  \n  <li>Jeanette Franecki</li>\n</ul>\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\n\n\nWeight:0\n\nStyleguide Sub.FacultyList.NoLocation\n\n*/\n/*\n\nMember Profile Data\n\nData for the Member Profile that is visible for the user.\n\nMarkup:\n<section class=\"bg_acc-n2 br_1 br_black-2 br_round br_solid p-x_5:lg p_4 inset-level_up shadow_bevel-bold\">\n  <div class=\"c_white\">\n    <h2 class=\"br-b_1 br_solid br_white-6 c_white m-t_2 p-b_3 text_center\">Account Information</h2>\n    <ul class=\"ul_none p_0 m_0\">\n    <li class=\"\"><strong>User Name:</strong> <span data-type=\"User Full Name\">Regina Rutherford</span> </li>\n    <li class=\"\"><strong>Member ID:</strong> <span data-type=\"Member ID\">0152151214</span> </li><li class=\"\"><strong>Email:</strong> <span data-type=\"email\">test@boo.com</span> </li>\n    </ul>\n  </div>\n  <div class=\"bg_black-4 br_radius c_white m-b_n2 m-t_4 m-x_n4 p_4 shadow_emboss-light\">\n    <p class=\"\"><strong>Click the 'Member Help' button to send along your member information to help diagnose this issue.</strong></p><div class=\"text_center\"><a href=\"mailTO:membercare@acc.org?body='name,email,personify'\" class=\"btn btn-primary c_white inline-block m-x_auto shadow_overlap-light text_center w_auto\">Member Care</a></div>\n  </div>\n</section>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.System.MemberData\n\n*/\n/*\n\nNo Access Trouble Shooting\n\nThe instructions to the user when they land on the \"No Access\" to the page.\n\nMarkup:\n<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative \">\n\t<div class=\"reading-typography flex flex_column gap_4\">\n\t\t<h2 class=\"\">No Access to [PRODUCT NAME]</h2>\n\t\t<p>[PRODUCT DESCRIPTION].  To read more about the details of [PRODUCT NAME] click the learn more button.</p>\n\t\t<div class=\"flex flex_row gap_3 justify_center\">\n\t\t\t<a href=\"[PRODUCT MARKETING URL]\" class=\"w_100 block max-w_20 btn btn-secondary c_white font_bold font_ui h:c_white shadow_overlap-light \" title=\"Navigate to [PRODUCT NAME] detail page\">Learn More</a>\n\t\t</div>\n\t</div>\n</div>\t\n<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative \">\n\t<div class=\"reading-typography flex flex_column gap_4\">\n\t\t<h2 class=\"font_bold\">Registration Steps</h2>\n\t\t<ol class=\"counter_reset m_0 p_0 ul_none flex_column flex gap_4\">\n\t\t\t<li class=\"flex flex_row\">\n\t\t\t\t<span class=\"c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4\"></span>\n\t\t\t\t<div class=\"flex_auto\">\n\t\t\t\t\t<p>To purchase, please click the \"Register\" button below. Once you have completed your purchase, please <strong class=\"uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap\">wait 15 minutes</strong> to allow the system to process the information. </p>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t\t<li class=\"flex flex_row gap_3 justify_center\">\n\t\t\t\t<a title=\"register for the  [PRODUCT NAME]\" href=\"https://www.acc.org/Education-and-Meetings/Meetings/Meeting-Items/2022/01/01/01/04/ACC-Anywhere-ACC22-On-Demand\" class=\"w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light \">Register</a>\n\t\t\t</li>\n\t\t\t<li class=\"flex flex_row\">\n\t\t\t\t<span class=\"c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4\"></span>\n\t\t\t\t<div class=\"flex_auto\">\n\t\t\t\t\t<p>If you have just registered and you have <strong class=\"uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap\">waited 15 minutes</strong> and you have arrived here in error click the \"Refresh Access\" Button to get into [PRODUCT NAME].</p>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t\t<li class=\"flex flex_row gap_3 justify_center\">\n\t\t\t\t<a title=\"reset the access from you account\" href=\"[EVENT AUTHENTICATION URL]\" class=\"w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light \">Refresh Access</a>\n\t\t\t</li>\n\t\t\t<li class=\"flex flex_row\">\n\t\t\t\t<span class=\"c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4\"></span>\n\t\t\t\t<div class=\"flex_auto\">\n\t\t\t\t\t<div class=\"flex flex_row:md flex_column\">\n\t\t\t\t\t\t<div class=\"reading-typography flex flex_column gap_4 flex_50 p-r_5:md\">\n\t\t\t\t\t\t\t<p class=\"font_bold\">If you believe you have received this message in error, please contact <a href=\"mailto:MemberCare@ACC.org\"><em>Member Care</em></a> </p>\n\t\t\t\t\t\t\t<ul class=\"ul_none p_3\">\n\t\t\t\t\t\t\t\t<li class=\"font_bold\">For additional questions, please contact ACC Member Care.</li>\n\t\t\t\t\t\t\t\t<li><strong>Email:</strong> <a href=\"mailto:MemberCare@ACC.org\"><em>MemberCare@ACC.org</em></a></li>\n\t\t\t\t\t\t\t\t<li><strong>Phone:</strong> 202-375-6000 ext. 5603   </li>\n\t\t\t\t\t\t\t\t<li><strong>Toll-Free:</strong> 800-253-4636 ext. 5603</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\" flex_50\"`>\n\t\t\t\t\t\t\t{{> 'Sub.System.MemberData' }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ol>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.System.AccessTroubleShooting\n\n\n*/\n/*\n\nClass Lists\n\nThis is a combination of the classes that build common decorative elements or spacing in the design.\n\n\nMarkupWrapperClasses: \n\nWeight:99999\n\nStyleguide Sub.ClassList\n*/\n/*\n\nBody Classes\n\nThe list of classes used on the body tag\n\nMarkup:\nbg_black-4 w_100 p_3:md p_2\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Body\n*/\n/*\n\nPage Area\n\nThe list of classes used on the body tag\n\nMarkup:\np_2 p_3:md isolation_isolate br_radius bg_white-7\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Page\n*/\n/*\n\nInset Level_up\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_up bg_white-7 br_radius br_solid br_1 br_black-2\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.up \n*/\n/*\n\nInset Level_up-1\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.up-1 \n*/\n/*\n\nInset level_down\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_down bg_black-_05 shadow_emboss-light br_radius br_solid br_1 br_black-1\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.down\n*/\n/*\n\nInset level_down-1\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.down-1\n*/\n/*\n\nInset level_down-2\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_down-2 bg_black-2 shadow_emboss-light br_solid br_1 br_black-3 br_radius  texture_light\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.down-2\n*/\n/*\n\nInset padding Level 0\n\nThe list of classes used on the body tag\n\nMarkup:\np_2 p_3:md\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding\n\n*/\n/*\n\nInset padding Level 1\n\nThe list of classes used on the body tag\n\nMarkup:\np_2 p_3:md p_4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding.up-1\n\n*/\n/*\n\nInset Margin Level -1\n\nThe list of classes used on the body tag\n\nMarkup:\nm-x_n2 m-x_n3:md m-x_n4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.margin.down-1\n\n*/\n/*\n\nInset padding Level 2\n\nThe list of classes used on the body tag\n\nMarkup:\np_3 p_4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding.up-2\n\n*/\n/*\n\nInset padding Level 3\n\nThe list of classes used on the body tag\n\nMarkup:\np_4\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding.up-3\n\n*/\n/*\n\nInset padding Level 4\n\nThe list of classes used on the body tag\n\nMarkup:\np_4 p_5:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding.up-4\n\n*/\n/*\n\nVertical padding Level 0\n\nThe list of classes used on the body tag\n\nMarkup:\np-y_2 p-y_3:md\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Vertical.padding\n\n*/\n/*\n\nVertical padding Level 1\n\nThe list of classes used on the body tag\n\nMarkup:\np-y_2 p-y_3:md p-y_4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Vertical.padding.up-1\n\n*/\n/*\n\nVertical padding Level 2\n\nThe list of classes used on the body tag\n\nMarkup:\np-y_3 p-y_4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Vertical.padding.up-2\n\n*/\n/*\n\nVertical padding Level 3\n\nThe list of classes used on the body tag\n\nMarkup:\np-y_4 p-y_5:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Vertical.padding.up-3\n\n*/\n/*\n\nBorder Top Primary\n\nUsed in dividing lists of items.\n\nMarkup:\n br-t_1  br_primary-2 br_solid\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.ClassList.Border.PrimaryTop\n*/\n/*\n\nBorder Top Primary\n\nUsed in dividing lists of items.\n\nMarkup:\nbr-t_1 br_black-3 br_solid\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.ClassList.Border.BlackTop\n*/\n/*\n\nCredits Chiclets\n\nCredits show in the design when they are available to be claimed by the media they are on. \n\ndefault\t\t -  there is no default version of credits it is always a type.\nCME\t\t -  CME Credits\nCNE\t -  CNE Credits\n\nMarkup:\n<span class=\"bg_{{ modifier_class }}-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center\">{{ modifier_class }}</span>\n\nMarkupWrapperClasses:p_2 \n\nWeight: 0\n\nStyleguide Sub.Credit\n*/\n/*\n\nFavorite/Bookmark Button\n\nThis button has an active and deactivate state depending on the users select of that media item. \n\ndefault\t\t -   plan button\nactive        -  the media item is selected\n\nMarkup:\n<a class=\"inline-block m-x_n3 m-t_n1 {{modifier_class}}\">\n    <span class=\"fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3\">\n        <i class=\"fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1\"></i>\n        <i class=\"fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1\"></i>\n    </span>\n</a>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\n\nStyleguide Sub.ActionButtons.Favorite\n*/\n/*\n\nSection Header\n\nSection Headers are styled the same\n\ndefault - plan header\n\nMarkup:\n<header class=\"font_display font_regular  c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 \"><h2 class=\"lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1\">{{modifier_class}}</h2></header>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Section.h2\n*/\n/*\n\nSection Header Down\n\nSection Headers are styled the same\n\ndefault - plan header\n\nMarkup:\n<header class=\"font_display font_regular  c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 \"><h3 class=\"lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0\">{{modifier_class}}</h3></header>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Section.h3\n*/\n/*\n\nSection Header\n\nSection Headers are styled the same\n\ndefault - plan header\n\nMarkup:\n<header class=\"p-x_4 font_display font_regular  c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 \"><h2 class=\"lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1\">{{modifier_class}}</h2></header>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Section.h2.with-padding\n*/\n/*\n\nSection Header Down\n\nSection Headers are styled the same\n\ndefault - plan header\n\nMarkup:\n<header class=\"p-x_4 font_display font_regular  c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 \"><h3 class=\"lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0\">{{modifier_class}}</h3></header>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Section.h3.with-padding\n*/\n/*\n\nProgress Player Bar\n\nshows users where they left off with the player. \n\ndefault\t\t -  Has zero player\n50          - 50% played \n\nMarkup:\n<aside class=\"bg_secondary-3 h:bg_primary-3 p-x_4 p-y_3 br_radius flex flex_row texture_dust relative\">\n    <a class=\"expanded-click-area\" href=\"player@{{ modifier_class }}\"><i class=\"fa fa-play p-x_3 c_primary\"></i></a>\n    <div class=\"progress w_100 self_center br_black-2 br_solid bg_black-4 br_1 br_round h_0lh font_n4\">\n        <div class=\"progress-bar bg_accent\" role=\"progressbar\" style=\"width: {{ modifier_class }}%\" aria-valuenow=\"{{ modifier_class }}\" aria-valuemax=\"100\"></div>\n    </div>\n</aside>  \n\nStyleguide Sub.ProgressBar\n*/\n/*\n\nTime Markers\n\nshows users where they results can be found in the result. \n\nMarkup:\n<aside class=\"flex flex_row flex_wrap font_ui {{> 'Sub.ClassList.Inset.down-1'}} {{> 'Sub.ClassList.Inset.padding'}}\">\n    <strong class=\"p-r_3 block w_100\">Search Word Found At These Time Markers</strong>\n    <ul class=\"ul_inline-pipe\">\n        <li class=\"c_primary uppercase font_medium\"><a href=\"#\" class=\"link\"><i class=\"fas fa-play c_primary font-size_down-1 self_center\"></i> start</a></li>\n        <li><a href=\"#\" class=\"link\"><i class=\"fas fa-step-forward c_primary font-size_down-1 self_center\"></i>  0:53</a></li>\n        <li><a href=\"#\" class=\"link\"><i class=\"fas fa-step-forward c_primary font-size_down-1 self_center\"></i>  2:30</a></li>\n    </ul>\n</aside>\n\nMarkupWrapperClasses: \n\n\nClassList:\nSub.ClassList.Inset.down-1 - Inset Down 1\nSub.ClassList.Inset.padding - Inset Padding\n\nWeight:0\n\nStyleguide Sub.Search.TimeMarkers\n*/\n/*\n\nCarousel Custom Nav\n\nTiny Slider custom\n\nMarkup:\n<div class=\"customize-tools\">\n    <ul class=\"controls ul_none font-size_up-2 c_black-6\" id=\"slider1-customize-controls\" aria-label=\"Carousel Navigation\" tabindex=\"0\">\n        <li class=\"prev bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light\" aria-controls=\"customize\" tabindex=\"-1\" data-controls=\"prev\">\n            <i class=\"fal fa-chevron-left\"></i>\n        </li>\n        <li class=\"next bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light\" aria-controls=\"customize\" tabindex=\"-1\" data-controls=\"next\">\n            <i class=\"fal fa-chevron-right\"></i>\n        </li>\n    </ul>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Sub.Carousel.CustomTools\n*/\n/*\n\nCarousel Custom Nav Vertical\n\nTiny Slider custom\n\nMarkup:\n<div class=\"customize-tools relative\">\n    <ul class=\"absolute b_4 r_0 l_0 controls ul_none font-size_up-2 c_black-6 flex flex_row gap-x_4\" id=\"slider-customize-controls-vertical\" aria-label=\"Carousel Navigation\" tabindex=\"0\">\n        <li class=\"prev bg_white-8 block br-br_radius br-l_0 br-tr_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50\" aria-controls=\"customize\" tabindex=\"-1\" data-controls=\"prev\">\n            <i class=\"fal fa-chevron-up\"></i>\n        </li>\n        <li class=\"next bg_white-8 block br-bl_radius br-r_0 br-tl_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50\" aria-controls=\"customize\" tabindex=\"-1\" data-controls=\"next\">\n            <i class=\"fal fa-chevron-down\"></i>\n        </li>\n    </ul>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Sub.Carousel.CustomToolsVertical\n*/\n/*\n\nCarousel Custom Disabled\n\nTiny Slider custom\n\nMarkup:\n<div class=\"customize-tools\">\n<ul class=\"controls ul_none font-size_up-2 c_black-6\" id=\"slider3-customize-controls\" aria-label=\"Carousel Navigation\" tabindex=\"0\">\n<li class=\"disabled prev bg_white-8 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light\" aria-controls=\"slider3\" tabindex=\"-1\" data-controls=\"prev\">\n    <i class=\"fal fa-chevron-left opacity_3\"></i>\n</li>\n<li class=\"disabled next bg_white-8  filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light\" aria-controls=\"slider3\" tabindex=\"-1\" data-controls=\"next\">\n    <i class=\"fal fa-chevron-right opacity_3\"></i>\n</li>\n</ul>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Sub.Carousel.CustomTools.Disabled\n*/\n/*\n\nDuration\n\nThe length of the clip of video or all the of the lengths of the combined clips. \n\nMarkup:\n<li class=\"inline-block p-r_3 p_2 lh_0\">\n    <span class=\"font-size_up c_accent-n2 block\"><i class=\"fal fa-clock\"></i> 15</span>\n    minutes\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\n\n\nStyleguide Sub.Sub.Data.Duration \n*/\n/*\n\nPresentation Count\n\nNumber of presentations in the session. \n\nMarkup:\n<li class=\"inline-block p-r_3 p_2 lh_0\">\n    <span class=\"font-size_up c_accent-n2 block\">4</span>\n    presentations\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Sub.Sub.Data.PresentationCount\n*/\n/*\n\nAttachment Link\n\nLink to attachments. it should state pdf or zip depending \n\nMarkup:\n<li class=\"inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0\">\n    <a href=\"#\" class=\"undecorated h:undecorated expanded-click-area\">\n    <span class=\"font-size_up c_primary-n2 block\"><i class=\"fal fa-paperclip p-r_3\"></i> <span class=\"p-r_3\">PDF</span></span> \n        Attachments\n    </a>\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Sub.Sub.Data.AttachmentLink\n*/\n/*\n\nAttachment Link ZIP\n\nLink to attachments. it should state pdf or zip depending \n\nMarkup:\n<li class=\"inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0\">\n    <a href=\"#\" class=\"undecorated h:undecorated expanded-click-area\">\n    <span class=\"font-size_up c_primary-n2 block\"><i class=\"fal fa-paperclip p-r_3\"></i><span class=\"p-r_3\">ZIP</span></span> \n        Attachments\n    </a>\n</li>\n\nMarkupWrapperClasses: ul_none                                                                           \n\nWeight: 0\n\nStyleguide Sub.Sub.Data.AttachmentLink.ZIP\n*/\n/*\n\nLike Buttons\n\nThis buttons are used to rate the videos and download the attachments.\n\nMarkup:\n<ul class=\"ul_none flex flex_row lowercase flex flex_row gap_2\">\n    <li class=\"br_solid br_black-3 br_radius br_1 h:bg_black-3\">\n        <a class=\"p-y_3 p-x_4 \" href=\"#\"><i class=\"fal fa-thumbs-up\"></i></a>\n    </li>\n    <li class=\"br_solid br_black-3 br_radius br_1 h:bg_black-3\">\n        <a class=\"p-y_3 p-x_4 \" href=\"#\"><i class=\"fal fa-thumbs-down\"></i></a>\n    </li>\n    <li class=\"br_solid br_black-3 br_radius br_1 h:bg_black-3 m-l_auto\">\n        <a class=\"p-y_3 p-x_4 \" href=\"#\"><i class=\"fal fa-paperclip\"></i> Attachments</a>\n    </li>\n</ul>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.ActionButtons.LikeAndAttachments\n*/\n/*\n\nBreadcrumb First Item\n\nThe not first nor last item in the breadcrumb.\n\nMarkup:\n<li class=\"flex flex_row flex_none h:c_primary lh_2 m-b_1 relative\">\n    <i class=\"fal fa-home fa-fw flex_none self_center c_primary font-size_up \"></i>\n    <a href=\"../home\" class=\"inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap\" title=\"navigate to home page\">\n        <span class=\"display_none flex_auto inline:md self_center m-l_3\">Home</span>\n    </a>\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight:0\n\nStyleguide Sub.Component.Navigation.Breadcrumb.FirstItem\n*/\n/*\n\nBreadcrumb Not-First Item\n\nThe not first nor last item in the breadcrumb.\n\nSearch - Search Page\nSession Name - Session Page\n\nMarkup:\n<li class=\"flex flex_row flex_auto flex_50 h:c_primary lh_2 m-b_1 overflow_hidden relative\">\n    <i class=\"fal fa-chevron-left fa-fw m-x_3 flex_none self_center c_primary font-size_down\"></i>\n    <a href=\"../watching\" class=\"inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap\"  title=\"navigate to X Page\">\n        <span class=\" flex_auto self_center\">Page Type Label</span>\n        <span class=\" flex_auto self_center display_inline:md display_none\">{{modifier_class}}</span>\n    </a>\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight:0\n\nStyleguide Sub.Component.Navigation.Breadcrumb.NotFirstItem\n*/\n/*\n\nBreadcrumb Last Item\n\nThe last Item in the Breadcrumb doesn't include a link to the page and is decorated as highlighted.\n\nSearch - Search Page\nSession Name - Session Page\n\nMarkup:\n<li class=\"flex flex_row flex_auto flex_50 lh_2 m-b_1 overflow_hidden relative c_black-7\">\n    <i class=\"fal fa-chevron-left c_primary-n2 m-x_3 self_center font-size_down\"></i>\n    <div class=\"flex flex_row flex_nowrap overflow_ellipsis nowrap\">\n        <span class=\" flex_auto self_center\">Page Type Label</span>\n        <span class=\" flex_auto self_center display_inline:md display_none font_medium\">{{modifier_class}}</span>\n    </div>\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight:0\n\nStyleguide Sub.Component.Navigation.Breadcrumb.LastItem\n*/\n/*\n\nCredit Chiclets Horizontal\n\nHorizontal list of credit chiclets.\n\nMarkup:\n<ul class=\"flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase\">\n    <li class=\"lh_0 flex_none\">\n        {{> 'Sub.Credit' modifier_class='CME' }}\n    </li>\n    <li class=\"lh_0 flex_none\">\n        {{> 'Sub.Credit' modifier_class='CNE' }}\n    </li>\n    <li class=\"lh_0 flex_none\">\n        {{> 'Sub.Credit' modifier_class='AAPA' }}\n    </li>\n</ul>\n\nMarkupWrapperClasses: \n\nSubComponents:\nSub.Credit - Credit Chiclet\n\nWeight:0\n\nStyleguide Sub.Credit.Chiclets.Horizontal\n*/\n/*\nAuxiliary Data\n\nDescription: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.\n\nMarkup:\n<aside class=\"{{ modifier_class }}\">    \n    {{> \"Sub.FacultyList.AuxSession\"  modifier_class=\"\"}}\n    <h4 class=\"font-size_up c_black-6 font_medium capitalize\">\n        <i class=\"fas fa-file-certificate p-r_3\"></i> Credits\n    </h4>\n    <div class=\"p-y_3 {{> 'Sub.ClassList.Border.PrimaryTop'}} font-size_down-1\">\n        {{> \"Sub.Credit.Chiclets.Horizontal\" }}\n    </div>\n    <h4 class=\"font-size_up  c_black-6 font_medium\">\n        <i class=\"fas fa-tag p-r_3\"></i>\n        category\n    </h4>\n    <div class=\"{{> 'Sub.ClassList.Border.PrimaryTop'}} font-size_down\">\n        {{> \"Sub.Tags.Category\" }}\n    </div>\n    <h4 class=\"font-size_up  c_black-6 font_medium\">\n        <i class=\"fas fa-tags p-r_3\"></i> tags\n    </h4>\n    <div class=\"{{> 'Sub.ClassList.Border.PrimaryTop'}} font-size_down\">\n        {{> \"Sub.Tags.Filter\" }}\n    </div>\n</aside>\n\nSubComponents:\nSub.Credits.NonAccredited - Non Accredited\nSub.FacultyList.AuxSession - Session Faculty Lists\nSub.Credit.Chiclets.Horizontal - Credit Chiclets Horizontal\nSub.Tags.Category - Category\nSub.Tags.Filter - Tags\n\nClassList:\nSub.ClassList.Border.PrimaryTop - Border Primary Top\n\nWeight:0\n\nStyleguide Sub.Player.AuxData\n*/\n/*\nCategory Tag\n\nCategory Tags are singular tags that divide content.  An item can only have a single tag from a category group. \n\nMarkup:\n<ul class=\"ul_inline-comma\">\n  <li>Channel 1</li>\n  <li>{{>\"Sub.Data.Agenda.ChannelName\"}}</li>\n</ul>\n\n\nWeight:0\n\nStyleguide Sub.Tags.Category\n\n*/\n/*\nFilter Tags\n\nFilter Tags are decorative tags that are used to filter content. Many tags from a single group can be applied to a single item.\n\nMarkup:\n<ul class=\"ul_inline-comma\">\n    <li>Tag Name 1</li>\n    <li>Daugherty - Larkin</li>\n    <li>relationships</li>  \n    <li>web-readiness</li>\n</ul>\n\n\nWeight:0\n\nStyleguide Sub.Tags.Filter\n\n*/\n/*\n\nFooter Logo\n\nThe ACC Logo in the footer.\n\nMarkup:\n<div id=\"logo\" class=\"bg_white br_1 br_black-1 br_round br-br_radius br-tl_radius  br_solid flex flex_none flex_row items_center justify_center  shadow_bevel-light {{> 'Sub.ClassList.Inset.padding.up-1'}} {{ modifier_class}} \">\n    <h2 class=\"logo_condensed w_100 max-w_20\">American College of Cardiology</h2>\n</div>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Footer.Logo\n*/\n/*\n\nLegal RoadBlock Sub Components\n\nThe legal roadblock is a page that stops the user when they haven't accepted the terms of use or any other legal agreements needed for the use of the product.\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Legal\n*/\n/*\n\nLegal Content Block\n\nA legal block will block a user from the program if they user has not signed it.  If there is more then one user block all must be accepted before the user can proceed.\n\nMarkup:\n<article class=\"isolation_isolate p_1 p-b_4 relative\">\n    <nav class=\"r_0 sticky t_0 z_1\">\n        <div class=\"absolute flex flex_nowrap flex_row gap-x_3 r_4\">\n            <!--  Helper Jump links -->\n            <a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2\" href=\"#TopAgreement1\">\n                <span><i class=\"fas fa-arrow-up p-r_2\"></i>top</span>\n            </a>\n            <a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2\" href=\"#Agreement1\">\n                <span><i class=\"fas fa-arrow-down p-r_2\"></i>scroll down</span>\n            </a>\n            <!--  Helper Jump links -->\n        </div>\n    </nav>\n    <header class=\"bg_white p-t_0 p-b_3 relative z_3\">\n        <h2 class=\"bg_white m-t_n2 m_0 {{> 'Sub.ClassList.Vertical.padding.up-1'}}\">ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement </h2>\n    </header>\n    <main class=\"z_0 isolation_isolate {{> 'Sub.ClassList.Vertical.padding.up-1'}} {{> 'Sub.ClassList.Border.PrimaryTop' }}\">\n    <!---  Agreement HTML START -->\n        <p class=\"font-size_up\">The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the \"Agreement\") between the American College of Cardiology Foundation (\"ACCF\") and You and your agents (\"You\" or “Your”) for the use of the ACC Anywhere 2022 (the \"Product”).    </p><p class=\"font-size_up\">\n            By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product. </p>\n        <p class=\"font-size_up\"><a href=\"#\" class=\"c_accent-n2 font_bold font_ui link\" target=\"_blank\">Click to Read Full Terms of Service.</a></p>\n            <p class=\"\">I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.</p>\n            <!---  Agreement HTML END -->\n    </main>\n</article>\n\nMarkupWrapperClasses: \n\nClassList:\nSub.ClassList.Vertical.padding.up-1 - Vertical Padding Up 1\nSub.ClassList.Border.PrimaryTop - Border Primary Top\n\nWeight:0\n\nStyleguide Sub.Legal.ContentBlock\n*/\n/*\n\nLegal Attestation Statement\n\nThis statement is used to attest that the user has read and accepted the legal agreement. This follows all Legal Content Blocks. Clicking the button will flip the `btn-secondary` state to 'btn-sucess active'\n\n.btn-success.active - the accepted state\n\nMarkup:\n<footer id=\"Agreement1\">\n    <div class=\"bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase\">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>\n    <button class=\"btn btn-secondary {{ modifier_class }} c_white h:undecorated float_right\"><i class=\"fas fa-check display_none a:inline-block\"></i> I agree</button>\n</footer>\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Legal.AgreeButton\n*/\n/*\n\nSearch Filter Rail\n\nThe filter box on the search page.\n\nMarkup:\n<div id=\"filterZone\" class=\"{aspect_1_1:md} {nav-mined} nav-maxed self_start bg_black-3 br_1 br_black-2 br_radius br_solid flex_auto p_2 p_3:md  shadow_emboss-light transition_3 flex flex_column {{modifier_class}}\">\n\t<nav id=\"FilterNavContainer\" class=\"flex_auto overflow_hidden self_stretch font_4:lg font_3:md font_2 font_display font_display\">\n\t\t<ul class=\"flex flex_column:md flex_row gap_3 justify_start:md ul_none w_100 w_auto:md\">\n\t\t\t<li class=\"a:bg_primary a:c_white a:shadow_overlap-light {aspect_1_1:md} br_radius c_white-8 flex_none grid h:bg_black-7 h:c_white h:shadow_overlap-light nav-item p_0:md p_3\">\n\t\t\t\t<a class=\"c_inherit-all h:undecorated p_3 lh_1 m-x_n1\">\n\t\t\t\t\t<i class=\"far fa-filter p-x_2:md p-y_3 p-y_0:md\"></i>\n\t\t\t\t\t<span class=\"font-size_down label lh_0 lowercase self_center font_medium {display_none:md}\">Filter</span>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</nav>\n\t<ul id=\"filterFacets\" class=\"ul_none font_n1 {display_none} opacity_none transition_3 min-h_30:md\">\n\t\t{{> 'Sub.Search.Faceted.TypeAhead' modifier_class=\"Filter1\"}}\n\t\t{{> 'Sub.Search.FacetedPrimary' modifier_class=\"Filter2\"}}\n\t\t{{> 'Sub.Search.Faceted' modifier_class=\"Filter3\"}}\n\t</ul>\n\t<script>\n\t\tlet filterZone = document.getElementById(\"filterZone\");\n\t\tlet filterZoneNav = filterZone.querySelector(\"nav\");\n\t\tlet filterFacets = filterZone.querySelector(\"#filterFacets\");\n\t\tlet filterZoneExpanded = true;\n\t\tfilterZoneNav.addEventListener(\"click\", function () {\n\t\t\tif (filterZoneExpanded) {\n\t\t\t\tfilterFacets.classList.toggle(\"opacity_0\");\n\t\t\t\tfilterFacets.classList.toggle(\"opacity_none\");\n\t\t\t\tsetTimeout(function () {\n\t\t\t\t\tfilterFacets.classList.toggle(\"{display_none}\");\n\t\t\t\t\tfilterFacets.classList.toggle(\"display_none\");\n\t\t\t\t\tfilterFacets.classList.toggle(\"min-h_0:md\");\n\t\t\t\t\tfilterFacets.classList.toggle(\"min-h_30:md\");\n\t\t\t\t\tfilterZone.classList.remove(\"{aspect_1_1:md}\", \"{nav-mined}\", \"nav-maxed\");\n\t\t\t\t\tfilterZone.classList.add(\"aspect_1_1:md\", \"nav-mined\", \"{nav-maxed}\");\n\t\t\t\t\tfilterZoneNav.querySelector(\"span.label\").classList.toggle(\"{display_none:md}\");\n\t\t\t\t\tfilterZoneNav.querySelector(\"span.label\").classList.toggle(\"display_none:md\");\n\t\t\t\t\tfilterZoneExpanded = false;\n\t\t\t\t}, 300);\n\t\t\t\treturn;\n\t\t\t} else {\n\t\t\t\tfilterZone.classList.add(\"{aspect_1_1:md}\", \"{nav-mined}\", \"nav-maxed\");\n\t\t\t\tfilterZone.classList.remove(\"aspect_1_1:md\", \"nav-mined\", \"{nav-maxed}\");\n\t\t\t\tfilterFacets.classList.toggle(\"min-h_0:md\");\n\t\t\t\tfilterFacets.classList.toggle(\"min-h_30:md\");\n\t\t\t\tfilterFacets.classList.toggle(\"{display_none}\");\n\t\t\t\tfilterFacets.classList.toggle(\"display_none\");\n\t\t\t\tsetTimeout(function () {\n\t\t\t\t\tfilterFacets.classList.toggle(\"opacity_0\");\n\t\t\t\t\tfilterFacets.classList.toggle(\"opacity_none\");\n\t\t\t\t\tfilterZoneNav.querySelector(\"span.label\").classList.toggle(\"{display_none:md}\");\n\t\t\t\t\tfilterZoneNav.querySelector(\"span.label\").classList.toggle(\"display_none:md\");\n\t\t\t\t\tfilterZoneExpanded = true;\n\t\t\t\t}, 300);\n\t\t\t\treturn;\n\t\t\t}\n\t\t});\n\t</script>\n</div>\n\nMarkupWrapperClasses: \n\n\nWeight: -1000\n\nStyleguide Sub.Search.FilterRail\n*/\n/*\n\nYoutube Embed Playlist\n\nMarkup:\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/videoseries?list=PLCROrnGF2SYByKd5KHoqjRZXM4hwlHgjH\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.YoutubeEmbedPlaylist\n*/\n.jump-buttons_top {\n  top: 3.5rem;\n}\n@media only screen and (width > 1024px) {\n  .jump-buttons_top {\n    top: 0;\n  }\n}\n\n/*\n\nLayouts\n\nThis app design is based on levels of inset and overlaps in grid areas.\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts\n*/\n/*\n\nBase Grid Areas\n\nThe library base is a grid system that is used for the library page.\n\nMarkup:\n<div class=\"BODY_TAG-stand-in grid:md flex flex_column {{> \"Sub.ClassList.Body\"}}\">\t\n\t<div class=\"page-wrapper grid {{> \"Sub.ClassList.Page\"}}\">\t\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t<div class=\"grid-area_menuArea\">{{> \"Page.Layouts.GridFiller\"  modifier_class=\"M\"}}</div>\n\t\t\t<header class=\"grid-area_headerArea\">{{> \"Page.Layouts.GridFiller\"  modifier_class=\"BreadCrumb\"}}</header>\n\t\t\t<section class=\"grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md\">\n\t\t\t\t<aside class=\"grid-area_filterArea col-end_filterArea order_last order_unset:md\">\n\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Filter\"}}\n\t\t\t\t</aside>\n\t\t\t\t<div class=\"grid-area_contentArea grid:md flex flex_column columns_5 gap_4\">\n\t\t\t\t\t<div class=\"col-start_1 col-end_1\">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 1\"}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-start_2 col-end_2 \">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 2\"}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-start_3 col-end_3\">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 3\"}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-start_4 col-end_4\">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 4\"}}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-start_5 col-end_5\">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 5\"}}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t<div class=\"col-start col-end\">{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Footer\"}}</div>\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Page.Layouts.PageGrid\n*/\n.grid-template_page {\n  grid-template-columns: 4rem 1fr;\n  grid-template-rows: auto 1fr auto;\n  grid-template-areas: \"menuArea headerArea\" \"menuArea mainArea\" \"menuArea footerArea\";\n}\n\n.grid-template_filterAndContent {\n  grid-template-columns: auto 1fr;\n  grid-template-rows: 1fr;\n  grid-template-areas: \"filterArea contentArea\";\n}\n\n.grid-area_headerArea {\n  grid-area: headerArea;\n}\n\n.grid-area_menuArea {\n  grid-area: menuArea;\n}\n\n.grid-area_mainArea {\n  grid-area: mainArea;\n}\n\n.grid-area_footerArea {\n  grid-area: footerArea;\n}\n\n.grid-area_filterArea {\n  grid-area: filterArea;\n}\n\n.grid-area_contentArea {\n  grid-area: contentArea;\n}\n\n/*\n\nPages\n\nMost of the pages in the design don't display correctly. in this styleguide because the the design is calculated off of the whole viewport.\n\nMarkupWrapperClasses: \n\nWeight: -100\n\nStyleguide Page.Pages\n*/\n/*\n\nSub Page No Filter\n\nThe sub pages have a common layouts.\n\nMarkup:\n<div class=\"BODY_TAG-stand-in grid {{> \"Sub.ClassList.Body\"}}\">\t\n\t<div class=\"page-wrapper grid {{> \"Sub.ClassList.Page\"}}\">\t\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> \"Component.Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"Component.Navigation.Breadcrumb\"}}\n\t\t\t<section class=\"grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md font_1:lg font_0\">\n\t\t\t\t<div class=\"grid:md flex flex_column columns_5 gap_4 col-start col-end\">\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> \"Component.Navigation.Footer.Links\" modifier_class=\"col-start col-end_4\" }}\n\t\t\t\t{{> \"Sub.Footer.Logo\"  modifier_class=\"col-start_4 col-end\" }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n\nWeight:0\n\nStyleguide Page.Pages.NoFilter\n*/\n/*\n\nSearch Page\n\nThe sub pages have a common layouts.\n\nMarkup:\n<div class=\"BODY_TAG-stand-in grid {{> \"Sub.ClassList.Body\"}}\">\t\n\t<div class=\"page-wrapper grid {{> \"Sub.ClassList.Page\"}}\">\t\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> \"Component.Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"Component.Navigation.Breadcrumb\"}}\n\t\t\t<section class=\"grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md font_1:lg font_0\">\n\t\t\t\t{{> \"Sub.Search.FilterRail\"  modifier_class=\"grid-area_filterArea order_last order_unset:md\"}}\n\t\t\t\t<div class=\"grid-area_contentArea row-start_1\" id=\"SearchBarTop\"> \n\t\t\t\t\t{{> \"Sub.Search.Bar\"  }}\n\t\t\t\t\t<div class=\"{{> 'Sub.ClassList.Vertical.padding.up-1' }}\">\n\t\t\t\t\t\t{{> \"Sub.Search.ResultOverview\"}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"{{> \"Sub.ClassList.Inset.down-1\"}} {{> 'Sub.ClassList.Inset.padding' }} \">\n\t\t\t\t\t<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\t\t\t\t\t\t<ul class=\"flex_column flex_row:md  nav\">\n\t\t\t\t\t\t\t{{> \"Sub.Component.Structures.Tabs.Tab.LinkActive\" }}\n\t\t\t\t\t\t\t{{> \"Sub.Component.Structures.Tabs.Tab.Link\" }}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t\t<div class=\"tab-content\" id=\"nav-tabContent\">\n\t\t\t\t\t\t<div class=\"tab-pane fade show active\" id=\"ActiveLink\" role=\"tabpanel\" aria-labelledby=\"ActiveLink\">\n\t\t\t\t\t\t\t<ul class=\"ul_none flex flex_column gap_3 gap_4:lg {{> 'Sub.ClassList.Vertical.padding.up-1' }}\">\n\t\t\t\t\t\t\t\t<li class=\"\">{{> \"Program.Session.Home\"  modifier_class=\"Arteriosclerosis Electrocardiographic Arrhythmia Electrocardiographic Electrocardiogram Electrocardiogram Side Effect Arrhythmia Clinical \" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\">{{> \"Program.Session.Home\"  modifier_class=\"Myocardial Valvular Arrhythmia Arteriosclerosis \" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\">{{> \"Program.Session.Home\"  modifier_class=\"Valvular Cardiovascular \" }}</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t<div class=\"\"><button class=\"block btn btn-outline-secondary btn-sm m-b_3 m_auto p-x_5\">Load More</button></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"tab-pane fade\" id=\"BasicLink\" role=\"tabpanel\" aria-labelledby=\"BasicLink\">\n\t\t\t\t\t\t\t<ul class=\"ul_none flex flex_column gap_3 gap_4:lg {{> 'Sub.ClassList.Vertical.padding.up-1' }}\">\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"\" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"Side Effect Valvular Heart Disease Arteriosclerosis Valvular \" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"Myocardial \" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"Myocardial Clinical Blood Vessel Side Effect \" }}</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t<div class=\"\"><button class=\"block btn btn-outline-secondary btn-sm m-b_3 m_auto p-x_5\">Load More</button></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> \"Component.Navigation.Footer.Links\" modifier_class=\"col-start col-end_4\" }}\n\t\t\t\t{{> \"Sub.Footer.Logo\"  modifier_class=\"col-start_4 col-end\" }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\nSubComponents:\nComponent.Navigation.Breadcrumb -  Breadcrumb Bar\n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n\nWeight:0\n\nStyleguide Page.Pages.Search\n*/\n/*\n\nSession Data Page\n\nThe sub pages have a common layouts.\n\nMarkup:\n<div class=\"BODY_TAG-stand-in grid:md {{> 'Sub.ClassList.Body'}}\">\n\t<div class=\"page-wrapper grid:md {{> 'Sub.ClassList.Page'}}\">\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> 'Component.Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}\n\t\t\t{{> 'Component.Navigation.Breadcrumb'}}\n\t\t\t<section class=\"flex flex_column font_0 font_1:lg gap_4 grid-area_mainArea columns_6 columns_5:lg grid:md p-y_0:md p-y_3\">\n\t\t\t\t<div class=\"col-start col-end_3:lg col-end_4 flex flex_column gap_4 row-start_1\">\n\t\t\t\t\t<section class=\"{{>'Sub.ClassList.Inset.up-1'}}\">\n\t\t\t\t\t\t<div class=\"flex flex_row font_ui justify_start relative w_100\">\n\t\t\t\t\t\t<main class=\"flex flex_auto flex_column font_0 font_1:md font_2:lg isolation_isolate justify_between relative w_100 {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t\t<h1 class=\"c_primary c_primary-n3 font-size_up-2 font_display font_regular lh_1 m_0\"> {{> 'Sub.Data.Session.Title'}} Electrocardiogram Blood Vessel Arteriosclerosis Electrocardiogram Blood Vessel Electrocardiogram Myocardial Pharmacologic Valvular Heart Disease </h1>\n\t\t\t\t\t\t\t</main>\t\n\t\t\t\t\t\t\t<aside class=\"flex_none m-t_n2 m-t_n2:md m-t_n3:lg p-x_3:md\">\n\t\t\t\t\t\t\t\t<ul class=\"flex flex_column flex_wrap gap_2 justify_start self_center ul_none uppercase p-x_3\">\n\t\t\t\t\t\t\t\t\t<li class=\"flex_auto\">\n\t\t\t\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.Favorite' }}\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</aside>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<nav class=\"{{>'Sub.ClassList.Inset.padding.up-3'}} font_2:lg font_1\">\n\t\t\t\t\t\t\t<h3 class=\"c_black-8\">How did you like this session?</h3>\n\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.LikeAndAttachments' }}\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t\t<section class=\"font_0 m_3 {{>'Sub.ClassList.Inset.down-1'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t\t{{> 'Sub.Section.h3' modifier_class='session details'}} \n\t\t\t\t\t\t\t{{> 'Sub.Player.AuxData'}}\n\t\t\t\t\t\t</section>\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"col-end col-start_3:lg col-start_4 row-start_1\">\n\t\t\t\t\t<section class=\"{{>'Sub.ClassList.Inset.up'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t<div class=\"flex flex_row items_center\">\n\t\t\t\t\t\t<span class=\"c_black-4 font_1 font_2:md font_3:lg font_display font_regular lh_1 m-b_3 m-b_4:lg m-t_3 p-l_3 p-r_4 self_end\"><i class=\"fa-list-alt fas font-size_up-2\"></i></span>\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class='presentation playlist'}}</div>\n\t\t\t\t\t\t<div class=\"font_0 font_1:lg relative isolation_isolate\">\n\t\t\t\t\t\t\t<ul class=\"flex flex_column justify_stretch gap_4 ul_none\">\n\t\t\t\t\t\t\t\t{{> \"Program.Presentation.List\"}}\n\t\t\t\t\t\t\t\t{{> \"Program.Presentation.List\"}}\n\t\t\t\t\t\t\t\t{{> \"Program.Presentation.List\"}}\n\t\t\t\t\t\t\t\t{{> \"Program.Presentation.List\"}}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> \"Component.Navigation.Footer.Links\" modifier_class=\"col-start\n\t\t\t\tcol-end_4\" }} {{> \"Sub.Footer.Logo\"\n\t\t\t\tmodifier_class=\"col-start_4 col-end\" }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n\nWeight:0\n\nStyleguide Page.Pages.Session\n*/\n/*\n\nPresentation Player\n\nThe sub pages have a common layouts.\n\nMarkup:\n<div class=\"BODY_TAG-stand-in grid:md {{> 'Sub.ClassList.Body'}}\">\n\t<div class=\"page-wrapper grid:md {{> 'Sub.ClassList.Page'}}\">\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> 'Component.Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}\n\t\t\t{{> 'Component.Navigation.Breadcrumb'}}\n\t\t\t<section class=\"flex flex_column font_0 font_1:lg gap_4 grid-area_mainArea columns_6 columns_5:lg grid:md p-y_0:md p-y_3\">\n\t\t\t\t<div class=\"col-start col-end_4:lg col-end flex flex_column gap_4 row-start_1\">\n\t\t\t\t\t<section class=\"{{>'Sub.ClassList.Inset.up-1'}}\">\n\t\t\t\t\t\t<div class=\"flex flex_row font_ui justify_start relative w_100\">\n\t\t\t\t\t\t<main class=\"flex flex_auto flex_column font_0 font_1:md font_2:lg isolation_isolate justify_between relative w_100 {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t\t<h1 class=\"c_black-5 font-size_down-1 font_medium font_ui lh_1 m-b_2 m-t_2 m_0\">{{> 'Sub.Data.Session.Title'}} Electrocardiographic </h1>\n\t\t\t\t\t\t\t<h2 class=\"c_primary c_primary-n3 font-size_up-2 font_display font_regular lh_1 m_0\"> {{> 'Sub.Data.Presentation.Title'}} Clinical  </h2>\n\t\t\t\t\t\t\t</main>\t\n\t\t\t\t\t\t\t<aside class=\"flex_none m-t_n2 m-t_n2:md m-t_n3:lg p-x_3:md\">\n\t\t\t\t\t\t\t\t<ul class=\"flex flex_column flex_wrap gap_2 justify_start self_center ul_none uppercase p-x_3\">\n\t\t\t\t\t\t\t\t\t<li class=\"flex_auto\">\n\t\t\t\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.Favorite' }}\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</aside>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"player hd full flex_auto w_100 p_4:lg p_3\">\n\t\t\t\t\t\t\t<div class=\"bg_acc aspect_16x9 c_white text_center  justify_center flex items_center\">VIDEO EMBED</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<nav class=\"{{>'Sub.ClassList.Inset.padding.up-3'}} font_2:lg font_1\">\n\t\t\t\t\t\t\t{{> 'Sub.Search.TimeMarkers'}}\n\t\t\t\t\t\t\t<h3 class=\"c_black-8\">How did you like this presentation?</h3>\n\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.LikeAndAttachments' }}\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"col-end col-start_4:lg col-start flex flex_column flex_row:md flex_column:lg gap_4\">\n\t\t\t\t\t<section class=\"flex_auto flex_50:md  flex_auto:lg flex_none:lg font_0 {{>'Sub.ClassList.Inset.up'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class='presentation details'}}\n\t\t\t\t\t\t{{> 'Sub.Player.AuxData'}}\n\t\t\t\t\t</section>\t\n\t\t\t\t\t<section class=\"flex_auto flex_50:md  flex_auto:lg flex_none:lg  font_0 {{>'Sub.ClassList.Inset.up'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class='session details'}}\n\t\t\t\t\t\t<div class=\"p-y_3 br-t_1 br_black-2 br_solid font-size_down\">\n\t\t\t\t\t\t\t{{> \"Sub.FacultyList.AuxSession\"  modifier_class=\"\"}}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<section class=\"{{>'Sub.ClassList.Inset.down-1'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t\t<div class=\"flex flex_row items_center\">\n\t\t\t\t\t\t\t<span class=\"c_black-4 font_0 font_1:md font_2:lg font_display font_regular lh_1 m-b_3 m-b_4:lg m-t_3 p-l_3 p-r_4 self_end\"><i class=\"fa-list-alt fas font-size_up-2\"></i></span>\n\t\t\t\t\t\t\t{{> 'Sub.Section.h3' modifier_class='presentation playlist'}}</div>\n\t\t\t\t\t\t\t<div class=\"font_n2 font_n1:lg relative isolation_isolate\">\n\t\t\t\t\t\t\t\t<ul class=\"flex flex_column justify_stretch gap_3 ul_none\">\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.Condensed\" modifier_class=\"Electrocardiogram Pericardial Cardiovascular Cardiovascular Cardiovascular Arteriosclerosis Pericardial \"}}\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.CondensedPlaying\" modifier_class=\"Side Effect Blood Vessel Chest Pain Myocardial Side Effect Arteriosclerosis Arteriosclerosis Clinical \"}}\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.Condensed\" modifier_class=\"\"}}\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.Condensed\" modifier_class=\"Pharmacologic Blood Vessel Electrocardiogram Pericardial Pharmacologic Clinical Arrhythmia Pharmacologic Electrocardiogram \"}}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</section>\n\t\t\t\t\t</section>\t\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> \"Component.Navigation.Footer.Links\" modifier_class=\"col-start\n\t\t\t\tcol-end_4\" }} {{> \"Sub.Footer.Logo\"\n\t\t\t\tmodifier_class=\"col-start_4 col-end\" }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n\nWeight:0\n\nStyleguide Page.Pages.Presentation\n*/\n/*\n\nCredit Page\n\nCredits Pages\n\nMarkup:\n<a class=\"link\" href=\"https://acc-style.github.io/PrototypingACCorg/library/credits/\">LINK TO PROTOTYPE FOR THIS PAGE</a>\n\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n\nWeight:1000\n\nStyleguide Page.Pages.Credit\n*/\n/*\n\nLegal Roadblock\n\nA roadblock page that forces users to log in to view and agree to the legal terms of the product.\n\nMarkup:\n<div class=\"BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100\">\n\t<div class=\"bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light\">\n\t\t<div class=\"bg_black-2 br_radius\">\n\t\t\t<section class=\"reading-typography inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_5:lg p_4 flex flex_column gap_3\">\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"relative z_0 br_radius overflow_hidden \">\n\t\t\t\t\t\t<picture class=\"w_100 \">\n\t\t\t\t\t\t\t<source class=\"w_100\" srcset=\" https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg\" media=\"(min-width: 400px)\">\n\t\t\t\t\t\t\t<img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg\" class=\"w_100\" alt=\"\">\n\t\t\t\t\t\t</picture>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center\">\n\t\t\t\t\t\t<h1 class=\"c_primary font_regular font_display\">Legal Agreements</h1>\n\t\t\t\t\t\t<p class=\"font-size_up font_bold\"> Please agree to all the legal agreements. </p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative \" id=\"TopAgreement1\">\n\t\t\t\t\t<div class=\"relative isolation_isolate\">\n\t\t\t\t\t\t<div class=\"sticky t_0 r_0 z_1\">\n\t\t\t\t\t\t\t<div class=\"absolute r_4 t_0 flex flex_row flex_nowrap gap-x_3\">\n\t\t\t\t\t\t\t\t<!--  Helper Jump links -->\n\t\t\t\t\t\t\t\t<a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#TopAgreement1\">\n\t\t\t\t\t\t\t\t\t<span><i class=\"fas fa-arrow-up p-r_2\"></i>top</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t<a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#Agreement1\">\n\t\t\t\t\t\t\t\t\t<span><i class=\"fas fa-arrow-down p-r_2\"></i>scroll down</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t<!--  Helper Jump links -->\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"bg_white br-b_1 br_primary br_solid m-t_n2 p-t_0 relative z_3\">\n\t\t\t\t\t\t\t<h2>ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement </h2>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<main class=\"z_0 isolation_isolate\">\n\t\t\t\t\t\t\t<p class=\"font-size_up\">The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the \"Agreement\") between the American College of Cardiology Foundation (\"ACCF\") and You and your agents (\"You\" or “Your”) for the use of the ACC Anywhere 2022 (the \"Product”).    </p><p class=\"font-size_up\">\n\t\t\t\t\t\t\t\tBy clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product. </p>\n\t\t\t\t\t\t\t<p class=\"font-size_up\"><a href=\"#\" class=\"c_accent-n2 font_bold font_ui link\" target=\"_blank\">Click to Read Full Terms of Service.</a></p>\n\t\t\t\t\t\t\t\t<p class=\"\">I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.</p>\n\t\t\t\t\t\t</main>\n\t\t\t\t\t</div>\n\t\t\t\t\t<footer id=\"Agreement1\">\n\t\t\t\t\t\t<div class=\"bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase\">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>\n\t\t\t\t\t\t<a href=\"#\" class=\"btn btn-success c_white h:undecorated float_right\"><i class=\"fas fa-check\"></i> I agree</a>\n\t\t\t\t\t</footer>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative isolation_isolate\" id=\"TopAgreement2\">\n\t\t\t\t\t<div class=\"relative\">\n\t\t\t\t\t\t<div class=\"sticky t_0 r_0 z_1\">\n\t\t\t\t\t\t\t<div class=\"absolute r_4 t_0 flex flex_row flex_nowrap gap-x_3\">\n\t\t\t\t\t\t\t\t<!--  Helper Jump links -->\n\t\t\t\t\t\t\t\t<a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#TopAgreement2\">\n\t\t\t\t\t\t\t\t\t<span><i class=\"fas fa-arrow-up p-r_2\"></i>top</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t<a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#Agreement2\">\n\t\t\t\t\t\t\t\t\t<span><i class=\"fas fa-arrow-down p-r_2\"></i>scroll down</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t<!--  Helper Jump links -->\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"bg_white br-b_1 br_primary br_solid m-t_n2 p-t_0 relative z_3\">\n\t\t\t\t\t\t\t<h2>GDPR, Cookies and Privacy</h2>\n\t\t\t\t\t\t\t<p class=\"font-size_up\"> Iure ut ratione magnam similique delectus deserunt occaecati.</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<main class=\"z_0 isolation_isolate\">\n\t\t\t\t\t\t\t<p> Alias nulla qui eos fuga eos eligendi aut tempora. Nisi dicta aut non totam illo consequuntur. Aut aut voluptas est aspernatur placeat distinctio similique dolore laboriosam. Iure velit doloremque dolorum maiores praesentium. Animi exercitationem reiciendis incidunt rerum. Quam consequatur maiores officiis sit enim quidem.Libero dolores aspernatur consequatur labore consequatur sint sint atque. Quo commodi quod repellendus laborum natus amet. Enim aliquam sunt. Nesciunt repellat provident mollitia. Quis nemo modi. Unde ut nisi. Laboriosam et natus saepe a enim aut in voluptates quia. Sed libero alias voluptatum soluta accusantium nesciunt commodi. Eaque cumque quos neque cumque maiores. </p>\n\t\t\t\t\t\t</main>\n\t\t\t\t\t</div>\n\t\t\t\t\t<footer id=\"Agreement2\">\n\t\t\t\t\t\t<div class=\"bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase\">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>\n\t\t\t\t\t\t<a href=\"#\" class=\"btn btn-secondary c_white h:undecorated float_right\">I agree</a>\n\t\t\t\t\t</footer>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"inset-level_up-1 bg_white br_radius relative p_4 text_center\">\n\t\t\t\t\t<h4 class=\"font_bold c_primary-n2\"> You can continue when all legal terms are agreed to. </h4>\n\t\t\t\t\t<a href=\"#\" class=\"btn btn-disabled disabled block\">Continue</a>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</div> \n\n\nMarkupWrapperClasses:\n\nWeight:-100\n\nStyleguide Page.Pages.OUTSIDE_APP.Legal\n*/\n/*\n\nNo Access\n\nIf a user is logged in but does not have access to the page, they will be redirected to this page.\n\nMarkup:\n<div class=\"BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100\">\n\t<div class=\"bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light\">\n\t\t<div class=\"bg_black-2 br_radius\">\n\t\t\t<section class=\" inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_4:lg p_3 flex flex_column gap_4 \">\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"relative z_0 br_radius overflow_hidden reading-typography \">\n\t\t\t\t\t\t<picture class=\"w_100 \">\n\t\t\t\t\t\t\t<source class=\"w_100\" srcset=\" https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg\" media=\"(min-width: 400px)\">\n\t\t\t\t\t\t\t<img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg\" class=\"w_100\" alt=\"\">\n\t\t\t\t\t\t</picture>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center\">\n\t\t\t\t\t\t<h1 class=\"font_display font_6 c_primary m-t_4\">Sorry, but it appears this account doesn't have access to [PRODUCT NAME ShortCode]</h1>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{{> 'Sub.System.AccessTroubleShooting'}}\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</div>\n\n\nMarkupWrapperClasses:\n\nWeight:-50\n\nStyleguide Page.Pages.OUTSIDE_APP.NoAccess\n*/\n/*\n\nEMPTY OUTSIDE APP TEMPLATE\n\nThere are some pages that live outside of access to the product.  They are used to provide information to the user.  This is the template for those pages.\n\nMarkup:\n<div class=\"BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100\">\n\t<div class=\"bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light\">\n\t\t<div class=\"bg_black-2 br_radius\">\n\t\t\t<section class=\"reading-typography  inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_4:lg p_3 flex flex_column gap_4 \">\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"relative z_0 br_radius overflow_hidden \">\n\t\t\t\t\t\t<picture class=\"w_100 \">\n\t\t\t\t\t\t\t<source class=\"w_100\" srcset=\" https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg\" media=\"(min-width: 400px)\">\n\t\t\t\t\t\t\t<img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg\" class=\"w_100\" alt=\"\">\n\t\t\t\t\t\t</picture>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center\">\n\t\t\t\t\t\t<h1 class=\"c_primary font_regular font_display\">No Access</h1>\n\t\t\t\t\t\t<p class=\"font-size_up font_bold\"> We are sorry you don't seem to have access to this product.</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative \" id=\"TopAgreement1\">\n\t\t\t\t\t<!-- EMPTY  TEMPLATE SPACE FOR AGREEMENTS OR NO ACCESS. These Cards can be duplicated depending on need. -->\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</div>\n\n\nMarkupWrapperClasses:\n\nWeight:-50\n\nStyleguide Page.Pages.OUTSIDE_APP\n*/\n/*\n\nHome\n\nThe sub pages have a common layouts.\n\nMarkup:\n<div class=\"BODY_TAG-stand-in grid:md {{> 'Sub.ClassList.Body'}}\">\n\t<div class=\"page-wrapper grid:md {{> 'Sub.ClassList.Page'}}\">\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> \"Component.Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"Structures.Home.Header\" modifier_class=\"grid-area_headerArea\" }}\n\t\t\t<section class=\"grid:md flex flex_column columns_5 gap_4  grid-area_mainArea p-y_3 p-y_0:md font_1:lg font_0 w_100\">\n\t\t\t\t<div class=\"flex flex_column col-start col-end_5:lg col-end_4 font_0 font_1:lg font_ui font_regular w_100 {{> 'Sub.ClassList.Inset.up-1'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}\">\n                    {{> 'Sub.Section.h2' modifier_class='Featured' }}    \n                    {{> 'Structures.Home.Carousel'}}\n                    {{> 'Sub.Section.Footer'  modifier_class='Featured' }}\n                    {{> 'Sub.Section.h2' modifier_class='Hot Topics' }}\n                    {{> 'Structures.Home.Carousel.Empty' modifier_class='Hot Topics'}}\n                    {{> 'Sub.Section.Footer'  modifier_class='Hot Topics' }}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"flex flex_column col-start_5:lg col-end col-start_4 w_100\">\n\t\t\t\t\t<section class=\"font_0 font_1:lg font_ui font_regular flex_100 flex_auto {{> 'Sub.ClassList.Inset.up-1'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}\">\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class=\"continue watching\" }}\n\t\t\t\t\t\t<div class=\"font_n2 font_n1:lg relative isolation_isolate\">\n\t\t\t\t\t\t\t<ul class=\"flex flex_column justify_stretch gap_0 ul_none {{> 'Sub.ClassList.Inset.down-1'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}\">\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='Pericardial Myocardial Side Effect Arteriosclerosis Side Effect Arteriosclerosis '}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='Pericardial Electrocardiogram Myocardial Electrocardiogram '}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='Side Effect '}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='Blood Vessel Side Effect '}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='Arrhythmia Pericardial Pericardial Valvular Heart Disease Chest Pain Cardiovascular Blood Vessel Myocardial '}}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{{> 'Sub.Section.Footer'  modifier_class=\"continue watching\" }}\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"col-start col-end w_100\">\n\t\t\t\t\t<section class='font_0 font_1:lg font_ui font_regular flex_100 flex_auto {{> 'Sub.ClassList.Inset.up'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}'> {{> 'Sub.Section.h2' modifier_class='watch again' }}\n\t\t\t\t\t\t{{> 'Structures.Home.Carousel.Empty' modifier_class='watch again'}}\n\t\t\t\t\t\t{{> 'Sub.Section.Footer'  modifier_class='watch again' }}\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class='saved' }}\n\t\t\t\t\t\t{{> 'Structures.Home.Carousel.Empty' modifier_class='saved' }}\n\t\t\t\t\t\t{{> 'Sub.Section.Footer'  modifier_class='saved' }}\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> 'Component.Navigation.Footer.Links' modifier_class='col-start col-end_4' }}\n\t\t\t\t{{> 'Sub.Footer.Logo'  modifier_class='col-start_4 col-end' }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\n\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n\nWeight:0\n\nStyleguide Page.Pages.Home\n*/\n/*\n\nHeader\n\nHome page branding splash with ka site search. \n\nMarkup:\n<header class=\"p_3 p_0:md {{modifier_class}}\">\n    <section class=\"br_radius overflow_hidden relative z_1\">\n        <picture class=\"w_100\">\n            <source class=\"w_100\" srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1440x250.jpg\" media=\"(min-width: 1200px)\">\n            <source class=\"w_100\" srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1200x250.jpg\" media=\"(min-width: 1024px)\">\n            <source class=\"w_100\" srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_768x200.jpg\" media=\"(min-width: 768px)\">\n            <source class=\"w_100\" srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg\" media=\"(min-width: 400px)\">\n            <img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg\" class=\"w_100\" alt=\"\">\n        </picture>\n    </section>\n    <div class=\"m_auto m-t_n4 t_n4 t_n5:lg m-t_n5:lg max-w_60:lg max-w_40:md p-x_3 p-x_5:md z_2 relative\">\n        {{> \"Sub.Section.HeaderPanel\"}}\n    </div>\n</header>\n\nMarkupWrapperClasses: \n\nSubComponent: \nSub.Section.HeaderPanel - Search Bar\n\nWeight:0\n\nStyleguide Structures.Home.Header\n*/\n/*\n\nHome Search Link Inset\n\nA central interaction point for the user on the homepage. \n\nMarkup:\n<div class=\"{{> 'Sub.ClassList.Inset.up-1'}}  {{> 'Sub.ClassList.Inset.padding.up-4'}}\">\n    {{> 'Sub.Section.SearchBar' modifier_class=\"disabled\" }}\n    {{> 'Component.Navigation.Home.Utility' }} \n</div>\n\nMarkupWrapperClasses: \n\nSubComponents:\nSub.Section.SearchBar - Search Bar with `disabled` Class\nComponent.Navigation.Home.Utility - Quick Links\n\nClassList:\nSub.ClassList.Inset.up-1  - Inset up 1\nSub.ClassList.Inset.padding.up-4 - Padding up 4\n\nWeight:0\n\nStyleguide Sub.Section.HeaderPanel\n*/\n/*\n\nHome Search Bar\n\nThe Search Bar is disabled on the Home Page when there is no content in the input field.\n\n\nMarkup:\n<div class=\"input-holder flex flex_row self_end relative w_100 {{> \"Sub.ClassList.Inset.padding\"}}\">\n    <input id=\"input_uniqueTextAndButton\" name=\"input_uniqueTextAndButton\" type=\"text\" placeholder=\"Search\" class=\"br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 br-tl_square br-br_square br-r_0 font_2\"/>\n    <button  class=\"{{ modifier_class }} b_0 br-br_radius br-tr_radius br_none br_square btn btn-primary c_white ease_out f:outline_none font_2 font_regular font_ui h:br_primary-n3 h:underline inline-block r_0 t_0 text_center transition_1 undecorated w_auto\" >\n    <i class=\"fas fa-search\"></i>\n    <span class=\"inline-block:md display_none\">Search</span>\n    </button>\n</div>\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Section.SearchBar\n*/\n/*\n\nSection Footer\n\nSection footer links to the Search Collection Page.\n\nMarkup:\n<footer class=\"flex flex_row-reverse p-t_3 p-b_4\"><a href=\"#\" class=\"link self_end \">view all from &quot;{{modifier_class}}&quot; <i class=\"fal fa-chevron-circle-right m-r_3\"></i></a></footer>   \n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Section.Footer\n*/\n/*\n\nCarousel \n\nHorizontal Carousels to have discoverable areas on the home pages.\n\n\nMarkup:\n<div class=\"relative isolation_isolate overflow_hidden {{>'Sub.ClassList.Inset.margin.down-1'}}\">\n        <div id=\"slider1\" class=\" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden m-y_3 {{> 'Sub.ClassList.Inset.down-1'}} \">\n        {{> \"Program.Session.Home\"  modifier_class=\"Side Effect Arteriosclerosis Electrocardiogram Electrocardiogram Electrocardiographic Arteriosclerosis Cardiovascular \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Arteriosclerosis Pharmacologic \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Cardiovascular Pericardial Arrhythmia Chest Pain Side Effect Blood Vessel Electrocardiographic Pericardial \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Clinical Valvular Chest Pain Valvular Electrocardiographic Side Effect Arrhythmia \"}}        \n        {{> \"Program.Session.Home\"  modifier_class=\"Chest Pain Electrocardiogram \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Pharmacologic Arteriosclerosis Chest Pain Valvular Electrocardiographic Pericardial \"}}        \n        {{> \"Program.Session.Home\"  modifier_class=\"Chest Pain Chest Pain Valvular Clinical Chest Pain Myocardial Cardiovascular \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Valvular \"}}\n    </div>\n    {{> 'Sub.Carousel.CustomTools'}}\n</div>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function(event) { \n    let args ={\n        items:1,\n        mouseDrag: true,\n        slideBy: \"page\",\n        swipeAngle: false,\n        autoplay: false,\n        controls: true,\n        nav: false,\n        edgePadding: 0,\n        loop:true,\n        edgePadding:48,\n        center:false,\n        gutter:16,\n        responsive: {\n            1: {\n                items: 1\n            },\n                    768: {\n                items: 1\n            },\n            1200: {\n                items: 2\n            },\n            1400: {\n                items: 3\n            }\n        }};\n        let slider1 = tns({ container: '#slider1', controlsContainer: \"#slider1-customize-controls\", ...args });\n    });\n</script>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nSubComponents:\nProgram.Session.Home    - Session\n\nClassList:\nSub.ClassList.Inset.margin.down-1 - Margin down 1\nSub.ClassList.Inset.down-1 - Inset down 1\n\nNOTE: This design requires javascript. (tiny slider js)\n\nStyleguide Structures.Home.Carousel\n*/\n/*\n\nTinySlider.js\n\nScript tags for tinySlider\n\n\nMarkup:\n<h2> Slider CSS </h2>\n<span class=\"user-select_all\">https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css</span>\n<h2> Slider JS </h2>\n<span class=\"user-select_all\">https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js</span>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\n\nStyleguide Structures.Home.TinySlider\n*/\n/*\n\n\nCarousel Empty State\n\nThe empty state of the carousel\n\nMarkup:\n<div class=\"p-y_3 relative {{>'Sub.ClassList.Inset.margin.down-1'}}\"> \n    <div class=\"tns-outer {{> 'Sub.ClassList.Inset.down-1'}}  font_0 font_ui font_regular\" >\n        <div class=\"tns-ovh\">\n            <div class=\"tns-inner\" >\n                <div id=\"slider3\" class=\" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden  tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal\" >\n                    <div class=\"tns-item  tns-slide-active p-x_5\">\n                        <article class=\"bg_white br_1 br_black-1 br_radius br_solid flex flex_grow shadow_overlap-light w_100\">\n                            <div class=\"flex flex_row justify_start relative w_100\">\n                                <main class=\"flex flex_column flex_auto justify_between flex_auto p-l_4 p-x_4:md  p-y_3 p-y_3:lg relative w_100 isolation_isolate reading-typography\">\n                                    <h2 class=\"\">\n                                       You don't have any previously {{modifier_class}} presentations.\n                                    </h2>\n                                    <p>This collection is based off of your watching history. Come back here when you want to review or re-watch what you have previously viewed.</p>\n                                </main>\n                            </div>\n                        </article>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    {{> 'Sub.Carousel.CustomTools.Disabled' }}\n</div>\n\nMarkupWrapperClasses: \n\nSubComponents:\nSub.Carousel.CustomTools.Disabled - Disabled Navigation\n\nClassList:\nSub.ClassList.Inset.margin.down-1 - Margin down 1\nSub.ClassList.Inset.down-1 - Inset Down 1\n\nWeight: 0\n\nStyleguide Structures.Home.Carousel.Empty\n*/\n/* nav */\n.tns-nav {\n  text-align: center;\n  margin: 0.5rem 0;\n}\n.tns-nav > [aria-controls] {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 0;\n  margin: 0 0.25rem;\n  border-radius: 50%;\n  background: #ddd;\n  border: 0;\n  min-height: 0;\n  line-height: 1;\n}\n.tns-nav > .tns-nav-active {\n  background: #999;\n}\n\n.tns-item {\n  display: flex !important;\n}\n\n.tns-visually-hidden {\n  display: none;\n}\n\n/*\n\nContinue Watching\n\nShows a short list of presentations\n\ndefault\t\t - \n\nMarkup:\n    {{> 'Sub.Section.h2' modifier_class=\"continue watching\" }}\n    <div class=\"relative isolation_isolate overflow_hidden  {{> 'Sub.ClassList.Inset.down-1'}} \">\n        <div id=\"SliderContinueWatching\" class=\"flex flex_column gap_3 justify_stretch p-y_4 p-x_3 overflow_hidden m-y_3  {{> 'Sub.ClassList.Inset.down'}} \">\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"Valvular Heart Disease Side Effect Arteriosclerosis \"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"Arrhythmia Arteriosclerosis Pericardial Electrocardiogram Clinical Pericardial Valvular \"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"Cardiovascular Cardiovascular Valvular Heart Disease Myocardial Valvular Cardiovascular Pharmacologic \"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"Electrocardiogram Blood Vessel \"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"Myocardial Myocardial Pericardial Pericardial Valvular Heart Disease Side Effect \"}}\n        </div>\n        {{> 'Sub.Carousel.CustomToolsVertical'}}\n    </div>\n    <footer class=\"flex flex_row-reverse p-t_3 p-b_4\"><a href=\"#\" class=\"link self_end \">view all from &quot;{{modifier_class}}&quot; <i class=\"fal fa-chevron-circle-right m-r_3\"></i></a></footer>      \n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function(event) {   \nlet args2 ={\n    items: 1,\n    mouseDrag: true,\n    axis: \"vertical\",\n    slideBy: \"page\",\n    swipeAngle: false,\n    autoplay: false,\n    controls: true,\n    items:3,\n    nav: false,\n    edgePadding: 0,\n    loop:true,\n    edgePadding:0,\n    center:true,\n    gutter:16\n    };\n    let slider2 = tns({ container: '#SliderContinueWatching', controlsContainer: \"#slider-customize-controls-vertical\", ...args2 });\n});</script>\n\nMarkupWrapperClasses: main-area-offset p_2 p-x_5:md p-y_4:md isolation_isolate br_radius bg_white-7\n\nNOTE: container: '#SliderContinueWatching', controlsContainer: \"#slider-customize-controls-vertical\" need to be unique to the slider. \n\ncaution:  This item is not finalized and might be subject to change\n\nWeight: 0\n\n\n\nStyleguide Structures.Home.ContinuePlaying\n*/\n/*\n\nMain Nav\n\nTHe library because it is an app uses a different style of nav which is more align to streaming software.\n\n\nMarkup:\n<div style=\"height: calc(100vh - 1.5rem);\" class=\"display_none flex:md sticky t_3  {{modifier_class}}\">\n        <nav style=\"height: calc(100vh - 1.5rem); width: 35rem;\" id=\"navigation\" class=\"absolute h_100vh shadow_emboss-light filter_blur overflow_hidden br_radius bg_black-7 flex:md flex_column:md justify_between p-t_0 p-b_3 p-l_3 p-r_3 p-b_4:md p-t_4:md p-r_0:md font_4:lg font_3:md font_2 transition_3 font_display nav-mined\">\n            <ul class=\"flex flex_column:md flex_row ul_none justify_around justify_start:md gap_3 w_100 w_auto:md\">\n                <li  id=\"mainDesktopNavTouchToggle\" class=\"display_none flex:touch flex_row justify_end p-x_3 m-l_n3 \">\n                    <span class=\"aspect_1x1 bg_accent br_round c_inherit-all c_white-8 grid h:c_white justify_center p_3 self_center text_center w_auto shadow_n3\"><i class=\"block fa-chevron-circle-right fa-fw fas icon [rotate_180] self_center text-shadow_black-1 transition_2\"></i></span>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light active\">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\" href=\"../home\"><i class=\"icon fas fa-fw fa-home-heart p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 active font_n2 font_3:md font_4:lg display_none:md opacity_0\">Home</span></a>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md \" href=\"../search\"><i class=\"icon fas fa-fw fa-search p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Search</span></a>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\" href=\"../saved\"><i class=\"icon fas fa-fw fa-heart p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Saved</span></a>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\" href=\"../credits\"><i class=\"icon fas fa-fw fa-award p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Credits</span></a>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light disabled cursor_not-allowed opacity_3 \">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\" href=\"../watching\"><i class=\"icon fas fa-fw fa-play p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Watching</span></a>\n                </li>\n            </ul>\n            <ul class=\"flex_column:md flex_row ul_none justify_center gap_3 flex\">\n                <li class=\"nav-item flex_auto br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 bg_acc-n1 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light\">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\"><i class=\"icon fas fa-fw fa-sign-out-alt p-x_2 p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Log Out</span></a>\n                </li>\n            </ul>\n        </nav>\n    </div>\n    <nav id=\"navigation_mobile\" class=\"block display_none:md shadow_emboss-light filter_blur br_radius bg_black-6 p_2 sticky t_3 z_4\">\n        <ul class=\"flex flex_row ul_none justify_between\">\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light active\">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../home\"><i class=\"icon fas fa-fw fa-home-heart p-y_2 self_center\"></i><span class=\"label self_center  lowercase lh_0 active font_n2 h_1h\">Home</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../search\"><i class=\"icon fas fa-fw fa-search p-y_2 self_center\"></i><span class=\"label self_center  lowercase lh_0 font_n2 h_1h \">Search</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../saved\"><i class=\"icon fas fa-fw fa-heart p-y_2 self_center\"></i><span class=\"label self_center  lowercase lh_0 font_n2 h_1h nowrap \">Saved</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../saved\"><i class=\"icon fas fa-fw fa-award p-y_2 self_center\"></i><span class=\"label self_center  lowercase lh_0 font_n2 h_1h \">Credits</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light disabled opacity_3 cursor_not-allowed \">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../watching\"><i class=\"icon fas fa-fw fa-play p-y_2 self_center\"></i><span class=\"label self_center lowercase lh_0 font_n2 h_1h \">Watching</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 bg_acc-n1 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light\">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\"><i class=\"icon fas fa-fw fa-sign-out-alt p-y_2 self_center\"></i><span class=\"label self_center lowercase lh_0 font_n2 nowrap h_1h\">Log Out</span></a>\n            </li>\n        </ul>\n    </nav>\n    <script src=\"../js/library/library.main-nav.js\"></script>\n    <!-- These Styles are just for the styleguide and are not to be included with the pattern. -->\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: This design highly depends on Javascript.There are styles in the pattern that should be ignored because they are just to make the pattern show up correctly in documentation. https://raw.githubusercontent.com/ACC-Style/Arches/master/docs/js/library/library.main-nav.js\n\nStyleguide Component.Navigation.MainNav\n*/\n/*\n\nHome Utility Nav\n\nSmall nav under the home page to quick link users to helpful pieces of content\n\nMarkup:\n<nav class=\"utility-nav p-t_3 p-t_4:lg font_n3 font_0:md font_1:lg \">\n    <ul class=\"flex flex_row ul_none justify_center\">\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n                ><i class=\"fal fa-star  block inline:md\"></i><span class=\"display_none inline:md\"> featured</span></a\n            >\n        </li>\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n                ><i class=\"fal fa-sitemap  block inline:md\"></i><span class=\"display_none inline:md\"> hot topics</span></a\n            >\n        </li>\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1 text_center  br-l_1 br_solid br_black-4\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n            ><i class=\"fal fa-heart block inline:md\"></i><span class=\"display_none inline:md\"> saved</span></a\n        >\n        </li>\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n            ><i class=\"fal fa-play  block inline:md\"></i><span class=\"display_none inline:md\"> continue watching</span></a\n        >\n        </li>\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n            ><i class=\"fal fa-sync  block inline:md\"></i><span class=\"display_none inline:md\"> watch again </span></a\n        >\n        </li>\n    </ul>\n</nav>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\n\nStyleguide Component.Navigation.Home.Utility\n*/\n/*\n\nBreadcrumb Bar\n\nBasic Nav that helps the user orientate the context of the page.\n\nMarkup:\n<header class=\"grid-area_headerArea flex flex_row items_center justify_start flex_none z_1 {{> 'Sub.ClassList.Inset.up'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}\">\n    <nav class=\"overflow_hidden lh_0  font_ui font_2 font_regular c_black-7 {{modifier_class}}\" aria-label=\"Breadcrumb\">\n    <ol class=\"flex flex_no-wrap flex_row items_center overflow_hidden ul_none w_100 max-w_100\"> \n        {{> 'Sub.Component.Navigation.Breadcrumb.FirstItem' }}\n        {{> 'Sub.Component.Navigation.Breadcrumb.NotFirstItem' modifier_class=\"Session Shorten Name\" }}\n        {{> 'Sub.Component.Navigation.Breadcrumb.LastItem' modifier_class=\"Presentation Shorten Name\" }}\n    </ol>   \n</nav>\n</header>\n\nMarkupWrapperClasses: \n\nClassList:\nSub.ClassList.Inset.padding.up-1 - Inset Padding Up 1\nSub.ClassList.Inset.up - Inset Level Up Decoration\n\nSubComponents:\nSub.Component.Navigation.Breadcrumb.FirstItem - First item\nSub.Component.Navigation.Breadcrumb.NotFirstItem - Not first item\nSub.Component.Navigation.Breadcrumb.LastItem - Last item\n\nWeight:0\n\nStyleguide Component.Navigation.Breadcrumb\n*/\n/*\n\nFooter Links\n\n The Apps Footer. \n\n\nMarkup:\n<div id=\"subfooter\" class=\"bg_primary-1 flex_auto font_n1 z_1 br_radius texture_dust shadow_emboss-light {{> 'Sub.ClassList.Inset.padding.up-1' }} {{ modifier_class}}\">\n    <ul class=\"m_auto footer-bottom-links ul_none max-w_80\">\n        <li class=\"inline p_2\"><a href=\"//www.acc.org/footer-pages/media-center\" class=\"c_white-6 h:c_white\">Media Center</a></li>\n        <li class=\"inline p_2\"><a href=\"//www.acc.org/footer-pages/quick-start-guide\" class=\"c_white-6 h:c_white\">ACC.org Quick Start Guide</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/advertising-and-sponsorship-policy\">Advertising &amp; Sponsorship Policy</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/clinical-content-disclaimer\">Clinical Content Disclaimer</a> </li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/editorial-board\">Editorial Board</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/privacy-policy\">Privacy Policy</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/registered-user-agreement\">Registered User Agreement</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/terms-and-conditions\">Terms of Service</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/cookie-policy\">Cookie Policy</a></li>\n        <li class=\"inline p_2\"><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></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/sitemap-acc.xml\">Site Map</a> </li>\n    </ul> <!-- /footer-bottom-links -->\n</div><!-- /subfooter -->\n\nClassList:\nSub.ClassList.Inset.padding.up-1 - Inset Padding Up 1\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Component.Navigation.Footer.Links\n*/\n/*\n\nSessions - Homepage\n\nSession Designs on the home page.\n\n\nMarkup:\n<div>\n<article class=\"flex flex_grow w_100 {{> 'Sub.ClassList.Inset.up-1'}}\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100\">\n        <main\n            class=\"flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}}\">\n            <h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n                <a class=\"c_inherit-all expanded-click-area z_1\">\n                    Clinical Update for the Valvular  {{ modifier_class}} \n                </a>\n            </h2>\n            <ul\n                class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.PresentationCount'}}\n                {{> 'Sub.Sub.Data.AttachmentLink.ZIP'}}\n            </ul>\n            <ul class=\"flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase\">\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CME' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CNE' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='AAPA' }}\n                </li>\n            </ul>\n        </main>\n        <aside class=\"flex_none p-x_3:md p-b_3 absolute flex_none p-b_3 p-r_2 r_0 t_n1\">\n            <ul\n                class=\"b_3 flex flex_column flex_wrap font_n4 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center\">\n                <li class=\"flex_auto p-b_3 m-b_auto\">\n                    {{> 'Sub.ActionButtons.Favorite' }}\n                </li>\n            </ul>\n        </aside>\n    </div>\n</article>\n</div>\n\n\n\n\nMarkupWrapperClasses: \n\nData:\nSub.Data.Session.Title - Title\n\nSubComponents: \nSub.Credits - Credits\n\n\n\nWeight: 0\n\nStyleguide Program.Session.Home\n*/\n/*\n\nSessions - Homepage Version 2\n\nSession Designs on the home page.\n\n\nMarkup:\n<div>\n<article class=\"flex flex_grow w_100 {{> 'Sub.ClassList.Inset.up-1'}}\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100\">\n        <main\n            class=\"flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate gap_3 {{> 'Sub.ClassList.Inset.padding.up-3'}}\">\n            <h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n                <span class=\"aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3\" style=\"width:3.5em\">\n                    <span class=\"absolute t_n2 z_3 p-x_3 r_0\">\n                    {{> 'Sub.ActionButtons.Favorite' }}\n                    </span>\n                </span>\n                <a class=\"c_inherit-all expanded-click-area z_1 inline\">\n                    Clinical Update for the  Valvular Heart Disease Electrocardiographic Electrocardiogram Myocardial Clinical Electrocardiogram Pharmacologic Pharmacologic Cardiovascular Pharmacologic Cardiovascular Arrhythmia Valvular Side Effect  {{ modifier_class }} \n                </a>\n            </h2>\n            <ul\n                class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2 clear_both\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.PresentationCount'}}\n                {{> 'Sub.Sub.Data.AttachmentLink.ZIP'}}\n            </ul>\n            <ul class=\"flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase\">\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CME' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CNE' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='AAPA' }}\n                </li>\n            </ul>\n        </main>\n    </div>\n</article>\n</div>\n\ncaution:  This item is not finalized and might be subject to change\n\n\nMarkupWrapperClasses: \n\nData:\nSub.Data.Session.Title - Title\n\nSubComponents: \nSub.Credits - Credits\n\n\n\nWeight: 0\n\nStyleguide Program.Session.Home_v2\n*/\n/*\n\nSessions - Search\n\nSession Designs on the home page.\n\n\nMarkup:\n<div>\n<article class=\"flex flex_grow w_100 {{> 'Sub.ClassList.Inset.up-1'}}\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100\">\n        <main\n            class=\"flex flex_column gap_3 flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}}\">\n            <h2 class=\"font-size_up-1 font_display font_regular lh_1 h:underline c_primary-n3 m-t_2\">\n                <a class=\"c_inherit-all expanded-click-area z_1\">\n                    Clinical Update for the {{ modifier_class }} \n                </a>\n            </h2>\n            <ul\n                class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.PresentationCount'}}\n                 {{> 'Sub.Sub.Data.AttachmentLink.ZIP'}}\n            </ul>\n            <ul class=\"flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase\">\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CME' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CNE' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='AAPA' }}\n                </li>\n            </ul>\n        </main>\n        <aside class=\"flex_none p-x_3:md p-b_3\">\n            <ul\n                class=\"b_3 flex flex_column flex_wrap font_n3 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center\">\n                <li class=\"flex_auto p-b_3 m-b_auto\">\n                   {{> 'Sub.ActionButtons.Favorite' }}\n                </li>\n            </ul>\n        </aside>\n    </div>\n</article>\n</div>\n\n\nMarkupWrapperClasses: \n\nData:\nSub.Data.Session.Title - Title\n\nSubComponents: \nSub.Credits - Credits\n\n\n\nWeight: 0\n\nStyleguide Program.Session.Search\n*/\n/*\n\nPresentation - Home\n\nPresentation designs on the home page.\n\nMarkup:\n<div>\n\t<article class=\"flex flex_grow flex_column w_100  {{> 'Sub.ClassList.Inset.up-1'}}\">\n\t\t<div class=\"flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} \">\n\t\t\t<div class=\"font_display m-b_3 lh_2 \">\n\t\t\t\t<h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n\t\t\t\t\t<span class=\"aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3\" style=\"width:3.5em\">\n\t\t\t\t\t\t<span class=\"absolute t_n2 z_3 p-x_3 r_0\">\n\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.Favorite' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<strong class=\"block c_black-6 uppercase font_bold font-size_down lh_1 m_0 \"> {{> 'Sub.Data.Session.Title'}}</strong>\n\t\t\t\t\t<a class=\"c_inherit-all expanded-click-area z_1 inline\"> Clinical Update for the Pericardial Clinical Cardiovascular Valvular Pericardial Electrocardiogram Arteriosclerosis Pericardial Side Effect Pericardial Myocardial Pharmacologic Cardiovascular Valvular Heart Disease  {{ modifier_class }}\n\t\t\t\t\t</a>\n\t\t\t\t</h2>\n\t\t\t</div>\n\t\t\t<div class=\"c_black-8 font_copy font-size_down-1\">\n\t\t\t\t{{> 'Sub.FacultyList' }}\n\t\t\t</div>\n\t\t\t<ul class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n\t\t\t\t{{> 'Sub.Sub.Data.Duration'}}\n\t\t\t\t{{> 'Sub.Sub.Data.AttachmentLink'}}\n\t\t\t</ul>\n            {{> 'Sub.Credit.Chiclets.Horizontal'}}\n\t\t</div>\n\t\t<div class=\"{{> 'Sub.ClassList.Inset.padding'}}\">\n\t\t\t{{> 'Sub.ProgressBar' modifier_class=\"\" }}\n\t\t</div>\n\t</article>\n</div>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.ProgressBar - Progress\nSub.Credits - Credits\n\nStyleguide Program.Presentation.Home\n*/\n/*\n\nPresentation - Home Version 2\n\nPresentation designs on the home page.\n\nMarkup:\n<div>\n    <article class=\"flex flex_grow flex_column w_100  {{> 'Sub.ClassList.Inset.up-1'}}\">\n        <div class=\"flex flex_row font_ui justify_start relative w_100 gap_3\">\n            <main\n                class=\"flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} \">\n                <div class=\"font_display m-b_3 lh_2 \">\n                    <h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n\t\t\t\t\t<span class=\"aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3\" style=\"width:3.5em\">\n\t\t\t\t\t\t<span class=\"absolute t_n2 z_3 p-x_3 r_0\">\n\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.Favorite' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<strong class=\"block c_black-6 uppercase font_bold font-size_down lh_1 m_0 \"> {{> 'Sub.Data.Session.Title'}}</strong>\n\t\t\t\t\t<a class=\"c_inherit-all expanded-click-area z_1 inline\"> Clinical Update for the Valvular Heart Disease Blood Vessel Arteriosclerosis Electrocardiographic Side Effect Pericardial Electrocardiogram Valvular Heart Disease Side Effect Pharmacologic Blood Vessel Pharmacologic Electrocardiographic Chest Pain  {{ modifier_class }}\n\t\t\t\t\t</a>\n\t\t\t\t</h2>\n                </div>\n                <div class=\"c_black-8 font_copy font-size_down-1\">\n                    {{> 'Sub.FacultyList' }}\n                </div>\n                <ul class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.AttachmentLink'}}\n                </ul>\n                {{> 'Sub.Credit.Chiclets.Horizontal'}}\n            </main>\n            <aside class=\"flex_none p-x_3:md p-b_3\">\n                <ul\n                    class=\"b_3 flex flex_column flex_wrap font_n3 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center\">\n                    <li class=\"flex_auto p-b_3 m-b_auto\">\n                        {{> 'Sub.ActionButtons.Favorite' }}\n                    </li>\n                </ul>\n            </aside>\n        </div>\n        <div class=\"{{> 'Sub.ClassList.Inset.padding'}}\">\n            {{> 'Sub.ProgressBar' modifier_class=\"\" }}\n        </div>\n    </article>\n</div>\n\ncaution:  This item is not finalized and might be subject to change\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.ProgressBar - Progress\nSub.Credits - Credits\n\nStyleguide Program.Presentation.Home_V2\n*/\n/*\n\nPresentation - Search\n\nPresentation designs on the Search page.\n\nMarkup:\n<div>\n    <article class=\"flex flex_grow flex_column w_100  {{> 'Sub.ClassList.Inset.up-1'}}\">\n        <div class=\"flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} \">\n                <div class=\"font_display m-b_3 lh_2 \">\n                    <h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n                        <span class=\"aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3\" style=\"width:3.5em\">\n                            <span class=\"absolute t_n2 z_3 p-x_3 r_0\">\n                                {{> 'Sub.ActionButtons.Favorite' }}\n                            </span>\n                        </span>\n                        <strong class=\"block c_black-6 uppercase font_bold font-size_down lh_1 m_0 \"> {{> 'Sub.Data.Session.Title'}}</strong>\n                        <a class=\"c_inherit-all expanded-click-area z_1 inline\"> Clinical Update for the Arrhythmia Electrocardiographic Electrocardiogram Side Effect Chest Pain Valvular Myocardial Chest Pain Cardiovascular Myocardial Arteriosclerosis Pericardial Arteriosclerosis Clinical  {{ modifier_class }}\n                        </a>\n                    </h2>\n                </div>\n                <div class=\"c_black-8 font_copy font-size_down-1\">\n                    {{> 'Sub.FacultyList' }}\n                </div>\n                <ul class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.AttachmentLink'}}\n                </ul>\n                {{> 'Sub.Credit.Chiclets.Horizontal'}}\n        </div>\n        <div class=\"{{> 'Sub.ClassList.Inset.padding'}}\">\n            {{> 'Sub.Search.TimeMarkers' modifier_class=\"\" }}\n        </div>\n    </article>\n</div>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.Search\n*/\n/*\n\nPresentation - List\n\nPresentation designs on the Search page.\n\nMarkup:\n<div>\n    <article class=\"flex flex_grow flex_column w_100  p-x_3:lg br-t_1 br_solid br_black-3\">\n        <div class=\"flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} \">\n                <div class=\"font_display m-b_3 lh_2 \">\n                    <h2 class=\"font-size_up-1 font_display font_regular lh_1 h:underline c_primary-n3 m_0\">\n                    <a class=\"c_inherit-all expanded-click-area z_1\">\n                        Presentation of the findings {{ modifier_class}} \n                    </a>\n                    </h2>\n                </div>\n                <div class=\"c_black-8 font_copy font-size_down-1\">\n                    {{> 'Sub.FacultyList' }}\n                </div>\n                <ul class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.AttachmentLink'}}\n                </ul>\n        </div>\n        <div class=\"{{> 'Sub.ClassList.Inset.padding'}}\">\n            {{> 'Sub.Search.TimeMarkers' modifier_class=\"\" }}\n        </div>\n    </article>\n</div>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.List\n*/\n/*\n\nPresentation - Condensed\n\nPresentation designs on the Search page.\n\nMarkup:\n<article class=\"br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100 gap_3 {{> 'Sub.ClassList.Inset.padding'}} h:bg_white-8 br_radius\">\n        <main class=\"flex flex_column flex_auto gap_4 justify_between flex_auto relative w_100 isolation_isolate\">\n            <h2 class=\"font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0\">\n                <a class=\"c_inherit-all expanded-click-area z_1 h:undecorated undecorated\">\n                    Presentation of the findings {{ modifier_class }} \n                </a>\n            </h2>\n        </main>\n        <aside class=\"flex_auto flex flex_column items_center justify_center\">\n            <span class=\"font-size_down inline-block lh_0  c_black-8 text_center nowrap\">\n                <span class=\"font-size_up c_accent-n2 block \">\n                <i class=\"fal fa-clock\"></i>\n                15\n                </span>\n                minutes\n            </span>\n        </aside>\n    </div>\n</article>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.Condensed\n*/\n/*\n\nPresentation - Condensed Playing\n\nPresentation designs on the Search page.\n\nMarkup:\n<article class=\"br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100 gap_4 {{> 'Sub.ClassList.Inset.padding.up-3'}} {{> 'Sub.ClassList.Inset.up-1'}}\">\n        <main class=\"flex_auto\">\n            <h2 class=\"font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0\">\n                <a class=\"c_inherit-all expanded-click-area z_1 h:undecorated undecorated\">\n                    Presentation of the findings {{ modifier_class }} \n                </a>\n            </h2>\n        </main>\n        <aside class=\"flex_none flex flex_column items_center justify_center\">\n            <span class=\"font-size_up-2 inline-block lh_0  c_accent text_center nowrap\">\n                <i class=\"fas fa-play\"></i>\n            </span>\n        </aside>\n    </div>\n</article>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.CondensedPlaying\n*/\n/*\n\nPresentation - Condensed Playable\n\nPresentation designs on the Search page.\n\nMarkup:\n<li class=\"flex flex_row font_ui justify_between br-t_1 br-b_1  br_solid br_black-1 m-b_n1 items_center relative w_100 gap_3 {{> 'Sub.ClassList.Inset.padding'}} h:bg_white-8 br_radius relative\">\n    <h3 class=\"font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0 flex_auto\">\n        Presentation of the findings {{ modifier_class }} \n    </h3>\n    <span class=\"flex_none flex flex_column items_center justify_center \">\n        <a class=\"font-size_up-2 self_center block lh_0 c_primary br_radius aspect_1x1 text_center expanded-click-area nowrap p_4 h:bg_primary-n2 h:c_white bg_white-5 shadow_bevel-light\">\n            <i class=\"fas fa-play\"></i>\n        </a>\n    </span>\n</li>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.Condensed.Playable\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.filter_blur {\n  backdrop-filter: blur(5px);\n}\n\n.h\\:shadow_overlap-light:hover {\n  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3), 1px 5px 5px rgba(0, 0, 0, 0.01);\n}\n\n.a\\:shadow_overlap-light.active {\n  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3), 1px 5px 5px rgba(0, 0, 0, 0.01);\n}\n\n@media only screen and (min-width: 768px) {\n  .nav-maxed {\n    max-width: clamp(20em, 25rem, 100%);\n  }\n  .nav-mined {\n    max-width: 4rem;\n  }\n}\nhtml:not([data-scroll=\"0\"]) #navigation_mobile .label {\n  opacity: 0 !important;\n  height: 0;\n}\n\n.tns-holder-design {\n  width: 30%;\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: 25px;\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/** SCSS DOC: __globalshame_framework.scss **/","\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/**  ACC Brands    *********************************/\n/** SCSS DOC: __brand.library.scss **/\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: 25px;\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\n$headline-color: get-theme-color(primary, -1);\n\n\n/**  Build Comment: Overlay and alter for library 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\n\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\";@import 'recipes/base/base.page.layouts';\n@import 'recipes/virtual/data/_virtual.helper.randomWords';\n@import 'recipes/virtual/data/virtual.data';\n@import 'recipes/virtual/virtual.sub.search';\n@import 'recipes/virtual/virtual.sub.faculty';\n@import 'recipes/virtual/virtual.sub.system';\n@import 'recipes/library/index';\n\n@import 'recipes/boot/_boot.tabs';\n// data values \n\n.filter_blur {\n    backdrop-filter: blur(5px);\n}\n\n.h\\:shadow_overlap-light:hover {\n    box-shadow: 0 1px 10px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 30%), 1px 5px 5px rgb(0 0 0 / 1%);\n}\n\n.a\\:shadow_overlap-light.active {\n    box-shadow: 0 1px 10px rgb(0 0 0 / 5%), 0 2px 4px rgb(0 0 0 / 30%), 1px 5px 5px rgb(0 0 0 / 1%);\n}\n\n@media only screen and (min-width: 768px) {\n    .nav-maxed {\n        max-width: clamp(20em, 25rem, 100%);\n        \n    }\n\n    .nav-mined {\n        max-width: 4rem;\n    }\n}\n\nhtml:not([data-scroll='0']) #navigation_mobile .label {\n    opacity:0 !important;\n    height:0;\n}\n.tns-holder-design{ width:30%;}// 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/** SCSS DOC: __globalshame_framework.scss **/","/** SCSS DOC: _helpers.scss **/\n\n// @import \"fixes\";\n@import \"str-replace\";\n@import \"strip-unit\";\n@import \"class-name-constructor\";\n//@import \"clamp\";\n@import \"str-explode\";\n@import \"deep-map-check\";\n@import \"map-deep-get\";\n@import \"map-deep-set\";\n@import \"get\";\n\n@import \"make-shadow\";\n@import \"color-loop\";\n@import \"size-loop\";\n@import \"styleguide\"\n\n// Exsists in foundation\n\n\n\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 */","/* 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","@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","// 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","//\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","// 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","@use \"sass:math\";\n@use \"sass:list\";\n\n$grid-column-count: 12;\n$optimal-characters: 65;\n$active-class-name: \"is-active\" !default;\n$ms-base: 1em;\n$base-font-size: $ms-base;\n$base-font-size-rem: strip-unit($ms-base) * 1rem;\n$baseline-modifier: 1.5;\n$baseline: $baseline-modifier * $base-font-size-rem; // Unitless item * PIXEL Size / Font PIXEL Converted to REM\n// $line-height:strip-unit($baseline-modifier);\n$ms-ratio: $major-second;\n// $ms-ratio-sm: $major-second;\n// $ms-ratio-md: $minor-third;\n// $ms-ratio-lg: $fourth;\n$vertical-space: math.div($baseline-modifier * $ms-base, $ms-base) * 1rem;\n$breakpoints: (\n  xsm: 0,\n  sm: 460px,\n  md: 768px,\n  lg: 1024px,\n  xl: 1200px,\n  xxl: 1440px,\n);\n\n$container-max-widths: (\n  sm: 540px,\n  md: 720px,\n  lg: 960px,\n  xl: 1140px,\n);\n$global-border-radius: math.div(1rem, 2) !default;\n$global-border-round: math.div(1rem, 1) !default;\n$basicSizeMultiplier: 1rem;\n$bp-label_base: \"\";\n$bp-label_small: \"\\\\3A sm\";\n$bp-label_medium: \"\\\\3A md\";\n$bp-label_large: \"\\\\3A lg\";\n$bp-label_xlarge: \"\\\\3A xl\";\n$bp-label_touch: \"\\\\3A touch\";\n$bp-label_stylus: \"\\\\3A stylus\";\n$bp-label_mouse: \"\\\\3A stylus\";\n$bp-label_empty: \"\\\\3A empty\";\n$container-breakpoints: (\n  base: (min: 0px, label: $bp-label_base),\n  sm: (min: 320px, label: $bp-label_small),\n  md: (min: 540px, label: $bp-label_medium),\n  lg: (min: 760px, label: $bp-label_large),\n  xl: (min: 980px, label: $bp-label_xlarge)\n);\n// styleguide:ignore:start\n$value-to-unit: (\n  aspect-ratio: (\n    8x10: list.slash(8, 10),\n    1x1: list.slash(1, 1),\n    4x3: list.slash(4, 3),\n    3x4: list.slash(3, 4),\n    3x2: list.slash(3, 2),\n    2x3: list.slash(2, 3),\n    16x9: list.slash(16, 9),\n    21x9: list.slash(21, 9),\n    2x1: list.slash(2, 1),\n    3x1: list.slash(3, 1),\n    4x1: list.slash(4, 1),\n    5x1: list.slash(5, 1),\n    leaderboard: list.slash(728, 90),\n    skyscraper: list.slash(160, 600),\n    bigbox: list.slash(300, 250),\n    billboard: list.slash(970, 250),\n  ),\n  size: (\n    0: 0,\n    n6: -4 * $basicSizeMultiplier,\n    n5: -2 * $basicSizeMultiplier,\n    n4: -1 * $basicSizeMultiplier,\n    n3: -0.5 * $basicSizeMultiplier,\n    n2: -0.25 * $basicSizeMultiplier,\n    n1: -1px,\n    1: 1px,\n    2: 0.25 * $basicSizeMultiplier,\n    3: 0.5 * $basicSizeMultiplier,\n    4: 1 * $basicSizeMultiplier,\n    5: 2 * $basicSizeMultiplier,\n    6: 4 * $basicSizeMultiplier,\n    auto: auto,\n    unset: unset,\n  ),\n  sizeAlt: (\n    100: 100%,\n    auto: auto,\n    unset: unset,\n    0: 0,\n    n6: -4 * $basicSizeMultiplier,\n    n5: -2 * $basicSizeMultiplier,\n    n4: -1 * $basicSizeMultiplier,\n    n3: -0.5 * $basicSizeMultiplier,\n    n2: -0.25 * $basicSizeMultiplier,\n    n1: -1px,\n    1: 1px,\n    2: 0.25 * $basicSizeMultiplier,\n    3: 0.5 * $basicSizeMultiplier,\n    4: 1 * $basicSizeMultiplier,\n    5: 2 * $basicSizeMultiplier,\n    6: 2 * $basicSizeMultiplier,\n  ),\n  size-positive: (\n    0: 0,\n    1: 1px,\n    2: 0.25 * $basicSizeMultiplier,\n    3: 0.5 * $basicSizeMultiplier,\n    4: 1 * $basicSizeMultiplier,\n    5: 2 * $basicSizeMultiplier,\n    6: 4 * $basicSizeMultiplier,\n  ),\n  unitless: (\n    0: 0,\n    n5: -5,\n    n4: -4,\n    n3: -3,\n    n2: -2,\n    n1: -1,\n    1: 1,\n    2: 2,\n    3: 3,\n    4: 4,\n    5: 5,\n  ),\n  unitless-positive: (\n    0: 0,\n    1: 1,\n    2: 2,\n    3: 3,\n    4: 4,\n    5: 5,\n  ),\n  line-height: (\n    0: 1,\n    1: 1.125,\n    2: 1.35,\n    3: 1.6,\n    4: 1.8,\n    5: 2.5,\n  ),\n  opacity: (\n    0: 0,\n    _01: 0.005,\n    _05: 0.0075,\n    1: 0.025,\n    2: 0.1,\n    3: 0.25,\n    4: 0.38,\n    5: 0.5,\n    6: 0.62,\n    7: 0.75,\n    8: 0.9,\n    9: 0.975,\n    none: 1,\n  ),\n  percent-10: (\n    0: 0%,\n    1: 5%,\n    2: 12%,\n    3: 25%,\n    4: 38%,\n    5: 50%,\n    6: 62%,\n    7: 75%,\n    8: 88%,\n    9: 95%,\n    none: 100%,\n  ),\n  percent-positive: (\n    0: 0%,\n    1: 10%,\n    2: 25%,\n    3: 50%,\n    4: 75%,\n    5: 90%,\n  ),\n  percent-negative: (\n    n1: 15%,\n    n2: 30%,\n    n3: 50%,\n    n4: 70%,\n    n5: 85%,\n  ),\n  width-percent: (\n    auto: auto,\n    0: 0%,\n    5: 5%,\n    10: 10%,\n    15: 15%,\n    20: 20%,\n    25: 25%,\n    30: 30%,\n    35: 35%,\n    40: 40%,\n    45: 45%,\n    50: 50%,\n    55: 55%,\n    60: 60%,\n    65: 65%,\n    70: 70%,\n    75: 75%,\n    80: 80%,\n    85: 85%,\n    90: 90%,\n    95: 95%,\n    100: 100%,\n    third-1: 33%,\n    third-2: 66%,\n  ),\n  height-viewport: (\n    auto: auto,\n    0: 0vh,\n    10: 10vh,\n    20: 20vh,\n    30: 30vh,\n    40: 40vh,\n    50: 50vh,\n    60: 60vh,\n    70: 70vh,\n    80: 80vh,\n    90: 90vh,\n    100: 100vh,\n    100p: 100%,\n    unset: unset,\n    0lh: 1em,\n    1lh: 1.25em,\n    2lh: 1.45em,\n    3lh: 1.65em,\n    4lh: 1.75em,\n    5lh: 2.5em,\n    1xlh: $vertical-space,\n    2xlh: $vertical-space * 2,\n    3xlh: $vertical-space * 3,\n    4xlh: $vertical-space * 4,\n    5xlh: $vertical-space * 5,\n  ),\n  blend: (\n    normal: normal,\n    multiply: multiply,\n    screen: screen,\n    overlay: overlay,\n    darken: darken,\n    lighten: lighten,\n    color-dodge: color-dodge,\n    color-burn: color-burn,\n    hard-light: hard-light,\n    soft-light: soft-light,\n    difference: difference,\n    exclusion: exclusion,\n    hue: hue,\n    saturation: saturation,\n    color: color,\n    luminosity: luminosity,\n    initial: initial,\n    inherit: inherit,\n    unset: unset,\n  ),\n  percent: (\n    0: 0%,\n    1: 15%,\n    2: 37%,\n    3: 60%,\n    4: 78%,\n    5: 90%,\n    n1: -10%,\n    n2: -25%,\n    n3: -45%,\n    n4: -58%,\n    n5: -75%,\n  ),\n  radius: (\n    square: 0px,\n    radius: $global-border-radius,\n    round: $global-border-round,\n    rounder: $global-border-round * 1.5,\n    circle: 100%,\n  ),\n  float: (\n    unset: unset,\n    none: none,\n    left: left,\n    right: right,\n  ),\n  text-align: (\n    unset: unset,\n    center: center,\n    left: left,\n    right: right,\n    start: start,\n    end: end,\n  ),\n  background-position: (\n    left: left center,\n    right: right center,\n    top: center top,\n    bottom: center bottom,\n    center: center center,\n  ),\n  border-style: (\n    none: none,\n    solid: solid,\n    dashed: dashed,\n    dotted: dotted,\n  ),\n  font-weight: (\n    display: (\n      light: 300,\n      regular: 400,\n      medium: 500,\n      bold: 700,\n      xbold: 900,\n    ),\n    copy: (\n      light: 100,\n      regular: 400,\n      medium: 500,\n      bold: 700,\n      xbold: 900,\n    ),\n    ui: (\n      light: 100,\n      regular: 400,\n      medium: 500,\n      bold: 700,\n      xbold: 900,\n    ),\n  ),\n  font-size: (\n    0: strip-unit(ms(0)) * 1rem,\n    1: strip-unit(ms(1)) * 1rem,\n    2: strip-unit(ms(2)) * 1rem,\n    3: strip-unit(ms(3)) * 1rem,\n    4: strip-unit(ms(4)) * 1rem,\n    5: strip-unit(ms(5)) * 1rem,\n    6: strip-unit(ms(6)) * 1rem,\n    7: strip-unit(ms(7)) * 1rem,\n    8: strip-unit(ms(8)) * 1rem,\n    9: strip-unit(ms(9)) * 1rem,\n    10: strip-unit(ms(10)) * 1rem,\n    n1: strip-unit(ms(-1)) * 1rem,\n    n2: strip-unit(ms(-2)) * 1rem,\n    n3: strip-unit(ms(-3)) * 1rem,\n    n4: strip-unit(ms(-4)) * 1rem,\n    n5: strip-unit(ms(-5)) * 1rem,\n  ),\n  display: (\n    block: block,\n    inline: inline,\n    inline-block: inline-block,\n    table-cell: table-cell,\n    table: table,\n    table-row: table-row,\n    table-row-group: table-row-group,\n    flex: flex,\n    inline-flex: inline-flex,\n    grid: grid,\n    display_contents: contents,\n    display_none: none,\n  ),\n  flex: (\n    none: none,\n    grow: 1 0 auto,\n    shrink: 0 1 auto,\n    auto: 1 1 auto,\n  ),\n  flex-direction: (\n    row: row,\n    column: column,\n    row-reverse: row-reverse,\n    column-reverse: column-reverse,\n  ),\n  flex-wrap: (\n    wrap-reverse: wrap-reverse,\n    wrap: wrap,\n    nowrap: nowrap,\n  ),\n  align: (\n    start: start,\n    end: end,\n    center: center,\n    between: space-between,\n    around: space-around,\n    stretch: stretch,\n    baseline: baseline,\n  ),\n  content-align: (\n    start: start,\n    end: end,\n    center: center,\n    between: space-between,\n    around: space-around,\n    evenly: space-evenly,\n    stretch: stretch,\n    baseline: baseline,\n  ),\n  wrap: (\n    wrap: wrap,\n    wrap-reverse: wrap-reverse,\n    nowrap: nowrap,\n  ),\n  hover: (\n    dark: -30%,\n    light: 30%,\n  ),\n  transition: (\n    0: all 0s,\n    1: all 0.1s,\n    2: all 0.2s,\n    3: all 0.35s,\n    4: all 0.5s,\n    5: all 1s,\n  ),\n  ease: (\n    linear: linear,\n    out-in: ease,\n    in: ease-in,\n    out: ease-out,\n    in-out: ease-in-out,\n  ),\n  transform-origin: (\n    tl: left top,\n    rt: right top,\n    c: center center,\n    lb: left bottom,\n    rb: right bottom,\n    t: center top,\n    b: center bottom,\n    r: right center,\n    l: left center,\n  ),\n  scale: (\n    X-0: scaleX(0),\n    X-100: scaleX(1),\n    Y-0: scaleY(0),\n    Y-100: scaleY(1),\n    0: scale(0, 0),\n    100: scale(1, 1),\n  ),\n  active: (\n    dark: 100%,\n    light: 100%,\n  ),\n  border-width: (\n    0: 0px,\n    1: 1px,\n    2: 3px,\n    3: 0.25rem,\n    4: 0.5rem,\n    5: 1rem,\n  ),\n  font-family: (\n    accent: #{\"Roboto Slab\",\n    \"Times New Roman\",\n    \"Lucida Bright\",\n    Georgia,\n    serif},\n    display: #{\"Maven Pro\",\n    \"Open Sans\",\n    \"Helvetica Neue\",\n    \"Helvetica\",\n    Helvetica,\n    Arial,\n    sans-serif},\n    copy: #{\"Open Sans\",\n    \"Helvetica Neue\",\n    \"Helvetica\",\n    Helvetica,\n    Arial,\n    sans-serif},\n    ui: #{\"Open Sans\",\n    -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif},\n    mono: #{SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    \"Liberation Mono\",\n    \"Courier New\",\n    monospace},\n  ),\n  grid: (\n    1: math.div(1, 12) * 100%,\n    2: math.div(1, 6) * 100%,\n    3: 1 * 0.25 * 100%,\n    4: math.div(1, 3) * 100%,\n    5: math.div(5, 12) * 100%,\n    6: 1 * 0.5 * 100%,\n    7: math.div(7, 12) * 100%,\n    8: math.div(2, 3) * 100%,\n    9: 3 * 0.25 * 100%,\n    10: math.div(5, 6) * 100%,\n    11: math.div(11, 12) * 100%,\n    12: 1 * 100%,\n  ),\n  grid-template-columns: (\n    1: [start] var(--col-1, 1fr) [end],\n    2: [start] var(--col-1, 1fr) var(--col-2, 1fr) [end],\n    3: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr) [end],\n    4: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr)\n      var(--col-4, 1fr) [end],\n    5: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr)\n      var(--col-4, 1fr) var(--col-5, 1fr) [end],\n    6: [start] var(--col-1, 1fr) var(--col-2, 1fr) var(--col-3, 1fr)\n      var(--col-4, 1fr) var(--col-5, 1fr) var(--col-6, 1fr) [end],\n  ),\n  grid-template-rows: (\n    1: [start] var(--row-1, 1fr) [end],\n    2: [start] var(--row-1, 1fr) var(--row-2, 1fr) [end],\n    3: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr) [end],\n    4: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr)\n      var(--row-4, 1fr) [end],\n    5: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr)\n      var(--row-4, 1fr) var(--row-5, 1fr) [end],\n    6: [start] var(--row-1, 1fr) var(--row-2, 1fr) var(--row-3, 1fr)\n      var(--row-4, 1fr) var(--row-5, 1fr) var(--row-6, 1fr) [end],\n  ),\n  grid-position: (\n    start: start,\n    1: 1,\n    2: 2,\n    3: 3,\n    4: 4,\n    5: 5,\n    6: 6,\n    7: 7,\n    n1: -1,\n    n2: -2,\n    n3: -3,\n    n4: -4,\n    n5: -5,\n    n6: -6,\n    n7: -7,\n    end: end,\n  ),\n  order: (\n    start: -999,\n    1: 1,\n    2: 2,\n    3: 3,\n    4: 4,\n    5: 5,\n    6: 6,\n    7: 7,\n    n1: -1,\n    n2: -2,\n    n3: -3,\n    n4: -4,\n    n5: -5,\n    n6: -6,\n    n7: -7,\n    end: 999,\n  ),\n  max-width: (\n    0: 0,\n    5: 5rem,\n    10: 10rem,\n    15: 15rem,\n    20: 20rem,\n    25: 25rem,\n    30: 30rem,\n    35: 35rem,\n    40: 40rem,\n    45: 45rem,\n    50: 50rem,\n    55: 55rem,\n    60: 60rem,\n    65: 65rem,\n    70: 70rem,\n    75: 75rem,\n    80: 80rem,\n    85: 85rem,\n    90: 90rem,\n    95: 95rem,\n    unset: unset\n  ),\n  position: (\n    initial: initial,\n    inherit: inherit,\n    relative: relative,\n    absolute: absolute,\n    fixed: fixed,\n    sticky: sticky,\n    unset: unset,\n  ),\n  word-break: (\n    break-all: break-all,\n    word-break: word-break,\n    keep-all: keep-all,\n    normal: normal,\n    unset: unset,\n  ),\n  list-type: (\n    none: none,\n    bullet: disc,\n    circle: circle,\n    square: square,\n    lowercase: lower-alpha,\n    uppercase: upper-alpha,\n  ),\n  text-shadow: (\n    none: 0px 0px 0px rgba(0, 0, 0, 0),\n    white-1: 2px 2px 2px rgba(255, 255, 255, 0.25),\n    black-1: 2px 2px 2px rgba(0, 0, 0, 0.25),\n    white-n1: -1px -1px 2px rgba(255, 255, 255, 0.5),\n    black-n1: -1px -1px 2px rgba(0, 0, 0, 0.5),\n  ),\n  text-indent: (\n    0: 0,\n    n1: -1 * $base-font-size,\n    n2: -2 * $base-font-size,\n    n3: -3 * $base-font-size,\n    1: 1 * $base-font-size,\n    2: 2 * $base-font-size,\n    3: 3 * $base-font-size,\n  ),\n  z-index: (\n    0: -1,\n    1: 1,\n    2: 100,\n    3: 1000,\n    4: 5000,\n    5: 9999,\n  ),\n  isolation: (\n    isolate: isolate,\n    auto: auto,\n    inherit: inherit,\n    revert: revert,\n    unset: unset,\n  ),\n  shadow: (\n    0: make-shadow(3, \"drop\", #000, 0.4),\n    1: make-shadow(1, \"drop\", #000, 0.1),\n    2: make-shadow(2, \"drop\", #000, 0.2),\n    3: make-shadow(3, \"drop\", #000, 0.3),\n    4: make-shadow(3.5, \"drop\", #000, 0.5),\n    5: make-shadow(4, \"drop\", #000, 0.65),\n    n1: make-shadow(1, \"inset\", #000, 0.1),\n    n2: make-shadow(2, \"inset\", #000, 0.2),\n    n3: make-shadow(3, \"inset\", #000, 0.3),\n    n4: make-shadow(3.5, \"inset\", #000, 0.5),\n    n5: make-shadow(4, \"inset\", #000, 0.65),\n  ),\n  rich-shadow: (\n    emboss-light:\n      \"inset 1px 1px 2px 0px rgba(0 0 0 / 6%),inset 2px 2px 3px 0px rgba(18 56 136/4.5%),inset -2px -2px 3px 0px rgba(145 112 19/ 4.5%)\",\n    emboss-bold:\n      \"inset 0 0 4px 0 rgba(0 0 0/17%), inset 0 0 6px 0 rgba(0 0 0/17%), inset 2px 5px 4px 2px rgba(0 0 0/5%), inset 3px 2px 5px 4px rgb(0 0 0/4%)\",\n    bevel-light:\n      \"-2px -2px 3px 0px rgba(255 255 255/ 7% ), -1px -1px 2px 0px rgba(240 194 67/ 5% ), 2px 3px 5px 0px rgba(0 0 0 / 7%), 0 6px 9px 0px rgba(18 56 136 / 5%), 0 8px 9px 0px rgba(0 0 0 / 2%)  \",\n    bevel-bold:\n      \"1px 2.5px 4.5px rgba(0 0 0 /17%), -2px -2px 3px 0px rgba(255 255 255/ 14% ), -1px -1px 2px 0px rgba(240 194 67/ 5% ), 2px 3px 5px 0px rgba(0 0 0 / 12%), 0 6px 9px 0px rgba(18 56 136 / 9%), 0 16px 9px 0px rgba(0 0 0 / 6%)\",\n    overlap-light:\n      \"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    overlap-bold:\n      \"-1px -2px 4px rgba(0 0 0 / 11% ), 0 4px 10px rgba(0 0 0 / 10%), 2px 2px 4px rgba(0 0 0 /24%), 2px 5px 10px rgba(18 56 136 / 10%)\",\n  ),\n);\n\n$style-definition: (\n  justify-content: (\n    short-name: \".justify\",\n    css-style: (\n      \"justify-content\",\n    ),\n    long-name: \".justify-content\",\n    unit: \"content-align\",\n  ),\n  justify-items: (\n    short-name: \".justify-items\",\n    css-style: (\n      \"justify-items\",\n    ),\n    long-name: \".justify-items\",\n    unit: \"align\",\n  ),\n  justify-self: (\n    short-name: \".self-justify\",\n    css-style: (\n      \"justify-self\",\n    ),\n    long-name: \".self-justify\",\n    unit: \"align\",\n  ),\n  align-content: (\n    short-name: \".content\",\n    css-style: (\n      \"align-content\",\n    ),\n    long-name: \".align-contents\",\n    unit: \"content-align\",\n  ),\n  align-items: (\n    short-name: \".items\",\n    css-style: (\n      \"align-items\",\n    ),\n    long-name: \".align-items\",\n    unit: \"align\",\n  ),\n  align-self: (\n    short-name: \".self\",\n    css-style: (\n      \"align-self\",\n    ),\n    long-name: \".align-self\",\n    unit: \"align\",\n  ),\n  aspect-ratio: (\n    short-name: \".aspect\",\n    css-style: (\n      \"aspect-ratio\",\n    ),\n    long-name: \".aspect-ratio\",\n    unit: \"aspect-ratio\",\n  ),\n  background-color: (\n    short-name: \".bg\",\n    css-style: (\n      \"background-color\",\n    ),\n    long-name: \".back\",\n    unit: \"percent\",\n  ),\n  background-position: (\n    short-name: \".bg\",\n    css-style: (\n      \"background-position\",\n    ),\n    long-name: \".back\",\n    unit: \"background-position\",\n  ),\n  border-color: (\n    short-name: \".br\",\n    css-style: (\n      \"border-color\",\n    ),\n    long-name: \".border\",\n    unit: \"percent\",\n  ),\n  border-style: (\n    short-name: \".br\",\n    css-style: (\n      \"border-style\",\n    ),\n    long-name: \".border\",\n    unit: \"border-style\",\n  ),\n  border-width: (\n    short-name: \".br\",\n    css-style: (\n      \"border-width\",\n    ),\n    long-name: \".border-width\",\n    unit: border-width,\n  ),\n  border-top-width: (\n    short-name: \".br-t\",\n    css-style: (\n      \"border-top-width\",\n    ),\n    long-name: \".border-top-width\",\n    unit: border-width,\n  ),\n  border-right-width: (\n    short-name: \".br-r\",\n    css-style: (\n      \"border-right-width\",\n    ),\n    long-name: \".border-right-width\",\n    unit: border-width,\n  ),\n  border-left-width: (\n    short-name: \".br-l\",\n    css-style: (\n      \"border-left-width\",\n    ),\n    long-name: \".border-left-width\",\n    unit: border-width,\n  ),\n  border-bottom-width: (\n    short-name: \".br-b\",\n    css-style: (\n      \"border-bottom-width\",\n    ),\n    long-name: \".border-bottom-width\",\n    unit: border-width,\n  ),\n  border-radius: (\n    short-name: \".br\",\n    css-style: (\n      \"border-radius\",\n    ),\n    long-name: \".radius\",\n    unit: \"radius\",\n  ),\n  border-top-right-radius: (\n    short-name: \".br-tr\",\n    css-style: (\n      \"border-top-right-radius\",\n    ),\n    long-name: \".border-top-right-radius\",\n    unit: \"radius\",\n  ),\n  border-top-left-radius: (\n    short-name: \".br-tl\",\n    css-style: (\n      \"border-top-left-radius\",\n    ),\n    long-name: \".border-top-left-radius\",\n    unit: \"radius\",\n  ),\n  border-bottom-right-radius: (\n    short-name: \".br-br\",\n    css-style: (\n      \"border-bottom-right-radius\",\n    ),\n    long-name: \".border-bottom-right-radius\",\n    unit: \"radius\",\n  ),\n  border-bottom-left-radius: (\n    short-name: \".br-bl\",\n    css-style: (\n      \"border-bottom-left-radius\",\n    ),\n    long-name: \".border-bottom-left-radius\",\n    unit: \"radius\",\n  ),\n  box-shadow: (\n    short-name: \".shadow\",\n    css-style: (\n      \"box-shadow\",\n    ),\n    long-name: \".box-shadow\",\n    unit: \"shadow\",\n  ),\n  rich-shadow: (\n    short-name: \".shadow\",\n    css-style: (\n      \"box-shadow\",\n    ),\n    long-name: \".rich-shadow\",\n    unit: \"rich-shadow\",\n  ),\n  display: (\n    short-name: \".\",\n    css-style: (\n      \"display\",\n    ),\n    long-name: \".display\",\n    unit: \"display\",\n  ),\n  text-align: (\n    short-name: \".text\",\n    css-style: (\n      \"text-align\",\n    ),\n    long-name: \".text-align\",\n    unit: \"text-align\",\n  ),\n  color: (\n    short-name: \".c\",\n    css-style: (\n      \"color\",\n    ),\n    long-name: \".color\",\n    unit: \"percent\",\n  ),\n  float: (\n    short-name: \".float\",\n    css-style: (\n      \"float\",\n    ),\n    long-name: \".float\",\n    unit: \"float\",\n  ),\n  font-family: (\n    short-name: \".font\",\n    css-style: (\n      \"font-family\",\n    ),\n    long-name: \".font-family\",\n    unit: \"font-family\",\n  ),\n  font-size: (\n    short-name: \".font\",\n    css-style: (\n      \"font-size\",\n    ),\n    long-name: \".font-size\",\n    unit: \"font-size\",\n  ),\n  font-weight: (\n    short-name: \".font\",\n    css-style: (\n      \"font-weight\",\n    ),\n    long-name: \".font-weight\",\n    unit: \"font-weight\",\n  ),\n  hover: (\n    short-name: \"h\\\\3A \",\n    css-style: (\n      \"background-color\",\n    ),\n    long-name: \"hover\\\\3A \",\n    unit: \"hover\",\n  ),\n  is-active: (\n    short-name: \"#{$active-class-name}>.a\\\\3A \",\n    css-style: (\n      \"background-color\",\n    ),\n    long-name: \"#{$active-class-name}>.#{$active-class-name}\\\\3A \",\n    unit: \"active\",\n  ),\n  is-active-self: (\n    short-name: \"#{$active-class-name}.a\\\\3A \",\n    css-style: (\n      \"background-color\",\n    ),\n    long-name: \"#{$active-class-name}.#{$active-class-name}\\\\3A \",\n    unit: \"active\",\n  ),\n  active: (\n    short-name: \"a\\\\3A \",\n    css-style: (\n      \"background-color\",\n    ),\n    long-name: \"active\\:a \",\n    unit: \"active\",\n  ),\n  visited: (\n    short-name: \"v\\\\3A \",\n    css-style: (\n      \"background-color\",\n    ),\n    long-name: \"visited\\\\3A \",\n    unit: \"visited\",\n  ),\n  hover-bg: (\n    short-name: \".h\\\\3A bg\",\n    css-style: (\n      \"background-color\",\n    ),\n    long-name: \".hover\\\\3A back\",\n    unit: \"hover\",\n  ),\n  hover-text: (\n    short-name: \".h\\\\3A c\",\n    css-style: (\n      \"color\",\n    ),\n    long-name: \".hover\\\\3A color\",\n    unit: \"hover\",\n  ),\n  bottom: (\n    short-name: \".b\",\n    css-style: (\n      \"bottom\",\n    ),\n    long-name: \".bottom\",\n    unit: \"sizeAlt\",\n  ),\n  left: (\n    short-name: \".l\",\n    css-style: (\n      \"left\",\n    ),\n    long-name: \".left\",\n    unit: \"sizeAlt\",\n  ),\n  list-type: (\n    short-name: \".ul\",\n    css-style: (\n      \"list-style-type\",\n    ),\n    long-name: \".list\",\n    unit: \"list-type\",\n  ),\n  margin: (\n    short-name: \".m\",\n    css-style: (\n      \"margin\",\n    ),\n    long-name: \".margin\",\n    unit: \"size\",\n  ),\n  margin-horizontal: (\n    short-name: \".m-x\",\n    css-style: (\n      \"margin-right\",\n      \"margin-left\",\n    ),\n    long-name: \".margin-x\",\n    unit: \"size\",\n  ),\n  margin-vertical: (\n    short-name: \".m-y\",\n    css-style: (\n      \"margin-top\",\n      \"margin-bottom\",\n    ),\n    long-name: \".margin-y\",\n    unit: \"size\",\n  ),\n  margin-top: (\n    short-name: \".m-t\",\n    css-style: (\n      \"margin-top\",\n    ),\n    long-name: \".margin-top\",\n    unit: \"size\",\n  ),\n  margin-bottom: (\n    short-name: \".m-b\",\n    css-style: (\n      \"margin-bottom\",\n    ),\n    long-name: \".margin-bottom\",\n    unit: \"size\",\n  ),\n  margin-left: (\n    short-name: \".m-l\",\n    css-style: (\n      \"margin-left\",\n    ),\n    long-name: \".margin-left\",\n    unit: \"size\",\n  ),\n  margin-right: (\n    short-name: \".m-r\",\n    css-style: (\n      \"margin-right\",\n    ),\n    long-name: \".margin-right\",\n    unit: \"size\",\n  ),\n  grid-gap: (\n    short-name: \".gap\",\n    css-style: (\n      \"grid-gap\",\n    ),\n    long-name: \".grid-gap\",\n    unit: \"size-positive\",\n  ),\n  grid-column-gap: (\n    short-name: \".gap-x\",\n    css-style: (\n      \"grid-column-gap\",\n    ),\n    long-name: \".columnsumn-gap\",\n    unit: \"size-positive\",\n  ),\n  grid-row-gap: (\n    short-name: \".gap-y\",\n    css-style: (\n      \"grid-row-gap\",\n    ),\n    long-name: \".rows-gap\",\n    unit: \"size-positive\",\n  ),\n  padding: (\n    short-name: \".p\",\n    css-style: (\n      \"padding\",\n    ),\n    long-name: \".padding\",\n    unit: \"size-positive\",\n  ),\n  padding-horizontal: (\n    short-name: \".p-x\",\n    css-style: (\n      \"padding-left\",\n      \"padding-right\",\n    ),\n    long-name: \".padding-x\",\n    unit: \"size-positive\",\n  ),\n  padding-vertical: (\n    short-name: \".p-y\",\n    css-style: (\n      \"padding-bottom\",\n      \"padding-top\",\n    ),\n    long-name: \".padding-y\",\n    unit: \"size-positive\",\n  ),\n  padding-top: (\n    short-name: \".p-t\",\n    css-style: (\n      \"padding-top\",\n    ),\n    long-name: \".padding-top\",\n    unit: \"size-positive\",\n  ),\n  padding-bottom: (\n    short-name: \".p-b\",\n    css-style: (\n      \"padding-bottom\",\n    ),\n    long-name: \".padding-bottom\",\n    unit: \"size-positive\",\n  ),\n  padding-left: (\n    short-name: \".p-l\",\n    css-style: (\n      \"padding-left\",\n    ),\n    long-name: \".padding-left\",\n    unit: \"size-positive\",\n  ),\n  padding-right: (\n    short-name: \".p-r\",\n    css-style: (\n      \"padding-right\",\n    ),\n    long-name: \".padding-right\",\n    unit: \"size-positive\",\n  ),\n  line-height: (\n    short-name: \".lh\",\n    css-style: (\n      \"line-height\",\n    ),\n    long-name: \".line-height\",\n    unit: \"line-height\",\n  ),\n  opacity: (\n    short-name: \".opacity\",\n    css-style: (\n      \"opacity\",\n    ),\n    long-name: \".opacity\",\n    unit: \"opacity\",\n  ),\n  background-blend-mode: (\n    short-name: \".bg-blend\",\n    css-style: (\n      \"background-blend-mode\",\n      \"mix-blend-mode\",\n    ),\n    long-name: \".bg_blend\",\n    unit: \"blend\",\n  ),\n  mix-blend-mode: (\n    short-name: \".font-blend\",\n    css-style: (\n      \"mix-blend-mode\",\n    ),\n    long-name: \".font_blend\",\n    unit: \"blend\",\n  ),\n  position: (\n    short-name: \".\",\n    css-style: (\n      \"position\",\n    ),\n    long-name: \".position\",\n    unit: \"position\",\n  ),\n  background-transparent: (\n    short-name: \".bg\",\n    css-style: (\n      \"background-color\",\n    ),\n    long-name: \".back\",\n    unit: \"opacity\",\n  ),\n  border-transparent: (\n    short-name: \".br\",\n    css-style: (\n      \"border-color\",\n    ),\n    long-name: \".border\",\n    unit: \"opacity\",\n  ),\n  color-transparent: (\n    short-name: \".c\",\n    css-style: (\n      \"color\",\n    ),\n    long-name: \".color\",\n    unit: \"opacity\",\n  ),\n  right: (\n    short-name: \".r\",\n    css-style: (\n      \"right\",\n    ),\n    long-name: \".right\",\n    unit: \"sizeAlt\",\n  ),\n  top: (\n    short-name: \".t\",\n    css-style: (\n      \"top\",\n    ),\n    long-name: \".top\",\n    unit: \"sizeAlt\",\n  ),\n  inset: (\n    short-name: \".inset\",\n    css-style: (\n      \"inset\",\n    ),\n    long-name: \".inset\",\n    unit: \"sizeAlt\",\n  ),\n  text-indent: (\n    short-name: \".text-indent\",\n    css-style: (\n      \"text-indent\",\n    ),\n    long-name: \".text-indent\",\n    unit: \"text-indent\",\n  ),\n  text-shadow: (\n    short-name: \".text-shadow\",\n    css-style: (\n      \"text-shadow\",\n    ),\n    long-name: \".text-shadow\",\n    unit: \"text-shadow\",\n  ),\n  transition: (\n    short-name: \".transition\",\n    css-style: (\n      \"transition\",\n    ),\n    long-name: \".transition\",\n    unit: \"transition\",\n  ),\n  ease: (\n    short-name: \".ease\",\n    css-style: (\n      \"transition-timing-function\",\n    ),\n    long-name: \".ease\",\n    unit: \"ease\",\n  ),\n  transform-origin: (\n    short-name: \".origin\",\n    css-style: (\n      \"transform-origin\",\n    ),\n    long-name: \".transform-origin\",\n    unit: \"transform-origin\",\n  ),\n  scale: (\n    short-name: \".scale\",\n    css-style: (\n      \"transform\",\n    ),\n    long-name: \".scale\",\n    unit: \"scale\",\n  ),\n  flex: (\n    short-name: \".flex\",\n    css-style: (\n      \"flex\",\n    ),\n    long-name: \".flex\",\n    unit: \"flex\",\n  ),\n  flex-basis: (\n    short-name: \".flex\",\n    css-style: (\n      \"flex-basis\",\n    ),\n    long-name: \".flex-basis\",\n    unit: \"width-percent\",\n  ),\n  flex-direction: (\n    short-name: \".flex\",\n    css-style: (\n      \"flex-direction\",\n    ),\n    long-name: \".flex-direction\",\n    unit: \"flex-direction\",\n  ),\n  flex-wrap: (\n    short-name: \".flex\",\n    css-style: (\n      \"flex-wrap\",\n    ),\n    long-name: \".flex-wrap\",\n    unit: \"flex-wrap\",\n  ),\n  order: (\n    short-name: \".order\",\n    css-style: (\n      \"order\",\n    ),\n    long-name: \".order\",\n    unit: \"order\",\n  ),\n  height-viewport: (\n    short-name: \".h\",\n    css-style: (\n      \"height\",\n    ),\n    long-name: \".height-viewport\",\n    unit: height-viewport,\n  ),\n  min-height: (\n    short-name: \".min-h\",\n    css-style: (\n      \"min-height\",\n    ),\n    long-name: \".min-height\",\n    unit: height-viewport,\n  ),\n  width: (\n    short-name: \".w\",\n    css-style: (\n      \"width\",\n    ),\n    long-name: \".width\",\n    unit: width-percent,\n  ),\n  max-width: (\n    short-name: \".max-w\",\n    css-style: (\n      \"max-width\",\n    ),\n    long-name: \".max-width\",\n    unit: max-width,\n  ),\n  word-break: (\n    short-name: \".wb\",\n    long-name: \".word-break\",\n    css-style: (\n      \"word-break\",\n    ),\n    unit: word-break,\n  ),\n  z-index: (\n    short-name: \".z\",\n    css-style: (\n      \"z-index\",\n    ),\n    long-name: \".z-index\",\n    unit: z-index,\n  ),\n  isolation: (\n    short-name: \".isolation\",\n    css-style: (\n      \"isolation\",\n    ),\n    long-name: \".isolation\",\n    unit: isolation,\n  ),\n\n  grid-template-columns: (\n    short-name: \".columns\",\n    css-style: (\n      \"grid-template-columns\",\n    ),\n    long-name: \".grid-template-columns\",\n    unit: grid-template-columns,\n  ),\n  grid-template-rows: (\n    short-name: \".rows\",\n    css-style: (\n      \"grid-template-rows\",\n    ),\n    long-name: \".grid-template-rows\",\n    unit: grid-template-rows,\n  ),\n  grid-column-start: (\n    short-name: \".col-start\",\n    css-style: (\n      \"grid-column-start\",\n    ),\n    long-name: \".column-start\",\n    unit: grid-position,\n  ),\n  grid-row-start: (\n    short-name: \".row-start\",\n    css-style: (\n      \"grid-row-start\",\n    ),\n    long-name: \".rows-start\",\n    unit: grid-position,\n  ),\n  grid-column-end: (\n    short-name: \".col-end\",\n    css-style: (\n      \"grid-column-end\",\n    ),\n    long-name: \".column-end\",\n    unit: grid-position,\n  ),\n  grid-row-end: (\n    short-name: \".row-end\",\n    css-style: (\n      \"grid-row-end\",\n    ),\n    long-name: \".rows-end\",\n    unit: grid-position,\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","%Sub.Data.Agenda {\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\n\n%Sub.Data.Agenda.LiveTime {\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%Sub.Data.Agenda.ReleaseTime {\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%Sub.Data.Agenda.EndTime {\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%Sub.Data.Agenda.Date {\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%Sub.Data.Agenda.DateTime {\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\n%Sub.Data.Member {\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\n%Sub.Data.Member.Photo {\n}\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%Sub.Data.Member.FullName {\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%Sub.Data.Member.Location {\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%Sub.Data.Member.Title {\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%Sub.Data.Member.Institution {\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%Sub.Data.Member.InstitutionDivision {\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%Sub.Data.Member.InstitutionTitle {\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\n\n\n","%Sub.Data.Sponsor {\n}\n/*\nSponsor\n \nDescription:\nSponsor are industry that has offered money or support.\n \nWeight:0\n \nStyleguide Sub.Data.Sponsor\n*/\n\n%Sub.Data.Sponsor.Name {\n}\n/*\nName\n\nMarkup:\nLogoIpsum\n \nWeight:-100\n \nStyleguide Sub.Data.Sponsor.Name\n*/\n%Sub.Data.Sponsor.Address {\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\n%Sub.Data.Sponsor.Logo {\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\n\n%Sub.Data.Sponsor.WebAddress {\n}\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n \nWeight:25\n \nStyleguide Sub.Data.Sponsor.WebAddress\n*/\n%Sub.Data.Sponsor.WebLink {\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*/","@import \"data/__index\";\n/* Nav Recipes.00x */\n\n@import \"recipes/base/buttons\";\n\n\n/* Recipes.40 */\n@import \"recipes/base/web-footer\";\n\n/* Nav Recipes.50 */\n@import \"recipes/base/quicklinks\";\n\n/* Nav Recipes.04x */\n@import \"recipes/base/advertisement\";\n\n/* content Recipes.100 */\n\n@import \"recipes/base/social-nav\";\n@import \"recipes/base/cookie-banner\";\n\n/* content Recipes.150 */\n\n@import \"recipes/base/ordered-cards\";\n\n/* content Recipes.250 */\n\n\n@import \"recipes/sub/_index\";","/*\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\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\n\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\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*/",".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","/*\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","/*\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*/","/*\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\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\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*/","/*\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","/*\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\n600w x 300h \n\nMarkup:\nhttps://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.600x300\n\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/*\n\n1200w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.1200x300\n\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\n/*\n320w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.320x300\n\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\n/*\nAspect 21x9\n\nMarkup:\nhttps://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42\n\n\nStyleguide  Sub.Placeholder.Image.21x9\n*/\n\n/*\nAspect 16x9\n\nMarkup:\nhttps://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42\n\n\nStyleguide  Sub.Placeholder.Image.16x9\n*/\n\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/*\n\nsquare\n\nMarkup:\nhttps://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.Square\n\n*/","/*\n\nMax 20 Character\n\nMarkup:\nDi dolores (20&nbsp;Chars)\n\nStyleguide  Sub.Placeholder.Text.20ch\n\n*/\n\n/*\n\nMax 30 Character\n\nMarkup:\nCommodi dolores (30&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.30ch\n\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/*\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/*\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/*\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/*\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\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/*\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\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\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%GridList.Sub.ClassList{}\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/*\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*/","@forward \"_common\";\n@forward \"_content-list\";\n@forward \"_image-placeholder\";\n@forward \"_text-placholder\";\n@forward \"_class-list\";\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\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\n/*\nRecipe\n\nPatterns that are used through out the refactors on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe\n*/\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\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\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/*\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\n\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\n\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\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\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\n\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\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\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\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\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\n\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\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\n\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\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*/","/*\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\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\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\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\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\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\n\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\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\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*/","/*\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\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\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/*\n\nContent Filler\n\nThis is a styleguide only element to show structure edges.\n\nMarkup:\n<div class=\"h_30 c_accent-n4 font_xbold font_3 br_accent bg_accent-5 br_dashed br_1 m_3 p_5 grid items_center justify_center\">Layout Zone: {{ modifier_class }}</div>\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts.Filler\n*/\n\n/*\n\nGrid Filler\n\nThis is a styleguide only element to show structure edges.\n\nMarkup:\n<div class=\"w_auto h_100p c_highlight-n4 font_xbold font_3 br_dotted br_highlight bg_highlight-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis\">Grid Area: {{ modifier_class }}</div>\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts.GridFiller\n*/\n\n/*\n\nSub Grid Filler\n\nThis is a styleguide only element to show structure edges.\n\nMarkup:\n<div class=\"w_auto h_100p c_success-n4 font_xbold font_3 br_dotted br_success bg_success-5 br_1 grid items_center justify_center lh_0 overflow_ellipsis\">Grid Area: {{ modifier_class }}</div>\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts.SubGridFiller\n*/\n\n/*\n\nSide Bar Area\n\nThis pattern is often used to push the sidebar bellow the main content area. \n\n\nMarkup:\n<div class=\"flex flex_row:md flex_column-reverse gap_4 gap_5:lg\">\n    <div class=\"flex_auto flex_100 max-w_20:lg\">\n    {{> \"Page.Layouts.Filler\"  modifier_class=\"Sidebar\"}}\n    </div>\n    <div class=\"flex_auto flex_100 \">\n    {{> \"Page.Layouts.Filler\"  modifier_class=\"Main\"}}\n    </div>\n</div>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Page.Layouts.Sidebar\n*/\n\n/*\n\nSide Bar Area With Ad\n\nThis pattern is often used to push the sidebar bellow the main content area. \n\n\nMarkup:\n<div class=\"flex flex_row:lg flex_column gap_4 gap_5:lg\">\n    <div class=\"flex_auto flex_100 flex flex_row:md flex_column-reverse gap_4 gap_5:lg\">\n        <div class=\"flex_auto flex_100 max-w_20:md\">\n            {{> \"Page.Layouts.Filler\" modifier_class=\"Sidebar\"}}\n        </div>\n        <div class=\"flex_auto flex_100\">\n            {{> \"Page.Layouts.Filler\" modifier_class=\"Main\"}}\n        </div>\n    </div>\n    <div class=\"flex_auto flex_100 max_w-100 max-w_10:lg\">\n        {{> \"Page.Layouts.Filler\" modifier_class=\"Ad Rail\"}}\n    </div>\n</div>   \n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Page.Layouts.SidebarAndAd\n*/","%Sub.Data.Agenda {\n}\n/*\nAgenda Item\n \nDescription:\nAgenda items are sessions that are scheduled for a specific date, location, and time.\n \nWeight:0\n \nStyleguide Sub.Data.Agenda\n*/\n%Sub.Data.Agenda.ID {\n}\n/*\nAgenda ID\n \nDescription:\nThe ID given to an Agenda. This number is unique to the Agenda and is incremented for each new Agenda created.\n \nMarkup:\n101\n \nWeight:1\n \nStyleguide Sub.Data.Agenda.ID\n*/\n%Sub.Data.Agenda.ChannelName {\n}\n/*\nChannel Name\n \nDescription:\nA channel is a visible category that an Agenda Item belongs to.\n \nMarkup:\nNavigating Health Care Economics \n\n \nWeight:1\n \nStyleguide Sub.Data.Agenda.ChannelName\n*/\n\n%Sub.Data.Agenda.LiveTime {\n}\n/*\nLive Time\n \nDescription:\nThe time at which a Agenda is live.\n \nMarkup: @ {{> Sub.Data.Agenda.ReleaseTime }} – {{> Sub.Data.Agenda.ReleaseTime }} <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.LiveTime\n*/\n%Sub.Data.Agenda.ReleaseTime {\n}\n/*\nRelease Time\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.ReleaseTime\n*/\n%Sub.Data.Agenda.EndTime {\n}\n/*\nEnd Time\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.EndTime\n*/\n%Sub.Data.Agenda.LiveDate {\n}\n/*\nLive Date\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.LiveDate\n*/\n%Sub.Data.Agenda.onDemandReleaseTime {\n}\n/*\nOn Demand Release Date and Time\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 @ 8:00 p.m. <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\nWeight:0\n \nStyleguide Sub.Data.Agenda.onDemandReleaseTime\n*/\n%Sub.Data.Session {\n}\n/*\nSession \n \nA Session is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.\n \nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:100\n \nStyleguide Sub.Data.Session\n*/\n\n%Sub.Data.Session.Subtitle {\n}\n/*\nSession Subtitle\n \nThe subtitle of a Session.\n \nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:2\n \nStyleguide Sub.Data.Session.Subtitle\n*/\n%Sub.Data.Session.Title {\n}\n/*\nSession Title\n \nDescription:\nThe title of a Session.\n \nMarkup:\nCardiovascular Update for the Clinician III\n \nWeight:1\n \nStyleguide Sub.Data.Session.Title\n*/\n\n%Sub.Data.Session.ID {\n}\n/*\nSession Identifier\n \nDescription:\nThe ID given to a session\n \nMarkup:\n3652\n \nWeight:0\n \nStyleguide Sub.Data.Session.ID\n*/\n\n%Sub.Data.Session.Subtitle {\n}\n/*\nSession Description\n \nThe description of a session.\n \nMarkup:\n<p>Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.</p>\n \nWeight:3\n \nStyleguide Sub.Data.Session.Description\n*/\n\n%Sub.Data.Presentation {\n}\n\n/*\nPresentation \n\nDescription:\nA presentation is a single part of education that can not be subdivided.\n\nWeight:0\n\nStyleguide Sub.Data.Presentation\n*/\n%Sub.Data.Presentation.Description {\n}\n\n/*\nPresentation Description\n \nDescription:\nThe Description of a presentation\n \nMarkup:Drug Coated Balloons\n \nWeight:500\n \nStyleguide Sub.Data.Presentation.Description\n*/\n\n%Sub.Data.Presentation.Title {\n}\n/*\nPresentation Title\n \nDescription:\nThe title of a presentation\n \nMarkup:\nNew York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty\n \nWeight:0\n \nStyleguide Sub.Data.Presentation.Title\n*/\n%Sub.Data.Presentation.LiveTime {\n}\n/*\nPresentation Live Time\n\nDescription:\nThe Live Time of a Presentation\n\nMarkup:\n11:45 – 11:49 a.m. <abbr title=\"EASTERN DAYLIGHT TIME, UTC -4\">ET</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\n\nWeight:0\n \nStyleguide Sub.Data.Presentation.LiveTime\n*/\n%Sub.Data.Presentation.ID {\n}\n/*\nPresentation ID\n \nDescription:\nUnique system generated identifier for a presentation.\n \nMarkup:\n15612\n \nWeight:0\n \nStyleguide Sub.Data.Presentation.ID\n*/\n%Sub.Data.Faculty {\n}\n/*\nFaculty \n\nDescription:\nAn educator who created or participated in a presentation\n\nWeight:1000\n\nStyleguide Sub.Data.Faculty\n*/\n\n%Sub.Data.Faculty.Photo {\n}\n\n/*\nPhoto\n \nDescription:\nA photo of the faculty member\n \nMarkup:\n<img\n    class=\"aspect_1x1 w_100\"\n    src=\"https://i.pravatar.cc/300\"\n    alt=\"{{> \"Sub.Data.Faculty.FullName\" }}\"\n/>\n\nMarkupWrapperClasses: max-w_30\n\nFORMAT: 300px by 300px\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.Photo\n*/\n%Sub.Data.Faculty.FullName {\n}\n/*\nFull Name\n \nThe full name of the faculty 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.Faculty.FullName\n*/\n%Sub.Data.Faculty.Location {\n}\n/*\nLocation\n \nDescription:\nThe location of the faculty 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.Faculty.Location\n*/\n%Sub.Data.Faculty.Title {\n}\n/*\nTitle\n \nDescription:\nthe roles of the faculty member within the session\n \nMarkup:\n{{> \"Sub.Data.Faculty.Title.InstitutionTitle\" }}, {{> \"Sub.Data.Faculty.Title.InstitutionDivision\" }}, {{> \"Sub.Data.Faculty.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.Faculty.Title\n*/\n%Sub.Data.Faculty.Institution {\n}\n/*\nInstitution\n \nDescription:\nInstitution of the faculty member where they hold a title\n \nMarkup:\nMount SugarLoaf Hospital\n \nWeight:101\n \nStyleguide Sub.Data.Faculty.Title.Institution\n*/\n%Sub.Data.Faculty.InstitutionDivision {\n}\n/*\nInstitution Division\n \nDescription:\nThe Division of the Institution of the faculty member where they hold a title\n \nMarkup:\nDepartment of Cardiology\n \nWeight:102\n \nStyleguide Sub.Data.Faculty.Title.InstitutionDivision\n*/\n%Sub.Data.Faculty.InstitutionTitle {\n}\n/*\nInstitutional Title\n \nDescription:\nthe roles of the faculty member within the session\n \nMarkup:\nPhysician-in-Chief\n \nWeight:103\n \nStyleguide Sub.Data.Faculty.Title.InstitutionTitle\n*/\n%Sub.Data.Faculty.TwitterHandle {\n}\n/*\nTwitter Handle\n \nDescription:\nThe handle of the faculty member on twitter\n \nMarkup:\nTweat_DrSoda\n \nWeight:0\n \nStyleguide Sub.Data.Faculty.TwitterHandle\n*/\n\n%Sub.Data.Faculty.Role {\n}\n/*\nRole\n \nDescription:\nthe roles of the faculty member within the session\n \nMarkup:\nCo-Chair\n \nWeight:0\n \nStyleguide Sub.Data.Faculty.Role\n*/\n%Sub.Data.Faculty.Bio {\n}\n/*\nBio\n \nDescription:\nsimple html text that describes the faculty member\n \nMarkup:\n<p>Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.</p>\n \nWeight:0\n \nStyleguide Sub.Data.Faculty.Bio\n*/\n%Sub.Data.Faculty.ID {\n}\n/*\nIdentification Number\n \nDescription:\nthis id can both be used to link to the faculty member's page, the member's image, and disclosures\n \nMarkup:\n122154254\n \nWeight:0\n \nStyleguide Sub.Data.Faculty.ID\n*/\n\n\n\n%Sub.Data.Sponsor {\n}\n/*\nSponsor\n \nDescription:\nSponsor are industry that has offered money or support to an event.\n \nWeight:0\n \nStyleguide Sub.Data.Sponsor\n*/\n\n%Sub.Data.Sponsor.Name {\n}\n/*\nName\n\nMarkup:\nLogoIpsum\n \nWeight:-100\n \nStyleguide Sub.Data.Sponsor.Name\n*/\n%Sub.Data.Sponsor.Address {\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\n%Sub.Data.Sponsor.Logo {\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://cdn.jsdelivr.net/gh/ACC-Style/Arches/dist/img/LoremIpsum.png\"/>\n\nMarkupWrapperClasses: max-w_40 relative h_20 w_100\n\n\nWeight:10\n \nStyleguide Sub.Data.Sponsor.Logo\n*/\n\n\n%Sub.Data.Sponsor.WebAddress {\n}\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n \nWeight:25\n \nStyleguide Sub.Data.Sponsor.WebAddress\n*/\n%Sub.Data.Sponsor.WebLink {\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\n%Sub.Data.Sponsor.WebLink {\n}\n/*\nWebsite Link\n\nMarkup:\n<a class=\"website {{modifier_class}}\" target=\"_blank\"  href=\"{{> 'Sub.Data.Sponsor.WebAddress'}}\">More</a>\n \nWeight:26\n \nStyleguide Sub.Data.Sponsor.MoreLink\n*/\n\n\n%Sub.Data.Sponsor.PDFLink {\n}\n/*\nPDF Link\n\nMarkup:\n<a class=\"pdf {{modifier_class}}\" target=\"_blank\" href=\"{{> 'Sub.Data.Sponsor.WebAddress'}}.pdf\">PDF</a>\n \nWeight:26\n \nStyleguide Sub.Data.Sponsor.PDFLink\n*/\n\n\n\n%Sub.Data.Sponsor.Description {\n}\n/*\nDescription\n \nDescription: Short html description of the sponsor or the product.\n \nMarkup:\n<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>\n<ul>\n    <li>Ut reiciendis et possimus rerum animi.</li>\n<li>Reprehenderit quia et eaque cupiditate illo explicabo architecto.</li>\n<li>Et cumque distinctio maxime maiores aut labore ut est esse.</li>\n</ul>\n<p>Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.</p>\n \nWeight:3\n \nStyleguide Sub.Data.Sponsor.Description\n*/\n\n/*\nAward\n \nDescription: Awards and Recognition \n \nWeight:5\n \nStyleguide Sub.Data.Award\n\n*/\n\n/*\nAward Title\n \nDescription: Title of the award\n\nMarkup:\nPamela S. Douglas Distinguished Award for Leaderiship in Diversity and Inclusion\n \nWeight:5\n \nStyleguide Sub.Data.Award.Title\n\n*/\n\n%Sub.Data.Award.Description {\n}\n/*\nAward Description\n \nDescription: Description of the award can be html or text and may include a link.\n\nMarkup:\n<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?</p>\n<ul>\n<li>Ut reiciendis et possimus rerum animi.</li>\n<li>Reprehenderit quia et eaque cupiditate illo explicabo architecto.</li>\n<li>Et cumque distinctio maxime maiores aut labore ut est esse.</li>\n</ul>\n<p>Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.</p>\n<a href=\"https://acc.org\" target=\"_blank\">Watch Video</a>\n \nWeight:5\n \nStyleguide Sub.Data.Award.Description\n\n*/\n\n%Sub.Data.Abstract {\n}\n/*\nAbstract \n \nA Abstract is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.\n \nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:100\n \nStyleguide Sub.Data.Abstract\n*/\n\n%Sub.Data.Abstract.Subtitle {\n}\n/*\nAbstract Subtitle\n \nThe subtitle of a Abstract.\n \nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:2\n \nStyleguide Sub.Data.Abstract.Subtitle\n*/\n%Sub.Data.Abstract.Title {\n}\n/*\nAbstract Title\n \nDescription:\nThe title of a Abstract.\n \nMarkup:\nAbstract on Cardiovascular Update for the Clinician Success H<sub>2</sub>\n \nWeight:1\n \nStyleguide Sub.Data.Abstract.Title\n*/\n\n%Sub.Data.Abstract.ID {\n}\n/*\nAbstract Identifier\n \nDescription:\nThe ID given to a Abstract\n \nMarkup:\n3652\n \nWeight:0\n \nStyleguide Sub.Data.Abstract.ID\n*/\n\n%Sub.Data.Abstract.Description {\n}\n/*\nAbstract Description\n \nThe description of a Abstract.\n \nMarkup:\n<p>Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.</p>\n \nWeight:3\n \nStyleguide Sub.Data.Abstract.Description\n*/","@import  \"data/virtual.helper.randomWords\";\n\n\n/*\nAction Buttons Clear Search\n \nThis action button is used to clear the search filters and parameters.\n\n \nMarkup:\n<aside class=\"flex flex_none flex_column gap-y_3 m-l_auto:md  max-w_30:md p-b_4 p-b_4:md w_100\">\n      <nav aria-label=\"session actions\" class=\"flex flex_none flex_row gap-x_2 gap-y_3 justify_between\">\n        <a href=\"#\" aria-label=\"navigate to\" class=\"br_1 br_solid br_white-3 btn btn-secondary flex_auto shadow_overlap-light\">Clear Search <i class=\"fas fa-times p-l_3\"></i></a>\n      </nav>\n</aside>\n \nWeight:0\n \nStyleguide Sub.ActionButtons.ClearSearch\n\n*/\n\n/*\n\nFaceted Search\n\nFacet Groups\n \nMarkup:\n<li data-name=\"library-search-facet\" class=\"bg_white-8 br_radius m-t_3 p_3  max-w_20:md {{ modifier_class }}\" >\n    <header class=\"flex font-size_up m-y_2\">\n        <div class=\"flex_auto  self_center p-l_0 lh_1 font-size_up font_medium\">Drugs Generic </div>\n          {{> \"Sub.CollapseIcon\" modifier_class=\"#CollapseFacetGroupID\" }}\n    </header>\n    <main id=\"CollapseFacetGroupID\" class=\"p_1 collapse show\" style=\"\">\n        <ul class=\"p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid\">\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n        </ul>\n        <footer class=\"text_center font-size_down c_primary-n1 p-t_3\"><span class=\"cursor_not-allowed c_black-3\">less</span><span class=\"c_primary\"> | </span><span class=\"link h:underline h:black link h:underline h:black cursor_pointer\">more</span></footer>\n    </main>\n</li>\n\nMarkupWrapperClasses: max-w_30 ul_none\n\nNOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count.  The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.\n\nSubComponents: \nSub.Search.FacetCheckbox - Single Facet Checkbox\nSub.CollapseIcon - Collapse Icon\n \nWeight:0\n \nStyleguide Sub.Search.Faceted\n*/\n\n/*\n\nFaceted Search\n\nFacet Groups\n \nMarkup:\n<li data-name=\"library-search-facet\" class=\"bg_white-8 br_radius m-t_3 p_3  max-w_20:md {{ modifier_class }}\" >\n    <header class=\"flex font-size_up m-y_2\">\n        <div class=\"flex_auto  self_center p-l_0 lh_1 font-size_up font_medium\">Primary Category </div>\n         {{> \"Sub.CollapseIcon\" modifier_class=\"#CollapseFacetGroupPrimaryID\" }}\n    </header>\n    <main id=\"CollapseFacetGroupPrimaryID\" class=\"p_1 collapse show\" style=\"\">\n        <ul class=\"p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid\">\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n        </ul>\n        <footer class=\"text_center font-size_down c_primary-n1 p-t_3\"><span class=\"cursor_not-allowed c_black-3\">less</span><span class=\"c_primary\"> | </span><span class=\"link h:underline h:black link h:underline h:black cursor_pointer\">more</span></footer>\n    </main>\n</li>\n\nMarkupWrapperClasses: max-w_30 ul_none\n\nNOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count.  The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.\n\nSubComponents: \nSub.Search.FacetCheckbox - Single Facet Checkbox\nSub.CollapseIcon - Collapse Icon\n \nWeight:0\n \nStyleguide Sub.Search.FacetedPrimary\n*/\n\n/*\n\nFaceted Type Ahead\n\nA type ahead search that adds a selected faceted filter to the search page. This is used when filters are exceptionally long and could be difficult to read when listed out.  Authors, and mesh terms can use this pattern to add them as a filter to the search page.\n\nMarkup:\n<li data-name=\"library-search-facet\" class=\"bg_white-8 br_radius m-t_3 p_3 max-w_20:md {{ modifier_class }}\">\n    <header class=\"flex font-size_up m-y_2\">\n        <div class=\"flex_auto  self_center p-l_0 lh_1 font-size_up font_medium\">Type Ahead Filter</div>\n    </header>\n    <main class=\"p_1 collapse show\">\n        <div class=\"p_3 flex flex_row\">\n            <input class=\"br-tr_square br-br_square\" type=\"text\" name=\"\" id=\"\" placeholder=\"Filter Name\">\n            <button class=\"btn btn-secondary br-tl_square br-bl_square\"><i class=\"fas fa-users\"></i></button>\n        </div>\n    </main>\n    <header class=\"flex font-size_up m-y_2\">\n        <div class=\"flex_auto self_center p-l_2 lh_1 font-size_down font_bold opacity_8\">Filtering By</div>\n        {{> \"Sub.CollapseIcon\" modifier_class=\"#collapseTypeAhead\" }}\n    </header>\n    <main id=\"collapseTypeAhead\" class=\"p_1 collapse show\" style=\"\">\n        <ul class=\"p-y_3 ul_none br-t_1 br-b_1 br_primary-3 transition_3 br_solid\">\n            {{>  \"Sub.Search.FacetCheckboxWithTrash\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n            {{>  \"Sub.Search.FacetCheckboxWithTrash\" modifier_class=\"#{ randomID(\"facet\") }\" }}\n        </ul>\n        <footer class=\"text_center font-size_down c_primary-n1 p-t_3\"><span class=\"cursor_not-allowed c_black-3\">less</span><span class=\"c_primary\"> | </span><span class=\"link h:underline h:black link h:underline h:black cursor_pointer\">more</span></footer>\n    </main>\n</li> \n\nMarkupWrapperClasses:\n\n\n \nWeight:100\n \nStyleguide Sub.Search.Faceted.TypeAhead\n*/\n\n\n\n/*\n\nCollapse/Expand\n\nThe collapse/expand icon is used to collapse and expand the facet group.\n \nMarkup:\n<div class=\"c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4\" data-bs-toggle=\"collapse\" data-bs-target=\"{{modifier_class}}\" role=\"button\" aria-expanded=\"true\" aria-controls=\"{{modifier_class}}\">\n  <div class=\"flex_none self_center\"> collapse </div>\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 \nWeight:0\n \nStyleguide Sub.CollapseIcon\n*/\n/*\n\nCollapse/Expand No Text\n\nThe collapse/expand icon is used to collapse and expand the facet group.\n \nMarkup:\n<div class=\"toggle user-select_none\" data-bs-toggle=\"collapse\" data-bs-target=\"{{modifier_class}}\" role=\"button\" aria-expanded=\"true\" 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\n \nWeight:0\n \nStyleguide Sub.CollapseIcon.NoText\n*/\n\n\n/*\n\nFacet Checkbox\n\nThe single checkbox for a facet.\n \nMarkup:\n<li class=\"m-y_2\">\n    <div class=\"input flex user-select_none relative h:bg_black-1 br_radius\">\n        <div class=\"flex_none p-l_3 p-r_3 self_center\"><input type=\"checkbox\" name=\"check{{modifier_class}}\" id=\"check{{modifier_class}}\" class=\"font-size_up\"></div>\n        <div class=\"flex_auto self_center p-l_2 p-y_2\"><label for=\"check{{modifier_class}}\" class=\"font-size_up lh_2 block\"><span class=\"font_regular p-y_2 inline-block p-y_1:md\"> {{ modifier_class }}ut nobis est<small class=\"flex_auto p-l_2 font_light c_accent font-size_down-1\">58</small></span></label></div>\n        <!---->\n    </div>\n</li>\n\nMarkupWrapperClasses: ul_none\n \nWeight:0\n \nStyleguide Sub.Search.FacetCheckbox\n*/\n\n/*\n\nFacet Checkbox With Trash\n\nThe single checkbox that is generated by the type ahead filter search. The trash button removes the filter. \n \nMarkup:\n<li class=\"m-y_2\">\n    <div class=\"input flex user-select_none relative h:bg_black-1 br_radius\">\n        <div class=\"flex_none p-l_3 p-r_3 self_center\"><input type=\"checkbox\" name=\"checkfacet{{modifier_class}}\" id=\"checkfacet{{modifier_class}}\" class=\"font-size_up\"></div>\n        <div class=\"flex_auto self_center p-l_2 p-y_2\"><label for=\"checkfacet{{modifier_class}}\" class=\"font-size_up lh_2 block\"><span class=\"font_regular p-y_2 inline-block p-y_1:md\">  type ahead filter {{ modifier_class }}</span></label></div>\n        <div class=\"\">\n            <button class=\"bg_transparent br_0 br_radius c_alert h:bg_alert-3 h:c_alert-n3 p-y_2\"><i class=\"fas fa-trash\"></i></button>\n        </div>\n        <!---->\n    </div>\n</li>\n\nMarkupWrapperClasses: ul_none\n \nWeight:0\n \nStyleguide Sub.Search.FacetCheckboxWithTrash\n*/\n\n\n\n/*\n\n\nSearch Bar\n\nSimple Search Bar\n\n\nMarkup:\n<div class=\" sticky jump-buttons_top  r_0 z_1\">\n<div class=\"absolute r_4 t_0  flex flex_row flex_nowrap gap-x_3\">\n<!--  Helper Jump links -->\n  <a class=\"br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#SearchBarTop\">\n  <span><i class=\"fas fa-arrow-up\"></i><i class=\"m-l_2 fas fa-search\"></i></span>\n  </a>\n  <a href=\"#FilterNavContainer\" class=\"br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3\">\n  <span><i class=\"fas fa-arrow-down\"></i><i class=\"m-l_2 fas fa-filter\"></i></span>\n  </a>\n<!--  Helper Jump links -->  \n</div>\n</div>\n<div class=\"bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative\" >\n    <h1 class=\"c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between\"><span>Program</span>\n      <a href=\"#FilterNavContainer\" class=\"absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0\">\n      <span><i class=\"fas fa-arrow-down\"></i><i class=\"fas fa-filter\"></i></span>\n      </a>\n    </h1>\n    <div class=\"flex_row flex gap-x_3\">\n      <div class=\"input-holder flex_auto flex flex_row self_end relative w_100\">\n          <input id=\"input_uniqueTextAnda\" name=\"input_uniqueTextAnda\" type=\"text\" placeholder=\"Search\" class=\" br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 font_2:lg font_1:md font_0\">\n          <button class=\"absolute b_0 br-bl_square br-tl_square btn btn-primary flex_none grid items_center justify_center r_0 t_0\" onClick=\"Search()\">\n          <i class=\"fas fa-search\"></i>\n          </button>\n      </div>\n      <button class=\"disabled flex_none grid items_center justify_center btn btn-alert\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide  Sub.Search.Bar\n*/\n.jump-buttons_top{top:0;}\n\n/*\n\n\nProgram Bar\n\nSome events don't need a search bar the program bar remains because it is need to hide the jump links.\n\n\nMarkup:\n<div class=\" sticky t_0 r_0 z_1\">\n<div class=\"absolute r_4 t_0  flex flex_row flex_nowrap gap-x_3\">\n<!--  Helper Jump links -->\n  <a class=\"br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#SearchBarTop\">\n  <span><i class=\"fas fa-arrow-up\"></i> top</span>\n  </a>\n  <a href=\"#FilterNavContainer\" class=\"br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md grid items_center justify_center m-l_auto self_center shadow_3\">\n  <span><i class=\"fas fa-arrow-down\"></i><i class=\"m-l_2 fas fa-filter\"></i></span>\n  </a>\n<!--  Helper Jump links -->  \n</div>\n</div>\n<div class=\"bg_white br_radius p_4:lg p_3 shadow_overlap-light z_2 relative\" >\n    <h1 class=\"c_primary-n1 font_display m-b_3 m-t_0 flex flex_row justify_between\"><span>Program</span>\n      <a href=\"#FilterNavContainer\" class=\"absolute br-tl_square br-tr_square br_radius btn btn-accent btn-sm display_none:md flex_none grid items_center justify_center m-l_auto r_3 self_center t_0\">\n      <span><i class=\"fas fa-arrow-down\"></i><i class=\"fas fa-filter\"></i></span>\n      </a>\n    </h1>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide  Sub.Search.NoBar\n*/\n\n\n\n\n/*\n\nResult Overview\n\nSmall strip of data that shows the number of results and the time it took to search.\n \nMarkup:\n<div class=\"c_secondary-n1 font_medium font-size_down-2 font_ui p_2 {{modifier_class}}\">\n  <ul class=\"ul_inline-pipe\">\n      <li>\n        <ul class=\"ul_inline-comma\">\n            <li class=\"font_bold   no-after uppercase\">Results:</li>\n            <li class=\"c_accent-n1\">230</li>  \n        </ul>\n      </li>\n      <li>\n        <ul class=\"ul_inline-comma\">\n            <li class=\"font_bold no-after uppercase\">Filters:</li>\n            <li><a class=\"h:underline c_primary-n1 c_primary-n2\">Category A <i class=\"fas fa-times c_alert-n1 p_2\"></i></a></li>\n            <li><a class=\"h:underline c_primary-n1 c_primary-n2\">Tag B  <i class=\"fas fa-times c_alert-n1 p_2\"></i></a></li>\n            <li><a class=\"h:underline c_primary-n1 c_primary-n2\">Tag C <i class=\"fas fa-times c_alert-n1 p_2\"></i></a></li>\n        </ul>\n      </li>\n  </ul>\n</div>\n\n\n \nWeight:0\n \nStyleguide Sub.Search.ResultOverview\n*/\n\n\n/*\n\nPagination\n\nPagination is used to navigate through the results.\n \nMarkup:\n<nav aria-label=\"Pagination\" class=\"flex flex_row p-b_5:lg p-b_4\">\n    <ul class=\"pagination flex flex_row ul_none justify_stretch relative lh_0 font_n1 font_medium m-x_auto shadow_bevel-light br_radius overflow_hidden\">\n        <li class=\"flex pagination-previous \">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer br-tl_radius br-bl_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">\n                        <div class=\"flex flex_row nowrap\"><i class=\"fas fa-arrow-left p-r_3 self_center\"></i> <span class=\"show-for-sr display_none inline:md self_center\">Prev</span></div>\n                    </div>\n                </div>\n            </a>\n        </li>\n        <!---->\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\"><i class=\"fas  fa-ellipsis-h left\"></i></div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">50 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"active ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">51 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">52 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">53 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">54 </div>\n                </div>\n            </a>\n        </li>\n        <li class=\"flex\">\n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\"><i class=\"fas  fa-ellipsis-h right\"></i></div>\n                </div>\n            </a>\n        </li>\n        <!---->\n        <li class=\"flex pagination-next\">                        \n            <a class=\"ease_out transition_1 f:outline_none h:undecorated a:bg_accent-n3 a:c_white c_black-7 h:c_black text_center inline-block w_auto cursor_pointer  br-tr_radius br-br_radius overflow_hidden br_square br-l_1 br_solid br_1 br_black-3 bg_white h:bg_black-3 p-y_3 p-x_3\" aria-label=\"Next Page\" style=\"min-height: unset;\">\n                <div class=\"flex block justify_center flex_column \">\n                    <div class=\"flex_auto self_center justify_center flex\">\n                        <div class=\"flex flex_row nowrap\"><span class=\"show-for-sr display_none inline:md self_center\">Next</span> <i class=\"fas fa-arrow-right p-l_3 self_center\"></i></div>\n                    </div>\n                </div>\n            </a>\n        </li>\n    </ul>\n</nav>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Pagination\n*/","\n\n\n/*\n\nSearch Filter Rail\n\nThe filter box on the search page.\n \nMarkup:\n<div id=\"filterZone\" class=\"{aspect_1_1:md} {nav-mined} nav-maxed self_start bg_black-3 br_1 br_black-2 br_radius br_solid flex_auto p_2 p_3:md  shadow_emboss-light transition_3 flex flex_column {{modifier_class}}\">\n\t<nav id=\"FilterNavContainer\" class=\"flex_auto overflow_hidden self_stretch font_4:lg font_3:md font_2 font_display font_display\">\n\t\t<ul class=\"flex flex_column:md flex_row gap_3 justify_start:md ul_none w_100 w_auto:md\">\n\t\t\t<li class=\"a:bg_primary a:c_white a:shadow_overlap-light {aspect_1_1:md} br_radius c_white-8 flex_none grid h:bg_black-7 h:c_white h:shadow_overlap-light nav-item p_0:md p_3\">\n\t\t\t\t<a class=\"c_inherit-all h:undecorated p_3 lh_1 m-x_n1\">\n\t\t\t\t\t<i class=\"far fa-filter p-x_2:md p-y_3 p-y_0:md\"></i>\n\t\t\t\t\t<span class=\"font-size_down label lh_0 lowercase self_center font_medium {display_none:md}\">Filter</span>\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t</ul>\n\t</nav>\n\t<ul id=\"filterFacets\" class=\"ul_none font_n1 {display_none} opacity_none transition_3 min-h_30:md\">\n\t\t{{> 'Sub.Search.Faceted.TypeAhead' modifier_class=\"Filter1\"}}\n\t\t{{> 'Sub.Search.FacetedPrimary' modifier_class=\"Filter2\"}}\n\t\t{{> 'Sub.Search.Faceted' modifier_class=\"Filter3\"}}\n\t</ul>\n\t<script>\n\t\tlet filterZone = document.getElementById(\"filterZone\");\n\t\tlet filterZoneNav = filterZone.querySelector(\"nav\");\n\t\tlet filterFacets = filterZone.querySelector(\"#filterFacets\");\n\t\tlet filterZoneExpanded = true;\n\t\tfilterZoneNav.addEventListener(\"click\", function () {\n\t\t\tif (filterZoneExpanded) {\n\t\t\t\tfilterFacets.classList.toggle(\"opacity_0\");\n\t\t\t\tfilterFacets.classList.toggle(\"opacity_none\");\n\t\t\t\tsetTimeout(function () {\n\t\t\t\t\tfilterFacets.classList.toggle(\"{display_none}\");\n\t\t\t\t\tfilterFacets.classList.toggle(\"display_none\");\n\t\t\t\t\tfilterFacets.classList.toggle(\"min-h_0:md\");\n\t\t\t\t\tfilterFacets.classList.toggle(\"min-h_30:md\");\n\t\t\t\t\tfilterZone.classList.remove(\"{aspect_1_1:md}\", \"{nav-mined}\", \"nav-maxed\");\n\t\t\t\t\tfilterZone.classList.add(\"aspect_1_1:md\", \"nav-mined\", \"{nav-maxed}\");\n\t\t\t\t\tfilterZoneNav.querySelector(\"span.label\").classList.toggle(\"{display_none:md}\");\n\t\t\t\t\tfilterZoneNav.querySelector(\"span.label\").classList.toggle(\"display_none:md\");\n\t\t\t\t\tfilterZoneExpanded = false;\n\t\t\t\t}, 300);\n\t\t\t\treturn;\n\t\t\t} else {\n\t\t\t\tfilterZone.classList.add(\"{aspect_1_1:md}\", \"{nav-mined}\", \"nav-maxed\");\n\t\t\t\tfilterZone.classList.remove(\"aspect_1_1:md\", \"nav-mined\", \"{nav-maxed}\");\n\t\t\t\tfilterFacets.classList.toggle(\"min-h_0:md\");\n\t\t\t\tfilterFacets.classList.toggle(\"min-h_30:md\");\n\t\t\t\tfilterFacets.classList.toggle(\"{display_none}\");\n\t\t\t\tfilterFacets.classList.toggle(\"display_none\");\n\t\t\t\tsetTimeout(function () {\n\t\t\t\t\tfilterFacets.classList.toggle(\"opacity_0\");\n\t\t\t\t\tfilterFacets.classList.toggle(\"opacity_none\");\n\t\t\t\t\tfilterZoneNav.querySelector(\"span.label\").classList.toggle(\"{display_none:md}\");\n\t\t\t\t\tfilterZoneNav.querySelector(\"span.label\").classList.toggle(\"display_none:md\");\n\t\t\t\t\tfilterZoneExpanded = true;\n\t\t\t\t}, 300);\n\t\t\t\treturn;\n\t\t\t}\n\t\t});\n\t</script>\n</div>\n\nMarkupWrapperClasses: \n\n \nWeight: -1000\n \nStyleguide Sub.Search.FilterRail\n*/\n\n/*\n\nYoutube Embed Playlist\n \nMarkup:\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/videoseries?list=PLCROrnGF2SYByKd5KHoqjRZXM4hwlHgjH\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.YoutubeEmbedPlaylist\n*/\n\n.jump-buttons_top{\n\ttop:3.5rem;\n\t@media #{$large-up} {\n\t\ttop:0;\n\t}\n}","/*\nFaculty List\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li class=\"no-after font_medium c_primary-n1 block w_100 {{ modifier_class }}\">Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li class=\"no-after font_medium c_primary-n1 block w_100  {{ modifier_class }}\">Role Type 2:</li>\n  <li>Dianna Denesik III <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n\nData:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.FullName - Location\n\nFORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.\n\nWeight:0\n \nStyleguide Sub.FacultyList\n\n*/\n\n/*\nAux Session Faculty List\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<h4 class=\"font-size_up c_black-6 font_medium capitalize\"><i class=\"fas fa-users p-r_3\"></i> Role Type 1</h4>\n<div class=\"p-y_3 br-t_1  br_primary-2 br_solid font-size_down\">\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li>Marty Little <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Eileen Marvin <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Chelsea Dach DVM <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n</div>\n<h4 class=\"font-size_up c_black-6 font_medium capitalize\"><i class=\"fas fa-users p-r_3\"></i> Role Type 2</h4>\n<div class=\"p-y_3 br-t_1  br_primary-2 br_solid font-size_down\">\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li>Wm Price<span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Mrs. Jeffrey Cartwright <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>CEmmett Spencer<span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n</div>\n\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.Location - Location\n\n\nWeight:0\n \nStyleguide Sub.FacultyList.AuxSession\n\n*/\n\n/*\nCombined Faculty List\n\nWhen a presentation is in a single state the combination of session roles and presentation roles are shown.\n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Session Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li class=\"no-after font_medium c_primary-n1  {{ modifier_class }}\">Session Role Type 2:</li>\n  <li>Dianna Denesik III <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n    <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li class=\"no-after font_medium c_primary-n1  {{ modifier_class }}\">Role Type 2:</li>\n  <li>Dianna Denesik III <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.FullName - Location\n\n\nWeight:0\n \nStyleguide Sub.FacultyList.SessionAndPresentation\n\n*/\n\n\n/*\nSession Faculty List\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Session Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li class=\"no-after font_medium c_primary-n1  {{ modifier_class }}\">Session Role Type 2:</li>\n  <li>Dianna Denesik III <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Sub.Data.Faculty.Location\" }})<span></li>\n</ul>\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.FullName - Location\n\n\nWeight:0\n \nStyleguide Sub.FacultyList.Session\n\n*/\n\n\n/*\nNo Location Faculty List\n\nWhen you list non-event areas like Posters, and Abstracts the list removes the location of the person. \n\nblock         - use block on the role type label to stack the faculty names.\ninline-block  - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n<ul class=\"ul_inline-semicolon font_regular font_copy\">\n  <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Role Type 1:</li>\n  <li>{{> \"Sub.Data.Faculty.FullName\" }}</li>\n  <li class=\"no-after font_medium c_primary-n1  {{ modifier_class }}\">Role Type 2:</li>\n  <li>Dianna Denesik III</li>\n  <li>Miguel Romaguera</li>  \n  <li>Jeanette Franecki</li>\n</ul>\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\n\n\nWeight:0\n \nStyleguide Sub.FacultyList.NoLocation\n\n*/\n","\n/*\n\nMember Profile Data\n\nData for the Member Profile that is visible for the user.\n \nMarkup:\n<section class=\"bg_acc-n2 br_1 br_black-2 br_round br_solid p-x_5:lg p_4 inset-level_up shadow_bevel-bold\">\n  <div class=\"c_white\">\n    <h2 class=\"br-b_1 br_solid br_white-6 c_white m-t_2 p-b_3 text_center\">Account Information</h2>\n    <ul class=\"ul_none p_0 m_0\">\n    <li class=\"\"><strong>User Name:</strong> <span data-type=\"User Full Name\">Regina Rutherford</span> </li>\n    <li class=\"\"><strong>Member ID:</strong> <span data-type=\"Member ID\">0152151214</span> </li><li class=\"\"><strong>Email:</strong> <span data-type=\"email\">test@boo.com</span> </li>\n    </ul>\n  </div>\n  <div class=\"bg_black-4 br_radius c_white m-b_n2 m-t_4 m-x_n4 p_4 shadow_emboss-light\">\n    <p class=\"\"><strong>Click the 'Member Help' button to send along your member information to help diagnose this issue.</strong></p><div class=\"text_center\"><a href=\"mailTO:membercare@acc.org?body='name,email,personify'\" class=\"btn btn-primary c_white inline-block m-x_auto shadow_overlap-light text_center w_auto\">Member Care</a></div>\n  </div>\n</section>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.System.MemberData\n\n*/\n\n/*\n\nNo Access Trouble Shooting\n\nThe instructions to the user when they land on the \"No Access\" to the page.\n \nMarkup:\n<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative \">\n\t<div class=\"reading-typography flex flex_column gap_4\">\n\t\t<h2 class=\"\">No Access to [PRODUCT NAME]</h2>\n\t\t<p>[PRODUCT DESCRIPTION].  To read more about the details of [PRODUCT NAME] click the learn more button.</p>\n\t\t<div class=\"flex flex_row gap_3 justify_center\">\n\t\t\t<a href=\"[PRODUCT MARKETING URL]\" class=\"w_100 block max-w_20 btn btn-secondary c_white font_bold font_ui h:c_white shadow_overlap-light \" title=\"Navigate to [PRODUCT NAME] detail page\">Learn More</a>\n\t\t</div>\n\t</div>\n</div>\t\n<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative \">\n\t<div class=\"reading-typography flex flex_column gap_4\">\n\t\t<h2 class=\"font_bold\">Registration Steps</h2>\n\t\t<ol class=\"counter_reset m_0 p_0 ul_none flex_column flex gap_4\">\n\t\t\t<li class=\"flex flex_row\">\n\t\t\t\t<span class=\"c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4\"></span>\n\t\t\t\t<div class=\"flex_auto\">\n\t\t\t\t\t<p>To purchase, please click the \"Register\" button below. Once you have completed your purchase, please <strong class=\"uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap\">wait 15 minutes</strong> to allow the system to process the information. </p>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t\t<li class=\"flex flex_row gap_3 justify_center\">\n\t\t\t\t<a title=\"register for the  [PRODUCT NAME]\" href=\"https://www.acc.org/Education-and-Meetings/Meetings/Meeting-Items/2022/01/01/01/04/ACC-Anywhere-ACC22-On-Demand\" class=\"w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light \">Register</a>\n\t\t\t</li>\n\t\t\t<li class=\"flex flex_row\">\n\t\t\t\t<span class=\"c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4\"></span>\n\t\t\t\t<div class=\"flex_auto\">\n\t\t\t\t\t<p>If you have just registered and you have <strong class=\"uppercase m-x_2 p_2 bg_warning-3 br_radius p-x_3 font_xbold nowrap\">waited 15 minutes</strong> and you have arrived here in error click the \"Refresh Access\" Button to get into [PRODUCT NAME].</p>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t\t<li class=\"flex flex_row gap_3 justify_center\">\n\t\t\t\t<a title=\"reset the access from you account\" href=\"[EVENT AUTHENTICATION URL]\" class=\"w_100 block max-w_20 btn btn-primary c_white font_bold font_ui h:c_white shadow_overlap-light \">Refresh Access</a>\n\t\t\t</li>\n\t\t\t<li class=\"flex flex_row\">\n\t\t\t\t<span class=\"c_primary counter counter_increment flex_none float_left font_9 font_accent font_xbold lh_0 p-r_4 self_top p-t_4\"></span>\n\t\t\t\t<div class=\"flex_auto\">\n\t\t\t\t\t<div class=\"flex flex_row:md flex_column\">\n\t\t\t\t\t\t<div class=\"reading-typography flex flex_column gap_4 flex_50 p-r_5:md\">\n\t\t\t\t\t\t\t<p class=\"font_bold\">If you believe you have received this message in error, please contact <a href=\"mailto:MemberCare@ACC.org\"><em>Member Care</em></a> </p>\n\t\t\t\t\t\t\t<ul class=\"ul_none p_3\">\n\t\t\t\t\t\t\t\t<li class=\"font_bold\">For additional questions, please contact ACC Member Care.</li>\n\t\t\t\t\t\t\t\t<li><strong>Email:</strong> <a href=\"mailto:MemberCare@ACC.org\"><em>MemberCare@ACC.org</em></a></li>\n\t\t\t\t\t\t\t\t<li><strong>Phone:</strong> 202-375-6000 ext. 5603   </li>\n\t\t\t\t\t\t\t\t<li><strong>Toll-Free:</strong> 800-253-4636 ext. 5603</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\" flex_50\"`>\n\t\t\t\t\t\t\t{{> 'Sub.System.MemberData' }}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ol>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.System.AccessTroubleShooting\n\n\n*/","/*\n\nClass Lists\n\nThis is a combination of the classes that build common decorative elements or spacing in the design.\n\n\nMarkupWrapperClasses: \n \nWeight:99999\n \nStyleguide Sub.ClassList\n*/\n/*\n\nBody Classes\n\nThe list of classes used on the body tag\n\nMarkup:\nbg_black-4 w_100 p_3:md p_2\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Body\n*/\n\n/*\n\nPage Area\n\nThe list of classes used on the body tag\n\nMarkup:\np_2 p_3:md isolation_isolate br_radius bg_white-7\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Page\n*/\n\n/*\n\nInset Level_up\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_up bg_white-7 br_radius br_solid br_1 br_black-2\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.up \n*/\n/*\n\nInset Level_up-1\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.up-1 \n*/\n\n/*\n\nInset level_down\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_down bg_black-_05 shadow_emboss-light br_radius br_solid br_1 br_black-1\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.down\n*/\n\n/*\n\nInset level_down-1\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.down-1\n*/\n\n/*\n\nInset level_down-2\n\nThe list of classes used on the body tag\n\nMarkup:\ninset-level_down-2 bg_black-2 shadow_emboss-light br_solid br_1 br_black-3 br_radius  texture_light\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.down-2\n*/\n\n\n/*\n\nInset padding Level 0\n\nThe list of classes used on the body tag\n\nMarkup:\np_2 p_3:md\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding\n\n*/\n\n/*\n\nInset padding Level 1\n\nThe list of classes used on the body tag\n\nMarkup:\np_2 p_3:md p_4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding.up-1\n\n*/\n\n/*\n\nInset Margin Level -1\n\nThe list of classes used on the body tag\n\nMarkup:\nm-x_n2 m-x_n3:md m-x_n4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.margin.down-1\n\n*/\n\n/*\n\nInset padding Level 2\n\nThe list of classes used on the body tag\n\nMarkup:\np_3 p_4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding.up-2\n\n*/\n\n\n/*\n\nInset padding Level 3\n\nThe list of classes used on the body tag\n\nMarkup:\np_4\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding.up-3\n\n*/\n/*\n\nInset padding Level 4\n\nThe list of classes used on the body tag\n\nMarkup:\np_4 p_5:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Inset.padding.up-4\n\n*/\n\n\n\n/*\n\nVertical padding Level 0\n\nThe list of classes used on the body tag\n\nMarkup:\np-y_2 p-y_3:md\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Vertical.padding\n\n*/\n\n/*\n\nVertical padding Level 1\n\nThe list of classes used on the body tag\n\nMarkup:\np-y_2 p-y_3:md p-y_4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Vertical.padding.up-1\n\n*/\n\n/*\n\nVertical padding Level 2\n\nThe list of classes used on the body tag\n\nMarkup:\np-y_3 p-y_4:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Vertical.padding.up-2\n\n*/\n\n/*\n\nVertical padding Level 3\n\nThe list of classes used on the body tag\n\nMarkup:\np-y_4 p-y_5:lg\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Combination of classes used as a common decorators.\n\nStyleguide Sub.ClassList.Vertical.padding.up-3\n\n*/\n\n/*\n\nBorder Top Primary\n\nUsed in dividing lists of items.\n \nMarkup:\n br-t_1  br_primary-2 br_solid\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.ClassList.Border.PrimaryTop\n*/\n/*\n\nBorder Top Primary\n\nUsed in dividing lists of items.\n \nMarkup:\nbr-t_1 br_black-3 br_solid\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.ClassList.Border.BlackTop\n*/\n","/*\n\nCredits Chiclets\n\nCredits show in the design when they are available to be claimed by the media they are on. \n\ndefault\t\t -  there is no default version of credits it is always a type.\nCME\t\t -  CME Credits\nCNE\t -  CNE Credits\n\nMarkup:\n<span class=\"bg_{{ modifier_class }}-n2 block br_1 br_black-3 br_round br_solid c_white font_bold font_ui lh_1 p-y_1 p_2 text-shadow_black-1 text_center\">{{ modifier_class }}</span>\n\nMarkupWrapperClasses:p_2 \n\nWeight: 0\n\nStyleguide Sub.Credit\n*/\n\n/*\n\nFavorite/Bookmark Button\n\nThis button has an active and deactivate state depending on the users select of that media item. \n\ndefault\t\t -   plan button\nactive        -  the media item is selected\n\nMarkup:\n<a class=\"inline-block m-x_n3 m-t_n1 {{modifier_class}}\">\n    <span class=\"fa-stack fa-2x a:c_alert-n2 c_secondary-2 h:c_alert-n3\">\n        <i class=\"fas fa-bookmark fa-stack-2x c_inherit-all text-shadow_black-1\"></i>\n        <i class=\"fa-heart c_black-4 h:c_white a:c_white fa-stack-1x fas font-size_down-1  text-shadow_black-n1\"></i>\n    </span>\n</a>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\n\nStyleguide Sub.ActionButtons.Favorite\n*/\n\n/*\n\nSection Header\n\nSection Headers are styled the same\n\ndefault - plan header\n \nMarkup:\n<header class=\"font_display font_regular  c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 \"><h2 class=\"lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1\">{{modifier_class}}</h2></header>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Section.h2\n*/\n/*\n\nSection Header Down\n\nSection Headers are styled the same\n\ndefault - plan header\n \nMarkup:\n<header class=\"font_display font_regular  c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 \"><h3 class=\"lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0\">{{modifier_class}}</h3></header>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Section.h3\n*/\n/*\n\nSection Header\n\nSection Headers are styled the same\n\ndefault - plan header\n \nMarkup:\n<header class=\"p-x_4 font_display font_regular  c_primary-n1 m-b_3 lh_1 m-b_4:lg m-t_3 \"><h2 class=\"lh_1 m_0 font_regular lowercase font_3:lg font_2:md font_1\">{{modifier_class}}</h2></header>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Section.h2.with-padding\n*/\n/*\n\nSection Header Down\n\nSection Headers are styled the same\n\ndefault - plan header\n \nMarkup:\n<header class=\"p-x_4 font_display font_regular  c_primary-n2 m-b_2 lh_1 m-b_3:lg m-t_2 \"><h3 class=\"lh_1 m_0 font_regular lowercase font_2:lg font_1:md font_0\">{{modifier_class}}</h3></header>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Section.h3.with-padding\n*/\n/*\n\nProgress Player Bar\n\nshows users where they left off with the player. \n\ndefault\t\t -  Has zero player\n50          - 50% played \n\nMarkup:\n<aside class=\"bg_secondary-3 h:bg_primary-3 p-x_4 p-y_3 br_radius flex flex_row texture_dust relative\">\n    <a class=\"expanded-click-area\" href=\"player@{{ modifier_class }}\"><i class=\"fa fa-play p-x_3 c_primary\"></i></a>\n    <div class=\"progress w_100 self_center br_black-2 br_solid bg_black-4 br_1 br_round h_0lh font_n4\">\n        <div class=\"progress-bar bg_accent\" role=\"progressbar\" style=\"width: {{ modifier_class }}%\" aria-valuenow=\"{{ modifier_class }}\" aria-valuemax=\"100\"></div>\n    </div>\n</aside>  \n\nStyleguide Sub.ProgressBar\n*/\n\n\n\n/*\n\nTime Markers\n\nshows users where they results can be found in the result. \n \nMarkup:\n<aside class=\"flex flex_row flex_wrap font_ui {{> 'Sub.ClassList.Inset.down-1'}} {{> 'Sub.ClassList.Inset.padding'}}\">\n    <strong class=\"p-r_3 block w_100\">Search Word Found At These Time Markers</strong>\n    <ul class=\"ul_inline-pipe\">\n        <li class=\"c_primary uppercase font_medium\"><a href=\"#\" class=\"link\"><i class=\"fas fa-play c_primary font-size_down-1 self_center\"></i> start</a></li>\n        <li><a href=\"#\" class=\"link\"><i class=\"fas fa-step-forward c_primary font-size_down-1 self_center\"></i>  0:53</a></li>\n        <li><a href=\"#\" class=\"link\"><i class=\"fas fa-step-forward c_primary font-size_down-1 self_center\"></i>  2:30</a></li>\n    </ul>\n</aside>\n\nMarkupWrapperClasses: \n\n\nClassList:\nSub.ClassList.Inset.down-1 - Inset Down 1\nSub.ClassList.Inset.padding - Inset Padding\n \nWeight:0\n \nStyleguide Sub.Search.TimeMarkers\n*/\n\n/*\n\nCarousel Custom Nav\n\nTiny Slider custom\n\nMarkup:\n<div class=\"customize-tools\">\n    <ul class=\"controls ul_none font-size_up-2 c_black-6\" id=\"slider1-customize-controls\" aria-label=\"Carousel Navigation\" tabindex=\"0\">\n        <li class=\"prev bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light\" aria-controls=\"customize\" tabindex=\"-1\" data-controls=\"prev\">\n            <i class=\"fal fa-chevron-left\"></i>\n        </li>\n        <li class=\"next bg_white-8 h:bg_black-1 h:c_black-9 filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light\" aria-controls=\"customize\" tabindex=\"-1\" data-controls=\"next\">\n            <i class=\"fal fa-chevron-right\"></i>\n        </li>\n    </ul>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Sub.Carousel.CustomTools\n*/\n/*\n\nCarousel Custom Nav Vertical\n\nTiny Slider custom\n\nMarkup:\n<div class=\"customize-tools relative\">\n    <ul class=\"absolute b_4 r_0 l_0 controls ul_none font-size_up-2 c_black-6 flex flex_row gap-x_4\" id=\"slider-customize-controls-vertical\" aria-label=\"Carousel Navigation\" tabindex=\"0\">\n        <li class=\"prev bg_white-8 block br-br_radius br-l_0 br-tr_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50\" aria-controls=\"customize\" tabindex=\"-1\" data-controls=\"prev\">\n            <i class=\"fal fa-chevron-up\"></i>\n        </li>\n        <li class=\"next bg_white-8 block br-bl_radius br-r_0 br-tl_radius br_1 br_primary-3 br_solid filter_blur flex flex_auto flex_column h:bg_black-1 h:c_black-9 items_center justify_center p_3 shadow_overlap-light w_50\" aria-controls=\"customize\" tabindex=\"-1\" data-controls=\"next\">\n            <i class=\"fal fa-chevron-down\"></i>\n        </li>\n    </ul>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Sub.Carousel.CustomToolsVertical\n*/\n/*\n\nCarousel Custom Disabled\n\nTiny Slider custom\n\nMarkup:\n<div class=\"customize-tools\">\n<ul class=\"controls ul_none font-size_up-2 c_black-6\" id=\"slider3-customize-controls\" aria-label=\"Carousel Navigation\" tabindex=\"0\">\n<li class=\"disabled prev bg_white-8 filter_blur absolute t_1 b_1 l_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-l_0 br-br_radius br-tr_radius shadow_overlap-light\" aria-controls=\"slider3\" tabindex=\"-1\" data-controls=\"prev\">\n    <i class=\"fal fa-chevron-left opacity_3\"></i>\n</li>\n<li class=\"disabled next bg_white-8  filter_blur absolute t_1 b_1 r_0 p_3 flex_column flex justify_center items_center br_primary-3 br_solid br_1 br-r_0 br-bl_radius br-tl_radius shadow_overlap-light\" aria-controls=\"slider3\" tabindex=\"-1\" data-controls=\"next\">\n    <i class=\"fal fa-chevron-right opacity_3\"></i>\n</li>\n</ul>\n</div>\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Sub.Carousel.CustomTools.Disabled\n*/\n\n/*\n\nDuration\n\nThe length of the clip of video or all the of the lengths of the combined clips. \n\nMarkup:\n<li class=\"inline-block p-r_3 p_2 lh_0\">\n    <span class=\"font-size_up c_accent-n2 block\"><i class=\"fal fa-clock\"></i> 15</span>\n    minutes\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\n\n\nStyleguide Sub.Sub.Data.Duration \n*/\n\n/*\n\nPresentation Count\n\nNumber of presentations in the session. \n\nMarkup:\n<li class=\"inline-block p-r_3 p_2 lh_0\">\n    <span class=\"font-size_up c_accent-n2 block\">4</span>\n    presentations\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Sub.Sub.Data.PresentationCount\n*/\n/*\n\nAttachment Link\n\nLink to attachments. it should state pdf or zip depending \n\nMarkup:\n<li class=\"inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0\">\n    <a href=\"#\" class=\"undecorated h:undecorated expanded-click-area\">\n    <span class=\"font-size_up c_primary-n2 block\"><i class=\"fal fa-paperclip p-r_3\"></i> <span class=\"p-r_3\">PDF</span></span> \n        Attachments\n    </a>\n</li>\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Sub.Sub.Data.AttachmentLink\n*/\n\n/*\n\nAttachment Link ZIP\n\nLink to attachments. it should state pdf or zip depending \n\nMarkup:\n<li class=\"inline-block br_radius p-x_3 m-l_n3 p_2 z_3 self_end relative h:bg_black-2 lh_0\">\n    <a href=\"#\" class=\"undecorated h:undecorated expanded-click-area\">\n    <span class=\"font-size_up c_primary-n2 block\"><i class=\"fal fa-paperclip p-r_3\"></i><span class=\"p-r_3\">ZIP</span></span> \n        Attachments\n    </a>\n</li>\n\nMarkupWrapperClasses: ul_none                                                                           \n\nWeight: 0\n\nStyleguide Sub.Sub.Data.AttachmentLink.ZIP\n*/\n\n/*\n\nLike Buttons\n\nThis buttons are used to rate the videos and download the attachments.\n \nMarkup:\n<ul class=\"ul_none flex flex_row lowercase flex flex_row gap_2\">\n    <li class=\"br_solid br_black-3 br_radius br_1 h:bg_black-3\">\n        <a class=\"p-y_3 p-x_4 \" href=\"#\"><i class=\"fal fa-thumbs-up\"></i></a>\n    </li>\n    <li class=\"br_solid br_black-3 br_radius br_1 h:bg_black-3\">\n        <a class=\"p-y_3 p-x_4 \" href=\"#\"><i class=\"fal fa-thumbs-down\"></i></a>\n    </li>\n    <li class=\"br_solid br_black-3 br_radius br_1 h:bg_black-3 m-l_auto\">\n        <a class=\"p-y_3 p-x_4 \" href=\"#\"><i class=\"fal fa-paperclip\"></i> Attachments</a>\n    </li>\n</ul>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.ActionButtons.LikeAndAttachments\n*/\n/*\n\nBreadcrumb First Item\n\nThe not first nor last item in the breadcrumb.\n \nMarkup:\n<li class=\"flex flex_row flex_none h:c_primary lh_2 m-b_1 relative\">\n    <i class=\"fal fa-home fa-fw flex_none self_center c_primary font-size_up \"></i>\n    <a href=\"../home\" class=\"inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap\" title=\"navigate to home page\">\n        <span class=\"display_none flex_auto inline:md self_center m-l_3\">Home</span>\n    </a>\n</li>\n\nMarkupWrapperClasses: ul_none\n \nWeight:0\n \nStyleguide Sub.Component.Navigation.Breadcrumb.FirstItem\n*/\n\n/*\n\nBreadcrumb Not-First Item\n\nThe not first nor last item in the breadcrumb.\n\nSearch - Search Page\nSession Name - Session Page\n \nMarkup:\n<li class=\"flex flex_row flex_auto flex_50 h:c_primary lh_2 m-b_1 overflow_hidden relative\">\n    <i class=\"fal fa-chevron-left fa-fw m-x_3 flex_none self_center c_primary font-size_down\"></i>\n    <a href=\"../watching\" class=\"inherit_all h:underline undecorated expanded-click-area overflow_ellipsis flex flex_nowrap nowrap\"  title=\"navigate to X Page\">\n        <span class=\" flex_auto self_center\">Page Type Label</span>\n        <span class=\" flex_auto self_center display_inline:md display_none\">{{modifier_class}}</span>\n    </a>\n</li>\n\nMarkupWrapperClasses: ul_none\n \nWeight:0\n \nStyleguide Sub.Component.Navigation.Breadcrumb.NotFirstItem\n*/\n/*\n\nBreadcrumb Last Item\n\nThe last Item in the Breadcrumb doesn't include a link to the page and is decorated as highlighted.\n\nSearch - Search Page\nSession Name - Session Page\n\nMarkup:\n<li class=\"flex flex_row flex_auto flex_50 lh_2 m-b_1 overflow_hidden relative c_black-7\">\n    <i class=\"fal fa-chevron-left c_primary-n2 m-x_3 self_center font-size_down\"></i>\n    <div class=\"flex flex_row flex_nowrap overflow_ellipsis nowrap\">\n        <span class=\" flex_auto self_center\">Page Type Label</span>\n        <span class=\" flex_auto self_center display_inline:md display_none font_medium\">{{modifier_class}}</span>\n    </div>\n</li>\n\nMarkupWrapperClasses: ul_none\n \nWeight:0\n \nStyleguide Sub.Component.Navigation.Breadcrumb.LastItem\n*/\n\n/*\n\nCredit Chiclets Horizontal\n\nHorizontal list of credit chiclets.\n \nMarkup:\n<ul class=\"flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase\">\n    <li class=\"lh_0 flex_none\">\n        {{> 'Sub.Credit' modifier_class='CME' }}\n    </li>\n    <li class=\"lh_0 flex_none\">\n        {{> 'Sub.Credit' modifier_class='CNE' }}\n    </li>\n    <li class=\"lh_0 flex_none\">\n        {{> 'Sub.Credit' modifier_class='AAPA' }}\n    </li>\n</ul>\n\nMarkupWrapperClasses: \n\nSubComponents:\nSub.Credit - Credit Chiclet\n \nWeight:0\n \nStyleguide Sub.Credit.Chiclets.Horizontal\n*/\n\n/*\nAuxiliary Data\n \nDescription: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.\n \nMarkup:\n<aside class=\"{{ modifier_class }}\">    \n    {{> \"Sub.FacultyList.AuxSession\"  modifier_class=\"\"}}\n    <h4 class=\"font-size_up c_black-6 font_medium capitalize\">\n        <i class=\"fas fa-file-certificate p-r_3\"></i> Credits\n    </h4>\n    <div class=\"p-y_3 {{> 'Sub.ClassList.Border.PrimaryTop'}} font-size_down-1\">\n        {{> \"Sub.Credit.Chiclets.Horizontal\" }}\n    </div>\n    <h4 class=\"font-size_up  c_black-6 font_medium\">\n        <i class=\"fas fa-tag p-r_3\"></i>\n        category\n    </h4>\n    <div class=\"{{> 'Sub.ClassList.Border.PrimaryTop'}} font-size_down\">\n        {{> \"Sub.Tags.Category\" }}\n    </div>\n    <h4 class=\"font-size_up  c_black-6 font_medium\">\n        <i class=\"fas fa-tags p-r_3\"></i> tags\n    </h4>\n    <div class=\"{{> 'Sub.ClassList.Border.PrimaryTop'}} font-size_down\">\n        {{> \"Sub.Tags.Filter\" }}\n    </div>\n</aside>\n\nSubComponents:\nSub.Credits.NonAccredited - Non Accredited\nSub.FacultyList.AuxSession - Session Faculty Lists\nSub.Credit.Chiclets.Horizontal - Credit Chiclets Horizontal\nSub.Tags.Category - Category\nSub.Tags.Filter - Tags\n\nClassList:\nSub.ClassList.Border.PrimaryTop - Border Primary Top\n \nWeight:0\n \nStyleguide Sub.Player.AuxData\n*/\n\n/*\nCategory Tag\n \nCategory Tags are singular tags that divide content.  An item can only have a single tag from a category group. \n \nMarkup:\n<ul class=\"ul_inline-comma\">\n  <li>Channel 1</li>\n  <li>{{>\"Sub.Data.Agenda.ChannelName\"}}</li>\n</ul>\n \n\nWeight:0\n \nStyleguide Sub.Tags.Category\n\n*/\n\n/*\nFilter Tags\n \nFilter Tags are decorative tags that are used to filter content. Many tags from a single group can be applied to a single item.\n \nMarkup:\n<ul class=\"ul_inline-comma\">\n    <li>Tag Name 1</li>\n    <li>Daugherty - Larkin</li>\n    <li>relationships</li>  \n    <li>web-readiness</li>\n</ul>\n \n\nWeight:0\n \nStyleguide Sub.Tags.Filter\n\n*/\n\n\n\n/*\n\nFooter Logo\n\nThe ACC Logo in the footer.\n \nMarkup:\n<div id=\"logo\" class=\"bg_white br_1 br_black-1 br_round br-br_radius br-tl_radius  br_solid flex flex_none flex_row items_center justify_center  shadow_bevel-light {{> 'Sub.ClassList.Inset.padding.up-1'}} {{ modifier_class}} \">\n    <h2 class=\"logo_condensed w_100 max-w_20\">American College of Cardiology</h2>\n</div>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Footer.Logo\n*/\n\n/*\n\nLegal RoadBlock Sub Components\n\nThe legal roadblock is a page that stops the user when they haven't accepted the terms of use or any other legal agreements needed for the use of the product.\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Legal\n*/\n/*\n\nLegal Content Block\n\nA legal block will block a user from the program if they user has not signed it.  If there is more then one user block all must be accepted before the user can proceed.\n \nMarkup:\n<article class=\"isolation_isolate p_1 p-b_4 relative\">\n    <nav class=\"r_0 sticky t_0 z_1\">\n        <div class=\"absolute flex flex_nowrap flex_row gap-x_3 r_4\">\n            <!--  Helper Jump links -->\n            <a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2\" href=\"#TopAgreement1\">\n                <span><i class=\"fas fa-arrow-up p-r_2\"></i>top</span>\n            </a>\n            <a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_2\" href=\"#Agreement1\">\n                <span><i class=\"fas fa-arrow-down p-r_2\"></i>scroll down</span>\n            </a>\n            <!--  Helper Jump links -->\n        </div>\n    </nav>\n    <header class=\"bg_white p-t_0 p-b_3 relative z_3\">\n        <h2 class=\"bg_white m-t_n2 m_0 {{> 'Sub.ClassList.Vertical.padding.up-1'}}\">ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement </h2>\n    </header>\n    <main class=\"z_0 isolation_isolate {{> 'Sub.ClassList.Vertical.padding.up-1'}} {{> 'Sub.ClassList.Border.PrimaryTop' }}\">\n    <!---  Agreement HTML START -->\n        <p class=\"font-size_up\">The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the \"Agreement\") between the American College of Cardiology Foundation (\"ACCF\") and You and your agents (\"You\" or “Your”) for the use of the ACC Anywhere 2022 (the \"Product”).    </p><p class=\"font-size_up\">\n            By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product. </p>\n        <p class=\"font-size_up\"><a href=\"#\" class=\"c_accent-n2 font_bold font_ui link\" target=\"_blank\">Click to Read Full Terms of Service.</a></p>\n            <p class=\"\">I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.</p>\n            <!---  Agreement HTML END -->\n    </main>\n</article>\n\nMarkupWrapperClasses: \n\nClassList:\nSub.ClassList.Vertical.padding.up-1 - Vertical Padding Up 1\nSub.ClassList.Border.PrimaryTop - Border Primary Top\n\nWeight:0\n \nStyleguide Sub.Legal.ContentBlock\n*/\n\n/*\n\nLegal Attestation Statement\n\nThis statement is used to attest that the user has read and accepted the legal agreement. This follows all Legal Content Blocks. Clicking the button will flip the `btn-secondary` state to 'btn-sucess active'\n\n.btn-success.active - the accepted state\n\nMarkup:\n<footer id=\"Agreement1\">\n    <div class=\"bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase\">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>\n    <button class=\"btn btn-secondary {{ modifier_class }} c_white h:undecorated float_right\"><i class=\"fas fa-check display_none a:inline-block\"></i> I agree</button>\n</footer>\n\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Legal.AgreeButton\n*/","\n/*\n\nLayouts\n\nThis app design is based on levels of inset and overlaps in grid areas.\n \nMarkupWrapperClasses: \n \nWeight: 100\n \nStyleguide Page.Layouts\n*/\n\n\n\n/*\n\nBase Grid Areas\n\nThe library base is a grid system that is used for the library page.\n \nMarkup:\n<div class=\"BODY_TAG-stand-in grid:md flex flex_column {{> \"Sub.ClassList.Body\"}}\">\t\n\t<div class=\"page-wrapper grid {{> \"Sub.ClassList.Page\"}}\">\t\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t<div class=\"grid-area_menuArea\">{{> \"Page.Layouts.GridFiller\"  modifier_class=\"M\"}}</div>\n\t\t\t<header class=\"grid-area_headerArea\">{{> \"Page.Layouts.GridFiller\"  modifier_class=\"BreadCrumb\"}}</header>\n\t\t\t<section class=\"grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md\">\n\t\t\t\t<aside class=\"grid-area_filterArea col-end_filterArea order_last order_unset:md\">\n\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Filter\"}}\n\t\t\t\t</aside>\n\t\t\t\t<div class=\"grid-area_contentArea grid:md flex flex_column columns_5 gap_4\">\n\t\t\t\t\t<div class=\"col-start_1 col-end_1\">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 1\"}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-start_2 col-end_2 \">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 2\"}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-start_3 col-end_3\">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 3\"}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-start_4 col-end_4\">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 4\"}}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"col-start_5 col-end_5\">\n\t\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Grid Area 5\"}}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t<div class=\"col-start col-end\">{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Footer\"}}</div>\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Page.Layouts.PageGrid\n*/\n\n\n\n.grid-template_page {\n\tgrid-template-columns: 4rem 1fr;\n\tgrid-template-rows:  auto 1fr  auto;\n\tgrid-template-areas: 'menuArea headerArea' 'menuArea mainArea' 'menuArea footerArea';\n}\n.grid-template_filterAndContent {\n\tgrid-template-columns: auto 1fr;\n\tgrid-template-rows: 1fr;\n\tgrid-template-areas: 'filterArea contentArea';\n}\n\n\n\n.grid-area_headerArea{\n\tgrid-area: headerArea;\n}\n.grid-area_menuArea{\n\tgrid-area: menuArea;\n}\n.grid-area_mainArea{\n\tgrid-area: mainArea;\n}\n.grid-area_footerArea{\n\tgrid-area: footerArea;\n}\n.grid-area_filterArea{\n\tgrid-area: filterArea;\n}\n.grid-area_contentArea{\n\tgrid-area: contentArea;\n}\n\n\n\n",null,"@import  \"../virtual/data/virtual.helper.randomWords\";\n/*\n\nPages\n\nMost of the pages in the design don't display correctly. in this styleguide because the the design is calculated off of the whole viewport.\n\nMarkupWrapperClasses: \n\nWeight: -100\n \nStyleguide Page.Pages\n*/\n/*\n\nSub Page No Filter\n\nThe sub pages have a common layouts.\n \nMarkup:\n<div class=\"BODY_TAG-stand-in grid {{> \"Sub.ClassList.Body\"}}\">\t\n\t<div class=\"page-wrapper grid {{> \"Sub.ClassList.Page\"}}\">\t\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> \"Component.Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"Component.Navigation.Breadcrumb\"}}\n\t\t\t<section class=\"grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md font_1:lg font_0\">\n\t\t\t\t<div class=\"grid:md flex flex_column columns_5 gap_4 col-start col-end\">\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t\t{{> \"Page.Layouts.SubGridFiller\"  modifier_class=\"Insert\"}}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> \"Component.Navigation.Footer.Links\" modifier_class=\"col-start col-end_4\" }}\n\t\t\t\t{{> \"Sub.Footer.Logo\"  modifier_class=\"col-start_4 col-end\" }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n \nWeight:0\n \nStyleguide Page.Pages.NoFilter\n*/\n\n/*\n\nSearch Page\n\nThe sub pages have a common layouts.\n \nMarkup:\n<div class=\"BODY_TAG-stand-in grid {{> \"Sub.ClassList.Body\"}}\">\t\n\t<div class=\"page-wrapper grid {{> \"Sub.ClassList.Page\"}}\">\t\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> \"Component.Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"Component.Navigation.Breadcrumb\"}}\n\t\t\t<section class=\"grid:md flex flex_column grid-template_filterAndContent grid-area_mainArea gap_4 p-y_3 p-y_0:md font_1:lg font_0\">\n\t\t\t\t{{> \"Sub.Search.FilterRail\"  modifier_class=\"grid-area_filterArea order_last order_unset:md\"}}\n\t\t\t\t<div class=\"grid-area_contentArea row-start_1\" id=\"SearchBarTop\"> \n\t\t\t\t\t{{> \"Sub.Search.Bar\"  }}\n\t\t\t\t\t<div class=\"{{> 'Sub.ClassList.Vertical.padding.up-1' }}\">\n\t\t\t\t\t\t{{> \"Sub.Search.ResultOverview\"}}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"{{> \"Sub.ClassList.Inset.down-1\"}} {{> 'Sub.ClassList.Inset.padding' }} \">\n\t\t\t\t\t<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\t\t\t\t\t\t<ul class=\"flex_column flex_row:md  nav\">\n\t\t\t\t\t\t\t{{> \"Sub.Component.Structures.Tabs.Tab.LinkActive\" }}\n\t\t\t\t\t\t\t{{> \"Sub.Component.Structures.Tabs.Tab.Link\" }}\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</nav>\n\t\t\t\t\t<div class=\"tab-content\" id=\"nav-tabContent\">\n\t\t\t\t\t\t<div class=\"tab-pane fade show active\" id=\"ActiveLink\" role=\"tabpanel\" aria-labelledby=\"ActiveLink\">\n\t\t\t\t\t\t\t<ul class=\"ul_none flex flex_column gap_3 gap_4:lg {{> 'Sub.ClassList.Vertical.padding.up-1' }}\">\n\t\t\t\t\t\t\t\t<li class=\"\">{{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\">{{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\">{{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\" }}</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t<div class=\"\"><button class=\"block btn btn-outline-secondary btn-sm m-b_3 m_auto p-x_5\">Load More</button></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"tab-pane fade\" id=\"BasicLink\" role=\"tabpanel\" aria-labelledby=\"BasicLink\">\n\t\t\t\t\t\t\t<ul class=\"ul_none flex flex_column gap_3 gap_4:lg {{> 'Sub.ClassList.Vertical.padding.up-1' }}\">\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\" }}</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t<div class=\"\"><button class=\"block btn btn-outline-secondary btn-sm m-b_3 m_auto p-x_5\">Load More</button></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> \"Component.Navigation.Footer.Links\" modifier_class=\"col-start col-end_4\" }}\n\t\t\t\t{{> \"Sub.Footer.Logo\"  modifier_class=\"col-start_4 col-end\" }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\nSubComponents:\nComponent.Navigation.Breadcrumb -  Breadcrumb Bar\n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n \nWeight:0\n \nStyleguide Page.Pages.Search\n*/\n\n\n\n/*\n\nSession Data Page\n\nThe sub pages have a common layouts.\n \nMarkup:\n<div class=\"BODY_TAG-stand-in grid:md {{> 'Sub.ClassList.Body'}}\">\n\t<div class=\"page-wrapper grid:md {{> 'Sub.ClassList.Page'}}\">\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> 'Component.Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}\n\t\t\t{{> 'Component.Navigation.Breadcrumb'}}\n\t\t\t<section class=\"flex flex_column font_0 font_1:lg gap_4 grid-area_mainArea columns_6 columns_5:lg grid:md p-y_0:md p-y_3\">\n\t\t\t\t<div class=\"col-start col-end_3:lg col-end_4 flex flex_column gap_4 row-start_1\">\n\t\t\t\t\t<section class=\"{{>'Sub.ClassList.Inset.up-1'}}\">\n\t\t\t\t\t\t<div class=\"flex flex_row font_ui justify_start relative w_100\">\n\t\t\t\t\t\t<main class=\"flex flex_auto flex_column font_0 font_1:md font_2:lg isolation_isolate justify_between relative w_100 {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t\t<h1 class=\"c_primary c_primary-n3 font-size_up-2 font_display font_regular lh_1 m_0\"> {{> 'Sub.Data.Session.Title'}} #{ call(get-function('randomWords'), random(10)) }</h1>\n\t\t\t\t\t\t\t</main>\t\n\t\t\t\t\t\t\t<aside class=\"flex_none m-t_n2 m-t_n2:md m-t_n3:lg p-x_3:md\">\n\t\t\t\t\t\t\t\t<ul class=\"flex flex_column flex_wrap gap_2 justify_start self_center ul_none uppercase p-x_3\">\n\t\t\t\t\t\t\t\t\t<li class=\"flex_auto\">\n\t\t\t\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.Favorite' }}\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</aside>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<nav class=\"{{>'Sub.ClassList.Inset.padding.up-3'}} font_2:lg font_1\">\n\t\t\t\t\t\t\t<h3 class=\"c_black-8\">How did you like this session?</h3>\n\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.LikeAndAttachments' }}\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t\t<section class=\"font_0 m_3 {{>'Sub.ClassList.Inset.down-1'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t\t{{> 'Sub.Section.h3' modifier_class='session details'}} \n\t\t\t\t\t\t\t{{> 'Sub.Player.AuxData'}}\n\t\t\t\t\t\t</section>\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"col-end col-start_3:lg col-start_4 row-start_1\">\n\t\t\t\t\t<section class=\"{{>'Sub.ClassList.Inset.up'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t<div class=\"flex flex_row items_center\">\n\t\t\t\t\t\t<span class=\"c_black-4 font_1 font_2:md font_3:lg font_display font_regular lh_1 m-b_3 m-b_4:lg m-t_3 p-l_3 p-r_4 self_end\"><i class=\"fa-list-alt fas font-size_up-2\"></i></span>\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class='presentation playlist'}}</div>\n\t\t\t\t\t\t<div class=\"font_0 font_1:lg relative isolation_isolate\">\n\t\t\t\t\t\t\t<ul class=\"flex flex_column justify_stretch gap_4 ul_none\">\n\t\t\t\t\t\t\t\t{{> \"Program.Presentation.List\"}}\n\t\t\t\t\t\t\t\t{{> \"Program.Presentation.List\"}}\n\t\t\t\t\t\t\t\t{{> \"Program.Presentation.List\"}}\n\t\t\t\t\t\t\t\t{{> \"Program.Presentation.List\"}}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> \"Component.Navigation.Footer.Links\" modifier_class=\"col-start\n\t\t\t\tcol-end_4\" }} {{> \"Sub.Footer.Logo\"\n\t\t\t\tmodifier_class=\"col-start_4 col-end\" }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n \nWeight:0\n \nStyleguide Page.Pages.Session\n*/\n\n/*\n\nPresentation Player\n\nThe sub pages have a common layouts.\n \nMarkup:\n<div class=\"BODY_TAG-stand-in grid:md {{> 'Sub.ClassList.Body'}}\">\n\t<div class=\"page-wrapper grid:md {{> 'Sub.ClassList.Page'}}\">\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> 'Component.Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}\n\t\t\t{{> 'Component.Navigation.Breadcrumb'}}\n\t\t\t<section class=\"flex flex_column font_0 font_1:lg gap_4 grid-area_mainArea columns_6 columns_5:lg grid:md p-y_0:md p-y_3\">\n\t\t\t\t<div class=\"col-start col-end_4:lg col-end flex flex_column gap_4 row-start_1\">\n\t\t\t\t\t<section class=\"{{>'Sub.ClassList.Inset.up-1'}}\">\n\t\t\t\t\t\t<div class=\"flex flex_row font_ui justify_start relative w_100\">\n\t\t\t\t\t\t<main class=\"flex flex_auto flex_column font_0 font_1:md font_2:lg isolation_isolate justify_between relative w_100 {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t\t<h1 class=\"c_black-5 font-size_down-1 font_medium font_ui lh_1 m-b_2 m-t_2 m_0\">{{> 'Sub.Data.Session.Title'}} #{ call(get-function('randomWords'), random(10)) }</h1>\n\t\t\t\t\t\t\t<h2 class=\"c_primary c_primary-n3 font-size_up-2 font_display font_regular lh_1 m_0\"> {{> 'Sub.Data.Presentation.Title'}} #{ call(get-function('randomWords'), random(10)) } </h2>\n\t\t\t\t\t\t\t</main>\t\n\t\t\t\t\t\t\t<aside class=\"flex_none m-t_n2 m-t_n2:md m-t_n3:lg p-x_3:md\">\n\t\t\t\t\t\t\t\t<ul class=\"flex flex_column flex_wrap gap_2 justify_start self_center ul_none uppercase p-x_3\">\n\t\t\t\t\t\t\t\t\t<li class=\"flex_auto\">\n\t\t\t\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.Favorite' }}\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</aside>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"player hd full flex_auto w_100 p_4:lg p_3\">\n\t\t\t\t\t\t\t<div class=\"bg_acc aspect_16x9 c_white text_center  justify_center flex items_center\">VIDEO EMBED</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<nav class=\"{{>'Sub.ClassList.Inset.padding.up-3'}} font_2:lg font_1\">\n\t\t\t\t\t\t\t{{> 'Sub.Search.TimeMarkers'}}\n\t\t\t\t\t\t\t<h3 class=\"c_black-8\">How did you like this presentation?</h3>\n\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.LikeAndAttachments' }}\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"col-end col-start_4:lg col-start flex flex_column flex_row:md flex_column:lg gap_4\">\n\t\t\t\t\t<section class=\"flex_auto flex_50:md  flex_auto:lg flex_none:lg font_0 {{>'Sub.ClassList.Inset.up'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class='presentation details'}}\n\t\t\t\t\t\t{{> 'Sub.Player.AuxData'}}\n\t\t\t\t\t</section>\t\n\t\t\t\t\t<section class=\"flex_auto flex_50:md  flex_auto:lg flex_none:lg  font_0 {{>'Sub.ClassList.Inset.up'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class='session details'}}\n\t\t\t\t\t\t<div class=\"p-y_3 br-t_1 br_black-2 br_solid font-size_down\">\n\t\t\t\t\t\t\t{{> \"Sub.FacultyList.AuxSession\"  modifier_class=\"\"}}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<section class=\"{{>'Sub.ClassList.Inset.down-1'}} {{>'Sub.ClassList.Inset.padding.up-2'}}\">\n\t\t\t\t\t\t\t<div class=\"flex flex_row items_center\">\n\t\t\t\t\t\t\t<span class=\"c_black-4 font_0 font_1:md font_2:lg font_display font_regular lh_1 m-b_3 m-b_4:lg m-t_3 p-l_3 p-r_4 self_end\"><i class=\"fa-list-alt fas font-size_up-2\"></i></span>\n\t\t\t\t\t\t\t{{> 'Sub.Section.h3' modifier_class='presentation playlist'}}</div>\n\t\t\t\t\t\t\t<div class=\"font_n2 font_n1:lg relative isolation_isolate\">\n\t\t\t\t\t\t\t\t<ul class=\"flex flex_column justify_stretch gap_3 ul_none\">\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.Condensed\" modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.CondensedPlaying\" modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.Condensed\" modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.Condensed\" modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</section>\n\t\t\t\t\t</section>\t\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> \"Component.Navigation.Footer.Links\" modifier_class=\"col-start\n\t\t\t\tcol-end_4\" }} {{> \"Sub.Footer.Logo\"\n\t\t\t\tmodifier_class=\"col-start_4 col-end\" }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n \nWeight:0\n \nStyleguide Page.Pages.Presentation\n*/\t\n\n/*\n\nCredit Page\n\nCredits Pages\n \nMarkup:\n<a class=\"link\" href=\"https://acc-style.github.io/PrototypingACCorg/library/credits/\">LINK TO PROTOTYPE FOR THIS PAGE</a>\n\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n \nWeight:1000\n \nStyleguide Page.Pages.Credit\n*/\n\n\n/*\n\nLegal Roadblock\n\nA roadblock page that forces users to log in to view and agree to the legal terms of the product.\n \nMarkup:\n<div class=\"BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100\">\n\t<div class=\"bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light\">\n\t\t<div class=\"bg_black-2 br_radius\">\n\t\t\t<section class=\"reading-typography inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_5:lg p_4 flex flex_column gap_3\">\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"relative z_0 br_radius overflow_hidden \">\n\t\t\t\t\t\t<picture class=\"w_100 \">\n\t\t\t\t\t\t\t<source class=\"w_100\" srcset=\" https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg\" media=\"(min-width: 400px)\">\n\t\t\t\t\t\t\t<img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg\" class=\"w_100\" alt=\"\">\n\t\t\t\t\t\t</picture>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center\">\n\t\t\t\t\t\t<h1 class=\"c_primary font_regular font_display\">Legal Agreements</h1>\n\t\t\t\t\t\t<p class=\"font-size_up font_bold\"> Please agree to all the legal agreements. </p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative \" id=\"TopAgreement1\">\n\t\t\t\t\t<div class=\"relative isolation_isolate\">\n\t\t\t\t\t\t<div class=\"sticky t_0 r_0 z_1\">\n\t\t\t\t\t\t\t<div class=\"absolute r_4 t_0 flex flex_row flex_nowrap gap-x_3\">\n\t\t\t\t\t\t\t\t<!--  Helper Jump links -->\n\t\t\t\t\t\t\t\t<a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#TopAgreement1\">\n\t\t\t\t\t\t\t\t\t<span><i class=\"fas fa-arrow-up p-r_2\"></i>top</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t<a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#Agreement1\">\n\t\t\t\t\t\t\t\t\t<span><i class=\"fas fa-arrow-down p-r_2\"></i>scroll down</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t<!--  Helper Jump links -->\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"bg_white br-b_1 br_primary br_solid m-t_n2 p-t_0 relative z_3\">\n\t\t\t\t\t\t\t<h2>ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement </h2>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<main class=\"z_0 isolation_isolate\">\n\t\t\t\t\t\t\t<p class=\"font-size_up\">The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the \"Agreement\") between the American College of Cardiology Foundation (\"ACCF\") and You and your agents (\"You\" or “Your”) for the use of the ACC Anywhere 2022 (the \"Product”).    </p><p class=\"font-size_up\">\n\t\t\t\t\t\t\t\tBy clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product. </p>\n\t\t\t\t\t\t\t<p class=\"font-size_up\"><a href=\"#\" class=\"c_accent-n2 font_bold font_ui link\" target=\"_blank\">Click to Read Full Terms of Service.</a></p>\n\t\t\t\t\t\t\t\t<p class=\"\">I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.</p>\n\t\t\t\t\t\t</main>\n\t\t\t\t\t</div>\n\t\t\t\t\t<footer id=\"Agreement1\">\n\t\t\t\t\t\t<div class=\"bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase\">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>\n\t\t\t\t\t\t<a href=\"#\" class=\"btn btn-success c_white h:undecorated float_right\"><i class=\"fas fa-check\"></i> I agree</a>\n\t\t\t\t\t</footer>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative isolation_isolate\" id=\"TopAgreement2\">\n\t\t\t\t\t<div class=\"relative\">\n\t\t\t\t\t\t<div class=\"sticky t_0 r_0 z_1\">\n\t\t\t\t\t\t\t<div class=\"absolute r_4 t_0 flex flex_row flex_nowrap gap-x_3\">\n\t\t\t\t\t\t\t\t<!--  Helper Jump links -->\n\t\t\t\t\t\t\t\t<a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#TopAgreement2\">\n\t\t\t\t\t\t\t\t\t<span><i class=\"fas fa-arrow-up p-r_2\"></i>top</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t<a class=\"c_white br-tl_square br-tr_square br_radius btn btn-accent btn-sm grid items_center justify_center m-l_auto self_center shadow_3\" href=\"#Agreement2\">\n\t\t\t\t\t\t\t\t\t<span><i class=\"fas fa-arrow-down p-r_2\"></i>scroll down</span>\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t<!--  Helper Jump links -->\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"bg_white br-b_1 br_primary br_solid m-t_n2 p-t_0 relative z_3\">\n\t\t\t\t\t\t\t<h2>GDPR, Cookies and Privacy</h2>\n\t\t\t\t\t\t\t<p class=\"font-size_up\"> Iure ut ratione magnam similique delectus deserunt occaecati.</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<main class=\"z_0 isolation_isolate\">\n\t\t\t\t\t\t\t<p> Alias nulla qui eos fuga eos eligendi aut tempora. Nisi dicta aut non totam illo consequuntur. Aut aut voluptas est aspernatur placeat distinctio similique dolore laboriosam. Iure velit doloremque dolorum maiores praesentium. Animi exercitationem reiciendis incidunt rerum. Quam consequatur maiores officiis sit enim quidem.Libero dolores aspernatur consequatur labore consequatur sint sint atque. Quo commodi quod repellendus laborum natus amet. Enim aliquam sunt. Nesciunt repellat provident mollitia. Quis nemo modi. Unde ut nisi. Laboriosam et natus saepe a enim aut in voluptates quia. Sed libero alias voluptatum soluta accusantium nesciunt commodi. Eaque cumque quos neque cumque maiores. </p>\n\t\t\t\t\t\t</main>\n\t\t\t\t\t</div>\n\t\t\t\t\t<footer id=\"Agreement2\">\n\t\t\t\t\t\t<div class=\"bg_acc br_radius c_white font_2 font_bold font_medium font_ui lh_1 m-b_3 p-y_4 p_3 text_center uppercase\">By Clicking The Button Below, I Hereby Affirm That I Have Read, Fully Understand, And Agree To The Above Statements. </div>\n\t\t\t\t\t\t<a href=\"#\" class=\"btn btn-secondary c_white h:undecorated float_right\">I agree</a>\n\t\t\t\t\t</footer>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"inset-level_up-1 bg_white br_radius relative p_4 text_center\">\n\t\t\t\t\t<h4 class=\"font_bold c_primary-n2\"> You can continue when all legal terms are agreed to. </h4>\n\t\t\t\t\t<a href=\"#\" class=\"btn btn-disabled disabled block\">Continue</a>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</div> \n \n\nMarkupWrapperClasses:\n\nWeight:-100\n \nStyleguide Page.Pages.OUTSIDE_APP.Legal\n*/\n\n\n/*\n\nNo Access\n\nIf a user is logged in but does not have access to the page, they will be redirected to this page.\n \nMarkup:\n<div class=\"BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100\">\n\t<div class=\"bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light\">\n\t\t<div class=\"bg_black-2 br_radius\">\n\t\t\t<section class=\" inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_4:lg p_3 flex flex_column gap_4 \">\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"relative z_0 br_radius overflow_hidden reading-typography \">\n\t\t\t\t\t\t<picture class=\"w_100 \">\n\t\t\t\t\t\t\t<source class=\"w_100\" srcset=\" https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg\" media=\"(min-width: 400px)\">\n\t\t\t\t\t\t\t<img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg\" class=\"w_100\" alt=\"\">\n\t\t\t\t\t\t</picture>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center\">\n\t\t\t\t\t\t<h1 class=\"font_display font_6 c_primary m-t_4\">Sorry, but it appears this account doesn't have access to [PRODUCT NAME ShortCode]</h1>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{{> 'Sub.System.AccessTroubleShooting'}}\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</div>\n \n\nMarkupWrapperClasses:\n\nWeight:-50\n \nStyleguide Page.Pages.OUTSIDE_APP.NoAccess\n*/\n\n\n\n/*\n\nEMPTY OUTSIDE APP TEMPLATE\n\nThere are some pages that live outside of access to the product.  They are used to provide information to the user.  This is the template for those pages.\n \nMarkup:\n<div class=\"BODY_TAG-stand-in bg_black-4 w_100 p_4:md p_2 grid:md min-h_100\">\n\t<div class=\"bg_white-8 br_radius grid:md isolation_isolate items_center justify_center m_auto max-w_50 p_2 p_3:md page-wrapper shadow_bevel-light\">\n\t\t<div class=\"bg_black-2 br_radius\">\n\t\t\t<section class=\"reading-typography  inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius p_4:lg p_3 flex flex_column gap_4 \">\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"relative z_0 br_radius overflow_hidden \">\n\t\t\t\t\t\t<picture class=\"w_100 \">\n\t\t\t\t\t\t\t<source class=\"w_100\" srcset=\" https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg\" media=\"(min-width: 400px)\">\n\t\t\t\t\t\t\t<img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg\" class=\"w_100\" alt=\"\">\n\t\t\t\t\t\t</picture>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"bg_white br_1 br_black-3 br_radius br_solid inset-level_up-1 m-t_n5 m-x_5 p_4 relative shadow_bevel-light t_n5 text_center\">\n\t\t\t\t\t\t<h1 class=\"c_primary font_regular font_display\">No Access</h1>\n\t\t\t\t\t\t<p class=\"font-size_up font_bold\"> We are sorry you don't seem to have access to this product.</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2 p_4 relative \" id=\"TopAgreement1\">\n\t\t\t\t\t<!-- EMPTY  TEMPLATE SPACE FOR AGREEMENTS OR NO ACCESS. These Cards can be duplicated depending on need. -->\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t</div>\n</div>\n \n\nMarkupWrapperClasses:\n\nWeight:-50\n \nStyleguide Page.Pages.OUTSIDE_APP\n*/\n","@import  \"../virtual/data/virtual.helper.randomWords\";\n\n/*\n\nHome\n\nThe sub pages have a common layouts.\n \nMarkup:\n<div class=\"BODY_TAG-stand-in grid:md {{> 'Sub.ClassList.Body'}}\">\n\t<div class=\"page-wrapper grid:md {{> 'Sub.ClassList.Page'}}\">\n\t\t<div class=\"grid:md grid-template_page flex flex_column gap_4:md gap_3\">\n\t\t\t{{> \"Component.Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"Structures.Home.Header\" modifier_class=\"grid-area_headerArea\" }}\n\t\t\t<section class=\"grid:md flex flex_column columns_5 gap_4  grid-area_mainArea p-y_3 p-y_0:md font_1:lg font_0 w_100\">\n\t\t\t\t<div class=\"flex flex_column col-start col-end_5:lg col-end_4 font_0 font_1:lg font_ui font_regular w_100 {{> 'Sub.ClassList.Inset.up-1'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}\">\n                    {{> 'Sub.Section.h2' modifier_class='Featured' }}    \n                    {{> 'Structures.Home.Carousel'}}\n                    {{> 'Sub.Section.Footer'  modifier_class='Featured' }}\n                    {{> 'Sub.Section.h2' modifier_class='Hot Topics' }}\n                    {{> 'Structures.Home.Carousel.Empty' modifier_class='Hot Topics'}}\n                    {{> 'Sub.Section.Footer'  modifier_class='Hot Topics' }}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"flex flex_column col-start_5:lg col-end col-start_4 w_100\">\n\t\t\t\t\t<section class=\"font_0 font_1:lg font_ui font_regular flex_100 flex_auto {{> 'Sub.ClassList.Inset.up-1'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}\">\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class=\"continue watching\" }}\n\t\t\t\t\t\t<div class=\"font_n2 font_n1:lg relative isolation_isolate\">\n\t\t\t\t\t\t\t<ul class=\"flex flex_column justify_stretch gap_0 ul_none {{> 'Sub.ClassList.Inset.down-1'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}\">\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='#{ call(get-function('randomWords'), random(10)) }'}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='#{ call(get-function('randomWords'), random(10)) }'}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='#{ call(get-function('randomWords'), random(10)) }'}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='#{ call(get-function('randomWords'), random(10)) }'}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='#{ call(get-function('randomWords'), random(10)) }'}}\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{{> 'Sub.Section.Footer'  modifier_class=\"continue watching\" }}\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"col-start col-end w_100\">\n\t\t\t\t\t<section class='font_0 font_1:lg font_ui font_regular flex_100 flex_auto {{> 'Sub.ClassList.Inset.up'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}'> {{> 'Sub.Section.h2' modifier_class='watch again' }}\n\t\t\t\t\t\t{{> 'Structures.Home.Carousel.Empty' modifier_class='watch again'}}\n\t\t\t\t\t\t{{> 'Sub.Section.Footer'  modifier_class='watch again' }}\n\t\t\t\t\t\t{{> 'Sub.Section.h2' modifier_class='saved' }}\n\t\t\t\t\t\t{{> 'Structures.Home.Carousel.Empty' modifier_class='saved' }}\n\t\t\t\t\t\t{{> 'Sub.Section.Footer'  modifier_class='saved' }}\n\t\t\t\t\t</section>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t\t<footer class=\"flex flex_column gap_4 grid-area_footerArea columns_5 grid:md m-t_auto p-y_0:md p-y_3\">\n\t\t\t\t{{> 'Component.Navigation.Footer.Links' modifier_class='col-start col-end_4' }}\n\t\t\t\t{{> 'Sub.Footer.Logo'  modifier_class='col-start_4 col-end' }}\n\t\t\t</footer>\n\t\t</div>\n\t</div>\n</div>\n\n\n\nMarkupWrapperClasses: \n\n\nNOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..\n \nWeight:0\n \nStyleguide Page.Pages.Home\n*/\n\n\n\n/*\n\nHeader\n\nHome page branding splash with ka site search. \n \nMarkup:\n<header class=\"p_3 p_0:md {{modifier_class}}\">\n    <section class=\"br_radius overflow_hidden relative z_1\">\n        <picture class=\"w_100\">\n            <source class=\"w_100\" srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1440x250.jpg\" media=\"(min-width: 1200px)\">\n            <source class=\"w_100\" srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_1200x250.jpg\" media=\"(min-width: 1024px)\">\n            <source class=\"w_100\" srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_768x200.jpg\" media=\"(min-width: 768px)\">\n            <source class=\"w_100\" srcset=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_600x225.jpg\" media=\"(min-width: 400px)\">\n            <img src=\"https://acc-style.github.io/PrototypingACCorg/assets/images/lib/J22043_400x300.jpg\" class=\"w_100\" alt=\"\">\n        </picture>\n    </section>\n    <div class=\"m_auto m-t_n4 t_n4 t_n5:lg m-t_n5:lg max-w_60:lg max-w_40:md p-x_3 p-x_5:md z_2 relative\">\n        {{> \"Sub.Section.HeaderPanel\"}}\n    </div>\n</header>\n\nMarkupWrapperClasses: \n\nSubComponent: \nSub.Section.HeaderPanel - Search Bar\n \nWeight:0\n \nStyleguide Structures.Home.Header\n*/\n\n/*\n\nHome Search Link Inset\n\nA central interaction point for the user on the homepage. \n \nMarkup:\n<div class=\"{{> 'Sub.ClassList.Inset.up-1'}}  {{> 'Sub.ClassList.Inset.padding.up-4'}}\">\n    {{> 'Sub.Section.SearchBar' modifier_class=\"disabled\" }}\n    {{> 'Component.Navigation.Home.Utility' }} \n</div>\n\nMarkupWrapperClasses: \n\nSubComponents:\nSub.Section.SearchBar - Search Bar with `disabled` Class\nComponent.Navigation.Home.Utility - Quick Links\n\nClassList:\nSub.ClassList.Inset.up-1  - Inset up 1\nSub.ClassList.Inset.padding.up-4 - Padding up 4\n\nWeight:0\n \nStyleguide Sub.Section.HeaderPanel\n*/\n\n/*\n\nHome Search Bar\n\nThe Search Bar is disabled on the Home Page when there is no content in the input field.\n\n \nMarkup:\n<div class=\"input-holder flex flex_row self_end relative w_100 {{> \"Sub.ClassList.Inset.padding\"}}\">\n    <input id=\"input_uniqueTextAndButton\" name=\"input_uniqueTextAndButton\" type=\"text\" placeholder=\"Search\" class=\"br_2 flex_auto p-y_2 br_solid flex_auto p-l_4 lh_3 br_radius bg_white c_black bg_white f:bg_primary br_black-2 br-tl_square br-br_square br-r_0 font_2\"/>\n    <button  class=\"{{ modifier_class }} b_0 br-br_radius br-tr_radius br_none br_square btn btn-primary c_white ease_out f:outline_none font_2 font_regular font_ui h:br_primary-n3 h:underline inline-block r_0 t_0 text_center transition_1 undecorated w_auto\" >\n    <i class=\"fas fa-search\"></i>\n    <span class=\"inline-block:md display_none\">Search</span>\n    </button>\n</div>\n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Section.SearchBar\n*/\n\n/*\n\nSection Footer\n\nSection footer links to the Search Collection Page.\n \nMarkup:\n<footer class=\"flex flex_row-reverse p-t_3 p-b_4\"><a href=\"#\" class=\"link self_end \">view all from &quot;{{modifier_class}}&quot; <i class=\"fal fa-chevron-circle-right m-r_3\"></i></a></footer>   \n\nMarkupWrapperClasses: \n \nWeight:0\n \nStyleguide Sub.Section.Footer\n*/\n\n/*\n\nCarousel \n\nHorizontal Carousels to have discoverable areas on the home pages.\n\n\nMarkup:\n<div class=\"relative isolation_isolate overflow_hidden {{>'Sub.ClassList.Inset.margin.down-1'}}\">\n        <div id=\"slider1\" class=\" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden m-y_3 {{> 'Sub.ClassList.Inset.down-1'}} \">\n        {{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}        \n        {{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}        \n        {{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n    </div>\n    {{> 'Sub.Carousel.CustomTools'}}\n</div>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function(event) { \n    let args ={\n        items:1,\n        mouseDrag: true,\n        slideBy: \"page\",\n        swipeAngle: false,\n        autoplay: false,\n        controls: true,\n        nav: false,\n        edgePadding: 0,\n        loop:true,\n        edgePadding:48,\n        center:false,\n        gutter:16,\n        responsive: {\n            1: {\n                items: 1\n            },\n                    768: {\n                items: 1\n            },\n            1200: {\n                items: 2\n            },\n            1400: {\n                items: 3\n            }\n        }};\n        let slider1 = tns({ container: '#slider1', controlsContainer: \"#slider1-customize-controls\", ...args });\n    });\n</script>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nSubComponents:\nProgram.Session.Home    - Session\n\nClassList:\nSub.ClassList.Inset.margin.down-1 - Margin down 1\nSub.ClassList.Inset.down-1 - Inset down 1\n\nNOTE: This design requires javascript. (tiny slider js)\n\nStyleguide Structures.Home.Carousel\n*/\n\n/*\n\nTinySlider.js\n\nScript tags for tinySlider\n\n\nMarkup:\n<h2> Slider CSS </h2>\n<span class=\"user-select_all\">https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css</span>\n<h2> Slider JS </h2>\n<span class=\"user-select_all\">https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js</span>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\n\nStyleguide Structures.Home.TinySlider\n*/\n\n\n/*\n\n\nCarousel Empty State\n\nThe empty state of the carousel\n\nMarkup:\n<div class=\"p-y_3 relative {{>'Sub.ClassList.Inset.margin.down-1'}}\"> \n    <div class=\"tns-outer {{> 'Sub.ClassList.Inset.down-1'}}  font_0 font_ui font_regular\" >\n        <div class=\"tns-ovh\">\n            <div class=\"tns-inner\" >\n                <div id=\"slider3\" class=\" flex flex_row justify_stretch p-y_4 p-x_3 overflow_hidden  tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal\" >\n                    <div class=\"tns-item  tns-slide-active p-x_5\">\n                        <article class=\"bg_white br_1 br_black-1 br_radius br_solid flex flex_grow shadow_overlap-light w_100\">\n                            <div class=\"flex flex_row justify_start relative w_100\">\n                                <main class=\"flex flex_column flex_auto justify_between flex_auto p-l_4 p-x_4:md  p-y_3 p-y_3:lg relative w_100 isolation_isolate reading-typography\">\n                                    <h2 class=\"\">\n                                       You don't have any previously {{modifier_class}} presentations.\n                                    </h2>\n                                    <p>This collection is based off of your watching history. Come back here when you want to review or re-watch what you have previously viewed.</p>\n                                </main>\n                            </div>\n                        </article>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    {{> 'Sub.Carousel.CustomTools.Disabled' }}\n</div>\n\nMarkupWrapperClasses: \n\nSubComponents:\nSub.Carousel.CustomTools.Disabled - Disabled Navigation\n\nClassList:\nSub.ClassList.Inset.margin.down-1 - Margin down 1\nSub.ClassList.Inset.down-1 - Inset Down 1\n\nWeight: 0\n\nStyleguide Structures.Home.Carousel.Empty\n*/\n/* nav */\n.tns-nav {\n    text-align: center;\n    margin: 0.5rem 0;\n    > [aria-controls] {\n    width: 0.5rem;\n    height: 0.5rem;\n    padding: 0;\n    margin: 0 0.25rem;\n    border-radius: 50%;\n    background: #ddd;\n    border: 0;\n    min-height: 0;\n    line-height: 1;\n    }\n    > .tns-nav-active {\n    background: #999;\n    }\n}\n\n.tns-item {\n    display: flex !important;\n}\n\n.tns-visually-hidden {\n    display: none;\n}\n\n/*\n\nContinue Watching\n\nShows a short list of presentations\n\ndefault\t\t - \n\nMarkup:\n    {{> 'Sub.Section.h2' modifier_class=\"continue watching\" }}\n    <div class=\"relative isolation_isolate overflow_hidden  {{> 'Sub.ClassList.Inset.down-1'}} \">\n        <div id=\"SliderContinueWatching\" class=\"flex flex_column gap_3 justify_stretch p-y_4 p-x_3 overflow_hidden m-y_3  {{> 'Sub.ClassList.Inset.down'}} \">\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"#{ call(get-function('randomWords'), random(10)) }\"}}\n        </div>\n        {{> 'Sub.Carousel.CustomToolsVertical'}}\n    </div>\n    <footer class=\"flex flex_row-reverse p-t_3 p-b_4\"><a href=\"#\" class=\"link self_end \">view all from &quot;{{modifier_class}}&quot; <i class=\"fal fa-chevron-circle-right m-r_3\"></i></a></footer>      \n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function(event) {   \nlet args2 ={\n    items: 1,\n    mouseDrag: true,\n    axis: \"vertical\",\n    slideBy: \"page\",\n    swipeAngle: false,\n    autoplay: false,\n    controls: true,\n    items:3,\n    nav: false,\n    edgePadding: 0,\n    loop:true,\n    edgePadding:0,\n    center:true,\n    gutter:16\n    };\n    let slider2 = tns({ container: '#SliderContinueWatching', controlsContainer: \"#slider-customize-controls-vertical\", ...args2 });\n});</script>\n\nMarkupWrapperClasses: main-area-offset p_2 p-x_5:md p-y_4:md isolation_isolate br_radius bg_white-7\n\nNOTE: container: '#SliderContinueWatching', controlsContainer: \"#slider-customize-controls-vertical\" need to be unique to the slider. \n\ncaution:  This item is not finalized and might be subject to change\n\nWeight: 0\n\n\n\nStyleguide Structures.Home.ContinuePlaying\n*/","/*\n\nMain Nav\n\nTHe library because it is an app uses a different style of nav which is more align to streaming software.\n\n\nMarkup:\n<div style=\"height: calc(100vh - 1.5rem);\" class=\"display_none flex:md sticky t_3  {{modifier_class}}\">\n        <nav style=\"height: calc(100vh - 1.5rem); width: 35rem;\" id=\"navigation\" class=\"absolute h_100vh shadow_emboss-light filter_blur overflow_hidden br_radius bg_black-7 flex:md flex_column:md justify_between p-t_0 p-b_3 p-l_3 p-r_3 p-b_4:md p-t_4:md p-r_0:md font_4:lg font_3:md font_2 transition_3 font_display nav-mined\">\n            <ul class=\"flex flex_column:md flex_row ul_none justify_around justify_start:md gap_3 w_100 w_auto:md\">\n                <li  id=\"mainDesktopNavTouchToggle\" class=\"display_none flex:touch flex_row justify_end p-x_3 m-l_n3 \">\n                    <span class=\"aspect_1x1 bg_accent br_round c_inherit-all c_white-8 grid h:c_white justify_center p_3 self_center text_center w_auto shadow_n3\"><i class=\"block fa-chevron-circle-right fa-fw fas icon [rotate_180] self_center text-shadow_black-1 transition_2\"></i></span>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light active\">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\" href=\"../home\"><i class=\"icon fas fa-fw fa-home-heart p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 active font_n2 font_3:md font_4:lg display_none:md opacity_0\">Home</span></a>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md \" href=\"../search\"><i class=\"icon fas fa-fw fa-search p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Search</span></a>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\" href=\"../saved\"><i class=\"icon fas fa-fw fa-heart p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Saved</span></a>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\" href=\"../credits\"><i class=\"icon fas fa-fw fa-award p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Credits</span></a>\n                </li>\n                <li class=\"nav-item flex_none br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light disabled cursor_not-allowed opacity_3 \">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\" href=\"../watching\"><i class=\"icon fas fa-fw fa-play p-x_2:md p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Watching</span></a>\n                </li>\n            </ul>\n            <ul class=\"flex_column:md flex_row ul_none justify_center gap_3 flex\">\n                <li class=\"nav-item flex_auto br_radius p-t_3 m-t_n3 m-t_0:md p-t_0:md p-r_4:md m-r_n4:md c_white-8 bg_acc-n1 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light\">\n                    <a class=\"p_3 c_inherit-all h:undecorated flex flex_column flex_row:md\"><i class=\"icon fas fa-fw fa-sign-out-alt p-x_2 p-y_3 p-y_0:md self_center\"></i><span class=\"label self_center p-l_3:md p-l_4:lg lowercase lh_0 font_n2 font_3:md font_4:lg display_none:md opacity_0\">Log Out</span></a>\n                </li>\n            </ul>\n        </nav>\n    </div>\n    <nav id=\"navigation_mobile\" class=\"block display_none:md shadow_emboss-light filter_blur br_radius bg_black-6 p_2 sticky t_3 z_4\">\n        <ul class=\"flex flex_row ul_none justify_between\">\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light active\">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../home\"><i class=\"icon fas fa-fw fa-home-heart p-y_2 self_center\"></i><span class=\"label self_center  lowercase lh_0 active font_n2 h_1h\">Home</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../search\"><i class=\"icon fas fa-fw fa-search p-y_2 self_center\"></i><span class=\"label self_center  lowercase lh_0 font_n2 h_1h \">Search</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../saved\"><i class=\"icon fas fa-fw fa-heart p-y_2 self_center\"></i><span class=\"label self_center  lowercase lh_0 font_n2 h_1h nowrap \">Saved</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light \">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../saved\"><i class=\"icon fas fa-fw fa-award p-y_2 self_center\"></i><span class=\"label self_center  lowercase lh_0 font_n2 h_1h \">Credits</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light disabled opacity_3 cursor_not-allowed \">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\" href=\"../watching\"><i class=\"icon fas fa-fw fa-play p-y_2 self_center\"></i><span class=\"label self_center lowercase lh_0 font_n2 h_1h \">Watching</span></a>\n            </li>\n            <li class=\"nav-item flex_auto br_radius c_white-8 bg_acc-n1 h:bg_black-9 h:c_white a:c_white a:bg_primary h:shadow_overlap-light a:shadow_overlap-light\">\n                <a class=\"c_inherit-all flex flex_column h:undecorated p_3\"><i class=\"icon fas fa-fw fa-sign-out-alt p-y_2 self_center\"></i><span class=\"label self_center lowercase lh_0 font_n2 nowrap h_1h\">Log Out</span></a>\n            </li>\n        </ul>\n    </nav>\n    <script src=\"../js/library/library.main-nav.js\"></script>\n    <!-- These Styles are just for the styleguide and are not to be included with the pattern. -->\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: This design highly depends on Javascript.There are styles in the pattern that should be ignored because they are just to make the pattern show up correctly in documentation. https://raw.githubusercontent.com/ACC-Style/Arches/master/docs/js/library/library.main-nav.js\n\nStyleguide Component.Navigation.MainNav\n*/\n\n/*\n\nHome Utility Nav\n\nSmall nav under the home page to quick link users to helpful pieces of content\n\nMarkup:\n<nav class=\"utility-nav p-t_3 p-t_4:lg font_n3 font_0:md font_1:lg \">\n    <ul class=\"flex flex_row ul_none justify_center\">\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n                ><i class=\"fal fa-star  block inline:md\"></i><span class=\"display_none inline:md\"> featured</span></a\n            >\n        </li>\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n                ><i class=\"fal fa-sitemap  block inline:md\"></i><span class=\"display_none inline:md\"> hot topics</span></a\n            >\n        </li>\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1 text_center  br-l_1 br_solid br_black-4\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n            ><i class=\"fal fa-heart block inline:md\"></i><span class=\"display_none inline:md\"> saved</span></a\n        >\n        </li>\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n            ><i class=\"fal fa-play  block inline:md\"></i><span class=\"display_none inline:md\"> continue watching</span></a\n        >\n        </li>\n        <li class=\"text_center p-x_2 block p-x_4:md lh_1 br-l_1 br_solid br_black-4\">\n            <a class=\"h:undecorated c_primary block h:c_secondary-n3 p_3 p_0:md\"\n            ><i class=\"fal fa-sync  block inline:md\"></i><span class=\"display_none inline:md\"> watch again </span></a\n        >\n        </li>\n    </ul>\n</nav>\n\nMarkupWrapperClasses: \n\nWeight: 0\n\n\nStyleguide Component.Navigation.Home.Utility\n*/\n/*\n\nBreadcrumb Bar\n\nBasic Nav that helps the user orientate the context of the page.\n \nMarkup:\n<header class=\"grid-area_headerArea flex flex_row items_center justify_start flex_none z_1 {{> 'Sub.ClassList.Inset.up'}} {{> 'Sub.ClassList.Inset.padding.up-1'}}\">\n    <nav class=\"overflow_hidden lh_0  font_ui font_2 font_regular c_black-7 {{modifier_class}}\" aria-label=\"Breadcrumb\">\n    <ol class=\"flex flex_no-wrap flex_row items_center overflow_hidden ul_none w_100 max-w_100\"> \n        {{> 'Sub.Component.Navigation.Breadcrumb.FirstItem' }}\n        {{> 'Sub.Component.Navigation.Breadcrumb.NotFirstItem' modifier_class=\"Session Shorten Name\" }}\n        {{> 'Sub.Component.Navigation.Breadcrumb.LastItem' modifier_class=\"Presentation Shorten Name\" }}\n    </ol>   \n</nav>\n</header>\n\nMarkupWrapperClasses: \n\nClassList:\nSub.ClassList.Inset.padding.up-1 - Inset Padding Up 1\nSub.ClassList.Inset.up - Inset Level Up Decoration\n\nSubComponents:\nSub.Component.Navigation.Breadcrumb.FirstItem - First item\nSub.Component.Navigation.Breadcrumb.NotFirstItem - Not first item\nSub.Component.Navigation.Breadcrumb.LastItem - Last item\n \nWeight:0\n \nStyleguide Component.Navigation.Breadcrumb\n*/\n\n\n/*\n\nFooter Links\n\n The Apps Footer. \n\n\nMarkup:\n<div id=\"subfooter\" class=\"bg_primary-1 flex_auto font_n1 z_1 br_radius texture_dust shadow_emboss-light {{> 'Sub.ClassList.Inset.padding.up-1' }} {{ modifier_class}}\">\n    <ul class=\"m_auto footer-bottom-links ul_none max-w_80\">\n        <li class=\"inline p_2\"><a href=\"//www.acc.org/footer-pages/media-center\" class=\"c_white-6 h:c_white\">Media Center</a></li>\n        <li class=\"inline p_2\"><a href=\"//www.acc.org/footer-pages/quick-start-guide\" class=\"c_white-6 h:c_white\">ACC.org Quick Start Guide</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/advertising-and-sponsorship-policy\">Advertising &amp; Sponsorship Policy</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/clinical-content-disclaimer\">Clinical Content Disclaimer</a> </li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/editorial-board\">Editorial Board</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/privacy-policy\">Privacy Policy</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/registered-user-agreement\">Registered User Agreement</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/terms-and-conditions\">Terms of Service</a></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/footer-pages/cookie-policy\">Cookie Policy</a></li>\n        <li class=\"inline p_2\"><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></li>\n        <li class=\"inline p_2\"><a class=\"c_white-6 h:c_white\" href=\"//www.acc.org/sitemap-acc.xml\">Site Map</a> </li>\n    </ul> <!-- /footer-bottom-links -->\n</div><!-- /subfooter -->\n\nClassList:\nSub.ClassList.Inset.padding.up-1 - Inset Padding Up 1\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Component.Navigation.Footer.Links\n*/\n\n\n\n","@import  \"../virtual/data/virtual.helper.randomWords\";\n\n\n/*\n\nSessions - Homepage\n\nSession Designs on the home page.\n\n\nMarkup:\n<div>\n<article class=\"flex flex_grow w_100 {{> 'Sub.ClassList.Inset.up-1'}}\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100\">\n        <main\n            class=\"flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}}\">\n            <h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n                <a class=\"c_inherit-all expanded-click-area z_1\">\n                    Clinical Update for the #{ call(get-function('randomWords'), random(10)) } {{ modifier_class}} \n                </a>\n            </h2>\n            <ul\n                class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.PresentationCount'}}\n                {{> 'Sub.Sub.Data.AttachmentLink.ZIP'}}\n            </ul>\n            <ul class=\"flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase\">\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CME' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CNE' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='AAPA' }}\n                </li>\n            </ul>\n        </main>\n        <aside class=\"flex_none p-x_3:md p-b_3 absolute flex_none p-b_3 p-r_2 r_0 t_n1\">\n            <ul\n                class=\"b_3 flex flex_column flex_wrap font_n4 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center\">\n                <li class=\"flex_auto p-b_3 m-b_auto\">\n                    {{> 'Sub.ActionButtons.Favorite' }}\n                </li>\n            </ul>\n        </aside>\n    </div>\n</article>\n</div>\n\n\n\n\nMarkupWrapperClasses: \n\nData:\nSub.Data.Session.Title - Title\n\nSubComponents: \nSub.Credits - Credits\n\n\n\nWeight: 0\n\nStyleguide Program.Session.Home\n*/\n\n/*\n\nSessions - Homepage Version 2\n\nSession Designs on the home page.\n\n\nMarkup:\n<div>\n<article class=\"flex flex_grow w_100 {{> 'Sub.ClassList.Inset.up-1'}}\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100\">\n        <main\n            class=\"flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate gap_3 {{> 'Sub.ClassList.Inset.padding.up-3'}}\">\n            <h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n                <span class=\"aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3\" style=\"width:3.5em\">\n                    <span class=\"absolute t_n2 z_3 p-x_3 r_0\">\n                    {{> 'Sub.ActionButtons.Favorite' }}\n                    </span>\n                </span>\n                <a class=\"c_inherit-all expanded-click-area z_1 inline\">\n                    Clinical Update for the  #{ call(get-function('randomWords'), 15) } {{ modifier_class }} \n                </a>\n            </h2>\n            <ul\n                class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2 clear_both\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.PresentationCount'}}\n                {{> 'Sub.Sub.Data.AttachmentLink.ZIP'}}\n            </ul>\n            <ul class=\"flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase\">\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CME' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CNE' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='AAPA' }}\n                </li>\n            </ul>\n        </main>\n    </div>\n</article>\n</div>\n\ncaution:  This item is not finalized and might be subject to change\n\n\nMarkupWrapperClasses: \n\nData:\nSub.Data.Session.Title - Title\n\nSubComponents: \nSub.Credits - Credits\n\n\n\nWeight: 0\n\nStyleguide Program.Session.Home_v2\n*/\n\n\n/*\n\nSessions - Search\n\nSession Designs on the home page.\n\n\nMarkup:\n<div>\n<article class=\"flex flex_grow w_100 {{> 'Sub.ClassList.Inset.up-1'}}\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100\">\n        <main\n            class=\"flex flex_column gap_3 flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}}\">\n            <h2 class=\"font-size_up-1 font_display font_regular lh_1 h:underline c_primary-n3 m-t_2\">\n                <a class=\"c_inherit-all expanded-click-area z_1\">\n                    Clinical Update for the {{ modifier_class }} \n                </a>\n            </h2>\n            <ul\n                class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.PresentationCount'}}\n                 {{> 'Sub.Sub.Data.AttachmentLink.ZIP'}}\n            </ul>\n            <ul class=\"flex flex_row font_n3 gap_2 justify_start flex_wrap  self_start ul_none uppercase\">\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CME' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='CNE' }}\n                </li>\n                <li class=\"lh_0 flex_none\">\n                    {{> 'Sub.Credit' modifier_class='AAPA' }}\n                </li>\n            </ul>\n        </main>\n        <aside class=\"flex_none p-x_3:md p-b_3\">\n            <ul\n                class=\"b_3 flex flex_column flex_wrap font_n3 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center\">\n                <li class=\"flex_auto p-b_3 m-b_auto\">\n                   {{> 'Sub.ActionButtons.Favorite' }}\n                </li>\n            </ul>\n        </aside>\n    </div>\n</article>\n</div>\n\n\nMarkupWrapperClasses: \n\nData:\nSub.Data.Session.Title - Title\n\nSubComponents: \nSub.Credits - Credits\n\n\n\nWeight: 0\n\nStyleguide Program.Session.Search\n*/\n\n/*\n\nPresentation - Home\n\nPresentation designs on the home page.\n\nMarkup:\n<div>\n\t<article class=\"flex flex_grow flex_column w_100  {{> 'Sub.ClassList.Inset.up-1'}}\">\n\t\t<div class=\"flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} \">\n\t\t\t<div class=\"font_display m-b_3 lh_2 \">\n\t\t\t\t<h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n\t\t\t\t\t<span class=\"aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3\" style=\"width:3.5em\">\n\t\t\t\t\t\t<span class=\"absolute t_n2 z_3 p-x_3 r_0\">\n\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.Favorite' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<strong class=\"block c_black-6 uppercase font_bold font-size_down lh_1 m_0 \"> {{> 'Sub.Data.Session.Title'}}</strong>\n\t\t\t\t\t<a class=\"c_inherit-all expanded-click-area z_1 inline\"> Clinical Update for the #{ call(get-function('randomWords'), 15) } {{ modifier_class }}\n\t\t\t\t\t</a>\n\t\t\t\t</h2>\n\t\t\t</div>\n\t\t\t<div class=\"c_black-8 font_copy font-size_down-1\">\n\t\t\t\t{{> 'Sub.FacultyList' }}\n\t\t\t</div>\n\t\t\t<ul class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n\t\t\t\t{{> 'Sub.Sub.Data.Duration'}}\n\t\t\t\t{{> 'Sub.Sub.Data.AttachmentLink'}}\n\t\t\t</ul>\n            {{> 'Sub.Credit.Chiclets.Horizontal'}}\n\t\t</div>\n\t\t<div class=\"{{> 'Sub.ClassList.Inset.padding'}}\">\n\t\t\t{{> 'Sub.ProgressBar' modifier_class=\"\" }}\n\t\t</div>\n\t</article>\n</div>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.ProgressBar - Progress\nSub.Credits - Credits\n\nStyleguide Program.Presentation.Home\n*/\n\n/*\n\nPresentation - Home Version 2\n\nPresentation designs on the home page.\n\nMarkup:\n<div>\n    <article class=\"flex flex_grow flex_column w_100  {{> 'Sub.ClassList.Inset.up-1'}}\">\n        <div class=\"flex flex_row font_ui justify_start relative w_100 gap_3\">\n            <main\n                class=\"flex flex_column flex_auto justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} \">\n                <div class=\"font_display m-b_3 lh_2 \">\n                    <h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n\t\t\t\t\t<span class=\"aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3\" style=\"width:3.5em\">\n\t\t\t\t\t\t<span class=\"absolute t_n2 z_3 p-x_3 r_0\">\n\t\t\t\t\t\t\t{{> 'Sub.ActionButtons.Favorite' }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<strong class=\"block c_black-6 uppercase font_bold font-size_down lh_1 m_0 \"> {{> 'Sub.Data.Session.Title'}}</strong>\n\t\t\t\t\t<a class=\"c_inherit-all expanded-click-area z_1 inline\"> Clinical Update for the #{ call(get-function('randomWords'), 15) } {{ modifier_class }}\n\t\t\t\t\t</a>\n\t\t\t\t</h2>\n                </div>\n                <div class=\"c_black-8 font_copy font-size_down-1\">\n                    {{> 'Sub.FacultyList' }}\n                </div>\n                <ul class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.AttachmentLink'}}\n                </ul>\n                {{> 'Sub.Credit.Chiclets.Horizontal'}}\n            </main>\n            <aside class=\"flex_none p-x_3:md p-b_3\">\n                <ul\n                    class=\"b_3 flex flex_column flex_wrap font_n3 gap_2 justify_end:md justify_start r_4 self_center ul_none uppercase p-x_3 m-t_n2 items_center\">\n                    <li class=\"flex_auto p-b_3 m-b_auto\">\n                        {{> 'Sub.ActionButtons.Favorite' }}\n                    </li>\n                </ul>\n            </aside>\n        </div>\n        <div class=\"{{> 'Sub.ClassList.Inset.padding'}}\">\n            {{> 'Sub.ProgressBar' modifier_class=\"\" }}\n        </div>\n    </article>\n</div>\n\ncaution:  This item is not finalized and might be subject to change\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.ProgressBar - Progress\nSub.Credits - Credits\n\nStyleguide Program.Presentation.Home_V2\n*/\n\n/*\n\nPresentation - Search\n\nPresentation designs on the Search page.\n\nMarkup:\n<div>\n    <article class=\"flex flex_grow flex_column w_100  {{> 'Sub.ClassList.Inset.up-1'}}\">\n        <div class=\"flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} \">\n                <div class=\"font_display m-b_3 lh_2 \">\n                    <h2 class=\"font-size_up font_display font_regular lh_2 h:underline c_primary-n3 m-t_2\">\n                        <span class=\"aspect_1x1 float_right font_n3 m-r_n3 m-t_n4 p-x_3\" style=\"width:3.5em\">\n                            <span class=\"absolute t_n2 z_3 p-x_3 r_0\">\n                                {{> 'Sub.ActionButtons.Favorite' }}\n                            </span>\n                        </span>\n                        <strong class=\"block c_black-6 uppercase font_bold font-size_down lh_1 m_0 \"> {{> 'Sub.Data.Session.Title'}}</strong>\n                        <a class=\"c_inherit-all expanded-click-area z_1 inline\"> Clinical Update for the #{ call(get-function('randomWords'), 15) } {{ modifier_class }}\n                        </a>\n                    </h2>\n                </div>\n                <div class=\"c_black-8 font_copy font-size_down-1\">\n                    {{> 'Sub.FacultyList' }}\n                </div>\n                <ul class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.AttachmentLink'}}\n                </ul>\n                {{> 'Sub.Credit.Chiclets.Horizontal'}}\n        </div>\n        <div class=\"{{> 'Sub.ClassList.Inset.padding'}}\">\n            {{> 'Sub.Search.TimeMarkers' modifier_class=\"\" }}\n        </div>\n    </article>\n</div>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.Search\n*/\n\n\n/*\n\nPresentation - List\n\nPresentation designs on the Search page.\n\nMarkup:\n<div>\n    <article class=\"flex flex_grow flex_column w_100  p-x_3:lg br-t_1 br_solid br_black-3\">\n        <div class=\"flex flex_column flex_auto gap_3 justify_between flex_auto relative w_100 isolation_isolate {{> 'Sub.ClassList.Inset.padding.up-3'}} \">\n                <div class=\"font_display m-b_3 lh_2 \">\n                    <h2 class=\"font-size_up-1 font_display font_regular lh_1 h:underline c_primary-n3 m_0\">\n                    <a class=\"c_inherit-all expanded-click-area z_1\">\n                        Presentation of the findings {{ modifier_class}} \n                    </a>\n                    </h2>\n                </div>\n                <div class=\"c_black-8 font_copy font-size_down-1\">\n                    {{> 'Sub.FacultyList' }}\n                </div>\n                <ul class=\"ul_none flex flex_row flex_wrap justify_start font-size_down-1 c_black-7 m-t_auto lh_0 items_end gap_2\">\n                {{> 'Sub.Sub.Data.Duration'}}\n                {{> 'Sub.Sub.Data.AttachmentLink'}}\n                </ul>\n        </div>\n        <div class=\"{{> 'Sub.ClassList.Inset.padding'}}\">\n            {{> 'Sub.Search.TimeMarkers' modifier_class=\"\" }}\n        </div>\n    </article>\n</div>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.List\n*/\n\n/*\n\nPresentation - Condensed\n\nPresentation designs on the Search page.\n\nMarkup:\n<article class=\"br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100 gap_3 {{> 'Sub.ClassList.Inset.padding'}} h:bg_white-8 br_radius\">\n        <main class=\"flex flex_column flex_auto gap_4 justify_between flex_auto relative w_100 isolation_isolate\">\n            <h2 class=\"font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0\">\n                <a class=\"c_inherit-all expanded-click-area z_1 h:undecorated undecorated\">\n                    Presentation of the findings {{ modifier_class }} \n                </a>\n            </h2>\n        </main>\n        <aside class=\"flex_auto flex flex_column items_center justify_center\">\n            <span class=\"font-size_down inline-block lh_0  c_black-8 text_center nowrap\">\n                <span class=\"font-size_up c_accent-n2 block \">\n                <i class=\"fal fa-clock\"></i>\n                15\n                </span>\n                minutes\n            </span>\n        </aside>\n    </div>\n</article>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.Condensed\n*/\n\n/*\n\nPresentation - Condensed Playing\n\nPresentation designs on the Search page.\n\nMarkup:\n<article class=\"br-t_1 br_black-3 br_solid flex flex_column flex_grow w_100 p-t_3\">\n    <div class=\"flex flex_row font_ui justify_start relative w_100 gap_4 {{> 'Sub.ClassList.Inset.padding.up-3'}} {{> 'Sub.ClassList.Inset.up-1'}}\">\n        <main class=\"flex_auto\">\n            <h2 class=\"font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0\">\n                <a class=\"c_inherit-all expanded-click-area z_1 h:undecorated undecorated\">\n                    Presentation of the findings {{ modifier_class }} \n                </a>\n            </h2>\n        </main>\n        <aside class=\"flex_none flex flex_column items_center justify_center\">\n            <span class=\"font-size_up-2 inline-block lh_0  c_accent text_center nowrap\">\n                <i class=\"fas fa-play\"></i>\n            </span>\n        </aside>\n    </div>\n</article>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.CondensedPlaying\n*/\n\n/*\n\nPresentation - Condensed Playable\n\nPresentation designs on the Search page.\n\nMarkup:\n<li class=\"flex flex_row font_ui justify_between br-t_1 br-b_1  br_solid br_black-1 m-b_n1 items_center relative w_100 gap_3 {{> 'Sub.ClassList.Inset.padding'}} h:bg_white-8 br_radius relative\">\n    <h3 class=\"font-size_up-1 lh_2 font_display font_regular lh_1 c_primary-n3 m_0 flex_auto\">\n        Presentation of the findings {{ modifier_class }} \n    </h3>\n    <span class=\"flex_none flex flex_column items_center justify_center \">\n        <a class=\"font-size_up-2 self_center block lh_0 c_primary br_radius aspect_1x1 text_center expanded-click-area nowrap p_4 h:bg_primary-n2 h:c_white bg_white-5 shadow_bevel-light\">\n            <i class=\"fas fa-play\"></i>\n        </a>\n    </span>\n</li>\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nData:\nSub.Data.Session.Title - Session Title\nSub.Data.Presentation.Title - Presentation Title\n\nSubComponents: \nSub.FacultyList - Faculty List\nSub.Credits - Credits\nSub.Search.TimeMarkers - Time Markers\n\nStyleguide Program.Presentation.Condensed.Playable\n*/\n","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","/*\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/*\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/*\n\nAccent #{map-deep-get($fonts, accent, name)}\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\t#{map-deep-get($fonts, accent, name)}\n\t\t<span class=\"sub-line\">font-family: #{map-deep-get($fonts, accent, stack)}</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\">#{map-deep-get($fonts, accent, short-name)}<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: #{map-deep-get($fonts, display, name)}\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\t#{map-deep-get($fonts, display, name)}\n\t\t<span class=\"sub-line\">font-family: #{map-deep-get($fonts, display, stack)}</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\">#{map-deep-get($fonts, display, short-name)}<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/*\n\nCopy: #{map-deep-get($fonts, 'copy', 'name')}\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\"#{map-deep-get($fonts, 'copy', 'name')}\"\n\t\t<span class=\"sub-line\">font-family: \"#{map-deep-get($fonts, 'copy', 'stack')}\"</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\">#{map-deep-get($fonts, copy, short-name)}<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: #{map-deep-get($fonts, 'ui', 'name')}\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\"#{map-deep-get($fonts, 'ui', 'name')}\"\n\t\t<span class=\"sub-line\">font-family: \"#{map-deep-get($fonts, 'ui', 'stack')}\"</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\">#{map-deep-get($fonts, ui, short-name)}<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\n\n@if $debug-trace {\n@debug \"The $usingFontAwesome variable is set to => #{$usingFontAwesome}\";\n}\n@if($usingFontAwesome == true ){\n\t/*\n\t\n\tIcons: Font Awesome\n\t\n\t<div>\n\t<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\t\n\n\t\n\t\n\tStyleguide DesignBase.IconsTrue\n\t*/\n\n}@else{\n\t/*\n\t\n\tIcons: Not Using Enteprise Solution\n\t\n\tThere are some subtle effects that happen when a platform doesn't use the enteprise solution for fonts. The most prominent is the loss of the icon link decoration standard with in content. \n\t\n\t\n\tMarkupWrapperClasses:\n\n\tNOTE: Not Using Enteprise Solution of Font Awesome\n\t\n\t\n\tStyleguide DesignBase.IconsFalse\n\t*/\n\n}\n\n\n\n/*\n\nACC's Blue\n\n$acc-blue            -  #{$acc-blue}; 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)              -  #{ map-get($theme-palette, primary)}; primary\nmap-get($theme-palette, secondary)            -  #{ map-get($theme-palette, secondary)}; secondary\nmap-get($theme-palette, shade)           \t  - #{ map-get($theme-palette, shade)}; shade\nmap-get($theme-palette, accent)               -  #{ map-get($theme-palette, accent)};  accent\nmap-get($theme-palette, info)                 -  #{ map-get($theme-palette, info)}; info\nmap-get($theme-palette, highlight)            -  #{ map-get($theme-palette, highlight)}; highlight\n\nWeight:-1000\n\nStyleguide DesignBase.Colors\n */\n\n/*\n\nAction Colors  \n\nActionable colors used to respond to user inputs and messaging.\n\nmap-get($theme-palette, alert)                -  #{ map-get($theme-palette, alert)}; alert\nmap-get($theme-palette, warning)              -  #{ map-get($theme-palette, warning)}; warning\nmap-get($theme-palette, success)              -  #{ map-get($theme-palette, success)};  success\nmap-get($theme-palette, navigation)           -  #{ map-get($theme-palette, navigation)}; navigation\n\nStyleguide DesignBase.Colors.Actions\n*/\n\n// Other Color Collections from the college\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- #{$cor-green}; I\n$cor-yellow              \t- #{$cor-yellow}; IIA\n$cor-yellow-orange          - #{$cor-yellow-orange}; IIA\n$cor-orange               \t- #{$cor-orange};III and III-NoHarm\n$cor-red               \t\t- #{$cor-red}; III-harm\n\nWeight: 10\n\nStyleguide DesignBase.Colors.ColorCoding.COR\n\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- #{$loe-dark-blue};LOE A\n$loe-mid-blue              \t\t- #{$loe-mid-blue };LOE B-R\n$loe-light-blue                \t- #{$loe-light-blue };LOE B-NR\n$loe-pale-blue                \t- #{$loe-pale-blue }; 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                    - #{$credit-AAPA    }; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit  \n$credit-ABP                     - #{$credit-ABP     }; ABP-MOC: American Board of Pediatrics   \n$credit-ABPMOCII                     - #{$credit-ABPMOCII     }; ABP-MOC 2: American Board of Pediatrics MOC 2  \n$credit-ABPMOCIV                     - #{$credit-ABPMOCIV     }; ABP-MOC 4: American Board of Pediatrics MOC 4 \n$credit-ATCEU                   - #{$credit-ATCEU   }; ATCEU: Athletic Trainer Continuing Education Unit   \n$credit-CE                      - #{$credit-CE      }; CE: Continuing CCA\\Tech Education  \n$credit-CME                     - #{$credit-CME     }; CME: AMA PRA Category 1TM Credit(s)    \n$credit-CNE                     - #{$credit-CNE     }; CNE: Continuing Nurse Education  \n$credit-CNErx                   - #{$credit-CNErx   }; CNErx: Continuing Nursing Education Pharmaceutical   \n$credit-COP                     - #{$credit-COP     }; COP: Certificate of Participation  \n$credit-CPE                     - #{$credit-CPE     }; CPE: Continuing Pharmacy Education \n$credit-ECME                    - #{$credit-ECME    }; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit\n$credit-IPCE                    - #{$credit-IPCE    }; IPCE: Interprofessional Continuing Education Credit\n$credit-MOCII                   - #{$credit-MOCII   }; MOC II: ABIM MOC Part II  \n$credit-MOCIV                   - #{$credit-MOCIV   }; 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- #{$pathway-acute-coronary-syndromes};  Acute Coronary Syndromes\n$pathway-arrhythmias-EP \t\t\t\t\t\t\t\t- #{$pathway-arrhythmias-EP};  arrhythmias and Clinical EP\n$pathway-congenital-heart-disease \t\t\t\t\t\t- #{$pathway-congenital-heart-disease};  Congenital Heart Disease\n$pathway-ecg-stress-test \t\t\t\t\t\t\t\t- #{$pathway-ecg-stress-test};  Standard ECG, Stress Test\n$pathway-heart-failure \t\t\t\t\t\t\t\t\t- #{$pathway-heart-failure};  Heart Failure and Cardiomyopathies\n$pathway-invasive-cardiology \t\t\t\t\t\t\t- #{$pathway-invasive-cardiology};  Invasive Cardiology Angiography and Intervention\n$pathway-noninvasive-cardiology \t\t\t\t\t\t- #{$pathway-noninvasive-cardiology};  Noninvasive Cardiology\n$pathway-pandemic \t\t\t\t\t\t\t\t\t\t- #{$pathway-pandemic};  Pandemic \"Covid\"\n$pathway-pericardial \t\t\t\t\t\t\t\t\t- #{$pathway-pericardial};  pericardial Disease\n$pathway-prevention \t\t\t\t\t\t\t\t\t- #{$pathway-prevention};  Prevention\n$pathway-pulmonary-hypertension \t\t\t\t\t\t- #{$pathway-pulmonary-hypertension};  Pulmonary Hypertension and Venous Thromboembolic Disease\n$pathway-special \t\t\t\t\t\t\t\t\t\t- #{$pathway-special};  Special\n$pathway-stable-ischemic-heart-disease \t\t\t\t- #{$pathway-stable-ischemic-heart-disease};  Stable ischemic Heart Disease\n$pathway-valvular-heart-disease \t\t\t\t\t\t- #{$pathway-valvular-heart-disease};  Valvular Heart Disease\n$pathway-vascular-medicine \t\t\t\t\t\t\t\t- #{$pathway-vascular-medicine};  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                  -   #{$registry-cpmi              };    Chest Pain MI Registry\n$registry-afib                  -   #{$registry-afib              };    AFib Ablation Registry\n$registry-cathpci               -   #{$registry-cathpci           };    CathPCI Registry\n$registry-icd                   -   #{$registry-icd               };    ICD Registry\n$registry-impact                -   #{$registry-impact            };    IMPACT Registry\n$registry-pinnacle-primary      -   #{$registry-pinnacle-primary  };    PINNACLE Registry (Primary)\n$registry-pinnacle-accent       -   #{$registry-pinnacle-accent   };    PINNACLE Registry (Accent)\n$registry-focus                 -   #{$registry-focus             };    Patient Navigator Focus MI\n$registry-pcibleeding           -   #{$registry-pcibleeding       };    Reducing Risk PCI Bleeding\n$registry-laao                  -   #{$registry-laao              };    LAAO Registry\n$registry-pvi                   -   #{$registry-pvi               };    PVI Registry\n$registry-auxdata               -   #{$registry-auxdata           };    Auxiliar Data Collection\n$registry-ststvt                -   #{$registry-ststvt            };    STS ACC TVT Registry\n$registry-diabetes              -   #{$registry-diabetes          };    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/*\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","@function color-block($colorName, $modifier, $modifier-label, $font-color-class) {\n  $return:\"<div class='p_3 bg_#{$colorName}-#{$modifier-label}'><h2 class=\"#{$font-color-class}\">#{$colorName}-#{$modifier-label}</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none #{$font-color-class}'><li class='flex flex_inline p_2 #' style='background-color: #{get-theme-color( $colorName, $modifier, HEX )};'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#{get-theme-color($colorName, $modifier)}</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( #{get-theme-color( $colorName, $modifier, RGB )} );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>#{get-theme-color($colorName, $modifier, RGB)}</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( #{get-theme-color( $colorName, $modifier, HSL )} );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>#{get-theme-color($colorName, $modifier, HSL)}</span> </li> </ul> </div>\";\n  @return $return;\n}\n\n\n\n\n\n@each $colorName, $color in $theme-palette{\n\n/*\n\n#{$colorName}: Color Variations \n \nThe Modified versions of the #{$colorName} 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_#{$colorName}\"\n>\n\t\t#{ color-block($colorName, -5,n5,c_white)}\n\t\t#{ color-block($colorName, -4,n4,c_white)}\n\t\t#{ color-block($colorName, -3,n3,c_white)}\n\t\t#{ color-block($colorName, -2,n2,c_white)}\n\t\t#{ color-block($colorName, -1,n1,c_white)}\n\t\t#{ color-block($colorName, 0,0,c_white)}\n\t\t#{ color-block($colorName, 1,1,c_black)}\n\t\t#{ color-block($colorName, 2,2,c_black)}\n\t\t#{ color-block($colorName, 3,3,c_black)}\n\t\t#{ color-block($colorName, 4,4,c_black)}\n\t\t#{ color-block($colorName, 5,5,c_black)}\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n \nStyleguide DesignBase.CrayonBox.#{$colorName}\n\n*/\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$unitless: (\n\t\t0: 0,\n\t\tn5: -5,\n\t\tn4: -4,\n\t\tn3: -3,\n\t\tn2: -2,\n\t\tn1: -1,\n\t\t1: 1,\n\t\t2: 2,\n\t\t3: 3,\n\t\t4: 4,\n\t\t5: 5,\n\t);\n/*Adobe XD Color Map*/\n@each $colorName, $color in $theme-palette{\n    @each $label, $value in $unitless{\n       /* $xd-color_#{$colorName}-#{$label}: #{get-theme-color($colorName, $value)}*/\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","/*\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/*\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\n\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\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\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\n\n\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\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","\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"]}