\n\n\nWeight:20\n\nStyleguide Sub.Data.Sponsor.Address\n*/\n/*\nLogo\n\nDescription:\nLogo of the Company\n\nMarkup:\n\n\nMarkupWrapperClasses: max-w_40 relative h_20 w_100\n\n\nWeight:10\n\nStyleguide Sub.Data.Sponsor.Logo\n*/\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n\nWeight:25\n\nStyleguide Sub.Data.Sponsor.WebAddress\n*/\n/*\nWebsite Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}\">Website\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.WebLink\n*/\n/* Nav Recipes.00x */\n/*\nCall to Action Buttons\n\nDescription: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.\n\nSign Up - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.\nPurchase - Used to prompt users to make a purchase. It creates a sense of urgency and directs users to complete a transaction for a product or service.\nLearn More - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.\nSubscribe - Used to encourage users to subscribe to a newsletter, mailing list, or updates from a website or company. It aims to build a relationship with users and keep them engaged.\nGet Started - Used to initiate user onboarding or guide users through the first steps of using a product or service. It prompts users to begin their journey and experience the offering.\n\nMarkup:\n\n\n\nNOTE: The Call to Action Button component is ideal for creating prominent buttons that attract user attention and encourage them to take a specific action, such as signing up, making a purchase, or exploring more content.\n\n\nWeight:1000\n\nStyleguide HTML.Inputs.Button.CTA\n*/\n/*\nButtons\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button\n*/\n/*\nButtons Small\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.SM\n*/\n/*\nButtons Large\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.LG\n*/\n/* Recipes.40 */\n.address {\n font-style: unset;\n}\n\n@media only screen and (min-width: 640px) {\n .reverse-indent {\n display: inline-block;\n margin-left: 1em;\n padding-right: 1em;\n text-indent: -1em;\n width: 100%;\n }\n .reverse-indent:after {\n content: \"\";\n display: table;\n clear: both;\n }\n}\n/*\nGeneric Footer\n\nThis defines the web footer. \n\nMarkup:\n\n\nSubComponents: \nSub.Component.Navigation.Footer.Address - Addresses\nSub.Component.Navigation.Footer.Social - Social Links\nSub.Component.Navigation.Footer.ACCProductLinks - Sister Sites\nSub.Component.Navigation.Footer.Subfooter - Sub Footer\nSub.Component.Navigation.Footer.Cite - Citation for the Site\n\nWeight: 40\n\nStyleguide Component.Navigation.Footer\n*/\n/*\nSub Footer\n\nDescription: ACC has some basic legal information that should be on every property. \n\nMarkup:\n\n\n\n\n\nWeight: 0\n\nStyleguide Sub.Component.Navigation.Footer.Subfooter\n*/\n/*\n\tCite and Copyright\n\n\tContains copy right \n\n\tMarkup:\n
\n \n\n\nMarkupWrapperClasses:\n texture_dark p_4 max-w_30\n\nStyleguide Sub.Component.Navigation.Footer.Address\n\n*/\n/*\nFat Footers Links\n\nFooters in the ACC sometimes have fat footers with a list of categories and links. \n\nMarkup:\n\n
\n\n\nMarkupWrapperClasses:\n texture_dark p_4\n\n\nStyleguide Component.Navigation.Footer.Fat-Footer-Links\n\n*/\n/*\nACC Product Links\n\nLinks to the other major products in the ACC portfolio \n\nMarkup:\n\n\n
\n \n\n\nMarkupWrapperClasses:\ntexture_dark p_4\n\nStyleguide Sub.Component.Navigation.Footer.ACCProductLinks\n\n*/\n/*\nSocial Links\n\nThe college has a collection of social or secondary platforms we interact with.\n\nMarkup:\n\n
Stay Connected\n
\n
\n
\n
\n
\n
\n
\n \n
\n\n\nMarkupWrapperClasses:\ntexture_dark p_4 max-w_40\n\nStyleguide Sub.Component.Navigation.Footer.Social\n\n*/\n/* Nav Recipes.50 */\n/*\n Quick Utility Links\n\n Quick Links are only text links that are used for special cross marketing to sister sites and utility pages like about, home, extra. \n\n Markup:\n\n\nWeight:50\n\n\n Styleguide Component.Navigation.QuickLinks\n*/\n/* Nav Recipes.04x */\n/*\nAdvertisment Spaces\n\nAdvertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces. \n\n Markup:\n
\n
\n \n
\n advertisment\n
\n\nMarkupWrapperClasses:\n max-w_30\n\nStyleguide Component.Advertisement\n*/\n/* content Recipes.100 */\n/*\nSocial Links\n\nThe social links From the Footer.\n\n\nMarkup:\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\nStyleguide Component.Navigation.SocialLinks\n\n*/\n/*\nSocial Links Monochrome\n\nThe social links can be restyled to be smaller.\n\n\nMarkup:\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\nStyleguide Component.Navigation.SocialLinks.Mono Chrome\n\n*/\n/*\nSocial Links Smaller\n\nThe social links can be restyled to be smaller.\n\n\nMarkup:\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\nStyleguide Component.Navigation.SocialLinks.Smaller\n\n*/\n/*\nCookie Banner\n\nDescription: This page is the root of the page. The cookie banner was used to display a message to the user that the site uses cookies. The user can click on the banner to dismiss the message.
\n
The system will present user a pop-up banner that appears when first accessing the site, which will include text, links and an Accept/OK button.
\n
The system will allow the user to dismiss the pop up by clicking the Accept/OK button
\n
The system will allow the ACC Admin to \"reset\" the pop up banner, which will show it to all users and require them to click accept again to dismiss it.
\n
The system will track and record the users date/time when they accepted the pop up.
\n
\n\nMarkup:\n
\n
\n
\n
This site uses cookies to improve your experience.
\n\nMarkupWrapperClasses: relative\n\nNOTE: This design needs to have the 'fixed' class changed to fixed in the parent container of the attached code when in real implementations. 'fixed' is used in the documentation page so it would not break free of the documentation area into the bottom of the browser page.\n\nWeight:100\n\nStyleguide Component.CookieBanner\n*/\n/* content Recipes.150 */\n/*\nOrdered Cards\n\nHaving cards order on page to help users find there way through steps can some times be very helpful. \n\nMarkup:\n
\n
\n
\n
\n
First it is bad
\n
\n
\n
This is a card.
\n
It has an easy to override visual style, and is appropriately subdued.
\n
\n
\n
\n
\n
\n
Then it is not right
\n
\n
\n
This is a card.
\n
It has an easy to override visual style, and is appropriately subdued.
\n
\n
\n
\n
\n
\n
At last it is good
\n
\n
\n
This is a card.
\n
It has an easy to override visual style, and is appropriately subdued.
\n
\n
\n
\n\nWeight: 150\n\nStyleguide Recipes.Ordered Cards\n*/\n/* content Recipes.250 */\n/*\n\nRead More Arrow\n\nThis stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.\n\nMarkup:\n\n \n \n\n\n\nStyleGuide Sub.Component.Common.ReadMoreArrow \n\n*/\n/*\n\n600w x 300h \n\nMarkup:\nhttps://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x300\n\n*/\n/*\n\n600w x 400h \n\nMarkup:\nhttps://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x400\n\n*/\n/*\n\n1200w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1200x300\n\n*/\n/*\n\n375w x 250h\n\nMarkup:\nhttps://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.375x250\n\n*/\n/*\n320w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.320x300\n\n*/\n/*\n\n1024w x 256h\n\nMarkup:\nhttps://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1024x256\n\n*/\n/*\nAspect 21x9\n\nMarkup:\nhttps://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.21x9\n*/\n/*\nAspect 16x9\n\nMarkup:\nhttps://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.16x9\n*/\n/*\n\n300w x 400h\n\nMarkup:\nhttps://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.300x400\n\n*/\n/*\n\nsquare\n\nMarkup:\nhttps://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.Square\n\n*/\n/*\n\nMax 20 Character\n\nMarkup:\nDi dolores (20 Chars)\n\nStyleguide Sub.Placeholder.Text.20ch\n\n*/\n/*\n\nMax 30 Character\n\nMarkup:\nCommodi dolores (30 Characters)\n\nStyleguide Sub.Placeholder.Text.30ch\n\n*/\n/*\n\nMax 40 Character\n\nMarkup:\nRerum libg dero pariatur (40 Characters)\n\nStyleguide Sub.Placeholder.Text.40ch\n\n*/\n/*\n\nMax 60 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er (60 Characters)\n\nStyleguide Sub.Placeholder.Text.60ch\n\n*/\n/*\n\nMax 80 Character\n\nMarkup:\nEius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)\n\nStyleguide Sub.Placeholder.Text.80ch\n\n*/\n/*\n\nMax 100 Character\n\nMarkup:\nOfficia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)\n\nStyleguide Sub.Placeholder.Text.100ch\n\n*/\n/*\n\nMax 150 Character\n\nMarkup:\nSvel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)\n\nStyleguide Sub.Placeholder.Text.150ch\n\n*/\n/*\n\nMax 200 Character\n\nMarkup:\nDignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)\n\nStyleguide Sub.Placeholder.Text.200ch\n\n*/\n/*\n\nMax 250 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)\n\nStyleguide Sub.Placeholder.Text.250ch\n\n*/\n/*\n\nGrid - Triple Card Holder\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography\n\nNOTE:\nTriple up cards with shaded background are used only in full screen pages\n\nStyleguide Sub.ClassList.Grid.Card.Split-Triple \n\n*/\n/*\n\nTriple Split with Sidebar\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left\n\nNOTE:\nTriple up splits\n\nStyleguide Sub.ClassList.Grid.TripleLG\n\n*/\n/*\n\nGrid - Card Holder - 50 split\n\nMarkup:\ncolumns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid\n\nNOTE:\nsplit layouts great for half page cards\n\nStyleguide Sub.ClassList.Grid.Split-50\n\n*/\n/*\n\nGridList Triple on XL\n\nMarkup:\ncolumns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none\n\nStyleguide Sub.ClassList.Grid.TripleXL \n\n*/\n/*\n\nGridList Item Basic\n\nMarkup:\nflex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius\n\nNOTE:\nIcon and Header use differnt classes because they are a simpler component.\n\nStyleguide Sub.ClassList.Grid.Item \n\n*/\n/*\n\nSubs\n\n
Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as\n sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data\n points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone\n but are composed into larger, reusable structures.
\n
These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,\n or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials\n ({{> 'Sub.X' }}) to render dynamic or variable content within patterns.
\n
Common use cases: - {{> 'Sub.Sub.Data.Duration'}} — Displays session duration -\n {{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier -\n {{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button
\n\n\n\nNOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.\n\nStyleguide Sub\n*/\n/*\nPlaceholders\n\nPlaceholders are just used across the styleguide. The can be either text or image stand ins for the UI.\n\nWeight: 9999\n\nStyleguide Sub.Placeholder\n*/\n/*\nRecipe\n\nPatterns that are used through out the refactors on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe\n*/\n/*\nArticles\n\nThere are multiple sub components that are used through out the most common page type on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe.Article\n*/\n/*\nData\n\nThere are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.\n\nWeight: 500\n\nStyleguide Sub.Data\n*/\n/*\nClass Lists\n\nArches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items\n\nWeight: 2000\n\nStyleguide Sub.ClassList\n*/\n/*\n\nRich Text \n\nMarkup:\n
\n
Lorem Ipsum
\n
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
\n
Header Level 2
\n \n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.
\n \n
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.
\n
Header Level 3
\n
\n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.
\n
\n \n\t\n Table of Contents\n
\n \n
How to Prepare for the Boards
\n
General Principles of Cardiovascular Medicine\n
\n
Arrhythmias
\n
Coronary Artery Disease
\n
Heart Failure & Cardiomyopathy
\n
Valvular Disease
\n
Pericardial Disease
\n
Congenital Heart Disease
\n
Vascular Diseases
\n
Systemic Hypertension and Hypotension
\n
Pulmonary Circulation Disorders
\n
Systemic Disorders Affecting the Circulatory\n System
\n\nWeight: 100\n\nStyleguide Bootstrap.Pagination\n\n*/\n/*\nTabs\n\nA simple way to show small groups of content that should have the same level of reading hierarchy. \n\nMarkup:\n\n
\n
\n
consectetur adipisicing elit
\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.
\n
\n
Lorem ipsum dolor sit
\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.
\n
\n\nMarkupWrapperClasses:\n\nSubComponents:\nSub.Component.Structures.Tabs.Tab.LinkActives - Active Tab\nSub.Component.Structures.Tabs.Tab.Link - Tab\nSub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab\n\nCaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Component.Structures.Tabs.\n*/\n/*\nSimple Tabs: Dark Mode\n\nReverse Colored Tabs for when on dark background\n\nMarkup:\n
\n \n
\n\nWeight: 0\n\nStyleguide Sub.Component.Structures.Tabs.TabDark\n*/\n/*\nTab Dark: Active\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4\n\nWeight:0\n\n\nStyleguide Sub.Component.Structures.Tabs.TabDark.Link\n*/\n/*\nTab Dark: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n
\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4 \n\nWeight:0\n\n\nStyleguide Sub.Component.Structures.Tabs.TabDark.LinkDisabled\n*/\n/*\nTab: Active\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light\n\nWeight:0\n\nStyleguide Sub.Component.Structures.Tabs.Tab.LinkActive\n*/\n/*\nTab: Basic\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light\n\nWeight:0\n\nStyleguide Sub.Component.Structures.Tabs.Tab.Link\n*/\n/*\nTab: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n
\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light\n\nWeight:0\n\nStyleguide Sub.Component.Structures.Tabs.Tab.LinkDisabled\n*/\n/*\nUI Tabs\n\nThe application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.\n\nMarkup:\n
\n \n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n
\n\nMarkupWrapperClasses: p_4\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Component.Structures.UITabs\n*/\n/*\nUI Tabs Overflow\n\nThe application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.\n\nMarkup:\n
\n \n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n
\n\nMarkupWrapperClasses: p_4\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min. \n\nWeight:0\n\nStyleguide Component.Structures.UITabs.Overflow\n*/\n/*\nTab: Default\n\nDescription: Active State of Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n Link\n
\n\n\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nMarkupWrapperClasses: flex ul_none\n\nWeight:0\n\nStyleguide Sub.Component.Structures.UITabs.Tab\n*/\n/*\nTab: Active\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\nMarkupWrapperClasses: flex ul_none\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Sub.Component.Structures.UITabs.Tab.LinkActive\n*/\n/*\nTab: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n
\n\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nMarkupWrapperClasses: flex ul_none\n\nWeight:0\n\nStyleguide Sub.Component.Structures.UITabs.Tab.LinkDisabled\n*/\n/*\nScroll Overflow Script\n\nDescription: Javascript is needed to make the scrolls work on the page\n\nMarkup:\n\nMarkupWrapperClasses: p_4\n\ncaution: This item is not finalized and might be subject to change\n\nWeight:0\n\nStyleguide Component.Structures.UITabs.Script\n*/\n/*\nSidebar Nav\n\nDescription: Side bar for any 3 layer nav on the site. the parent node is from the main nav.\n\nMarkup:\n\n\nWeight:-1000\n\nMarkupWrapperClasses: max-w_25 m_auto \n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nStyleguide Component.Navigation.Sidebar\n*/\n/*\nParent NavItem\n\nDescription: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.\n\nMarkup:\n
\n\nWeight: -100\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.Parent\n*/\n/*\nChild NavItem\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\ndefault - No added class \nactive - Nav Item changes its decoration if this the page the user is on.\n\nMarkup:\n
\n\nWeight: 10\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.Child\n*/\n/*\nToggle Child\n\nDescription: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.\n\ndefault - the toggle when it doesn't have an active class still shades on hover\nactive - shade the toggle\n\nMarkup:\n
\n\nWeight: -10\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.ChildToggle\n*/\n/*\nChild NavItem With Children\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\n\nMarkup:\n
\n\nWeight: 15\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.ChildWithChildren\n*/\n/*\nChild NavItem With Grand Children\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\nMarkup:\n
\n\nWeight: 15\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nStyleguide Component.Navigation.Sidebar.ChildWithGrandChildren\n*/\n/*\nGreat Grandchild NavItem\n\nDescription: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.\n\ndefault - No added class \nactive - Nav Item changes its decoration if this the page the user is on.\n\nMarkup:\n
\n\nWeight: 100\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.GreatGrandchild\n*/\n/*\nBootstrap Toggle Rotation\n\nThe toggles for bootstrap collapses use a `+` icon that twists to an `x` when the elements doesn't have `collapsed` or `show` as a class. to reduce confusion the class has a set rotation and speed attached to it. `a:rotation` is applied to the tow specific icons `fa-times` and `fa-chevron-up` only.
These classes are effected by the parent having `collapsed` state.
\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
\n \n
\n
\n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n
\n\n\nWeight: 100\n\nStyleguide Component.Navigation.Toggle.Rotation\n\n*/\n/*\nToggle \n\nToggle elements of a collapse with user feed back of the icon rotating.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n
\n\nWeight: -10\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle\n*/\n/*\nToggle Chevron\n\nToggle elements of a collapse with user feed back of the icon rotating.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n
\n\nWeight: -80\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.Chevron\n*/\n/*\nCollapse Toggle Advanced\n\nToggle elements of a collapse with user feed back of the icon morphing.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n \n \n \n
\n\nWeight: -100\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.Advanced\n*/\n/*\nCollapse Toggle Advanced with Square\n\nToggle elements of a collapse with user feed back of the icon morphing.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n \n \n \n \n
\n\nWeight: -90\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.AdvancedSquare\n*/\n/*\nAccordion\n\nIn content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.\n\nMarkup:\n
\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nWeight:0\n\nStyleguide Component.Accordion\n*/\n/*\nAccordion Child\n\nDescription: Sometimes the content needs be collapsed at a secondary level to make it scannable. \n\nMarkup:\n
\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nWeight:0\n\nStyleguide Component.Accordion.Child\n*/\n/*\nAccordion Nested Example\n\nIn content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.\n\nMarkup:\n
\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nWeight:0\n\nStyleguide Component.Accordion.Nested\n*/\n/*\n\nRead More Arrow\n\nThis stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.\n\nMarkup:\n\n \n \n\n\n\nStyleGuide Sub.Component.Common.ReadMoreArrow \n\n*/\n/*\n\n600w x 300h \n\nMarkup:\nhttps://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x300\n\n*/\n/*\n\n600w x 400h \n\nMarkup:\nhttps://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x400\n\n*/\n/*\n\n1200w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1200x300\n\n*/\n/*\n\n375w x 250h\n\nMarkup:\nhttps://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.375x250\n\n*/\n/*\n320w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.320x300\n\n*/\n/*\n\n1024w x 256h\n\nMarkup:\nhttps://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1024x256\n\n*/\n/*\nAspect 21x9\n\nMarkup:\nhttps://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.21x9\n*/\n/*\nAspect 16x9\n\nMarkup:\nhttps://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.16x9\n*/\n/*\n\n300w x 400h\n\nMarkup:\nhttps://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.300x400\n\n*/\n/*\n\nsquare\n\nMarkup:\nhttps://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.Square\n\n*/\n/*\n\nMax 20 Character\n\nMarkup:\nDi dolores (20 Chars)\n\nStyleguide Sub.Placeholder.Text.20ch\n\n*/\n/*\n\nMax 30 Character\n\nMarkup:\nCommodi dolores (30 Characters)\n\nStyleguide Sub.Placeholder.Text.30ch\n\n*/\n/*\n\nMax 40 Character\n\nMarkup:\nRerum libg dero pariatur (40 Characters)\n\nStyleguide Sub.Placeholder.Text.40ch\n\n*/\n/*\n\nMax 60 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er (60 Characters)\n\nStyleguide Sub.Placeholder.Text.60ch\n\n*/\n/*\n\nMax 80 Character\n\nMarkup:\nEius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)\n\nStyleguide Sub.Placeholder.Text.80ch\n\n*/\n/*\n\nMax 100 Character\n\nMarkup:\nOfficia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)\n\nStyleguide Sub.Placeholder.Text.100ch\n\n*/\n/*\n\nMax 150 Character\n\nMarkup:\nSvel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)\n\nStyleguide Sub.Placeholder.Text.150ch\n\n*/\n/*\n\nMax 200 Character\n\nMarkup:\nDignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)\n\nStyleguide Sub.Placeholder.Text.200ch\n\n*/\n/*\n\nMax 250 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)\n\nStyleguide Sub.Placeholder.Text.250ch\n\n*/\n/*\n\nGrid - Triple Card Holder\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography\n\nNOTE:\nTriple up cards with shaded background are used only in full screen pages\n\nStyleguide Sub.ClassList.Grid.Card.Split-Triple \n\n*/\n/*\n\nTriple Split with Sidebar\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left\n\nNOTE:\nTriple up splits\n\nStyleguide Sub.ClassList.Grid.TripleLG\n\n*/\n/*\n\nGrid - Card Holder - 50 split\n\nMarkup:\ncolumns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid\n\nNOTE:\nsplit layouts great for half page cards\n\nStyleguide Sub.ClassList.Grid.Split-50\n\n*/\n/*\n\nGridList Triple on XL\n\nMarkup:\ncolumns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none\n\nStyleguide Sub.ClassList.Grid.TripleXL \n\n*/\n/*\n\nGridList Item Basic\n\nMarkup:\nflex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius\n\nNOTE:\nIcon and Header use differnt classes because they are a simpler component.\n\nStyleguide Sub.ClassList.Grid.Item \n\n*/\n/*\n\nSubs\n\n
Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as\n sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data\n points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone\n but are composed into larger, reusable structures.
\n
These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,\n or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials\n ({{> 'Sub.X' }}) to render dynamic or variable content within patterns.
\n
Common use cases: - {{> 'Sub.Sub.Data.Duration'}} — Displays session duration -\n {{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier -\n {{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button
\n\n\n\nNOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.\n\nStyleguide Sub\n*/\n/*\nPlaceholders\n\nPlaceholders are just used across the styleguide. The can be either text or image stand ins for the UI.\n\nWeight: 9999\n\nStyleguide Sub.Placeholder\n*/\n/*\nRecipe\n\nPatterns that are used through out the refactors on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe\n*/\n/*\nArticles\n\nThere are multiple sub components that are used through out the most common page type on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe.Article\n*/\n/*\nData\n\nThere are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.\n\nWeight: 500\n\nStyleguide Sub.Data\n*/\n/*\nClass Lists\n\nArches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items\n\nWeight: 2000\n\nStyleguide Sub.ClassList\n*/\n/*\n\nRich Text \n\nMarkup:\n
\n
Lorem Ipsum
\n
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
\n
Header Level 2
\n \n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.
\n \n
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.
\n
Header Level 3
\n
\n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.
\n
\n \n\t\n Table of Contents\n
\n \n
How to Prepare for the Boards
\n
General Principles of Cardiovascular Medicine\n
\n
Arrhythmias
\n
Coronary Artery Disease
\n
Heart Failure & Cardiomyopathy
\n
Valvular Disease
\n
Pericardial Disease
\n
Congenital Heart Disease
\n
Vascular Diseases
\n
Systemic Hypertension and Hypotension
\n
Pulmonary Circulation Disorders
\n
Systemic Disorders Affecting the Circulatory\n System
\n
\n Miscellaneous\n
\n
Cardiovascular Genetics
\n
CPR, Post-Resuscitation Care
\n
Cardiac Critical Care
\n
Sleep Disordered Breathing
\n
Sports Cardiology
\n
Pregnancy and Cardiac Disease
\n
Cardiovascular Operative Management\n
\n
Pharmacology
\n
General Principles of Cardiovascular\n Medicine
\n
\n
\n \n
\n \n
\n\nHideCodeBlock: display_none \n\nStyleguide Sub.Placeholder.Typography\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(34, 34, 34, 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(34, 34, 34, 0.25);\n border-width: thin;\n border-radius: 3px;\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(34, 34, 34, 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: 3px;\n}\n\nfieldset {\n padding: 0.5rem 1rem;\n margin: 0.5rem 0;\n border-color: rgba(34, 34, 34, 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
\n\t
\n\t\t
Utility Class
\n\t\t \n\t\t\n\t
\n\t
\n\t\t
Bootstrap
\n\t\t\n\t\t\n\t
\n
\n\n Styleguide HTML.Inputs.Text\n\n*/\n/*\n\nInputs UC\n\nUtility Class only build inputs\n\nMarkup:\n\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
Tables can have captions now.
Person
Number
Third Column
Someone Lastname
900
Nullam quis risus eget urna mollis ornare vel eu leo.
Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person
1500
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One
2800
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
\n\n\nStyleguide HTML.BasicTable\n\n*/\ntable {\n font-family: var(--font-family_ui);\n font-size: 1rem;\n}\ntable caption {\n padding: 0.5rem;\n}\n\nth,\ntd {\n padding: 0.25rem 0.5rem;\n text-align: start;\n}\n\nthead {\n font-weight: var(--font_bold);\n padding: 0.25rem 0.5rem 0;\n}\n\ntbody {\n padding: 0 0.5rem;\n}\n\ntfoot,\ncaption {\n font-size: 0.8888888889rem;\n padding: 0 0.5rem 0.25rem;\n}\n\n/*\n Design Base\n\n Arches is design inspired by a pad of paper in the hand. Subtle Textures and Layer shadows keep the readability very high. \n\n Weight: -1000\n\n Styleguide DesignBase\n*/\n/*\n\nFonts \n\nThe ACC is focused on stable, conservative, clean fonts. Roboto Slab is the standard serif fonts across all products at the ACC.\n\n Styleguide DesignBase.Fonts\n*/\n/*\n\nAccent Roboto Slab\n\nA beautiful Accent font that shows a complexity and texture to the fonts used in the design. \n\n
\n\t
\n\t\tRoboto Slab\n\t\tfont-family: \"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,\"slab\",serif\n\t
\n\t
\n\t
RS
\n\t\t
\n\t\t\t
Accent Font
\n\t\t\t
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
\n\t\t\t
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
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
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
\n\t\t\t
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
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: -10\n\n Styleguide DesignBase.Fonts.Accent\n*/\n/*\n\nDisplay: Roboto Flex\n\n A Slick font that has a slight interest used for headers and UI. \n\n
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
\n\t\t\t
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
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
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
\n\t\t\t
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
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: 1\n\n Styleguide DesignBase.Fonts.UI\n*/\n/*\n\nIcons: Not Using Enteprise Solution\n\nThere 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\n\nMarkupWrapperClasses:\n\nNOTE: Not Using Enteprise Solution of Font Awesome\n\n\nStyleguide DesignBase.IconsFalse\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) - #002e5a; primary\nmap-get($theme-palette, secondary) - #747474; secondary\nmap-get($theme-palette, shade) \t - #747474; shade\nmap-get($theme-palette, accent) - #ff6600; accent\nmap-get($theme-palette, info) - #a3988c; info\nmap-get($theme-palette, highlight) - #783ca9; 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) - #ac2217; alert\nmap-get($theme-palette, warning) - #df732d; warning\nmap-get($theme-palette, success) - #0fa528; 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
{{modifier_class}} with a light primary color background
\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\n\t\t
primary-n5
HEX:#00070e
RGB:0, 7, 14
HSL:209.3333333333deg ,100%, 2.6470588235%
\n\t\t
primary-n4
HEX:#000e1b
RGB:0, 14, 27
HSL:209.3333333333deg ,100%, 5.2941176471%
\n\t\t
primary-n3
HEX:#00172d
RGB:0, 23, 45
HSL:209.3333333333deg ,100%, 8.8235294118%
\n\t\t
primary-n2
HEX:#00203f
RGB:0, 32, 63
HSL:209.3333333333deg ,100%, 12.3529411765%
\n\t\t
primary-n1
HEX:#00274d
RGB:0, 39, 77
HSL:209.3333333333deg ,100%, 15%
\n\t\t
primary-0
HEX:#002e5a
RGB:0, 46, 90
HSL:209.3333333333deg, 100%, 17.6470588235%
\n\t\t
primary-1
HEX:#004384
RGB:0, 67, 132
HSL:209.3333333333deg ,95%, 25.8823529412%
\n\t\t
primary-2
HEX:#0064c3
RGB:0, 100, 195
HSL:209.3333333333deg ,87.5%, 38.2352941176%
\n\t\t
primary-3
HEX:#2d98ff
RGB:45, 152, 255
HSL:209.3333333333deg ,75%, 58.8235294118%
\n\t\t
primary-4
HEX:#96ccff
RGB:150, 204, 255
HSL:209.3333333333deg ,62.5%, 79.4117647059%
\n\t\t
primary-5
HEX:#d5eaff
RGB:213, 234, 255
HSL:209.3333333333deg ,55%, 91.7647058824%
\n\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\n\t\t
secondary-n5
HEX:#111111
RGB:17, 17, 17
HSL:0deg ,8.5%, 6.8235294118%
\n\t\t
secondary-n4
HEX:#232323
RGB:35, 35, 35
HSL:0deg ,7%, 13.6470588235%
\n\t\t
secondary-n3
HEX:#3a3a3a
RGB:58, 58, 58
HSL:0deg ,5%, 22.7450980392%
\n\t\t
secondary-n2
HEX:#515151
RGB:81, 81, 81
HSL:0deg ,3%, 31.8431372549%
\n\t\t
secondary-n1
HEX:#636363
RGB:99, 99, 99
HSL:0deg ,1.5%, 38.6666666667%
\n\t\t
secondary-0
HEX:#747474
RGB:116, 116, 116
HSL:0deg, 0%, 45.4901960784%
\n\t\t
secondary-1
HEX:#828282
RGB:130, 130, 130
HSL:0deg ,0%, 50.9411764706%
\n\t\t
secondary-2
HEX:#979797
RGB:151, 151, 151
HSL:0deg ,0%, 59.1176470588%
\n\t\t
secondary-3
HEX:#bababa
RGB:186, 186, 186
HSL:0deg ,0%, 72.7450980392%
\n\t\t
secondary-4
HEX:gainsboro
RGB:220, 220, 220
HSL:0deg ,0%, 86.3725490196%
\n\t\t
secondary-5
HEX:#f1f1f1
RGB:241, 241, 241
HSL:0deg ,0%, 94.5490196078%
\n\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\n\t\t
success-n5
HEX:#021906
RGB:2, 25, 6
HSL:130deg ,84.75%, 5.2941176471%
\n\t\t
success-n4
HEX:#05320c
RGB:5, 50, 12
HSL:130deg ,84.5%, 10.5882352941%
\n\t\t
success-n3
HEX:#085314
RGB:8, 83, 20
HSL:130deg ,84.1666666667%, 17.6470588235%
\n\t\t
success-n2
HEX:#0b741c
RGB:11, 116, 28
HSL:130deg ,83.8333333333%, 24.7058823529%
\n\t\t
success-n1
HEX:#0d8c22
RGB:13, 140, 34
HSL:130deg ,83.5833333333%, 30%
\n\t\t
success-0
HEX:#0fa528
RGB:15, 165, 40
HSL:130deg, 83.3333333333%, 35.2941176471%
\n\t\t
success-1
HEX:#12c32f
RGB:18, 195, 47
HSL:130deg ,79.1666666667%, 41.7647058824%
\n\t\t
success-2
HEX:#1cea3f
RGB:28, 234, 63
HSL:130deg ,72.9166666667%, 51.4705882353%
\n\t\t
success-3
HEX:#68f17f
RGB:104, 241, 127
HSL:130deg ,62.5%, 67.6470588235%
\n\t\t
success-4
HEX:#b3f8bf
RGB:179, 248, 191
HSL:130deg ,52.0833333333%, 83.8235294118%
\n\t\t
success-5
HEX:#e1fce5
RGB:225, 252, 229
HSL:130deg ,45.8333333333%, 93.5294117647%
\n\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\n\t\t
shade-n5
HEX:#111111
RGB:17, 17, 17
HSL:0deg ,8.5%, 6.8235294118%
\n\t\t
shade-n4
HEX:#232323
RGB:35, 35, 35
HSL:0deg ,7%, 13.6470588235%
\n\t\t
shade-n3
HEX:#3a3a3a
RGB:58, 58, 58
HSL:0deg ,5%, 22.7450980392%
\n\t\t
shade-n2
HEX:#515151
RGB:81, 81, 81
HSL:0deg ,3%, 31.8431372549%
\n\t\t
shade-n1
HEX:#636363
RGB:99, 99, 99
HSL:0deg ,1.5%, 38.6666666667%
\n\t\t
shade-0
HEX:#747474
RGB:116, 116, 116
HSL:0deg, 0%, 45.4901960784%
\n\t\t
shade-1
HEX:#828282
RGB:130, 130, 130
HSL:0deg ,0%, 50.9411764706%
\n\t\t
shade-2
HEX:#979797
RGB:151, 151, 151
HSL:0deg ,0%, 59.1176470588%
\n\t\t
shade-3
HEX:#bababa
RGB:186, 186, 186
HSL:0deg ,0%, 72.7450980392%
\n\t\t
shade-4
HEX:gainsboro
RGB:220, 220, 220
HSL:0deg ,0%, 86.3725490196%
\n\t\t
shade-5
HEX:#f1f1f1
RGB:241, 241, 241
HSL:0deg ,0%, 94.5490196078%
\n\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\n\t\t
\n\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\n\t\t
\n\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\n\t\t
\n\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\n\t\t
accent-n5
HEX:#260f00
RGB:38, 15, 0
HSL:24deg ,100%, 7.5%
\n\t\t
accent-n4
HEX:#4d1f00
RGB:77, 31, 0
HSL:24deg ,100%, 15%
\n\t\t
accent-n3
HEX:#803300
RGB:128, 51, 0
HSL:24deg ,100%, 25%
\n\t\t
accent-n2
HEX:#b34700
RGB:179, 71, 0
HSL:24deg ,100%, 35%
\n\t\t
accent-n1
HEX:#d95700
RGB:217, 87, 0
HSL:24deg ,100%, 42.5%
\n\t\t
accent-0
HEX:#ff6600
RGB:255, 102, 0
HSL:24deg, 100%, 50%
\n\t\t
accent-1
HEX:#ff751a
RGB:255, 117, 26
HSL:24deg ,95%, 55%
\n\t\t
accent-2
HEX:#ff8c40
RGB:255, 140, 64
HSL:24deg ,87.5%, 62.5%
\n\t\t
accent-3
HEX:#ffb380
RGB:255, 179, 128
HSL:24deg ,75%, 75%
\n\t\t
accent-4
HEX:#ffd9bf
RGB:255, 217, 191
HSL:24deg ,62.5%, 87.5%
\n\t\t
accent-5
HEX:#fff0e6
RGB:255, 240, 230
HSL:24deg ,55%, 95%
\n\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\n\t\t
\n\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\n\t\t
\n\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\n\t\t
acc-n5
HEX:#000a12
RGB:0, 10, 18
HSL:206.9491525424deg ,100%, 3.4705882353%
\n\t\t
acc-n4
HEX:#001423
RGB:0, 20, 35
HSL:206.9491525424deg ,100%, 6.9411764706%
\n\t\t
acc-n3
HEX:#00213b
RGB:0, 33, 59
HSL:206.9491525424deg ,100%, 11.568627451%
\n\t\t
acc-n2
HEX:#002e53
RGB:0, 46, 83
HSL:206.9491525424deg ,100%, 16.1960784314%
\n\t\t
acc-n1
HEX:#003764
RGB:0, 55, 100
HSL:206.9491525424deg ,100%, 19.6666666667%
\n\t\t
acc-0
HEX:#004176
RGB:0, 65, 118
HSL:206.9491525424deg, 100%, 23.137254902%
\n\t\t
acc-1
HEX:#00579d
RGB:0, 87, 157
HSL:206.9491525424deg ,95%, 30.8235294118%
\n\t\t
acc-2
HEX:#0077d8
RGB:0, 119, 216
HSL:206.9491525424deg ,87.5%, 42.3529411765%
\n\t\t
acc-3
HEX:#3ba7ff
RGB:59, 167, 255
HSL:206.9491525424deg ,75%, 61.568627451%
\n\t\t
acc-4
HEX:#9dd3ff
RGB:157, 211, 255
HSL:206.9491525424deg ,62.5%, 80.7843137255%
\n\t\t
acc-5
HEX:#d8edff
RGB:216, 237, 255
HSL:206.9491525424deg ,55%, 92.3137254902%
\n\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: #002e5a*/\n/* $xd-color_primary-n5: #00070e*/\n/* $xd-color_primary-n4: #000e1b*/\n/* $xd-color_primary-n3: #00172d*/\n/* $xd-color_primary-n2: #00203f*/\n/* $xd-color_primary-n1: #00274d*/\n/* $xd-color_primary-1: #004384*/\n/* $xd-color_primary-2: #0064c3*/\n/* $xd-color_primary-3: #2d98ff*/\n/* $xd-color_primary-4: #96ccff*/\n/* $xd-color_primary-5: #d5eaff*/\n/* $xd-color_secondary-0: #747474*/\n/* $xd-color_secondary-n5: #111111*/\n/* $xd-color_secondary-n4: #232323*/\n/* $xd-color_secondary-n3: #3a3a3a*/\n/* $xd-color_secondary-n2: #515151*/\n/* $xd-color_secondary-n1: #636363*/\n/* $xd-color_secondary-1: #828282*/\n/* $xd-color_secondary-2: #979797*/\n/* $xd-color_secondary-3: #bababa*/\n/* $xd-color_secondary-4: gainsboro*/\n/* $xd-color_secondary-5: #f1f1f1*/\n/* $xd-color_success-0: #0fa528*/\n/* $xd-color_success-n5: #021906*/\n/* $xd-color_success-n4: #05320c*/\n/* $xd-color_success-n3: #085314*/\n/* $xd-color_success-n2: #0b741c*/\n/* $xd-color_success-n1: #0d8c22*/\n/* $xd-color_success-1: #12c32f*/\n/* $xd-color_success-2: #1cea3f*/\n/* $xd-color_success-3: #68f17f*/\n/* $xd-color_success-4: #b3f8bf*/\n/* $xd-color_success-5: #e1fce5*/\n/* $xd-color_shade-0: #747474*/\n/* $xd-color_shade-n5: #111111*/\n/* $xd-color_shade-n4: #232323*/\n/* $xd-color_shade-n3: #3a3a3a*/\n/* $xd-color_shade-n2: #515151*/\n/* $xd-color_shade-n1: #636363*/\n/* $xd-color_shade-1: #828282*/\n/* $xd-color_shade-2: #979797*/\n/* $xd-color_shade-3: #bababa*/\n/* $xd-color_shade-4: gainsboro*/\n/* $xd-color_shade-5: #f1f1f1*/\n/* $xd-color_warning-0: #df732d*/\n/* $xd-color_warning-n5: #231105*/\n/* $xd-color_warning-n4: #46220b*/\n/* $xd-color_warning-n3: #743812*/\n/* $xd-color_warning-n2: #a34f19*/\n/* $xd-color_warning-n1: #c6601e*/\n/* $xd-color_warning-1: #e28142*/\n/* $xd-color_warning-2: #e79662*/\n/* $xd-color_warning-3: #efb996*/\n/* $xd-color_warning-4: #f7dccb*/\n/* $xd-color_warning-5: #fcf1ea*/\n/* $xd-color_alert-0: #ac2217*/\n/* $xd-color_alert-n5: #1a0503*/\n/* $xd-color_alert-n4: #340a07*/\n/* $xd-color_alert-n3: #56110c*/\n/* $xd-color_alert-n2: #781810*/\n/* $xd-color_alert-n1: #921d14*/\n/* $xd-color_alert-1: #c8271b*/\n/* $xd-color_alert-2: #e33c2f*/\n/* $xd-color_alert-3: #ec7d74*/\n/* $xd-color_alert-4: #f6beba*/\n/* $xd-color_alert-5: #fbe5e3*/\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: #ff6600*/\n/* $xd-color_accent-n5: #260f00*/\n/* $xd-color_accent-n4: #4d1f00*/\n/* $xd-color_accent-n3: #803300*/\n/* $xd-color_accent-n2: #b34700*/\n/* $xd-color_accent-n1: #d95700*/\n/* $xd-color_accent-1: #ff751a*/\n/* $xd-color_accent-2: #ff8c40*/\n/* $xd-color_accent-3: #ffb380*/\n/* $xd-color_accent-4: #ffd9bf*/\n/* $xd-color_accent-5: #fff0e6*/\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: #783ca9*/\n/* $xd-color_highlight-n5: #120919*/\n/* $xd-color_highlight-n4: #241233*/\n/* $xd-color_highlight-n3: #3c1e55*/\n/* $xd-color_highlight-n2: #542a76*/\n/* $xd-color_highlight-n1: #663390*/\n/* $xd-color_highlight-1: #8744bd*/\n/* $xd-color_highlight-2: #9b63c8*/\n/* $xd-color_highlight-3: #bc97da*/\n/* $xd-color_highlight-4: #decbed*/\n/* $xd-color_highlight-5: #f2eaf8*/\n/* $xd-color_acc-0: #004176*/\n/* $xd-color_acc-n5: #000a12*/\n/* $xd-color_acc-n4: #001423*/\n/* $xd-color_acc-n3: #00213b*/\n/* $xd-color_acc-n2: #002e53*/\n/* $xd-color_acc-n1: #003764*/\n/* $xd-color_acc-1: #00579d*/\n/* $xd-color_acc-2: #0077d8*/\n/* $xd-color_acc-3: #3ba7ff*/\n/* $xd-color_acc-4: #9dd3ff*/\n/* $xd-color_acc-5: #d8edff*/\n.font .font--example {\n background-image: url(http://basehold.it/i/24);\n}\n.font .font--name {\n color: #000;\n}\n.font .font--dropcase_2x {\n color: #002e5a;\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.
modifier class
customization
usage
.inherit_color
removes all color rules from colored typography and sets it to inherit.
inverting a block of typography where all text and headlines should be white.
.font-size_up
shifts all typography up one font size step
intro blocks of text where the text. Or in articles where you can shift all text up a size.
`.font-size_down`
shifts all typography down one font size step.
citation blocks or boiler plate content where the text should be smaller and less impactful.
.links_dark
turns all links to the dark color standard.
this is used in junction with the .inherit_color class.
.links_light
turns all links to the light color standard.
this is used in junction with the .inherit_color class when text is on a dark background.
* there are further advanced features if you want to apply CSS Property Overrides. \n\nMarkup:\n\n
This is the primary heading and there should only be one of these per page
\n
sub heading
\n
A small paragraph to emphasis and show important bits.
\n
\n
This is a list item
\n
So is this - there could be more
\n
Make sure to style list items to:\n
\n
Not forgetting child list items
\n
Not forgetting child list items
\n
Not forgetting child list items
\n
Not forgetting child list items
\n
\n
\n
A couple more
\n
top level list items
\n
\n
Don't forget Ordered lists:
\n \n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.\n \n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.
\n \n
\n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.\n
\n
A sub heading which is not as important as the first, but is quite imporant overall
\n
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.
\n
\n
\n
Table Heading
\n
Table Heading
\n
\n \n
\n
table data
\n
table data
\n
\n
\n
table data
\n
table data
\n
\n
\n
table data
\n
table data
\n
\n
\n
table data
\n
table data
\n
\n
\t\n
A sub heading which is not as important as the second, but should be used with consideration
\n
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.
\n
“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.”
\n
A sub heading which is not as important as the second, but should be used with consideration
\n
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.
A sub heading which is not as important as the second, but should be used with consideration
\n
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.
\n
\n
Definition list
\n
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.
\n\t
Lorem ipsum dolor sit amet
\n\t
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.
\n\t
\n\t
This heading plays a relatively small bit part role, if you use it at all
\n
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.
\n\n\n Table of Contents\n
\n \n
How to Prepare for the Boards
\n
General Principles of Cardiovascular Medicine\n
\n
Arrhythmias
\n
Coronary Artery Disease
\n
Heart Failure & Cardiomyopathy
\n
Valvular Disease
\n
Pericardial Disease
\n
Congenital Heart Disease
\n
Vascular Diseases
\n
Systemic Hypertension and Hypotension
\n
Pulmonary Circulation Disorders
\n
Systemic Disorders Affecting the Circulatory\n System
\n
\n Miscellaneous\n
\n
Cardiovascular Genetics
\n
CPR, Post-Resuscitation Care
\n
Cardiac Critical Care
\n
Sleep Disordered Breathing
\n
Sports Cardiology
\n
Pregnancy and Cardiac Disease
\n
Cardiovascular Operative Management\n
\n
Pharmacology
\n
General Principles of Cardiovascular\n Medicine
\n
\n
\n \n
\n \n\nWeight: -9\n\nHideCodeBlock: display_none \n\nStyleguide HTML.Typography\n\n*/\n/*\n\nReading Typography Modified\n\nThis text is used as a lorem content in many of our containers. \n\n.color_inherit.bg_acc.c_white.p_4.links_light - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.\n\nMarkup:\n{{> Sub.Placeholder.Typography modifier_class=\" color_inherit bg_acc c_white p_4 links_light\"}}\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nMarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50\n\nStyleguide HTML.Typography.Sample\n\n*/\n/*\n\nLinks States\n\nThis shows the look and feel of all the states of a text link, color, underline and decoration.\n\nMarkup:\n
\n\nWeight: -50\n\nStyleguide Bootstrap\n*/\n/*\n\nTables\n\nThe collection of modifications you can do with tables out of the box from Bootstrap Arches.\n\nMarkup:\n
\n\t\t\n\t\n\n\nWeight: 100\n\nStyleguide Recipes ACCBranded Nav.Login\n\n*/\n/*\nResponsive Top Nav with Single Layer Nav\n\nThe Header Nav with no dropdown navs but with elements that show up only in the mobile viewport\n\nMarkup:\n\n\nWeight: 1\n\nStyleguide Recipes ACCBranded Nav.Simple\n\n*/\n/*\nNav Dropdown Simple\n\nThe Header Nav of ACC.org\n\nMarkup:\n\n\nWeight: 1\n\n\tStyleguide Recipes ACCBranded Nav.Dropdowns.Simple\n\n*/\n/*\nNav Dropdown with Sub Links\n\nThe Header Nav of ACC.org\n\nMarkup:\n\n\nWeight: 2\n\nStyleguide Recipes ACCBranded Nav.Dropdowns.Sublinks\n\n*/\n/*\nNav Dropdown with Alternate Content in Links\n\nIt is easy to add images in replace of text links in the navs. \n\nMarkup:\n\n\nWeight: 3\n\nStyleguide Recipes ACCBranded Nav.Dropdowns.Alt Content\n\n*/\n/* \n\nBranded Nav \n\nThe Header Nav of ACC.org \n\nMarkup:\n
\n\t\t\n\t\n\n\n\t\n\nStyleguide Recipes.ACC Branded Nav\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.journal.scss **/\n$teal: #198dae;\n$green-blue: #16a385;\n$dark-grey: #676a72;\n$alt-grey: #a3988c;\n$green: #0fa528;\n$orange: #df732d;\n$red: #ac2217;\n$blue: #2b58c0;\n$purple: #783ca9;\n$magenta: #c34198;\n$acc-blue: #004176;\n$white: rgb(255, 255, 255);\n$black: #222;\n$real-black: #000;\n$jacc-orange: #ff6600;\n$jacc-blue:#002e5a;\n\n\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\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\n$theme-palette: map-merge(\n\t$theme-palette,\n\t(\n\t\tprimary: $jacc-blue,\n\t\tsecondary:#747474, \n\t\tshade: #747474,\n\t\tsuccess: $green,\n\t\twarning: $orange,\n\t\talert: $red,\n\t\t//navigation: $blue,\n\t\taccent: $jacc-orange,\n\t\tinfo: $alt-grey,\n\t\thighlight: $purple,\n\t\tacc: $acc-blue,\n\t)\n);\n\n@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto+Flex:wght@300;400;500;600;700;800;900&display=swap');\n\n$fonts: (\n\taccent: (\n\t\tname: 'Roboto Slab',\n\t\tshort-name: 'RS',\n\t\tstack: '\"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,\"slab\",serif',\n\t\tweight:(\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\t),\n\tdisplay: (\n\t\tname: 'Roboto Flex',\n\t\tshort-name: 'RF',\n\t\tstack: '\"Roboto Flex\",Roboto,\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',\n\t\tweight:(\n\t\t\tlight:200,\n\t\t\tregular:400,\n\t\t\tmedium:600,\n\t\t\tbold:800,\n\t\t\txbold:1000\n\t\t)\n\t\t),\n\tcopy: (\n\t\tname: 'Roboto Flex',\n\t\tshort-name: 'RF',\n\t\tstack: '\"Roboto Flex\",Roboto,\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',\n\t\tweight:(\n\t\t\tlight:200,\n\t\t\tregular:400,\n\t\t\tmedium:600,\n\t\t\tbold:800,\n\t\t\txbold:1000\n\t\t)\n\t\t),\n\tui: (\n\t\tname: 'Roboto Flex',\n\t\tshort-name: 'RF',\n\t\tstack: '\"Roboto Flex\",Roboto,\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',\n\t\tweight:(\n\t\t\tlight:200,\n\t\t\tregular:400,\n\t\t\tmedium:600,\n\t\t\tbold:800,\n\t\t\txbold:1000\n\t\t)\n\t),\n);\n\n\n\n\t\n// Reset Values of Utility-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\n$global-radius-on: false;\n$global-border-radius: 3px;\n$value-to-unit: map-deep-set($value-to-unit, 'radius' 'radius', $global-border-radius);\n$global-border-round: 6px;\n$value-to-unit: map-deep-set($value-to-unit, 'radius' 'round', $global-border-round);\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\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\n$headline-color: get-theme-color(primary,-1);\n\n\n$usingFontAwesome:false;\n\n/** Build Comment: Overlay and alter for journal Branding 4.1.4x **/ \n/** SCSS DOC:_brand.compile.scss **/\n@import 'setup/config/__root.cssvars';\n\n/** Build Comment: Render Root Variables **/ \n/** SCSS DOC: __var.output.scss **/\n/** This needs to run later then brand **/\n\n$margin_0: get-css-size(margin, 0);\n$margin_1: get-css-size(margin, 1);\n$margin_2: get-css-size(margin, 2);\n$margin_3: get-css-size(margin, 3);\n$margin_4: get-css-size(margin, 4);\n$margin_5: get-css-size(margin, 5);\n$margin_n1: get-css-size(margin, n1);\n$margin_n2: get-css-size(margin, n2);\n$margin_n3: get-css-size(margin, n3);\n$margin_n4: get-css-size(margin, n4);\n$margin_n5: get-css-size(margin, n5);\n$padding_0: get-css-size(padding, 0);\n$padding_1: get-css-size(padding, 1);\n$padding_2: get-css-size(padding, 2);\n$padding_3: get-css-size(padding, 3);\n$padding_4: get-css-size(padding, 4);\n$padding_5: get-css-size(padding, 5);\n$border_square: 0;\n$border_radius: get-css-size(border-radius, radius);\n$border_round: get-css-size(border-radius, round);\n$border_circle: get-css-size(border-radius, circle);\n$border-width_0: get-css-size(border-width, 0);\n$border-width_1: get-css-size(border-width, 1);\n$border-width_2: get-css-size(border-width, 2);\n$border-width_3: get-css-size(border-width, 3);\n$border-width_4: get-css-size(border-width, 4);\n$border-width_5: get-css-size(border-width, 5);\n$font_display: var(--font-family_display);\n$font_accent: var(--font-family_accent);\n$font_ui: var(--font-family_ui);\n$font_copy: var(--font-family_copy);\n$font_mono: var(--font-family_mono);\n$font_6: get-css-size(font-size, 6);\n$font_5: get-css-size(font-size, 5);\n$font_4: get-css-size(font-size, 4);\n$font_3: get-css-size(font-size, 3);\n$font_2: get-css-size(font-size, 2);\n$font_1: get-css-size(font-size, 1);\n$font_0: get-css-size(font-size, 0);\n$font_n1: get-css-size(font-size, n1);\n$font_n2: get-css-size(font-size, n2);\n$font_n3: get-css-size(font-size, n3);\n$font_n4: get-css-size(font-size, n4);\n$font_n5: get-css-size(font-size, n5);\n$font_bold: var(--font_bold);\n$font_medium: var(--font_medium);\n$font_xbold: var(--font_xbold);\n$font_light: var(--font_light);\n$font_regular: var(--font_regular);\n$line-height_0: get-css-size(line-height, 0);\n$line-height_1: get-css-size(line-height, 1);\n$line-height_2: get-css-size(line-height, 2);\n$line-height_3: get-css-size(line-height, 3);\n$line-height_4: get-css-size(line-height, 4);\n$line-height_5: get-css-size(line-height, 5);\n/** SCSS DOC: _setup.boot.scss **/\n\n/*!\n * Bootstrap v5.0.0-beta3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */\n\n// scss-docs-start import-stack\n// Configuration\n@import \"../../node_modules/bootstrap/scss/functions\";\n@import './setup/config/_config.boot';\n@import \"../../node_modules/bootstrap/scss/variables\";\n@import \"../../node_modules/bootstrap/scss/mixins\";\n@import \"../../node_modules/bootstrap/scss/utilities\";\n\n// Layout & components\n@import \"../../node_modules/bootstrap/scss/root\";\n@import \"../../node_modules/bootstrap/scss/reboot\";\n@import \"../../node_modules/bootstrap/scss/type\";\n@import \"../../node_modules/bootstrap/scss/images\";\n@import \"../../node_modules/bootstrap/scss/containers\";\n@import \"../../node_modules/bootstrap/scss/grid\";\n@import \"../../node_modules/bootstrap/scss/tables\";\n@import \"../../node_modules/bootstrap/scss/forms\";\n@import \"../../node_modules/bootstrap/scss/buttons\";\n@import \"../../node_modules/bootstrap/scss/transitions\";\n@import \"../../node_modules/bootstrap/scss/dropdown\";\n@import \"../../node_modules/bootstrap/scss/button-group\";\n@import \"../../node_modules/bootstrap/scss/nav\";\n@import \"../../node_modules/bootstrap/scss/navbar\";\n@import \"../../node_modules/bootstrap/scss/card\";\n@import \"../../node_modules/bootstrap/scss/accordion\";\n@import \"../../node_modules/bootstrap/scss/breadcrumb\";\n@import \"../../node_modules/bootstrap/scss/pagination\";\n@import \"../../node_modules/bootstrap/scss/badge\";\n@import \"../../node_modules/bootstrap/scss/alert\";\n@import \"../../node_modules/bootstrap/scss/progress\";\n@import \"../../node_modules/bootstrap/scss/list-group\";\n@import \"../../node_modules/bootstrap/scss/close\";\n@import \"../../node_modules/bootstrap/scss/toasts\";\n@import \"../../node_modules/bootstrap/scss/modal\";\n@import \"../../node_modules/bootstrap/scss/tooltip\";\n@import \"../../node_modules/bootstrap/scss/popover\";\n@import \"../../node_modules/bootstrap/scss/carousel\";\n@import \"../../node_modules/bootstrap/scss/spinners\";\n@import \"../../node_modules/bootstrap/scss/offcanvas\";\n\n// Helpers\n@import \"../../node_modules/bootstrap/scss/helpers\";\n\n// Utilities\n// @import \"../../node_modules/bootstrap/scss/utilities/api\";\n// scss-docs-end import-stack\n\n// Base --\n\n@import \"recipes/__recipes.common\";\n\n @import \"recipes/boot/_boot.basic_nav\";\n@import \"recipes/boot/_boot.tabs\";\n@import \"recipes/boot/_boot.ui.tabs\";\n@import \"recipes/boot/_boot.sidebar_nav\";\n@import \"recipes/boot/_boot.toggle_icon\";\n@import \"recipes/boot/_boot.accordion\";@import \"recipes/sub/_index\";// ACC Design Alterations\n@import \"base/base\";\n\n@import \"components/interactive-extras\";\n@import \"styleguide/styleguide\";\n@import \"styleguide/__basic-html.base\";\n@import \"containers/containers\";\n\n@import 'base/table.boot';\n@import 'styleguide/__basic-html.boot';\n@import 'components/boot/_boot.buttons.override';\n@import 'components/boot/_boot.carousel.override';\n@import 'components/boot/_boot.navbar.override';\n@import 'components/boot/_boot.collapser.icon';\n@import 'components/journal/_journal.boot._navbar.override';\n/** SCSS DOC: __globalshame_framework.scss **/","/** SCSS DOC: _helpers.scss **/\n\n// @import \"fixes\";\n@import \"str-replace\";\n@import \"strip-unit\";\n@import \"class-name-constructor\";\n//@import \"clamp\";\n@import \"str-explode\";\n@import \"deep-map-check\";\n@import \"map-deep-get\";\n@import \"map-deep-set\";\n@import \"get\";\n\n@import \"make-shadow\";\n@import \"color-loop\";\n@import \"size-loop\";\n@import \"styleguide\"\n\n// Exsists in foundation\n\n\n\n","@use \"sass:map\";\n@use \"sass:selector\";\n@use \"sass:color\";\n@use \"sass:math\";\n\n/** SCSS DOC: _colors.scss **/\n\n$acc-blue: #004176 !default;\n$teal: #198dae !default;\n$green-blue: #24ccae !default;\n$dark-grey: #676a72 !default;\n$alt-grey: #a3988c !default;\n$green: #06a022 !default;\n$orange: #da8210 !default;\n$red: #dd1a1a !default;\n$blue: #2b58c0 !default;\n$purple: #976ad2 !default;\n$magenta: #c34198 !default;\n$white: rgb(251, 247, 247) !default;\n$black: rgb(19, 18, 18) !default;\n// Currently Un used in the design but part of bootstrap.\n$indigo: #6610f2 !default;\n$pink: #e83e8c !default;\n$yellow: #ffc107 !default;\n$cyan: #17a2b8 !default;\n$gray-100: mix($white, $black, 10%) !default;\n$gray-200: mix($white, $black, 20%) !default;\n$gray-300: mix($white, $black, 30%) !default;\n$gray-400: mix($white, $black, 40%) !default;\n$gray-500: mix($white, $black, 50%) !default;\n$gray-600: mix($white, $black, 60%) !default;\n$gray-700: mix($white, $black, 70%) !default;\n$gray-800: mix($white, $black, 80%) !default;\n$gray-900: mix($white, $black, 90%) !default;\n$grays: () !default;\n$grays: map-merge(\n\t(\n\t\t\"100\": $gray-100,\n\t\t\"200\": $gray-200,\n\t\t\"300\": $gray-300,\n\t\t\"400\": $gray-400,\n\t\t\"500\": $gray-500,\n\t\t\"600\": $gray-600,\n\t\t\"700\": $gray-700,\n\t\t\"800\": $gray-800,\n\t\t\"900\": $gray-900,\n\t),\n\t$grays\n);\n$colors: () !default;\n$colors: map-merge(\n\t(\n\t\t\"blue\": $blue,\n\t\t\"indigo\": $indigo,\n\t\t\"purple\": $purple,\n\t\t\"pink\": $pink,\n\t\t\"red\": $red,\n\t\t\"orange\": $orange,\n\t\t\"yellow\": $yellow,\n\t\t\"green\": $green,\n\t\t\"teal\": $teal,\n\t\t\"cyan\": $cyan,\n\t\t\"white\": $white,\n\t\t\"gray\": $gray-600,\n\t\t\"gray-dark\": $gray-800,\n\t),\n\t$colors\n);\n$theme-palette: () !default;\n\n$theme-palette: map-merge(\n\t(\n\t\tprimary: $teal,\n\t\tsecondary: $dark-grey,\n\t\tsuccess: $green,\n\t\tshade: $gray-500,\n\t\twarning: $orange,\n\t\talert: $red,\n\t\tnavigation: $blue,\n\t\taccent: $green-blue,\n\t\tinfo: $alt-grey,\n\t\thighlight: $purple,\n\t\tacc: $acc-blue,\n\t),\n\t$theme-palette\n);\n/** Setting link color variables in scss **/\n$link-color-light:\t\t\t\t\tget-theme-color(accent, 3) !default;\n$link-color-light--hover:\t\t\tget-theme-color(accent, 5) !default;\n$link-color-light--visited:\t\t\tcolor.scale( get-theme-color(accent, 2), $saturation: -70%) !default;\n$link-color-dark:\t\t\t\t\tget-theme-color(accent, -3) !default;\n$link-color-dark--hover:\t\t\tget-theme-color(accent, -5) !default;\n$link-color-dark--visited:\t\t\tcolor.scale( get-theme-color(accent, -2), $saturation: -70%) !default;\n\n\n\n\n\n$cor-green: #6fc284;\n$cor-yellow: #ffd44f;\n$cor-yellow-orange: #faa74b;\n$cor-orange: #f15d4c;\n$cor-red: #ed1c00;\n$cor-pale-pink:#fcdbd8;\n$COR: () !default;\n$COR: map-merge(\n\t(\n\t\tI: $cor-green,\n\t\tIIA: $cor-yellow,\n\t\tIIB: $cor-yellow-orange,\n\t\tIII: $cor-orange,\n\t\tIII-NOBENIFIT: $cor-orange,\n\t\tIII-HARM: $cor-red,\n\t\tIII-4: $cor-pale-pink\n\t),\n\t$COR\n);\n$loe-dark-blue: rgb(62, 111, 183);\n$loe-mid-blue: rgb(101, 156, 211);\n$loe-light-blue: rgb(161, 193, 230);\n$loe-pale-blue: rgb(181, 213, 229);\n$LOE: () !default;\n$LOE: map-merge(\n\t(\n\t\tA: $loe-dark-blue,\n\t\tB-NR: $loe-mid-blue,\n\t\tB-BR: $loe-light-blue,\n\t\tC-LD: $loe-pale-blue,\n\t\tC-EO: $loe-pale-blue,\n\t),\n\t$LOE\n);\n\n$credit-AAPA: #e8c536;\n$credit-ABP: #007a5b;\n$credit-ABPMOCII: #0b6d4c;\n$credit-ABPMOCIV: #105a3b;\n$credit-ATCEU: #775744;\n$credit-CE: #a8a8a8;\n$credit-CME: #00a15b;\n$credit-CNE: #198dae;\n$credit-AANP: #2667b2;\n$credit-CNErx: #52549e;\n$credit-COP: #775891;\n$credit-CPE: #992e2e;\n$credit-ECME: #d16528;\n$credit-IPCE:#6c36b3;\n$credit-MOC: #9a1267;\n$credit-MOCII: #9a1267;\n$credit-MOCIV: #d3248d;\n$credit-ACHE : #9733a5;\n\n$CreditColors: () !default;\n$CreditColors: map-merge(\n\t(\n\t\tAANP: $credit-AANP,\n\t\tAAPA: $credit-AAPA,\n\t\tABP: $credit-ABP,\n\t\tABPMOCII: $credit-ABPMOCII,\n\t\tABPMOCIV: $credit-ABPMOCIV,\n\t\tATCEU: $credit-ATCEU,\n\t\tCE: $credit-CE,\n\t\tCME: $credit-CME,\n\t\tCNE: $credit-CNE,\n\t\tCNErx: $credit-CNErx,\n\t\tCOP: $credit-COP,\n\t\tCPE: $credit-CPE,\n\t\tECME: $credit-ECME,\n\t\tIPCE:$credit-IPCE,\n\t\tMOC: $credit-MOCII,\n\t\tMOCII: $credit-MOCII,\n\t\tMOCIV: $credit-MOCIV,\n\t\tACHE: $credit-ACHE,\n\t),\n\t$CreditColors\n);\n$pathway-invasive-cardiology: #c8b02f;\n$pathway-congenital-heart-disease: #fdb918;\n$pathway-noninvasive-cardiology: #947b33;\n$pathway-ecg-stress-test: #d9691f;\n$pathway-vascular-medicine: #ae171c;\n$pathway-pulmonary-hypertension: #d60e7e;\n$pathway-prevention: #a01d51;\n$pathway-heart-failure: #410d49;\n$pathway-valvular-heart-disease: #4f4190;\n$pathway-arrhythmias-EP: #005b37;\n$pathway-pericardial: #0079ad;\n$pathway-acute-coronary-syndromes: #009974;\n$pathway-stable-ischemic-heart-disease: #0f3e65;\n$pathway-special: #00b6f1;\n$pathway-pandemic: #8e2582;\n$PathwayColors: () !default;\n$PathwayColors: map-merge(\n\t(\n\t\tinvasive: $pathway-invasive-cardiology,\n\t\tcongenital: $pathway-congenital-heart-disease,\n\t\tnoninvasive: $pathway-noninvasive-cardiology,\n\t\tecg: $pathway-ecg-stress-test,\n\t\tvascular: $pathway-vascular-medicine,\n\t\tpulmonary: $pathway-pulmonary-hypertension,\n\t\tprevention: $pathway-prevention,\n\t\thf: $pathway-heart-failure,\n\t\tvalvular: $pathway-valvular-heart-disease,\n\t\tarrhythmias: $pathway-arrhythmias-EP,\n\t\tpericardial: $pathway-pericardial,\n\t\tacute: $pathway-acute-coronary-syndromes,\n\t\tischemic: $pathway-stable-ischemic-heart-disease,\n\t\tspecial: $pathway-special,\n\t\tpandemic: $pathway-pandemic,\n\t),\n\t$PathwayColors\n);\n\n$pathwayV2-invt: #c8b02f;\n$pathwayV2-pchd: #fdb918;\n$pathwayV2-imag: #947b33;\n$pathwayV2-vasc: #ae171c;\n$pathwayV2-pulmvd: #d60e7e;\n$pathwayV2-valv: #4f4190;\n$pathwayV2-ep: #005b37;\n$pathwayV2-ischem: #0f3e65;\n$pathwayV2-special: #00b6f1;\n$pathwayV2-prev: #a01d51;\n$pathwayV2-hf: #410d49;\n\n$PathwayColorsV2: () !default;\n$PathwayColorsV2: map-merge(\n\t(\n\t\tinvt: $pathwayV2-invt,\n\t\tpchd: $pathwayV2-pchd,\n\t\timag: $pathwayV2-imag,\n\t\tvasc: $pathwayV2-vasc,\n\t\tpulmvd: $pathwayV2-pulmvd,\n\t\tprev: $pathwayV2-prev,\n\t\thf: $pathwayV2-hf,\n\t\tvalv: $pathwayV2-valv,\n\t\tep: $pathwayV2-ep,\n\t\tischem: $pathwayV2-ischem,\n\t\tspecial: $pathwayV2-special\n\t),\n\t$PathwayColorsV2\n);\n\n$pathwayV3-arr: #c73d53;\n$pathwayV3-prev: #9f1d51;\n$pathwayV3-chd: #006838;\n$pathwayV3-invt: #b2c83a;\n$pathwayV3-hf: #935ca6;\n$pathwayV3-ischem: #0c4166;\n$pathwayV3-imag: #fdb913;\n$pathwayV3-pulmvd: #d50e7e;\n$pathwayV3-special: #00b6f1;\n$pathwayV3-vasc: #f15a29;\n$pathwayV3-valv: #400d49;\n\n\n$PathwayColorsV3: () !default;\n$PathwayColorsV3: map-merge(\n\t(\n\t\tarr: $pathwayV3-arr,\n\t\tprev: $pathwayV3-prev,\n\t\tchd: $pathwayV3-chd,\n\t\tinvt: $pathwayV3-invt,\n\t\thf: $pathwayV3-hf,\n\t\tischem: $pathwayV3-ischem,\n\t\timag: $pathwayV3-imag,\n\t\tpulmvd: $pathwayV3-pulmvd,\n\t\tspecial: $pathwayV3-special,\n\t\tvasc: $pathwayV3-vasc,\n\t\tvalv: $pathwayV3-valv\n\n\t),\n\t$PathwayColorsV3\n);\n\n\n$twitter: #000;\n$facebook: #3b5998;\n$linkedin: #0077b5;\n$apple-store: #ea4cc0;\n$google-play: #ef6c00;\n$youtube: #bb0000;\n$instagram: #8134af;\n$SocialColors: () !default;\n$SocialColors: map-merge(\n\t(\n\t\ttwitter: $twitter,\n\t\tfacebook: $facebook,\n\t\tlinkedin: $linkedin,\n\t\tapple-store: $apple-store,\n\t\tgoogle-play: $google-play,\n\t\tyoutube: $youtube,\n\t\tinstagram: $instagram,\n\t),\n\t$SocialColors\n);\n\n\n$registry-cpmi: #f22418;\n$registry-afib:#ffb300;\n$registry-cathpci: #0086d5;\n$registry-icd: #80b800;\n$registry-impact:#4e1f73;\n$registry-pinnacle-primary:#0e4f1b;\n$registry-pinnacle-accent:#b3c4c4;\n$registry-focus:#d6560d;\n$registry-pcibleeding:#c0268e;\n$registry-laao:#00667a;\n$registry-pvi:#00947f;\n$registry-auxdata:#04adad;\n$registry-ststvt:#a20062;\n$registry-diabetes:#7893b8;\n\n$RegistryColors: () !default;\n$RegistryColors: map-merge(\n\t(\n\t\tcpmi: $registry-cpmi,\n\t\tafib: $registry-afib,\n\t\tcathpci:$registry-cathpci,\n\t\ticd:$registry-icd,\n\t\timpact:$registry-impact,\n\t\tpinnacle:$registry-pinnacle-primary,\n\t\tpinnacle-accent:$registry-pinnacle-accent,\n\t\tfocus:$registry-focus,\n\t\tpcibleeding:$registry-pcibleeding,\n\t\tlaao:$registry-laao,\n\t\tpvi:$registry-pvi,\n\t\tauxdata:$registry-auxdata,\n\t\tststvt:$registry-ststvt,\n\t\tdiabetes:$registry-diabetes\n\t),\n\t$RegistryColors\n);\n\n\n\n$journal-jc: #002e5a; \n$journal-adv:#0000FF;\t\n$journal-asia:#ec2939;\t\n$journal-tran:#1788c2;\t\n$journal-cvonc:#00ae81;\n$journal-case:#f37321;\n$journal-ep:#8a5e96;\t\n$journal-hf:#991326;\t\n$journal-invt:#038e92;\t\n$journal-imag:#c18a0e;\t\n\n$journal-label-jc: \"Journal of the American College of Cardiology\"; \n$journal-label-adv:\"JACC: Advances\";\t\n$journal-label-asia:\"JACC: Asia\";\t\n$journal-label-tran:\"JACC: Basic to Translational Science\";\t\n$journal-label-cvonc:\"JACC: CardioOncology\";\n$journal-label-case:\"JACC: Case Reports\";\n$journal-label-ep:\"JACC: Clinical Electrophysiology\";\t\n$journal-label-hf:\"JACC: Heart Failure\";\t\n$journal-label-invt:\"JACC: Cardiovascular Interventions\";\t\n$journal-label-imag:\"JACC: Cardiovascular Imaging\";\t\n\n$JournalsJACC: () !default;\n$JournalsJACC: map-merge(\n\t(\n\tjc:$journal-jc,\n\tjc-adv:$journal-adv,\n\tjc-asia:$journal-asia,\n\tjc-tran:$journal-tran,\n\tjc-cvonc:$journal-cvonc,\n\tjc-case:$journal-case,\n\tjc-ep:$journal-ep,\n\tjc-hf:$journal-hf,\n\tjc-invt:$journal-invt,\n\tjc-imag:$journal-imag,\n\n\t),\n\t$JournalsJACC\n);\n\n\n/*\n\nLink Colors: Light\n\nLink colors of a lighter shade in all of its states, default, hover, visited. Typically used to enhance visibility on dark backgrounds.\n\n$link-color-dark\t\t\t- #{$link-color-dark}; Link Color dark\t\t\t\n$link-color-dark--hover\t- #{$link-color-dark--hover}; Link Color dark--hover\t\n$link-color-dark--visited\t- #{$link-color-dark--visited}; Link Color dark--visited\t\n\nWeight:2\n\nStyleguide DesignBase.Colors.LinksLight\n */\n/*\n\nLink Colors\n\nLink colors in all of its states, default, hover, visited.\n\n\n$link-color-light\t\t\t- #{$link-color-light}; Link Color light\t\t\t\n$link-color-light--hover\t- #{$link-color-light--hover}; Link Color light--hover\t\n$link-color-light--visited\t- #{$link-color-light--visited}; Link Color light--visited\t\n$link-color-dark\t\t\t- #{$link-color-dark}; Link Color dark\t\t\t\n$link-color-dark--hover\t- #{$link-color-dark--hover}; Link Color dark--hover\t\n$link-color-dark--visited\t- #{$link-color-dark--visited}; Link Color dark--visited\t\n\nWeight:1\n\nStyleguide DesignBase.Colors.Links\n */","/* Define the \"system\" font family */\n@font-face {\n\tfont-family: system;\n\tfont-style: normal;\n\tfont-weight: 300;\n\tsrc: local('.SFNSText-Light'), local('.HelveticaNeueDeskInterface-Light'), local('.LucidaGrandeUI'),\n\t\tlocal('Ubuntu Light'), local('Segoe UI Light'), local('Roboto-Light'), local('DroidSans'), local('Tahoma');\n}\n\n$fonts: (\n\taccent: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,serif, \"slab\"',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tdisplay: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Maven Pro\",\"Muli\",\"Open Sans\",\"system\",sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tcopy: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Muli\",\"Open Sans\",\"system\",sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tui: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n) !default;\n\n\n\nhtml {\n\t-webkit-font-smoothing: antialiased;\n\t-webkit-line-break: after-white-space;\n\t-webkit-locale: 'en';\n\t-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\tline-break: white-space;\n}\n","@use \"sass:map\";\n@use \"sass:selector\";\n@use \"sass:color\";\n@use \"sass:math\";\n/** SCSS DOC: _root.cssvars.scss **/\n:root {\n\t@each $color, $value in $theme-palette {\n\t\t--#{$color}-h: #{color.hue($value)};\n\t\t--#{$color}-s: #{color.saturation($value)};\n\t\t--#{$color}-l: #{color.lightness($value)};\n\t\t--#{$color}: hsl( var(--#{$color}-h),var(--#{$color}-s),var(--#{$color}-l) );\n\t}\n\t// $link-color-light:\t\t\t\t\tget-theme-color(highlight, 3) !default;\n\t// $link-color-light--hover:\t\t\tget-theme-color(highlight, 5) !default;\n\t// $link-color-light--visited:\t\t\tcolor.scale( get-theme-color(highlight, 2), $saturation: -70%) !default;\n\t// $link-color-dark:\t\t\t\t\tget-theme-color(highlight, -3) !default;\n\t// $link-color-dark--hover:\t\t\tget-theme-color(highlight, -5) !default;\n\t// $link-color-dark--visited:\t\t\tcolor.scale( get-theme-color(highlight, -2), $saturation: -70%) !default;\n\t\n\t\n\t--link-color-light-h:#{color.hue($link-color-light)};\n\t--link-color-light-s:#{color.saturation($link-color-light)};\n\t--link-color-light-l:#{color.lightness($link-color-light)};\n\t--link-color-light: hsl( var(--link-color-light-h),var(--link-color-light-s),var(--link-color-light-l) );\n\t--link-color-light--hover-h:#{color.hue($link-color-light--hover)};\n\t--link-color-light--hover-s:#{color.saturation($link-color-light--hover)};\n\t--link-color-light--hover-l:#{color.lightness($link-color-light--hover)};\n\t--link-color-light--hover: hsl( var(--link-color-light--hover-h),var(--link-color-light--hover-s),var(--link-color-light--hover-l) );\n\t--link-color-light--visited-h:#{color.hue($link-color-light--visited)};\n\t--link-color-light--visited-s:#{color.saturation($link-color-light--visited)};\n\t--link-color-light--visited-l:#{color.lightness($link-color-light--visited)};\n\t--link-color-light--visited: hsl( var(--link-color-light--visited-h),var(--link-color-light--visited-s),var(--link-color-light--visited-l) );\n\t\n\n\t--link-color-dark-h:#{color.hue($link-color-dark)};\n\t--link-color-dark-s:#{color.saturation($link-color-dark)};\n\t--link-color-dark-l:#{color.lightness($link-color-dark)};\n\t--link-color-dark: hsl( var(--link-color-dark-h),var(--link-color-dark-s),var(--link-color-dark-l) );\n\t--link-color-dark--hover-h:#{color.hue($link-color-dark--hover)};\n\t--link-color-dark--hover-s:#{color.saturation($link-color-dark--hover)};\n\t--link-color-dark--hover-l:#{color.lightness($link-color-dark--hover)};\n\t--link-color-dark--hover: hsl( var(--link-color-dark--hover-h),var(--link-color-dark--hover-s),var(--link-color-dark--hover-l) );\n\t--link-color-dark--visited-h:#{color.hue($link-color-dark--visited)};\n\t--link-color-dark--visited-s:#{color.saturation($link-color-dark--visited)};\n\t--link-color-dark--visited-l:#{color.lightness($link-color-dark--visited)};\n\t--link-color-dark--visited: hsl( var(--link-color-dark--visited-h),var(--link-color-dark--visited-s),var(--link-color-dark--visited-l) );\n\n}\n\n@if($usingFontAwesome){\n\t%font-awesome-pro {\n\t\t-webkit-font-smoothing: antialiased;\n\t\tdisplay: inline-block;\n\t\tfont-style: normal;\n\t\tfont-variant: normal;\n\t\ttext-rendering: auto;\n\t\tline-height: 1;\n\t\tfont-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro';\n\t\tfont-weight: 900;\n\t}\n}\n",":root {\n // Note: Custom variable values only support SassScript inside `#{}`.\n\n // Colors\n //\n // Generate palettes for full colors, grays, and theme colors.\n\n @each $color, $value in $colors {\n --#{$variable-prefix}#{$color}: #{$value};\n }\n\n @each $color, $value in $grays {\n --#{$variable-prefix}gray-#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors {\n --#{$variable-prefix}#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors-rgb {\n --#{$variable-prefix}#{$color}-rgb: #{$value};\n }\n\n --#{$variable-prefix}white-rgb: #{to-rgb($white)};\n --#{$variable-prefix}black-rgb: #{to-rgb($black)};\n --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};\n --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};\n\n // Fonts\n\n // Note: Use `inspect` for lists so that quoted items keep the quotes.\n // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};\n --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};\n --#{$variable-prefix}gradient: #{$gradient};\n\n // Root and body\n // stylelint-disable custom-property-empty-line-before\n // scss-docs-start root-body-variables\n @if $font-size-root != null {\n --#{$variable-prefix}root-font-size: #{$font-size-root};\n }\n --#{$variable-prefix}body-font-family: #{$font-family-base};\n --#{$variable-prefix}body-font-size: #{$font-size-base};\n --#{$variable-prefix}body-font-weight: #{$font-weight-base};\n --#{$variable-prefix}body-line-height: #{$line-height-base};\n --#{$variable-prefix}body-color: #{$body-color};\n @if $body-text-align != null {\n --#{$variable-prefix}body-text-align: #{$body-text-align};\n }\n --#{$variable-prefix}body-bg: #{$body-bg};\n // scss-docs-end root-body-variables\n // stylelint-enable custom-property-empty-line-before\n}\n","// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix\n\n\n// Reboot\n//\n// Normalization of HTML elements, manually forked from Normalize.css to remove\n// styles targeting irrelevant browsers while applying new styles.\n//\n// Normalize is licensed MIT. https://github.com/necolas/normalize.css\n\n\n// Document\n//\n// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n\n// Root\n//\n// Ability to the value of the root font sizes, affecting the value of `rem`.\n// null by default, thus nothing is generated.\n\n:root {\n @if $font-size-root != null {\n font-size: var(--#{$variable-prefix}root-font-size);\n }\n\n @if $enable-smooth-scroll {\n @media (prefers-reduced-motion: no-preference) {\n scroll-behavior: smooth;\n }\n }\n}\n\n\n// Body\n//\n// 1. Remove the margin in all browsers.\n// 2. As a best practice, apply a default `background-color`.\n// 3. Prevent adjustments of font size after orientation changes in iOS.\n// 4. Change the default tap highlight to be completely transparent in iOS.\n\n// scss-docs-start reboot-body-rules\nbody {\n margin: 0; // 1\n font-family: var(--#{$variable-prefix}body-font-family);\n @include font-size(var(--#{$variable-prefix}body-font-size));\n font-weight: var(--#{$variable-prefix}body-font-weight);\n line-height: var(--#{$variable-prefix}body-line-height);\n color: var(--#{$variable-prefix}body-color);\n text-align: var(--#{$variable-prefix}body-text-align);\n background-color: var(--#{$variable-prefix}body-bg); // 2\n -webkit-text-size-adjust: 100%; // 3\n -webkit-tap-highlight-color: rgba($black, 0); // 4\n}\n// scss-docs-end reboot-body-rules\n\n\n// Content grouping\n//\n// 1. Reset Firefox's gray color\n// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field\n\nhr {\n margin: $hr-margin-y 0;\n color: $hr-color; // 1\n background-color: currentColor;\n border: 0;\n opacity: $hr-opacity;\n}\n\nhr:not([size]) {\n height: $hr-height; // 2\n}\n\n\n// Typography\n//\n// 1. Remove top margins from headings\n// By default, `
`-`
` 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 `
`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 `
` 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-`\n\t
\n\n\nWeight: 1\n\nStyleguide Recipes ACCBranded Nav.Simple\n\n*/\n\n/*\nNav Dropdown Simple\n\nThe Header Nav of ACC.org\n\nMarkup:\n\n\nWeight: 1\n\n\tStyleguide Recipes ACCBranded Nav.Dropdowns.Simple\n\n*/\n\n/*\nNav Dropdown with Sub Links\n\nThe Header Nav of ACC.org\n\nMarkup:\n\n\nWeight: 2\n\nStyleguide Recipes ACCBranded Nav.Dropdowns.Sublinks\n\n*/\n\n/*\nNav Dropdown with Alternate Content in Links\n\nIt is easy to add images in replace of text links in the navs. \n\nMarkup:\n\n\nWeight: 3\n\nStyleguide Recipes ACCBranded Nav.Dropdowns.Alt Content\n\n*/\n\n/* \n\nBranded Nav \n\nThe Header Nav of ACC.org \n\nMarkup:\n
![](\"https://raw.githubusercontent.com/ACC-Style/Arches/refs/heads/master/src/img/temp/logo-1.svg\"/){kind=logo}
\n\nMarkupWrapperClasses: max-w_40 relative h_20 w_100\n\n\nWeight:10\n\nStyleguide Sub.Data.Sponsor.Logo\n*/\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n\nWeight:25\n\nStyleguide Sub.Data.Sponsor.WebAddress\n*/\n/*\nWebsite Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}\">Website\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.WebLink\n*/\n/* Nav Recipes.00x */\n/*\nCall to Action Buttons\n\nDescription: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.\n\nSign Up - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.\nPurchase - Used to prompt users to make a purchase. It creates a sense of urgency and directs users to complete a transaction for a product or service.\nLearn More - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.\nSubscribe - Used to encourage users to subscribe to a newsletter, mailing list, or updates from a website or company. It aims to build a relationship with users and keep them engaged.\nGet Started - Used to initiate user onboarding or guide users through the first steps of using a product or service. It prompts users to begin their journey and experience the offering.\n\nMarkup:\n\n\n\nNOTE: The Call to Action Button component is ideal for creating prominent buttons that attract user attention and encourage them to take a specific action, such as signing up, making a purchase, or exploring more content.\n\n\nWeight:1000\n\nStyleguide HTML.Inputs.Button.CTA\n*/\n/*\nButtons\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button\n*/\n/*\nButtons Small\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.SM\n*/\n/*\nButtons Large\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.LG\n*/\n/* Recipes.40 */\n.address {\n font-style: unset;\n}\n\n@media only screen and (min-width: 640px) {\n .reverse-indent {\n display: inline-block;\n margin-left: 1em;\n padding-right: 1em;\n text-indent: -1em;\n width: 100%;\n }\n .reverse-indent:after {\n content: \"\";\n display: table;\n clear: both;\n }\n}\n/*\nGeneric Footer\n\nThis defines the web footer. \n\nMarkup:\n\n\nSubComponents: \nSub.Component.Navigation.Footer.Address - Addresses\nSub.Component.Navigation.Footer.Social - Social Links\nSub.Component.Navigation.Footer.ACCProductLinks - Sister Sites\nSub.Component.Navigation.Footer.Subfooter - Sub Footer\nSub.Component.Navigation.Footer.Cite - Citation for the Site\n\nWeight: 40\n\nStyleguide Component.Navigation.Footer\n*/\n/*\nSub Footer\n\nDescription: ACC has some basic legal information that should be on every property. \n\nMarkup:\n\n\n\n\n\nWeight: 0\n\nStyleguide Sub.Component.Navigation.Footer.Subfooter\n*/\n/*\n\tCite and Copyright\n\n\tContains copy right \n\n\tMarkup:\n