{"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","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/boot/_boot.buttons.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","components/interactive-extras/_lorem-placeholders.scss","components/interactive-extras/_icon-toggle.scss","components/interactive-extras/_social-nav.scss","components/interactive-extras/_stars.scss","styleguide/_design-base.scss","styleguide/_crayonbox.scss","styleguide/_interactive-extras.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":"AAAA,gBAAgB;ACChB;;;;EAAA;AAQA,8DAAA;AAKA,gCAAA;ACdA,8BAAA;ADwBA,uCAAA;AAGA;EACC,mCAAA;EAIA,oBAAA;EAHA,qBAAA;EACA,kBAAA;EACA,oBAAA;EAIA,gBAAA;EAFA,cAAA;EACA,uDAAA;ADfD;;ACsBA,2GAAA;AAKA,wCAAA;AACA,kCAAA;AACA,eAAA;AE3CA,6BAAA;AAiFA,2CAAA;AAiSA;;;;;;;;;;;;;EAAA;AAcA;;;;;;;;;;;;;;;;;EAAA;AFlVA,cAAA;AGnDA,oCAAA;AACA;EAEC,kBAAA;EACA,gBAAA;EACA,+MAAA;EAHA,mBAAA;AJgED;AIJA;EACC,mCAAA;EACA,qCAAA;EACA,oBAAA;EACA,6CAAA;EACA,uBAAA;AJMD;;ACpBA,iBAAA;AAGA,cAAA;AAQA,oDAAA;AACA,qCAAA;AAgIA,qEAAA;AACA,mCAAA;AI9LA,mCAAA;AACA;EAEE,6BAAA;EACA,2BAAA;EACA,2BAAA;EACA,oEAAA;EAHA,gCAAA;EACA,2BAAA;EACA,6BAAA;EACA,4EAAA;EAHA,8BAAA;EACA,2BAAA;EACA,0BAAA;EACA,oEAAA;EAHA,eAAA;EACA,uBAAA;EACA,yBAAA;EACA,4DAAA;EAHA,6BAAA;EACA,2BAAA;EACA,2BAAA;EACA,oEAAA;EAHA,eAAA;EACA,yBAAA;EACA,wBAAA;EACA,4DAAA;EAHA,iCAAA;EACA,8BAAA;EACA,8BAAA;EACA,gFAAA;EAHA,6BAAA;EACA,0BAAA;EACA,0BAAA;EACA,gEAAA;EAHA,0BAAA;EACA,wBAAA;EACA,wBAAA;EACA,wDAAA;EAHA,gCAAA;EACA,6BAAA;EACA,kBAAA;EACA,4EAAA;EAHA,0BAAA;EACA,aAAA;EACA,sBAAA;EACA,oDAAA;EAUD,sCAAA;EACA,wBAAA;EACA,mCAAA;EACA,wGAAA;EACA,6CAAA;EACA,+BAAA;EACA,0CAAA;EACA,oIAAA;EACA,+CAAA;EACA,iCAAA;EACA,4CAAA;EACA,4IAAA;EAGA,qCAAA;EACA,uBAAA;EACA,kCAAA;EACA,oGAAA;EACA,4CAAA;EACA,8BAAA;EACA,wCAAA;EACA,gIAAA;EACA,8CAAA;EACA,gCAAA;EACA,2CAAA;EACA,wIAAA;AL0GD;;AKrGC;EACC,mCAAA;EAIA,oBAAA;EAHA,qBAAA;EACA,kBAAA;EACA,oBAAA;EAIA,gBAAA;EAFA,cAAA;EACA,uDAAA;ALyGF;;ACmCA,6CAAA;AACA,kCAAA;AACA,yCAAA;AAyDA,iCAAA;AAkDA;;;;;EAAA;AKlTA;EAQI,kBAAA;EAAA,oBAAA;EAAA,oBAAA;EAAA,kBAAA;EAAA,iBAAA;EAAA,oBAAA;EAAA,oBAAA;EAAA,mBAAA;EAAA,kBAAA;EAAA,kBAAA;EAAA,8BAAA;EAAA,kBAAA;EAAA,uBAAA;EAIA,sBAAA;EAAA,sBAAA;EAAA,sBAAA;EAAA,sBAAA;EAAA,sBAAA;EAAA,sBAAA;EAAA,sBAAA;EAAA,sBAAA;EAAA,sBAAA;EAIA,qBAAA;EAAA,uBAAA;EAAA,qBAAA;EAAA,oBAAA;EAAA,kBAAA;EAAA,qBAAA;EAAA,mBAAA;EAIA,8BAAA;EAAA,iCAAA;EAAA,4BAAA;EAAA,6BAAA;EAAA,4BAAA;EAAA,8BAAA;EAAA,2BAAA;EAGF,6BAAA;EACA,0BAAA;EACA,+BAAA;EACA,+BAAA;EAMA,qHAAA;EACA,qGAAA;EACA,yFAAA;EAQA,gDAAA;EACA,yBAAA;EAAA,yBAAA;EACA,0BAAA;EACA,0BAAA;EACA,gCAAA;EAIA,gCAAA;AN8KF;;AOjNA;;;EAGE,sBAAA;APoNF;;AOrMI;EANJ;IAOM,uBAAA;EPyMJ;AACF;;AO5LA;EASE,8BAAA;EACA,gDAAA;EATA,SAAA;EAOA,mCAAA;EAFA,2BAAA;EAFA,uCAAA;ECiPI,mCALI;ED3OR,uCAAA;EAHA,uCAAA;EAKA,qCAAA;APkMF;;AOrLA;EACE,cAAA;EAAA,cAAA;EAGA,SAAA;EADA,8BAAA;EADA,cE8b4B;EF3b5B,aE6b4B;ATrQ9B;;AOrLA;EACE,WEwSa;AThHf;;AO9KA;EACE,aAAA;EACA,kBEiYuB;EFjYvB,qBEiYuB;EF9XvB,gBEiYqB;EFhYrB,iBEiYqB;EFpYrB,wEEiYqB;AT9MvB;;AO5KA;ECoMM,mBALI;EAKJ,0BALI;ARfV;;AO3KA;EC+LM,mBALI;EAKJ,0BALI;ARXV;;AO1KA;EC0LM,mBALI;EAKJ,yBALI;ARPV;;AOzKA;ECqLM,kBALI;EAKJ,sBALI;ARHV;;AOxKA;ECgLM,eALI;EAKJ,mBALI;ARCV;;AOvKA;EC2KM,eALI;EAKJ,eALI;ARKV;;AOhKA;EACE,aAAA;EACA,mBEkL0B;EFlL1B,mBEkL0B;ATf5B;;AOxJA;;EAEE,yCAAA;UAAA,iCAAA;EAEA,sCAAA;UAAA,8BAAA;EADA,YAAA;AP4JF;;AOrJA;EACE,mBAAA;EAAA,mBAAA;EACA,kBAAA;EACA,oBAAA;APwJF;;AOlJA;;EAEE,kBAAA;EAAA,kBAAA;APqJF;;AOlJA;;;EAGE,aAAA;EACA,mBAAA;EAAA,mBAAA;APqJF;;AOlJA;;;;EAIE,gBAAA;APqJF;;AOlJA;EACE,gBEuQiB;ATlHnB;;AOhJA;EACE,kBAAA;EAAA,qBAAA;EACA,cAAA;APmJF;;AO7IA;EACE,gBAAA;EAAA,gBAAA;APgJF;;AOxIA;;EAEE,mBEgPmB;ATrGrB;;AOnIA;EC4EM,kBALI;ARgEV;;AOhIA;EACE,cE2S4B;EF1S5B,iKEkT4B;AT/K9B;;AO1HA;;EAEE,kBAAA;ECwDI,iBALI;EDjDR,cAAA;EACA,wBAAA;AP6HF;;AO1HA;EAAM,eAAA;AP8HN;;AO7HA;EAAM,WAAA;APiIN;;AO5HA;EACE,cE+CW;EF9CX,qBEgDgB;AT+ElB;AO7HE;EACE,cE8Ce;EF7Cf,0BE8CoB;ATiFxB;;AOrHE;EAEE,cAAA;EACA,qBAAA;APuHJ;;AOhHA;;;;ECkBM,cALI;EDTR,qCE2J4B;EFzJ5B,+BAAA;EACA,2BAAA;APmHF;;AO5GA;EACE,cAAA;EACA,aAAA;EACA,mBAAA;EAAA,mBAAA;EACA,cAAA;ECAI,kBALI;ARqHV;AO3GE;EAEE,cAAA;ECPE,kBALI;EDaN,kBAAA;AP6GJ;;AOzGA;EAGE,qBAAA;EADA,cJ7RK;EK+QD,kBALI;ARgIV;AOzGE;EACE,cAAA;AP2GJ;;AOvGA;EACE,oBAAA;EAAA,sBAAA;EG1SE,kBAAA;EH6SF,yBNnOS;EMkOT,yBNlPM;EOwNF,kBALI;AR2IV;AOxGE;EACE,UAAA;EAEA,gBE0He;ED3Jb,cALI;ARgJV;;AOjGA;EACE,gBAAA;EAAA,gBAAA;APoGF;;AO9FA;;EAEE,sBAAA;APiGF;;AOzFA;EAEE,yBAAA;EADA,oBAAA;AP6FF;;AOzFA;EACE,gBEwL4B;EFxL5B,mBEwL4B;EFvL5B,mBEuL4B;EFvL5B,sBEuL4B;EFtL5B,cN7QS;EM8QT,gBAAA;AP4FF;;AOrFA;EAEE,mBAAA;EACA,gCAAA;APuFF;;AOpFA;;;;;;EAQE,eAAA;EADA,mBAAA;EADA,qBAAA;APyFF;;AO/EA;EACE,qBAAA;APkFF;;AO5EA;EAEE,gBAAA;AP8EF;;AOtEA;EACE,UAAA;APyEF;;AOpEA;;;;;EAKE,SAAA;EC7HI,kBALI;EDqIR,oBAAA;EAFA,oBAAA;APyEF;;AOnEA;;EAEE,oBAAA;APsEF;;AOjEA;EACE,eAAA;APoEF;;AOjEA;EAGE,iBAAA;APkEF;AO/DE;EACE,UAAA;APiEJ;;AO1DA;EACE,aAAA;AP6DF;;AOrDA;;;;EAIE,0BAAA;APwDF;AOrDI;;;;EACE,eAAA;AP0DN;;AOnDA;EACE,UAAA;EACA,kBAAA;APsDF;;AOjDA;EACE,gBAAA;APoDF;;AO1CA;EACE,YAAA;EAEA,SAAA;EADA,UAAA;EAEA,SAAA;AP6CF;;AOrCA;EAEE,WAAA;EAEA,kBEY4B;EFZ5B,qBEY4B;EFb5B,UAAA;EAFA,WAAA;ECpNI,eALI;EAKJ,iBALI;ED+NR,oBAAA;APuCF;AOrCE;EACE,WAAA;APuCJ;;AOhCA;;;;;;;EAOE,UAAA;APmCF;;AOhCA;EACE,YAAA;APmCF;;AO1BA;EAEE,6BAAA;EADA,oBAAA;AP8BF;;AOrBA;;;;;;;CAAA;AAWA;EACE,wBAAA;APqBF;;AOhBA;EACE,UAAA;APmBF;;AObA;EACE,aAAA;APgBF;;AOVA;EAEE,0BAAA;EADA,aAAA;APcF;;AORA;EACE,qBAAA;APWF;;AONA;EACE,SAAA;APSF;;AOFA;EACE,kBAAA;EACA,eAAA;APKF;;AOGA;EACE,wBAAA;APAF;;AOQA;EACE,wBAAA;APLF;;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,gBGWe;ElB0sBrB;AACF;AiB3qBI;EF5CE;IACE,gBGWe;ElB+sBrB;AACF;AiBhrBI;EF5CE;IACE,gBGWe;ElBotBrB;AACF;AiBrrBI;EF5CE;IACE,iBGWe;ElBytBrB;AACF;AmBpvBE;ECAA,mBAAA;EAAA,mBAAA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EAEA,yCAAA;EACA,6CAAA;EACA,4CAAA;ApBsvBF;AmB1vBI;ECaF,cAAA;EACA,WAAA;EACA,eAAA;EAGA,8BAAA;EAFA,6CAAA;EACA,4CAAA;ApBivBF;;AoBjsBM;EACE,YAAA;ApBosBR;;AoBjsBM;EApCJ,cAAA;EACA,WAAA;ApByuBF;;AoB3tBE;EACE,cAAA;EACA,WAAA;ApB8tBJ;;AoBhuBE;EACE,cAAA;EACA,UAAA;ApBmuBJ;;AoBruBE;EACE,cAAA;EACA,qBAAA;ApBwuBJ;;AoB1uBE;EACE,cAAA;EACA,UAAA;ApB6uBJ;;AoB/uBE;EACE,cAAA;EACA,UAAA;ApBkvBJ;;AoBpvBE;EACE,cAAA;EACA,qBAAA;ApBuvBJ;;AoBxtBM;EAhDJ,cAAA;EACA,WAAA;ApB4wBF;;AoBvtBU;EA/DN,kBAAA;ApB2xBJ;;AoB5tBU;EAhEN,cAAA;ApBiyBJ;;AoBjuBU;EA/DN,mBAAA;ApBgyBJ;;AoBjuBU;EA/DN,UAAA;ApBqyBJ;;AoBtuBU;EAhEN,cAAA;ApB2yBJ;;AoB3uBU;EA/DN,mBAAA;ApB0yBJ;;AoB3uBU;EA/DN,mBAAA;ApB+yBJ;;AoBhvBU;EAhEN,cAAA;ApBqzBJ;;AoBrvBU;EA/DN,UAAA;ApBozBJ;;AoBrvBU;EA/DN,mBAAA;ApByzBJ;;AoB1vBU;EAhEN,cAAA;ApB+zBJ;;AoB/vBU;EA/DN,mBAAA;ApB8zBJ;;AoB/vBU;EAhEN,cAAA;EACA,UAAA;ApBm0BJ;;AoBpwBU;EAhEN,cAAA;EACA,mBAAA;ApBw0BJ;;AoBzwBU;EAhEN,cAAA;EACA,mBAAA;ApB60BJ;;AoB9wBU;EAhEN,cAAA;EACA,WAAA;ApBk1BJ;;AoB3wBY;EAxDV,wBAAA;ApBu0BF;;AoB/wBY;EAxDV,yBAAA;ApB20BF;;AoBnxBY;EAxDV,gBAAA;ApB+0BF;;AoBvxBY;EAxDV,yBAAA;ApBm1BF;;AoB3xBY;EAxDV,yBAAA;ApBu1BF;;AoB/xBY;EAxDV,gBAAA;ApB21BF;;AoBnyBY;EAxDV,yBAAA;ApB+1BF;;AoBvyBY;EAxDV,yBAAA;ApBm2BF;;AoB3yBY;EAxDV,gBAAA;ApBu2BF;;AoB/yBY;EAxDV,yBAAA;ApB22BF;;AoBnzBY;EAxDV,yBAAA;ApB+2BF;;AoB5yBQ;;EAEE,gBAAA;ApB+yBV;;AoB5yBQ;;EAEE,gBAAA;ApB+yBV;;AoBtzBQ;;EAEE,kBAAA;EAAA,sBAAA;ApByzBV;;AoBtzBQ;;EAEE,kBAAA;EAAA,sBAAA;ApByzBV;;AoBh0BQ;;EAEE,kBAAA;EAAA,qBAAA;ApBm0BV;;AoBh0BQ;;EAEE,kBAAA;EAAA,qBAAA;ApBm0BV;;AoB10BQ;;EAEE,mBAAA;EAAA,mBAAA;ApB60BV;;AoB10BQ;;EAEE,mBAAA;EAAA,mBAAA;ApB60BV;;AoBp1BQ;;EAEE,mBAAA;EAAA,mBAAA;ApBu1BV;;AoBp1BQ;;EAEE,mBAAA;EAAA,mBAAA;ApBu1BV;;AoB91BQ;;EAEE,mBAAA;EAAA,mBAAA;ApBi2BV;;AoB91BQ;;EAEE,mBAAA;EAAA,mBAAA;ApBi2BV;;AiB35BI;EGUE;IACE,YAAA;EpBq5BN;EoBl5BI;IApCJ,cAAA;IACA,WAAA;EpBy7BA;EoB36BA;IACE,cAAA;IACA,WAAA;EpB66BF;EoB/6BA;IACE,cAAA;IACA,UAAA;EpBi7BF;EoBn7BA;IACE,cAAA;IACA,qBAAA;EpBq7BF;EoBv7BA;IACE,cAAA;IACA,UAAA;EpBy7BF;EoB37BA;IACE,cAAA;IACA,UAAA;EpB67BF;EoB/7BA;IACE,cAAA;IACA,qBAAA;EpBi8BF;EoBl6BI;IAhDJ,cAAA;IACA,WAAA;EpBq9BA;EoBh6BQ;IAhEN,cAAA;IACA,kBAAA;EpBm+BF;EoBp6BQ;IAhEN,cAAA;IACA,mBAAA;EpBu+BF;EoBx6BQ;IAhEN,cAAA;IACA,UAAA;EpB2+BF;EoB56BQ;IAhEN,cAAA;IACA,mBAAA;EpB++BF;EoBh7BQ;IAhEN,cAAA;IACA,mBAAA;EpBm/BF;EoBp7BQ;IAhEN,cAAA;IACA,UAAA;EpBu/BF;EoBx7BQ;IAhEN,cAAA;IACA,mBAAA;EpB2/BF;EoB57BQ;IAhEN,cAAA;IACA,mBAAA;EpB+/BF;EoBh8BQ;IAhEN,cAAA;IACA,UAAA;EpBmgCF;EoBp8BQ;IAhEN,cAAA;IACA,mBAAA;EpBugCF;EoBx8BQ;IAhEN,cAAA;IACA,mBAAA;EpB2gCF;EoB58BQ;IAhEN,cAAA;IACA,WAAA;EpB+gCF;EoBx8BU;IAxDV,cAAA;EpBmgCA;EoB38BU;IAxDV,wBAAA;EpBsgCA;EoB98BU;IAxDV,yBAAA;EpBygCA;EoBj9BU;IAxDV,gBAAA;EpB4gCA;EoBp9BU;IAxDV,yBAAA;EpB+gCA;EoBv9BU;IAxDV,yBAAA;EpBkhCA;EoB19BU;IAxDV,gBAAA;EpBqhCA;EoB79BU;IAxDV,yBAAA;EpBwhCA;EoBh+BU;IAxDV,yBAAA;EpB2hCA;EoBn+BU;IAxDV,gBAAA;EpB8hCA;EoBt+BU;IAxDV,yBAAA;EpBiiCA;EoBz+BU;IAxDV,yBAAA;EpBoiCA;EoBj+BM;;IAEE,gBAAA;EpBm+BR;EoBh+BM;;IAEE,gBAAA;EpBk+BR;EoBz+BM;;IAEE,sBAAA;EpB2+BR;EoBx+BM;;IAEE,sBAAA;EpB0+BR;EoBj/BM;;IAEE,qBAAA;EpBm/BR;EoBh/BM;;IAEE,qBAAA;EpBk/BR;EoBz/BM;;IAEE,mBAAA;EpB2/BR;EoBx/BM;;IAEE,mBAAA;EpB0/BR;EoBjgCM;;IAEE,mBAAA;EpBmgCR;EoBhgCM;;IAEE,mBAAA;EpBkgCR;EoBzgCM;;IAEE,mBAAA;EpB2gCR;EoBxgCM;;IAEE,mBAAA;EpB0gCR;AACF;AiBrkCI;EGUE;IACE,YAAA;EpB8jCN;EoB3jCI;IApCJ,cAAA;IACA,WAAA;EpBkmCA;EoBplCA;IACE,cAAA;IACA,WAAA;EpBslCF;EoBxlCA;IACE,cAAA;IACA,UAAA;EpB0lCF;EoB5lCA;IACE,cAAA;IACA,qBAAA;EpB8lCF;EoBhmCA;IACE,cAAA;IACA,UAAA;EpBkmCF;EoBpmCA;IACE,cAAA;IACA,UAAA;EpBsmCF;EoBxmCA;IACE,cAAA;IACA,qBAAA;EpB0mCF;EoB3kCI;IAhDJ,cAAA;IACA,WAAA;EpB8nCA;EoBzkCQ;IAhEN,cAAA;IACA,kBAAA;EpB4oCF;EoB7kCQ;IAhEN,cAAA;IACA,mBAAA;EpBgpCF;EoBjlCQ;IAhEN,cAAA;IACA,UAAA;EpBopCF;EoBrlCQ;IAhEN,cAAA;IACA,mBAAA;EpBwpCF;EoBzlCQ;IAhEN,cAAA;IACA,mBAAA;EpB4pCF;EoB7lCQ;IAhEN,cAAA;IACA,UAAA;EpBgqCF;EoBjmCQ;IAhEN,cAAA;IACA,mBAAA;EpBoqCF;EoBrmCQ;IAhEN,cAAA;IACA,mBAAA;EpBwqCF;EoBzmCQ;IAhEN,cAAA;IACA,UAAA;EpB4qCF;EoB7mCQ;IAhEN,cAAA;IACA,mBAAA;EpBgrCF;EoBjnCQ;IAhEN,cAAA;IACA,mBAAA;EpBorCF;EoBrnCQ;IAhEN,cAAA;IACA,WAAA;EpBwrCF;EoBjnCU;IAxDV,cAAA;EpB4qCA;EoBpnCU;IAxDV,wBAAA;EpB+qCA;EoBvnCU;IAxDV,yBAAA;EpBkrCA;EoB1nCU;IAxDV,gBAAA;EpBqrCA;EoB7nCU;IAxDV,yBAAA;EpBwrCA;EoBhoCU;IAxDV,yBAAA;EpB2rCA;EoBnoCU;IAxDV,gBAAA;EpB8rCA;EoBtoCU;IAxDV,yBAAA;EpBisCA;EoBzoCU;IAxDV,yBAAA;EpBosCA;EoB5oCU;IAxDV,gBAAA;EpBusCA;EoB/oCU;IAxDV,yBAAA;EpB0sCA;EoBlpCU;IAxDV,yBAAA;EpB6sCA;EoB1oCM;;IAEE,gBAAA;EpB4oCR;EoBzoCM;;IAEE,gBAAA;EpB2oCR;EoBlpCM;;IAEE,sBAAA;EpBopCR;EoBjpCM;;IAEE,sBAAA;EpBmpCR;EoB1pCM;;IAEE,qBAAA;EpB4pCR;EoBzpCM;;IAEE,qBAAA;EpB2pCR;EoBlqCM;;IAEE,mBAAA;EpBoqCR;EoBjqCM;;IAEE,mBAAA;EpBmqCR;EoB1qCM;;IAEE,mBAAA;EpB4qCR;EoBzqCM;;IAEE,mBAAA;EpB2qCR;EoBlrCM;;IAEE,mBAAA;EpBorCR;EoBjrCM;;IAEE,mBAAA;EpBmrCR;AACF;AiB9uCI;EGUE;IACE,YAAA;EpBuuCN;EoBpuCI;IApCJ,cAAA;IACA,WAAA;EpB2wCA;EoB7vCA;IACE,cAAA;IACA,WAAA;EpB+vCF;EoBjwCA;IACE,cAAA;IACA,UAAA;EpBmwCF;EoBrwCA;IACE,cAAA;IACA,qBAAA;EpBuwCF;EoBzwCA;IACE,cAAA;IACA,UAAA;EpB2wCF;EoB7wCA;IACE,cAAA;IACA,UAAA;EpB+wCF;EoBjxCA;IACE,cAAA;IACA,qBAAA;EpBmxCF;EoBpvCI;IAhDJ,cAAA;IACA,WAAA;EpBuyCA;EoBlvCQ;IAhEN,cAAA;IACA,kBAAA;EpBqzCF;EoBtvCQ;IAhEN,cAAA;IACA,mBAAA;EpByzCF;EoB1vCQ;IAhEN,cAAA;IACA,UAAA;EpB6zCF;EoB9vCQ;IAhEN,cAAA;IACA,mBAAA;EpBi0CF;EoBlwCQ;IAhEN,cAAA;IACA,mBAAA;EpBq0CF;EoBtwCQ;IAhEN,cAAA;IACA,UAAA;EpBy0CF;EoB1wCQ;IAhEN,cAAA;IACA,mBAAA;EpB60CF;EoB9wCQ;IAhEN,cAAA;IACA,mBAAA;EpBi1CF;EoBlxCQ;IAhEN,cAAA;IACA,UAAA;EpBq1CF;EoBtxCQ;IAhEN,cAAA;IACA,mBAAA;EpBy1CF;EoB1xCQ;IAhEN,cAAA;IACA,mBAAA;EpB61CF;EoB9xCQ;IAhEN,cAAA;IACA,WAAA;EpBi2CF;EoB1xCU;IAxDV,cAAA;EpBq1CA;EoB7xCU;IAxDV,wBAAA;EpBw1CA;EoBhyCU;IAxDV,yBAAA;EpB21CA;EoBnyCU;IAxDV,gBAAA;EpB81CA;EoBtyCU;IAxDV,yBAAA;EpBi2CA;EoBzyCU;IAxDV,yBAAA;EpBo2CA;EoB5yCU;IAxDV,gBAAA;EpBu2CA;EoB/yCU;IAxDV,yBAAA;EpB02CA;EoBlzCU;IAxDV,yBAAA;EpB62CA;EoBrzCU;IAxDV,gBAAA;EpBg3CA;EoBxzCU;IAxDV,yBAAA;EpBm3CA;EoB3zCU;IAxDV,yBAAA;EpBs3CA;EoBnzCM;;IAEE,gBAAA;EpBqzCR;EoBlzCM;;IAEE,gBAAA;EpBozCR;EoB3zCM;;IAEE,sBAAA;EpB6zCR;EoB1zCM;;IAEE,sBAAA;EpB4zCR;EoBn0CM;;IAEE,qBAAA;EpBq0CR;EoBl0CM;;IAEE,qBAAA;EpBo0CR;EoB30CM;;IAEE,mBAAA;EpB60CR;EoB10CM;;IAEE,mBAAA;EpB40CR;EoBn1CM;;IAEE,mBAAA;EpBq1CR;EoBl1CM;;IAEE,mBAAA;EpBo1CR;EoB31CM;;IAEE,mBAAA;EpB61CR;EoB11CM;;IAEE,mBAAA;EpB41CR;AACF;AiBv5CI;EGUE;IACE,YAAA;EpBg5CN;EoB74CI;IApCJ,cAAA;IACA,WAAA;EpBo7CA;EoBt6CA;IACE,cAAA;IACA,WAAA;EpBw6CF;EoB16CA;IACE,cAAA;IACA,UAAA;EpB46CF;EoB96CA;IACE,cAAA;IACA,qBAAA;EpBg7CF;EoBl7CA;IACE,cAAA;IACA,UAAA;EpBo7CF;EoBt7CA;IACE,cAAA;IACA,UAAA;EpBw7CF;EoB17CA;IACE,cAAA;IACA,qBAAA;EpB47CF;EoB75CI;IAhDJ,cAAA;IACA,WAAA;EpBg9CA;EoB35CQ;IAhEN,cAAA;IACA,kBAAA;EpB89CF;EoB/5CQ;IAhEN,cAAA;IACA,mBAAA;EpBk+CF;EoBn6CQ;IAhEN,cAAA;IACA,UAAA;EpBs+CF;EoBv6CQ;IAhEN,cAAA;IACA,mBAAA;EpB0+CF;EoB36CQ;IAhEN,cAAA;IACA,mBAAA;EpB8+CF;EoB/6CQ;IAhEN,cAAA;IACA,UAAA;EpBk/CF;EoBn7CQ;IAhEN,cAAA;IACA,mBAAA;EpBs/CF;EoBv7CQ;IAhEN,cAAA;IACA,mBAAA;EpB0/CF;EoB37CQ;IAhEN,cAAA;IACA,UAAA;EpB8/CF;EoB/7CQ;IAhEN,cAAA;IACA,mBAAA;EpBkgDF;EoBn8CQ;IAhEN,cAAA;IACA,mBAAA;EpBsgDF;EoBv8CQ;IAhEN,cAAA;IACA,WAAA;EpB0gDF;EoBn8CU;IAxDV,cAAA;EpB8/CA;EoBt8CU;IAxDV,wBAAA;EpBigDA;EoBz8CU;IAxDV,yBAAA;EpBogDA;EoB58CU;IAxDV,gBAAA;EpBugDA;EoB/8CU;IAxDV,yBAAA;EpB0gDA;EoBl9CU;IAxDV,yBAAA;EpB6gDA;EoBr9CU;IAxDV,gBAAA;EpBghDA;EoBx9CU;IAxDV,yBAAA;EpBmhDA;EoB39CU;IAxDV,yBAAA;EpBshDA;EoB99CU;IAxDV,gBAAA;EpByhDA;EoBj+CU;IAxDV,yBAAA;EpB4hDA;EoBp+CU;IAxDV,yBAAA;EpB+hDA;EoB59CM;;IAEE,gBAAA;EpB89CR;EoB39CM;;IAEE,gBAAA;EpB69CR;EoBp+CM;;IAEE,sBAAA;EpBs+CR;EoBn+CM;;IAEE,sBAAA;EpBq+CR;EoB5+CM;;IAEE,qBAAA;EpB8+CR;EoB3+CM;;IAEE,qBAAA;EpB6+CR;EoBp/CM;;IAEE,mBAAA;EpBs/CR;EoBn/CM;;IAEE,mBAAA;EpBq/CR;EoB5/CM;;IAEE,mBAAA;EpB8/CR;EoB3/CM;;IAEE,mBAAA;EpB6/CR;EoBpgDM;;IAEE,mBAAA;EpBsgDR;EoBngDM;;IAEE,mBAAA;EpBqgDR;AACF;AqB3nDA;EACE,0BAAA;EACA,iCAAA;EACA,yCAAA;EACA,6CAAA;EACA,wCAAA;EACA,2CAAA;EACA,uCAAA;EACA,4CAAA;EAEA,WAAA;EACA,mBZmPO;EYnPP,mBZmPO;EYhPP,6JZ4W4B;EY9W5B,sBpB8DM;EoB7DN,mBZkhB4B;AT2mC9B;AqBrnDE;EACE,gBAAA;EAAA,sBAAA;EAEA,wBZyVW;EY1VX,oCAAA;EAEA,wDAAA;ArBunDJ;AqBpnDE;EACE,uBAAA;ArBsnDJ;AqBnnDE;EACE,sBAAA;ArBqnDJ;AqBjnDE;EACE,kCAAA;ArBmnDJ;;AqB1mDA;EACE,iBAAA;ArB6mDF;;AqBnmDE;EACE,gBAAA;EAAA,wBAAA;ArBsmDJ;;AqBvlDE;EACE,mBAAA;ArB0lDJ;AqBvlDI;EACE,mBAAA;ArBylDN;;AqBllDE;EACE,sBAAA;ArBqlDJ;AqBllDE;EACE,mBAAA;ArBolDJ;;AqB3kDE;EACE,gDAAA;EACA,oCAAA;ArB8kDJ;;AqBtkDA;EACE,+CAAA;EACA,mCAAA;ArBykDF;;AqBjkDE;EACE,8CAAA;EACA,kCAAA;ArBokDJ;;AsBhsDE;EAME,sBAAA;EACA,8BAAA;EACA,yCAAA;EACA,6BAAA;EACA,wCAAA;EACA,4BAAA;EACA,uCAAA;EAGA,qBAAA;EADA,sBAbQ;AtB2sDZ;;AsB5sDE;EAME,sBAAA;EACA,8BAAA;EACA,yCAAA;EACA,6BAAA;EACA,wCAAA;EACA,4BAAA;EACA,uCAAA;EAGA,qBAAA;EADA,sBAbQ;AtButDZ;;AsBxtDE;EAME,sBAAA;EACA,8BAAA;EACA,yCAAA;EACA,6BAAA;EACA,wCAAA;EACA,4BAAA;EACA,uCAAA;EAGA,qBAAA;EADA,sBAbQ;AtBmuDZ;;AsBpuDE;EAME,sBAAA;EACA,8BAAA;EACA,yCAAA;EACA,6BAAA;EACA,wCAAA;EACA,4BAAA;EACA,uCAAA;EAGA,qBAAA;EADA,sBAbQ;AtB+uDZ;;AsBhvDE;EAME,sBAAA;EACA,8BAAA;EACA,yCAAA;EACA,6BAAA;EACA,wCAAA;EACA,4BAAA;EACA,uCAAA;EAGA,qBAAA;EADA,sBAbQ;AtB2vDZ;;AsB5vDE;EAME,sBAAA;EACA,8BAAA;EACA,yCAAA;EACA,6BAAA;EACA,wCAAA;EACA,4BAAA;EACA,uCAAA;EAGA,qBAAA;EADA,sBAbQ;AtBuwDZ;;AsBxwDE;EAME,sBAAA;EACA,8BAAA;EACA,yCAAA;EACA,6BAAA;EACA,wCAAA;EACA,4BAAA;EACA,uCAAA;EAGA,qBAAA;EADA,sBAbQ;AtBmxDZ;;AqBjoDI;EAEE,iCAAA;EADA,gBAAA;ArBqoDN;;AiB/sDI;EIyEA;IAEE,iCAAA;IADA,gBAAA;ErB2oDJ;AACF;AiBttDI;EIyEA;IAEE,iCAAA;IADA,gBAAA;ErBipDJ;AACF;AiB5tDI;EIyEA;IAEE,iCAAA;IADA,gBAAA;ErBupDJ;AACF;AiBluDI;EIyEA;IAEE,iCAAA;IADA,gBAAA;ErB6pDJ;AACF;AuBhzDA;EACE,kBduqBsC;EcvqBtC,qBduqBsC;AT2oCxC;;AuBzyDA;EAGE,gBAAA;EfoRI,kBALI;Ee3QR,gBdgb4B;AT03C9B;;AuBtyDA;EAVE,+BAAA;EACA,kCAAA;AvBqzDF;;AuB5yDA;Ef4QM,kBALI;EAKJ,sBALI;ARqiDV;;AuBtyDA;EACE,gCAAA;EACA,mCAAA;EfoQI,mBALI;EAKJ,0BALI;AR2iDV;;AwBv0DA;EACE,ef+pBsC;Ee/pBtC,mBf+pBsC;Ee3pBtC,cvBkFS;EO0ML,kBALI;ARijDV;;AyB70DA;EACE,cAAA;EAWA,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EAVA,WAAA;EACA,iBAAA;EAAA,oBAAA;EAQA,yBAAA;EfIE,kBAAA;EeLF,4BAAA;EADA,oCxBgEM;EwBjEN,sBxBkEM;EwBpEN,gBhBqbmB;ED1Jf,eALI;EAKJ,eALI;EiBrRR,gBhB0b4B;AT25C9B;AyBx0DE;EACE,gBAAA;AzB00DJ;AyBx0DI;EACE,eAAA;AzB00DN;AyBr0DE;EAGE,qBhB2qBoC;EgB1qBpC,UAAA;EAFA,oCxB0CI;EwBnCF,iDhByjB0B;EgBjkB5B,sBxB4CI;AD+xDR;AyB5zDE;EAEE,aAAA;AzB6zDJ;AyBzzDE;EACE,cxBkCO;EwBhCP,UAAA;AzB0zDJ;AyB7zDE;EACE,cxBkCO;EwBhCP,UAAA;AzB0zDJ;AyBlzDE;EAEE,yBxByBO;EwBtBP,UAAA;AzBizDJ;AyB7yDE;EAEE,kBAAA;EAAA,qBAAA;EACA,uBhB4gBkB;EgB5gBlB,uBhB4gBkB;EgB9gBlB,iBAAA;EAAA,oBAAA;EAQA,eAAA;EADA,mBAAA;EAGA,gBAAA;EADA,4BhBgSW;EgBnSX,qBAAA;EC9EF,gCjB41BgC;EgBjxB9B,yBxBFI;EwBIJ,oBAAA;AzBozDJ;AyB3yDE;EACE,uJhBswB8B;ATuiClC;AyB1yDE;EAEE,kBAAA;EAAA,qBAAA;EACA,uBhByfkB;EgBzflB,uBhByfkB;EgB3flB,iBAAA;EAAA,oBAAA;EAQA,eAAA;EADA,mBAAA;EAGA,gBAAA;EADA,4BhB6QW;EgBhRX,qBAAA;ECjGF,gCjB41BgC;EgB9vB9B,yBxBrBI;EwBuBJ,oBAAA;AzBizDJ;AyBxyDE;EACE,uJhBmvB8B;ATujClC;;AyBjyDA;EACE,cAAA;EACA,WAAA;EAEA,gBAAA;EADA,cAAA;EAAA,iBAAA;EAKA,yBAAA;EACA,mBAAA;EAFA,6BAAA;EADA,sBxB/CM;EwB8CN,gBhByU4B;AT+9C9B;AyBlyDE;EAEE,gBAAA;EACA,eAAA;AzBmyDJ;;AyBxxDA;EACE,sChB6kBsC;EgB5kBtC,gBAAA;EAAA,uBAAA;Ef/HE,kBAAA;EFkRE,mBALI;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;ApCy4FJ;;AoCn4FE;EACE,aAAA;ApCs4FJ;;AoCl4FA;EACE,SAAA;EACA,gBAAA;ApCq4FF;AoCl4FE;EACE,QAAA;EACA,YAAA;ApCo4FJ;;AqCz5FA;;;;EAIE,kBAAA;ArC45FF;;AqCz5FA;EACE,mBAAA;ArC45FF;AsCv4FI;EACE,qBAAA;EACA,oB7BuXwB;E6BrZ5B,uBAAA;EACA,qCAAA;EACA,gBAAA;EACA,oCAAA;EA6BI,WAAA;EADA,uB7BqXwB;ATyhF9B;AsCr3FI;EACE,cAAA;AtCu3FN;;AqCl6FA;EAGE,aAAA;EADA,a5B43BgB;E4B73BhB,kBAAA;EAGA,gB5B68BkC;E4B78BlC,gB5B68BkC;E4B38BlC,SAAA;EADA,cAAA;EAAA,iBAAA;EAQA,wCAAA;E3BVE,kBAAA;E2BSF,4BAAA;EADA,oCpCkDM;EoCrDN,sBpCsDM;EOuNF,eALI;EAKJ,eALI;E6BtQR,gBAAA;EADA,gBAAA;ArC06FF;AqCl6FE;EACE,SAAA;EACA,OAAA;EACA,e5Bg8BgC;E4Bh8BhC,oB5Bg8BgC;ATo+DpC;;AqCx5FI;EACE,oBAAA;ArC25FN;AqCz5FM;EACE,WAAA;EACA,OAAA;ArC25FR;;AqCv5FI;EACE,kBAAA;ArC05FN;AqCx5FM;EACE,QAAA;EACA,UAAA;ArC05FR;;AiBz5FI;EoBfA;IACE,oBAAA;ErC46FJ;EqC16FI;IACE,WAAA;IACA,OAAA;ErC46FN;EqCx6FE;IACE,kBAAA;ErC06FJ;EqCx6FI;IACE,QAAA;IACA,UAAA;ErC06FN;AACF;AiB16FI;EoBfA;IACE,oBAAA;ErC47FJ;EqC17FI;IACE,WAAA;IACA,OAAA;ErC47FN;EqCx7FE;IACE,kBAAA;ErC07FJ;EqCx7FI;IACE,QAAA;IACA,UAAA;ErC07FN;AACF;AiB17FI;EoBfA;IACE,oBAAA;ErC48FJ;EqC18FI;IACE,WAAA;IACA,OAAA;ErC48FN;EqCx8FE;IACE,kBAAA;ErC08FJ;EqCx8FI;IACE,QAAA;IACA,UAAA;ErC08FN;AACF;AiB18FI;EoBfA;IACE,oBAAA;ErC49FJ;EqC19FI;IACE,WAAA;IACA,OAAA;ErC49FN;EqCx9FE;IACE,kBAAA;ErC09FJ;EqCx9FI;IACE,QAAA;IACA,UAAA;ErC09FN;AACF;AqCj9FE;EACE,SAAA;EACA,YAAA;EACA,aAAA;EACA,kB5Bw5BgC;E4Bx5BhC,uB5Bw5BgC;AT2jEpC;AsCjgGI;EACE,qBAAA;EACA,oB7BuXwB;E6B9Y5B,aAAA;EACA,qCAAA;EACA,0BAAA;EACA,oCAAA;EAsBI,WAAA;EADA,uB7BqXwB;ATmpF9B;AsC/+FI;EACE,cAAA;AtCi/FN;;AqCv9FE;EACE,MAAA;EACA,WAAA;EACA,UAAA;EACA,aAAA;EACA,gB5B04BgC;E4B14BhC,qB5B04BgC;ATglEpC;AsCthGI;EACE,qBAAA;EACA,oB7BuXwB;E6BvY5B,mCAAA;EACA,eAAA;EACA,sCAAA;EACA,wBAAA;EAeI,WAAA;EADA,uB7BqXwB;ATwqF9B;AsCpgGI;EACE,cAAA;AtCsgGN;AqCl+FI;EACE,iBAAA;ArCo+FN;;AqC99FE;EACE,MAAA;EACA,WAAA;EACA,UAAA;EACA,aAAA;EACA,iB5By3BgC;E4Bz3BhC,sB5By3BgC;ATwmEpC;AsC9iGI;EACE,qBAAA;EACA,oB7BuXwB;E6BrXxB,WAAA;EADA,uB7BqXwB;E6BxWtB,aAAA;AtCoiGR;AsCjiGM;EACE,qBAAA;EACA,qB7BoWsB;E6BhY5B,mCAAA;EACA,yBAAA;EACA,sCAAA;EA4BM,WAAA;EADA,uB7BkWsB;ATwsF9B;AsCpiGI;EACE,cAAA;AtCsiGN;AqCj/FI;EACE,iBAAA;ArCm/FN;;AqC5+FA;EACE,SAAA;EACA,aAAA;EAAA,gBAAA;EACA,gBAAA;EACA,4CAAA;ArC++FF;;AqCz+FA;EACE,cAAA;EACA,WAAA;EACA,iBAAA;EAAA,qBAAA;EACA,WAAA;EAOA,SAAA;EADA,6BAAA;EAJA,cpC3CS;EoC0CT,gB5BwTmB;E4BtTnB,mBAAA;EAEA,mBAAA;ArC6+FF;AqC79FE;EXvJA,kJjB8+BkC;E4Br1BhC,c5Bo1BgC;E4Bn1BhC,qBAAA;ArC+9FJ;AqC39FE;EX9JA,yBjBmEQ;E4B6FN,yBpCvFI;EoCwFJ,qBAAA;ArC69FJ;AqCz9FE;EAIE,6BAAA;EAFA,cpClFO;EoCmFP,oBAAA;ArC29FJ;;AqC/8FA;EAJE,cAAA;ArCg+FF;;AqC59FA;EAGE,gBAAA;EADA,iB5Bm0BkC;E4Bn0BlC,oB5Bm0BkC;E4Bh0BlC,cpCnGS;EO2ML,mBALI;EAKJ,0BALI;E6BlGR,mBAAA;ArCs9FF;;AqCl9FA;EACE,cAAA;EACA,iBAAA;EAAA,qBAAA;EACA,cpCxGS;AD6jGX;;AqCj9FA;EAGE,oC5B4xBkC;E4B7xBlC,yBpC/GS;EoC8GT,cpCnHS;ADykGX;AqCj9FE;EACE,cpCzHO;AD4kGX;AqCj9FI;EX9MF,2CjBogCkC;E4BpzB9B,yBpCvIE;AD0lGR;AqC/8FI;EXpNF,yBjBmEQ;E4BmJJ,yBpC7IE;AD8lGR;AqC78FI;EAEE,cpCzIK;ADulGX;AqC18FE;EACE,oC5BmwBgC;ATysEpC;AqCz8FE;EACE,cpClJO;AD6lGX;AqCx8FE;EACE,cpCpJO;AD8lGX;;AuCtrGA;;EAGE,oBAAA;EADA,kBAAA;EAEA,sBAAA;AvCyrGF;AuCvrGE;;EACE,kBAAA;EACA,cAAA;AvC0rGJ;AuCrrGE;;;;;;;;;;;;EAME,UAAA;AvC6rGJ;;AuCxrGA;EACE,aAAA;EACA,eAAA;EACA,2BAAA;AvC2rGF;AuCzrGE;EACE,WAAA;AvC2rGJ;;AuCrrGE;;EAEE,iBAAA;AvCwrGJ;AuCprGE;;E7BRE,0BAAA;EACA,6BAAA;AVgsGJ;AuChrGE;;;E7BHE,yBAAA;EACA,4BAAA;AVwrGJ;;AuCnqGA;EACE,mBAAA;EAAA,sBAAA;EACA,kBAAA;EAAA,qBAAA;AvCsqGF;AuCpqGE;EAGE,cAAA;AvCoqGJ;AuCjqGE;EACE,eAAA;AvCmqGJ;;AuC/pGA;EACE,kBAAA;EAAA,uBAAA;EACA,iBAAA;EAAA,sBAAA;AvCkqGF;;AuC/pGA;EACE,mBAAA;EAAA,sBAAA;EACA,kBAAA;EAAA,qBAAA;AvCkqGF;;AuC9oGA;EACE,sBAAA;EACA,uBAAA;EACA,uBAAA;AvCipGF;AuC/oGE;;EAEE,WAAA;AvCipGJ;AuC9oGE;;EAEE,gBAAA;AvCgpGJ;AuC5oGE;;E7BvFE,6BAAA;EACA,4BAAA;AVuuGJ;AuC5oGE;;E7BzGE,0BAAA;EADA,yBAAA;AV2vGJ;;AwClxGA;EACE,aAAA;EACA,eAAA;EAEA,gBAAA;EADA,eAAA;EAEA,gBAAA;AxCqxGF;;AwClxGA;EACE,cAAA;EACA,iBAAA;EAAA,oBAAA;EAGA,c/BuRW;AT4/Fb;AwC/wGE;EAEE,c/BoRe;E+BnRf,qBAAA;AxCgxGJ;AwC5wGE;EACE,cvC2DO;EuCzDP,eAAA;EADA,oBAAA;AxC+wGJ;;AwCtwGA;EACE,gCAAA;AxCywGF;AwCvwGE;EACE,mBAAA;EAEA,6BAAA;E9BjBA,4BAAA;EADA,2BAAA;E8BiBA,gBAAA;AxC4wGJ;AwCxwGI;EAEE,qC/Bk3B8B;E+Bh3B9B,kBAAA;AxCwwGN;AwCrwGI;EAGE,yBAAA;EADA,6BAAA;EADA,cvCgCK;ADyuGX;AwCnwGE;;EAIE,gD/Bq2BgC;E+Bt2BhC,oCvCWI;EuCZJ,cvC0BO;AD6uGX;AwClwGE;EAEE,gBAAA;E9B3CA,0BAAA;EADA,yBAAA;AVizGJ;;AwCzvGE;EAEE,SAAA;E9BnEA,kBAAA;E8BkEA,gBAAA;AxC8vGJ;AwCzvGE;;EdtFA,yBjBmEQ;E+BqBN,yBvCfI;AD2wGR;;AwCjvGE;;EAEE,cAAA;EACA,kBAAA;AxCovGJ;;AwC/uGE;;EAGE,YAAA;EADA,aAAA;EAEA,kBAAA;AxCkvGJ;;AwC5uGE;;EACE,WAAA;AxCgvGJ;;AwCtuGE;EACE,aAAA;AxCyuGJ;AwCvuGE;EACE,cAAA;AxCyuGJ;;AyCj2GA;EAEE,aAAA;EADA,kBAAA;EAEA,eAAA;EACA,mBAAA;EACA,8BAAA;EACA,gBhC45BkC;EgC55BlC,mBhC45BkC;EgC15BlC,mBhC05BkC;EgC15BlC,sBhC05BkC;ATy8EpC;AyC51GE;;;;;;EACE,aAAA;EACA,kBAAA;EACA,mBAAA;EACA,8BAAA;AzCm2GJ;AyC/0GA;EAGE,kBhCk4BkC;EgCl4BlC,kBhCk4BkC;EgCp4BlC,kBhCm4BkC;EgCn4BlC,sBhCm4BkC;EgCl4BlC,qBhCk4BkC;EgCl4BlC,yBhCk4BkC;EDtpB9B,kBALI;EAKJ,sBALI;EiCnOR,mBAAA;AzCg1GF;AyC90GE;EAEE,qBAAA;AzC+0GJ;;AyCt0GA;EACE,aAAA;EACA,sBAAA;EAEA,gBAAA;EADA,eAAA;EAEA,gBAAA;AzCy0GF;AyCv0GE;EACE,gBAAA;EACA,eAAA;AzCy0GJ;AyCt0GE;EACE,gBAAA;AzCw0GJ;;AyC/zGA;EACE,gBxCsHU;EwCtHV,mBxCsHU;EwCrHV,mBxCqHU;EwCrHV,sBxCqHU;AD6sGZ;;AyCtzGA;EAEE,YAAA;EADA,gBAAA;EAIA,mBAAA;AzCuzGF;;AyCnzGA;EACE,iBAAA;EAAA,wBAAA;EAIA,6BAAA;E/BzGE,kBAAA;E+BwGF,6BAAA;EjC0KI,kBALI;EAKJ,sBALI;EiCtKR,cAAA;AzCyzGF;AyC/yGE;EAHE,qBAAA;AzC0zGJ;AyCvzGE;EAEE,UAAA;EACA,wBAAA;AzCozGJ;;AyC9yGA;EACE,qBAAA;EACA,YAAA;EACA,aAAA;EAGA,2BAAA;EACA,qBAAA;EAFA,4BAAA;EADA,sBAAA;AzCozGF;;AyC9yGA;EACE,yCAAA;EACA,gBAAA;AzCizGF;;AiB34GI;EwBsGA;IAEI,iBAAA;IACA,2BAAA;EzCwyGN;EyCtyGM;IACE,mBAAA;EzCwyGR;EyCtyGQ;IACE,kBAAA;EzCwyGV;EyCryGQ;IACE,qBhCmwBwB;IgClwBxB,oBhCkwBwB;ETqiFlC;EyCnyGM;IACE,iBAAA;EzCqyGR;EyClyGM;IACE,wBAAA;IACA,gBAAA;EzCoyGR;EyC7xGM;IACE,aAAA;EzCkyGR;EyC/xGM;IAKE,8BAAA;IAFA,aAAA;IAFA,iBAAA;IACA,SAAA;IAEA,YAAA;IAMA,eAAA;IAHA,eAAA;IACA,cAAA;IAFA,6BAAA;EzCoyGR;EyC9xGM;;IAEE,YAAA;IACA,aAAA;IACA,gBAAA;EzCgyGR;EyC7xGM;IACE,aAAA;IACA,YAAA;IACA,UAAA;IACA,mBAAA;EzC+xGR;AACF;AiBh8GI;EwBsGA;IAEI,iBAAA;IACA,2BAAA;EzC41GN;EyC11GM;IACE,mBAAA;EzC41GR;EyC11GQ;IACE,kBAAA;EzC41GV;EyCz1GQ;IACE,qBhCmwBwB;IgClwBxB,oBhCkwBwB;ETylFlC;EyCv1GM;IACE,iBAAA;EzCy1GR;EyCt1GM;IACE,wBAAA;IACA,gBAAA;EzCw1GR;EyCj1GM;IACE,aAAA;EzCs1GR;EyCn1GM;IAKE,8BAAA;IAFA,aAAA;IAFA,iBAAA;IACA,SAAA;IAEA,YAAA;IAMA,eAAA;IAHA,eAAA;IACA,cAAA;IAFA,6BAAA;EzCw1GR;EyCl1GM;;IAEE,YAAA;IACA,aAAA;IACA,gBAAA;EzCo1GR;EyCj1GM;IACE,aAAA;IACA,YAAA;IACA,UAAA;IACA,mBAAA;EzCm1GR;AACF;AiBp/GI;EwBsGA;IAEI,iBAAA;IACA,2BAAA;EzCg5GN;EyC94GM;IACE,mBAAA;EzCg5GR;EyC94GQ;IACE,kBAAA;EzCg5GV;EyC74GQ;IACE,qBhCmwBwB;IgClwBxB,oBhCkwBwB;ET6oFlC;EyC34GM;IACE,iBAAA;EzC64GR;EyC14GM;IACE,wBAAA;IACA,gBAAA;EzC44GR;EyCr4GM;IACE,aAAA;EzC04GR;EyCv4GM;IAKE,8BAAA;IAFA,aAAA;IAFA,iBAAA;IACA,SAAA;IAEA,YAAA;IAMA,eAAA;IAHA,eAAA;IACA,cAAA;IAFA,6BAAA;EzC44GR;EyCt4GM;;IAEE,YAAA;IACA,aAAA;IACA,gBAAA;EzCw4GR;EyCr4GM;IACE,aAAA;IACA,YAAA;IACA,UAAA;IACA,mBAAA;EzCu4GR;AACF;AiBxiHI;EwBsGA;IAEI,iBAAA;IACA,2BAAA;EzCo8GN;EyCl8GM;IACE,mBAAA;EzCo8GR;EyCl8GQ;IACE,kBAAA;EzCo8GV;EyCj8GQ;IACE,qBhCmwBwB;IgClwBxB,oBhCkwBwB;ETisFlC;EyC/7GM;IACE,iBAAA;EzCi8GR;EyC97GM;IACE,wBAAA;IACA,gBAAA;EzCg8GR;EyCz7GM;IACE,aAAA;EzC87GR;EyC37GM;IAKE,8BAAA;IAFA,aAAA;IAFA,iBAAA;IACA,SAAA;IAEA,YAAA;IAMA,eAAA;IAHA,eAAA;IACA,cAAA;IAFA,6BAAA;EzCg8GR;EyC17GM;;IAEE,YAAA;IACA,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,mB7CkVkB;E6ClVlB,mB7CkVkB;ATwvItB;;AsDtkJA;EACE,aAAA;EACA,mBAAA;EACA,iBAAA;EAAA,uBAAA;EAIA,4CAAA;E5CTE,4BAAA;EADA,2BAAA;E4CSF,4BAAA;EADA,2C7CypCkC;E6C1pClC,crDuDS;ADuhJX;AsDxkJE;EACE,kBAAA;EAAA,uBAAA;EACA,iB7CsoCgC;E6CtoChC,oB7CsoCgC;ATo8GpC;;AsDtkJA;EAEE,qBAAA;EADA,a7CioCkC;E6CjoClC,gB7CioCkC;ATy8GpC;;AuDnnJA;EAKE,aAAA;EADA,a9Cu4Ba;E8C14Bb,eAAA;EACA,MAAA;EACA,OAAA;EAGA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,gBAAA;EAGA,UAAA;AvDonJF;;AuD7mJA;EACE,kBAAA;EACA,WAAA;EACA,W9CwrCkC;E8CxrClC,c9CwrCkC;E8CtrClC,oBAAA;AvD+mJF;AuD5mJE;EAEE,8B9C8sCgC;AT+5GpC;AuD3mJE;EACE,e9C4sCgC;ATi6GpC;AuDzmJE;EACE,sB9CysCgC;ATk6GpC;;AuDvmJA;EACE,yBAAA;AvD0mJF;AuDxmJE;EACE,gBAAA;EACA,gBAAA;AvD0mJJ;AuDvmJE;EACE,gBAAA;AvDymJJ;;AuDrmJA;EACE,aAAA;EACA,mBAAA;EACA,6BAAA;AvDwmJF;;AuDpmJA;EAEE,aAAA;EADA,kBAAA;EAEA,sBAAA;EACA,WAAA;EAMA,uCAAA;E7C3DE,kBAAA;E6C+DF,UAAA;EALA,4BAAA;EADA,oCtDCM;EsDFN,oBAAA;AvD0mJF;;AuD/lJA;ECjFE,a/C44BsB;E+C/4BtB,eAAA;EACA,MAAA;EACA,OAAA;EAEA,YAAA;EACA,aAAA;EACA,iCvDsEM;ADinJR;AwDprJE;EAAS,UAAA;AxDurJX;AwDtrJE;EAAS,Y/CwtCyB;ATi+GpC;;AuDzmJA;EACE,aAAA;EACA,cAAA;EACA,mBAAA;EACA,8BAAA;EACA,kB9C0oCkC;E8C1oClC,kB9C0oCkC;E8CzoClC,wKAAA;E7CrEE,4BAAA;EADA,2BAAA;AVorJJ;AuD3mJE;EAEE,2BAAA;EAAA,oCAAA;EADA,gBAAA;EAAA,sBAAA;AvD8mJJ;;AuDxmJA;EACE,gBAAA;EACA,gB9CuV4B;AToxI9B;;AuDtmJA;EACE,kBAAA;EAGA,cAAA;EACA,a9C0IO;E8C1IP,a9C0IO;AT69IT;;AuDnmJA;EACE,aAAA;EAEA,cAAA;EADA,eAAA;EAEA,mBAAA;EACA,yBAAA;EACA,aAAA;EAAA,gBAAA;EACA,qKAAA;E7CzFE,+BAAA;EACA,8BAAA;AVgsJJ;AuDlmJE;EACE,WAAA;EAAA,eAAA;AvDomJJ;;AiB/qJI;EsCkFF;IACE,gB9C4lCgC;I8C3lChC,oBAAA;EvDimJF;EuD9lJA;IACE,2BAAA;EvDgmJF;EuD7lJA;IACE,+BAAA;EvD+lJF;EuDxlJA;IAAY,gB9C2kCsB;ETghHlC;AACF;AiB/rJI;EsCuGF;;IAEE,gB9CukCgC;ETohHlC;AACF;AiBrsJI;EsC8GF;IAAY,iB9CmkCsB;ETwhHlC;AACF;AuDnlJI;EACE,YAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;AvDqlJN;AuDnlJM;EACE,YAAA;EACA,SAAA;E7C3KJ,gBAAA;AViwJJ;AuDllJM;E7C/KF,gBAAA;AVowJJ;AuDjlJM;EACE,gBAAA;AvDmlJR;AuDhlJM;E7CvLF,gBAAA;AV0wJJ;;AiBjtJI;EsC0GA;IACE,YAAA;IACA,eAAA;IACA,YAAA;IACA,SAAA;EvD2mJJ;EuDzmJI;IACE,YAAA;IACA,SAAA;I7C3KJ,gBAAA;EVuxJF;EuDxmJI;I7C/KF,gBAAA;EV0xJF;EuDvmJI;IACE,gBAAA;EvDymJN;EuDtmJI;I7CvLF,gBAAA;EVgyJF;AACF;AiBxuJI;EsC0GA;IACE,YAAA;IACA,eAAA;IACA,YAAA;IACA,SAAA;EvDioJJ;EuD/nJI;IACE,YAAA;IACA,SAAA;I7C3KJ,gBAAA;EV6yJF;EuD9nJI;I7C/KF,gBAAA;EVgzJF;EuD7nJI;IACE,gBAAA;EvD+nJN;EuD5nJI;I7CvLF,gBAAA;EVszJF;AACF;AiB9vJI;EsC0GA;IACE,YAAA;IACA,eAAA;IACA,YAAA;IACA,SAAA;EvDupJJ;EuDrpJI;IACE,YAAA;IACA,SAAA;I7C3KJ,gBAAA;EVm0JF;EuDppJI;I7C/KF,gBAAA;EVs0JF;EuDnpJI;IACE,gBAAA;EvDqpJN;EuDlpJI;I7CvLF,gBAAA;EV40JF;AACF;AiBpxJI;EsC0GA;IACE,YAAA;IACA,eAAA;IACA,YAAA;IACA,SAAA;EvD6qJJ;EuD3qJI;IACE,YAAA;IACA,SAAA;I7C3KJ,gBAAA;EVy1JF;EuD1qJI;I7C/KF,gBAAA;EV41JF;EuDzqJI;IACE,gBAAA;EvD2qJN;EuDxqJI;I7CvLF,gBAAA;EVk2JF;AACF;AyDr3JA;EAUE,qBAAA;EAPA,cAAA;EADA,ahDi5Be;EgDl5Bf,kBAAA;EAGA,ShD0nCkC;EiD5nClC,kBAAA;EACA,gBjD2bmB;ED1Jf,mBALI;EAKJ,0BALI;EkD3RR,gBjDgc4B;EiDpc5B,sCjDgb4B;EiDta5B,sBAAA;EAIA,gBAAA;EATA,gBAAA;EACA,iBAAA;EACA,qBAAA;EACA,iBAAA;EACA,oBAAA;EAIA,mBAAA;EAFA,kBAAA;EACA,oBAAA;EDDA,UAAA;AzDi4JF;AyD/3JE;EAAS,YhD8mCyB;AToxHpC;AyDh4JE;EAEE,cAAA;EADA,kBAAA;EAEA,ahD8mCgC;EgD9mChC,ahD8mCgC;EgD7mChC,ahD8mCgC;EgD9mChC,chD8mCgC;AToxHpC;AyDh4JI;EACE,kBAAA;EAGA,mBAAA;EADA,yBAAA;EADA,WAAA;AzDo4JN;;AyD73JA;EACE,gBAAA;EAAA,iBAAA;AzDg4JF;AyD93JE;EACE,SAAA;AzDg4JJ;AyD93JI;EACE,SAAA;EACA,2BAAA;EAAA,6BAAA;EACA,iCxDsCE;AD01JR;;AyD33JA;EACE,gBAAA;EAAA,iBAAA;AzD83JF;AyD53JE;EACE,OAAA;EACA,YhDglCgC;EgDhlChC,ahDglCgC;EgD/kChC,chD8kCgC;EgD9kChC,chD8kCgC;ATgzHpC;AyD53JI;EACE,WAAA;EACA,iCAAA;EAAA,oCAAA;EACA,mCxDsBE;ADw2JR;;AyDz3JA;EACE,gBAAA;EAAA,iBAAA;AzD43JF;AyD13JE;EACE,MAAA;AzD43JJ;AyD13JI;EACE,YAAA;EACA,2BAAA;EAAA,6BAAA;EACA,oCxDQE;ADo3JR;;AyDv3JA;EACE,gBAAA;EAAA,iBAAA;AzD03JF;AyDx3JE;EACE,QAAA;EACA,YhDkjCgC;EgDljChC,ahDkjCgC;EgDjjChC,chDgjCgC;EgDhjChC,chDgjCgC;AT00HpC;AyDx3JI;EACE,UAAA;EACA,iCAAA;EAAA,oCAAA;EACA,kCxDRE;ADk4JR;;AyDr2JA;EACE,gBhD4gCkC;EgD3gClC,gBAAA;EAAA,uBAAA;E/C1FE,kBAAA;E+C6FF,iCxDlCM;EwDgCN,yBxDjCM;EwDkCN,kBAAA;AzD02JF;;A2Dz9JA;EAYE,qBAAA;EARA,alD+4Be;EkDj5Bf,MAAA;EACA,wBAAA;EAGA,gBlD+oCkC;EkDtoClC,uCAAA;EjDIE,kBAAA;EiDLF,4BAAA;EADA,oC1DgEM;EyD1EN,kBAAA;EACA,gBjD2bmB;ED1Jf,mBALI;EAKJ,0BALI;EkD3RR,gBjDgc4B;EiDpc5B,sCjDgb4B;EiDta5B,sBAAA;EAIA,gBAAA;EATA,gBAAA;EACA,iBAAA;EACA,qBAAA;EACA,iBAAA;EACA,oBAAA;EAIA,mBAAA;EAFA,kBAAA;EACA,oBAAA;A1Dy+JF;A2Dn+JE;EAdA,cAAA;EAJA,kBAAA;A3D2/JF;A2Dz+JE;EAGE,WlD+oCgC;EkD/oChC,WlD+oCgC;EkD9oChC,WlD+oCgC;EkD/oChC,clD+oCgC;ATs1HpC;A2Dn+JI;EAGE,cAAA;EADA,kBAAA;EAIA,mBAAA;EADA,yBAAA;EADA,WAAA;A3Ds+JN;;A2D99JE;EACE,2BAAA;A3Di+JJ;A2D/9JI;EACE,SAAA;EACA,uBAAA;EAAA,6BAAA;EACA,wClD8nC8B;ATm2HpC;A2D99JI;EACE,WlDsUS;EkDrUT,uBAAA;EAAA,6BAAA;EACA,oC1D4BE;ADo8JR;;A2D19JE;EACE,yBAAA;EACA,UlD6mCgC;EkD7mChC,alD6mCgC;EkD5mChC,YlD2mCgC;EkD3mChC,YlD2mCgC;ATk3HpC;A2D39JI;EACE,OAAA;EACA,2BAAA;EAAA,oCAAA;EACA,0ClD0mC8B;ATm3HpC;A2D19JI;EACE,SlDkTS;EkDjTT,2BAAA;EAAA,oCAAA;EACA,sC1DQE;ADo9JR;;A2Dt9JE;EACE,wBAAA;A3Dy9JJ;A2Dv9JI;EACE,MAAA;EACA,2BAAA;EAAA,oCAAA;EACA,2ClDwlC8B;ATi4HpC;A2Dt9JI;EACE,QlDgSS;EkD/RT,2BAAA;EAAA,oCAAA;EACA,uC1DVE;ADk+JR;A2Dn9JE;EAIE,cAAA;EAHA,kBAAA;EACA,MAAA;EACA,SAAA;EAEA,WlDokCgC;EkDpkChC,WlDokCgC;EkDnkChC,iBAAA;EAAA,oBAAA;EAEA,gCAAA;EADA,WAAA;A3Ds9JJ;;A2Dh9JE;EACE,0BAAA;EACA,UlD2jCgC;EkD3jChC,alD2jCgC;EkD1jChC,YlDyjCgC;EkDzjChC,YlDyjCgC;AT05HpC;A2Dj9JI;EACE,QAAA;EACA,2BAAA;EAAA,oCAAA;EACA,yClDwjC8B;AT25HpC;A2Dh9JI;EACE,UlDgQS;EkD/PT,2BAAA;EAAA,oCAAA;EACA,qC1D1CE;AD4/JR;;A2D77JA;EAEE,gBAAA;EADA,iBAAA;EAAA,oBAAA;EAKA,8CAAA;EjDrHE,4BAAA;EADA,2BAAA;EiDqHF,yBlD2gCkC;EDv3B9B,eALI;EAKJ,eALI;ARmzJV;A2D97JE;EACE,aAAA;A3Dg8JJ;;A2D57JA;EACE,kBAAA;EAAA,kBAAA;EACA,sB1D9EM;AD6gKR;;A4D9kKA;EACE,kBAAA;A5DilKF;;A4D9kKA;EACE,mBAAA;A5DilKF;;A4D9kKA;EACE,kBAAA;EACA,WAAA;EACA,gBAAA;A5DilKF;A6DvmKE;EACE,cAAA;EACA,WAAA;EACA,WAAA;A7DymKJ;;A4DllKA;EAEE,aAAA;EADA,kBAAA;EAGA,WAAA;EACA,mBAAA;EAFA,WAAA;EAGA,2BAAA;A5DqlKF;;A4DjlKA;;;EAGE,cAAA;A5DolKF;;A4DjlKA,qBAAA;AACA;;EAEE,2BAAA;A5DolKF;;A4DjlKA;;EAEE,4BAAA;A5DolKF;;A4DjlKA,mBAAA;AAQE;EAGE,eAAA;EAFA,UAAA;EACA,4BAAA;A5D8kKJ;A4D1kKE;;;EAGE,UAAA;EACA,UAAA;A5D4kKJ;A4DzkKE;;EAEE,UAAA;EACA,UAAA;A5D2kKJ;;A4DjkKA;;EAOE,aAAA;EAFA,UAAA;EAHA,kBAAA;EACA,MAAA;EACA,SAAA;EAIA,mBAAA;EACA,uBAAA;EACA,UnD6vCmC;EmD5vCnC,UAAA;EAIA,SAAA;EADA,gBAAA;EAFA,yB3DxBM;E2DyBN,kBAAA;EAGA,YnDwvCmC;AT20HrC;A4D/jKE;;;EAIE,UAAA;EAFA,yB3DlCI;E2DmCJ,qBAAA;EAEA,YnDgvCiC;ATk1HrC;;A4D/jKA;EACE,OAAA;A5DkkKF;;A4D/jKA;EACE,QAAA;A5DkkKF;;A4D7jKA;;EAEE,qBAAA;EACA,WnDivCmC;EmDjvCnC,WnDivCmC;EmDhvCnC,YnDgvCmC;EmDhvCnC,YnDgvCmC;EmD9uCnC,wBAAA;EACA,0BAAA;EAFA,4BAAA;A5DkkKF;;A4D7jKA;;;;;;;GAAA;AAQA;EACE,yRAAA;A5DgkKF;;A4D9jKA;EACE,0RAAA;A5DikKF;;A4DzjKA;EAME,aAAA;EADA,UAAA;EAJA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EAGA,uBAAA;EAGA,iBnDyrCmC;EmDxrCnC,mBAAA;EAAA,mBAAA;EACA,gBnDurCmC;EmD3rCnC,UAAA;EAKA,gBAAA;A5D2jKF;A4DzjKE;EACE,uBAAA;EACA,cAAA;EACA,WnDsrCiC;EmDrrCjC,WnDsrCiC;EmDprCjC,iBnDsrCiC;EmDrrCjC,gBnDqrCiC;EmDvrCjC,UAAA;EAOA,SAAA;EAEA,kCAAA;EACA,qCAAA;EAJA,4BAAA;EADA,oC3DzGI;E2DuGJ,mBAAA;EACA,eAAA;EAOA,YnD6qCiC;AT64HrC;A4DtjKE;EACE,UnD0qCiC;AT84HrC;;A4D/iKA;EACE,kBAAA;EACA,UAAA;EACA,YnDoqCmC;EmDpqCnC,enDoqCmC;EmDnqCnC,SAAA;EACA,iBnDiqCmC;EmDjqCnC,oBnDiqCmC;EmDhqCnC,oBnDgqCmC;EmDhqCnC,uBnDgqCmC;EmD/pCnC,yB3DpIM;E2DqIN,kBAAA;A5DkjKF;;A4D5iKE;;EAEE,gCnDmqCiC;AT44HrC;A4D5iKE;EACE,iC3DhJI;AD8rKR;A4D3iKE;EACE,sB3DpJI;ADisKR;;A8D1wKA;EACE;IAAK,0CAAA;E9D8wKL;AACF;A8D3wKA;EACE,qBAAA;EACA,WrDw3CwB;EqDx3CxB,WrDw3CwB;EqDv3CxB,YrDu3CwB;EqDv3CxB,YrDu3CwB;EqDr3CxB,iCAAA;EAGA,kBAAA;EAFA,+BAAA;EAFA,wBnCiiDwB;EmC5hDxB,+CAAA;A9D4wKF;;A8DzwKA;EACE,WrDk3CwB;EqDl3CxB,WrDk3CwB;EqDj3CxB,YrDi3CwB;EqDj3CxB,YrDi3CwB;EqDh3CxB,mBrDk3CwB;AT05H1B;;A8DpwKA;EACE;IACE,mBAAA;E9DuwKF;E8DrwKA;IAEE,eAAA;IADA,UAAA;E9DwwKF;AACF;A8DnwKA;EACE,qBAAA;EACA,WrDs1CwB;EqDt1CxB,WrDs1CwB;EqDr1CxB,YrDq1CwB;EqDr1CxB,YrDq1CwB;EqDj1CxB,kBAAA;EAFA,8BAAA;EADA,wBnC+/CwB;EmC1/CxB,6CAAA;EADA,UAAA;A9DqwKF;;A8DjwKA;EACE,WrDg1CwB;EqDh1CxB,WrDg1CwB;EqD/0CxB,YrD+0CwB;EqD/0CxB,YrD+0CwB;ATq7H1B;;A+D9zKA;EAIE,aAAA;EAIA,kBAAA;EALA,apC4iCkC;EoC9iClC,eAAA;EACA,SAAA;EAGA,sBAAA;EACA,eAAA;EAKA,UAAA;EADA,4BAAA;EADA,oC9DoEM;AD8vKR;;A+D3zKA;EPXE,a7ByiCkC;E6B5iClC,eAAA;EACA,MAAA;EACA,OAAA;EAEA,YAAA;EACA,aAAA;EACA,iCvDsEM;ADuwKR;AwD10KE;EAAS,UAAA;AxD60KX;AwD50KE;EAAS,Y/CwtCyB;ATunIpC;;A+Dv0KA;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,kBAAA;EAAA,kBAAA;A/D00KF;A+Dx0KE;EAEE,gBAAA;EAAA,mBAAA;EACA,kBAAA;EAAA,qBAAA;EACA,mBAAA;EAAA,sBAAA;EAHA,gBAAA;EAAA,sBAAA;A/D60KJ;;A+Dt0KA;EACE,gBAAA;EACA,gBtDia4B;ATw6J9B;;A+Dt0KA;EACE,YAAA;EACA,kBAAA;EAAA,kBAAA;EACA,gBAAA;A/Dy0KF;;A+Dt0KA;EACE,MAAA;EACA,OAAA;EACA,YtDs3CkC;EsDp3ClC,4BAAA;EADA,6CAAA;A/D00KF;;A+Dt0KA;EACE,MAAA;EACA,QAAA;EACA,YtD82CkC;EsD52ClC,2BAAA;EADA,4CAAA;A/D00KF;;A+Dt0KA;EACE,MAAA;EAMA,4BAAA;EADA,8CAAA;A/D00KF;;A+Dt0KA;EARE,QAAA;EACA,OAAA;EACA,YtDs2CkC;EsDr2ClC,gBAAA;A/Do1KF;;A+D/0KA;EAME,2BAAA;EADA,2CAAA;A/D00KF;;A+Dt0KA;EACE,eAAA;A/Dy0KF;;A6Dx5KE;EACE,cAAA;EACA,WAAA;EACA,WAAA;A7D25KJ;;AgE/5KE;EACE,cvDkFW;ATg1Kf;AgE/5KM;EAEE,cAAA;AhEg6KR;;AgEt6KE;EACE,cvDkFW;ATu1Kf;AgEt6KM;EAEE,cAAA;AhEu6KR;;AgE76KE;EACE,cvDkFW;AT81Kf;AgE76KM;EAEE,cAAA;AhE86KR;;AgEp7KE;EACE,cvDkFW;ATq2Kf;AgEp7KM;EAEE,cAAA;AhEq7KR;;AgE37KE;EACE,cvDkFW;AT42Kf;AgE37KM;EAEE,cAAA;AhE47KR;;AgEl8KE;EACE,cvDkFW;ATm3Kf;AgEl8KM;EAEE,cAAA;AhEm8KR;;AgEz8KE;EACE,cvDkFW;AT03Kf;AgEz8KM;EAEE,cAAA;AhE08KR;;AiE/8KA;EACE,kBAAA;EACA,WAAA;AjEk9KF;AiEh9KE;EACE,cAAA;EACA,mCAAA;EACA,WAAA;AjEk9KJ;AiE/8KE;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;AjEi9KJ;;AiE58KE;EACE,uBAAA;AjE+8KJ;;AiEh9KE;EACE,sBAAA;AjEm9KJ;;AiEp9KE;EACE,yBAAA;AjEu9KJ;;AiEx9KE;EACE,iCAAA;AjE29KJ;;AkEh/KA;EAEE,MAAA;AlEs/KF;;AkEh/KA;EAHE,azDy4Ba;EyD74Bb,eAAA;EAEA,QAAA;EACA,OAAA;AlE4/KF;;AkEx/KA;EAGE,SAAA;AlEq/KF;;AkE3+KI;EAGE,azDq3BU;EyDv3BV,gBAAA;EACA,MAAA;AlE++KN;;AiBz8KI;EiDxCA;IAGE,azDq3BU;IyDv3BV,gBAAA;IACA,MAAA;ElEs/KJ;AACF;AiBj9KI;EiDxCA;IAGE,azDq3BU;IyDv3BV,gBAAA;IACA,MAAA;ElE6/KJ;AACF;AiBx9KI;EiDxCA;IAGE,azDq3BU;IyDv3BV,gBAAA;IACA,MAAA;ElEogLJ;AACF;AiB/9KI;EiDxCA;IAGE,azDq3BU;IyDv3BV,gBAAA;IACA,MAAA;ElE2gLJ;AACF;AmEpiLA;EAEE,mBAAA;EACA,mBAAA;AnEuiLF;;AmEniLA;EANE,aAAA;EAGA,mBAAA;AnE6iLF;;AmE1iLA;EAEE,cAAA;EACA,sBAAA;AnEuiLF;;AoE9iLA;;ECUE,iCAAA;EANA,6BAAA;EACA,qBAAA;EACA,sBAAA;EAEA,uBAAA;EADA,qBAAA;EAEA,2BAAA;EAGA,oBAAA;EADA,8BAAA;ArEgjLF;;AsE1jLE;EAME,U7DuSsC;E6D5StC,kBAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;EAEA,WAAA;AtE6jLJ;;AuErkLA;ECAE,gBAAA;EACA,uBAAA;EACA,mBAAA;AxEykLF;;AyE/kLA;EACE,qBAAA;EACA,mBAAA;EACA,UAAA;EACA,eAAA;EACA,8BAAA;EACA,ahEggB4B;ATklK9B;;A0ExlLA;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAgCA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;;CAAA;AAsBA;;;;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;;;;;;;;CAAA;ACjLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA6CA;;;;;;;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA+BA;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA0BA;;;;;;;;;;;CAAA;AC9JA;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA4BA;;;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA+BA;;;;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkDA;;;;;;;;;;;;;;;;;;;;;;CAAA;AC3LA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAoCA;;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;;;CAAA;AAsBA;;;;;;;;;;;;;;;;;;;;;CAAA;AC9FA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC/DA;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACCA;;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACvEA;;;;;;;;;CAAA;AAYA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;CAAA;AAaA;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;CAAA;AAcA;;;;;;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;CAAA;AAaA;;;;;;;;;CAAA;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkDA;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;;CAAA;AAYA;;;;;;;;;CAAA;AAaA;;;;;;;;;CAAA;AAcA;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;CAAA;AAWA;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;CAAA;AClwBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyCA;;;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;;;CAAA;AAsBA;;;;;;;;;;;;;;;;;;;;CAAA;AAsBA;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA+CA;EAAkB,MAAA;EC1LjB,SAAA;EAAA,WAAA;ApFqyOD;;AmFzmOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AEhWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAsCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAoCA;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACrIA;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7BA;;;;;;;;;;;;CAAA;AAaA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;;;CAAA;AC1VA;;;;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyBA;;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;CAAA;AAiBA;;;;;;;;;;;;;;;;;;CAAA;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA4BA;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyBA;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyBA;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA0BA;;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyBA;;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyBA;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA4CA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;;;;;;;;CAAA;AAsBA;;;;;;;;;;;;;;;;CAAA;AAkBA;;;;;;;;;;;CAAA;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA4CA;;;;;;;;;;;;;;;;;;;;CAAA;AJvlBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAwEA;;;;;;;;;;;;CAAA;AAgBC;EAFD;IAGE,MAAA;EpFssRA;AACF;;AyFlyRA;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkDA;EAEC,iCAAA;EADA,+BAAA;EAEA,oFAAA;AzF+xRD;;AyF7xRA;EAEC,uBAAA;EADA,+BAAA;EAEA,6CAAA;AzFgyRD;;AyF3xRA;EC/EA,gBAAA;EAAA,mBAAA;EDgFC,qBAAA;AzF8xRD;;AyF5xRA;EClFA,gBAAA;EAAA,qBAAA;EAAA,mBAAA;EDmFC,mBAAA;AzF+xRD;;AyF7xRA;ECrFA,gBAAA;EAAA,mBAAA;EDsFC,mBAAA;AzFgyRD;;AyF9xRA;ECxFA,gBAAA;EAAA,mBAAA;EDyFC,qBAAA;AzFiyRD;;AyF/xRA;EC3FA,gBAAA;EAAA,mBAAA;ED4FC,qBAAA;AzFkyRD;;AyFhyRA;EC9FA,gBAAA;EAAA,mBAAA;ED+FC,sBAAA;AzFmyRD;;A2Fj4RA;;;;;;;;;;;CAAA;AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAuCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAwEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAwEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAmFA;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAsCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACjbA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAgCA;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA2BA;;;;;;;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAsEA;;;;;;;;;;;;;;;;;;;CAAA;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA6CA,QAAA;AACA;EAEI,aAAA;EAAA,gBAAA;EADA,kBAAA;A5Fq0SJ;A4Fn0SI;EACA,UAAA;EAAA,aAAA;EACA,WAAA;EAAA,cAAA;EAMA,aAAA;EAJA,aAAA;EAAA,iBAAA;EADA,UAAA;EAIA,SAAA;EAFA,kBAAA;EACA,gBAAA;EAGA,cAAA;A5Fq0SJ;A4Fn0SI;EACA,gBAAA;A5Fq0SJ;;A4Fj0SA;EACI,wBAAA;A5Fo0SJ;;A4Fj0SA;EACI,aAAA;A5Fo0SJ;;A4Fj0SA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AC7UA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAuEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA4CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AClJA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAgEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAgEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAsDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAuDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA6CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AnB1fA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAgCA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;;CAAA;AAsBA;;;;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;;;;;;;;;;;CAAA;AAoBA;;;;;;;;;;;;;;;CAAA;A1EyMA;EACI,kCAAA;UAAA,0BAAA;ADosUJ;;AC7rUA;EACI,yGAAA;ADosUJ;;ACjsUA;EACI;IACI,mCAAA;EDosUN;EChsUE;IACI,eAAA;EDksUN;AACF;AC/rUA;EAEI,SAAA;EADA,qBAAA;ADksUJ;;AC/rUA;EAAoB,UAAA;ADmsUpB;;A+FxlVA;EAEI,e9F6OK;E8F7OL,e9F6OK;E8F9OL,oC9FsOQ;ADs3UZ;;A+FzlVA;;;;;;;;;;;EAOI,gC9F8OW;E8F/OX,uC9F0NW;ADw4Uf;;A+F9lVA;EACI,6B9FsOQ;AD23UZ;;A+F5lVA;EACI,iB9FuOY;ADw3UhB;;A+F5lVA;;EAEI,gB9FmOY;AD43UhB;;A+FrlVA;;;;EAII,oC9FgMQ;ADw5UZ;;AgG9nVA;EACC,oCAAA;AhGioVD;;AgG/nVA;EAEC,6B/F8OW;ADs5UZ;;AgGhoVA;;;;;;EAFC,mBAAA;EAHA,e/FyOQ;E+FzOR,e/FyOQ;E+FvOR,kC/F8NS;ADi7UV;;AgG5oVA;;;;;;EACC,sBAAA;AhG2oVD;;AgGtoVA;;;;;;;;;;;;;;;;;EAGC,iBAAA;EAFA,gBAAA;EAAA,uBAAA;EAIA,kBAAA;EACA,kB/FoMe;E+FtMf,oCAAA;EAFA,gB/F0Oe;ADm7UhB;;AgGrpVC;;;EAEC,8EAAA;EADA,kRAAA;AhG2pVF;;AgGtpVA;;;;;;;;;;;;;;EACC,WAAA;AhGsqVD;;AgG9pVA;;;;;;EAMC,sBAAA;AhGiqVD;;AgGxpVA;EACC,WAAA;EAAA,aAAA;EACA,YAAA;EAAA,cAAA;EACA,UAAA;EACA,oCAAA;AhG2pVD;;AgGzpVA;;EAEC,iB/FsJW;E+FtJX,oB/FsJW;ADsgVZ;;AgGxoVA;;;;EAKC,WAAA;EACA,kB/FgIe;AD0gVhB;;AgGvoVA;EAEC,aAAA;EAAA,gBAAA;EADA,iBAAA;EAAA,oBAAA;EAEA,mCAAA;AhG0oVD;;AgGxoVA;;;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACtIA;;;;;;;;;;;CAAA;AAaA;EAEC,ehGgOQ;EgGhOR,ehGgOQ;EgGjOR,kChGwNS;ADknVV;AiGx0VC;EACC,YhGsMU;EgGtMV,ehGsMU;ADooVZ;;AiGv0VA;;EAEC,gBAAA;EAAA,uBAAA;EACA,iBAAA;AjG00VD;;AiGx0VA;EAEC,kBAAA;EAAA,yBAAA;EADA,6BhG2NW;ADinVZ;;AiGz0VA;EACC,cAAA;EAAA,iBAAA;AjG40VD;;AiG10VA;;EAGC,kBAAA;EAAA,yBAAA;EADA,mBhG8MS;EgG9MT,0BhG8MS;ADgoVV;;AkGh3VA;;;;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;EAMC,4CAAA;EACA,yCAAA;EANA,WAAA;EACA,gBAAA;EAEA,+RAAA;EACA,0BAAA;EAFA,WAAA;EAKA,oCAAA;AlG22VD;AkGh1VA;EACC;IACC,2BAAA;ElGy2VA;EkGv2VD;IACC,6BAAA;ElGy2VA;EkGv2VD;IACC,2BAAA;ElGy2VA;AACF;;AmG/7VI;EACI,aAAA;EAAA,iBAAA;AnGq8VR;;AmGj8VI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAsCA;EAEI,gBAAA;AnGk8VR;AmGj8VQ;EAII,gBAAA;AnGg8VZ;;AmG57VI;EAEI,gBAAA;AnG87VR;AmG77VQ;EAII,gBAAA;AnG47VZ;;AmGx7VI;EAEI,gBAAA;AnG07VR;AmGz7VQ;EAGI,gBAAA;AnGy7VZ;;AmGr7VI;EAEI,gBAAA;AnGu7VR;AmGt7VQ;EAGI,gBAAA;AnGs7VZ;;AmGl7VI;EAEI,gBAAA;AnGo7VR;AmGn7VQ;EAGI,gBAAA;AnGm7VZ;;AmG96VI;EAEI,gBAAA;AnGg7VR;AmG/6VQ;EAGI,gBAAA;AnG+6VZ;;AmG36VI;EAEI,gBAAA;AnG66VR;AmG56VQ;EAGI,gBAAA;AnG46VZ;;AmGx6VI;EAEI,gBAAA;AnG06VR;AmGz6VQ;EAGI,gBAAA;AnGy6VZ;;AmGr6VI;EAEI,WAAA;AnGu6VR;AmGt6VQ;EAGI,gBAAA;AnGs6VZ;;AoGhjWA;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyBA;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAyBA;;;;;;;;;;;;;;;;;;;;;CAAA;AClDA;;;;;;;;;;;;;;;;;;;;;CAAA;AAuBA;EACI,sJAAA;ArGwnWJ;AqGnnWI;EAA+B,8IAAA;ArGkoWnC;;AsG/pWA;;;;;;;;CAAA;AAUA;;;;;;;CAAA;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAoCC;;;;;;;;;;;;;;;;;;;;;;CAAA;AA4CD;;;;;;;CAAA;AAQA;;;;;;;;;;;;;;;;EAAA;AAkBA;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;EAAA;AASA;;;;;;;;;;;;;;;;EAAA;AAkBA;;;;;;;;;;;;;;;EAAA;AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA0BA;;;;;;;;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;EAAA;ACjYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAoCA;;;;;;;;;;;CAAA;AAyBA,qBAAA;AAGO,gCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,kCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,gCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,8BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,gCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,8BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,mCAAA;AAAA,oCAAA;AAAA,oCAAA;AAAA,oCAAA;AAAA,oCAAA;AAAA,oCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,+BAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,6BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,kCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,4BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,4BAAA;AAAA,4BAAA;AAAA,4BAAA;AAAA,4BAAA;AAAA,4BAAA;AC3EP;;;;;;CAAA;ACIC;EACC,8CAAA;AzG0hYF;AyGxhYC;EACC,WAAA;AzG0hYF;AyGvhYC;EACC,cAAA;AzGyhYF;;A0GriYA;;;;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAiHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAoCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkGC;;;;;;;;;;;;;;;;;;;;;EAAA;ACzSD;;EAEC,kBAAA;A3Gm2YD;;A4Gn2YC;;EAEC,gBAAA;A5Gs2YF;A4Gp2YC;EACC,gDAAA;A5Gs2YF;A4Gp2YC;EACC,oDAAA;A5Gs2YF;A4Gn2YE;EACC,uBAAA;A5Gq2YH;;A6Gn3YA;;;;;;;;;CAAA;AAaA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;;;CAAA;AAmBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAmbA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACjeA;EAGC,+B7GkPa;E6GnPb,kC7GmOS;E6GpOT,mBAAA;A9GgkdD;;A8G3jdA;EAGC,yBAAA;EADA,6BAAA;EADA,6BAAA;A9GgkdD;A8G7jdC;EACC,mGAAA;A9G+jdF;;A8G3jdA;EACC,oJAAA;A9G8jdD;A8G7jdC;EACC,kJAAA;A9G+jdF;;A8G3jdA;EACC,qDAAA;A9G8jdD;;A8G3jdA;EACC,qDAAA;A9G8jdD;;A+G1ldA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA2EA;EAEC,kBAAA;EADA,gBAAA;EAIA,mBAAA;EAAA,mBAAA;EAFA,8FAAA;EACA,yBAAA;A/G2ldD;A+GxldC;EACC,cAAA;EAEA,WAAA;EACA,2BAAA;EAFA,WAAA;A/G4ldF;A+GvldC;EACC,kBAAA;EACA,QAAA;EACA,QAAA;EACA,SAAA;EACA,OAAA;A/GyldF;A+GtldC;EAIC,MAAA;EAEA,QAAA;EAJA,YAAA;EAGA,OAAA;EAFA,WAAA;EAIA,SAAA;EANA,oCAAA;A/G8ldF;A+GtldE;EAKC,uBAAA;EACA,WAAA;EACA,YAAA;EACA,eAAA;EACA,kBAAA;EAPA,gBAAA;EACA,YAAA;EACA,mB9GiEmB;E8GpEnB,oBAAA;A/GgmdH;A+GvldG;EACC,2BAAA;EACA,+BAAA;A/GyldJ;A+GlldC;EAQC,QAAA;EACA,SAAA;EAFA,gBAAA;EAJA,gBAAA;EAEA,oBAAA;EACA,yBAAA;A/GoldF;A+G7kdE;EADD;IAEE,gBAAA;E/GgldD;E+G9kdC;IACC,2BAAA;E/GgldF;E+G7kdC;IACC,UAAA;E/G+kdF;E+G7kdE;IACC,WAAA;IACA,YAAA;IACA,gBAAA;E/G+kdH;E+G9kdG;IACC,qBAAA;IACA,iBAAA;IACA,UAAA;IACA,iBAAA;IACA,2BAAA;IACA,WAAA;E/GgldJ;E+G9kdG;IACC,WAAA;E/GgldJ;E+G3kdC;IACC,UAAA;E/G6kdF;E+G3kdC;IACC,aAAA;IAIA,MAAA;IACA,QAAA;IAFA,SAAA;IAKA,UAAA;IAPA,sBAAA;IAMA,UAAA;IADA,gBAAA;IAJA,YAAA;E/GmldF;E+G3kdE;IAaC,gDAAA;IACA,mDAAA;IARA,cAAA;IACA,kBAAA;IALA,aAAA;IASA,sBAAA;IAVA,WAAA;IAQA,YAAA;IASA,SAAA;IARA,oBAAA;IAKA,6IAAA;IAXA,gBAAA;IACA,+IAAA;IAYA,kBAAA;IADA,gBAAA;IAbA,cAAA;IASA,2CAAA;E/GkldH;E+G3kdG;IACC,aAAA;E/G6kdJ;E+G1kdG;IACC,gBAAA;E/G4kdJ;E+GzkdG;IAIC,mBAAA;IADA,sCAAA;IAFA,+IAAA;IACA,YAAA;E/G6kdJ;AACF;;A+GrkdA;;EAQC,kBAAA;EACA,MAAA;EAEA,SAAA;EADA,OAAA;EAEA,UAAA;EALA,eAAA;EAAA,eAAA;EAQA,kCAAA;EAFA,kBA7J4B;EA8J5B,kBAAA;A/GokdD;A+G/kdE;EADD;;IAEE,aAAA;E/GmldD;E+GvldF;;IAiBE,UAAA;E/G4kdA;AALF;A+GxkdC;A/G8kdD;A+G3kdC;EAnBD;;IAoBE,SAAA;E/G+kdA;AACF;A+G7kdC;;;EAEC,UAAA;EACA,oBAAA;EACA,qBAAA;A/GgldF;A+G5kdC;;EAKC,qBAAA;EADA,UAAA;EAHA,kBAAA;EACA,QAAA;EACA,iBAAA;A/GildF;;A+G1kdC;EACC,SAAA;EACA,kBAAA;A/G6kdF;;A+GzkdA;EAGC,QAAA;EADA,UAAA;A/G4kdD;A+G1kdC;EACC,UAAA;EACA,mBAAA;A/G4kdF;;A+GvkdA;EAIE;;IACC,eAAA;IACA,gBAAA;IACA,qBAAA;IACA,mBAAA;E/GwkdD;E+GpkdD;IACC,sBAAA;E/GskdA;E+GnkdD;IACC,uBAAA;E/GqkdA;AACF;AgHt2dC;EACC,gBAAA;AhHw2dF;AgHv2dE;EACC,gBAAA;AhHy2dH;;AgHt2dC;EACC,gBAAA;AhHy2dF;AgHx2dE;EACC,gBAAA;AhH02dH;;AgHv2dC;EAEC,gBAAA;AhHy2dF;AgHx2dE;EACC,gBAAA;AhH02dH;;AgHt2dA;EACC,sC/G2Ma;AD8pdd;;AgHv2dA;EACC,kC/GyMS;ADiqdV;;AgHx2dA;EAGC,kB/GoLW;E+GpLX,sB/GoLW;E+GrLX,iB/GqLW;E+GrLX,qB/GqLW;ADsrdZ;;AgHx2dA;EAAmC,cAAA;AhH42dnC;;AgH12dA;EACC,aAAA;AhH62dD;;AgH32dA;EACC,cAAA;AhH82dD;;AgH12dC;EACC,+BA9Ca;EA+Cb,yBAAA;EACA,sBAAA;EACA,iBAlDc;AhH+5dhB;AgH32dC;EAPD;IAQE,oCAAA;IACA,uCAAA;EhH82dA;EgH72dA;IACC,+BAvDY;IAwDZ,yBAAA;IACA,sBAAA;IACA,iBA3Da;EhH06dd;AACF;;AgH12dC;EADD;IAEE,oCAAA;IACA,uCAAA;EhH82dA;EgH52dC;IACA,cAAA;EhH82dD;EgH52dA;IACC,+BAxEY;IAyEZ,yBAAA;IACA,sBAAA;IACA,iBA5Ea;EhH07dd;EgH52dE;IACC,cAAA;EhH82dH;AACF;;AgHz2dA;EACC;IACC,cAAA;EhH42dA;AACF;AgHz2dA;EACC,8IAAA;AhH22dD;AgH12dC;EAEC,+BAAA;EADA,YAAA;AhH62dF;;AgHv2dA;EACC,eAAA;AhH02dD;;AgHx2dA;EACA;IACC,gBAAA;EhH22dC;AACF;AgHr2dC;EACC,mKA/Gc;EAgHd,sKAhHc;EAiHd,mKAjHc;EAkHd,WAAA;AhHu2dF;AgHr2dG;EACC,cAAA;AhHu2dJ;AgHp2dE;EAAQ,+BAzHK;EAyH4B,iBA1H3B;AhHk+dhB;;AiHh+dE;EACC,gBAAA;AjHm+dH;AiHj+dE;EACC,gBAAA;AjHm+dH;;ACtkdA,6CAAA","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/*\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\nDescription: A 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        {{> \"Structures.Tabs.Tabs.LinkActive\" }}\n        {{> \"Structures.Tabs.Tabs.Link\" }}\n        {{> \"Structures.Tabs.Tabs.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\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 Structures.Tabs\n*/\n/*\nSimple Tabs\n\nSimple in page tabs \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\">\n    <ul class=\"flex_column flex_row:md  nav\">\n        {{> \"Structures.Tabs.Tabs.LinkActive\" }}\n        {{> \"Structures.Tabs.Tabs.Link\" }}\n        {{> \"Structures.Tabs.Tabs.Link\" }}\n        {{> \"Structures.Tabs.Tabs.LinkDisabled\" }}\n    </ul>\n</nav>\n\nStyleguide  Structures.Tabs.Tabs\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_white-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        {{> \"Structures.Tabs.TabsDark.LinkActive\" }}\n        {{> \"Structures.Tabs.TabsDark.Link\" }}\n        {{> \"Structures.Tabs.TabsDark.Link\" }}\n        {{> \"Structures.Tabs.TabsDark.LinkDisabled\" }}\n        </ul>\n    </nav>\n</div>\n\nWeight: 0\n\nStyleguide  Structures.Tabs.TabsDark\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  Structures.Tabs.TabsDark.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  Structures.Tabs.TabsDark.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  Structures.Tabs.TabsDark.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  Structures.Tabs.Tabs.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  Structures.Tabs.Tabs.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  Structures.Tabs.Tabs.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            {{> \"Structures.UITabs.Tabs.LinkActive\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs.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            {{> HTML.Typography.Sample }}\n        </div>\n        <div class=\"tab-pane fade\" id=\"LinkUI\" role=\"tabpanel\" aria-labelledby=\"LinkUI\">\n            {{> HTML.Typography.Sample }}\n        </div>\n    </div>\n</div>\n\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide 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            {{> \"Structures.UITabs.Tabs.LinkActive\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs.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            {{> HTML.Typography.Sample }}\n        </div>\n        <div class=\"tab-pane fade\" id=\"LinkUI\" role=\"tabpanel\" aria-labelledby=\"LinkUI\">\n            {{> HTML.Typography.Sample }}\n        </div>\n    </div>\n</div>\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 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\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  Structures.UITabs.Tabs\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  Structures.UITabs.Tabs.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\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  Structures.UITabs.Tabs.LinkDisabled\n*/\n/*\nScroll Overflow Script\n\nDescription: Javascript is needed to make the scrolls work on the page\n\nMarkup:\n\n\nWeight:0\n\nStyleguide  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        {{> \"Navigation.Sidebar.Parent\"}}\n        {{> \"Navigation.Sidebar.Child\"}}\n        {{> \"Navigation.Sidebar.ChildWithChildren\"}}\n        {{> \"Navigation.Sidebar.Child\"}}\n        {{> \"Navigation.Sidebar.Child\"}}\n        {{> \"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 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 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 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    {{> \"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 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        {{> \"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                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"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 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        {{> \"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                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    <li class=\"nav-item  active \" data-nav=\"grandchild\">\n                        <div class=\"flex flex_row\">\n                            {{> \"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                                        {{> \"Navigation.Sidebar.GreatGrandchild\"  }}\n                                        {{> \"Navigation.Sidebar.GreatGrandchild\" }}\n                                        {{> \"Navigation.Sidebar.GreatGrandchild\"  modifier_class=\"active\"}}\n                                        {{> \"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 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 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 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 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 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 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 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            {{> \"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    {{> HTML.Typography.Sample }}\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  Structures.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            {{> \"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    {{> HTML.Typography.Sample }}\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 Structures.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            {{> \"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        {{> Structures.Accordion.Child }}\n        {{> Structures.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  Structures.Accordion.Nested\n*/\n/*\nButtons\n\nBasic Buttons\n\ndefault\t\t            - Medium buttons (default)\n.btn-primary\t            - Primary Class Button (default)\n.btn-secondary \t            - Second Class Button\n.btn-accent             - Button for call out actions\n.btn-success                - Success State.\n.btn-danger                  - Alert State.\n.btn-warning\t            - Warning State\n.clear\t\t            - All button states can become hollow\n.radius\t\t            - Give the button softer corners\n.shadow.clear\t\t    - Give a button a shadow\n.btn-sm\t\t            - Small buttons\n.btn-lg\t\t            - Large buttons\n.disabled\t            - Disabled buttons\n\nMarkup:\n<a class=\"btn btn-primary {{modifier_class}}\" href=\"#\">{{modifier_class}} button</a>\n<button class=\"btn btn-primary {{modifier_class}}\" href=\"#\">{{modifier_class}} button</button>\n\n Styleguide  Bootstrap.Button\n\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 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 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 Data.Agenda.ChannelName\n*/\n/*\nLive Time\n\nDescription:\nThe time at which a Agenda is live.\n\nMarkup: @ {{> Data.Agenda.ReleaseTime }} – {{> 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 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 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 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 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 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 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 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 Data.Session.Title\n*/\n/*\nSession Identifier\n\nDescription:\nThe ID given to a session\n\nMarkup:\n3652\n\nWeight:0\n\nStyleguide 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 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 Data.Presentation\n*/\n/*\nPresentation Description\n\nDescription:\nThe Description of a presentation\n\nMarkup:Drug Coated Balloons\n\nWeight:500\n\nStyleguide 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 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 Data.Presentation.LiveTime\n*/\n/*\nPresentation ID\n\nDescription:\nUnique system generated identifier for a presentation.\n\nMarkup:\n15612\n\nWeight:0\n\nStyleguide Data.Presentation.ID\n*/\n/*\nFaculty \n\nDescription:\nAn educator who created or participated in a presentation\n\nWeight:1000\n\nStyleguide 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=\"{{> \"Data.Faculty.FullName\" }}\"\n/>\n\nMarkupWrapperClasses: max-w_30\n\nFORMAT: 300px by 300px\n\nWeight:0\n\nStyleguide 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 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 Data.Faculty.Location\n*/\n/*\nTitle\n\nDescription:\nthe roles of the faculty member within the session\n\nMarkup:\n{{> \"Data.Faculty.Title.InstitutionTitle\" }}, {{> \"Data.Faculty.Title.InstitutionDivision\" }}, {{> \"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 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 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 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 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 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 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 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 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 Data.Sponsor\n*/\n/*\nName\n\nMarkup:\nLogoIpsum\n\nWeight:-100\n\nStyleguide 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 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 Data.Sponsor.Logo\n*/\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n\nWeight:25\n\nStyleguide Data.Sponsor.WebAddress\n*/\n/*\nWebsite Link\n\nMarkup:\n<a class=\"website {{modifier_class}}\" target=\"_blank\"  href=\"{{> 'Data.Sponsor.WebAddress'}}\">Website</a>\n\nWeight:26\n\nStyleguide Data.Sponsor.WebLink\n*/\n/*\nWebsite Link\n\nMarkup:\n<a class=\"website {{modifier_class}}\" target=\"_blank\"  href=\"{{> 'Data.Sponsor.WebAddress'}}\">More</a>\n\nWeight:26\n\nStyleguide Data.Sponsor.MoreLink\n*/\n/*\nPDF Link\n\nMarkup:\n<a class=\"pdf {{modifier_class}}\" target=\"_blank\" href=\"{{> 'Data.Sponsor.WebAddress'}}.pdf\">PDF</a>\n\nWeight:26\n\nStyleguide 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 Data.Sponsor.Description\n*/\n/*\nAward\n\nDescription: Awards and Recognition \n\nWeight:5\n\nStyleguide 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 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 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 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 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 Data.Abstract.Title\n*/\n/*\nAbstract Identifier\n\nDescription:\nThe ID given to a Abstract\n\nMarkup:\n3652\n\nWeight:0\n\nStyleguide 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 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_7865\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_2499\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_7156\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_1153\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_9786\" }}\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_5951\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_5064\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_3910\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_2895\" }}\n            {{>  \"Sub.Search.FacetCheckbox\" modifier_class=\"facet_0761\" }}\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_3996\" }}\n            {{>  \"Sub.Search.FacetCheckboxWithTrash\" modifier_class=\"facet_4867\" }}\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>{{> \"Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n</ul>\n\nData:\nData.Faculty.FullName - Full Name\nData.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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Eileen Marvin <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Chelsea Dach DVM <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Mrs. Jeffrey Cartwright <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>CEmmett Spencer<span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n</ul>\n</div>\n\n\nSubComponents:\nData.Faculty.FullName - Full Name\nData.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>{{> \"Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n    <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Role Type 1:</li>\n  <li>{{> \"Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n</ul>\n\nSubComponents:\nData.Faculty.FullName - Full Name\nData.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>{{> \"Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n</ul>\n\nSubComponents:\nData.Faculty.FullName - Full Name\nData.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>{{> \"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:\nData.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.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.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.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.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.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.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.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>{{>\"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 (min-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{{> \"Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"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{{> \"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{{> \"Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"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{{> \"Structures.Tabs.Tabs.LinkActive\" }}\n\t\t\t\t\t\t\t{{> \"Structures.Tabs.Tabs.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=\"Pharmacologic \" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\">{{> \"Program.Session.Home\"  modifier_class=\"Electrocardiographic Electrocardiogram Valvular Blood Vessel Blood Vessel Chest Pain Valvular Clinical Pharmacologic \" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\">{{> \"Program.Session.Home\"  modifier_class=\"Valvular Heart Disease Valvular Heart Disease Pericardial Valvular Pericardial \" }}</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=\"Electrocardiographic Clinical Valvular Chest Pain Electrocardiographic \" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"Cardiovascular Chest Pain Arrhythmia Pericardial Chest Pain \" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"Chest Pain Valvular Heart Disease Blood Vessel Myocardial Arteriosclerosis Blood Vessel \" }}</li>\n\t\t\t\t\t\t\t\t<li class=\"\"> {{> \"Program.Presentation.Search\"  modifier_class=\"Chest Pain Pericardial Valvular Pericardial Valvular Heart Disease Pharmacologic Side Effect Chest Pain \" }}</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{{> \"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:\nNavigation.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{{> 'Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}\n\t\t\t{{> '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\"> {{> 'Data.Session.Title'}} Clinical Pericardial Clinical Chest Pain Chest Pain Arrhythmia </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{{> \"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{{> 'Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}\n\t\t\t{{> '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\">{{> 'Data.Session.Title'}} Clinical Clinical Arteriosclerosis Pharmacologic Valvular Heart Disease Valvular Heart Disease </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\"> {{> 'Data.Presentation.Title'}} Chest Pain Valvular Chest Pain Electrocardiographic  </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=\"Chest Pain Blood Vessel Myocardial Valvular Heart Disease Electrocardiogram Clinical \"}}\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.CondensedPlaying\" modifier_class=\"Valvular Heart Disease Valvular Blood Vessel Valvular Heart Disease Valvular Clinical \"}}\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.Condensed\" modifier_class=\"Pericardial Myocardial Side Effect \"}}\n\t\t\t\t\t\t\t\t\t{{> \"Program.Presentation.Condensed\" modifier_class=\"Blood Vessel Arteriosclerosis Pericardial Pericardial Chest Pain Cardiovascular 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{{> \"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{{> \"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='Clinical Blood Vessel '}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='Chest Pain Arteriosclerosis Valvular Clinical Clinical Pericardial Side Effect Electrocardiographic '}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='Arteriosclerosis Pericardial Chest Pain Myocardial Electrocardiogram Clinical Valvular Heart Disease Clinical Pericardial '}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='Pericardial Clinical Pericardial Valvular Heart Disease '}}\n\t\t\t\t\t\t\t\t{{> 'Program.Presentation.Condensed.Playable' modifier_class='Side Effect Chest Pain Arrhythmia Clinical Blood Vessel Arrhythmia '}}\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{{> '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    {{> 'Navigation.Home.Utility' }} \n</div>\n\nMarkupWrapperClasses: \n\nSubComponents:\nSub.Section.SearchBar - Search Bar with `disabled` Class\nNavigation.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=\"Electrocardiogram Clinical Pericardial Blood Vessel \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Pericardial Pharmacologic Valvular Heart Disease Myocardial Arteriosclerosis \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Cardiovascular Chest Pain Cardiovascular Blood Vessel Arteriosclerosis \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Electrocardiographic Blood Vessel Myocardial Chest Pain Chest Pain Side Effect Blood Vessel Arteriosclerosis \"}}        \n        {{> \"Program.Session.Home\"  modifier_class=\"Pharmacologic Valvular Blood Vessel \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Valvular Heart Disease Side Effect Arteriosclerosis Arrhythmia Pericardial Cardiovascular Clinical Cardiovascular \"}}        \n        {{> \"Program.Session.Home\"  modifier_class=\"Electrocardiographic Side Effect \"}}\n        {{> \"Program.Session.Home\"  modifier_class=\"Blood Vessel Pericardial Blood Vessel \"}}\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=\"Blood Vessel \"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"Arrhythmia Blood Vessel Electrocardiographic Chest Pain Pharmacologic Valvular Heart Disease Valvular \"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"Side Effect Myocardial Cardiovascular Blood Vessel Valvular Heart Disease Electrocardiographic Side Effect Arteriosclerosis \"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"Valvular Heart Disease Electrocardiogram Valvular Heart Disease Arrhythmia Arteriosclerosis Valvular Heart Disease Cardiovascular \"}}\n        {{> \"Program.Presentation.Condensed\"  modifier_class=\"Arteriosclerosis Chest Pain Electrocardiogram Valvular Heart Disease Pharmacologic Blood Vessel Side Effect Myocardial Valvular \"}}\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 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 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.Navigation.Breadcrumb.FirstItem' }}\n        {{> 'Sub.Navigation.Breadcrumb.NotFirstItem' modifier_class=\"Session Shorten Name\" }}\n        {{> 'Sub.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.Navigation.Breadcrumb.FirstItem - First item\nSub.Navigation.Breadcrumb.NotFirstItem - Not first item\nSub.Navigation.Breadcrumb.LastItem - Last item\n\nWeight:0\n\nStyleguide 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 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 Chest Pain Clinical Pericardial 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.Data.Duration'}}\n                {{> 'Sub.Data.PresentationCount'}}\n                {{> '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:\nData.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  Pharmacologic Pharmacologic Pericardial Valvular Heart Disease Cardiovascular Blood Vessel Clinical Electrocardiographic Arteriosclerosis Myocardial Pericardial Cardiovascular Cardiovascular Clinical  {{ 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.Data.Duration'}}\n                {{> 'Sub.Data.PresentationCount'}}\n                {{> '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:\nData.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.Data.Duration'}}\n                {{> 'Sub.Data.PresentationCount'}}\n                 {{> '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:\nData.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 \"> {{> '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 Myocardial Valvular Heart Disease Valvular Heart Disease Chest Pain Valvular Chest Pain Electrocardiogram Side Effect Chest Pain Valvular Pharmacologic Chest Pain Blood Vessel 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.Data.Duration'}}\n\t\t\t\t{{> '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:\nData.Session.Title - Session Title\nData.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 \"> {{> '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 Blood Vessel Arteriosclerosis Cardiovascular Cardiovascular Clinical Arteriosclerosis Electrocardiographic Cardiovascular Cardiovascular Side Effect Side Effect Valvular Heart Disease Clinical Valvular Heart Disease  {{ 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.Data.Duration'}}\n                {{> '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:\nData.Session.Title - Session Title\nData.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 \"> {{> 'Data.Session.Title'}}</strong>\n                        <a class=\"c_inherit-all expanded-click-area z_1 inline\"> Clinical Update for the Pharmacologic Cardiovascular Cardiovascular Myocardial Arteriosclerosis Arrhythmia Arrhythmia Valvular Heart Disease Valvular Heart Disease Valvular Valvular Heart Disease Cardiovascular Blood Vessel Blood Vessel  {{ 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.Data.Duration'}}\n                {{> '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:\nData.Session.Title - Session Title\nData.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.Data.Duration'}}\n                {{> '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:\nData.Session.Title - Session Title\nData.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:\nData.Session.Title - Session Title\nData.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:\nData.Session.Title - Session Title\nData.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:\nData.Session.Title - Session Title\nData.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\nDescription: A 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        {{> \"Structures.Tabs.Tabs.LinkActive\" }}\n        {{> \"Structures.Tabs.Tabs.Link\" }}\n        {{> \"Structures.Tabs.Tabs.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\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 Structures.Tabs\n*/\n/*\nSimple Tabs\n\nSimple in page tabs \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\">\n    <ul class=\"flex_column flex_row:md  nav\">\n        {{> \"Structures.Tabs.Tabs.LinkActive\" }}\n        {{> \"Structures.Tabs.Tabs.Link\" }}\n        {{> \"Structures.Tabs.Tabs.Link\" }}\n        {{> \"Structures.Tabs.Tabs.LinkDisabled\" }}\n    </ul>\n</nav>\n\nStyleguide  Structures.Tabs.Tabs\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_white-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        {{> \"Structures.Tabs.TabsDark.LinkActive\" }}\n        {{> \"Structures.Tabs.TabsDark.Link\" }}\n        {{> \"Structures.Tabs.TabsDark.Link\" }}\n        {{> \"Structures.Tabs.TabsDark.LinkDisabled\" }}\n        </ul>\n    </nav>\n</div>\n\nWeight: 0\n\nStyleguide  Structures.Tabs.TabsDark\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  Structures.Tabs.TabsDark.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  Structures.Tabs.TabsDark.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  Structures.Tabs.TabsDark.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  Structures.Tabs.Tabs.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  Structures.Tabs.Tabs.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  Structures.Tabs.Tabs.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\nDeprecated: Lorem Text Loader\n\nIt is often we need to have space held for a return of details or text.  \n\nMarkup:\n<div class=\"max-w_40\">\n   <h1 class=\"lorem-loader font_3 m-y_3\">&nbsp;</h1>\n   <p class=\"m-y_2 font_0 lorem-loader\">&nbsp;</p>\n   <p class=\"m-y_2 font_0 lorem-loader\">&nbsp;</p>\n   <p class=\"m-y_2 font_0 lorem-loader\">&nbsp;</p>\n</div>\n\nStyleguide Recipes.InteractiveExtras.Text Placeholder Loader\n\n\n*/\n/*\n\nAspect Ratio\n\nTo create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly. \n\n.aspect_8x10\t\t\t- lock image to a 8 to 10 ratio\n.aspect_1x1\t\t\t- lock image to a 1 to 1 ratio\n.aspect_2x1\t\t\t- lock image to a 2 to 1 ratio\n.aspect_3x2\t\t\t- lock image to a 3 to 2 ratio   \n.aspect_4x3\t\t\t- lock image to a 4 to 3 ratio \n.aspect_16x9\t\t- lock image to a 16 to 9 ratio \n.aspect_21x9\t\t- lock image to a 21 to 9 ratio \n.aspect_4x1\t\t\t- lock image to a 4 to 1 ratio \n\nMarkup:\n<div class=\"grid-w_2 max-w_20\"  data-style=\"{{ modifier_class }}\" >\n   <div class=\"m-y_2 lorem-loader {{modifier_class}} \">&nbsp;</div>\n</div>\n\nStyleguide Recipes.InteractiveExtras.Placeholder Aspect Ratio\n*/\n.lorem-loader {\n  width: 100%;\n  overflow: hidden;\n  color: #fff;\n  background: linear-gradient(-45deg, hsla(var(--shade-h), calc(var(--shade-s) - var(--shade-s) * 0.125), calc(var(--shade-l) + (100% - var(--shade-l)) * 0.25), 1), 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  background-size: 400% 400%;\n  -webkit-animation: Gradient 3s ease infinite;\n  -moz-animation: Gradient 3s ease infinite;\n  animation: Gradient 3s ease infinite;\n}\n\n@-webkit-keyframes Gradient {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n@-moz-keyframes Gradient {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n@keyframes Gradient {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n.icon-toggle_plus-minus-sub:before, .icon-toggle_check:before, .icon-toggle_check-circle:before, .icon-toggle_check-sqaure:before, .icon-toggle_arrow-circle:before, .icon-toggle_chevron-double-left-right:before, .icon-toggle_chevron-double-up-down:before, .icon-toggle_chevron-up-down:before, .icon-toggle_plus-minus:before, .icon-toggle_bars-times:before {\n  margin: 0 0.25rem;\n}\n\n.icon-toggle_plus-minus-sub:before, .icon-toggle_check:before, .icon-toggle_check-circle:before, .icon-toggle_check-sqaure:before, .icon-toggle_arrow-circle:before, .icon-toggle_chevron-double-left-right:before, .icon-toggle_chevron-double-up-down:before, .icon-toggle_chevron-up-down:before, .icon-toggle_plus-minus:before, .icon-toggle_bars-times:before {\n  margin: 0 0.25rem;\n}\n\n/*\nIs Active Toggle \n\nMany momment there are needs for toggles of icon when the parent is in the state of `active`.  Used in tree navs, dropdowns, and collapsing areas. \n\n.icon-toggle_plus-minus \t\t\t\t\t-  Toggle between plus and minus square\n.icon-toggle_chevron-up-down\t\t\t\t- \tToggle a chevron pointing up and then down.\n.icon-toggle_chevron-double-up-down \t\t-  Toggle the double chevron to point up when active\n.icon-toggle_chevron-double-left-right\t\t- Toggle chevron left and right\n.icon-toggle_arrow-circle \t\t\t\t\t-  Toggle the arrow to have a circle when active.\n.icon-toggle_bars-times \t\t\t\t\t-  Toggle between bars and times\n.icon-toggle_check-sqaure\t\t\t\t\t-  Check Marks toggle on and off\n.icon-toggle_check-circle \t\t\t\t\t-  Check Marks toggle on and off\n.icon-toggle_check \t\t\t\t\t\t\t-  Check Marks toggle on and off\n\nMarkup:\n<ul data-style=\"{{ modifier_class }}\" class=\"ul_none m_0 p_0\">\n\t<li class=\"m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 \">\t\n\t<i class=\"flex_none m-r_5 font_3 fas fa-fw {{ modifier_class }}\"></i>\n\t\t\t<span class=\"flex_auto \">FA Solid {{ modifier_class }}</span>\n\t\t\t<span class=\"flex_shrink m-l_auto w_20 self_end a:_block display_none\"> active </span>\n\t</li>\n\t<li class=\"m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 \">\t\n\t<i class=\"flex_none m-r_5 font_3 far  fa-fw {{ modifier_class }}\"></i>\n\t\t\t<span class=\"flex_auto \">FA Regular {{ modifier_class }}</span>\n\t\t\t<span class=\"flex_shrink m-l_auto w_20 self_end a:_block display_none\"> active </span>\n\t</li>\n\t<li class=\"m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 \">\t\n\t<i class=\"flex_none m-r_5 font_3 fal fa-fw {{ modifier_class }}\"></i>\n\t\t\t<span class=\"flex_auto\">FA Light {{ modifier_class }}</span>\n\t\t\t<span class=\"flex_shrink m-l_auto w_20 self_end a:_block display_none\"> active </span>\n\t</li>\n</ul>\n\n\nStyleguide Recipes.InteractiveExtras.ToggleIcons\n*/\n.icon-toggle_bars-times:before {\n  content: \"\\f0c9\";\n}\n.active .icon-toggle_bars-times:before, .icon-toggle_bars-times:before.show, .show > .icon-toggle_bars-times:before, .active > .icon-toggle_bars-times:before {\n  content: \"\\f00d\";\n}\n\n.icon-toggle_plus-minus:before {\n  content: \"\\f0fe\";\n}\n.active .icon-toggle_plus-minus:before, .icon-toggle_plus-minus:before.show, .show > .icon-toggle_plus-minus:before, .active > .icon-toggle_plus-minus:before {\n  content: \"\\f146\";\n}\n\n.icon-toggle_chevron-up-down:before {\n  content: \"\\f106\";\n}\n.active .icon-toggle_chevron-up-down:before, .show .icon-toggle_chevron-up-down:before, .active > .icon-toggle_chevron-up-down:before {\n  content: \"\\f107\";\n}\n\n.icon-toggle_chevron-double-up-down:before {\n  content: \"\\f103\";\n}\n.active .icon-toggle_chevron-double-up-down:before, .show .icon-toggle_chevron-double-up-down:before, .active > .icon-toggle_chevron-double-up-down:before {\n  content: \"\\f325\";\n}\n\n.icon-toggle_chevron-double-left-right:before {\n  content: \"\\f324\";\n}\n.active .icon-toggle_chevron-double-left-right:before, .show .icon-toggle_chevron-double-left-right:before, .active > .icon-toggle_chevron-double-left-right:before {\n  content: \"\\f323\";\n}\n\n.icon-toggle_arrow-circle:before {\n  content: \"\\f061\";\n}\n.active .icon-toggle_arrow-circle:before, .show .icon-toggle_arrow-circle:before, .active > .icon-toggle_arrow-circle:before {\n  content: \"\\f0a9\";\n}\n\n.icon-toggle_check-sqaure:before {\n  content: \"\\f0c8\";\n}\n.active .icon-toggle_check-sqaure:before, .show .icon-toggle_check-sqaure:before, .active > .icon-toggle_check-sqaure:before {\n  content: \"\\f14a\";\n}\n\n.icon-toggle_check-circle:before {\n  content: \"\\f111\";\n}\n.active .icon-toggle_check-circle:before, .show .icon-toggle_check-circle:before, .active > .icon-toggle_check-circle:before {\n  content: \"\\f058\";\n}\n\n.icon-toggle_check:before {\n  content: \"\";\n}\n.active .icon-toggle_check:before, .show .icon-toggle_check:before, .active > .icon-toggle_check:before {\n  content: \"\\f00c\";\n}\n\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 Recipes.Social Links\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=\"twitter 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=\"facebook 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=\"linkedin 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=\"youtube 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=\"google-play 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=\"apple-store 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 Recipes.Social Links.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 Recipes.Social Links.Smaller\n\n*/\n/*\nStars\n\nStar ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars. \n\nMarkup:\n<ul class=\"ul_none flex flex_inline star-rating\">\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n</ul>\n\nWeight:0\n\ncaution: This item is not finalized and might be subject to change\n\n\n\nStyleguide Recipes.InteractiveExtras.Stars\n*/\n.star-rating {\n  color: hsla(var(--secondary-h), calc(var(--secondary-s) - var(--secondary-s) * 0.25), calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5), 1);\n}\n.star-rating.rating-5 li:nth-child(-n+5) {\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.star-rating.rating-4 li:nth-child(-n+4) {\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.star-rating.rating-3 li:nth-child(-n+3) {\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.star-rating.rating-2 li:nth-child(-n+2) {\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.star-rating.rating-1 li:nth-child(-n+1) {\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\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.  Muli is the current successor to Open Sans, and Maven is a slightly modern font to give a small level of interests which replaces Raleway, or Lato in other products.\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\nThe American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications. The organization uses either version 4 or version 5 of Font Awesome's icon sets, providing an extensive range of options for the website's visual design and functionality. Despite the release of version 6, there is no current initiative to upgrade due to the breaking changes that come with it. 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.\n\nplus\t\t\t\t\t\t - fa-plus\t\t\t\t\t\narrow-right\t\t\t\t\t - fa-arrow-right\t\t\t\t\t\nsearch\t\t\t\t\t\t - fa-search\t\t\t\t\t\nenvelope\t\t\t\t\t - fa-envelope\t\t\t\t\nheart\t\t\t\t\t\t - fa-heart\t\t\t\t\t\nstar\t\t\t\t\t\t - fa-star\t\t\t\t\t\t\t\t\t\nuser\t\t\t\t\t\t - fa-user\t\t\t\t\t\n\n\nMarkup:\n<div class=\"relative br_black-2 br_solid br_1\"><div class=\"flex flex_row\"><div class=\"font_5 cell w-grid_3 text_center p_3 no-underline c_inherit flex_shrink justify_center h:bg_navigation-n3 h:c_white bg_black-1 expanded-click-area\"><i class=\"fas fa-{{modifier_class}}\"></i></div><div class=\"flex_auto p_4 p-y_2 self_center\"><span class=\"c_black-8 h:c_black-9 text font_bold font_display\">{{modifier_class}}</span></div></div></div>\n\nMarkupWrapperClasses:\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/*\nInteractive Extras\n\nInteractions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.\n\nStyleguide Recipes.InteractiveExtras\n*/\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<a target=\"_blank\" href=\"https://css-tricks.com/almanac/selectors/n/not/\"><picture class=\"w_100\">\n\t\t<source class=\"w_100\" srcset=\"https://via.placeholder.com/1440x200.png?text=Desktop+Large+wrapped+link\" media=\"(min-width: 1200px)\">\n\t\t<source class=\"w_100\" srcset=\"https://via.placeholder.com/1200x200.png?text=Desktop+wrapped+link\" media=\"(min-width: 1024px)\">\n\t\t<source class=\"w_100\" srcset=\"https://via.placeholder.com/768x200.png?text=Tablet+wrapped+link\" media=\"(min-width: 768px)\">\n\t\t<source class=\"w_100\" srcset=\"https://via.placeholder.com/600x250.png?text=Mobile+wrapped+link\" media=\"(min-width: 400px)\"> <source class=\"w_100\" srcset=\"https://via.placeholder.com/400x300.png?text=Mobile\" media=\"(min-width: 400px)\">\n\t\t<img src=\"https://via.placeholder.com/400x300.png?text=Mobile\" class=\"w_100\" alt=\"\">\n\t</picture></a>\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\nWeight: -9\n\nHideCodeBlock: display_none \n\nStyleguide HTML.Typography\n\n*/\n/*\n\nSample Typography\n\nThis text is used as a lorem content in many of our containers.  \n\n.p_4                                                    - This is the basic typogrpahy from the browser.\n.reading-typography.p_4                                 - this is the standard styling for typography of reading content\n.reading-typography.font-size_up.p_4                    - This font increased their sizes across all typography in the container.\n.reading-typography.font-size_down.p_4                  - This font decreses their sizes across all typography in the container.\n.reading-typography.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<div class=\"{{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</div>\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\nBasic Typography\n\nBasic Typography is unstyled and relys on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves the reading of content text lacking. The overriding styles that are applied to Basic typography is a consistent font treatment (font sizing, font family, and font-weight) and what comes from the baseline frameworks that build the brand.  \n\n\nMarkup:\n<h1>Basic Typography: <small>Lorem ipsum dolor sit amet, consectetuer adipiscing \nelit.</small></h1>\n<h2>Aenean commodo ligula eget dolor aenean massa</h2>\n<h3>Cut sociis natoque penatibus et magnis dis \nparturient montes nascetur ridiculus mus</h3>\n<h4>Donec quam felis ultricies nec pellentesque eu \npretium quis sem nlla consequat massa quis enim</h4>\n<h5>Donec pede justo fringilla vel aliquet nec vulputate \neget arcu</h5>\n<h6>In enim justo rhoncus ut imperdiet a venenatis vitae \njusto</h6>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing \nelit. Aenean commodo ligula eget dolor. Aenean massa. \nCum sociis natoque penatibus et magnis dis parturient \nmontes, nascetur ridiculus mus. Donec quam felis, \nultricies nec, pellentesque eu, pretium quis, sem.</p>\n<article><p>This paragraph is nested inside an article. It contains many different, sometimes useful, <a href=\"https://www.w3schools.com/tags/\">HTML5 tags</a>. Of course there are classics like <em>emphasis</em>, <strong>strong</strong>, and <small>small</small> but there are many others as well. Hover the following text for abbreviation tag: <abbr title=\"abbreviation\">abbr</abbr>. Similarly, you can use acronym tag like this: <acronym title=\"For The Win\">ftw</acronym>. You can define <del>deleted text</del> which often gets replaced with <ins>inserted</ins> text.</p><p>You can also use <kbd>keyboard text</kbd>, which sometimes is styled similarly to the <code>&lt;code&gt;</code> or <samp>samp</samp> tags. Even more specifically, there is a tag just for <var>variables</var>. Not to be mistaken with blockquotes below, the quote tag lets you denote something as <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) tags.</p></article>\n\nWeight: -1000\n\nHideCodeBlock: display_none \n\nMarkupWrapperClasses: max-w_65\n\nStyleguide HTML.Unstyled\n\n*/\n/*\nACC Article\n\nMarkup:\n<div id=\"reading-typography\" class=\"reading-typography\">\n\t<h1>Article Title</h1>\n\t<p>Tricuspid regurgitation (TR) is a common valvular disease estimated to affect &gt;1.5 million people in the U.S., with a yearly incidence of about 200,000 and &gt;300,000 patients in the U.S and Europe, respectively.<sup>1</sup> Stated another way, a clinically significant form of this valvular disease affects 4% (or 1 in 25) of patients ages 75 and older.<sup>2</sup></p>\n\t<p>Despite the current guidelines favoring early tricuspid valve repair, especially when undergoing concomitant left-sided cardiac surgery, most patients with TR receive <a href=\"#\">lifetime medical</a> therapy until intractable right-sided heart failure (HF) and end-organ dysfunction appear.<sup>1</sup> In recent years, multiple studies have drawn attention to the poor prognosis of untreated TR, and demonstrated a clear tendency of excess mortality in patients with increasing severity of TR, highlighting the need for interventional options to improve outcomes.<sup>3</sup></p>\n\t<div class=\"aspect_1x1 font_0 max-w_25 relative float_right\">\n\t\t<div class=\"absolute flex flex_row l_0\">\n\t\t\t<div class=\"max-w_5\">\n\t\t\t\t<img src=\"https://www.acc.org//-/media/Non-Clinical/Images/2022/10/CARDIOLOGY/22/Weintraub-Bill-600x600.jpg\" alt=\"Bill Weintraub, MD, MACC\" class=\"br_3 br_accent br_circle br_solid m-b_2 shadow_overlap-bold w_100\">\n\t\t\t</div>\n\t\t\t<div class=\"m-l_n4 max-w_5\">\n\t\t\t\t<img src=\"https://www.acc.org//-/media/Non-Clinical/Images/2022/10/CARDIOLOGY/22/Weintraub-Bill-600x600.jpg\" alt=\"Bill Weintraub, MD, MACC\" class=\"br_3 br_accent br_circle br_solid m-b_2 shadow_overlap-bold w_100\">\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"circle__inner\">\n\t\t\t<div class=\"aspect_1x1 bg_acc br_circle circle__content circle__wrapper grid items_center justify_center p_4 radial-gradient_custom\" style=\"--origin: at center;\">\n\t\t\t\t<div class=\"c_white flex flex_column gap-y_4 p-x_5 p-y_4 text_center\">\n\t\t\t\t\t<i class=\"c_accent fa-quote-left fas font-size_up-2 m-b_n2\"></i><span class=\"font-size_up lh_2\">The future of medicine is increasingly in the hands of those who are effective users of clinical data.</span><i class=\"c_accent fa-quote-right fas font-size_up-2 m-t_n2\"></i>\n\t\t\t\t\t<cite class=\"font-size_down text_right\">– <strong>Bill Weintraub, MD, MACC</strong></cite>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<p>TR associated with left-sided valvular or myocardial disease is often a marker for late-stage chronic HF with limited treatment options and an unfavorable overall prognosis. However, isolated TR is also independently associated with excess mortality if left untreated. Thus, TR represents an important public health problem with an unmet clinical need.</p>\n\t<p>Surgical approaches, either repair or replacement, have been shown to carry a high risk of in-hospital mortality, reaching 10%, without significant improvement over the past 10 years.<sup>4</sup> As transcatheter interventional options for valvular heart disease continue to expand, transcatheter tricuspid valve repair through leaflet approximation or annuloplasty has been investigated.</p>\n\t<p>Despite studies showing promising results with greater survival and freedom from HF rehospitalization compared with conservative management, its use can be limited by anatomical infeasibility such as large leaflet coaptation gap, perforation, significant leaflet tethering with dense chordae, and leaflet impingement with a cardiac implantable electronic device lead.</p>\n\t<p>A myriad of investigational transcatheter tricuspid valve replacement (TTVR) devices have emerged as an alternative to surgery and to address this outstanding need, with promising early results related to safety, efficacy and improvements in patients' functional status and quality of life.</p>\n\t<h3>Orthotopic Valve Replacement</h3>\n\t<p>Orthotopic TTVR is a form of valve replacement performed by implanting a bioprosthetic valve on an existing tricuspid annulus, in a fashion similar to how it is performed in transcatheter aortic or mitral valve replacement. Several investigational devices are available with a variety of access and anchoring systems.</p>\n\t<h3>EVOQUE</h3>\n\t<p>The EVOQUE system (Edwards Lifesciences, Irvine, CA) is a self-expanding bovine pericardial valve mounted on a nitinol frame with a fabric skirt delivered through a transfemoral approach. The perimeter is surrounded by nine anchors that allow stabilization through anchoring to the annulus, leaflets and chords of the tricuspid apparatus. Its compassionate use in 27 patients with severe symptomatic TR at inoperable or high surgical risk has demonstrated 92% success with no periprocedural mortality.<sup>5</sup></p>\n\t<p>The reduction in TR remained excellent at one year (≤moderate in 96% and ≤mild in 87%) with sustained symptomatic improvement (NYHA I/II in 69% compared with 11% at baseline).<sup>5</sup> All-cause death and HF hospitalization at one year were both at 7% without any deaths being identified as device-related. An early feasibility trial of this device, TRISCEND, is ongoing with an early report of 56 patients demonstrating a similar success rate, reduction in TR and symptomatic improvement.<sup>6</sup></p>\n\t<h3>Lux-Valve</h3>\n\t<p>The Lux-Valve (Jenscare Biotechnology Co., Ningbo, China) is a bovine pericardium valve with a self-expanding nitinol atrial disc, self-adaptive fabric skirt, two graspers and an interventricular septal anchor. It is deployed via a minimally invasive right thoracotomy and transatrial approach. First-in-human experience including 31 patients reported a 100% technical success rate with TR reduction to ≤moderate and ≤mild in 100% and 85.2%, respectively at one year. Symptomatic improvement has persisted at one year with 82.8% maintaining NYHA I/II and a 96.8% survival rate.<sup>7</sup> A study investigating the second-generation LuX-Valve Plus delivered through transjugular access is currently underway (NCT05436028).</p>\n\t<h3>GATE</h3>\n\t<p>The GATE (NaviGate Cardiac Structures, Inc., Lake Forest, CA) device was the first TTVR performed and is composed of an equine pericardium tricuspid valve mounted on a nitinol alloy stent. Twelve right ventricular tines grasp the native leaflets and 12 right atrial winglets covered by microfiber polyester cloth provide a seal. It is delivered through a right thoracotomy and transatrial access. An early study including five patients reported 100% technical success, with all patients demonstrating TR reduction to ≤mild; however, one patient died before discharge.<sup>8</sup></p>\n\t<div class=\"c_white color_inherit float_right lh_2 linear-gradient_custom m-l_5:md m-t_0:md m-y_5 p_4 reading-typography w_100 w_55:md\" style=\"--start-color:hsl(315deg 67% 37%);--end-color:hsl(292deg 68% 24%);\">\n\t\t<h2>Prominent Stressors For CVD Among LGBTQIA+ Adults</h2>\n\t\t<p>Excess cardiovascular disease risk is associated with three categories of stressors, as described by the Minority Stress Model: psychosocial (depression, anxiety, stress); behavioral (diet quality, physical activity, substance use); and physiological (hypothalamic-pituitary-adrenal axis, chronic inflammation, autonomic nervous system&nbsp;dysfunction).<sup>4</sup></p>\n\t\t<p>Structural/institutional stressors are also in&nbsp;place. The Behavioral Risk Factor Surveillance System survey 2014-2017 found a higher rate of poverty in LGBT people compared with cisgender heterosexual people <a href=\"#21.pdf\" target=\"_blank\"> vs. 15.7%,&nbsp;respectively</a>).<sup>9</sup></p>\n\t\t<p>In 2018, a large portion of LGBTQIA+ individuals lived in states that did not have public accommodation (hospitals and schools) and employment nondiscrimination laws.<sup>10</sup></p>\n\t\t<p>For many transgender individuals, employee-sponsored health insurance is often not an option. Many employee-sponsored health insurance programs do not acknowledge partners or spouses with gender identities that align with the insured. More than two-thirds of gender minority adults report having experienced some form of discrimination from clinicians (including the use of abusive language). Roughly a quarter of transgender individuals have been denied health care by clinicians.<sup>11</sup></p>\n\t\t<h3>Cardiovascular Disease Risk Factors</h3>\n\t\t<p>The data on cardiovascular health in LGBTQIA+ adults are limited because of a lack of research and challenges with study design. In terms of cardiovascular disease risk factors, the use of tobacco products is more likely among LGBTQIA+ adults than cisgender heterosexual adults.<sup>12</sup> Alcohol and illicit drug use disorder, poor mental health and elevated body mass index are greater risk factors among sexual minority women than heterosexual women.<sup>13</sup> Current studies also suggest that decreased sleep duration, which has been associated with higher rates of hypertension, diabetes and cardiovascular disease, was higher among sexual minority women compared with heterosexual women.<sup>14</sup></p>\n\t</div>\n\t<h3>Cardiovalve</h3>\n\t<p>The Cardiovalve (Venus Medtech Inc., Hangzhou, China) is deployed through transfemoral access and consists of a bovine pericardial leaflet mounted on a dual nitinol atrial and ventricular frame creating 24 grasping points for anchoring. The atrial portion of the frame has a covered flange to allow sealing to prevent paravalvular leak. Its compassionate use has been reported in 15 patients demonstrating significant reduction in TR to ≤moderate in 100% and ≤mild in 8% at 30 days.<sup>9</sup> An early feasibility study is currently underway (NCT04100720).</p>\n\t<h3>Intrepid</h3>\n\t<p>The Intrepid (Medtronic Plc, Minneapolis, MN) is a transfemoral system with a bovine pericardial valve housed within a nitinol dual stent frame. Early experience with three patients reported technical success in all, and an early feasibility study is currently recruiting patients with a goal to include 15 patients (NCT04433065).<sup>10</sup></p>\n\t<div class=\"br-t_4 br_acc br_solid clear_both m-b_4\">\n\t\t<div class=\"row m-t_1\">\n\t\t\t<div class=\"col-sm-2 p-t_2\">\n\t\t\t\t<img src=\"https://www.acc.org//-/media/Non-Clinical/Images/2022/11/CARDIOLOGY/24/Ueyama-Hiroki-600x600.jpg\" alt=\"Hiroki Ueyama, MD\" class=\"w_100 br_circle\">\n\t\t\t</div>\n\t\t\t<div class=\"col-sm-2 p-t_2\">\n\t\t\t\t<img src=\"https://www.acc.org//-/media/Non-Clinical/Images/2022/11/CARDIOLOGY/24/Byku-Isida-600x600.jpg\" alt=\"Isida Byku, MD, FACC\" class=\"w_100 br_circle\">\n\t\t\t</div>\n\t\t\t<div class=\"col-sm-8\">\n\t\t\t\t<p>This article was authored by <strong>Hiroki Ueyama, MD</strong>, and <strong>Isida Byku, MD, FACC</strong>, from the Division of Cardiology, Emory Structural Heart and Valve Center, Emory University Hospital Midtown, in Atlanta, GA.</p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<h2>References</h2>\n\t<ol>\n\t\t<li>Asmarats L, Puri R, Latib A, Navia JL, Rodés-Cabau J. Transcatheter tricuspid valve interventions: Landscape, challenges, and future directions. <em>J Am Coll Cardiol</em> 2018;71:2935-56.</li>\n\t\t<li>Topilsky Y, Maltais S, Medina Inojosa J, et al. Burden of Tricuspid regurgitation in patients diagnosed in the community setting. <em>JACC Cardiovasc Imaging</em> 2019;12:433-42.</li>\n\t\t<li>Taramasso M, Benfari G, van der Bijl P, et al. Transcatheter versus medical treatment of patients with symptomatic severe tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2019;74:2998-3008.</li>\n\t\t<li>Dreyfus J, Flagiello M, Bazire B, et al. Isolated tricuspid valve surgery: Impact of aetiology and clinical presentation on outcomes. <em>Eur Heart J</em> 2020;41:4304-17.</li>\n\t\t<li>Webb JG, Chuang AM, Meier D, et al. Transcatheter Tricuspid valve replacement with the evoque system: 1-year outcomes of a multicenter, first-in-human experience. <em>JACC Cardiovasc Interv</em> 2022;15:481-91.</li>\n\t\t<li>Kodali S, Hahn RT, George I, et al. Transfemoral tricuspid valve replacement in patients with tricuspid regurgitation: TRISCEND study 30-Day results. <em>JACC Cardiovasc Interv</em> 2022;15:471-80.</li>\n\t\t<li>Modine T. Transcatheter tricuspid valve replacement with the LuX-Valve system 1-Year results of a multicenter FIH experience. Presented at TVT 2022, June 8, 2022.</li>\n\t\t<li>Hahn RT, George I, Kodali SK, et al. Early Single-site experience with transcatheter tricuspid valve replacement. <em>JACC Cardiovasc Imaging</em> 2019;12:416-29.</li>\n\t\t<li>Fam NP. Cardiovalve TTVR update. Presented at TVT 2022, June 8, 2022.</li>\n\t\t<li>Bapat VN. The INTREPID Valve for severe tricuspid regurgitation: First-in-man case experience. Presented at TCT 2020.</li>\n\t\t<li>Lauten A, Figulla HR, Unbehaun A, et al. Interventional treatment of severe tricuspid regurgitation: Early clinical experience in a multicenter, observational, first-in-man study. <em>Circ Cardiovasc Interv</em> 2018;11:e006061.</li>\n\t\t<li>Dreger H, Mattig I, Hewing B, et al. Treatment of severe tricuspid regurgitation in patients with advanced heart failure with CAval Vein Implantation of the Edwards Sapien XT VALve (TRICAVAL): a randomised controlled trial. <em>EuroIntervention</em> 2020;15:1506-13.</li>\n\t\t<li>Lauten A, Doenst T, Hamadanchi A, Franz M, Figulla HR. Percutaneous bicaval valve implantation for transcatheter treatment of tricuspid regurgitation: clinical observations and 12-month follow-up. <em>Circ Cardiovasc Interv</em> 2014;7:268-72.</li>\n\t\t<li>Wild MG, Lubos E, Cruz-Gonzalez I, et al. Early clinical experience with the TRICENTO bicaval valved stent for treatment of symptomatic severe tricuspid regurgitation: A multicenter registry. <em>Circ Cardiovasc Interv</em> 2022;15:e011302.</li>\n\t\t<li>Lurz P, von Bardeleben R, Weber M, et al. Transcatheter edge-to-edge repair for treatment of tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2021;77:229-39.</li>\n\t\t<li>Hahn RT. Transcatheter tricuspid valve repair:CLASP TR study one-year results. . Presented at EuroPCR 2022.</li>\n\t\t<li>Kodali S, Hahn RT, Eleid MF, et al. Feasibility study of the transcatheter valve repair system for severe tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2021;77:345-56.</li>\n\t\t<li>Zack CJ, Fender EA, Chandrashekar P, et al. National trends and outcomes in isolated tricuspid valve surgery. <em>J Am Coll Cardiol</em> 2017;70:2953-60.</li>\n\t</ol>\n</div>\n\nMarkupWrapperClasses: max-w_60\n\nHideCodeBlock: display_none \n\nWeight:100\n\nStyleguide HTML.RealArticle\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\nBootstrap 5 is a complete UI framework with many features. Please familiarize yourself with bootstrap framework as you build. It will give you access to grid, forms and other UI items. https://getbootstrap.com/\n\nWeight: -50\n\nStyleguide  Bootstrap\n*/\n/*\n\nTypography\n\nThe collection of typography when using the bootstrap foundation of arches.\n\nMarkup:\n<article class=\"m-y_3\" id=\"typography\"><div><div class=\"bd-example\"><p class=\"display-1\">Display 1</p><p class=\"display-2\">Display 2</p><p class=\"display-3\">Display 3</p><p class=\"display-4\">Display 4</p><p class=\"display-5\">Display 5</p><p class=\"display-6\">Display 6</p></div><div class=\"bd-example\"><p class=\"h1\">Heading 1</p><p class=\"h2\">Heading 2</p><p class=\"h3\">Heading 3</p><p class=\"h4\">Heading 4</p><p class=\"h5\">Heading 5</p><p class=\"h6\">Heading 6</p></div><div class=\"bd-example\"><p class=\"lead\">This is a lead paragraph. It stands out from regular paragraphs.</p></div><div class=\"bd-example\"><p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined.</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p></div><div class=\"bd-example\"><blockquote class=\"blockquote\"><p>A well-known quote, contained in a blockquote element.</p><footer class=\"blockquote-footer\">Someone famous in <cite title=\"Source Title\">Source Title</cite></footer></blockquote></div><div class=\"bd-example\"><ul class=\"list-unstyled\"><li>This is a list.</li><li>It appears completely unstyled.</li><li>Structurally, it's still a list.</li><li>However, this style only applies to immediate child elements.</li><li>Nested lists:<ul><li>are unaffected by this style</li><li>will still show a bullet</li><li>and have appropriate left margin</li></ul></li><li>This may still come in handy in some situations.</li></ul></div><div class=\"bd-example\"><ul class=\"list-inline\"><li class=\"list-inline-item\">This is a list item.</li><li class=\"list-inline-item\">And another one.</li><li class=\"list-inline-item\">But they're displayed inline.</li></ul></div></div></article><article class=\"m-y_3\" id=\"images\"><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>Images</h3><a class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/content/images/\">Documentation</a></div><div><div class=\"bd-example\"><svg class=\"bd-placeholder-img bd-placeholder-img-lg img-fluid\" width=\"100%\" height=\"250\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Responsive image\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"><title>Placeholder</title><rect width=\"100%\" height=\"100%\" fill=\"#868e96\"></rect><text x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\">Responsive image</text></svg></div><div class=\"bd-example\"><svg class=\"bd-placeholder-img img-thumbnail\" width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width=\"100%\" height=\"100%\" fill=\"#868e96\"></rect><text x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\">200x200</text></svg></div></div></article>\n\nWeight: 100\n\nStyleguide  Bootstrap.Typography\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><tr class=\"table-light\"><th scope=\"row\">Light</th><td>Cell</td><td>Cell</td></tr><tr class=\"table-dark\"><th scope=\"row\">Dark</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><article class=\"m-y_3\" id=\"figures\"><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>Figures</h3><a class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/content/figures/\">Documentation</a></div><div><div class=\"bd-example\"><figure class=\"figure\"><svg class=\"bd-placeholder-img figure-img img-fluid rounded\" width=\"400\" height=\"300\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: 400x300\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"><title>Placeholder</title><rect width=\"100%\" height=\"100%\" fill=\"#868e96\"></rect><text x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\">400x300</text></svg><figcaption class=\"figure-caption\">A caption for the above image.</figcaption></figure></div></div></article>\n\n\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/*\nComponents \n\nOut of the box html components from bootstrap\n\nMarkup:\n<section id=\"components\">\n    <article class=\"m-y_3\"\n             id=\"accordion\">\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 m-t_5 m-b_3 \">\n            <h3>Accordion</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/accordion/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"accordion\"\n                     id=\"accordionExample\">\n                    <div class=\"accordion-item\">\n                        <h4 class=\"accordion-header\"\n                            id=\"headingOne\"><button\n                                    class=\"accordion-button\"\n                                    type=\"button\"\n                                    data-bs-toggle=\"collapse\"\n                                    data-bs-target=\"#collapseOne\"\n                                    aria-expanded=\"true\"\n                                    aria-controls=\"collapseOne\">Accordion\n                                Item #1</button></h4>\n                        <div id=\"collapseOne\"\n                             class=\"accordion-collapse collapse show\"\n                             aria-labelledby=\"headingOne\"\n                             data-bs-parent=\"#accordionExample\">\n                            <div class=\"accordion-body\">\n                                <strong>This is the first\n                                    item's accordion\n                                    body.</strong> It is\n                                hidden by default, until the\n                                collapse plugin adds the\n                                appropriate classes that we\n                                use to style each element.\n                                These classes control the\n                                overall appearance, as well\n                                as the showing and hiding\n                                via CSS transitions. You can\n                                modify any of this with\n                                custom CSS or overriding our\n                                default variables. It's also\n                                worth noting that just about\n                                any HTML can go within the\n                                <code>.accordion-body</code>,\n                                though the transition does\n                                limit overflow.</div>\n                        </div>\n                    </div>\n                    <div class=\"accordion-item\">\n                        <h4 class=\"accordion-header\"\n                            id=\"headingTwo\"><button\n                                    class=\"accordion-button collapsed\"\n                                    type=\"button\"\n                                    data-bs-toggle=\"collapse\"\n                                    data-bs-target=\"#collapseTwo\"\n                                    aria-expanded=\"false\"\n                                    aria-controls=\"collapseTwo\">Accordion\n                                Item #2</button></h4>\n                        <div id=\"collapseTwo\"\n                             class=\"accordion-collapse collapse\"\n                             aria-labelledby=\"headingTwo\"\n                             data-bs-parent=\"#accordionExample\">\n                            <div class=\"accordion-body\">\n                                <strong>This is the second\n                                    item's accordion\n                                    body.</strong> It is\n                                hidden by default, until the\n                                collapse plugin adds the\n                                appropriate classes that we\n                                use to style each element.\n                                These classes control the\n                                overall appearance, as well\n                                as the showing and hiding\n                                via CSS transitions. You can\n                                modify any of this with\n                                custom CSS or overriding our\n                                default variables. It's also\n                                worth noting that just about\n                                any HTML can go within the\n                                <code>.accordion-body</code>,\n                                though the transition does\n                                limit overflow.</div>\n                        </div>\n                    </div>\n                    <div class=\"accordion-item\">\n                        <h4 class=\"accordion-header\"\n                            id=\"headingThree\"><button\n                                    class=\"accordion-button collapsed\"\n                                    type=\"button\"\n                                    data-bs-toggle=\"collapse\"\n                                    data-bs-target=\"#collapseThree\"\n                                    aria-expanded=\"false\"\n                                    aria-controls=\"collapseThree\">Accordion\n                                Item #3</button></h4>\n                        <div id=\"collapseThree\"\n                             class=\"accordion-collapse collapse\"\n                             aria-labelledby=\"headingThree\"\n                             data-bs-parent=\"#accordionExample\">\n                            <div class=\"accordion-body\">\n                                <strong>This is the third\n                                    item's accordion\n                                    body.</strong> It is\n                                hidden by default, until the\n                                collapse plugin adds the\n                                appropriate classes that we\n                                use to style each element.\n                                These classes control the\n                                overall appearance, as well\n                                as the showing and hiding\n                                via CSS transitions. You can\n                                modify any of this with\n                                custom CSS or overriding our\n                                default variables. It's also\n                                worth noting that just about\n                                any HTML can go within the\n                                <code>.accordion-body</code>,\n                                though the transition does\n                                limit overflow.</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"alerts\">\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 m-t_5 m-b_3 \">\n            <h3>Alerts</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/alerts/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"alert alert-primary alert-dismissible fade show\"\n                     role=\"alert\">A simple primary alert\n                    with <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-secondary alert-dismissible fade show\"\n                     role=\"alert\">A simple secondary alert\n                    with <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-success alert-dismissible fade show\"\n                     role=\"alert\">A simple success alert\n                    with <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-alert alert-dismissible fade show\"\n                     role=\"alert\">A simple alert alert with\n                    <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-warning alert-dismissible fade show\"\n                     role=\"alert\">A simple warning alert\n                    with <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-info alert-dismissible fade show\"\n                     role=\"alert\">A simple info alert with\n                    <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-light alert-dismissible fade show\"\n                     role=\"alert\">A simple light alert with\n                    <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-dark alert-dismissible fade show\"\n                     role=\"alert\">A simple dark alert with\n                    <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"alert alert-success\"\n                     role=\"alert\">\n                    <h4 class=\"alert-heading\">Well done!\n                    </h4>\n                    <p>Aww yeah, you successfully read this\n                        important alert message. This\n                        example text is going to run a bit\n                        longer so that you can see how\n                        spacing within an alert works with\n                        this kind of content.</p>\n                    <hr>\n                    <p class=\"mb-0\">Whenever you need to, be\n                        sure to use margin utilities to keep\n                        things nice and tidy.</p>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"badge\">\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 m-t_5 m-b_3 \">\n            <h3>Badge</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/badge/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <p class=\"h1\">Example heading <span\n                          class=\"badge bg_primary\">New</span>\n                </p>\n                <p class=\"h2\">Example heading <span\n                          class=\"badge bg_secondary\">New</span>\n                </p>\n                <p class=\"h3\">Example heading <span\n                          class=\"badge bg_success\">New</span>\n                </p>\n                <p class=\"h4\">Example heading <span\n                          class=\"badge bg_alert\">New</span>\n                </p>\n                <p class=\"h5\">Example heading <span\n                          class=\"badge bg_warning c_dark\">New</span>\n                </p>\n                <p class=\"h6\">Example heading <span\n                          class=\"badge bg_info c_dark\">New</span>\n                </p>\n                <p class=\"h6\">Example heading <span\n                          class=\"badge bg_light c_dark\">New</span>\n                </p>\n                <p class=\"h6\">Example heading <span\n                          class=\"badge bg_dark\">New</span>\n                </p>\n            </div>\n            <div class=\"bd-example\"><span\n                      class=\"badge rounded-pill bg_primary\">Primary</span>\n                <span\n                      class=\"badge rounded-pill bg_secondary\">Secondary</span>\n                <span\n                      class=\"badge rounded-pill bg_success\">Success</span>\n                <span\n                      class=\"badge rounded-pill bg_alert\">alert</span>\n                <span\n                      class=\"badge rounded-pill bg_warning c_dark\">Warning</span>\n                <span\n                      class=\"badge rounded-pill bg_info c_dark\">Info</span>\n                <span\n                      class=\"badge rounded-pill bg_light c_dark\">Light</span>\n                <span\n                      class=\"badge rounded-pill bg_dark\">Dark</span>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"breadcrumb\">\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 m-t_5 m-b_3 \">\n            <h3>Breadcrumb</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/breadcrumb/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <nav aria-label=\"breadcrumb\">\n                    <ol class=\"breadcrumb\">\n                        <li class=\"breadcrumb-item\"><a\n                               href=\"#\">Home</a></li>\n                        <li class=\"breadcrumb-item\"><a\n                               href=\"#\">Library</a></li>\n                        <li class=\"breadcrumb-item active\"\n                            aria-current=\"page\">Data</li>\n                    </ol>\n                </nav>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"buttons\">\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 m-t_5 m-b_3 \">\n            <h3>Buttons</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/buttons/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-primary\">Primary</button>\n                <button type=\"button\"\n                        class=\"btn btn-secondary\">Secondary</button>\n                <button type=\"button\"\n                        class=\"btn btn-success\">Success</button>\n                <button type=\"button\"\n                        class=\"btn btn-alert\">alert</button>\n                <button type=\"button\"\n                        class=\"btn btn-warning\">Warning</button>\n                <button type=\"button\"\n                        class=\"btn btn-info\">Info</button>\n                <button type=\"button\"\n                        class=\"btn btn-link\">Link</button>\n            </div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-outline-primary\">Primary</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-secondary\">Secondary</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-success\">Success</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-alert\">alert</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-warning\">Warning</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-info\">Info</button>\n            </div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-primary btn-sm\">Small\n                    button</button> <button type=\"button\"\n                        class=\"btn btn-primary\">Standard\n                    button</button> <button type=\"button\"\n                        class=\"btn btn-primary btn-lg\">Large\n                    button</button></div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"button-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 m-t_5 m-b_3 \">\n            <h3>Button group</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/button-group/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"btn-toolbar\"\n                     role=\"toolbar\"\n                     aria-label=\"Toolbar with button groups\">\n                    <div class=\"btn-group m_3\"\n                         role=\"group\"\n                         aria-label=\"First group\"><button\n                                type=\"button\"\n                                class=\"btn btn-secondary\">1</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">2</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">3</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">4</button>\n                    </div>\n                    <div class=\"btn-group m_3\"\n                         role=\"group\"\n                         aria-label=\"Second group\"><button\n                                type=\"button\"\n                                class=\"btn btn-secondary\">5</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">6</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">7</button>\n                    </div>\n                    <div class=\"btn-group\"\n                         role=\"group\"\n                         aria-label=\"Third group\"><button\n                                type=\"button\"\n                                class=\"btn btn-secondary\">8</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"card\">\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 m-t_5 m-b_3 \">\n            <h3>Card</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/card/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div\n                     class=\"row row_cols-1 row_cols-md-2 g-4\">\n                    <div class=\"col\">\n                        <div class=\"card\"><svg\n                                 class=\"bd-placeholder-img card-img-top\"\n                                 width=\"100%\"\n                                 height=\"180\"\n                                 xmlns=\"http://www.w3.org/2000/svg\"\n                                 role=\"img\"\n                                 aria-label=\"Placeholder: Image cap\"\n                                 preserveAspectRatio=\"xMidYMid slice\"\n                                 focusable=\"false\">\n                                <title>Placeholder</title>\n                                <rect width=\"100%\"\n                                      height=\"100%\"\n                                      fill=\"#868e96\"></rect>\n                                <text x=\"50%\"\n                                      y=\"50%\"\n                                      fill=\"#dee2e6\"\n                                      dy=\".3em\">Image\n                                    cap</text>\n                            </svg>\n                            <div class=\"card-body\">\n                                <h5 class=\"card-title\">Card\n                                    title</h5>\n                                <p class=\"card-text\">Some\n                                    quick example text to\n                                    build on the card title\n                                    and make up the bulk of\n                                    the card's content.</p>\n                                <a href=\"#\"\n                                   class=\"btn btn-primary\">Go\n                                    somewhere</a>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"col\">\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                Featured</div>\n                            <div class=\"card-body\">\n                                <h5 class=\"card-title\">Card\n                                    title</h5>\n                                <p class=\"card-text\">Some\n                                    quick example text to\n                                    build on the card title\n                                    and make up the bulk of\n                                    the card's content.</p>\n                                <a href=\"#\"\n                                   class=\"btn btn-primary\">Go\n                                    somewhere</a>\n                            </div>\n                            <div\n                                 class=\"card-footer c_muted\">\n                                2 days ago</div>\n                        </div>\n                    </div>\n                    <div class=\"col\">\n                        <div class=\"card\">\n                            <div class=\"card-body\">\n                                <h5 class=\"card-title\">Card\n                                    title</h5>\n                                <p class=\"card-text\">Some\n                                    quick example text to\n                                    build on the card title\n                                    and make up the bulk of\n                                    the card's content.</p>\n                            </div>\n                            <ul\n                                class=\"list-group list-group-flush\">\n                                <li class=\"list-group-item\">\n                                    An item</li>\n                                <li class=\"list-group-item\">\n                                    A second item</li>\n                                <li class=\"list-group-item\">\n                                    A third item</li>\n                            </ul>\n                            <div class=\"card-body\"><a\n                                   href=\"#\"\n                                   class=\"card-link\">Card\n                                    link</a> <a href=\"#\"\n                                   class=\"card-link\">Another\n                                    link</a></div>\n                        </div>\n                    </div>\n                    <div class=\"col\">\n                        <div class=\"card\">\n                            <div class=\"row g-0\">\n                                <div class=\"col-md-4\"><svg\n                                         class=\"bd-placeholder-img\"\n                                         width=\"100%\"\n                                         height=\"250\"\n                                         xmlns=\"http://www.w3.org/2000/svg\"\n                                         role=\"img\"\n                                         aria-label=\"Placeholder: Image\"\n                                         preserveAspectRatio=\"xMidYMid slice\"\n                                         focusable=\"false\">\n                                        <title>Placeholder\n                                        </title>\n                                        <rect width=\"100%\"\n                                              height=\"100%\"\n                                              fill=\"#868e96\">\n                                        </rect><text x=\"50%\"\n                                              y=\"50%\"\n                                              fill=\"#dee2e6\"\n                                              dy=\".3em\">Image</text>\n                                    </svg></div>\n                                <div class=\"col-md-8\">\n                                    <div class=\"card-body\">\n                                        <h5\n                                            class=\"card-title\">\n                                            Card title</h5>\n                                        <p\n                                           class=\"card-text\">\n                                            This is a wider\n                                            card with\n                                            supporting text\n                                            below as a\n                                            natural lead-in\n                                            to additional\n                                            content. This\n                                            content is a\n                                            little bit\n                                            longer.</p>\n                                        <p\n                                           class=\"card-text\">\n                                            <small\n                                                   class=\"c_muted\">Last\n                                                updated 3\n                                                mins\n                                                ago</small>\n                                        </p>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"carousel\">\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 m-t_5 m-b_3 \">\n            <h3>Carousel</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/carousel/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div id=\"carouselExampleCaptions\"\n                     class=\"carousel slide\"\n                     data-bs-ride=\"carousel\">\n                    <div class=\"carousel-indicators\"><button\n                                type=\"button\"\n                                data-bs-target=\"#carouselExampleCaptions\"\n                                data-bs-slide-to=\"0\"\n                                class=\"active\"\n                                aria-current=\"true\"\n                                aria-label=\"Slide 1\"></button>\n                        <button type=\"button\"\n                                data-bs-target=\"#carouselExampleCaptions\"\n                                data-bs-slide-to=\"1\"\n                                aria-label=\"Slide 2\"></button>\n                        <button type=\"button\"\n                                data-bs-target=\"#carouselExampleCaptions\"\n                                data-bs-slide-to=\"2\"\n                                aria-label=\"Slide 3\"></button>\n                    </div>\n                    <div class=\"carousel-inner\">\n                        <div class=\"carousel-item active\">\n                            <svg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w_100\"\n                                 width=\"800\"\n                                 height=\"400\"\n                                 xmlns=\"http://www.w3.org/2000/svg\"\n                                 role=\"img\"\n                                 aria-label=\"Placeholder: First slide\"\n                                 preserveAspectRatio=\"xMidYMid slice\"\n                                 focusable=\"false\">\n                                <title>Placeholder</title>\n                                <rect width=\"100%\"\n                                      height=\"100%\"\n                                      fill=\"#777\"></rect>\n                                <text x=\"50%\"\n                                      y=\"50%\"\n                                      fill=\"#555\"\n                                      dy=\".3em\">First\n                                    slide</text>\n                            </svg>\n                            <div\n                                 class=\"carousel-caption d-none d-md-block\">\n                                <h5>First slide label</h5>\n                                <p>Some representative\n                                    placeholder content for\n                                    the first slide.</p>\n                            </div>\n                        </div>\n                        <div class=\"carousel-item\"><svg\n                                 class=\"bd-placeholder-img bd-placeholder-img-lg d-block w_100\"\n                                 width=\"800\"\n                                 height=\"400\"\n                                 xmlns=\"http://www.w3.org/2000/svg\"\n                                 role=\"img\"\n                                 aria-label=\"Placeholder: Second slide\"\n                                 preserveAspectRatio=\"xMidYMid slice\"\n                                 focusable=\"false\">\n                                <title>Placeholder</title>\n                                <rect width=\"100%\"\n                                      height=\"100%\"\n                                      fill=\"#666\"></rect>\n                                <text x=\"50%\"\n                                      y=\"50%\"\n                                      fill=\"#444\"\n                                      dy=\".3em\">Second\n                                    slide</text>\n                            </svg>\n                            <div\n                                 class=\"carousel-caption d-none d-md-block\">\n                                <h5>Second slide label</h5>\n                                <p>Some representative\n                                    placeholder content for\n                                    the second slide.</p>\n                            </div>\n                        </div>\n                        <div class=\"carousel-item\"><svg\n                                 class=\"bd-placeholder-img bd-placeholder-img-lg d-block w_100\"\n                                 width=\"800\"\n                                 height=\"400\"\n                                 xmlns=\"http://www.w3.org/2000/svg\"\n                                 role=\"img\"\n                                 aria-label=\"Placeholder: Third slide\"\n                                 preserveAspectRatio=\"xMidYMid slice\"\n                                 focusable=\"false\">\n                                <title>Placeholder</title>\n                                <rect width=\"100%\"\n                                      height=\"100%\"\n                                      fill=\"#555\"></rect>\n                                <text x=\"50%\"\n                                      y=\"50%\"\n                                      fill=\"#333\"\n                                      dy=\".3em\">Third\n                                    slide</text>\n                            </svg>\n                            <div\n                                 class=\"carousel-caption d-none d-md-block\">\n                                <h5>Third slide label</h5>\n                                <p>Some representative\n                                    placeholder content for\n                                    the third slide.</p>\n                            </div>\n                        </div>\n                    </div><button\n                            class=\"carousel-control-prev\"\n                            type=\"button\"\n                            data-bs-target=\"#carouselExampleCaptions\"\n                            data-bs-slide=\"prev\"><span\n                              class=\"carousel-control-prev-icon\"\n                              aria-hidden=\"true\"></span>\n                        <span\n                              class=\"visually-hidden\">Previous</span></button>\n                    <button class=\"carousel-control-next\"\n                            type=\"button\"\n                            data-bs-target=\"#carouselExampleCaptions\"\n                            data-bs-slide=\"next\"><span\n                              class=\"carousel-control-next-icon\"\n                              aria-hidden=\"true\"></span>\n                        <span\n                              class=\"visually-hidden\">Next</span></button>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"dropdowns\">\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 m-t_5 m-b_3 \">\n            <h3>Dropdowns</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/dropdowns/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example flex\">\n                <div\n                     class=\"btn-group w_100 flex_wrap\">\n                    <div class=\"dropdown\"><button\n                                class=\"btn btn-secondary btn-sm dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropdownMenuButtonSM\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropdown\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropdownMenuButtonSM\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                    <div class=\"dropdown\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropdownMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropdown\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropdownMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                    <div class=\"dropdown\"><button\n                                class=\"btn btn-secondary btn-lg dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropdownMenuButtonLG\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropdown\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropdownMenuButtonLG\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-primary\">Primary</button>\n                    <button type=\"button\"\n                            class=\"btn btn-primary dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-secondary\">Secondary</button>\n                    <button type=\"button\"\n                            class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-success\">Success</button>\n                    <button type=\"button\"\n                            class=\"btn btn-success dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-info\">Info</button>\n                    <button type=\"button\"\n                            class=\"btn btn-info dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-warning\">Warning</button>\n                    <button type=\"button\"\n                            class=\"btn btn-warning dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-alert\">alert</button>\n                    <button type=\"button\"\n                            class=\"btn btn-alert dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n            </div>\n            <div class=\"bd-example\">\n                <div\n                     class=\"btn-group w_100 align-items-center justify-content-between flex-wrap\">\n                    <div class=\"dropend\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropendMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropend\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropendMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                    <div class=\"dropup\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropupMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropup\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropupMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                    <div class=\"dropstart\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropstartMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropstart\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropstartMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"btn-group\">\n                    <div class=\"dropdown\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropdownRightMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">End-aligned\n                            menu</button>\n                        <ul class=\"dropdown-menu dropdown-menu-end\"\n                            aria-labelledby=\"dropdownRightMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"list-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 m-t_5 m-b_3 \">\n            <h3>List group</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/list-group/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <ul class=\"list-group\">\n                    <li class=\"list-group-item disabled\"\n                        aria-disabled=\"true\">A disabled item\n                    </li>\n                    <li class=\"list-group-item\">A second\n                        item</li>\n                    <li class=\"list-group-item\">A third item\n                    </li>\n                    <li class=\"list-group-item\">A fourth\n                        item</li>\n                    <li class=\"list-group-item\">And a fifth\n                        one</li>\n                </ul>\n            </div>\n            <div class=\"bd-example\">\n                <ul class=\"list-group list-group-flush\">\n                    <li class=\"list-group-item\">An item</li>\n                    <li class=\"list-group-item\">A second\n                        item</li>\n                    <li class=\"list-group-item\">A third item\n                    </li>\n                    <li class=\"list-group-item\">A fourth\n                        item</li>\n                    <li class=\"list-group-item\">And a fifth\n                        one</li>\n                </ul>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"list-group\"><a href=\"#\"\n                       class=\"list-group-item list-group-item-action\">A\n                        simple default list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-primary\">A\n                        simple primary list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-secondary\">A\n                        simple secondary list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-success\">A\n                        simple success list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-alert\">A\n                        simple alert list group item</a> <a\n                       href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-warning\">A\n                        simple warning list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-info\">A\n                        simple info list group item</a>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"modal\">\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 m-t_5 m-b_3 \">\n            <h3>Modal</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/modal/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div\n                     class=\"d-flex justify-content-between flex-wrap\">\n                    <button type=\"button\"\n                            class=\"btn btn-primary\"\n                            data-bs-toggle=\"modal\"\n                            data-bs-target=\"#exampleModalDefault\">Launch\n                        demo modal</button> <button\n                            type=\"button\"\n                            class=\"btn btn-primary\"\n                            data-bs-toggle=\"modal\"\n                            data-bs-target=\"#staticBackdropLive\">Launch\n                        static backdrop modal</button>\n                    <button type=\"button\"\n                            class=\"btn btn-primary\"\n                            data-bs-toggle=\"modal\"\n                            data-bs-target=\"#exampleModalCenteredScrollable\">Vertically\n                        centered scrollable modal</button>\n                    <button type=\"button\"\n                            class=\"btn btn-primary\"\n                            data-bs-toggle=\"modal\"\n                            data-bs-target=\"#exampleModalFullscreen\">Full\n                        screen</button></div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"navs\">\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 m-t_5 m-b_3 \">\n            <h3>Navs</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/navs-tabs/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <nav class=\"nav\"><a class=\"nav-link active\"\n                       aria-current=\"page\"\n                       href=\"#\">Active</a> <a\n                       class=\"nav-link\"\n                       href=\"#\">Link</a> <a class=\"nav-link\"\n                       href=\"#\">Link</a> <a\n                       class=\"nav-link disabled\"\n                       href=\"#\"\n                       tabindex=\"-1\"\n                       aria-disabled=\"true\">Disabled</a>\n                </nav>\n            </div>\n            <div class=\"bd-example\">\n                <nav>\n                    <div class=\"nav nav-tabs m-b_3\"\n                         id=\"nav-tab\"\n                         role=\"tablist\"><button\n                                class=\"nav-link active\"\n                                id=\"nav-home-tab\"\n                                data-bs-toggle=\"tab\"\n                                data-bs-target=\"#nav-home\"\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-controls=\"nav-home\"\n                                aria-selected=\"true\">Home</button>\n                        <button class=\"nav-link\"\n                                id=\"nav-profile-tab\"\n                                data-bs-toggle=\"tab\"\n                                data-bs-target=\"#nav-profile\"\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-controls=\"nav-profile\"\n                                aria-selected=\"false\">Profile</button>\n                        <button class=\"nav-link\"\n                                id=\"nav-contact-tab\"\n                                data-bs-toggle=\"tab\"\n                                data-bs-target=\"#nav-contact\"\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-controls=\"nav-contact\"\n                                aria-selected=\"false\">Contact</button>\n                    </div>\n                </nav>\n                <div class=\"tab-content\"\n                     id=\"nav-tabContent\">\n                    <div class=\"tab-pane fade show active\"\n                         id=\"nav-home\"\n                         role=\"tabpanel\"\n                         aria-labelledby=\"nav-home-tab\">\n                        <p>Placeholder content for the tab\n                            panel. This one relates to the\n                            home tab. Takes you miles high,\n                            so high, 'cause she’s got that\n                            one international smile. There's\n                            a stranger in my bed, there's a\n                            pounding in my head. Oh, no. In\n                            another life I would make you\n                            stay. ‘Cause I, I’m capable of\n                            anything. Suiting up for my\n                            crowning battle. Used to steal\n                            your parents' liquor and climb\n                            to the roof. Tone, tan fit and\n                            ready, turn it up cause its\n                            gettin' heavy. Her love is like\n                            a drug. I guess that I forgot I\n                            had a choice.</p>\n                    </div>\n                    <div class=\"tab-pane fade\"\n                         id=\"nav-profile\"\n                         role=\"tabpanel\"\n                         aria-labelledby=\"nav-profile-tab\">\n                        <p>Placeholder content for the tab\n                            panel. This one relates to the\n                            profile tab. You got the finest\n                            architecture. Passport stamps,\n                            she's cosmopolitan. Fine, fresh,\n                            fierce, we got it on lock. Never\n                            planned that one day I'd be\n                            losing you. She eats your heart\n                            out. Your kiss is cosmic, every\n                            move is magic. I mean the ones,\n                            I mean like she's the one.\n                            Greetings loved ones let's take\n                            a journey. Just own the night\n                            like the 4th of July! But you'd\n                            rather get wasted.</p>\n                    </div>\n                    <div class=\"tab-pane fade\"\n                         id=\"nav-contact\"\n                         role=\"tabpanel\"\n                         aria-labelledby=\"nav-contact-tab\">\n                        <p>Placeholder content for the tab\n                            panel. This one relates to the\n                            contact tab. Her love is like a\n                            drug. All my girls vintage\n                            Chanel baby. Got a motel and\n                            built a fort out of sheets.\n                            'Cause she's the muse and the\n                            artist. (This is how we do) So\n                            you wanna play with magic. So\n                            just be sure before you give it\n                            all to me. I'm walking, I'm\n                            walking on air (tonight). Skip\n                            the talk, heard it all, time to\n                            walk the walk. Catch her if you\n                            can. Stinging like a bee I\n                            earned my stripes.</p>\n                    </div>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <ul class=\"nav nav-pills\">\n                    <li class=\"nav-item\"><a\n                           class=\"nav-link active\"\n                           aria-current=\"page\"\n                           href=\"#\">Active</a></li>\n                    <li class=\"nav-item\"><a class=\"nav-link\"\n                           href=\"#\">Link</a></li>\n                    <li class=\"nav-item\"><a class=\"nav-link\"\n                           href=\"#\">Link</a></li>\n                    <li class=\"nav-item\"><a\n                           class=\"nav-link disabled\"\n                           href=\"#\"\n                           tabindex=\"-1\"\n                           aria-disabled=\"true\">Disabled</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"pagination\">\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 m-t_5 m-b_3 \">\n            <h3>Pagination</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/pagination/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <nav aria-label=\"Pagination example\">\n                    <ul class=\"pagination pagination-sm\">\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">1</a></li>\n                        <li class=\"page-item active\"\n                            aria-current=\"page\"><a\n                               class=\"page-link\"\n                               href=\"#\">2</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">3</a></li>\n                    </ul>\n                </nav>\n            </div>\n            <div class=\"bd-example\">\n                <nav\n                     aria-label=\"Standard pagination example\">\n                    <ul class=\"pagination\">\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\"\n                               aria-label=\"Previous\"><span\n                                      aria-hidden=\"true\">«</span></a>\n                        </li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">1</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">2</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">3</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\"\n                               aria-label=\"Next\"><span\n                                      aria-hidden=\"true\">»</span></a>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n            <div class=\"bd-example\">\n                <nav\n                     aria-label=\"Another pagination example\">\n                    <ul\n                        class=\"pagination pagination-lg flex-wrap\">\n                        <li class=\"page-item disabled\"><a\n                               class=\"page-link\"\n                               href=\"#\"\n                               tabindex=\"-1\"\n                               aria-disabled=\"true\">Previous</a>\n                        </li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">1</a></li>\n                        <li class=\"page-item active\"\n                            aria-current=\"page\"><a\n                               class=\"page-link\"\n                               href=\"#\">2</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">3</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">Next</a></li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"popovers\">\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 m-t_5 m-b_3 \">\n            <h3>Popovers</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/popovers/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-lg btn-alert\"\n                        data-bs-toggle=\"popover\"\n                        title=\"Popover title\"\n                        data-bs-content=\"And here's some amazing content. It's very engaging. Right?\">Click\n                    to toggle popover</button></div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-container=\"body\"\n                        data-bs-toggle=\"popover\"\n                        data-bs-placement=\"top\"\n                        data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\">Popover\n                    on top</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-container=\"body\"\n                        data-bs-toggle=\"popover\"\n                        data-bs-placement=\"right\"\n                        data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\">Popover\n                    on end</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-container=\"body\"\n                        data-bs-toggle=\"popover\"\n                        data-bs-placement=\"bottom\"\n                        data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\">Popover\n                    on bottom</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-container=\"body\"\n                        data-bs-toggle=\"popover\"\n                        data-bs-placement=\"left\"\n                        data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\">Popover\n                    on start</button></div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"progress\">\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 m-t_5 m-b_3 \">\n            <h3>Progress</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/progress/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"progress m-b_3\">\n                    <div class=\"progress-bar\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"0\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">0%</div>\n                </div>\n                <div class=\"progress m-b_3\">\n                    <div class=\"progress-bar bg_success w_25\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"25\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">25%</div>\n                </div>\n                <div class=\"progress m-b_3\">\n                    <div class=\"progress-bar bg_info c_dark w_50\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"50\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">50%</div>\n                </div>\n                <div class=\"progress m-b_3\">\n                    <div class=\"progress-bar bg_warning c_dark w_75\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"75\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">75%</div>\n                </div>\n                <div class=\"progress\">\n                    <div class=\"progress-bar bg_alert w_100\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"100\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">100%</div>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"progress\">\n                    <div class=\"progress-bar\"\n                         role=\"progressbar\"\n                         style=\"width:15%\"\n                         aria-valuenow=\"15\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\"></div>\n                    <div class=\"progress-bar progress-bar-striped progress-bar-animated bg_success\"\n                         role=\"progressbar\"\n                         style=\"width:40%\"\n                         aria-valuenow=\"40\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\"></div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"scrollspy\">\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 m-t_5 m-b_3 \">\n            <h3>Scrollspy</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/scrollspy/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <nav id=\"navbar-example2\"\n                     class=\"navbar navbar-light bg_light px-3\">\n                    <a class=\"navbar-brand\"\n                       href=\"#\">Navbar</a>\n                    <ul class=\"nav nav-pills\">\n                        <li class=\"nav-item\"><a\n                               class=\"nav-link\"\n                               href=\"#fat\">@fat</a></li>\n                        <li class=\"nav-item\"><a\n                               class=\"nav-link\"\n                               href=\"#mdo\">@mdo</a></li>\n                        <li class=\"nav-item dropdown\"><a\n                               class=\"nav-link dropdown-toggle\"\n                               data-bs-toggle=\"dropdown\"\n                               href=\"#\"\n                               role=\"button\"\n                               aria-expanded=\"false\">Dropdown</a>\n                            <ul class=\"dropdown-menu\">\n                                <li><a class=\"dropdown-item\"\n                                       href=\"#one\">one</a>\n                                </li>\n                                <li><a class=\"dropdown-item\"\n                                       href=\"#two\">two</a>\n                                </li>\n                                <li>\n                                    <hr\n                                        class=\"dropdown-divider\">\n                                </li>\n                                <li><a class=\"dropdown-item\"\n                                       href=\"#three\">three</a>\n                                </li>\n                            </ul>\n                        </li>\n                    </ul>\n                </nav>\n                <div data-bs-spy=\"scroll\"\n                     data-bs-target=\"#navbar-example2\"\n                     data-bs-offset=\"0\"\n                     class=\"scrollspy-example\"\n                     tabindex=\"0\">\n                    <h4 id=\"fat\">@fat</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. You got the finest\n                        architecture. Passport stamps, she's\n                        cosmopolitan. Fine, fresh, fierce,\n                        we got it on lock. Never planned\n                        that one day I'd be losing you. She\n                        eats your heart out. Your kiss is\n                        cosmic, every move is magic. I mean\n                        the ones, I mean like she's the one.\n                        Greetings loved ones let's take a\n                        journey. Just own the night like the\n                        4th of July! But you'd rather get\n                        wasted.</p>\n                    <h4 id=\"mdo\">@mdo</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. 'Cause she's the muse and\n                        the artist. (This is how we do) So\n                        you wanna play with magic. So just\n                        be sure before you give it all to\n                        me. I'm walking, I'm walking on air\n                        (tonight). Skip the talk, heard it\n                        all, time to walk the walk.</p>\n                    <h4 id=\"one\">one</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. Takes you miles high, so\n                        high, 'cause she’s got that one\n                        international smile. There's a\n                        stranger in my bed, there's a\n                        pounding in my head. Oh, no. In\n                        another life I would make you stay.\n                        ‘Cause I, I’m capable of anything.\n                        Suiting up for my crowning battle.\n                        Used to steal your parents' liquor\n                        and climb to the roof. Tone, tan fit\n                        and ready, turn it up cause its\n                        gettin' heavy. Her love is like a\n                        drug. I guess that I forgot I had a\n                        choice.</p>\n                    <h4 id=\"two\">two</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. It's time to bring out the\n                        big balloons. I'm walking, I'm\n                        walking on air (tonight). Yeah, we\n                        maxed our credit cards and got\n                        kicked out of the bar. Yo, shout out\n                        to all you kids, buying bottle\n                        service, with your rent money. I'm\n                        ma get your heart racing in my\n                        skin-tight jeans. If you get the\n                        chance you better keep her. Yo,\n                        shout out to all you kids, buying\n                        bottle service, with your rent\n                        money.</p>\n                    <h4 id=\"three\">three</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. If you wanna dance, if you\n                        want it all, you know that I'm the\n                        girl that you should call. Walk\n                        through the storm I would. So let me\n                        get you in your birthday suit. The\n                        one that got away. Last Friday\n                        night, yeah I think we broke the\n                        law, always say we're gonna stop.\n                        'Cause she's a little bit of Yoko,\n                        And she's a little bit of 'Oh no'. I\n                        want the jaw droppin', eye poppin',\n                        head turnin', body shockin'. Yeah,\n                        we maxed our credit cards and got\n                        kicked out of the bar.</p>\n                    <p>And some more placeholder content,\n                        for good measure.</p>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"spinners\">\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 m-t_5 m-b_3 \">\n            <h3>Spinners</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/spinners/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"spinner-border c_primary\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_secondary\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_success\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_alert\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_warning\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_info\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_light\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_dark\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"spinner-grow c_primary\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_secondary\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_success\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_alert\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_warning\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_info\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_light\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_dark\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"toasts\">\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 m-t_5 m-b_3 \">\n            <h3>Toasts</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/toasts/\">Documentation</a>\n        </div>\n        <div>\n            <div\n                 class=\"bd-example bg_dark p-5 align-items-center\">\n                <div class=\"toast\"\n                     role=\"alert\"\n                     aria-live=\"assertive\"\n                     aria-atomic=\"true\">\n                    <div class=\"toast-header\"><svg\n                             class=\"bd-placeholder-img rounded m_3\"\n                             width=\"20\"\n                             height=\"20\"\n                             xmlns=\"http://www.w3.org/2000/svg\"\n                             aria-hidden=\"true\"\n                             preserveAspectRatio=\"xMidYMid slice\"\n                             focusable=\"false\">\n                            <rect width=\"100%\"\n                                  height=\"100%\"\n                                  fill=\"#007aff\"></rect>\n                        </svg> <strong\n                                class=\"me-auto\">Bootstrap</strong>\n                        <small class=\"c_muted\">11 mins\n                            ago</small> <button\n                                type=\"button\"\n                                class=\"btn-close\"\n                                data-bs-dismiss=\"toast\"\n                                aria-label=\"Close\"></button>\n                    </div>\n                    <div class=\"toast-body\">Hello, world!\n                        This is a toast message.</div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"mt-3 mb-5 pb-5\"\n             id=\"tooltips\">\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 m-t_5 m-b_3 \">\n            <h3>Tooltips</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/tooltips/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example tooltip-demo\"><button\n                        type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-placement=\"top\"\n                        title=\"Tooltip on top\">Tooltip on\n                    top</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-placement=\"right\"\n                        title=\"Tooltip on end\">Tooltip on\n                    end</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-placement=\"bottom\"\n                        title=\"Tooltip on bottom\">Tooltip on\n                    bottom</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-placement=\"left\"\n                        title=\"Tooltip on start\">Tooltip on\n                    start</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-html=\"true\"\n                        title=\"<em>Tooltip</em> <u>with</u> <b>HTML</b>\">Tooltip\n                    with HTML</button></div>\n        </div>\n    </article>\n</section>\n\n\n\nWeight: 1000\n\nStyleguide  Bootstrap.Components\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-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.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 (min-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 (min-width : 768px) {\n  .no-controls .carousel-control-prev,\n  .no-controls .carousel-control-next {\n    display: none;\n  }\n}\n@media only screen and (min-width : 768px) {\n  .carousel-control-prev,\n  .carousel-control-next {\n    width: 10%;\n  }\n}\n@media only screen and (min-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 (min-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.icon-toggle_bars-times:before {\n  content: \"\\f2d3\";\n}\n.collapsed > .icon-toggle_bars-times:before, .collapsed .icon-toggle_bars-times:before {\n  content: \"\\f0c9\";\n}\n\n.icon-toggle_plus-minus:before {\n  content: \"\\f0fe\";\n}\n.show > .icon-toggle_plus-minus:before {\n  content: \"\\f146\";\n}\n\n.icon-toggle_plus-minus-sub:before {\n  content: \"\\f068\";\n}\n.collapsed > .icon-toggle_plus-minus-sub:before, .collapsed .icon-toggle_plus-minus-sub:before {\n  content: \"\\f067\";\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 (min-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 (min-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 (min-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 (min-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 i.icon-toggle_plus-minus:before {\n  content: \"\\f146\";\n}\n.accordion .collapsed i.icon-toggle_plus-minus:before {\n  content: \"\\f0fe\";\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// /*Bootstrap Framework Setup Files.*/\n\n// /*!\n//  * Bootstrap v4.4.1 (https://getbootstrap.com/)\n//  * Copyright 2011-2019 The Bootstrap Authors\n//  * Copyright 2011-2019 Twitter, Inc.\n//  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n//  */\n\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/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/code';\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/input-group';\n// @import '../../node_modules/bootstrap/scss/custom-forms';\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/breadcrumb';\n// @import '../../node_modules/bootstrap/scss/pagination';\n// // @import '../../node_modules/bootstrap/scss/badge';\n// @import '../../node_modules/bootstrap/scss/jumbotron';\n// // @import '../../node_modules/bootstrap/scss/alert';\n// @import '../../node_modules/bootstrap/scss/progress';\n// // @import '../../node_modules/bootstrap/scss/media';\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/utilities\";\n// // @import \"print\";\n\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@import \"recipes/boot/_boot.basic_nav\";\n@import \"recipes/boot/_boot.tabs\";\n@import \"recipes/boot/_boot.ui.tabs\";\n@import \"recipes/boot/_boot.sidebar_nav\";\n@import \"recipes/boot/_boot.toggle_icon\";\n@import \"recipes/boot/_boot._accordion\";\n@import \"recipes/boot/_boot.buttons\";@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: () !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),\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$container-query-breakpoints: (\n  sm: 320px,\n  md: 480px,\n  lg: 768px,\n  xl: 1140px,\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, 3) !default;\n$global-border-round: 1rem !default;\n$basicSizeMultiplier: 1rem;\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// 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    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  ),\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","/*\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 \nDescription: A 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        {{> \"Structures.Tabs.Tabs.LinkActive\" }}\n        {{> \"Structures.Tabs.Tabs.Link\" }}\n        {{> \"Structures.Tabs.Tabs.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\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 Structures.Tabs\n*/\n\n/*\nSimple Tabs\n\nSimple in page tabs \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\">\n    <ul class=\"flex_column flex_row:md  nav\">\n        {{> \"Structures.Tabs.Tabs.LinkActive\" }}\n        {{> \"Structures.Tabs.Tabs.Link\" }}\n        {{> \"Structures.Tabs.Tabs.Link\" }}\n        {{> \"Structures.Tabs.Tabs.LinkDisabled\" }}\n    </ul>\n</nav>\n\nStyleguide  Structures.Tabs.Tabs\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_white-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        {{> \"Structures.Tabs.TabsDark.LinkActive\" }}\n        {{> \"Structures.Tabs.TabsDark.Link\" }}\n        {{> \"Structures.Tabs.TabsDark.Link\" }}\n        {{> \"Structures.Tabs.TabsDark.LinkDisabled\" }}\n        </ul>\n    </nav>\n</div>\n\nWeight: 0\n\nStyleguide  Structures.Tabs.TabsDark\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  Structures.Tabs.TabsDark.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  Structures.Tabs.TabsDark.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  Structures.Tabs.TabsDark.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  Structures.Tabs.Tabs.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  Structures.Tabs.Tabs.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  Structures.Tabs.Tabs.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            {{> \"Structures.UITabs.Tabs.LinkActive\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs.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            {{> HTML.Typography.Sample }}\n        </div>\n        <div class=\"tab-pane fade\" id=\"LinkUI\" role=\"tabpanel\" aria-labelledby=\"LinkUI\">\n            {{> HTML.Typography.Sample }}\n        </div>\n    </div>\n</div>\n\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n \nStyleguide 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            {{> \"Structures.UITabs.Tabs.LinkActive\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs\" }}\n            {{> \"Structures.UITabs.Tabs.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            {{> HTML.Typography.Sample }}\n        </div>\n        <div class=\"tab-pane fade\" id=\"LinkUI\" role=\"tabpanel\" aria-labelledby=\"LinkUI\">\n            {{> HTML.Typography.Sample }}\n        </div>\n    </div>\n</div>\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 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\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  Structures.UITabs.Tabs\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  Structures.UITabs.Tabs.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\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  Structures.UITabs.Tabs.LinkDisabled\n*/\n\n\n/*\nScroll Overflow Script\n \nDescription: Javascript is needed to make the scrolls work on the page\n \nMarkup:\n\n \nWeight:0\n \nStyleguide  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        {{> \"Navigation.Sidebar.Parent\"}}\n        {{> \"Navigation.Sidebar.Child\"}}\n        {{> \"Navigation.Sidebar.ChildWithChildren\"}}\n        {{> \"Navigation.Sidebar.Child\"}}\n        {{> \"Navigation.Sidebar.Child\"}}\n        {{> \"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 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 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 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    {{> \"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 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        {{> \"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                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"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 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        {{> \"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                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    {{> \"Navigation.Sidebar.Child\" }}\n                    <li class=\"nav-item  active \" data-nav=\"grandchild\">\n                        <div class=\"flex flex_row\">\n                            {{> \"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                                        {{> \"Navigation.Sidebar.GreatGrandchild\"  }}\n                                        {{> \"Navigation.Sidebar.GreatGrandchild\" }}\n                                        {{> \"Navigation.Sidebar.GreatGrandchild\"  modifier_class=\"active\"}}\n                                        {{> \"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 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 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 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 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 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 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 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            {{> \"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    {{> HTML.Typography.Sample }}\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  Structures.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            {{> \"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    {{> HTML.Typography.Sample }}\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 Structures.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            {{> \"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        {{> Structures.Accordion.Child }}\n        {{> Structures.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  Structures.Accordion.Nested\n*/","/*\nButtons\n\nBasic Buttons\n\ndefault\t\t            - Medium buttons (default)\n.btn-primary\t            - Primary Class Button (default)\n.btn-secondary \t            - Second Class Button\n.btn-accent             - Button for call out actions\n.btn-success                - Success State.\n.btn-danger                  - Alert State.\n.btn-warning\t            - Warning State\n.clear\t\t            - All button states can become hollow\n.radius\t\t            - Give the button softer corners\n.shadow.clear\t\t    - Give a button a shadow\n.btn-sm\t\t            - Small buttons\n.btn-lg\t\t            - Large buttons\n.disabled\t            - Disabled buttons\n\nMarkup:\n<a class=\"btn btn-primary {{modifier_class}}\" href=\"#\">{{modifier_class}} button</a>\n<button class=\"btn btn-primary {{modifier_class}}\" href=\"#\">{{modifier_class}} button</button>\n\n Styleguide  Bootstrap.Button\n \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*/","%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 Data.Agenda\n*/\n%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 Data.Agenda.ID\n*/\n%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 Data.Agenda.ChannelName\n*/\n\n%Data.Agenda.LiveTime {\n}\n/*\nLive Time\n \nDescription:\nThe time at which a Agenda is live.\n \nMarkup: @ {{> Data.Agenda.ReleaseTime }} – {{> 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 Data.Agenda.LiveTime\n*/\n%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 Data.Agenda.ReleaseTime\n*/\n%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 Data.Agenda.EndTime\n*/\n%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 Data.Agenda.LiveDate\n*/\n%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 Data.Agenda.onDemandReleaseTime\n*/\n%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 Data.Session\n*/\n\n%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 Data.Session.Subtitle\n*/\n%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 Data.Session.Title\n*/\n\n%Data.Session.ID {\n}\n/*\nSession Identifier\n \nDescription:\nThe ID given to a session\n \nMarkup:\n3652\n \nWeight:0\n \nStyleguide Data.Session.ID\n*/\n\n%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 Data.Session.Description\n*/\n\n%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 Data.Presentation\n*/\n%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 Data.Presentation.Description\n*/\n\n%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 Data.Presentation.Title\n*/\n%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 Data.Presentation.LiveTime\n*/\n%Data.Presentation.ID {\n}\n/*\nPresentation ID\n \nDescription:\nUnique system generated identifier for a presentation.\n \nMarkup:\n15612\n \nWeight:0\n \nStyleguide Data.Presentation.ID\n*/\n%Data.Faculty {\n}\n/*\nFaculty \n\nDescription:\nAn educator who created or participated in a presentation\n\nWeight:1000\n\nStyleguide Data.Faculty\n*/\n\n%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=\"{{> \"Data.Faculty.FullName\" }}\"\n/>\n\nMarkupWrapperClasses: max-w_30\n\nFORMAT: 300px by 300px\n\nWeight:0\n\nStyleguide Data.Faculty.Photo\n*/\n%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 Data.Faculty.FullName\n*/\n%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 Data.Faculty.Location\n*/\n%Data.Faculty.Title {\n}\n/*\nTitle\n \nDescription:\nthe roles of the faculty member within the session\n \nMarkup:\n{{> \"Data.Faculty.Title.InstitutionTitle\" }}, {{> \"Data.Faculty.Title.InstitutionDivision\" }}, {{> \"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 Data.Faculty.Title\n*/\n%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 Data.Faculty.Title.Institution\n*/\n%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 Data.Faculty.Title.InstitutionDivision\n*/\n%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 Data.Faculty.Title.InstitutionTitle\n*/\n%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 Data.Faculty.TwitterHandle\n*/\n\n%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 Data.Faculty.Role\n*/\n%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 Data.Faculty.Bio\n*/\n%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 Data.Faculty.ID\n*/\n\n\n\n%Data.Sponsor {\n}\n/*\nSponsor\n \nDescription:\nSponsor are industry that has offered money or support to an event.\n \nWeight:0\n \nStyleguide Data.Sponsor\n*/\n\n%Data.Sponsor.Name {\n}\n/*\nName\n\nMarkup:\nLogoIpsum\n \nWeight:-100\n \nStyleguide Data.Sponsor.Name\n*/\n%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 Data.Sponsor.Address\n*/\n\n%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 Data.Sponsor.Logo\n*/\n\n\n%Data.Sponsor.WebAddress {\n}\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n \nWeight:25\n \nStyleguide Data.Sponsor.WebAddress\n*/\n%Data.Sponsor.WebLink {\n}\n/*\nWebsite Link\n\nMarkup:\n<a class=\"website {{modifier_class}}\" target=\"_blank\"  href=\"{{> 'Data.Sponsor.WebAddress'}}\">Website</a>\n \nWeight:26\n \nStyleguide Data.Sponsor.WebLink\n*/\n\n%Data.Sponsor.WebLink {\n}\n/*\nWebsite Link\n\nMarkup:\n<a class=\"website {{modifier_class}}\" target=\"_blank\"  href=\"{{> 'Data.Sponsor.WebAddress'}}\">More</a>\n \nWeight:26\n \nStyleguide Data.Sponsor.MoreLink\n*/\n\n\n%Data.Sponsor.PDFLink {\n}\n/*\nPDF Link\n\nMarkup:\n<a class=\"pdf {{modifier_class}}\" target=\"_blank\" href=\"{{> 'Data.Sponsor.WebAddress'}}.pdf\">PDF</a>\n \nWeight:26\n \nStyleguide Data.Sponsor.PDFLink\n*/\n\n\n\n%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 Data.Sponsor.Description\n*/\n\n/*\nAward\n \nDescription: Awards and Recognition \n \nWeight:5\n \nStyleguide 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 Data.Award.Title\n\n*/\n\n%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 Data.Award.Description\n\n*/\n\n%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 Data.Abstract\n*/\n\n%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 Data.Abstract.Subtitle\n*/\n%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 Data.Abstract.Title\n*/\n\n%Data.Abstract.ID {\n}\n/*\nAbstract Identifier\n \nDescription:\nThe ID given to a Abstract\n \nMarkup:\n3652\n \nWeight:0\n \nStyleguide Data.Abstract.ID\n*/\n\n%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 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>{{> \"Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n</ul>\n\nData:\nData.Faculty.FullName - Full Name\nData.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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Eileen Marvin <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Chelsea Dach DVM <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Mrs. Jeffrey Cartwright <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>CEmmett Spencer<span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n</ul>\n</div>\n\n\nSubComponents:\nData.Faculty.FullName - Full Name\nData.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>{{> \"Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n    <li class=\"no-after font_medium c_primary-n1 {{ modifier_class }}\">Role Type 1:</li>\n  <li>{{> \"Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n</ul>\n\nSubComponents:\nData.Faculty.FullName - Full Name\nData.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>{{> \"Data.Faculty.FullName\" }} <span class=\"opacity_9 font_light m-l_2\">( {{> \"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\">( {{> \"Data.Faculty.Location\" }})<span></li>\n  <li>Miguel Romaguera <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>  \n  <li>Jeanette Franecki <span class=\"opacity_9 font_light m-l_2\">( {{> \"Data.Faculty.Location\" }})<span></li>\n</ul>\n\nSubComponents:\nData.Faculty.FullName - Full Name\nData.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>{{> \"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:\nData.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.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.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.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.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.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.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.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>{{>\"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{{> \"Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"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{{> \"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{{> \"Navigation.MainNav\" modifier_class=\"grid-area_menuArea z_4\" }}\n\t\t\t{{> \"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{{> \"Structures.Tabs.Tabs.LinkActive\" }}\n\t\t\t\t\t\t\t{{> \"Structures.Tabs.Tabs.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{{> \"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:\nNavigation.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{{> 'Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}\n\t\t\t{{> '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\"> {{> '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{{> \"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{{> 'Navigation.MainNav' modifier_class='grid-area_menuArea z_4' }}\n\t\t\t{{> '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\">{{> '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\"> {{> '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{{> \"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{{> \"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{{> '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    {{> 'Navigation.Home.Utility' }} \n</div>\n\nMarkupWrapperClasses: \n\nSubComponents:\nSub.Section.SearchBar - Search Bar with `disabled` Class\nNavigation.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 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 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.Navigation.Breadcrumb.FirstItem' }}\n        {{> 'Sub.Navigation.Breadcrumb.NotFirstItem' modifier_class=\"Session Shorten Name\" }}\n        {{> 'Sub.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.Navigation.Breadcrumb.FirstItem - First item\nSub.Navigation.Breadcrumb.NotFirstItem - Not first item\nSub.Navigation.Breadcrumb.LastItem - Last item\n \nWeight:0\n \nStyleguide 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 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.Data.Duration'}}\n                {{> 'Sub.Data.PresentationCount'}}\n                {{> '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:\nData.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.Data.Duration'}}\n                {{> 'Sub.Data.PresentationCount'}}\n                {{> '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:\nData.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.Data.Duration'}}\n                {{> 'Sub.Data.PresentationCount'}}\n                 {{> '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:\nData.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 \"> {{> '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.Data.Duration'}}\n\t\t\t\t{{> '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:\nData.Session.Title - Session Title\nData.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 \"> {{> '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.Data.Duration'}}\n                {{> '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:\nData.Session.Title - Session Title\nData.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 \"> {{> '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.Data.Duration'}}\n                {{> '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:\nData.Session.Title - Session Title\nData.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.Data.Duration'}}\n                {{> '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:\nData.Session.Title - Session Title\nData.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:\nData.Session.Title - Session Title\nData.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:\nData.Session.Title - Session Title\nData.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:\nData.Session.Title - Session Title\nData.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\nDeprecated: Lorem Text Loader\n\nIt is often we need to have space held for a return of details or text.  \n\nMarkup:\n<div class=\"max-w_40\">\n   <h1 class=\"lorem-loader font_3 m-y_3\">&nbsp;</h1>\n   <p class=\"m-y_2 font_0 lorem-loader\">&nbsp;</p>\n   <p class=\"m-y_2 font_0 lorem-loader\">&nbsp;</p>\n   <p class=\"m-y_2 font_0 lorem-loader\">&nbsp;</p>\n</div>\n\nStyleguide Recipes.InteractiveExtras.Text Placeholder Loader\n\n\n*/\n\n/*\n\nAspect Ratio\n\nTo create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly. \n\n.aspect_8x10\t\t\t- lock image to a 8 to 10 ratio\n.aspect_1x1\t\t\t- lock image to a 1 to 1 ratio\n.aspect_2x1\t\t\t- lock image to a 2 to 1 ratio\n.aspect_3x2\t\t\t- lock image to a 3 to 2 ratio   \n.aspect_4x3\t\t\t- lock image to a 4 to 3 ratio \n.aspect_16x9\t\t- lock image to a 16 to 9 ratio \n.aspect_21x9\t\t- lock image to a 21 to 9 ratio \n.aspect_4x1\t\t\t- lock image to a 4 to 1 ratio \n\nMarkup:\n<div class=\"grid-w_2 max-w_20\"  data-style=\"{{ modifier_class }}\" >\n   <div class=\"m-y_2 lorem-loader {{modifier_class}} \">&nbsp;</div>\n</div>\n\nStyleguide Recipes.InteractiveExtras.Placeholder Aspect Ratio\n*/\n\n\n@use \"sass:math\";\n@use \"sass:list\";\n\n// Aspect Ratio\n\n.lorem-loader {\n\twidth: 100%;\n\toverflow: hidden;\n\tcolor: #fff;\n\tbackground: linear-gradient(-45deg, get-theme-color(shade, 2, CSSVAR), get-theme-color(shade, 3, CSSVAR));\n\tbackground-size: 400% 400%;\n\t-webkit-animation: Gradient 3s ease infinite;\n\t-moz-animation: Gradient 3s ease infinite;\n\tanimation: Gradient 3s ease infinite;\n}\n\n@-webkit-keyframes Gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n\n@-moz-keyframes Gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n\n@keyframes Gradient {\n\t0% {\n\t\tbackground-position: 0% 50%;\n\t}\n\t50% {\n\t\tbackground-position: 100% 50%;\n\t}\n\t100% {\n\t\tbackground-position: 0% 50%;\n\t}\n}\n","@if($usingFontAwesome) {\n    %icon-toggle-space {\n        margin: $margin_0 $margin_2;\n    }\n\n\n    %icon-toggle-space {\n        margin: $margin_0 $margin_2;\n    }\n\n\n    /*\nIs Active Toggle \n\nMany momment there are needs for toggles of icon when the parent is in the state of `#{$active-class-name}`.  Used in tree navs, dropdowns, and collapsing areas. \n\n.icon-toggle_plus-minus \t\t\t\t\t-  Toggle between plus and minus square\n.icon-toggle_chevron-up-down\t\t\t\t- \tToggle a chevron pointing up and then down.\n.icon-toggle_chevron-double-up-down \t\t-  Toggle the double chevron to point up when active\n.icon-toggle_chevron-double-left-right\t\t- Toggle chevron left and right\n.icon-toggle_arrow-circle \t\t\t\t\t-  Toggle the arrow to have a circle when active.\n.icon-toggle_bars-times \t\t\t\t\t-  Toggle between bars and times\n.icon-toggle_check-sqaure\t\t\t\t\t-  Check Marks toggle on and off\n.icon-toggle_check-circle \t\t\t\t\t-  Check Marks toggle on and off\n.icon-toggle_check \t\t\t\t\t\t\t-  Check Marks toggle on and off\n \nMarkup:\n<ul data-style=\"{{ modifier_class }}\" class=\"ul_none m_0 p_0\">\n\t<li class=\"m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 \">\t\n\t<i class=\"flex_none m-r_5 font_3 fas fa-fw {{ modifier_class }}\"></i>\n\t\t\t<span class=\"flex_auto \">FA Solid {{ modifier_class }}</span>\n\t\t\t<span class=\"flex_shrink m-l_auto w_20 self_end a:_block display_none\"> #{$active-class-name} </span>\n\t</li>\n\t<li class=\"m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 \">\t\n\t<i class=\"flex_none m-r_5 font_3 far  fa-fw {{ modifier_class }}\"></i>\n\t\t\t<span class=\"flex_auto \">FA Regular {{ modifier_class }}</span>\n\t\t\t<span class=\"flex_shrink m-l_auto w_20 self_end a:_block display_none\"> #{$active-class-name} </span>\n\t</li>\n\t<li class=\"m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 \">\t\n\t<i class=\"flex_none m-r_5 font_3 fal fa-fw {{ modifier_class }}\"></i>\n\t\t\t<span class=\"flex_auto\">FA Light {{ modifier_class }}</span>\n\t\t\t<span class=\"flex_shrink m-l_auto w_20 self_end a:_block display_none\"> #{$active-class-name} </span>\n\t</li>\n</ul>\n\n\nStyleguide Recipes.InteractiveExtras.ToggleIcons\n*/\n\n    .icon-toggle_bars-times:before {\n        @extend %icon-toggle-space;\n        content: '\\f0c9';\n        .#{$active-class-name} &,\n        &.show,\n        .show>&,\n        .#{$active-class-name} > & {\n            content: '\\f00d';\n        }\n    }\n\n    .icon-toggle_plus-minus:before {\n        @extend %icon-toggle-space;\n        content: '\\f0fe';\n        .#{$active-class-name} &,\n        &.show,\n        .show>&,\n        .#{$active-class-name} > & {\n            content: '\\f146';\n        }\n    }\n\n    .icon-toggle_chevron-up-down:before {\n        @extend %icon-toggle-space;\n        content: '\\f106';\n        .#{$active-class-name} &,\n        .show &,\n        .#{$active-class-name} > & {\n            content: '\\f107';\n        }\n    }\n\n    .icon-toggle_chevron-double-up-down:before {\n        @extend %icon-toggle-space;\n        content: '\\f103';\n        .#{$active-class-name} &,\n        .show &,\n        .#{$active-class-name} > & {\n            content: '\\f325';\n        }\n    }\n\n    .icon-toggle_chevron-double-left-right:before {\n        @extend %icon-toggle-space;\n        content: '\\f324';\n        .#{$active-class-name} &,\n        .show &,\n        .#{$active-class-name} > & {\n            content: '\\f323';\n        }\n    }\n\n\n    .icon-toggle_arrow-circle:before {\n        @extend %icon-toggle-space;\n        content: '\\f061';\n        .#{$active-class-name} &,\n        .show &,\n        .#{$active-class-name} > & {\n            content: '\\f0a9';\n        }\n    }\n\n    .icon-toggle_check-sqaure:before {\n        @extend %icon-toggle-space;\n        content: '\\f0c8';\n        .#{$active-class-name} &,\n        .show &,\n        .#{$active-class-name} > & {\n            content: '\\f14a';\n        }\n    }\n\n    .icon-toggle_check-circle:before {\n        @extend %icon-toggle-space;\n        content: '\\f111';\n        .#{$active-class-name} &,\n        .show &,\n        .#{$active-class-name} > & {\n            content: '\\f058';\n        }\n    }\n\n    .icon-toggle_check:before {\n        @extend %icon-toggle-space;\n        content: '';\n        .#{$active-class-name} &,\n        .show &,\n        .#{$active-class-name} > & {\n            content: '\\f00c';\n        }\n    }\n}\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 Recipes.Social Links\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=\"twitter 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=\"facebook 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=\"linkedin 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=\"youtube 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=\"google-play 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=\"apple-store 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 Recipes.Social Links.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 Recipes.Social Links.Smaller\n\n*/\n","/*\nStars\n \nStar ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars. \n \nMarkup:\n<ul class=\"ul_none flex flex_inline star-rating\">\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n    <li class=\"flex_shrink\"> <i class=\"fas fa-star\"></i></li>\n</ul>\n \nWeight:0\n\ncaution: This item is not finalized and might be subject to change\n\n\n \nStyleguide Recipes.InteractiveExtras.Stars\n*/\n\n.star-rating{\n    color: get-theme-color(secondary, 3, CSSVAR);;\n    &.rating-5 li:nth-child(-n+5){ color:get-theme-color(primary, -1, CSSVAR);}\n    &.rating-4 li:nth-child(-n+4){ color:get-theme-color(primary, -1, CSSVAR);}\n    &.rating-3 li:nth-child(-n+3){ color:get-theme-color(primary, -1, CSSVAR);}\n    &.rating-2 li:nth-child(-n+2){ color:get-theme-color(primary, -1, CSSVAR);}\n    &.rating-1 li:nth-child(-n+1){ color:get-theme-color(primary, -1, CSSVAR);}\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.  Muli is the current successor to Open Sans, and Maven is a slightly modern font to give a small level of interests which replaces Raleway, or Lato in other products.\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\tThe American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications. The organization uses either version 4 or version 5 of Font Awesome's icon sets, providing an extensive range of options for the website's visual design and functionality. Despite the release of version 6, there is no current initiative to upgrade due to the breaking changes that come with it. 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.\n\t\n\tplus\t\t\t\t\t\t - fa-plus\t\t\t\t\t\n\tarrow-right\t\t\t\t\t - fa-arrow-right\t\t\t\t\t\n\tsearch\t\t\t\t\t\t - fa-search\t\t\t\t\t\n\tenvelope\t\t\t\t\t - fa-envelope\t\t\t\t\n\theart\t\t\t\t\t\t - fa-heart\t\t\t\t\t\n\tstar\t\t\t\t\t\t - fa-star\t\t\t\t\t\t\t\t\t\n\tuser\t\t\t\t\t\t - fa-user\t\t\t\t\t\n\t\t\t\n\t\n\tMarkup:\n\t<div class=\"relative br_black-2 br_solid br_1\"><div class=\"flex flex_row\"><div class=\"font_5 cell w-grid_3 text_center p_3 no-underline c_inherit flex_shrink justify_center h:bg_navigation-n3 h:c_white bg_black-1 expanded-click-area\"><i class=\"fas fa-{{modifier_class}}\"></i></div><div class=\"flex_auto p_4 p-y_2 self_center\"><span class=\"c_black-8 h:c_black-9 text font_bold font_display\">{{modifier_class}}</span></div></div></div>\n\t\n\tMarkupWrapperClasses:\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}","/*\nInteractive Extras\n\nInteractions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.\n\nStyleguide Recipes.InteractiveExtras\n*/\n","@import \"design-base\";\n@import \"crayonbox\";\n@import \"interactive-extras\";\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\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<a target=\"_blank\" href=\"https://css-tricks.com/almanac/selectors/n/not/\"><picture class=\"w_100\">\n\t\t<source class=\"w_100\" srcset=\"https://via.placeholder.com/1440x200.png?text=Desktop+Large+wrapped+link\" media=\"(min-width: 1200px)\">\n\t\t<source class=\"w_100\" srcset=\"https://via.placeholder.com/1200x200.png?text=Desktop+wrapped+link\" media=\"(min-width: 1024px)\">\n\t\t<source class=\"w_100\" srcset=\"https://via.placeholder.com/768x200.png?text=Tablet+wrapped+link\" media=\"(min-width: 768px)\">\n\t\t<source class=\"w_100\" srcset=\"https://via.placeholder.com/600x250.png?text=Mobile+wrapped+link\" media=\"(min-width: 400px)\"> <source class=\"w_100\" srcset=\"https://via.placeholder.com/400x300.png?text=Mobile\" media=\"(min-width: 400px)\">\n\t\t<img src=\"https://via.placeholder.com/400x300.png?text=Mobile\" class=\"w_100\" alt=\"\">\n\t</picture></a>\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\nWeight: -9\n\nHideCodeBlock: display_none \n\nStyleguide HTML.Typography\n\n*/\n\n/*\n\nSample Typography\n\nThis text is used as a lorem content in many of our containers.  \n\n.p_4                                                    - This is the basic typogrpahy from the browser.\n.reading-typography.p_4                                 - this is the standard styling for typography of reading content\n.reading-typography.font-size_up.p_4                    - This font increased their sizes across all typography in the container.\n.reading-typography.font-size_down.p_4                  - This font decreses their sizes across all typography in the container.\n.reading-typography.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<div class=\"{{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</div>\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\nBasic Typography\n\nBasic Typography is unstyled and relys on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves the reading of content text lacking. The overriding styles that are applied to Basic typography is a consistent font treatment (font sizing, font family, and font-weight) and what comes from the baseline frameworks that build the brand.  \n\n\nMarkup:\n<h1>Basic Typography: <small>Lorem ipsum dolor sit amet, consectetuer adipiscing \nelit.</small></h1>\n<h2>Aenean commodo ligula eget dolor aenean massa</h2>\n<h3>Cut sociis natoque penatibus et magnis dis \nparturient montes nascetur ridiculus mus</h3>\n<h4>Donec quam felis ultricies nec pellentesque eu \npretium quis sem nlla consequat massa quis enim</h4>\n<h5>Donec pede justo fringilla vel aliquet nec vulputate \neget arcu</h5>\n<h6>In enim justo rhoncus ut imperdiet a venenatis vitae \njusto</h6>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing \nelit. Aenean commodo ligula eget dolor. Aenean massa. \nCum sociis natoque penatibus et magnis dis parturient \nmontes, nascetur ridiculus mus. Donec quam felis, \nultricies nec, pellentesque eu, pretium quis, sem.</p>\n<article><p>This paragraph is nested inside an article. It contains many different, sometimes useful, <a href=\"https://www.w3schools.com/tags/\">HTML5 tags</a>. Of course there are classics like <em>emphasis</em>, <strong>strong</strong>, and <small>small</small> but there are many others as well. Hover the following text for abbreviation tag: <abbr title=\"abbreviation\">abbr</abbr>. Similarly, you can use acronym tag like this: <acronym title=\"For The Win\">ftw</acronym>. You can define <del>deleted text</del> which often gets replaced with <ins>inserted</ins> text.</p><p>You can also use <kbd>keyboard text</kbd>, which sometimes is styled similarly to the <code>&lt;code&gt;</code> or <samp>samp</samp> tags. Even more specifically, there is a tag just for <var>variables</var>. Not to be mistaken with blockquotes below, the quote tag lets you denote something as <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) tags.</p></article>\n\nWeight: -1000\n\nHideCodeBlock: display_none \n\nMarkupWrapperClasses: max-w_65\n\nStyleguide HTML.Unstyled\n\n*/\n\n/*\nACC Article\n\nMarkup:\n<div id=\"reading-typography\" class=\"reading-typography\">\n\t<h1>Article Title</h1>\n\t<p>Tricuspid regurgitation (TR) is a common valvular disease estimated to affect &gt;1.5 million people in the U.S., with a yearly incidence of about 200,000 and &gt;300,000 patients in the U.S and Europe, respectively.<sup>1</sup> Stated another way, a clinically significant form of this valvular disease affects 4% (or 1 in 25) of patients ages 75 and older.<sup>2</sup></p>\n\t<p>Despite the current guidelines favoring early tricuspid valve repair, especially when undergoing concomitant left-sided cardiac surgery, most patients with TR receive <a href=\"#\">lifetime medical</a> therapy until intractable right-sided heart failure (HF) and end-organ dysfunction appear.<sup>1</sup> In recent years, multiple studies have drawn attention to the poor prognosis of untreated TR, and demonstrated a clear tendency of excess mortality in patients with increasing severity of TR, highlighting the need for interventional options to improve outcomes.<sup>3</sup></p>\n\t<div class=\"aspect_1x1 font_0 max-w_25 relative float_right\">\n\t\t<div class=\"absolute flex flex_row l_0\">\n\t\t\t<div class=\"max-w_5\">\n\t\t\t\t<img src=\"https://www.acc.org//-/media/Non-Clinical/Images/2022/10/CARDIOLOGY/22/Weintraub-Bill-600x600.jpg\" alt=\"Bill Weintraub, MD, MACC\" class=\"br_3 br_accent br_circle br_solid m-b_2 shadow_overlap-bold w_100\">\n\t\t\t</div>\n\t\t\t<div class=\"m-l_n4 max-w_5\">\n\t\t\t\t<img src=\"https://www.acc.org//-/media/Non-Clinical/Images/2022/10/CARDIOLOGY/22/Weintraub-Bill-600x600.jpg\" alt=\"Bill Weintraub, MD, MACC\" class=\"br_3 br_accent br_circle br_solid m-b_2 shadow_overlap-bold w_100\">\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"circle__inner\">\n\t\t\t<div class=\"aspect_1x1 bg_acc br_circle circle__content circle__wrapper grid items_center justify_center p_4 radial-gradient_custom\" style=\"--origin: at center;\">\n\t\t\t\t<div class=\"c_white flex flex_column gap-y_4 p-x_5 p-y_4 text_center\">\n\t\t\t\t\t<i class=\"c_accent fa-quote-left fas font-size_up-2 m-b_n2\"></i><span class=\"font-size_up lh_2\">The future of medicine is increasingly in the hands of those who are effective users of clinical data.</span><i class=\"c_accent fa-quote-right fas font-size_up-2 m-t_n2\"></i>\n\t\t\t\t\t<cite class=\"font-size_down text_right\">– <strong>Bill Weintraub, MD, MACC</strong></cite>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<p>TR associated with left-sided valvular or myocardial disease is often a marker for late-stage chronic HF with limited treatment options and an unfavorable overall prognosis. However, isolated TR is also independently associated with excess mortality if left untreated. Thus, TR represents an important public health problem with an unmet clinical need.</p>\n\t<p>Surgical approaches, either repair or replacement, have been shown to carry a high risk of in-hospital mortality, reaching 10%, without significant improvement over the past 10 years.<sup>4</sup> As transcatheter interventional options for valvular heart disease continue to expand, transcatheter tricuspid valve repair through leaflet approximation or annuloplasty has been investigated.</p>\n\t<p>Despite studies showing promising results with greater survival and freedom from HF rehospitalization compared with conservative management, its use can be limited by anatomical infeasibility such as large leaflet coaptation gap, perforation, significant leaflet tethering with dense chordae, and leaflet impingement with a cardiac implantable electronic device lead.</p>\n\t<p>A myriad of investigational transcatheter tricuspid valve replacement (TTVR) devices have emerged as an alternative to surgery and to address this outstanding need, with promising early results related to safety, efficacy and improvements in patients' functional status and quality of life.</p>\n\t<h3>Orthotopic Valve Replacement</h3>\n\t<p>Orthotopic TTVR is a form of valve replacement performed by implanting a bioprosthetic valve on an existing tricuspid annulus, in a fashion similar to how it is performed in transcatheter aortic or mitral valve replacement. Several investigational devices are available with a variety of access and anchoring systems.</p>\n\t<h3>EVOQUE</h3>\n\t<p>The EVOQUE system (Edwards Lifesciences, Irvine, CA) is a self-expanding bovine pericardial valve mounted on a nitinol frame with a fabric skirt delivered through a transfemoral approach. The perimeter is surrounded by nine anchors that allow stabilization through anchoring to the annulus, leaflets and chords of the tricuspid apparatus. Its compassionate use in 27 patients with severe symptomatic TR at inoperable or high surgical risk has demonstrated 92% success with no periprocedural mortality.<sup>5</sup></p>\n\t<p>The reduction in TR remained excellent at one year (≤moderate in 96% and ≤mild in 87%) with sustained symptomatic improvement (NYHA I/II in 69% compared with 11% at baseline).<sup>5</sup> All-cause death and HF hospitalization at one year were both at 7% without any deaths being identified as device-related. An early feasibility trial of this device, TRISCEND, is ongoing with an early report of 56 patients demonstrating a similar success rate, reduction in TR and symptomatic improvement.<sup>6</sup></p>\n\t<h3>Lux-Valve</h3>\n\t<p>The Lux-Valve (Jenscare Biotechnology Co., Ningbo, China) is a bovine pericardium valve with a self-expanding nitinol atrial disc, self-adaptive fabric skirt, two graspers and an interventricular septal anchor. It is deployed via a minimally invasive right thoracotomy and transatrial approach. First-in-human experience including 31 patients reported a 100% technical success rate with TR reduction to ≤moderate and ≤mild in 100% and 85.2%, respectively at one year. Symptomatic improvement has persisted at one year with 82.8% maintaining NYHA I/II and a 96.8% survival rate.<sup>7</sup> A study investigating the second-generation LuX-Valve Plus delivered through transjugular access is currently underway (NCT05436028).</p>\n\t<h3>GATE</h3>\n\t<p>The GATE (NaviGate Cardiac Structures, Inc., Lake Forest, CA) device was the first TTVR performed and is composed of an equine pericardium tricuspid valve mounted on a nitinol alloy stent. Twelve right ventricular tines grasp the native leaflets and 12 right atrial winglets covered by microfiber polyester cloth provide a seal. It is delivered through a right thoracotomy and transatrial access. An early study including five patients reported 100% technical success, with all patients demonstrating TR reduction to ≤mild; however, one patient died before discharge.<sup>8</sup></p>\n\t<div class=\"c_white color_inherit float_right lh_2 linear-gradient_custom m-l_5:md m-t_0:md m-y_5 p_4 reading-typography w_100 w_55:md\" style=\"--start-color:hsl(315deg 67% 37%);--end-color:hsl(292deg 68% 24%);\">\n\t\t<h2>Prominent Stressors For CVD Among LGBTQIA+ Adults</h2>\n\t\t<p>Excess cardiovascular disease risk is associated with three categories of stressors, as described by the Minority Stress Model: psychosocial (depression, anxiety, stress); behavioral (diet quality, physical activity, substance use); and physiological (hypothalamic-pituitary-adrenal axis, chronic inflammation, autonomic nervous system&nbsp;dysfunction).<sup>4</sup></p>\n\t\t<p>Structural/institutional stressors are also in&nbsp;place. The Behavioral Risk Factor Surveillance System survey 2014-2017 found a higher rate of poverty in LGBT people compared with cisgender heterosexual people <a href=\"#21.pdf\" target=\"_blank\"> vs. 15.7%,&nbsp;respectively</a>).<sup>9</sup></p>\n\t\t<p>In 2018, a large portion of LGBTQIA+ individuals lived in states that did not have public accommodation (hospitals and schools) and employment nondiscrimination laws.<sup>10</sup></p>\n\t\t<p>For many transgender individuals, employee-sponsored health insurance is often not an option. Many employee-sponsored health insurance programs do not acknowledge partners or spouses with gender identities that align with the insured. More than two-thirds of gender minority adults report having experienced some form of discrimination from clinicians (including the use of abusive language). Roughly a quarter of transgender individuals have been denied health care by clinicians.<sup>11</sup></p>\n\t\t<h3>Cardiovascular Disease Risk Factors</h3>\n\t\t<p>The data on cardiovascular health in LGBTQIA+ adults are limited because of a lack of research and challenges with study design. In terms of cardiovascular disease risk factors, the use of tobacco products is more likely among LGBTQIA+ adults than cisgender heterosexual adults.<sup>12</sup> Alcohol and illicit drug use disorder, poor mental health and elevated body mass index are greater risk factors among sexual minority women than heterosexual women.<sup>13</sup> Current studies also suggest that decreased sleep duration, which has been associated with higher rates of hypertension, diabetes and cardiovascular disease, was higher among sexual minority women compared with heterosexual women.<sup>14</sup></p>\n\t</div>\n\t<h3>Cardiovalve</h3>\n\t<p>The Cardiovalve (Venus Medtech Inc., Hangzhou, China) is deployed through transfemoral access and consists of a bovine pericardial leaflet mounted on a dual nitinol atrial and ventricular frame creating 24 grasping points for anchoring. The atrial portion of the frame has a covered flange to allow sealing to prevent paravalvular leak. Its compassionate use has been reported in 15 patients demonstrating significant reduction in TR to ≤moderate in 100% and ≤mild in 8% at 30 days.<sup>9</sup> An early feasibility study is currently underway (NCT04100720).</p>\n\t<h3>Intrepid</h3>\n\t<p>The Intrepid (Medtronic Plc, Minneapolis, MN) is a transfemoral system with a bovine pericardial valve housed within a nitinol dual stent frame. Early experience with three patients reported technical success in all, and an early feasibility study is currently recruiting patients with a goal to include 15 patients (NCT04433065).<sup>10</sup></p>\n\t<div class=\"br-t_4 br_acc br_solid clear_both m-b_4\">\n\t\t<div class=\"row m-t_1\">\n\t\t\t<div class=\"col-sm-2 p-t_2\">\n\t\t\t\t<img src=\"https://www.acc.org//-/media/Non-Clinical/Images/2022/11/CARDIOLOGY/24/Ueyama-Hiroki-600x600.jpg\" alt=\"Hiroki Ueyama, MD\" class=\"w_100 br_circle\">\n\t\t\t</div>\n\t\t\t<div class=\"col-sm-2 p-t_2\">\n\t\t\t\t<img src=\"https://www.acc.org//-/media/Non-Clinical/Images/2022/11/CARDIOLOGY/24/Byku-Isida-600x600.jpg\" alt=\"Isida Byku, MD, FACC\" class=\"w_100 br_circle\">\n\t\t\t</div>\n\t\t\t<div class=\"col-sm-8\">\n\t\t\t\t<p>This article was authored by <strong>Hiroki Ueyama, MD</strong>, and <strong>Isida Byku, MD, FACC</strong>, from the Division of Cardiology, Emory Structural Heart and Valve Center, Emory University Hospital Midtown, in Atlanta, GA.</p>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t<h2>References</h2>\n\t<ol>\n\t\t<li>Asmarats L, Puri R, Latib A, Navia JL, Rodés-Cabau J. Transcatheter tricuspid valve interventions: Landscape, challenges, and future directions. <em>J Am Coll Cardiol</em> 2018;71:2935-56.</li>\n\t\t<li>Topilsky Y, Maltais S, Medina Inojosa J, et al. Burden of Tricuspid regurgitation in patients diagnosed in the community setting. <em>JACC Cardiovasc Imaging</em> 2019;12:433-42.</li>\n\t\t<li>Taramasso M, Benfari G, van der Bijl P, et al. Transcatheter versus medical treatment of patients with symptomatic severe tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2019;74:2998-3008.</li>\n\t\t<li>Dreyfus J, Flagiello M, Bazire B, et al. Isolated tricuspid valve surgery: Impact of aetiology and clinical presentation on outcomes. <em>Eur Heart J</em> 2020;41:4304-17.</li>\n\t\t<li>Webb JG, Chuang AM, Meier D, et al. Transcatheter Tricuspid valve replacement with the evoque system: 1-year outcomes of a multicenter, first-in-human experience. <em>JACC Cardiovasc Interv</em> 2022;15:481-91.</li>\n\t\t<li>Kodali S, Hahn RT, George I, et al. Transfemoral tricuspid valve replacement in patients with tricuspid regurgitation: TRISCEND study 30-Day results. <em>JACC Cardiovasc Interv</em> 2022;15:471-80.</li>\n\t\t<li>Modine T. Transcatheter tricuspid valve replacement with the LuX-Valve system 1-Year results of a multicenter FIH experience. Presented at TVT 2022, June 8, 2022.</li>\n\t\t<li>Hahn RT, George I, Kodali SK, et al. Early Single-site experience with transcatheter tricuspid valve replacement. <em>JACC Cardiovasc Imaging</em> 2019;12:416-29.</li>\n\t\t<li>Fam NP. Cardiovalve TTVR update. Presented at TVT 2022, June 8, 2022.</li>\n\t\t<li>Bapat VN. The INTREPID Valve for severe tricuspid regurgitation: First-in-man case experience. Presented at TCT 2020.</li>\n\t\t<li>Lauten A, Figulla HR, Unbehaun A, et al. Interventional treatment of severe tricuspid regurgitation: Early clinical experience in a multicenter, observational, first-in-man study. <em>Circ Cardiovasc Interv</em> 2018;11:e006061.</li>\n\t\t<li>Dreger H, Mattig I, Hewing B, et al. Treatment of severe tricuspid regurgitation in patients with advanced heart failure with CAval Vein Implantation of the Edwards Sapien XT VALve (TRICAVAL): a randomised controlled trial. <em>EuroIntervention</em> 2020;15:1506-13.</li>\n\t\t<li>Lauten A, Doenst T, Hamadanchi A, Franz M, Figulla HR. Percutaneous bicaval valve implantation for transcatheter treatment of tricuspid regurgitation: clinical observations and 12-month follow-up. <em>Circ Cardiovasc Interv</em> 2014;7:268-72.</li>\n\t\t<li>Wild MG, Lubos E, Cruz-Gonzalez I, et al. Early clinical experience with the TRICENTO bicaval valved stent for treatment of symptomatic severe tricuspid regurgitation: A multicenter registry. <em>Circ Cardiovasc Interv</em> 2022;15:e011302.</li>\n\t\t<li>Lurz P, von Bardeleben R, Weber M, et al. Transcatheter edge-to-edge repair for treatment of tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2021;77:229-39.</li>\n\t\t<li>Hahn RT. Transcatheter tricuspid valve repair:CLASP TR study one-year results. . Presented at EuroPCR 2022.</li>\n\t\t<li>Kodali S, Hahn RT, Eleid MF, et al. Feasibility study of the transcatheter valve repair system for severe tricuspid regurgitation. <em>J Am Coll Cardiol</em> 2021;77:345-56.</li>\n\t\t<li>Zack CJ, Fender EA, Chandrashekar P, et al. National trends and outcomes in isolated tricuspid valve surgery. <em>J Am Coll Cardiol</em> 2017;70:2953-60.</li>\n\t</ol>\n</div>\n\nMarkupWrapperClasses: max-w_60\n\nHideCodeBlock: display_none \n\nWeight:100\n\nStyleguide HTML.RealArticle\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\nBootstrap 5 is a complete UI framework with many features. Please familiarize yourself with bootstrap framework as you build. It will give you access to grid, forms and other UI items. https://getbootstrap.com/\n\nWeight: -50\n\nStyleguide  Bootstrap\n*/\n\n\n\n/*\n\nTypography\n\nThe collection of typography when using the bootstrap foundation of arches.\n\nMarkup:\n<article class=\"m-y_3\" id=\"typography\"><div><div class=\"bd-example\"><p class=\"display-1\">Display 1</p><p class=\"display-2\">Display 2</p><p class=\"display-3\">Display 3</p><p class=\"display-4\">Display 4</p><p class=\"display-5\">Display 5</p><p class=\"display-6\">Display 6</p></div><div class=\"bd-example\"><p class=\"h1\">Heading 1</p><p class=\"h2\">Heading 2</p><p class=\"h3\">Heading 3</p><p class=\"h4\">Heading 4</p><p class=\"h5\">Heading 5</p><p class=\"h6\">Heading 6</p></div><div class=\"bd-example\"><p class=\"lead\">This is a lead paragraph. It stands out from regular paragraphs.</p></div><div class=\"bd-example\"><p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined.</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p></div><div class=\"bd-example\"><blockquote class=\"blockquote\"><p>A well-known quote, contained in a blockquote element.</p><footer class=\"blockquote-footer\">Someone famous in <cite title=\"Source Title\">Source Title</cite></footer></blockquote></div><div class=\"bd-example\"><ul class=\"list-unstyled\"><li>This is a list.</li><li>It appears completely unstyled.</li><li>Structurally, it's still a list.</li><li>However, this style only applies to immediate child elements.</li><li>Nested lists:<ul><li>are unaffected by this style</li><li>will still show a bullet</li><li>and have appropriate left margin</li></ul></li><li>This may still come in handy in some situations.</li></ul></div><div class=\"bd-example\"><ul class=\"list-inline\"><li class=\"list-inline-item\">This is a list item.</li><li class=\"list-inline-item\">And another one.</li><li class=\"list-inline-item\">But they're displayed inline.</li></ul></div></div></article><article class=\"m-y_3\" id=\"images\"><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>Images</h3><a class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/content/images/\">Documentation</a></div><div><div class=\"bd-example\"><svg class=\"bd-placeholder-img bd-placeholder-img-lg img-fluid\" width=\"100%\" height=\"250\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: Responsive image\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"><title>Placeholder</title><rect width=\"100%\" height=\"100%\" fill=\"#868e96\"></rect><text x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\">Responsive image</text></svg></div><div class=\"bd-example\"><svg class=\"bd-placeholder-img img-thumbnail\" width=\"200\" height=\"200\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width=\"100%\" height=\"100%\" fill=\"#868e96\"></rect><text x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\">200x200</text></svg></div></div></article>\n\nWeight: 100\n\nStyleguide  Bootstrap.Typography\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><tr class=\"table-light\"><th scope=\"row\">Light</th><td>Cell</td><td>Cell</td></tr><tr class=\"table-dark\"><th scope=\"row\">Dark</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><article class=\"m-y_3\" id=\"figures\"><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>Figures</h3><a class=\"d-flex align-items-center\" href=\"https://getbootstrap.com/docs/5.0/content/figures/\">Documentation</a></div><div><div class=\"bd-example\"><figure class=\"figure\"><svg class=\"bd-placeholder-img figure-img img-fluid rounded\" width=\"400\" height=\"300\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Placeholder: 400x300\" preserveAspectRatio=\"xMidYMid slice\" focusable=\"false\"><title>Placeholder</title><rect width=\"100%\" height=\"100%\" fill=\"#868e96\"></rect><text x=\"50%\" y=\"50%\" fill=\"#dee2e6\" dy=\".3em\">400x300</text></svg><figcaption class=\"figure-caption\">A caption for the above image.</figcaption></figure></div></div></article>\n\n\n\nWeight: 500\n\nStyleguide  Bootstrap.Table\n*/\n\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/*\nComponents \n \nOut of the box html components from bootstrap\n \nMarkup:\n<section id=\"components\">\n    <article class=\"m-y_3\"\n             id=\"accordion\">\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 m-t_5 m-b_3 \">\n            <h3>Accordion</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/accordion/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"accordion\"\n                     id=\"accordionExample\">\n                    <div class=\"accordion-item\">\n                        <h4 class=\"accordion-header\"\n                            id=\"headingOne\"><button\n                                    class=\"accordion-button\"\n                                    type=\"button\"\n                                    data-bs-toggle=\"collapse\"\n                                    data-bs-target=\"#collapseOne\"\n                                    aria-expanded=\"true\"\n                                    aria-controls=\"collapseOne\">Accordion\n                                Item #1</button></h4>\n                        <div id=\"collapseOne\"\n                             class=\"accordion-collapse collapse show\"\n                             aria-labelledby=\"headingOne\"\n                             data-bs-parent=\"#accordionExample\">\n                            <div class=\"accordion-body\">\n                                <strong>This is the first\n                                    item's accordion\n                                    body.</strong> It is\n                                hidden by default, until the\n                                collapse plugin adds the\n                                appropriate classes that we\n                                use to style each element.\n                                These classes control the\n                                overall appearance, as well\n                                as the showing and hiding\n                                via CSS transitions. You can\n                                modify any of this with\n                                custom CSS or overriding our\n                                default variables. It's also\n                                worth noting that just about\n                                any HTML can go within the\n                                <code>.accordion-body</code>,\n                                though the transition does\n                                limit overflow.</div>\n                        </div>\n                    </div>\n                    <div class=\"accordion-item\">\n                        <h4 class=\"accordion-header\"\n                            id=\"headingTwo\"><button\n                                    class=\"accordion-button collapsed\"\n                                    type=\"button\"\n                                    data-bs-toggle=\"collapse\"\n                                    data-bs-target=\"#collapseTwo\"\n                                    aria-expanded=\"false\"\n                                    aria-controls=\"collapseTwo\">Accordion\n                                Item #2</button></h4>\n                        <div id=\"collapseTwo\"\n                             class=\"accordion-collapse collapse\"\n                             aria-labelledby=\"headingTwo\"\n                             data-bs-parent=\"#accordionExample\">\n                            <div class=\"accordion-body\">\n                                <strong>This is the second\n                                    item's accordion\n                                    body.</strong> It is\n                                hidden by default, until the\n                                collapse plugin adds the\n                                appropriate classes that we\n                                use to style each element.\n                                These classes control the\n                                overall appearance, as well\n                                as the showing and hiding\n                                via CSS transitions. You can\n                                modify any of this with\n                                custom CSS or overriding our\n                                default variables. It's also\n                                worth noting that just about\n                                any HTML can go within the\n                                <code>.accordion-body</code>,\n                                though the transition does\n                                limit overflow.</div>\n                        </div>\n                    </div>\n                    <div class=\"accordion-item\">\n                        <h4 class=\"accordion-header\"\n                            id=\"headingThree\"><button\n                                    class=\"accordion-button collapsed\"\n                                    type=\"button\"\n                                    data-bs-toggle=\"collapse\"\n                                    data-bs-target=\"#collapseThree\"\n                                    aria-expanded=\"false\"\n                                    aria-controls=\"collapseThree\">Accordion\n                                Item #3</button></h4>\n                        <div id=\"collapseThree\"\n                             class=\"accordion-collapse collapse\"\n                             aria-labelledby=\"headingThree\"\n                             data-bs-parent=\"#accordionExample\">\n                            <div class=\"accordion-body\">\n                                <strong>This is the third\n                                    item's accordion\n                                    body.</strong> It is\n                                hidden by default, until the\n                                collapse plugin adds the\n                                appropriate classes that we\n                                use to style each element.\n                                These classes control the\n                                overall appearance, as well\n                                as the showing and hiding\n                                via CSS transitions. You can\n                                modify any of this with\n                                custom CSS or overriding our\n                                default variables. It's also\n                                worth noting that just about\n                                any HTML can go within the\n                                <code>.accordion-body</code>,\n                                though the transition does\n                                limit overflow.</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"alerts\">\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 m-t_5 m-b_3 \">\n            <h3>Alerts</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/alerts/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"alert alert-primary alert-dismissible fade show\"\n                     role=\"alert\">A simple primary alert\n                    with <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-secondary alert-dismissible fade show\"\n                     role=\"alert\">A simple secondary alert\n                    with <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-success alert-dismissible fade show\"\n                     role=\"alert\">A simple success alert\n                    with <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-alert alert-dismissible fade show\"\n                     role=\"alert\">A simple alert alert with\n                    <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-warning alert-dismissible fade show\"\n                     role=\"alert\">A simple warning alert\n                    with <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-info alert-dismissible fade show\"\n                     role=\"alert\">A simple info alert with\n                    <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-light alert-dismissible fade show\"\n                     role=\"alert\">A simple light alert with\n                    <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n                <div class=\"alert alert-dark alert-dismissible fade show\"\n                     role=\"alert\">A simple dark alert with\n                    <a href=\"#\"\n                       class=\"alert-link\">an example\n                        link</a>. Give it a click if you\n                    like. <button type=\"button\"\n                            class=\"btn-close\"\n                            data-bs-dismiss=\"alert\"\n                            aria-label=\"Close\"></button>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"alert alert-success\"\n                     role=\"alert\">\n                    <h4 class=\"alert-heading\">Well done!\n                    </h4>\n                    <p>Aww yeah, you successfully read this\n                        important alert message. This\n                        example text is going to run a bit\n                        longer so that you can see how\n                        spacing within an alert works with\n                        this kind of content.</p>\n                    <hr>\n                    <p class=\"mb-0\">Whenever you need to, be\n                        sure to use margin utilities to keep\n                        things nice and tidy.</p>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"badge\">\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 m-t_5 m-b_3 \">\n            <h3>Badge</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/badge/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <p class=\"h1\">Example heading <span\n                          class=\"badge bg_primary\">New</span>\n                </p>\n                <p class=\"h2\">Example heading <span\n                          class=\"badge bg_secondary\">New</span>\n                </p>\n                <p class=\"h3\">Example heading <span\n                          class=\"badge bg_success\">New</span>\n                </p>\n                <p class=\"h4\">Example heading <span\n                          class=\"badge bg_alert\">New</span>\n                </p>\n                <p class=\"h5\">Example heading <span\n                          class=\"badge bg_warning c_dark\">New</span>\n                </p>\n                <p class=\"h6\">Example heading <span\n                          class=\"badge bg_info c_dark\">New</span>\n                </p>\n                <p class=\"h6\">Example heading <span\n                          class=\"badge bg_light c_dark\">New</span>\n                </p>\n                <p class=\"h6\">Example heading <span\n                          class=\"badge bg_dark\">New</span>\n                </p>\n            </div>\n            <div class=\"bd-example\"><span\n                      class=\"badge rounded-pill bg_primary\">Primary</span>\n                <span\n                      class=\"badge rounded-pill bg_secondary\">Secondary</span>\n                <span\n                      class=\"badge rounded-pill bg_success\">Success</span>\n                <span\n                      class=\"badge rounded-pill bg_alert\">alert</span>\n                <span\n                      class=\"badge rounded-pill bg_warning c_dark\">Warning</span>\n                <span\n                      class=\"badge rounded-pill bg_info c_dark\">Info</span>\n                <span\n                      class=\"badge rounded-pill bg_light c_dark\">Light</span>\n                <span\n                      class=\"badge rounded-pill bg_dark\">Dark</span>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"breadcrumb\">\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 m-t_5 m-b_3 \">\n            <h3>Breadcrumb</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/breadcrumb/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <nav aria-label=\"breadcrumb\">\n                    <ol class=\"breadcrumb\">\n                        <li class=\"breadcrumb-item\"><a\n                               href=\"#\">Home</a></li>\n                        <li class=\"breadcrumb-item\"><a\n                               href=\"#\">Library</a></li>\n                        <li class=\"breadcrumb-item active\"\n                            aria-current=\"page\">Data</li>\n                    </ol>\n                </nav>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"buttons\">\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 m-t_5 m-b_3 \">\n            <h3>Buttons</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/buttons/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-primary\">Primary</button>\n                <button type=\"button\"\n                        class=\"btn btn-secondary\">Secondary</button>\n                <button type=\"button\"\n                        class=\"btn btn-success\">Success</button>\n                <button type=\"button\"\n                        class=\"btn btn-alert\">alert</button>\n                <button type=\"button\"\n                        class=\"btn btn-warning\">Warning</button>\n                <button type=\"button\"\n                        class=\"btn btn-info\">Info</button>\n                <button type=\"button\"\n                        class=\"btn btn-link\">Link</button>\n            </div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-outline-primary\">Primary</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-secondary\">Secondary</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-success\">Success</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-alert\">alert</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-warning\">Warning</button>\n                <button type=\"button\"\n                        class=\"btn btn-outline-info\">Info</button>\n            </div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-primary btn-sm\">Small\n                    button</button> <button type=\"button\"\n                        class=\"btn btn-primary\">Standard\n                    button</button> <button type=\"button\"\n                        class=\"btn btn-primary btn-lg\">Large\n                    button</button></div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"button-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 m-t_5 m-b_3 \">\n            <h3>Button group</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/button-group/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"btn-toolbar\"\n                     role=\"toolbar\"\n                     aria-label=\"Toolbar with button groups\">\n                    <div class=\"btn-group m_3\"\n                         role=\"group\"\n                         aria-label=\"First group\"><button\n                                type=\"button\"\n                                class=\"btn btn-secondary\">1</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">2</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">3</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">4</button>\n                    </div>\n                    <div class=\"btn-group m_3\"\n                         role=\"group\"\n                         aria-label=\"Second group\"><button\n                                type=\"button\"\n                                class=\"btn btn-secondary\">5</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">6</button>\n                        <button type=\"button\"\n                                class=\"btn btn-secondary\">7</button>\n                    </div>\n                    <div class=\"btn-group\"\n                         role=\"group\"\n                         aria-label=\"Third group\"><button\n                                type=\"button\"\n                                class=\"btn btn-secondary\">8</button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"card\">\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 m-t_5 m-b_3 \">\n            <h3>Card</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/card/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div\n                     class=\"row row_cols-1 row_cols-md-2 g-4\">\n                    <div class=\"col\">\n                        <div class=\"card\"><svg\n                                 class=\"bd-placeholder-img card-img-top\"\n                                 width=\"100%\"\n                                 height=\"180\"\n                                 xmlns=\"http://www.w3.org/2000/svg\"\n                                 role=\"img\"\n                                 aria-label=\"Placeholder: Image cap\"\n                                 preserveAspectRatio=\"xMidYMid slice\"\n                                 focusable=\"false\">\n                                <title>Placeholder</title>\n                                <rect width=\"100%\"\n                                      height=\"100%\"\n                                      fill=\"#868e96\"></rect>\n                                <text x=\"50%\"\n                                      y=\"50%\"\n                                      fill=\"#dee2e6\"\n                                      dy=\".3em\">Image\n                                    cap</text>\n                            </svg>\n                            <div class=\"card-body\">\n                                <h5 class=\"card-title\">Card\n                                    title</h5>\n                                <p class=\"card-text\">Some\n                                    quick example text to\n                                    build on the card title\n                                    and make up the bulk of\n                                    the card's content.</p>\n                                <a href=\"#\"\n                                   class=\"btn btn-primary\">Go\n                                    somewhere</a>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"col\">\n                        <div class=\"card\">\n                            <div class=\"card-header\">\n                                Featured</div>\n                            <div class=\"card-body\">\n                                <h5 class=\"card-title\">Card\n                                    title</h5>\n                                <p class=\"card-text\">Some\n                                    quick example text to\n                                    build on the card title\n                                    and make up the bulk of\n                                    the card's content.</p>\n                                <a href=\"#\"\n                                   class=\"btn btn-primary\">Go\n                                    somewhere</a>\n                            </div>\n                            <div\n                                 class=\"card-footer c_muted\">\n                                2 days ago</div>\n                        </div>\n                    </div>\n                    <div class=\"col\">\n                        <div class=\"card\">\n                            <div class=\"card-body\">\n                                <h5 class=\"card-title\">Card\n                                    title</h5>\n                                <p class=\"card-text\">Some\n                                    quick example text to\n                                    build on the card title\n                                    and make up the bulk of\n                                    the card's content.</p>\n                            </div>\n                            <ul\n                                class=\"list-group list-group-flush\">\n                                <li class=\"list-group-item\">\n                                    An item</li>\n                                <li class=\"list-group-item\">\n                                    A second item</li>\n                                <li class=\"list-group-item\">\n                                    A third item</li>\n                            </ul>\n                            <div class=\"card-body\"><a\n                                   href=\"#\"\n                                   class=\"card-link\">Card\n                                    link</a> <a href=\"#\"\n                                   class=\"card-link\">Another\n                                    link</a></div>\n                        </div>\n                    </div>\n                    <div class=\"col\">\n                        <div class=\"card\">\n                            <div class=\"row g-0\">\n                                <div class=\"col-md-4\"><svg\n                                         class=\"bd-placeholder-img\"\n                                         width=\"100%\"\n                                         height=\"250\"\n                                         xmlns=\"http://www.w3.org/2000/svg\"\n                                         role=\"img\"\n                                         aria-label=\"Placeholder: Image\"\n                                         preserveAspectRatio=\"xMidYMid slice\"\n                                         focusable=\"false\">\n                                        <title>Placeholder\n                                        </title>\n                                        <rect width=\"100%\"\n                                              height=\"100%\"\n                                              fill=\"#868e96\">\n                                        </rect><text x=\"50%\"\n                                              y=\"50%\"\n                                              fill=\"#dee2e6\"\n                                              dy=\".3em\">Image</text>\n                                    </svg></div>\n                                <div class=\"col-md-8\">\n                                    <div class=\"card-body\">\n                                        <h5\n                                            class=\"card-title\">\n                                            Card title</h5>\n                                        <p\n                                           class=\"card-text\">\n                                            This is a wider\n                                            card with\n                                            supporting text\n                                            below as a\n                                            natural lead-in\n                                            to additional\n                                            content. This\n                                            content is a\n                                            little bit\n                                            longer.</p>\n                                        <p\n                                           class=\"card-text\">\n                                            <small\n                                                   class=\"c_muted\">Last\n                                                updated 3\n                                                mins\n                                                ago</small>\n                                        </p>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"carousel\">\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 m-t_5 m-b_3 \">\n            <h3>Carousel</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/carousel/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div id=\"carouselExampleCaptions\"\n                     class=\"carousel slide\"\n                     data-bs-ride=\"carousel\">\n                    <div class=\"carousel-indicators\"><button\n                                type=\"button\"\n                                data-bs-target=\"#carouselExampleCaptions\"\n                                data-bs-slide-to=\"0\"\n                                class=\"active\"\n                                aria-current=\"true\"\n                                aria-label=\"Slide 1\"></button>\n                        <button type=\"button\"\n                                data-bs-target=\"#carouselExampleCaptions\"\n                                data-bs-slide-to=\"1\"\n                                aria-label=\"Slide 2\"></button>\n                        <button type=\"button\"\n                                data-bs-target=\"#carouselExampleCaptions\"\n                                data-bs-slide-to=\"2\"\n                                aria-label=\"Slide 3\"></button>\n                    </div>\n                    <div class=\"carousel-inner\">\n                        <div class=\"carousel-item active\">\n                            <svg class=\"bd-placeholder-img bd-placeholder-img-lg d-block w_100\"\n                                 width=\"800\"\n                                 height=\"400\"\n                                 xmlns=\"http://www.w3.org/2000/svg\"\n                                 role=\"img\"\n                                 aria-label=\"Placeholder: First slide\"\n                                 preserveAspectRatio=\"xMidYMid slice\"\n                                 focusable=\"false\">\n                                <title>Placeholder</title>\n                                <rect width=\"100%\"\n                                      height=\"100%\"\n                                      fill=\"#777\"></rect>\n                                <text x=\"50%\"\n                                      y=\"50%\"\n                                      fill=\"#555\"\n                                      dy=\".3em\">First\n                                    slide</text>\n                            </svg>\n                            <div\n                                 class=\"carousel-caption d-none d-md-block\">\n                                <h5>First slide label</h5>\n                                <p>Some representative\n                                    placeholder content for\n                                    the first slide.</p>\n                            </div>\n                        </div>\n                        <div class=\"carousel-item\"><svg\n                                 class=\"bd-placeholder-img bd-placeholder-img-lg d-block w_100\"\n                                 width=\"800\"\n                                 height=\"400\"\n                                 xmlns=\"http://www.w3.org/2000/svg\"\n                                 role=\"img\"\n                                 aria-label=\"Placeholder: Second slide\"\n                                 preserveAspectRatio=\"xMidYMid slice\"\n                                 focusable=\"false\">\n                                <title>Placeholder</title>\n                                <rect width=\"100%\"\n                                      height=\"100%\"\n                                      fill=\"#666\"></rect>\n                                <text x=\"50%\"\n                                      y=\"50%\"\n                                      fill=\"#444\"\n                                      dy=\".3em\">Second\n                                    slide</text>\n                            </svg>\n                            <div\n                                 class=\"carousel-caption d-none d-md-block\">\n                                <h5>Second slide label</h5>\n                                <p>Some representative\n                                    placeholder content for\n                                    the second slide.</p>\n                            </div>\n                        </div>\n                        <div class=\"carousel-item\"><svg\n                                 class=\"bd-placeholder-img bd-placeholder-img-lg d-block w_100\"\n                                 width=\"800\"\n                                 height=\"400\"\n                                 xmlns=\"http://www.w3.org/2000/svg\"\n                                 role=\"img\"\n                                 aria-label=\"Placeholder: Third slide\"\n                                 preserveAspectRatio=\"xMidYMid slice\"\n                                 focusable=\"false\">\n                                <title>Placeholder</title>\n                                <rect width=\"100%\"\n                                      height=\"100%\"\n                                      fill=\"#555\"></rect>\n                                <text x=\"50%\"\n                                      y=\"50%\"\n                                      fill=\"#333\"\n                                      dy=\".3em\">Third\n                                    slide</text>\n                            </svg>\n                            <div\n                                 class=\"carousel-caption d-none d-md-block\">\n                                <h5>Third slide label</h5>\n                                <p>Some representative\n                                    placeholder content for\n                                    the third slide.</p>\n                            </div>\n                        </div>\n                    </div><button\n                            class=\"carousel-control-prev\"\n                            type=\"button\"\n                            data-bs-target=\"#carouselExampleCaptions\"\n                            data-bs-slide=\"prev\"><span\n                              class=\"carousel-control-prev-icon\"\n                              aria-hidden=\"true\"></span>\n                        <span\n                              class=\"visually-hidden\">Previous</span></button>\n                    <button class=\"carousel-control-next\"\n                            type=\"button\"\n                            data-bs-target=\"#carouselExampleCaptions\"\n                            data-bs-slide=\"next\"><span\n                              class=\"carousel-control-next-icon\"\n                              aria-hidden=\"true\"></span>\n                        <span\n                              class=\"visually-hidden\">Next</span></button>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"dropdowns\">\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 m-t_5 m-b_3 \">\n            <h3>Dropdowns</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/dropdowns/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example flex\">\n                <div\n                     class=\"btn-group w_100 flex_wrap\">\n                    <div class=\"dropdown\"><button\n                                class=\"btn btn-secondary btn-sm dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropdownMenuButtonSM\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropdown\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropdownMenuButtonSM\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                    <div class=\"dropdown\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropdownMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropdown\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropdownMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                    <div class=\"dropdown\"><button\n                                class=\"btn btn-secondary btn-lg dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropdownMenuButtonLG\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropdown\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropdownMenuButtonLG\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-primary\">Primary</button>\n                    <button type=\"button\"\n                            class=\"btn btn-primary dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-secondary\">Secondary</button>\n                    <button type=\"button\"\n                            class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-success\">Success</button>\n                    <button type=\"button\"\n                            class=\"btn btn-success dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-info\">Info</button>\n                    <button type=\"button\"\n                            class=\"btn btn-info dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-warning\">Warning</button>\n                    <button type=\"button\"\n                            class=\"btn btn-warning dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n                <div class=\"btn-group\"><button type=\"button\"\n                            class=\"btn btn-alert\">alert</button>\n                    <button type=\"button\"\n                            class=\"btn btn-alert dropdown-toggle dropdown-toggle-split\"\n                            data-bs-toggle=\"dropdown\"\n                            aria-expanded=\"false\"><span\n                              class=\"visually-hidden\">Toggle\n                            Dropdown</span></button>\n                    <ul class=\"dropdown-menu\">\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Action</a></li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Another action</a>\n                        </li>\n                        <li><a class=\"dropdown-item\"\n                               href=\"#\">Something else\n                                here</a></li>\n                    </ul>\n                </div><!-- /btn-group -->\n            </div>\n            <div class=\"bd-example\">\n                <div\n                     class=\"btn-group w_100 align-items-center justify-content-between flex-wrap\">\n                    <div class=\"dropend\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropendMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropend\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropendMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                    <div class=\"dropup\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropupMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropup\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropupMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                    <div class=\"dropstart\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropstartMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">Dropstart\n                            button</button>\n                        <ul class=\"dropdown-menu\"\n                            aria-labelledby=\"dropstartMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Something else\n                                    here</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"btn-group\">\n                    <div class=\"dropdown\"><button\n                                class=\"btn btn-secondary dropdown-toggle\"\n                                type=\"button\"\n                                id=\"dropdownRightMenuButton\"\n                                data-bs-toggle=\"dropdown\"\n                                aria-expanded=\"false\">End-aligned\n                            menu</button>\n                        <ul class=\"dropdown-menu dropdown-menu-end\"\n                            aria-labelledby=\"dropdownRightMenuButton\">\n                            <li>\n                                <h6 class=\"dropdown-header\">\n                                    Dropdown header</h6>\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Action</a></li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Another\n                                    action</a></li>\n                            <li>\n                                <hr\n                                    class=\"dropdown-divider\">\n                            </li>\n                            <li><a class=\"dropdown-item\"\n                                   href=\"#\">Separated\n                                    link</a></li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"list-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 m-t_5 m-b_3 \">\n            <h3>List group</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/list-group/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <ul class=\"list-group\">\n                    <li class=\"list-group-item disabled\"\n                        aria-disabled=\"true\">A disabled item\n                    </li>\n                    <li class=\"list-group-item\">A second\n                        item</li>\n                    <li class=\"list-group-item\">A third item\n                    </li>\n                    <li class=\"list-group-item\">A fourth\n                        item</li>\n                    <li class=\"list-group-item\">And a fifth\n                        one</li>\n                </ul>\n            </div>\n            <div class=\"bd-example\">\n                <ul class=\"list-group list-group-flush\">\n                    <li class=\"list-group-item\">An item</li>\n                    <li class=\"list-group-item\">A second\n                        item</li>\n                    <li class=\"list-group-item\">A third item\n                    </li>\n                    <li class=\"list-group-item\">A fourth\n                        item</li>\n                    <li class=\"list-group-item\">And a fifth\n                        one</li>\n                </ul>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"list-group\"><a href=\"#\"\n                       class=\"list-group-item list-group-item-action\">A\n                        simple default list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-primary\">A\n                        simple primary list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-secondary\">A\n                        simple secondary list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-success\">A\n                        simple success list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-alert\">A\n                        simple alert list group item</a> <a\n                       href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-warning\">A\n                        simple warning list group item</a>\n                    <a href=\"#\"\n                       class=\"list-group-item list-group-item-action list-group-item-info\">A\n                        simple info list group item</a>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"modal\">\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 m-t_5 m-b_3 \">\n            <h3>Modal</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/modal/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div\n                     class=\"d-flex justify-content-between flex-wrap\">\n                    <button type=\"button\"\n                            class=\"btn btn-primary\"\n                            data-bs-toggle=\"modal\"\n                            data-bs-target=\"#exampleModalDefault\">Launch\n                        demo modal</button> <button\n                            type=\"button\"\n                            class=\"btn btn-primary\"\n                            data-bs-toggle=\"modal\"\n                            data-bs-target=\"#staticBackdropLive\">Launch\n                        static backdrop modal</button>\n                    <button type=\"button\"\n                            class=\"btn btn-primary\"\n                            data-bs-toggle=\"modal\"\n                            data-bs-target=\"#exampleModalCenteredScrollable\">Vertically\n                        centered scrollable modal</button>\n                    <button type=\"button\"\n                            class=\"btn btn-primary\"\n                            data-bs-toggle=\"modal\"\n                            data-bs-target=\"#exampleModalFullscreen\">Full\n                        screen</button></div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"navs\">\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 m-t_5 m-b_3 \">\n            <h3>Navs</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/navs-tabs/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <nav class=\"nav\"><a class=\"nav-link active\"\n                       aria-current=\"page\"\n                       href=\"#\">Active</a> <a\n                       class=\"nav-link\"\n                       href=\"#\">Link</a> <a class=\"nav-link\"\n                       href=\"#\">Link</a> <a\n                       class=\"nav-link disabled\"\n                       href=\"#\"\n                       tabindex=\"-1\"\n                       aria-disabled=\"true\">Disabled</a>\n                </nav>\n            </div>\n            <div class=\"bd-example\">\n                <nav>\n                    <div class=\"nav nav-tabs m-b_3\"\n                         id=\"nav-tab\"\n                         role=\"tablist\"><button\n                                class=\"nav-link active\"\n                                id=\"nav-home-tab\"\n                                data-bs-toggle=\"tab\"\n                                data-bs-target=\"#nav-home\"\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-controls=\"nav-home\"\n                                aria-selected=\"true\">Home</button>\n                        <button class=\"nav-link\"\n                                id=\"nav-profile-tab\"\n                                data-bs-toggle=\"tab\"\n                                data-bs-target=\"#nav-profile\"\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-controls=\"nav-profile\"\n                                aria-selected=\"false\">Profile</button>\n                        <button class=\"nav-link\"\n                                id=\"nav-contact-tab\"\n                                data-bs-toggle=\"tab\"\n                                data-bs-target=\"#nav-contact\"\n                                type=\"button\"\n                                role=\"tab\"\n                                aria-controls=\"nav-contact\"\n                                aria-selected=\"false\">Contact</button>\n                    </div>\n                </nav>\n                <div class=\"tab-content\"\n                     id=\"nav-tabContent\">\n                    <div class=\"tab-pane fade show active\"\n                         id=\"nav-home\"\n                         role=\"tabpanel\"\n                         aria-labelledby=\"nav-home-tab\">\n                        <p>Placeholder content for the tab\n                            panel. This one relates to the\n                            home tab. Takes you miles high,\n                            so high, 'cause she’s got that\n                            one international smile. There's\n                            a stranger in my bed, there's a\n                            pounding in my head. Oh, no. In\n                            another life I would make you\n                            stay. ‘Cause I, I’m capable of\n                            anything. Suiting up for my\n                            crowning battle. Used to steal\n                            your parents' liquor and climb\n                            to the roof. Tone, tan fit and\n                            ready, turn it up cause its\n                            gettin' heavy. Her love is like\n                            a drug. I guess that I forgot I\n                            had a choice.</p>\n                    </div>\n                    <div class=\"tab-pane fade\"\n                         id=\"nav-profile\"\n                         role=\"tabpanel\"\n                         aria-labelledby=\"nav-profile-tab\">\n                        <p>Placeholder content for the tab\n                            panel. This one relates to the\n                            profile tab. You got the finest\n                            architecture. Passport stamps,\n                            she's cosmopolitan. Fine, fresh,\n                            fierce, we got it on lock. Never\n                            planned that one day I'd be\n                            losing you. She eats your heart\n                            out. Your kiss is cosmic, every\n                            move is magic. I mean the ones,\n                            I mean like she's the one.\n                            Greetings loved ones let's take\n                            a journey. Just own the night\n                            like the 4th of July! But you'd\n                            rather get wasted.</p>\n                    </div>\n                    <div class=\"tab-pane fade\"\n                         id=\"nav-contact\"\n                         role=\"tabpanel\"\n                         aria-labelledby=\"nav-contact-tab\">\n                        <p>Placeholder content for the tab\n                            panel. This one relates to the\n                            contact tab. Her love is like a\n                            drug. All my girls vintage\n                            Chanel baby. Got a motel and\n                            built a fort out of sheets.\n                            'Cause she's the muse and the\n                            artist. (This is how we do) So\n                            you wanna play with magic. So\n                            just be sure before you give it\n                            all to me. I'm walking, I'm\n                            walking on air (tonight). Skip\n                            the talk, heard it all, time to\n                            walk the walk. Catch her if you\n                            can. Stinging like a bee I\n                            earned my stripes.</p>\n                    </div>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <ul class=\"nav nav-pills\">\n                    <li class=\"nav-item\"><a\n                           class=\"nav-link active\"\n                           aria-current=\"page\"\n                           href=\"#\">Active</a></li>\n                    <li class=\"nav-item\"><a class=\"nav-link\"\n                           href=\"#\">Link</a></li>\n                    <li class=\"nav-item\"><a class=\"nav-link\"\n                           href=\"#\">Link</a></li>\n                    <li class=\"nav-item\"><a\n                           class=\"nav-link disabled\"\n                           href=\"#\"\n                           tabindex=\"-1\"\n                           aria-disabled=\"true\">Disabled</a>\n                    </li>\n                </ul>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"pagination\">\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 m-t_5 m-b_3 \">\n            <h3>Pagination</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/pagination/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <nav aria-label=\"Pagination example\">\n                    <ul class=\"pagination pagination-sm\">\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">1</a></li>\n                        <li class=\"page-item active\"\n                            aria-current=\"page\"><a\n                               class=\"page-link\"\n                               href=\"#\">2</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">3</a></li>\n                    </ul>\n                </nav>\n            </div>\n            <div class=\"bd-example\">\n                <nav\n                     aria-label=\"Standard pagination example\">\n                    <ul class=\"pagination\">\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\"\n                               aria-label=\"Previous\"><span\n                                      aria-hidden=\"true\">«</span></a>\n                        </li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">1</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">2</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">3</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\"\n                               aria-label=\"Next\"><span\n                                      aria-hidden=\"true\">»</span></a>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n            <div class=\"bd-example\">\n                <nav\n                     aria-label=\"Another pagination example\">\n                    <ul\n                        class=\"pagination pagination-lg flex-wrap\">\n                        <li class=\"page-item disabled\"><a\n                               class=\"page-link\"\n                               href=\"#\"\n                               tabindex=\"-1\"\n                               aria-disabled=\"true\">Previous</a>\n                        </li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">1</a></li>\n                        <li class=\"page-item active\"\n                            aria-current=\"page\"><a\n                               class=\"page-link\"\n                               href=\"#\">2</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">3</a></li>\n                        <li class=\"page-item\"><a\n                               class=\"page-link\"\n                               href=\"#\">Next</a></li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"popovers\">\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 m-t_5 m-b_3 \">\n            <h3>Popovers</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/popovers/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-lg btn-alert\"\n                        data-bs-toggle=\"popover\"\n                        title=\"Popover title\"\n                        data-bs-content=\"And here's some amazing content. It's very engaging. Right?\">Click\n                    to toggle popover</button></div>\n            <div class=\"bd-example\"><button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-container=\"body\"\n                        data-bs-toggle=\"popover\"\n                        data-bs-placement=\"top\"\n                        data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\">Popover\n                    on top</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-container=\"body\"\n                        data-bs-toggle=\"popover\"\n                        data-bs-placement=\"right\"\n                        data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\">Popover\n                    on end</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-container=\"body\"\n                        data-bs-toggle=\"popover\"\n                        data-bs-placement=\"bottom\"\n                        data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\">Popover\n                    on bottom</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-container=\"body\"\n                        data-bs-toggle=\"popover\"\n                        data-bs-placement=\"left\"\n                        data-bs-content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\">Popover\n                    on start</button></div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"progress\">\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 m-t_5 m-b_3 \">\n            <h3>Progress</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/progress/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"progress m-b_3\">\n                    <div class=\"progress-bar\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"0\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">0%</div>\n                </div>\n                <div class=\"progress m-b_3\">\n                    <div class=\"progress-bar bg_success w_25\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"25\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">25%</div>\n                </div>\n                <div class=\"progress m-b_3\">\n                    <div class=\"progress-bar bg_info c_dark w_50\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"50\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">50%</div>\n                </div>\n                <div class=\"progress m-b_3\">\n                    <div class=\"progress-bar bg_warning c_dark w_75\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"75\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">75%</div>\n                </div>\n                <div class=\"progress\">\n                    <div class=\"progress-bar bg_alert w_100\"\n                         role=\"progressbar\"\n                         aria-valuenow=\"100\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\">100%</div>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"progress\">\n                    <div class=\"progress-bar\"\n                         role=\"progressbar\"\n                         style=\"width:15%\"\n                         aria-valuenow=\"15\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\"></div>\n                    <div class=\"progress-bar progress-bar-striped progress-bar-animated bg_success\"\n                         role=\"progressbar\"\n                         style=\"width:40%\"\n                         aria-valuenow=\"40\"\n                         aria-valuemin=\"0\"\n                         aria-valuemax=\"100\"></div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"scrollspy\">\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 m-t_5 m-b_3 \">\n            <h3>Scrollspy</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/scrollspy/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <nav id=\"navbar-example2\"\n                     class=\"navbar navbar-light bg_light px-3\">\n                    <a class=\"navbar-brand\"\n                       href=\"#\">Navbar</a>\n                    <ul class=\"nav nav-pills\">\n                        <li class=\"nav-item\"><a\n                               class=\"nav-link\"\n                               href=\"#fat\">@fat</a></li>\n                        <li class=\"nav-item\"><a\n                               class=\"nav-link\"\n                               href=\"#mdo\">@mdo</a></li>\n                        <li class=\"nav-item dropdown\"><a\n                               class=\"nav-link dropdown-toggle\"\n                               data-bs-toggle=\"dropdown\"\n                               href=\"#\"\n                               role=\"button\"\n                               aria-expanded=\"false\">Dropdown</a>\n                            <ul class=\"dropdown-menu\">\n                                <li><a class=\"dropdown-item\"\n                                       href=\"#one\">one</a>\n                                </li>\n                                <li><a class=\"dropdown-item\"\n                                       href=\"#two\">two</a>\n                                </li>\n                                <li>\n                                    <hr\n                                        class=\"dropdown-divider\">\n                                </li>\n                                <li><a class=\"dropdown-item\"\n                                       href=\"#three\">three</a>\n                                </li>\n                            </ul>\n                        </li>\n                    </ul>\n                </nav>\n                <div data-bs-spy=\"scroll\"\n                     data-bs-target=\"#navbar-example2\"\n                     data-bs-offset=\"0\"\n                     class=\"scrollspy-example\"\n                     tabindex=\"0\">\n                    <h4 id=\"fat\">@fat</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. You got the finest\n                        architecture. Passport stamps, she's\n                        cosmopolitan. Fine, fresh, fierce,\n                        we got it on lock. Never planned\n                        that one day I'd be losing you. She\n                        eats your heart out. Your kiss is\n                        cosmic, every move is magic. I mean\n                        the ones, I mean like she's the one.\n                        Greetings loved ones let's take a\n                        journey. Just own the night like the\n                        4th of July! But you'd rather get\n                        wasted.</p>\n                    <h4 id=\"mdo\">@mdo</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. 'Cause she's the muse and\n                        the artist. (This is how we do) So\n                        you wanna play with magic. So just\n                        be sure before you give it all to\n                        me. I'm walking, I'm walking on air\n                        (tonight). Skip the talk, heard it\n                        all, time to walk the walk.</p>\n                    <h4 id=\"one\">one</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. Takes you miles high, so\n                        high, 'cause she’s got that one\n                        international smile. There's a\n                        stranger in my bed, there's a\n                        pounding in my head. Oh, no. In\n                        another life I would make you stay.\n                        ‘Cause I, I’m capable of anything.\n                        Suiting up for my crowning battle.\n                        Used to steal your parents' liquor\n                        and climb to the roof. Tone, tan fit\n                        and ready, turn it up cause its\n                        gettin' heavy. Her love is like a\n                        drug. I guess that I forgot I had a\n                        choice.</p>\n                    <h4 id=\"two\">two</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. It's time to bring out the\n                        big balloons. I'm walking, I'm\n                        walking on air (tonight). Yeah, we\n                        maxed our credit cards and got\n                        kicked out of the bar. Yo, shout out\n                        to all you kids, buying bottle\n                        service, with your rent money. I'm\n                        ma get your heart racing in my\n                        skin-tight jeans. If you get the\n                        chance you better keep her. Yo,\n                        shout out to all you kids, buying\n                        bottle service, with your rent\n                        money.</p>\n                    <h4 id=\"three\">three</h4>\n                    <p>Placeholder content for the scrollspy\n                        example. If you wanna dance, if you\n                        want it all, you know that I'm the\n                        girl that you should call. Walk\n                        through the storm I would. So let me\n                        get you in your birthday suit. The\n                        one that got away. Last Friday\n                        night, yeah I think we broke the\n                        law, always say we're gonna stop.\n                        'Cause she's a little bit of Yoko,\n                        And she's a little bit of 'Oh no'. I\n                        want the jaw droppin', eye poppin',\n                        head turnin', body shockin'. Yeah,\n                        we maxed our credit cards and got\n                        kicked out of the bar.</p>\n                    <p>And some more placeholder content,\n                        for good measure.</p>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"spinners\">\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 m-t_5 m-b_3 \">\n            <h3>Spinners</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/spinners/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example\">\n                <div class=\"spinner-border c_primary\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_secondary\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_success\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_alert\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_warning\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_info\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_light\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-border c_dark\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n            </div>\n            <div class=\"bd-example\">\n                <div class=\"spinner-grow c_primary\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_secondary\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_success\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_alert\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_warning\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_info\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_light\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n                <div class=\"spinner-grow c_dark\"\n                     role=\"status\"><span\n                          class=\"visually-hidden\">Loading...</span>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"m-y_3\"\n             id=\"toasts\">\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 m-t_5 m-b_3 \">\n            <h3>Toasts</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/toasts/\">Documentation</a>\n        </div>\n        <div>\n            <div\n                 class=\"bd-example bg_dark p-5 align-items-center\">\n                <div class=\"toast\"\n                     role=\"alert\"\n                     aria-live=\"assertive\"\n                     aria-atomic=\"true\">\n                    <div class=\"toast-header\"><svg\n                             class=\"bd-placeholder-img rounded m_3\"\n                             width=\"20\"\n                             height=\"20\"\n                             xmlns=\"http://www.w3.org/2000/svg\"\n                             aria-hidden=\"true\"\n                             preserveAspectRatio=\"xMidYMid slice\"\n                             focusable=\"false\">\n                            <rect width=\"100%\"\n                                  height=\"100%\"\n                                  fill=\"#007aff\"></rect>\n                        </svg> <strong\n                                class=\"me-auto\">Bootstrap</strong>\n                        <small class=\"c_muted\">11 mins\n                            ago</small> <button\n                                type=\"button\"\n                                class=\"btn-close\"\n                                data-bs-dismiss=\"toast\"\n                                aria-label=\"Close\"></button>\n                    </div>\n                    <div class=\"toast-body\">Hello, world!\n                        This is a toast message.</div>\n                </div>\n            </div>\n        </div>\n    </article>\n    <article class=\"mt-3 mb-5 pb-5\"\n             id=\"tooltips\">\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 m-t_5 m-b_3 \">\n            <h3>Tooltips</h3><a\n               class=\"d-flex align-items-center\"\n               target=\"_blank\"\n               href=\"https://getbootstrap.com/docs/5.0/components/tooltips/\">Documentation</a>\n        </div>\n        <div>\n            <div class=\"bd-example tooltip-demo\"><button\n                        type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-placement=\"top\"\n                        title=\"Tooltip on top\">Tooltip on\n                    top</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-placement=\"right\"\n                        title=\"Tooltip on end\">Tooltip on\n                    end</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-placement=\"bottom\"\n                        title=\"Tooltip on bottom\">Tooltip on\n                    bottom</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-placement=\"left\"\n                        title=\"Tooltip on start\">Tooltip on\n                    start</button> <button type=\"button\"\n                        class=\"btn btn-secondary\"\n                        data-bs-toggle=\"tooltip\"\n                        data-bs-html=\"true\"\n                        title=\"<em>Tooltip</em> <u>with</u> <b>HTML</b>\">Tooltip\n                    with HTML</button></div>\n        </div>\n    </article>\n</section>\n\n\n\nWeight: 1000\n\nStyleguide  Bootstrap.Components\n*/","\n.btn {\n\twhite-space: nowrap;\n\tfont-family: $font_ui;\n\tfont-weight: $font_medium;\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-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.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@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.icon-toggle_bars-times:before {\n\t\tcontent: '\\f2d3';\n\t\t.collapsed>&,.collapsed & {      \n\t\t\tcontent: '\\f0c9';\n\t\t}\n\t}\n\t.icon-toggle_plus-minus:before {\n\t\tcontent: '\\f0fe';\n\t\t.show > &{\n\t\t\tcontent: '\\f146';\n\t\t}\n\t}\n\t.icon-toggle_plus-minus-sub:before {\n\t\t@extend %icon-toggle-space;\n\t\tcontent: '\\f068';\n\t\t.collapsed>&,.collapsed &{\n\t\t\tcontent: '\\f067';\n\t\t}\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{border-top-color: $navbar_hover; color:$navbar_primary}\n\t}\n}","@if($usingFontAwesome){\t\n\t.accordion {\n\t\ti.icon-toggle_plus-minus:before {\n\t\t\tcontent: \"\\f146\";\n\t\t}\n\t\t.collapsed i.icon-toggle_plus-minus:before {\n\t\t\tcontent: \"\\f0fe\";\n\t\t}\n\t}\n}\n"]}