{"version":3,"sources":["journal_recipe.scss","setup/config/_fonts.scss","journal_recipe.css"],"names":[],"mappings":"AAuGQ,0JAAA,CCtGR,WACC,kBAAA,CACA,iBAAA,CACA,eAAA,CACA,uMC6CD,CDYA,KACC,kCAAA,CAEA,mBAAA,CACA,yCAAA,CAFA,oCAAA,CAGA,sBCVD","file":"../journal_recipe.min.css.gz","sourcesContent":["/** Pattern Sheet **/\n\n\n/**  Build Comment: NaN Pattern Sheet  **/ \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/** SCSS DOC: _setup.none.scss **//** 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;@function color-block($colorName, $modifier, $modifier-label, $font-color-class) {\n  $return:\"<div class='p_3 bg_#{$colorName}-#{$modifier-label}'><h2 class=\"#{$font-color-class}\">#{$colorName}-#{$modifier-label}</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none #{$font-color-class}'><li class='flex flex_inline p_2 #' style='background-color: #{get-theme-color( $colorName, $modifier, HEX )};'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#{get-theme-color($colorName, $modifier)}</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( #{get-theme-color( $colorName, $modifier, RGB )} );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>#{get-theme-color($colorName, $modifier, RGB)}</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( #{get-theme-color( $colorName, $modifier, HSL )} );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>#{get-theme-color($colorName, $modifier, HSL)}</span> </li> </ul> </div>\";\n  @return $return;\n}\n\n\n\n\n\n@each $colorName, $color in $theme-palette{\n\n/*\n\n#{$colorName}: Color Variations \n \nThe Modified versions of the #{$colorName} color from this theme\n \nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_#{$colorName}\"\n>\n\t\t#{ color-block($colorName, -5,n5,c_white)}\n\t\t#{ color-block($colorName, -4,n4,c_white)}\n\t\t#{ color-block($colorName, -3,n3,c_white)}\n\t\t#{ color-block($colorName, -2,n2,c_white)}\n\t\t#{ color-block($colorName, -1,n1,c_white)}\n\t\t#{ color-block($colorName, 0,0,c_white)}\n\t\t#{ color-block($colorName, 1,1,c_black)}\n\t\t#{ color-block($colorName, 2,2,c_black)}\n\t\t#{ color-block($colorName, 3,3,c_black)}\n\t\t#{ color-block($colorName, 4,4,c_black)}\n\t\t#{ color-block($colorName, 5,5,c_black)}\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n \nStyleguide DesignBase.CrayonBox.#{$colorName}\n\n*/\n}\n\n/*\nCrayon Box\n \nThis is all of the colors of the theme broken out with its modifications written in hex code.\n \n\nWeight:0\n\nHideCodeBlock: display_none \n \nStyleguide DesignBase.CrayonBox\n*/\n$unitless: (\n\t\t0: 0,\n\t\tn5: -5,\n\t\tn4: -4,\n\t\tn3: -3,\n\t\tn2: -2,\n\t\tn1: -1,\n\t\t1: 1,\n\t\t2: 2,\n\t\t3: 3,\n\t\t4: 4,\n\t\t5: 5,\n\t);\n/*Adobe XD Color Map*/\n@each $colorName, $color in $theme-palette{\n    @each $label, $value in $unitless{\n       /* $xd-color_#{$colorName}-#{$label}: #{get-theme-color($colorName, $value)}*/\n    }\n}/*\n\nBasic HTML\n\nThe Arches Design System, at its core, is a Utility Class Styling Design.  It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles.  Arches rely on the browser or branding defaults for basic HTML styling.  Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation.  \n\nWeight: -100\n\nStyleguide HTML\n*/\n/*\n\nReading Typography\n\nReading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the \"reading-typography\" class is used on the parent container.  Please note that the reading typography can still look a bit different look depending on the brand or the framework. <table><thead><tr><th>modifier class</th><th>customization</th><th>usage</th></tr></thead><tbody><tr><td><code>.inherit_color</code></td><td>removes all color rules from colored typography and sets it to inherit.</td><td>inverting a block of typography where all text and headlines should be white.</td></tr><tr><td><code>.font-size_up</code></td><td>shifts all typography up one font size step</td><td>intro blocks of text where the text. Or in articles where you can shift all text up a size.</td></tr><tr><td>`.font-size_down`</td><td>shifts all typography down one font size step.</td><td>citation blocks or boiler plate content where the text should be smaller and less impactful.</td></tr><tr><td><code>.links_dark</code></td><td>turns all links to the dark color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class.</td></tr><tr><td><code>.links_light</code></td><td>turns all links to the light color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class when text is on a dark background.</td></tr></tbody></table><small class=\"c_highlight block\">* there are further advanced features if you want to apply CSS Property Overrides.</small> \n\nMarkup:\n<section class=\"max-w_65 reading-typography m_auto\">\n<div class=\"relative\">\n\t<picture class=\"w_100\">\n\t\t<source class=\"w_100\" srcset=\"{{> Sub.Placeholder.Image.1200x300 }}\" media=\"(min-width: 1200px)\">\n\t\t<source class=\"w_100\" srcset=\"{{> Sub.Placeholder.Image.1024x256 }}\" media=\"(min-width: 768px)\">\n\t\t<source class=\"w_100\" srcset=\"{{> Sub.Placeholder.Image.600x300 }}\" media=\"(min-width: 400px)\"> <source class=\"w_100\" srcset=\"https://placeholder.pics/svg/400x300/171C6A-5A6CFF/FFFAEE/300x400\" media=\"(min-width: 400px)\">\n\t\t<img src=\"{{> Sub.Placeholder.Image.300x400 }}\" class=\"w_100\" alt=\"\">\n\t</picture>\n    <div class=\"absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4\">\n        <div class=\"bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light\">\n            <span class=\"font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3\">User Name</span>\n            <a class=\"btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold\" href=\"#\">Log Out <i class=\"fas fa-sign-out p-l_2\"></i></a>\n        </div>\n    </div>\n</div>\n  <h1>This is the primary heading and there should only be one of these per page</h1>\n  <h6>sub heading</h6>\n    <p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>\n    <ul>\n        <li>This is a list item</li>\n        <li>So is this - there could be more</li>\n        <li>Make sure to style list items to:\n            <ul>\n                <li>Not forgetting child list items</li>\n                <li>Not forgetting child list items</li>\n                <li>Not forgetting child list items</li>\n                <li>Not forgetting child list items</li>\n            </ul>\n        </li>\n        <li>A couple more</li>\n        <li>top level list items</li>\n    </ul>\n    <p>Don't forget <strong>Ordered lists</strong>:</p>\n    <ol>\n       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n       <li>Aliquam tincidunt mauris eu risus.\n        <ol>\n            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n            <li>Aliquam tincidunt mauris eu risus.</li>\n        </ol>\n        </li>\n       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n       <li>Aliquam tincidunt mauris eu risus.\n    </li></ol>\n    <h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <table>\n    <thead><tr>\n            <th>Table Heading</th>\n            <th>Table Heading</th>\n        </tr></thead>\n        <tbody>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n    </tbody></table>    \t\n    <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <blockquote><p>“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”</p></blockquote>\n    <h4>A sub heading which is not as important as the second, but should be used with consideration</h4>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <pre><code>\n#header h1 a { \n    display: block; \n    width: 300px; \n    height: 80px; \n}\n</code></pre>\n    <h5>A sub heading which is not as important as the second, but should be used with consideration</h5>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <dl>\n   <dt>Definition list</dt>\n   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.</dd>\n\t   <dt>Lorem ipsum dolor sit amet</dt>\n\t   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.</dd>\n\t</dl>\n\t<h6>This heading plays a relatively small bit part role, if you use it at all</h6>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n<section>\n<details>\n        <summary ><strong>Table of Contents</strong></summary>\n        <div>\n            <ol>\n                <li data-line=\"0\" dir=\"auto\">How to Prepare for the Boards</li>\n                <li data-line=\"1\" dir=\"auto\">General Principles of Cardiovascular Medicine\n                </li>\n                <li data-line=\"2\" dir=\"auto\">Arrhythmias</li>\n                <li data-line=\"3\" dir=\"auto\">Coronary Artery Disease</li>\n                <li data-line=\"4\" dir=\"auto\">Heart Failure &amp; Cardiomyopathy</li>\n                <li data-line=\"5\" dir=\"auto\">Valvular Disease</li>\n                <li data-line=\"6\" dir=\"auto\">Pericardial Disease</li>\n                <li data-line=\"7\" dir=\"auto\">Congenital Heart Disease</li>\n                <li data-line=\"8\" dir=\"auto\">Vascular Diseases</li>\n                <li data-line=\"9\" dir=\"auto\">Systemic Hypertension and Hypotension</li>\n                <li data-line=\"10\" dir=\"auto\">Pulmonary Circulation Disorders</li>\n                <li data-line=\"11\" dir=\"auto\">Systemic Disorders Affecting the Circulatory\n                    System</li>\n                <li data-line=\"12\" dir=\"auto\">\n                    Miscellaneous\n                    <ul>\n                        <li data-line=\"13\" dir=\"auto\">Cardiovascular Genetics</li>\n                        <li data-line=\"14\" dir=\"auto\">CPR, Post-Resuscitation Care</li>\n                        <li data-line=\"15\" dir=\"auto\">Cardiac Critical Care</li>\n                        <li data-line=\"16\" dir=\"auto\">Sleep Disordered Breathing</li>\n                        <li data-line=\"17\" dir=\"auto\">Sports Cardiology</li>\n                        <li data-line=\"18\" dir=\"auto\">Pregnancy and Cardiac Disease</li>\n                        <li data-line=\"19\" dir=\"auto\">Cardiovascular Operative Management\n                        </li>\n                        <li data-line=\"20\" dir=\"auto\">Pharmacology</li>\n                        <li data-line=\"21\" dir=\"auto\">General Principles of Cardiovascular\n                            Medicine</li>\n                    </ul>\n                </li>\n            </ol>\n        </div>\n    </details>\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nStyleguide HTML.Typography\n\n*/\n\n/*\n\nReading Typography Modified\n\nThis text is used as a lorem content in many of our containers.  \n\n.color_inherit.bg_acc.c_white.p_4.links_light    - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.\n\nMarkup:\n{{> Sub.Placeholder.Typography  modifier_class=\" color_inherit bg_acc c_white p_4 links_light\"}}\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nMarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50\n\nStyleguide HTML.Typography.Sample\n\n*/\n\n\n\n\n\n /*\n\nLinks States\n\nThis shows the look and feel of all the states of a text link, color, underline and decoration.\n\nMarkup:\n<ul class=\"flex flex_column ul_none\">\n    <li class=\"p_3\"><a href=\"#random2\">NORMAL: Donec non enim</a></li>\n    <li class=\"p_3\"><a href=\"#random1\" class=\"pseudo-class-hover\">HOVER:  Normal Donec non enim</a>\n</li>\n    <li class=\"p_3\"><a href=\"#random3\" class=\"pseudo-class-visited\">VISITED: Normal Donec non enim</a>\n</li>\n</ul>\n\n\nMarkupWrapperClasses: reading-typography\n\nWeight:100\n\nStyleguide HTML.Typography.Links\n */\n/*\n Design Base\n\n Arches is design inspired by a pad of paper in the hand.  Subtle Textures and Layer shadows keep the readability very high. \n\n Weight: -1000\n\n Styleguide DesignBase\n*/\n\n/*\n\nFonts \n\nThe ACC is focused on stable, conservative, clean fonts.   Roboto Slab is the standard serif fonts across all products at the ACC.\n\n Styleguide DesignBase.Fonts\n*/\n\n/*\n\nAccent #{map-deep-get($fonts, accent, name)}\n \nA beautiful Accent font that shows a complexity and texture to the fonts used in the design. \n\n<div class=\"font_accent\">\n\t<h2 class=font_accent group-divide-bottom font--name small-12\">\n\t\t#{map-deep-get($fonts, accent, name)}\n\t\t<span class=\"sub-line\">font-family: #{map-deep-get($fonts, accent, stack)}</span>\n\t</h2>\n\t<div class=\"font flex\">\n\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">#{map-deep-get($fonts, accent, short-name)}<span></span></span></div>\n\t\t<div class=\"flex_auto font--example\">\n\t\t\t<h3 class=font_accent font_6\">Accent Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: -10\n\n Styleguide DesignBase.Fonts.Accent\n*/\n/*\n\nDisplay: #{map-deep-get($fonts, display, name)}\n \n A Slick font that has a slight interest used for headers and UI. \n\n<div class=\"font_display\">\n\t<h2 class=\"font_display group-divide-bottom font--name small-12\">\n\t\t#{map-deep-get($fonts, display, name)}\n\t\t<span class=\"sub-line\">font-family: #{map-deep-get($fonts, display, stack)}</span>\n\t</h2>\n\t<div class=\"font flex grid-padding-x grid-padding-y\">\n\t\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">#{map-deep-get($fonts, display, short-name)}<span></span></span></div>\n\t\t<div class=\"flex_auto font--example\">\n\t\t\t<h3 class=\"font_display\">Display Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: -5\n\n Styleguide DesignBase.Fonts.Display\n*/\n\n/*\n\nCopy: #{map-deep-get($fonts, 'copy', 'name')}\n \n A clean font for content and text of none UI elements. \n\n<div class=\"font_copy\">\n\t<h2 class=\"group-divide-bottom font--name small-12\">\n\t\t\"#{map-deep-get($fonts, 'copy', 'name')}\"\n\t\t<span class=\"sub-line\">font-family: \"#{map-deep-get($fonts, 'copy', 'stack')}\"</span>\n\t</h2>\n\t<div class=\"font flex grid-padding-x grid-padding-y\">\n\t\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">#{map-deep-get($fonts, copy, short-name)}<span></span></span></div>\n\t\t<div class=\"felx_auto font--example\">\n\t\t\t<h3 class=\"\">Content Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: 0\n\n Styleguide DesignBase.Fonts.Copy\n*/\n/*\n\nUI: #{map-deep-get($fonts, 'ui', 'name')}\n \n A clean font for content and text of none UI elements. \n\n<div class=\"font_ui\">\n\t<h2 class=\" group-divide-bottom font--name small-12\">\n\t\t\"#{map-deep-get($fonts, 'ui', 'name')}\"\n\t\t<span class=\"sub-line\">font-family: \"#{map-deep-get($fonts, 'ui', 'stack')}\"</span>\n\t</h2>\n\t<div class=\"font flex grid-padding-x grid-padding-y\">\n\t\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">#{map-deep-get($fonts, ui, short-name)}<span></span></span></div>\n\t\t<div class=\"felx_auto font--example\">\n\t\t\t<h3 class=\"\">Content Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: 1\n\n Styleguide DesignBase.Fonts.UI\n*/\n\n\n\n@if $debug-trace {\n@debug \"The $usingFontAwesome variable is set to => #{$usingFontAwesome}\";\n}\n@if($usingFontAwesome == true ){\n\t/*\n\t\n\tIcons: Font Awesome\n\t\n\t<div>\n\t<h3>The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications.</h3><p> The organization uses <strong>version 6</strong> of Font Awesome's icon sets.</p><p> The ACC recognizes that icons convey meaning and has developed an icon dictionary to ensure consistent usage of icons throughout its digital platforms. This approach enhances the user experience by providing clear and concise communication through the use of symbols, while the Font Awesome library enables the ACC to quickly and efficiently incorporate high-quality icons into its digital content.<p><div class=\"text_center\"><a class=\"btn btn-primary m-x_3\" href=\"https://fontawesome.com/icons\">Font Awesome</a><a class=\"btn btn-primary m-x_3\" href=\"https://acc-style.github.io/IconDictionary/\">Icon Dictionary</a></div></div>\n\t\n\n\t\n\t\n\tStyleguide DesignBase.IconsTrue\n\t*/\n\n}@else{\n\t/*\n\t\n\tIcons: Not Using Enteprise Solution\n\t\n\tThere are some subtle effects that happen when a platform doesn't use the enteprise solution for fonts. The most prominent is the loss of the icon link decoration standard with in content. \n\t\n\t\n\tMarkupWrapperClasses:\n\n\tNOTE: Not Using Enteprise Solution of Font Awesome\n\t\n\t\n\tStyleguide DesignBase.IconsFalse\n\t*/\n\n}\n\n\n\n/*\n\nACC's Blue\n\n$acc-blue            -  #{$acc-blue}; acc\n\nStyleguide DesignBase.Colors.ACC\n*/\n/*\n\nTheme Colors \n\nColors are based off of the ACC Scrub Colors.\n\nmap-get($theme-palette, primary)              -  #{ map-get($theme-palette, primary)}; primary\nmap-get($theme-palette, secondary)            -  #{ map-get($theme-palette, secondary)}; secondary\nmap-get($theme-palette, shade)           \t  - #{ map-get($theme-palette, shade)}; shade\nmap-get($theme-palette, accent)               -  #{ map-get($theme-palette, accent)};  accent\nmap-get($theme-palette, info)                 -  #{ map-get($theme-palette, info)}; info\nmap-get($theme-palette, highlight)            -  #{ map-get($theme-palette, highlight)}; highlight\n\nWeight:-1000\n\nStyleguide DesignBase.Colors\n */\n\n/*\n\nAction Colors  \n\nActionable colors used to respond to user inputs and messaging.\n\nmap-get($theme-palette, alert)                -  #{ map-get($theme-palette, alert)}; alert\nmap-get($theme-palette, warning)              -  #{ map-get($theme-palette, warning)}; warning\nmap-get($theme-palette, success)              -  #{ map-get($theme-palette, success)};  success\nmap-get($theme-palette, navigation)           -  #{ map-get($theme-palette, navigation)}; navigation\n\nStyleguide DesignBase.Colors.Actions\n*/\n\n// Other Color Collections from the college\n\n/*\n\nColor Coding  \n\nColor Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an associated meaning. All of these colors are just used for reference and have no associated decorator classes.  You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors. \n\nStyleguide DesignBase.Colors.ColorCoding\n\n */\n/*\n\nCOR Colors  \n\n(COR) Class of Recommendation is a color collect used in Guideline recommendations.\n\n$cor-green                 \t- #{$cor-green}; I\n$cor-yellow              \t- #{$cor-yellow}; IIA\n$cor-yellow-orange          - #{$cor-yellow-orange}; IIA\n$cor-orange               \t- #{$cor-orange};III and III-NoHarm\n$cor-red               \t\t- #{$cor-red}; III-harm\n\nWeight: 10\n\nStyleguide DesignBase.Colors.ColorCoding.COR\n\n */\n\n/*\n\nLOE Colors  \n\n(LOE) level of Evidence is a color collect used in Guideline recommendations.\n\n$loe-dark-blue                 \t- #{$loe-dark-blue};LOE A\n$loe-mid-blue              \t\t- #{$loe-mid-blue };LOE B-R\n$loe-light-blue                \t- #{$loe-light-blue };LOE B-NR\n$loe-pale-blue                \t- #{$loe-pale-blue }; LOE C\n\nWeight: 10\n\nStyleguide DesignBase.Colors.ColorCoding.LOE\n\n */\n/*\n\nCredit Type Color Coding  \n\nCredit Types in the ACC have a specific color coding.\n\n$credit-AAPA                    - #{$credit-AAPA    }; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit  \n$credit-ABP                     - #{$credit-ABP     }; ABP-MOC: American Board of Pediatrics   \n$credit-ABPMOCII                     - #{$credit-ABPMOCII     }; ABP-MOC 2: American Board of Pediatrics MOC 2  \n$credit-ABPMOCIV                     - #{$credit-ABPMOCIV     }; ABP-MOC 4: American Board of Pediatrics MOC 4 \n$credit-ATCEU                   - #{$credit-ATCEU   }; ATCEU: Athletic Trainer Continuing Education Unit   \n$credit-CE                      - #{$credit-CE      }; CE: Continuing CCA\\Tech Education  \n$credit-CME                     - #{$credit-CME     }; CME: AMA PRA Category 1TM Credit(s)    \n$credit-CNE                     - #{$credit-CNE     }; CNE: Continuing Nurse Education  \n$credit-CNErx                   - #{$credit-CNErx   }; CNErx: Continuing Nursing Education Pharmaceutical   \n$credit-COP                     - #{$credit-COP     }; COP: Certificate of Participation  \n$credit-CPE                     - #{$credit-CPE     }; CPE: Continuing Pharmacy Education \n$credit-ECME                    - #{$credit-ECME    }; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit\n$credit-IPCE                    - #{$credit-IPCE    }; IPCE: Interprofessional Continuing Education Credit\n$credit-MOCII                   - #{$credit-MOCII   }; MOC II: ABIM MOC Part II  \n$credit-MOCIV                   - #{$credit-MOCIV   }; MOC IV: ABIM MOC Part IV    \n\nWeight: 0\n\nStyleguide DesignBase.Colors.ColorCoding.Credits\n\n*/\n/*\n\nClinical Pathway Colors  \n\nEach of the clinical pathways has a distinctive color.  These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.\n\n$pathway-acute-coronary-syndromes \t\t\t\t\t\t- #{$pathway-acute-coronary-syndromes};  Acute Coronary Syndromes\n$pathway-arrhythmias-EP \t\t\t\t\t\t\t\t- #{$pathway-arrhythmias-EP};  arrhythmias and Clinical EP\n$pathway-congenital-heart-disease \t\t\t\t\t\t- #{$pathway-congenital-heart-disease};  Congenital Heart Disease\n$pathway-ecg-stress-test \t\t\t\t\t\t\t\t- #{$pathway-ecg-stress-test};  Standard ECG, Stress Test\n$pathway-heart-failure \t\t\t\t\t\t\t\t\t- #{$pathway-heart-failure};  Heart Failure and Cardiomyopathies\n$pathway-invasive-cardiology \t\t\t\t\t\t\t- #{$pathway-invasive-cardiology};  Invasive Cardiology Angiography and Intervention\n$pathway-noninvasive-cardiology \t\t\t\t\t\t- #{$pathway-noninvasive-cardiology};  Noninvasive Cardiology\n$pathway-pandemic \t\t\t\t\t\t\t\t\t\t- #{$pathway-pandemic};  Pandemic \"Covid\"\n$pathway-pericardial \t\t\t\t\t\t\t\t\t- #{$pathway-pericardial};  pericardial Disease\n$pathway-prevention \t\t\t\t\t\t\t\t\t- #{$pathway-prevention};  Prevention\n$pathway-pulmonary-hypertension \t\t\t\t\t\t- #{$pathway-pulmonary-hypertension};  Pulmonary Hypertension and Venous Thromboembolic Disease\n$pathway-special \t\t\t\t\t\t\t\t\t\t- #{$pathway-special};  Special\n$pathway-stable-ischemic-heart-disease \t\t\t\t- #{$pathway-stable-ischemic-heart-disease};  Stable ischemic Heart Disease\n$pathway-valvular-heart-disease \t\t\t\t\t\t- #{$pathway-valvular-heart-disease};  Valvular Heart Disease\n$pathway-vascular-medicine \t\t\t\t\t\t\t\t- #{$pathway-vascular-medicine};  Vascular Medicine\n\nWeight: -1\n\nStyleguide DesignBase.Colors.ColorCoding.Pathways\n\n*/\n/*\n\nRegistry CC\n\nCredit Type Color codes in the ACC have a specific color coding.\n\n$registry-cpmi                  -   #{$registry-cpmi              };    Chest Pain MI Registry\n$registry-afib                  -   #{$registry-afib              };    AFib Ablation Registry\n$registry-cathpci               -   #{$registry-cathpci           };    CathPCI Registry\n$registry-icd                   -   #{$registry-icd               };    ICD Registry\n$registry-impact                -   #{$registry-impact            };    IMPACT Registry\n$registry-pinnacle-primary      -   #{$registry-pinnacle-primary  };    PINNACLE Registry (Primary)\n$registry-pinnacle-accent       -   #{$registry-pinnacle-accent   };    PINNACLE Registry (Accent)\n$registry-focus                 -   #{$registry-focus             };    Patient Navigator Focus MI\n$registry-pcibleeding           -   #{$registry-pcibleeding       };    Reducing Risk PCI Bleeding\n$registry-laao                  -   #{$registry-laao              };    LAAO Registry\n$registry-pvi                   -   #{$registry-pvi               };    PVI Registry\n$registry-auxdata               -   #{$registry-auxdata           };    Auxiliar Data Collection\n$registry-ststvt                -   #{$registry-ststvt            };    STS ACC TVT Registry\n$registry-diabetes              -   #{$registry-diabetes          };    Diabetes Collaborative \n\nWeight: 2000\n\nStyleguide  DesignBase.Colors.ColorCoding.Registry\n\n*/\n/*\n\nJournal\n\nJournals of JACC have specific branding colors.\n\n$journal-jc             - #002e5a;                       Journal of the American College of Cardiology: (JC)\n$journal-adv            - #0000FF;                      JACC: Advances: (JC-ADV)\n$journal-asia           - #ec2939;                     JACC: Asia: (JC-ASIA)\n$journal-tran           - #1788c2;                     JACC: Basic to Translational Science: (JC-TRAN)\n$journal-cvonc          - #00ae81;                    JACC: CardioOncology: (JC-CVONC)\n$journal-case           - #f37321;                     JACC: Case Reports: (JC-CASE)\n$journal-ep             - #8a5e96;                       JACC: Clinical Electrophysiology: (JC-EP)\n$journal-hf             - #991326;                       JACC: Heart Failure: (JC-HF)\n$journal-invt             - #038e92;                   JACC: Cardiovascular Interventions: (JC-INVT)\n$journal-imag            - #c18a0e;                    JACC: Cardiovascular Imaging: (JC-IMAG)\n\n\nWeight: 2000\n\nStyleguide  DesignBase.Colors.ColorCoding.Journals\n\n*/\n/*\n\nSocial Network Colors  \n\nEach of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.\n\n$twitter            -   #000;  \t\ttwitter     \n$facebook           -   #3b5998;  \tfacebook    \n$linkedin           -   #007bb6;  \tlinkedin    \n$apple-store        -   #ea4cc0;  \tapple-store \n$google-play        -   #689f38;  \tgoogle-play \n$youtube            -   #bb0000;  \tyoutube     \n\n\n\nWeight: 100\n\nStyleguide DesignBase.Colors.ColorCoding.Social Networks\n\n*/\n\n/*\n\tTextures\n\n\tAll textures in the Arches design are a subtle variation of transparent.   Allowing for colors to bleed through from behind.  Different textures have intentions or are reserved for certain usagaes. \n\n\t.texture_light                       \t\t- Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of. \n\t.texture_medium            \t\t\t\t\t- medium texture are used for area that are hidden away.  Collapsable navs, areas, or sidebars ususaly use the medium texture.\n\t.texture_dust            \t\t\t\t\t- Dust is the most transparent texture allowing for the color of the background to show through the most.  This is used for the painted tops of cards, or score bars.\n\t.texture_dark              \t\t\t\t\t- This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.  \n\t.texture_cross            \t\t\t\t\t- A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.\n\t.texture_disabled              \t\t\t\t- This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand. \n\n\tMarkup:\n\t<div class=\"{{modifier_class}} p_5 border-c_black-8 border-width_1 border_solid text_center bg_primary-4\">{{modifier_class}} with a light primary color background</div>\n\n\tStyleguide DesignBase.Textures\n\n */\n@import \"recipes/sub/_index\";/** SCSS DOC: __globalshame_uc.scss **/","/* Define the \"system\" font family */\n@font-face {\n\tfont-family: system;\n\tfont-style: normal;\n\tfont-weight: 300;\n\tsrc: local('.SFNSText-Light'), local('.HelveticaNeueDeskInterface-Light'), local('.LucidaGrandeUI'),\n\t\tlocal('Ubuntu Light'), local('Segoe UI Light'), local('Roboto-Light'), local('DroidSans'), local('Tahoma');\n}\n\n$fonts: (\n\taccent: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,serif, \"slab\"',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tdisplay: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Maven Pro\",\"Muli\",\"Open Sans\",\"system\",sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tcopy: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Muli\",\"Open Sans\",\"system\",sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tui: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n) !default;\n\n\n\nhtml {\n\t-webkit-font-smoothing: antialiased;\n\t-webkit-line-break: after-white-space;\n\t-webkit-locale: 'en';\n\t-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\tline-break: white-space;\n}\n","@charset \"UTF-8\";\n/** Pattern Sheet **/\n/**  Build Comment: NaN Pattern Sheet  **/\n/** SCSS DOC: _preheader.scss **/\n/** SCSS DOC: _helpers.scss **/\n/** SCSS DOC: _utility-css.vars.scss **/\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/** SCSS DOC: _setup.none.scss **/ /** SCSS DOC: __brand.base.scss **/\n/**  Colors  **/\n/** SCSS DOC: _colors.scss **/\n/** Setting link color variables in scss **/\n/*\n\nLink Colors: Light\n\nLink colors of a lighter shade in all of its states, default, hover, visited. Typically used to enhance visibility on dark backgrounds.\n\n$link-color-dark\t\t\t- #126657; Link Color dark\t\t\t\n$link-color-dark--hover\t- #051f1a; Link Color dark--hover\t\n$link-color-dark--visited\t- #42665f; Link Color dark--visited\t\n\nWeight:2\n\nStyleguide DesignBase.Colors.LinksLight\n */\n/*\n\nLink Colors\n\nLink colors  in all of its states, default, hover, visited.\n\n\n$link-color-light\t\t\t- #8cebda; Link Color light\t\t\t\n$link-color-light--hover\t- #e8fbf8; Link Color light--hover\t\n$link-color-light--visited\t- #84afa7; Link Color light--visited\t\n$link-color-dark\t\t\t- #126657; Link Color dark\t\t\t\n$link-color-dark--hover\t- #051f1a; Link Color dark--hover\t\n$link-color-dark--visited\t- #42665f; Link Color dark--visited\t\n\nWeight:1\n\nStyleguide DesignBase.Colors.Links\n */\n/**  Fonts  **/\n/* Define the \"system\" font family */\n@font-face {\n  font-family: system;\n  font-style: normal;\n  font-weight: 300;\n  src: local(\".SFNSText-Light\"), local(\".HelveticaNeueDeskInterface-Light\"), local(\".LucidaGrandeUI\"), local(\"Ubuntu Light\"), local(\"Segoe UI Light\"), local(\"Roboto-Light\"), local(\"DroidSans\"), local(\"Tahoma\");\n}\nhtml {\n  -webkit-font-smoothing: antialiased;\n  -webkit-line-break: after-white-space;\n  -webkit-locale: \"en\";\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  line-break: white-space;\n}\n\n/**  Textures  **/\n/**  logos  **/\n/**  ACC Brands    *********************************/\n/** SCSS DOC: __brand.journal.scss **/\n/*\n\nprimary: Color Variations \n\nThe Modified versions of the primary color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_primary\"\n>\n\t\t<div class='p_3 bg_primary-n5'><h2 class= c_white >primary-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #00070e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00070e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 7, 14 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 7, 14</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,100%, 2.6470588235% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,100%, 2.6470588235%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-n4'><h2 class= c_white >primary-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #000e1b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#000e1b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 14, 27 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 14, 27</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,100%, 5.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,100%, 5.2941176471%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-n3'><h2 class= c_white >primary-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #00172d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00172d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 23, 45 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 23, 45</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,100%, 8.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,100%, 8.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-n2'><h2 class= c_white >primary-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #00203f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00203f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 32, 63 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 32, 63</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,100%, 12.3529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,100%, 12.3529411765%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-n1'><h2 class= c_white >primary-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #00274d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00274d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 39, 77 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 39, 77</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,100%, 15% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,100%, 15%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-0'><h2 class= c_white >primary-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #002e5a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#002e5a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 46, 90 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 46, 90</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg, 100%, 17.6470588235% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg, 100%, 17.6470588235%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-1'><h2 class= c_black >primary-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #004384;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#004384</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 67, 132 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 67, 132</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,95%, 25.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,95%, 25.8823529412%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-2'><h2 class= c_black >primary-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #0064c3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0064c3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 100, 195 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 100, 195</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,87.5%, 38.2352941176% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,87.5%, 38.2352941176%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-3'><h2 class= c_black >primary-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #2d98ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#2d98ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 45, 152, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>45, 152, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,75%, 58.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,75%, 58.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-4'><h2 class= c_black >primary-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #96ccff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#96ccff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 150, 204, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>150, 204, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,62.5%, 79.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,62.5%, 79.4117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_primary-5'><h2 class= c_black >primary-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d5eaff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d5eaff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 213, 234, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>213, 234, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 209.3333333333deg ,55%, 91.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>209.3333333333deg ,55%, 91.7647058824%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.primary\n\n*/\n/*\n\nsecondary: Color Variations \n\nThe Modified versions of the secondary color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_secondary\"\n>\n\t\t<div class='p_3 bg_secondary-n5'><h2 class= c_white >secondary-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #111111;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#111111</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 17, 17, 17 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>17, 17, 17</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,8.5%, 6.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,8.5%, 6.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-n4'><h2 class= c_white >secondary-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #232323;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#232323</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 35, 35, 35 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>35, 35, 35</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,7%, 13.6470588235% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,7%, 13.6470588235%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-n3'><h2 class= c_white >secondary-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #3a3a3a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3a3a3a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 58, 58, 58 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>58, 58, 58</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,5%, 22.7450980392% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,5%, 22.7450980392%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-n2'><h2 class= c_white >secondary-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #515151;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#515151</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 81, 81, 81 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>81, 81, 81</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,3%, 31.8431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,3%, 31.8431372549%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-n1'><h2 class= c_white >secondary-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #636363;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#636363</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 99, 99, 99 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>99, 99, 99</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,1.5%, 38.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,1.5%, 38.6666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-0'><h2 class= c_white >secondary-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #747474;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#747474</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 116, 116, 116 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>116, 116, 116</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg, 0%, 45.4901960784% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg, 0%, 45.4901960784%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-1'><h2 class= c_black >secondary-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #828282;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#828282</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 130, 130, 130 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>130, 130, 130</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 50.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 50.9411764706%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-2'><h2 class= c_black >secondary-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #979797;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#979797</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 151, 151, 151 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>151, 151, 151</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 59.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 59.1176470588%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-3'><h2 class= c_black >secondary-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bababa;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bababa</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 186, 186, 186 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>186, 186, 186</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 72.7450980392% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 72.7450980392%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-4'><h2 class= c_black >secondary-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: gainsboro;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>gainsboro</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 220, 220, 220 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>220, 220, 220</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 86.3725490196% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 86.3725490196%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_secondary-5'><h2 class= c_black >secondary-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f1f1f1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f1f1f1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 241, 241 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 241, 241</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 94.5490196078% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 94.5490196078%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.secondary\n\n*/\n/*\n\nsuccess: Color Variations \n\nThe Modified versions of the success color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_success\"\n>\n\t\t<div class='p_3 bg_success-n5'><h2 class= c_white >success-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #021906;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#021906</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 2, 25, 6 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>2, 25, 6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,84.75%, 5.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,84.75%, 5.2941176471%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-n4'><h2 class= c_white >success-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #05320c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#05320c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 5, 50, 12 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>5, 50, 12</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,84.5%, 10.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,84.5%, 10.5882352941%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-n3'><h2 class= c_white >success-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #085314;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#085314</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 8, 83, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>8, 83, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,84.1666666667%, 17.6470588235% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,84.1666666667%, 17.6470588235%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-n2'><h2 class= c_white >success-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0b741c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0b741c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 11, 116, 28 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>11, 116, 28</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,83.8333333333%, 24.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,83.8333333333%, 24.7058823529%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-n1'><h2 class= c_white >success-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0d8c22;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0d8c22</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 13, 140, 34 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>13, 140, 34</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,83.5833333333%, 30% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,83.5833333333%, 30%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-0'><h2 class= c_white >success-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0fa528;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0fa528</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 15, 165, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>15, 165, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg, 83.3333333333%, 35.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg, 83.3333333333%, 35.2941176471%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-1'><h2 class= c_black >success-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #12c32f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#12c32f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 18, 195, 47 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>18, 195, 47</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,79.1666666667%, 41.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,79.1666666667%, 41.7647058824%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-2'><h2 class= c_black >success-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #1cea3f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1cea3f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 28, 234, 63 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>28, 234, 63</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,72.9166666667%, 51.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,72.9166666667%, 51.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-3'><h2 class= c_black >success-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #68f17f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#68f17f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 104, 241, 127 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>104, 241, 127</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,62.5%, 67.6470588235% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,62.5%, 67.6470588235%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-4'><h2 class= c_black >success-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #b3f8bf;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b3f8bf</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 179, 248, 191 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>179, 248, 191</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,52.0833333333%, 83.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,52.0833333333%, 83.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_success-5'><h2 class= c_black >success-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e1fce5;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e1fce5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 225, 252, 229 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>225, 252, 229</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 130deg ,45.8333333333%, 93.5294117647% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>130deg ,45.8333333333%, 93.5294117647%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.success\n\n*/\n/*\n\nshade: Color Variations \n\nThe Modified versions of the shade color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_shade\"\n>\n\t\t<div class='p_3 bg_shade-n5'><h2 class= c_white >shade-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #111111;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#111111</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 17, 17, 17 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>17, 17, 17</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,8.5%, 6.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,8.5%, 6.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-n4'><h2 class= c_white >shade-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #232323;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#232323</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 35, 35, 35 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>35, 35, 35</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,7%, 13.6470588235% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,7%, 13.6470588235%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-n3'><h2 class= c_white >shade-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #3a3a3a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3a3a3a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 58, 58, 58 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>58, 58, 58</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,5%, 22.7450980392% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,5%, 22.7450980392%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-n2'><h2 class= c_white >shade-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #515151;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#515151</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 81, 81, 81 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>81, 81, 81</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,3%, 31.8431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,3%, 31.8431372549%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-n1'><h2 class= c_white >shade-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #636363;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#636363</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 99, 99, 99 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>99, 99, 99</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,1.5%, 38.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,1.5%, 38.6666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-0'><h2 class= c_white >shade-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #747474;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#747474</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 116, 116, 116 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>116, 116, 116</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg, 0%, 45.4901960784% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg, 0%, 45.4901960784%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-1'><h2 class= c_black >shade-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #828282;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#828282</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 130, 130, 130 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>130, 130, 130</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 50.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 50.9411764706%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-2'><h2 class= c_black >shade-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #979797;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#979797</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 151, 151, 151 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>151, 151, 151</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 59.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 59.1176470588%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-3'><h2 class= c_black >shade-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bababa;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bababa</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 186, 186, 186 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>186, 186, 186</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 72.7450980392% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 72.7450980392%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-4'><h2 class= c_black >shade-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: gainsboro;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>gainsboro</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 220, 220, 220 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>220, 220, 220</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 86.3725490196% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 86.3725490196%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_shade-5'><h2 class= c_black >shade-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f1f1f1;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f1f1f1</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 241, 241, 241 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>241, 241, 241</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 0deg ,0%, 94.5490196078% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>0deg ,0%, 94.5490196078%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.shade\n\n*/\n/*\n\nwarning: Color Variations \n\nThe Modified versions of the warning color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_warning\"\n>\n\t\t<div class='p_3 bg_warning-n5'><h2 class= c_white >warning-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #231105;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#231105</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 35, 17, 5 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>35, 17, 5</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,75.8016528926%, 7.8823529412% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,75.8016528926%, 7.8823529412%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-n4'><h2 class= c_white >warning-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #46220b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#46220b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 70, 34, 11 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>70, 34, 11</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,75.4049586777%, 15.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,75.4049586777%, 15.7647058824%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-n3'><h2 class= c_white >warning-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #743812;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#743812</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 116, 56, 18 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>116, 56, 18</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,74.8760330579%, 26.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,74.8760330579%, 26.2745098039%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-n2'><h2 class= c_white >warning-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #a34f19;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a34f19</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 163, 79, 25 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>163, 79, 25</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,74.347107438%, 36.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,74.347107438%, 36.7843137255%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-n1'><h2 class= c_white >warning-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #c6601e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c6601e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 198, 96, 30 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>198, 96, 30</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,73.9504132231%, 44.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,73.9504132231%, 44.6666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-0'><h2 class= c_white >warning-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #df732d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#df732d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 223, 115, 45 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>223, 115, 45</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg, 73.5537190083%, 52.5490196078% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg, 73.5537190083%, 52.5490196078%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-1'><h2 class= c_black >warning-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e28142;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e28142</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 226, 129, 66 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>226, 129, 66</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,69.8760330579%, 57.2941176471% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,69.8760330579%, 57.2941176471%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-2'><h2 class= c_black >warning-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e79662;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e79662</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 231, 150, 98 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>231, 150, 98</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,64.3595041322%, 64.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,64.3595041322%, 64.4117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-3'><h2 class= c_black >warning-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #efb996;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#efb996</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 239, 185, 150 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>239, 185, 150</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,55.1652892562%, 76.2745098039% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,55.1652892562%, 76.2745098039%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-4'><h2 class= c_black >warning-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f7dccb;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f7dccb</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 247, 220, 203 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>247, 220, 203</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,45.9710743802%, 88.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,45.9710743802%, 88.137254902%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_warning-5'><h2 class= c_black >warning-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fcf1ea;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fcf1ea</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 252, 241, 234 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>252, 241, 234</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 23.595505618deg ,40.4545454545%, 95.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>23.595505618deg ,40.4545454545%, 95.2549019608%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.warning\n\n*/\n/*\n\nalert: Color Variations \n\nThe Modified versions of the alert color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_alert\"\n>\n\t\t<div class='p_3 bg_alert-n5'><h2 class= c_white >alert-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #1a0503;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1a0503</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 26, 5, 3 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>26, 5, 3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,78.4153846154%, 5.7352941176% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,78.4153846154%, 5.7352941176%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-n4'><h2 class= c_white >alert-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #340a07;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#340a07</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 52, 10, 7 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>52, 10, 7</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,78.0615384615%, 11.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,78.0615384615%, 11.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-n3'><h2 class= c_white >alert-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #56110c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#56110c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 86, 17, 12 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>86, 17, 12</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,77.5897435897%, 19.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,77.5897435897%, 19.1176470588%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-n2'><h2 class= c_white >alert-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #781810;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#781810</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 120, 24, 16 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>120, 24, 16</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,77.1179487179%, 26.7647058824% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,77.1179487179%, 26.7647058824%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-n1'><h2 class= c_white >alert-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #921d14;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#921d14</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 146, 29, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>146, 29, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,76.7641025641%, 32.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,76.7641025641%, 32.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-0'><h2 class= c_white >alert-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #ac2217;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ac2217</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 172, 34, 23 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>172, 34, 23</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg, 76.4102564103%, 38.2352941176% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg, 76.4102564103%, 38.2352941176%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-1'><h2 class= c_black >alert-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #c8271b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c8271b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 200, 39, 27 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>200, 39, 27</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,72.5897435897%, 44.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,72.5897435897%, 44.4117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-2'><h2 class= c_black >alert-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e33c2f;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e33c2f</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 227, 60, 47 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>227, 60, 47</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,66.858974359%, 53.6764705882% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,66.858974359%, 53.6764705882%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-3'><h2 class= c_black >alert-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ec7d74;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ec7d74</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 236, 125, 116 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>236, 125, 116</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,57.3076923077%, 69.1176470588% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,57.3076923077%, 69.1176470588%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-4'><h2 class= c_black >alert-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f6beba;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f6beba</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 246, 190, 186 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>246, 190, 186</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,47.7564102564%, 84.5588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,47.7564102564%, 84.5588235294%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_alert-5'><h2 class= c_black >alert-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fbe5e3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fbe5e3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 251, 229, 227 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>251, 229, 227</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 4.4295302013deg ,42.0256410256%, 93.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>4.4295302013deg ,42.0256410256%, 93.8235294118%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.alert\n\n*/\n/*\n\nnavigation: Color Variations \n\nThe Modified versions of the navigation color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_navigation\"\n>\n\t\t<div class='p_3 bg_navigation-n5'><h2 class= c_white >navigation-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #060d1d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#060d1d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 6, 13, 29 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>6, 13, 29</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,66.514893617%, 6.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,66.514893617%, 6.9117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-n4'><h2 class= c_white >navigation-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #0d1a3a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0d1a3a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 13, 26, 58 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>13, 26, 58</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,65.9659574468%, 13.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,65.9659574468%, 13.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-n3'><h2 class= c_white >navigation-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #162c60;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#162c60</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 22, 44, 96 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>22, 44, 96</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,65.2340425532%, 23.0392156863% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,65.2340425532%, 23.0392156863%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-n2'><h2 class= c_white >navigation-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #1e3e86;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#1e3e86</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 30, 62, 134 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>30, 62, 134</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,64.5021276596%, 32.2549019608% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,64.5021276596%, 32.2549019608%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-n1'><h2 class= c_white >navigation-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #254ba3;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#254ba3</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 37, 75, 163 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>37, 75, 163</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,63.9531914894%, 39.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,63.9531914894%, 39.1666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-0'><h2 class= c_white >navigation-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #2b58c0;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#2b58c0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 43, 88, 192 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>43, 88, 192</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg, 63.4042553191%, 46.0784313725% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg, 63.4042553191%, 46.0784313725%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-1'><h2 class= c_black >navigation-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #3564d2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3564d2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 53, 100, 210 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>53, 100, 210</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,60.2340425532%, 51.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,60.2340425532%, 51.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-2'><h2 class= c_black >navigation-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #567ed9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#567ed9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 86, 126, 217 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>86, 126, 217</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,55.4787234043%, 59.5588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,55.4787234043%, 59.5588235294%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-3'><h2 class= c_black >navigation-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8fa9e6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8fa9e6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 143, 169, 230 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>143, 169, 230</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,47.5531914894%, 73.0392156863% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,47.5531914894%, 73.0392156863%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-4'><h2 class= c_black >navigation-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #c7d4f2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#c7d4f2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 199, 212, 242 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>199, 212, 242</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,39.6276595745%, 86.5196078431% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,39.6276595745%, 86.5196078431%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_navigation-5'><h2 class= c_black >navigation-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e9eefa;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e9eefa</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 233, 238, 250 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>233, 238, 250</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 221.8791946309deg ,34.8723404255%, 94.6078431373% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>221.8791946309deg ,34.8723404255%, 94.6078431373%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.navigation\n\n*/\n/*\n\naccent: Color Variations \n\nThe Modified versions of the accent color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_accent\"\n>\n\t\t<div class='p_3 bg_accent-n5'><h2 class= c_white >accent-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #260f00;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#260f00</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 38, 15, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>38, 15, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,100%, 7.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,100%, 7.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-n4'><h2 class= c_white >accent-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #4d1f00;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#4d1f00</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 77, 31, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>77, 31, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,100%, 15% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,100%, 15%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-n3'><h2 class= c_white >accent-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #803300;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#803300</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 128, 51, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>128, 51, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,100%, 25% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,100%, 25%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-n2'><h2 class= c_white >accent-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #b34700;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#b34700</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 179, 71, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>179, 71, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,100%, 35% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,100%, 35%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-n1'><h2 class= c_white >accent-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #d95700;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d95700</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 217, 87, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>217, 87, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,100%, 42.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,100%, 42.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-0'><h2 class= c_white >accent-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #ff6600;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ff6600</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 102, 0 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 102, 0</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg, 100%, 50% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg, 100%, 50%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-1'><h2 class= c_black >accent-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ff751a;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ff751a</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 117, 26 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 117, 26</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,95%, 55% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,95%, 55%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-2'><h2 class= c_black >accent-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ff8c40;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ff8c40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 140, 64 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 140, 64</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,87.5%, 62.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,87.5%, 62.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-3'><h2 class= c_black >accent-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ffb380;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ffb380</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 179, 128 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 179, 128</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,75%, 75% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,75%, 75%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-4'><h2 class= c_black >accent-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #ffd9bf;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#ffd9bf</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 217, 191 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 217, 191</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,62.5%, 87.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,62.5%, 87.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_accent-5'><h2 class= c_black >accent-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #fff0e6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#fff0e6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 255, 240, 230 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>255, 240, 230</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 24deg ,55%, 95% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>24deg ,55%, 95%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.accent\n\n*/\n/*\n\ninfo: Color Variations \n\nThe Modified versions of the info color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_info\"\n>\n\t\t<div class='p_3 bg_info-n5'><h2 class= c_white >info-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #191714;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#191714</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 25, 23, 20 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>25, 23, 20</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,18.6666666667%, 8.9117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,18.6666666667%, 8.9117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-n4'><h2 class= c_white >info-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #332e28;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#332e28</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 51, 46, 40 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>51, 46, 40</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,17.3333333333%, 17.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,17.3333333333%, 17.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-n3'><h2 class= c_white >info-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #544c43;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#544c43</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 84, 76, 67 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>84, 76, 67</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,15.5555555556%, 29.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,15.5555555556%, 29.7058823529%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-n2'><h2 class= c_white >info-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #766b5e;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#766b5e</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 118, 107, 94 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>118, 107, 94</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,13.7777777778%, 41.5882352941% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,13.7777777778%, 41.5882352941%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-n1'><h2 class= c_white >info-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #8f8173;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8f8173</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 143, 129, 115 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>143, 129, 115</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,12.4444444444%, 50.5% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,12.4444444444%, 50.5%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-0'><h2 class= c_white >info-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #a3988c;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#a3988c</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 163, 152, 140 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>163, 152, 140</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg, 11.1111111111%, 59.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg, 11.1111111111%, 59.4117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-1'><h2 class= c_black >info-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #aca298;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#aca298</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 172, 162, 152 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>172, 162, 152</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,10.5555555556%, 63.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,10.5555555556%, 63.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-2'><h2 class= c_black >info-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bab2a9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bab2a9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 186, 178, 169 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>186, 178, 169</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,9.7222222222%, 69.5588235294% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,9.7222222222%, 69.5588235294%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-3'><h2 class= c_black >info-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d1ccc6;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d1ccc6</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 209, 204, 198 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>209, 204, 198</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,8.3333333333%, 79.7058823529% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,8.3333333333%, 79.7058823529%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-4'><h2 class= c_black >info-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #e8e5e2;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#e8e5e2</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 232, 229, 226 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>232, 229, 226</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,6.9444444444%, 89.8529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,6.9444444444%, 89.8529411765%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_info-5'><h2 class= c_black >info-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f6f5f4;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f6f5f4</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 246, 245, 244 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>246, 245, 244</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 31.3043478261deg ,6.1111111111%, 95.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>31.3043478261deg ,6.1111111111%, 95.9411764706%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.info\n\n*/\n/*\n\nhighlight: Color Variations \n\nThe Modified versions of the highlight color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_highlight\"\n>\n\t\t<div class='p_3 bg_highlight-n5'><h2 class= c_white >highlight-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #120919;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#120919</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 18, 9, 25 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>18, 9, 25</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,52.0524017467%, 6.7352941176% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,52.0524017467%, 6.7352941176%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-n4'><h2 class= c_white >highlight-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #241233;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#241233</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 36, 18, 51 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>36, 18, 51</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,51.2663755459%, 13.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,51.2663755459%, 13.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-n3'><h2 class= c_white >highlight-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #3c1e55;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3c1e55</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 60, 30, 85 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>60, 30, 85</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,50.2183406114%, 22.4509803922% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,50.2183406114%, 22.4509803922%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-n2'><h2 class= c_white >highlight-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #542a76;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#542a76</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 84, 42, 118 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>84, 42, 118</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,49.1703056769%, 31.431372549% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,49.1703056769%, 31.431372549%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-n1'><h2 class= c_white >highlight-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #663390;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#663390</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 102, 51, 144 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>102, 51, 144</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,48.384279476%, 38.1666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,48.384279476%, 38.1666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-0'><h2 class= c_white >highlight-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #783ca9;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#783ca9</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 120, 60, 169 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>120, 60, 169</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg, 47.5982532751%, 44.9019607843% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg, 47.5982532751%, 44.9019607843%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-1'><h2 class= c_black >highlight-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #8744bd;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#8744bd</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 135, 68, 189 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>135, 68, 189</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,45.2183406114%, 50.4117647059% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,45.2183406114%, 50.4117647059%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-2'><h2 class= c_black >highlight-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #9b63c8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9b63c8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 155, 99, 200 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>155, 99, 200</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,41.6484716157%, 58.6764705882% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,41.6484716157%, 58.6764705882%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-3'><h2 class= c_black >highlight-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #bc97da;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#bc97da</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 188, 151, 218 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>188, 151, 218</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,35.6986899563%, 72.4509803922% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,35.6986899563%, 72.4509803922%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-4'><h2 class= c_black >highlight-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #decbed;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#decbed</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 222, 203, 237 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>222, 203, 237</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,29.7489082969%, 86.2254901961% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,29.7489082969%, 86.2254901961%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_highlight-5'><h2 class= c_black >highlight-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #f2eaf8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#f2eaf8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 242, 234, 248 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>242, 234, 248</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 273.0275229358deg ,26.1790393013%, 94.4901960784% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>273.0275229358deg ,26.1790393013%, 94.4901960784%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.highlight\n\n*/\n/*\n\nacc: Color Variations \n\nThe Modified versions of the acc color from this theme\n\nMarkup:\n\n<div\n\tclass=\"grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4 bg_acc\"\n>\n\t\t<div class='p_3 bg_acc-n5'><h2 class= c_white >acc-n5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #000a12;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#000a12</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 10, 18 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 10, 18</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 3.4705882353% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 3.4705882353%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-n4'><h2 class= c_white >acc-n4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #001423;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#001423</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 20, 35 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 20, 35</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 6.9411764706% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 6.9411764706%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-n3'><h2 class= c_white >acc-n3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #00213b;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00213b</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 33, 59 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 33, 59</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 11.568627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 11.568627451%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-n2'><h2 class= c_white >acc-n2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #002e53;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#002e53</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 46, 83 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 46, 83</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 16.1960784314% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 16.1960784314%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-n1'><h2 class= c_white >acc-n1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #003764;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#003764</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 55, 100 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 55, 100</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,100%, 19.6666666667% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,100%, 19.6666666667%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-0'><h2 class= c_white >acc-0</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_white'><li class='flex flex_inline p_2 #' style='background-color: #004176;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#004176</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 65, 118 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 65, 118</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg, 100%, 23.137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg, 100%, 23.137254902%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-1'><h2 class= c_black >acc-1</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #00579d;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#00579d</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 87, 157 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 87, 157</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,95%, 30.8235294118% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,95%, 30.8235294118%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-2'><h2 class= c_black >acc-2</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #0077d8;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#0077d8</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 0, 119, 216 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>0, 119, 216</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,87.5%, 42.3529411765% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,87.5%, 42.3529411765%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-3'><h2 class= c_black >acc-3</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #3ba7ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#3ba7ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 59, 167, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>59, 167, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,75%, 61.568627451% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,75%, 61.568627451%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-4'><h2 class= c_black >acc-4</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #9dd3ff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#9dd3ff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 157, 211, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>157, 211, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,62.5%, 80.7843137255% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,62.5%, 80.7843137255%</span> </li> </ul> </div>\n\t\t<div class='p_3 bg_acc-5'><h2 class= c_black >acc-5</h2> <ul class='p_3 bg_white-7 m-t_4 ul_none c_black'><li class='flex flex_inline p_2 #' style='background-color: #d8edff;'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HEX:</span> <span class='user-select_all font_accent lowercase'>#d8edff</span> </li> <li class='flex flex_inline p_2 #' style='background-color:rgb( 216, 237, 255 );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>RGB:</span> <span class='user-select_all font_accent lowercase'>216, 237, 255</span> </li> <li class='flex flex_inline p_2 #' style='background-color:hsl( 206.9491525424deg ,55%, 92.3137254902% );'> <span class='user-select_none opacity_6 font_bold font_ui uppercase'>HSL:</span> <span class='user-select_all font_accent lowercase'>206.9491525424deg ,55%, 92.3137254902%</span> </li> </ul> </div>\n</div>\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.acc\n\n*/\n/*\nCrayon Box\n\nThis is all of the colors of the theme broken out with its modifications written in hex code.\n\n\nWeight:0\n\nHideCodeBlock: display_none \n\nStyleguide DesignBase.CrayonBox\n*/\n/*Adobe XD Color Map*/\n/* $xd-color_primary-0: #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/*\n\nBasic HTML\n\nThe Arches Design System, at its core, is a Utility Class Styling Design.  It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles.  Arches rely on the browser or branding defaults for basic HTML styling.  Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation.  \n\nWeight: -100\n\nStyleguide HTML\n*/\n/*\n\nReading Typography\n\nReading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the \"reading-typography\" class is used on the parent container.  Please note that the reading typography can still look a bit different look depending on the brand or the framework. <table><thead><tr><th>modifier class</th><th>customization</th><th>usage</th></tr></thead><tbody><tr><td><code>.inherit_color</code></td><td>removes all color rules from colored typography and sets it to inherit.</td><td>inverting a block of typography where all text and headlines should be white.</td></tr><tr><td><code>.font-size_up</code></td><td>shifts all typography up one font size step</td><td>intro blocks of text where the text. Or in articles where you can shift all text up a size.</td></tr><tr><td>`.font-size_down`</td><td>shifts all typography down one font size step.</td><td>citation blocks or boiler plate content where the text should be smaller and less impactful.</td></tr><tr><td><code>.links_dark</code></td><td>turns all links to the dark color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class.</td></tr><tr><td><code>.links_light</code></td><td>turns all links to the light color standard.</td><td>this is used in junction with the <code>.inherit_color</code> class when text is on a dark background.</td></tr></tbody></table><small class=\"c_highlight block\">* there are further advanced features if you want to apply CSS Property Overrides.</small> \n\nMarkup:\n<section class=\"max-w_65 reading-typography m_auto\">\n<div class=\"relative\">\n\t<picture class=\"w_100\">\n\t\t<source class=\"w_100\" srcset=\"{{> Sub.Placeholder.Image.1200x300 }}\" media=\"(min-width: 1200px)\">\n\t\t<source class=\"w_100\" srcset=\"{{> Sub.Placeholder.Image.1024x256 }}\" media=\"(min-width: 768px)\">\n\t\t<source class=\"w_100\" srcset=\"{{> Sub.Placeholder.Image.600x300 }}\" media=\"(min-width: 400px)\"> <source class=\"w_100\" srcset=\"https://placeholder.pics/svg/400x300/171C6A-5A6CFF/FFFAEE/300x400\" media=\"(min-width: 400px)\">\n\t\t<img src=\"{{> Sub.Placeholder.Image.300x400 }}\" class=\"w_100\" alt=\"\">\n\t</picture>\n    <div class=\"absolute b_4 r_4 l_4 b_auto:lg t_4:lg r_4:lg r_4:md l_auto:md b_4:md t_4:md justify_center flex flex_row flex_column:md flex_row:lg gap-x_4 gap-y_4\">\n        <div class=\"bg_secondary-2 br_1 br_black-3 br_radius br_solid:lg br_none c_white font_medium font_ui gap-x_3 inline-block inline-flex justify_end m-x_2 p_2:lg p_0 relative shadow_overlap-light\">\n            <span class=\"font_bold font_ui self_center vertical-align_middle display_none inline:md p-x_3\">User Name</span>\n            <a class=\"btn bg_accent-n1 h:bg_accent-n3 br_solid br_black-2 br_1 c_white  h:c_white uppercase shadow_overlap-light font_ui font_bold\" href=\"#\">Log Out <i class=\"fas fa-sign-out p-l_2\"></i></a>\n        </div>\n    </div>\n</div>\n  <h1>This is the primary heading and there should only be one of these per page</h1>\n  <h6>sub heading</h6>\n    <p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>\n    <ul>\n        <li>This is a list item</li>\n        <li>So is this - there could be more</li>\n        <li>Make sure to style list items to:\n            <ul>\n                <li>Not forgetting child list items</li>\n                <li>Not forgetting child list items</li>\n                <li>Not forgetting child list items</li>\n                <li>Not forgetting child list items</li>\n            </ul>\n        </li>\n        <li>A couple more</li>\n        <li>top level list items</li>\n    </ul>\n    <p>Don't forget <strong>Ordered lists</strong>:</p>\n    <ol>\n       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n       <li>Aliquam tincidunt mauris eu risus.\n        <ol>\n            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n            <li>Aliquam tincidunt mauris eu risus.</li>\n        </ol>\n        </li>\n       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n       <li>Aliquam tincidunt mauris eu risus.\n    </li></ol>\n    <h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <table>\n    <thead><tr>\n            <th>Table Heading</th>\n            <th>Table Heading</th>\n        </tr></thead>\n        <tbody>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n        <tr>\n            <td>table data</td>\n            <td>table data</td>\n        </tr>\n    </tbody></table>    \t\n    <h3>A sub heading which is not as important as the second, but should be used with consideration</h3>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <blockquote><p>“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”</p></blockquote>\n    <h4>A sub heading which is not as important as the second, but should be used with consideration</h4>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <pre><code>\n#header h1 a { \n    display: block; \n    width: 300px; \n    height: 80px; \n}\n</code></pre>\n    <h5>A sub heading which is not as important as the second, but should be used with consideration</h5>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n    <dl>\n   <dt>Definition list</dt>\n   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.</dd>\n\t   <dt>Lorem ipsum dolor sit amet</dt>\n\t   <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.</dd>\n\t</dl>\n\t<h6>This heading plays a relatively small bit part role, if you use it at all</h6>\n    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>\n<section>\n<details>\n        <summary ><strong>Table of Contents</strong></summary>\n        <div>\n            <ol>\n                <li data-line=\"0\" dir=\"auto\">How to Prepare for the Boards</li>\n                <li data-line=\"1\" dir=\"auto\">General Principles of Cardiovascular Medicine\n                </li>\n                <li data-line=\"2\" dir=\"auto\">Arrhythmias</li>\n                <li data-line=\"3\" dir=\"auto\">Coronary Artery Disease</li>\n                <li data-line=\"4\" dir=\"auto\">Heart Failure &amp; Cardiomyopathy</li>\n                <li data-line=\"5\" dir=\"auto\">Valvular Disease</li>\n                <li data-line=\"6\" dir=\"auto\">Pericardial Disease</li>\n                <li data-line=\"7\" dir=\"auto\">Congenital Heart Disease</li>\n                <li data-line=\"8\" dir=\"auto\">Vascular Diseases</li>\n                <li data-line=\"9\" dir=\"auto\">Systemic Hypertension and Hypotension</li>\n                <li data-line=\"10\" dir=\"auto\">Pulmonary Circulation Disorders</li>\n                <li data-line=\"11\" dir=\"auto\">Systemic Disorders Affecting the Circulatory\n                    System</li>\n                <li data-line=\"12\" dir=\"auto\">\n                    Miscellaneous\n                    <ul>\n                        <li data-line=\"13\" dir=\"auto\">Cardiovascular Genetics</li>\n                        <li data-line=\"14\" dir=\"auto\">CPR, Post-Resuscitation Care</li>\n                        <li data-line=\"15\" dir=\"auto\">Cardiac Critical Care</li>\n                        <li data-line=\"16\" dir=\"auto\">Sleep Disordered Breathing</li>\n                        <li data-line=\"17\" dir=\"auto\">Sports Cardiology</li>\n                        <li data-line=\"18\" dir=\"auto\">Pregnancy and Cardiac Disease</li>\n                        <li data-line=\"19\" dir=\"auto\">Cardiovascular Operative Management\n                        </li>\n                        <li data-line=\"20\" dir=\"auto\">Pharmacology</li>\n                        <li data-line=\"21\" dir=\"auto\">General Principles of Cardiovascular\n                            Medicine</li>\n                    </ul>\n                </li>\n            </ol>\n        </div>\n    </details>\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nStyleguide HTML.Typography\n\n*/\n/*\n\nReading Typography Modified\n\nThis text is used as a lorem content in many of our containers.  \n\n.color_inherit.bg_acc.c_white.p_4.links_light    - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.\n\nMarkup:\n{{> Sub.Placeholder.Typography  modifier_class=\" color_inherit bg_acc c_white p_4 links_light\"}}\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nMarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50\n\nStyleguide HTML.Typography.Sample\n\n*/\n/*\n\nLinks States\n\nThis shows the look and feel of all the states of a text link, color, underline and decoration.\n\nMarkup:\n<ul class=\"flex flex_column ul_none\">\n    <li class=\"p_3\"><a href=\"#random2\">NORMAL: Donec non enim</a></li>\n    <li class=\"p_3\"><a href=\"#random1\" class=\"pseudo-class-hover\">HOVER:  Normal Donec non enim</a>\n</li>\n    <li class=\"p_3\"><a href=\"#random3\" class=\"pseudo-class-visited\">VISITED: Normal Donec non enim</a>\n</li>\n</ul>\n\n\nMarkupWrapperClasses: reading-typography\n\nWeight:100\n\nStyleguide HTML.Typography.Links\n */\n/*\n Design Base\n\n Arches is design inspired by a pad of paper in the hand.  Subtle Textures and Layer shadows keep the readability very high. \n\n Weight: -1000\n\n Styleguide DesignBase\n*/\n/*\n\nFonts \n\nThe ACC is focused on stable, conservative, clean fonts.   Roboto Slab is the standard serif fonts across all products at the ACC.\n\n Styleguide DesignBase.Fonts\n*/\n/*\n\nAccent Roboto Slab\n\nA beautiful Accent font that shows a complexity and texture to the fonts used in the design. \n\n<div class=\"font_accent\">\n\t<h2 class=font_accent group-divide-bottom font--name small-12\">\n\t\tRoboto Slab\n\t\t<span class=\"sub-line\">font-family: \"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,\"slab\",serif</span>\n\t</h2>\n\t<div class=\"font flex\">\n\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">RS<span></span></span></div>\n\t\t<div class=\"flex_auto font--example\">\n\t\t\t<h3 class=font_accent font_6\">Accent Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: -10\n\n Styleguide DesignBase.Fonts.Accent\n*/\n/*\n\nDisplay: Roboto Flex\n\n A Slick font that has a slight interest used for headers and UI. \n\n<div class=\"font_display\">\n\t<h2 class=\"font_display group-divide-bottom font--name small-12\">\n\t\tRoboto Flex\n\t\t<span class=\"sub-line\">font-family: \"Roboto Flex\",Roboto,\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif</span>\n\t</h2>\n\t<div class=\"font flex grid-padding-x grid-padding-y\">\n\t\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">RF<span></span></span></div>\n\t\t<div class=\"flex_auto font--example\">\n\t\t\t<h3 class=\"font_display\">Display Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: -5\n\n Styleguide DesignBase.Fonts.Display\n*/\n/*\n\nCopy: Roboto Flex\n\n A clean font for content and text of none UI elements. \n\n<div class=\"font_copy\">\n\t<h2 class=\"group-divide-bottom font--name small-12\">\n\t\t\"Roboto Flex\"\n\t\t<span class=\"sub-line\">font-family: \"\"Roboto Flex\",Roboto,\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif\"</span>\n\t</h2>\n\t<div class=\"font flex grid-padding-x grid-padding-y\">\n\t\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">RF<span></span></span></div>\n\t\t<div class=\"felx_auto font--example\">\n\t\t\t<h3 class=\"\">Content Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: 0\n\n Styleguide DesignBase.Fonts.Copy\n*/\n/*\n\nUI: Roboto Flex\n\n A clean font for content and text of none UI elements. \n\n<div class=\"font_ui\">\n\t<h2 class=\" group-divide-bottom font--name small-12\">\n\t\t\"Roboto Flex\"\n\t\t<span class=\"sub-line\">font-family: \"\"Roboto Flex\",Roboto,\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif\"</span>\n\t</h2>\n\t<div class=\"font flex grid-padding-x grid-padding-y\">\n\t\t<div class=\"bg_primary c_white flex flex_shrink font_10 justify_center m-r_5 p-x_5 text_center\"><span class=\"flex_auto m_auto inline-block text_center self_center\">RF<span></span></span></div>\n\t\t<div class=\"felx_auto font--example\">\n\t\t\t<h3 class=\"\">Content Font</h3>\n\t\t\t<div class=\"text-lowercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_4\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_4\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t\t<div class=\"text-lowercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-uppercase font_2\">a b c d e f g h i j k l m n o p q r s t u v w x y z</div>\n\t\t\t<div class=\"text-numbers font_2\">0 1 2 3 4 5 6 7 8 9</div>\n\t\t</div>\n\t</div>\n</div>\n\n Weight: 1\n\n Styleguide DesignBase.Fonts.UI\n*/\n/*\n\nIcons: 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<div class=\"{{modifier_class}} p_5 border-c_black-8 border-width_1 border_solid text_center bg_primary-4\">{{modifier_class}} with a light primary color background</div>\n\n\tStyleguide DesignBase.Textures\n\n */\n/*\n\nRead More Arrow\n\nThis stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.\n\nMarkup:\n<span class=\"fa-stack font_6 order_2\">\n        <i class=\"fa-ellipsis fas fa-stack-1x\" aria-hidden=\"true\"></i>\n        <i class=\"fa-chevron-right fa-solid fa-stack-1x\" aria-hidden=\"true\" style=\" left: 20%; font-size: 115%; \"></i>\n</span>\n\n\nStyleGuide Sub.Component.Common.ReadMoreArrow \n\n*/\n/*\n\n600w x 300h \n\nMarkup:\nhttps://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.600x300\n\n*/\n/*\n\n600w x 400h \n\nMarkup:\nhttps://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.600x400\n\n*/\n/*\n\n1200w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.1200x300\n\n*/\n/*\n\n375w x 250h\n\nMarkup:\nhttps://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.375x250\n\n*/\n/*\n320w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.320x300\n\n*/\n/*\n\n1024w x 256h\n\nMarkup:\nhttps://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.1024x256\n\n*/\n/*\nAspect 21x9\n\nMarkup:\nhttps://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42\n\n\nStyleguide  Sub.Placeholder.Image.21x9\n*/\n/*\nAspect 16x9\n\nMarkup:\nhttps://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42\n\n\nStyleguide  Sub.Placeholder.Image.16x9\n*/\n/*\n\n300w x 400h\n\nMarkup:\nhttps://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.300x400\n\n*/\n/*\n\nsquare\n\nMarkup:\nhttps://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42\n\nStyleguide  Sub.Placeholder.Image.Square\n\n*/\n/*\n\nMax 20 Character\n\nMarkup:\nDi dolores (20&nbsp;Chars)\n\nStyleguide  Sub.Placeholder.Text.20ch\n\n*/\n/*\n\nMax 30 Character\n\nMarkup:\nCommodi dolores (30&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.30ch\n\n*/\n/*\n\nMax 40 Character\n\nMarkup:\nRerum libg dero pariatur (40&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.40ch\n\n*/\n/*\n\nMax 60 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er (60&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.60ch\n\n*/\n/*\n\nMax 80 Character\n\nMarkup:\nEius nihil quia adipisci exercitationem eligendiea est nihil yas (80&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.80ch\n\n*/\n/*\n\nMax 100 Character\n\nMarkup:\nOfficia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.100ch\n\n*/\n/*\n\nMax 150 Character\n\nMarkup:\nSvel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.150ch\n\n*/\n/*\n\nMax 200 Character\n\nMarkup:\nDignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.200ch\n\n*/\n/*\n\nMax 250 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250&nbsp;Characters)\n\nStyleguide  Sub.Placeholder.Text.250ch\n\n*/\n/*\n\nGrid - Triple Card Holder\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography\n\nNOTE:\nTriple up cards with shaded background are used only in full screen pages\n\nStyleguide Sub.ClassList.Grid.Card.Split-Triple \n\n*/\n/*\n\nTriple Split with Sidebar\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left\n\nNOTE:\nTriple up splits\n\nStyleguide Sub.ClassList.Grid.TripleLG\n\n*/\n/*\n\nGrid - Card Holder - 50 split\n\nMarkup:\ncolumns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid\n\nNOTE:\nsplit layouts great for half page cards\n\nStyleguide Sub.ClassList.Grid.Split-50\n\n*/\n/*\n\nGridList Triple on XL\n\nMarkup:\ncolumns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none\n\nStyleguide Sub.ClassList.Grid.TripleXL \n\n*/\n/*\n\nGridList Item Basic\n\nMarkup:\nflex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius\n\nNOTE:\nIcon and Header use differnt classes because they are a simpler component.\n\nStyleguide Sub.ClassList.Grid.Item \n\n*/\n/*\n\nSubs\n\n<div><p>Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as\n    sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data\n    points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone\n    but are composed into larger, reusable structures.</p>\n<p>These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,\n    or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials\n    (<code>{{> 'Sub.X' }}</code>) to render dynamic or variable content within patterns.</p>\n<p><strong>Common use cases:</strong><br> - <code>{{> 'Sub.Sub.Data.Duration'}}</code> — Displays session duration<br> -\n    <code>{{> 'Sub.Credit' modifier_class='CME'}}</code> — Outputs a credit tag with a modifier<br> -\n    <code>{{> 'Sub.ActionButtons.Favorite'}}</code> — Interactive favorite/save button</p>\n<p><strong>Naming Convention:</strong><br> <code>Sub.Type.Name</code> — Organized by category (e.g., <code>Data</code>,\n    <code>Credit</code>, <code>ActionButtons</code>, <code>ClassList</code>)</p></div>\n\n\n\nNOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.\n\nStyleguide Sub\n*/\n/*\nPlaceholders\n\nPlaceholders are just used across the styleguide. The can be either text or image stand ins for the UI.\n\nWeight: 9999\n\nStyleguide Sub.Placeholder\n*/\n/*\nRecipe\n\nPatterns that are used through out the refactors on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe\n*/\n/*\nArticles\n\nThere are multiple sub components that are used through out the most common page type on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe.Article\n*/\n/*\nData\n\nThere are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.\n\nWeight: 500\n\nStyleguide Sub.Data\n*/\n/*\nClass Lists\n\nArches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items\n\nWeight: 2000\n\nStyleguide Sub.ClassList\n*/\n/*\n\nRich Text \n\nMarkup:\n<div class=\"reading-typography {{modifier_class}}\">\n    <h1>Lorem Ipsum</h1>\n    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href=\"#random2\" target=\"_blank\">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href=\"#random\">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>\n    <h2>Header Level 2</h2>\n    <ol>\n        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n        <li>Aliquam tincidunt mauris eu risus.</li>\n    </ol>\n    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>\n    <h3>Header Level 3</h3>\n    <ul>\n        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>\n        <li>Aliquam tincidunt mauris eu risus.</li>\n    </ul>\n    <button class=\"btn btn-primary\">Button</button>\n\t<details>\n        <summary ><strong>Table of Contents</strong></summary>\n        <div>\n            <ol>\n                <li data-line=\"0\" dir=\"auto\">How to Prepare for the Boards</li>\n                <li data-line=\"1\" dir=\"auto\">General Principles of Cardiovascular Medicine\n                </li>\n                <li data-line=\"2\" dir=\"auto\">Arrhythmias</li>\n                <li data-line=\"3\" dir=\"auto\">Coronary Artery Disease</li>\n                <li data-line=\"4\" dir=\"auto\">Heart Failure &amp; Cardiomyopathy</li>\n                <li data-line=\"5\" dir=\"auto\">Valvular Disease</li>\n                <li data-line=\"6\" dir=\"auto\">Pericardial Disease</li>\n                <li data-line=\"7\" dir=\"auto\">Congenital Heart Disease</li>\n                <li data-line=\"8\" dir=\"auto\">Vascular Diseases</li>\n                <li data-line=\"9\" dir=\"auto\">Systemic Hypertension and Hypotension</li>\n                <li data-line=\"10\" dir=\"auto\">Pulmonary Circulation Disorders</li>\n                <li data-line=\"11\" dir=\"auto\">Systemic Disorders Affecting the Circulatory\n                    System</li>\n                <li data-line=\"12\" dir=\"auto\">\n                    Miscellaneous\n                    <ul>\n                        <li data-line=\"13\" dir=\"auto\">Cardiovascular Genetics</li>\n                        <li data-line=\"14\" dir=\"auto\">CPR, Post-Resuscitation Care</li>\n                        <li data-line=\"15\" dir=\"auto\">Cardiac Critical Care</li>\n                        <li data-line=\"16\" dir=\"auto\">Sleep Disordered Breathing</li>\n                        <li data-line=\"17\" dir=\"auto\">Sports Cardiology</li>\n                        <li data-line=\"18\" dir=\"auto\">Pregnancy and Cardiac Disease</li>\n                        <li data-line=\"19\" dir=\"auto\">Cardiovascular Operative Management\n                        </li>\n                        <li data-line=\"20\" dir=\"auto\">Pharmacology</li>\n                        <li data-line=\"21\" dir=\"auto\">General Principles of Cardiovascular\n                            Medicine</li>\n                    </ul>\n                </li>\n            </ol>\n        </div>\n    </details>\n</div>\n\nHideCodeBlock: display_none \n\nStyleguide  Sub.Placeholder.Typography\n\n*/\n/** SCSS DOC: __globalshame_uc.scss **/"]}