{"version":3,"sources":["journal_recipe.css","journal_recipe.scss","helpers/_helpers.scss","setup/config/_colors.scss","setup/config/_fonts.scss","recipes/sub/_common.scss","recipes/sub/_image-placeholder.scss","recipes/sub/_text-placholder.scss","recipes/sub/_class-list.scss","recipes/sub/__index.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,oBAAA;AAGA,yCAAA;AAKA,gCAAA;ACRA,8BAAA;ADkBA,uCAAA;AAqFQ,0JAAA;AAtER,iCAAA,EAAA,kCAAA;AACA,eAAA;AE7BA,6BAAA;AAiFA,2CAAA;AAmSA;;;;;;;;;;;;;EAAA;AAcA;;;;;;;;;;;;;;;;;EAAA;AFlWA,cAAA;AGrCA,oCAAA;AACA;EAEC,kBAAA;EACA,gBAAA;EACA,+MAAA;EAHA,mBAAA;AJgDD;AIYA;EACC,mCAAA;EACA,qCAAA;EACA,oBAAA;EACA,6CAAA;EACA,uBAAA;AJVD;;AClBA,iBAAA;AAGA,cAAA;AAQA,oDAAA;AACA,qCAAA;AA2JA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAoCA;;;;;;;;;;;CAAA;AAyBA,qBAAA;AAGO,gCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,kCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,oCAAA;AAAA,kCAAA;AAAA,gCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,8BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,gCAAA;AAAA,8BAAA;AAAA,gCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,iCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,8BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,mCAAA;AAAA,oCAAA;AAAA,oCAAA;AAAA,oCAAA;AAAA,oCAAA;AAAA,oCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,+BAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,gCAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,+BAAA;AAAA,6BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,8BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,kCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,mCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,kCAAA;AAAA,4BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,6BAAA;AAAA,4BAAA;AAAA,4BAAA;AAAA,4BAAA;AAAA,4BAAA;AAAA,4BAAA;AAEN;;;;;;;;;CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAqJA;;;;;;;;;;;;;;;;;;;CAAA;AAyBC;;;;;;;;;;;;;;;;;;;;;EAAA;AAsBD;;;;;;;;CAAA;AAUA;;;;;;;CAAA;AASA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA8BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA6BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AAkDC;;;;;;;;;;;;;CAAA;AAmBD;;;;;;;CAAA;AAQA;;;;;;;;;;;;;;;;EAAA;AAkBA;;;;;;;;;;;;CAAA;AAgBA;;;;;;;;EAAA;AASA;;;;;;;;;;;;;;;;EAAA;AAkBA;;;;;;;;;;;;;;;EAAA;AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;AA0BA;;;;;;;;;;;;;;;;;;;;;;CAAA;AAuBA;;;;;;;;;;;;;;;;;;;CAAA;AAqBA;;;;;;;;;;;;;;;;;EAAA;AI/1BA;;;;;;;;;;;;;;;CAAA;ACAA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAUA;;;;;;;;;CAAA;AAWA;;;;;;;;CAAA;AAUA;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;ACjGA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;AAYA;;;;;;;;;CAAA;AAWA;;;;;;;;;CAAA;ACzFA;;;;;;;;;;;;CAAA;AAaA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;;;;CAAA;AAeA;;;;;;;;;CAAA;AAWA;;;;;;;;;;;;CAAA;AChDA;;;;;;;;;;;;;;;;;;;;;;CAAA;AAwBA;;;;;;;;CAAA;AAUA;;;;;;;;CAAA;AAUA;;;;;;;;CAAA;AAUA;;;;;;;;CAAA;AAUA;;;;;;;;CAAA;AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ARiyB6B,sCAAA","file":"../journal_recipe.css","sourcesContent":["@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\n\t\t

primary-n5

\n\t\t

primary-n4

\n\t\t

primary-n3

\n\t\t

primary-n2

\n\t\t

primary-n1

\n\t\t

primary-0

\n\t\t

primary-1

\n\t\t

primary-2

\n\t\t

primary-3

\n\t\t

primary-4

\n\t\t

primary-5

\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.primary\n\n*/\n/*\n\nsecondary: Color Variations \n\nThe Modified versions of the secondary color from this theme\n\nMarkup:\n\n\n\t\t

secondary-n5

  • HEX: #111111
  • RGB: 17, 17, 17
  • HSL: 0deg ,8.5%, 6.8235294118%
\n\t\t

secondary-n4

  • HEX: #232323
  • RGB: 35, 35, 35
  • HSL: 0deg ,7%, 13.6470588235%
\n\t\t

secondary-n3

  • HEX: #3a3a3a
  • RGB: 58, 58, 58
  • HSL: 0deg ,5%, 22.7450980392%
\n\t\t

secondary-n2

  • HEX: #515151
  • RGB: 81, 81, 81
  • HSL: 0deg ,3%, 31.8431372549%
\n\t\t

secondary-n1

  • HEX: #636363
  • RGB: 99, 99, 99
  • HSL: 0deg ,1.5%, 38.6666666667%
\n\t\t

secondary-0

  • HEX: #747474
  • RGB: 116, 116, 116
  • HSL: 0deg, 0%, 45.4901960784%
\n\t\t

secondary-1

  • HEX: #828282
  • RGB: 130, 130, 130
  • HSL: 0deg ,0%, 50.9411764706%
\n\t\t

secondary-2

  • HEX: #979797
  • RGB: 151, 151, 151
  • HSL: 0deg ,0%, 59.1176470588%
\n\t\t

secondary-3

  • HEX: #bababa
  • RGB: 186, 186, 186
  • HSL: 0deg ,0%, 72.7450980392%
\n\t\t

secondary-4

  • HEX: gainsboro
  • RGB: 220, 220, 220
  • HSL: 0deg ,0%, 86.3725490196%
\n\t\t

secondary-5

  • HEX: #f1f1f1
  • RGB: 241, 241, 241
  • HSL: 0deg ,0%, 94.5490196078%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.secondary\n\n*/\n/*\n\nsuccess: Color Variations \n\nThe Modified versions of the success color from this theme\n\nMarkup:\n\n\n\t\t

success-n5

  • HEX: #021906
  • RGB: 2, 25, 6
  • HSL: 130deg ,84.75%, 5.2941176471%
\n\t\t

success-n4

  • HEX: #05320c
  • RGB: 5, 50, 12
  • HSL: 130deg ,84.5%, 10.5882352941%
\n\t\t

success-n3

  • HEX: #085314
  • RGB: 8, 83, 20
  • HSL: 130deg ,84.1666666667%, 17.6470588235%
\n\t\t

success-n2

  • HEX: #0b741c
  • RGB: 11, 116, 28
  • HSL: 130deg ,83.8333333333%, 24.7058823529%
\n\t\t

success-n1

  • HEX: #0d8c22
  • RGB: 13, 140, 34
  • HSL: 130deg ,83.5833333333%, 30%
\n\t\t

success-0

  • HEX: #0fa528
  • RGB: 15, 165, 40
  • HSL: 130deg, 83.3333333333%, 35.2941176471%
\n\t\t

success-1

  • HEX: #12c32f
  • RGB: 18, 195, 47
  • HSL: 130deg ,79.1666666667%, 41.7647058824%
\n\t\t

success-2

  • HEX: #1cea3f
  • RGB: 28, 234, 63
  • HSL: 130deg ,72.9166666667%, 51.4705882353%
\n\t\t

success-3

  • HEX: #68f17f
  • RGB: 104, 241, 127
  • HSL: 130deg ,62.5%, 67.6470588235%
\n\t\t

success-4

  • HEX: #b3f8bf
  • RGB: 179, 248, 191
  • HSL: 130deg ,52.0833333333%, 83.8235294118%
\n\t\t

success-5

  • HEX: #e1fce5
  • RGB: 225, 252, 229
  • HSL: 130deg ,45.8333333333%, 93.5294117647%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.success\n\n*/\n/*\n\nshade: Color Variations \n\nThe Modified versions of the shade color from this theme\n\nMarkup:\n\n\n\t\t

shade-n5

  • HEX: #111111
  • RGB: 17, 17, 17
  • HSL: 0deg ,8.5%, 6.8235294118%
\n\t\t

shade-n4

  • HEX: #232323
  • RGB: 35, 35, 35
  • HSL: 0deg ,7%, 13.6470588235%
\n\t\t

shade-n3

  • HEX: #3a3a3a
  • RGB: 58, 58, 58
  • HSL: 0deg ,5%, 22.7450980392%
\n\t\t

shade-n2

  • HEX: #515151
  • RGB: 81, 81, 81
  • HSL: 0deg ,3%, 31.8431372549%
\n\t\t

shade-n1

  • HEX: #636363
  • RGB: 99, 99, 99
  • HSL: 0deg ,1.5%, 38.6666666667%
\n\t\t

shade-0

  • HEX: #747474
  • RGB: 116, 116, 116
  • HSL: 0deg, 0%, 45.4901960784%
\n\t\t

shade-1

  • HEX: #828282
  • RGB: 130, 130, 130
  • HSL: 0deg ,0%, 50.9411764706%
\n\t\t

shade-2

  • HEX: #979797
  • RGB: 151, 151, 151
  • HSL: 0deg ,0%, 59.1176470588%
\n\t\t

shade-3

  • HEX: #bababa
  • RGB: 186, 186, 186
  • HSL: 0deg ,0%, 72.7450980392%
\n\t\t

shade-4

  • HEX: gainsboro
  • RGB: 220, 220, 220
  • HSL: 0deg ,0%, 86.3725490196%
\n\t\t

shade-5

  • HEX: #f1f1f1
  • RGB: 241, 241, 241
  • HSL: 0deg ,0%, 94.5490196078%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.shade\n\n*/\n/*\n\nwarning: Color Variations \n\nThe Modified versions of the warning color from this theme\n\nMarkup:\n\n\n\t\t

warning-n5

  • HEX: #231105
  • RGB: 35, 17, 5
  • HSL: 23.595505618deg ,75.8016528926%, 7.8823529412%
\n\t\t

warning-n4

  • HEX: #46220b
  • RGB: 70, 34, 11
  • HSL: 23.595505618deg ,75.4049586777%, 15.7647058824%
\n\t\t

warning-n3

  • HEX: #743812
  • RGB: 116, 56, 18
  • HSL: 23.595505618deg ,74.8760330579%, 26.2745098039%
\n\t\t

warning-n2

  • HEX: #a34f19
  • RGB: 163, 79, 25
  • HSL: 23.595505618deg ,74.347107438%, 36.7843137255%
\n\t\t

warning-n1

  • HEX: #c6601e
  • RGB: 198, 96, 30
  • HSL: 23.595505618deg ,73.9504132231%, 44.6666666667%
\n\t\t

warning-0

  • HEX: #df732d
  • RGB: 223, 115, 45
  • HSL: 23.595505618deg, 73.5537190083%, 52.5490196078%
\n\t\t

warning-1

  • HEX: #e28142
  • RGB: 226, 129, 66
  • HSL: 23.595505618deg ,69.8760330579%, 57.2941176471%
\n\t\t

warning-2

  • HEX: #e79662
  • RGB: 231, 150, 98
  • HSL: 23.595505618deg ,64.3595041322%, 64.4117647059%
\n\t\t

warning-3

  • HEX: #efb996
  • RGB: 239, 185, 150
  • HSL: 23.595505618deg ,55.1652892562%, 76.2745098039%
\n\t\t

warning-4

  • HEX: #f7dccb
  • RGB: 247, 220, 203
  • HSL: 23.595505618deg ,45.9710743802%, 88.137254902%
\n\t\t

warning-5

  • HEX: #fcf1ea
  • RGB: 252, 241, 234
  • HSL: 23.595505618deg ,40.4545454545%, 95.2549019608%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.warning\n\n*/\n/*\n\nalert: Color Variations \n\nThe Modified versions of the alert color from this theme\n\nMarkup:\n\n\n\t\t

alert-n5

  • HEX: #1a0503
  • RGB: 26, 5, 3
  • HSL: 4.4295302013deg ,78.4153846154%, 5.7352941176%
\n\t\t

alert-n4

  • HEX: #340a07
  • RGB: 52, 10, 7
  • HSL: 4.4295302013deg ,78.0615384615%, 11.4705882353%
\n\t\t

alert-n3

  • HEX: #56110c
  • RGB: 86, 17, 12
  • HSL: 4.4295302013deg ,77.5897435897%, 19.1176470588%
\n\t\t

alert-n2

  • HEX: #781810
  • RGB: 120, 24, 16
  • HSL: 4.4295302013deg ,77.1179487179%, 26.7647058824%
\n\t\t

alert-n1

  • HEX: #921d14
  • RGB: 146, 29, 20
  • HSL: 4.4295302013deg ,76.7641025641%, 32.5%
\n\t\t

alert-0

  • HEX: #ac2217
  • RGB: 172, 34, 23
  • HSL: 4.4295302013deg, 76.4102564103%, 38.2352941176%
\n\t\t

alert-1

  • HEX: #c8271b
  • RGB: 200, 39, 27
  • HSL: 4.4295302013deg ,72.5897435897%, 44.4117647059%
\n\t\t

alert-2

  • HEX: #e33c2f
  • RGB: 227, 60, 47
  • HSL: 4.4295302013deg ,66.858974359%, 53.6764705882%
\n\t\t

alert-3

  • HEX: #ec7d74
  • RGB: 236, 125, 116
  • HSL: 4.4295302013deg ,57.3076923077%, 69.1176470588%
\n\t\t

alert-4

  • HEX: #f6beba
  • RGB: 246, 190, 186
  • HSL: 4.4295302013deg ,47.7564102564%, 84.5588235294%
\n\t\t

alert-5

  • HEX: #fbe5e3
  • RGB: 251, 229, 227
  • HSL: 4.4295302013deg ,42.0256410256%, 93.8235294118%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.alert\n\n*/\n/*\n\nnavigation: Color Variations \n\nThe Modified versions of the navigation color from this theme\n\nMarkup:\n\n\n\t\t

navigation-n5

  • HEX: #060d1d
  • RGB: 6, 13, 29
  • HSL: 221.8791946309deg ,66.514893617%, 6.9117647059%
\n\t\t

navigation-n4

  • HEX: #0d1a3a
  • RGB: 13, 26, 58
  • HSL: 221.8791946309deg ,65.9659574468%, 13.8235294118%
\n\t\t

navigation-n3

  • HEX: #162c60
  • RGB: 22, 44, 96
  • HSL: 221.8791946309deg ,65.2340425532%, 23.0392156863%
\n\t\t

navigation-n2

  • HEX: #1e3e86
  • RGB: 30, 62, 134
  • HSL: 221.8791946309deg ,64.5021276596%, 32.2549019608%
\n\t\t

navigation-n1

  • HEX: #254ba3
  • RGB: 37, 75, 163
  • HSL: 221.8791946309deg ,63.9531914894%, 39.1666666667%
\n\t\t

navigation-0

  • HEX: #2b58c0
  • RGB: 43, 88, 192
  • HSL: 221.8791946309deg, 63.4042553191%, 46.0784313725%
\n\t\t

navigation-1

  • HEX: #3564d2
  • RGB: 53, 100, 210
  • HSL: 221.8791946309deg ,60.2340425532%, 51.4705882353%
\n\t\t

navigation-2

  • HEX: #567ed9
  • RGB: 86, 126, 217
  • HSL: 221.8791946309deg ,55.4787234043%, 59.5588235294%
\n\t\t

navigation-3

  • HEX: #8fa9e6
  • RGB: 143, 169, 230
  • HSL: 221.8791946309deg ,47.5531914894%, 73.0392156863%
\n\t\t

navigation-4

  • HEX: #c7d4f2
  • RGB: 199, 212, 242
  • HSL: 221.8791946309deg ,39.6276595745%, 86.5196078431%
\n\t\t

navigation-5

  • HEX: #e9eefa
  • RGB: 233, 238, 250
  • HSL: 221.8791946309deg ,34.8723404255%, 94.6078431373%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.navigation\n\n*/\n/*\n\naccent: Color Variations \n\nThe Modified versions of the accent color from this theme\n\nMarkup:\n\n\n\t\t

accent-n5

  • HEX: #260f00
  • RGB: 38, 15, 0
  • HSL: 24deg ,100%, 7.5%
\n\t\t

accent-n4

  • HEX: #4d1f00
  • RGB: 77, 31, 0
  • HSL: 24deg ,100%, 15%
\n\t\t

accent-n3

  • HEX: #803300
  • RGB: 128, 51, 0
  • HSL: 24deg ,100%, 25%
\n\t\t

accent-n2

  • HEX: #b34700
  • RGB: 179, 71, 0
  • HSL: 24deg ,100%, 35%
\n\t\t

accent-n1

  • HEX: #d95700
  • RGB: 217, 87, 0
  • HSL: 24deg ,100%, 42.5%
\n\t\t

accent-0

  • HEX: #ff6600
  • RGB: 255, 102, 0
  • HSL: 24deg, 100%, 50%
\n\t\t

accent-1

  • HEX: #ff751a
  • RGB: 255, 117, 26
  • HSL: 24deg ,95%, 55%
\n\t\t

accent-2

  • HEX: #ff8c40
  • RGB: 255, 140, 64
  • HSL: 24deg ,87.5%, 62.5%
\n\t\t

accent-3

  • HEX: #ffb380
  • RGB: 255, 179, 128
  • HSL: 24deg ,75%, 75%
\n\t\t

accent-4

  • HEX: #ffd9bf
  • RGB: 255, 217, 191
  • HSL: 24deg ,62.5%, 87.5%
\n\t\t

accent-5

  • HEX: #fff0e6
  • RGB: 255, 240, 230
  • HSL: 24deg ,55%, 95%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.accent\n\n*/\n/*\n\ninfo: Color Variations \n\nThe Modified versions of the info color from this theme\n\nMarkup:\n\n\n\t\t

info-n5

  • HEX: #191714
  • RGB: 25, 23, 20
  • HSL: 31.3043478261deg ,18.6666666667%, 8.9117647059%
\n\t\t

info-n4

  • HEX: #332e28
  • RGB: 51, 46, 40
  • HSL: 31.3043478261deg ,17.3333333333%, 17.8235294118%
\n\t\t

info-n3

  • HEX: #544c43
  • RGB: 84, 76, 67
  • HSL: 31.3043478261deg ,15.5555555556%, 29.7058823529%
\n\t\t

info-n2

  • HEX: #766b5e
  • RGB: 118, 107, 94
  • HSL: 31.3043478261deg ,13.7777777778%, 41.5882352941%
\n\t\t

info-n1

  • HEX: #8f8173
  • RGB: 143, 129, 115
  • HSL: 31.3043478261deg ,12.4444444444%, 50.5%
\n\t\t

info-0

  • HEX: #a3988c
  • RGB: 163, 152, 140
  • HSL: 31.3043478261deg, 11.1111111111%, 59.4117647059%
\n\t\t

info-1

  • HEX: #aca298
  • RGB: 172, 162, 152
  • HSL: 31.3043478261deg ,10.5555555556%, 63.4705882353%
\n\t\t

info-2

  • HEX: #bab2a9
  • RGB: 186, 178, 169
  • HSL: 31.3043478261deg ,9.7222222222%, 69.5588235294%
\n\t\t

info-3

  • HEX: #d1ccc6
  • RGB: 209, 204, 198
  • HSL: 31.3043478261deg ,8.3333333333%, 79.7058823529%
\n\t\t

info-4

  • HEX: #e8e5e2
  • RGB: 232, 229, 226
  • HSL: 31.3043478261deg ,6.9444444444%, 89.8529411765%
\n\t\t

info-5

  • HEX: #f6f5f4
  • RGB: 246, 245, 244
  • HSL: 31.3043478261deg ,6.1111111111%, 95.9411764706%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.info\n\n*/\n/*\n\nhighlight: Color Variations \n\nThe Modified versions of the highlight color from this theme\n\nMarkup:\n\n\n\t\t

highlight-n5

  • HEX: #120919
  • RGB: 18, 9, 25
  • HSL: 273.0275229358deg ,52.0524017467%, 6.7352941176%
\n\t\t

highlight-n4

  • HEX: #241233
  • RGB: 36, 18, 51
  • HSL: 273.0275229358deg ,51.2663755459%, 13.4705882353%
\n\t\t

highlight-n3

  • HEX: #3c1e55
  • RGB: 60, 30, 85
  • HSL: 273.0275229358deg ,50.2183406114%, 22.4509803922%
\n\t\t

highlight-n2

  • HEX: #542a76
  • RGB: 84, 42, 118
  • HSL: 273.0275229358deg ,49.1703056769%, 31.431372549%
\n\t\t

highlight-n1

  • HEX: #663390
  • RGB: 102, 51, 144
  • HSL: 273.0275229358deg ,48.384279476%, 38.1666666667%
\n\t\t

highlight-0

  • HEX: #783ca9
  • RGB: 120, 60, 169
  • HSL: 273.0275229358deg, 47.5982532751%, 44.9019607843%
\n\t\t

highlight-1

  • HEX: #8744bd
  • RGB: 135, 68, 189
  • HSL: 273.0275229358deg ,45.2183406114%, 50.4117647059%
\n\t\t

highlight-2

  • HEX: #9b63c8
  • RGB: 155, 99, 200
  • HSL: 273.0275229358deg ,41.6484716157%, 58.6764705882%
\n\t\t

highlight-3

  • HEX: #bc97da
  • RGB: 188, 151, 218
  • HSL: 273.0275229358deg ,35.6986899563%, 72.4509803922%
\n\t\t

highlight-4

  • HEX: #decbed
  • RGB: 222, 203, 237
  • HSL: 273.0275229358deg ,29.7489082969%, 86.2254901961%
\n\t\t

highlight-5

  • HEX: #f2eaf8
  • RGB: 242, 234, 248
  • HSL: 273.0275229358deg ,26.1790393013%, 94.4901960784%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.highlight\n\n*/\n/*\n\nacc: Color Variations \n\nThe Modified versions of the acc color from this theme\n\nMarkup:\n\n\n\t\t

acc-n5

  • HEX: #000a12
  • RGB: 0, 10, 18
  • HSL: 206.9491525424deg ,100%, 3.4705882353%
\n\t\t

acc-n4

  • HEX: #001423
  • RGB: 0, 20, 35
  • HSL: 206.9491525424deg ,100%, 6.9411764706%
\n\t\t

acc-n3

  • HEX: #00213b
  • RGB: 0, 33, 59
  • HSL: 206.9491525424deg ,100%, 11.568627451%
\n\t\t

acc-n2

  • HEX: #002e53
  • RGB: 0, 46, 83
  • HSL: 206.9491525424deg ,100%, 16.1960784314%
\n\t\t

acc-n1

  • HEX: #003764
  • RGB: 0, 55, 100
  • HSL: 206.9491525424deg ,100%, 19.6666666667%
\n\t\t

acc-0

  • HEX: #004176
  • RGB: 0, 65, 118
  • HSL: 206.9491525424deg, 100%, 23.137254902%
\n\t\t

acc-1

  • HEX: #00579d
  • RGB: 0, 87, 157
  • HSL: 206.9491525424deg ,95%, 30.8235294118%
\n\t\t

acc-2

  • HEX: #0077d8
  • RGB: 0, 119, 216
  • HSL: 206.9491525424deg ,87.5%, 42.3529411765%
\n\t\t

acc-3

  • HEX: #3ba7ff
  • RGB: 59, 167, 255
  • HSL: 206.9491525424deg ,75%, 61.568627451%
\n\t\t

acc-4

  • HEX: #9dd3ff
  • RGB: 157, 211, 255
  • HSL: 206.9491525424deg ,62.5%, 80.7843137255%
\n\t\t

acc-5

  • HEX: #d8edff
  • RGB: 216, 237, 255
  • HSL: 206.9491525424deg ,55%, 92.3137254902%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.acc\n\n*/\n/*\nCrayon Box\n\nThis is all of the colors of the theme broken out with its modifications written in hex code.\n\n\nWeight:0\n\nHideCodeBlock: display_none \n\nStyleguide DesignBase.CrayonBox\n*/\n/*Adobe XD Color Map*/\n/* $xd-color_primary-0: #002e5a*/\n/* $xd-color_primary-n5: #00070e*/\n/* $xd-color_primary-n4: #000e1b*/\n/* $xd-color_primary-n3: #00172d*/\n/* $xd-color_primary-n2: #00203f*/\n/* $xd-color_primary-n1: #00274d*/\n/* $xd-color_primary-1: #004384*/\n/* $xd-color_primary-2: #0064c3*/\n/* $xd-color_primary-3: #2d98ff*/\n/* $xd-color_primary-4: #96ccff*/\n/* $xd-color_primary-5: #d5eaff*/\n/* $xd-color_secondary-0: #747474*/\n/* $xd-color_secondary-n5: #111111*/\n/* $xd-color_secondary-n4: #232323*/\n/* $xd-color_secondary-n3: #3a3a3a*/\n/* $xd-color_secondary-n2: #515151*/\n/* $xd-color_secondary-n1: #636363*/\n/* $xd-color_secondary-1: #828282*/\n/* $xd-color_secondary-2: #979797*/\n/* $xd-color_secondary-3: #bababa*/\n/* $xd-color_secondary-4: gainsboro*/\n/* $xd-color_secondary-5: #f1f1f1*/\n/* $xd-color_success-0: #0fa528*/\n/* $xd-color_success-n5: #021906*/\n/* $xd-color_success-n4: #05320c*/\n/* $xd-color_success-n3: #085314*/\n/* $xd-color_success-n2: #0b741c*/\n/* $xd-color_success-n1: #0d8c22*/\n/* $xd-color_success-1: #12c32f*/\n/* $xd-color_success-2: #1cea3f*/\n/* $xd-color_success-3: #68f17f*/\n/* $xd-color_success-4: #b3f8bf*/\n/* $xd-color_success-5: #e1fce5*/\n/* $xd-color_shade-0: #747474*/\n/* $xd-color_shade-n5: #111111*/\n/* $xd-color_shade-n4: #232323*/\n/* $xd-color_shade-n3: #3a3a3a*/\n/* $xd-color_shade-n2: #515151*/\n/* $xd-color_shade-n1: #636363*/\n/* $xd-color_shade-1: #828282*/\n/* $xd-color_shade-2: #979797*/\n/* $xd-color_shade-3: #bababa*/\n/* $xd-color_shade-4: gainsboro*/\n/* $xd-color_shade-5: #f1f1f1*/\n/* $xd-color_warning-0: #df732d*/\n/* $xd-color_warning-n5: #231105*/\n/* $xd-color_warning-n4: #46220b*/\n/* $xd-color_warning-n3: #743812*/\n/* $xd-color_warning-n2: #a34f19*/\n/* $xd-color_warning-n1: #c6601e*/\n/* $xd-color_warning-1: #e28142*/\n/* $xd-color_warning-2: #e79662*/\n/* $xd-color_warning-3: #efb996*/\n/* $xd-color_warning-4: #f7dccb*/\n/* $xd-color_warning-5: #fcf1ea*/\n/* $xd-color_alert-0: #ac2217*/\n/* $xd-color_alert-n5: #1a0503*/\n/* $xd-color_alert-n4: #340a07*/\n/* $xd-color_alert-n3: #56110c*/\n/* $xd-color_alert-n2: #781810*/\n/* $xd-color_alert-n1: #921d14*/\n/* $xd-color_alert-1: #c8271b*/\n/* $xd-color_alert-2: #e33c2f*/\n/* $xd-color_alert-3: #ec7d74*/\n/* $xd-color_alert-4: #f6beba*/\n/* $xd-color_alert-5: #fbe5e3*/\n/* $xd-color_navigation-0: #2b58c0*/\n/* $xd-color_navigation-n5: #060d1d*/\n/* $xd-color_navigation-n4: #0d1a3a*/\n/* $xd-color_navigation-n3: #162c60*/\n/* $xd-color_navigation-n2: #1e3e86*/\n/* $xd-color_navigation-n1: #254ba3*/\n/* $xd-color_navigation-1: #3564d2*/\n/* $xd-color_navigation-2: #567ed9*/\n/* $xd-color_navigation-3: #8fa9e6*/\n/* $xd-color_navigation-4: #c7d4f2*/\n/* $xd-color_navigation-5: #e9eefa*/\n/* $xd-color_accent-0: #ff6600*/\n/* $xd-color_accent-n5: #260f00*/\n/* $xd-color_accent-n4: #4d1f00*/\n/* $xd-color_accent-n3: #803300*/\n/* $xd-color_accent-n2: #b34700*/\n/* $xd-color_accent-n1: #d95700*/\n/* $xd-color_accent-1: #ff751a*/\n/* $xd-color_accent-2: #ff8c40*/\n/* $xd-color_accent-3: #ffb380*/\n/* $xd-color_accent-4: #ffd9bf*/\n/* $xd-color_accent-5: #fff0e6*/\n/* $xd-color_info-0: #a3988c*/\n/* $xd-color_info-n5: #191714*/\n/* $xd-color_info-n4: #332e28*/\n/* $xd-color_info-n3: #544c43*/\n/* $xd-color_info-n2: #766b5e*/\n/* $xd-color_info-n1: #8f8173*/\n/* $xd-color_info-1: #aca298*/\n/* $xd-color_info-2: #bab2a9*/\n/* $xd-color_info-3: #d1ccc6*/\n/* $xd-color_info-4: #e8e5e2*/\n/* $xd-color_info-5: #f6f5f4*/\n/* $xd-color_highlight-0: #783ca9*/\n/* $xd-color_highlight-n5: #120919*/\n/* $xd-color_highlight-n4: #241233*/\n/* $xd-color_highlight-n3: #3c1e55*/\n/* $xd-color_highlight-n2: #542a76*/\n/* $xd-color_highlight-n1: #663390*/\n/* $xd-color_highlight-1: #8744bd*/\n/* $xd-color_highlight-2: #9b63c8*/\n/* $xd-color_highlight-3: #bc97da*/\n/* $xd-color_highlight-4: #decbed*/\n/* $xd-color_highlight-5: #f2eaf8*/\n/* $xd-color_acc-0: #004176*/\n/* $xd-color_acc-n5: #000a12*/\n/* $xd-color_acc-n4: #001423*/\n/* $xd-color_acc-n3: #00213b*/\n/* $xd-color_acc-n2: #002e53*/\n/* $xd-color_acc-n1: #003764*/\n/* $xd-color_acc-1: #00579d*/\n/* $xd-color_acc-2: #0077d8*/\n/* $xd-color_acc-3: #3ba7ff*/\n/* $xd-color_acc-4: #9dd3ff*/\n/* $xd-color_acc-5: #d8edff*/\n/*\n\nBasic HTML\n\nThe Arches Design System, at its core, is a Utility Class Styling Design. It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles. Arches rely on the browser or branding defaults for basic HTML styling. Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation. \n\nWeight: -100\n\nStyleguide HTML\n*/\n/*\n\nReading Typography\n\nReading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the \"reading-typography\" class is used on the parent container. Please note that the reading typography can still look a bit different look depending on the brand or the framework.
modifier classcustomizationusage
.inherit_colorremoves all color rules from colored typography and sets it to inherit.inverting a block of typography where all text and headlines should be white.
.font-size_upshifts all typography up one font size stepintro blocks of text where the text. Or in articles where you can shift all text up a size.
`.font-size_down`shifts all typography down one font size step.citation blocks or boiler plate content where the text should be smaller and less impactful.
.links_darkturns all links to the dark color standard.this is used in junction with the .inherit_color class.
.links_lightturns all links to the light color standard.this is used in junction with the .inherit_color class when text is on a dark background.
* there are further advanced features if you want to apply CSS Property Overrides. \n\nMarkup:\n
\n
\n\t\n\t\t Sub.Placeholder.Image.1200x300 }}\" media=\"(min-width: 1200px)\">\n\t\t Sub.Placeholder.Image.1024x256 }}\" media=\"(min-width: 768px)\">\n\t\t Sub.Placeholder.Image.600x300 }}\" media=\"(min-width: 400px)\"> \n\t\t Sub.Placeholder.Image.300x400 }}\" class=\"w_100\" alt=\"\">\n\t\n
\n
\n User Name\n Log Out \n
\n
\n
\n

This is the primary heading and there should only be one of these per page

\n
sub heading
\n

A small paragraph to emphasis and show important bits.

\n
    \n
  • This is a list item
    • \n
  • So is this - there could be more
    • \n
  • Make sure to style list items to:\n
      \n
    • Not forgetting child list items
      • \n
    • Not forgetting child list items
      • \n
    • Not forgetting child list items
      • \n
    • Not forgetting child list items
      • \n
    \n
    • \n
  • A couple more
    • \n
  • top level list items
    • \n
\n

Don't forget Ordered lists:

\n
    \n
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. \n
  2. Aliquam tincidunt mauris eu risus.\n
      \n
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      2. \n
    2. Aliquam tincidunt mauris eu risus.
      3. \n
    \n
    3. \n
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    4. \n
  4. Aliquam tincidunt mauris eu risus.\n
\n

A sub heading which is not as important as the first, but is quite imporant overall

\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Table HeadingTable Heading
table datatable data
table datatable data
table datatable data
table datatable data
\t\n

A sub heading which is not as important as the second, but should be used with consideration

\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n

“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”

\n

A sub heading which is not as important as the second, but should be used with consideration

\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n 
\n#header h1 a { \n    display: block; \n    width: 300px; \n    height: 80px; \n}\n
\n
A sub heading which is not as important as the second, but should be used with consideration
\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n
\n
Definition list
\n
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.
\n\t
Lorem ipsum dolor sit amet
\n\t
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.
\n\t
\n\t
This heading plays a relatively small bit part role, if you use it at all
\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n
\n
\n Table of Contents\n
\n
    \n
  1. How to Prepare for the Boards
    2. \n
  2. General Principles of Cardiovascular Medicine\n
    3. \n
  3. Arrhythmias
    4. \n
  4. Coronary Artery Disease
    5. \n
  5. Heart Failure & Cardiomyopathy
    6. \n
  6. Valvular Disease
    7. \n
  7. Pericardial Disease
    8. \n
  8. Congenital Heart Disease
    9. \n
  9. Vascular Diseases
    10. \n
  10. Systemic Hypertension and Hypotension
    11. \n
  11. Pulmonary Circulation Disorders
    12. \n
  12. Systemic Disorders Affecting the Circulatory\n System
    13. \n
  13. \n Miscellaneous\n
      \n
    • Cardiovascular Genetics
      • \n
    • CPR, Post-Resuscitation Care
      • \n
    • Cardiac Critical Care
      • \n
    • Sleep Disordered Breathing
      • \n
    • Sports Cardiology
      • \n
    • Pregnancy and Cardiac Disease
      • \n
    • Cardiovascular Operative Management\n
      • \n
    • Pharmacology
      • \n
    • General Principles of Cardiovascular\n Medicine
      • \n
    \n
    14. \n
\n
\n
\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nStyleguide HTML.Typography\n\n*/\n/*\n\nReading Typography Modified\n\nThis text is used as a lorem content in many of our containers. \n\n.color_inherit.bg_acc.c_white.p_4.links_light - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.\n\nMarkup:\n{{> Sub.Placeholder.Typography modifier_class=\" color_inherit bg_acc c_white p_4 links_light\"}}\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nMarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50\n\nStyleguide HTML.Typography.Sample\n\n*/\n/*\n\nLinks States\n\nThis shows the look and feel of all the states of a text link, color, underline and decoration.\n\nMarkup:\n\n\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
\n\t

\n\t\tRoboto Slab\n\t\tfont-family: \"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,\"slab\",serif\n\t

\n\t
\n\t
RS
\n\t\t
\n\t\t\t

Accent Font

\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: -10\n\n Styleguide DesignBase.Fonts.Accent\n*/\n/*\n\nDisplay: Roboto Flex\n\n A Slick font that has a slight interest used for headers and UI. \n\n
\n\t

\n\t\tRoboto Flex\n\t\tfont-family: \"Roboto Flex\",Roboto,\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif\n\t

\n\t
\n\t\t
RF
\n\t\t
\n\t\t\t

Display Font

\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: -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
\n\t

\n\t\t\"Roboto Flex\"\n\t\tfont-family: \"\"Roboto Flex\",Roboto,\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif\"\n\t

\n\t
\n\t\t
RF
\n\t\t
\n\t\t\t

Content Font

\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: 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
\n\t

\n\t\t\"Roboto Flex\"\n\t\tfont-family: \"\"Roboto Flex\",Roboto,\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif\"\n\t

\n\t
\n\t\t
RF
\n\t\t
\n\t\t\t

Content Font

\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: 1\n\n Styleguide DesignBase.Fonts.UI\n*/\n/*\n\nIcons: Not Using Enteprise Solution\n\nThere are some subtle effects that happen when a platform doesn't use the enteprise solution for fonts. The most prominent is the loss of the icon link decoration standard with in content. \n\n\nMarkupWrapperClasses:\n\nNOTE: Not Using Enteprise Solution of Font Awesome\n\n\nStyleguide DesignBase.IconsFalse\n*/\n/*\n\nACC's Blue\n\n$acc-blue - #004176; acc\n\nStyleguide DesignBase.Colors.ACC\n*/\n/*\n\nTheme Colors \n\nColors are based off of the ACC Scrub Colors.\n\nmap-get($theme-palette, primary) - #002e5a; primary\nmap-get($theme-palette, secondary) - #747474; secondary\nmap-get($theme-palette, shade) \t - #747474; shade\nmap-get($theme-palette, accent) - #ff6600; accent\nmap-get($theme-palette, info) - #a3988c; info\nmap-get($theme-palette, highlight) - #783ca9; highlight\n\nWeight:-1000\n\nStyleguide DesignBase.Colors\n */\n/*\n\nAction Colors \n\nActionable colors used to respond to user inputs and messaging.\n\nmap-get($theme-palette, alert) - #ac2217; alert\nmap-get($theme-palette, warning) - #df732d; warning\nmap-get($theme-palette, success) - #0fa528; success\nmap-get($theme-palette, navigation) - #2b58c0; navigation\n\nStyleguide DesignBase.Colors.Actions\n*/\n/*\n\nColor Coding \n\nColor Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an associated meaning. All of these colors are just used for reference and have no associated decorator classes. You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors. \n\nStyleguide DesignBase.Colors.ColorCoding\n\n */\n/*\n\nCOR Colors \n\n(COR) Class of Recommendation is a color collect used in Guideline recommendations.\n\n$cor-green \t- #6fc284; I\n$cor-yellow \t- #ffd44f; IIA\n$cor-yellow-orange - #faa74b; IIA\n$cor-orange \t- #f15d4c;III and III-NoHarm\n$cor-red \t\t- #ed1c00; III-harm\n\nWeight: 10\n\nStyleguide DesignBase.Colors.ColorCoding.COR\n\n */\n/*\n\nLOE Colors \n\n(LOE) level of Evidence is a color collect used in Guideline recommendations.\n\n$loe-dark-blue \t- rgb(62, 111, 183);LOE A\n$loe-mid-blue \t\t- rgb(101, 156, 211);LOE B-R\n$loe-light-blue \t- rgb(161, 193, 230);LOE B-NR\n$loe-pale-blue \t- rgb(181, 213, 229); LOE C\n\nWeight: 10\n\nStyleguide DesignBase.Colors.ColorCoding.LOE\n\n */\n/*\n\nCredit Type Color Coding \n\nCredit Types in the ACC have a specific color coding.\n\n$credit-AAPA - #e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit \n$credit-ABP - #007a5b; ABP-MOC: American Board of Pediatrics \n$credit-ABPMOCII - #0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2 \n$credit-ABPMOCIV - #105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4 \n$credit-ATCEU - #775744; ATCEU: Athletic Trainer Continuing Education Unit \n$credit-CE - #a8a8a8; CE: Continuing CCA\\Tech Education \n$credit-CME - #00a15b; CME: AMA PRA Category 1TM Credit(s)  \n$credit-CNE - #198dae; CNE: Continuing Nurse Education \n$credit-CNErx - #52549e; CNErx: Continuing Nursing Education Pharmaceutical \n$credit-COP - #775891; COP: Certificate of Participation  \n$credit-CPE - #992e2e; CPE: Continuing Pharmacy Education \n$credit-ECME - #d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit\n$credit-IPCE - #6c36b3; IPCE: Interprofessional Continuing Education Credit\n$credit-MOCII - #9a1267; MOC II: ABIM MOC Part II \n$credit-MOCIV - #d3248d; MOC IV: ABIM MOC Part IV \n\nWeight: 0\n\nStyleguide DesignBase.Colors.ColorCoding.Credits\n\n*/\n/*\n\nClinical Pathway Colors \n\nEach of the clinical pathways has a distinctive color. These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.\n\n$pathway-acute-coronary-syndromes \t\t\t\t\t\t- #009974; Acute Coronary Syndromes\n$pathway-arrhythmias-EP \t\t\t\t\t\t\t\t- #005b37; arrhythmias and Clinical EP\n$pathway-congenital-heart-disease \t\t\t\t\t\t- #fdb918; Congenital Heart Disease\n$pathway-ecg-stress-test \t\t\t\t\t\t\t\t- #d9691f; Standard ECG, Stress Test\n$pathway-heart-failure \t\t\t\t\t\t\t\t\t- #410d49; Heart Failure and Cardiomyopathies\n$pathway-invasive-cardiology \t\t\t\t\t\t\t- #c8b02f; Invasive Cardiology Angiography and Intervention\n$pathway-noninvasive-cardiology \t\t\t\t\t\t- #947b33; Noninvasive Cardiology\n$pathway-pandemic \t\t\t\t\t\t\t\t\t\t- #8e2582; Pandemic \"Covid\"\n$pathway-pericardial \t\t\t\t\t\t\t\t\t- #0079ad; pericardial Disease\n$pathway-prevention \t\t\t\t\t\t\t\t\t- #a01d51; Prevention\n$pathway-pulmonary-hypertension \t\t\t\t\t\t- #d60e7e; Pulmonary Hypertension and Venous Thromboembolic Disease\n$pathway-special \t\t\t\t\t\t\t\t\t\t- #00b6f1; Special\n$pathway-stable-ischemic-heart-disease \t\t\t\t- #0f3e65; Stable ischemic Heart Disease\n$pathway-valvular-heart-disease \t\t\t\t\t\t- #4f4190; Valvular Heart Disease\n$pathway-vascular-medicine \t\t\t\t\t\t\t\t- #ae171c; Vascular Medicine\n\nWeight: -1\n\nStyleguide DesignBase.Colors.ColorCoding.Pathways\n\n*/\n/*\n\nRegistry CC\n\nCredit Type Color codes in the ACC have a specific color coding.\n\n$registry-cpmi - #f22418; Chest Pain MI Registry\n$registry-afib - #ffb300; AFib Ablation Registry\n$registry-cathpci - #0086d5; CathPCI Registry\n$registry-icd - #80b800; ICD Registry\n$registry-impact - #4e1f73; IMPACT Registry\n$registry-pinnacle-primary - #0e4f1b; PINNACLE Registry (Primary)\n$registry-pinnacle-accent - #b3c4c4; PINNACLE Registry (Accent)\n$registry-focus - #d6560d; Patient Navigator Focus MI\n$registry-pcibleeding - #c0268e; Reducing Risk PCI Bleeding\n$registry-laao - #00667a; LAAO Registry\n$registry-pvi - #00947f; PVI Registry\n$registry-auxdata - #04adad; Auxiliar Data Collection\n$registry-ststvt - #a20062; STS ACC TVT Registry\n$registry-diabetes - #7893b8; Diabetes Collaborative \n\nWeight: 2000\n\nStyleguide DesignBase.Colors.ColorCoding.Registry\n\n*/\n/*\n\nJournal\n\nJournals of JACC have specific branding colors.\n\n$journal-jc - #002e5a; Journal of the American College of Cardiology: (JC)\n$journal-adv - #0000FF; JACC: Advances: (JC-ADV)\n$journal-asia - #ec2939; JACC: Asia: (JC-ASIA)\n$journal-tran - #1788c2; JACC: Basic to Translational Science: (JC-TRAN)\n$journal-cvonc - #00ae81; JACC: CardioOncology: (JC-CVONC)\n$journal-case - #f37321; JACC: Case Reports: (JC-CASE)\n$journal-ep - #8a5e96; JACC: Clinical Electrophysiology: (JC-EP)\n$journal-hf - #991326; JACC: Heart Failure: (JC-HF)\n$journal-invt - #038e92; JACC: Cardiovascular Interventions: (JC-INVT)\n$journal-imag - #c18a0e; JACC: Cardiovascular Imaging: (JC-IMAG)\n\n\nWeight: 2000\n\nStyleguide DesignBase.Colors.ColorCoding.Journals\n\n*/\n/*\n\nSocial Network Colors \n\nEach of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.\n\n$twitter - #000; \t\ttwitter \n$facebook - #3b5998; \tfacebook \n$linkedin - #007bb6; \tlinkedin \n$apple-store - #ea4cc0; \tapple-store \n$google-play - #689f38; \tgoogle-play \n$youtube - #bb0000; \tyoutube \n\n\n\nWeight: 100\n\nStyleguide DesignBase.Colors.ColorCoding.Social Networks\n\n*/\n/*\n\tTextures\n\n\tAll textures in the Arches design are a subtle variation of transparent. Allowing for colors to bleed through from behind. Different textures have intentions or are reserved for certain usagaes. \n\n\t.texture_light \t\t- Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of. \n\t.texture_medium \t\t\t\t\t- medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.\n\t.texture_dust \t\t\t\t\t- Dust is the most transparent texture allowing for the color of the background to show through the most. This is used for the painted tops of cards, or score bars.\n\t.texture_dark \t\t\t\t\t- This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable. \n\t.texture_cross \t\t\t\t\t- A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.\n\t.texture_disabled \t\t\t\t- This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand. \n\n\tMarkup:\n\t
{{modifier_class}} with a light primary color background
\n\n\tStyleguide DesignBase.Textures\n\n */\n/*\n\nRead More Arrow\n\nThis stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.\n\nMarkup:\n\n \n \n\n\n\nStyleGuide Sub.Component.Common.ReadMoreArrow \n\n*/\n/*\n\n600w x 300h \n\nMarkup:\nhttps://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x300\n\n*/\n/*\n\n600w x 400h \n\nMarkup:\nhttps://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x400\n\n*/\n/*\n\n1200w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1200x300\n\n*/\n/*\n\n375w x 250h\n\nMarkup:\nhttps://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.375x250\n\n*/\n/*\n320w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.320x300\n\n*/\n/*\n\n1024w x 256h\n\nMarkup:\nhttps://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1024x256\n\n*/\n/*\nAspect 21x9\n\nMarkup:\nhttps://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.21x9\n*/\n/*\nAspect 16x9\n\nMarkup:\nhttps://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.16x9\n*/\n/*\n\n300w x 400h\n\nMarkup:\nhttps://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.300x400\n\n*/\n/*\n\nsquare\n\nMarkup:\nhttps://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.Square\n\n*/\n/*\n\nMax 20 Character\n\nMarkup:\nDi dolores (20 Chars)\n\nStyleguide Sub.Placeholder.Text.20ch\n\n*/\n/*\n\nMax 30 Character\n\nMarkup:\nCommodi dolores (30 Characters)\n\nStyleguide Sub.Placeholder.Text.30ch\n\n*/\n/*\n\nMax 40 Character\n\nMarkup:\nRerum libg dero pariatur (40 Characters)\n\nStyleguide Sub.Placeholder.Text.40ch\n\n*/\n/*\n\nMax 60 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er (60 Characters)\n\nStyleguide Sub.Placeholder.Text.60ch\n\n*/\n/*\n\nMax 80 Character\n\nMarkup:\nEius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)\n\nStyleguide Sub.Placeholder.Text.80ch\n\n*/\n/*\n\nMax 100 Character\n\nMarkup:\nOfficia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)\n\nStyleguide Sub.Placeholder.Text.100ch\n\n*/\n/*\n\nMax 150 Character\n\nMarkup:\nSvel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)\n\nStyleguide Sub.Placeholder.Text.150ch\n\n*/\n/*\n\nMax 200 Character\n\nMarkup:\nDignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)\n\nStyleguide Sub.Placeholder.Text.200ch\n\n*/\n/*\n\nMax 250 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)\n\nStyleguide Sub.Placeholder.Text.250ch\n\n*/\n/*\n\nGrid - Triple Card Holder\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography\n\nNOTE:\nTriple up cards with shaded background are used only in full screen pages\n\nStyleguide Sub.ClassList.Grid.Card.Split-Triple \n\n*/\n/*\n\nTriple Split with Sidebar\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left\n\nNOTE:\nTriple up splits\n\nStyleguide Sub.ClassList.Grid.TripleLG\n\n*/\n/*\n\nGrid - Card Holder - 50 split\n\nMarkup:\ncolumns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid\n\nNOTE:\nsplit layouts great for half page cards\n\nStyleguide Sub.ClassList.Grid.Split-50\n\n*/\n/*\n\nGridList Triple on XL\n\nMarkup:\ncolumns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none\n\nStyleguide Sub.ClassList.Grid.TripleXL \n\n*/\n/*\n\nGridList Item Basic\n\nMarkup:\nflex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius\n\nNOTE:\nIcon and Header use differnt classes because they are a simpler component.\n\nStyleguide Sub.ClassList.Grid.Item \n\n*/\n/*\n\nSubs\n\n

Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as\n sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data\n points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone\n but are composed into larger, reusable structures.

\n

These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,\n or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials\n ({{> 'Sub.X' }}) to render dynamic or variable content within patterns.

\n

Common use cases:
- {{> 'Sub.Sub.Data.Duration'}} — Displays session duration
-\n {{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier
-\n {{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button

\n

Naming Convention:
Sub.Type.Name — Organized by category (e.g., Data,\n Credit, ActionButtons, ClassList)

\n\n\n\nNOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.\n\nStyleguide Sub\n*/\n/*\nPlaceholders\n\nPlaceholders are just used across the styleguide. The can be either text or image stand ins for the UI.\n\nWeight: 9999\n\nStyleguide Sub.Placeholder\n*/\n/*\nRecipe\n\nPatterns that are used through out the refactors on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe\n*/\n/*\nArticles\n\nThere are multiple sub components that are used through out the most common page type on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe.Article\n*/\n/*\nData\n\nThere are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.\n\nWeight: 500\n\nStyleguide Sub.Data\n*/\n/*\nClass Lists\n\nArches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items\n\nWeight: 2000\n\nStyleguide Sub.ClassList\n*/\n/*\n\nRich Text \n\nMarkup:\n
\n

Lorem Ipsum

\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

\n

Header Level 2

\n
    \n
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. \n
  2. Aliquam tincidunt mauris eu risus.
    3. \n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

\n

Header Level 3

\n
    \n
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • \n
  • Aliquam tincidunt mauris eu risus.
    • \n
\n \n\t
\n Table of Contents\n
\n
    \n
  1. How to Prepare for the Boards
    2. \n
  2. General Principles of Cardiovascular Medicine\n
    3. \n
  3. Arrhythmias
    4. \n
  4. Coronary Artery Disease
    5. \n
  5. Heart Failure & Cardiomyopathy
    6. \n
  6. Valvular Disease
    7. \n
  7. Pericardial Disease
    8. \n
  8. Congenital Heart Disease
    9. \n
  9. Vascular Diseases
    10. \n
  10. Systemic Hypertension and Hypotension
    11. \n
  11. Pulmonary Circulation Disorders
    12. \n
  12. Systemic Disorders Affecting the Circulatory\n System
    13. \n
  13. \n Miscellaneous\n
      \n
    • Cardiovascular Genetics
      • \n
    • CPR, Post-Resuscitation Care
      • \n
    • Cardiac Critical Care
      • \n
    • Sleep Disordered Breathing
      • \n
    • Sports Cardiology
      • \n
    • Pregnancy and Cardiac Disease
      • \n
    • Cardiovascular Operative Management\n
      • \n
    • Pharmacology
      • \n
    • General Principles of Cardiovascular\n Medicine
      • \n
    \n
    14. \n
\n
\n
\n
\n\nHideCodeBlock: display_none \n\nStyleguide Sub.Placeholder.Typography\n\n*/\n/** SCSS DOC: __globalshame_uc.scss **/","/** 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:\"

#{$colorName}-#{$modifier-label}

  • HEX: #{get-theme-color($colorName, $modifier)}
  • RGB: #{get-theme-color($colorName, $modifier, RGB)}
  • HSL: #{get-theme-color($colorName, $modifier, HSL)}
\";\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\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\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.
modifier classcustomizationusage
.inherit_colorremoves all color rules from colored typography and sets it to inherit.inverting a block of typography where all text and headlines should be white.
.font-size_upshifts all typography up one font size stepintro blocks of text where the text. Or in articles where you can shift all text up a size.
`.font-size_down`shifts all typography down one font size step.citation blocks or boiler plate content where the text should be smaller and less impactful.
.links_darkturns all links to the dark color standard.this is used in junction with the .inherit_color class.
.links_lightturns all links to the light color standard.this is used in junction with the .inherit_color class when text is on a dark background.
* there are further advanced features if you want to apply CSS Property Overrides. \n\nMarkup:\n
\n
\n\t\n\t\t Sub.Placeholder.Image.1200x300 }}\" media=\"(min-width: 1200px)\">\n\t\t Sub.Placeholder.Image.1024x256 }}\" media=\"(min-width: 768px)\">\n\t\t Sub.Placeholder.Image.600x300 }}\" media=\"(min-width: 400px)\"> \n\t\t Sub.Placeholder.Image.300x400 }}\" class=\"w_100\" alt=\"\">\n\t\n
\n
\n User Name\n Log Out \n
\n
\n
\n

This is the primary heading and there should only be one of these per page

\n
sub heading
\n

A small paragraph to emphasis and show important bits.

\n
    \n
  • This is a list item
    • \n
  • So is this - there could be more
    • \n
  • Make sure to style list items to:\n
      \n
    • Not forgetting child list items
      • \n
    • Not forgetting child list items
      • \n
    • Not forgetting child list items
      • \n
    • Not forgetting child list items
      • \n
    \n
    • \n
  • A couple more
    • \n
  • top level list items
    • \n
\n

Don't forget Ordered lists:

\n
    \n
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. \n
  2. Aliquam tincidunt mauris eu risus.\n
      \n
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      2. \n
    2. Aliquam tincidunt mauris eu risus.
      3. \n
    \n
    3. \n
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    4. \n
  4. Aliquam tincidunt mauris eu risus.\n
\n

A sub heading which is not as important as the first, but is quite imporant overall

\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Table HeadingTable Heading
table datatable data
table datatable data
table datatable data
table datatable data
\t\n

A sub heading which is not as important as the second, but should be used with consideration

\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n

“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”

\n

A sub heading which is not as important as the second, but should be used with consideration

\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n 
\n#header h1 a { \n    display: block; \n    width: 300px; \n    height: 80px; \n}\n
\n
A sub heading which is not as important as the second, but should be used with consideration
\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n
\n
Definition list
\n
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.
\n\t
Lorem ipsum dolor sit amet
\n\t
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.
\n\t
\n\t
This heading plays a relatively small bit part role, if you use it at all
\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

\n
\n
\n Table of Contents\n
\n
    \n
  1. How to Prepare for the Boards
    2. \n
  2. General Principles of Cardiovascular Medicine\n
    3. \n
  3. Arrhythmias
    4. \n
  4. Coronary Artery Disease
    5. \n
  5. Heart Failure & Cardiomyopathy
    6. \n
  6. Valvular Disease
    7. \n
  7. Pericardial Disease
    8. \n
  8. Congenital Heart Disease
    9. \n
  9. Vascular Diseases
    10. \n
  10. Systemic Hypertension and Hypotension
    11. \n
  11. Pulmonary Circulation Disorders
    12. \n
  12. Systemic Disorders Affecting the Circulatory\n System
    13. \n
  13. \n Miscellaneous\n
      \n
    • Cardiovascular Genetics
      • \n
    • CPR, Post-Resuscitation Care
      • \n
    • Cardiac Critical Care
      • \n
    • Sleep Disordered Breathing
      • \n
    • Sports Cardiology
      • \n
    • Pregnancy and Cardiac Disease
      • \n
    • Cardiovascular Operative Management\n
      • \n
    • Pharmacology
      • \n
    • General Principles of Cardiovascular\n Medicine
      • \n
    \n
    14. \n
\n
\n
\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\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
\n\t

\n\t\t#{map-deep-get($fonts, accent, name)}\n\t\tfont-family: #{map-deep-get($fonts, accent, stack)}\n\t

\n\t
\n\t
#{map-deep-get($fonts, accent, short-name)}
\n\t\t
\n\t\t\t

Accent Font

\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: -10\n\n Styleguide DesignBase.Fonts.Accent\n*/\n/*\n\nDisplay: #{map-deep-get($fonts, display, name)}\n \n A Slick font that has a slight interest used for headers and UI. \n\n
\n\t

\n\t\t#{map-deep-get($fonts, display, name)}\n\t\tfont-family: #{map-deep-get($fonts, display, stack)}\n\t

\n\t
\n\t\t
#{map-deep-get($fonts, display, short-name)}
\n\t\t
\n\t\t\t

Display Font

\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: -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
\n\t

\n\t\t\"#{map-deep-get($fonts, 'copy', 'name')}\"\n\t\tfont-family: \"#{map-deep-get($fonts, 'copy', 'stack')}\"\n\t

\n\t
\n\t\t
#{map-deep-get($fonts, copy, short-name)}
\n\t\t
\n\t\t\t

Content Font

\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: 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
\n\t

\n\t\t\"#{map-deep-get($fonts, 'ui', 'name')}\"\n\t\tfont-family: \"#{map-deep-get($fonts, 'ui', 'stack')}\"\n\t

\n\t
\n\t\t
#{map-deep-get($fonts, ui, short-name)}
\n\t\t
\n\t\t\t

Content Font

\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
a b c d e f g h i j k l m n o p q r s t u v w x y z
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: 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
\n\t

The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications.

The organization uses version 6 of Font Awesome's icon sets.

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.

Font AwesomeIcon Dictionary
\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
{{modifier_class}} with a light primary color background
\n\n\tStyleguide DesignBase.Textures\n\n */\n@import \"recipes/sub/_index\";/** SCSS DOC: __globalshame_uc.scss **/","/** SCSS DOC: _helpers.scss **/\n\n// @import \"fixes\";\n@import \"str-replace\";\n@import \"strip-unit\";\n@import \"class-name-constructor\";\n//@import \"clamp\";\n@import \"str-explode\";\n@import \"deep-map-check\";\n@import \"map-deep-get\";\n@import \"map-deep-set\";\n@import \"get\";\n\n@import \"make-shadow\";\n@import \"color-loop\";\n@import \"size-loop\";\n@import \"styleguide\"\n\n// Exsists in foundation\n\n\n\n","@use \"sass:map\";\n@use \"sass:selector\";\n@use \"sass:color\";\n@use \"sass:math\";\n\n/** SCSS DOC: _colors.scss **/\n\n$acc-blue: #004176 !default;\n$teal: #198dae !default;\n$green-blue: #24ccae !default;\n$dark-grey: #676a72 !default;\n$alt-grey: #a3988c !default;\n$green: #06a022 !default;\n$orange: #da8210 !default;\n$red: #dd1a1a !default;\n$blue: #2b58c0 !default;\n$purple: #976ad2 !default;\n$magenta: #c34198 !default;\n$white: rgb(251, 247, 247) !default;\n$black: rgb(19, 18, 18) !default;\n// Currently Un used in the design but part of bootstrap.\n$indigo: #6610f2 !default;\n$pink: #e83e8c !default;\n$yellow: #ffc107 !default;\n$cyan: #17a2b8 !default;\n$gray-100: mix($white, $black, 10%) !default;\n$gray-200: mix($white, $black, 20%) !default;\n$gray-300: mix($white, $black, 30%) !default;\n$gray-400: mix($white, $black, 40%) !default;\n$gray-500: mix($white, $black, 50%) !default;\n$gray-600: mix($white, $black, 60%) !default;\n$gray-700: mix($white, $black, 70%) !default;\n$gray-800: mix($white, $black, 80%) !default;\n$gray-900: mix($white, $black, 90%) !default;\n$grays: () !default;\n$grays: map-merge(\n\t(\n\t\t\"100\": $gray-100,\n\t\t\"200\": $gray-200,\n\t\t\"300\": $gray-300,\n\t\t\"400\": $gray-400,\n\t\t\"500\": $gray-500,\n\t\t\"600\": $gray-600,\n\t\t\"700\": $gray-700,\n\t\t\"800\": $gray-800,\n\t\t\"900\": $gray-900,\n\t),\n\t$grays\n);\n$colors: () !default;\n$colors: map-merge(\n\t(\n\t\t\"blue\": $blue,\n\t\t\"indigo\": $indigo,\n\t\t\"purple\": $purple,\n\t\t\"pink\": $pink,\n\t\t\"red\": $red,\n\t\t\"orange\": $orange,\n\t\t\"yellow\": $yellow,\n\t\t\"green\": $green,\n\t\t\"teal\": $teal,\n\t\t\"cyan\": $cyan,\n\t\t\"white\": $white,\n\t\t\"gray\": $gray-600,\n\t\t\"gray-dark\": $gray-800,\n\t),\n\t$colors\n);\n$theme-palette: () !default;\n\n$theme-palette: map-merge(\n\t(\n\t\tprimary: $teal,\n\t\tsecondary: $dark-grey,\n\t\tsuccess: $green,\n\t\tshade: $gray-500,\n\t\twarning: $orange,\n\t\talert: $red,\n\t\tnavigation: $blue,\n\t\taccent: $green-blue,\n\t\tinfo: $alt-grey,\n\t\thighlight: $purple,\n\t\tacc: $acc-blue,\n\t),\n\t$theme-palette\n);\n/** Setting link color variables in scss **/\n$link-color-light:\t\t\t\t\tget-theme-color(accent, 3) !default;\n$link-color-light--hover:\t\t\tget-theme-color(accent, 5) !default;\n$link-color-light--visited:\t\t\tcolor.scale( get-theme-color(accent, 2), $saturation: -70%) !default;\n$link-color-dark:\t\t\t\t\tget-theme-color(accent, -3) !default;\n$link-color-dark--hover:\t\t\tget-theme-color(accent, -5) !default;\n$link-color-dark--visited:\t\t\tcolor.scale( get-theme-color(accent, -2), $saturation: -70%) !default;\n\n\n\n\n\n$cor-green: #6fc284;\n$cor-yellow: #ffd44f;\n$cor-yellow-orange: #faa74b;\n$cor-orange: #f15d4c;\n$cor-red: #ed1c00;\n$cor-pale-pink:#fcdbd8;\n$COR: () !default;\n$COR: map-merge(\n\t(\n\t\tI: $cor-green,\n\t\tIIA: $cor-yellow,\n\t\tIIB: $cor-yellow-orange,\n\t\tIII: $cor-orange,\n\t\tIII-NOBENIFIT: $cor-orange,\n\t\tIII-HARM: $cor-red,\n\t\tIII-4: $cor-pale-pink\n\t),\n\t$COR\n);\n$loe-dark-blue: rgb(62, 111, 183);\n$loe-mid-blue: rgb(101, 156, 211);\n$loe-light-blue: rgb(161, 193, 230);\n$loe-pale-blue: rgb(181, 213, 229);\n$LOE: () !default;\n$LOE: map-merge(\n\t(\n\t\tA: $loe-dark-blue,\n\t\tB-NR: $loe-mid-blue,\n\t\tB-BR: $loe-light-blue,\n\t\tC-LD: $loe-pale-blue,\n\t\tC-EO: $loe-pale-blue,\n\t),\n\t$LOE\n);\n\n$credit-AAPA: #e8c536;\n$credit-ABP: #007a5b;\n$credit-ABPMOCII: #0b6d4c;\n$credit-ABPMOCIV: #105a3b;\n$credit-ATCEU: #775744;\n$credit-CE: #a8a8a8;\n$credit-CME: #00a15b;\n$credit-CNE: #198dae;\n$credit-AANP: #2667b2;\n$credit-CNErx: #52549e;\n$credit-COP: #775891;\n$credit-CPE: #992e2e;\n$credit-ECME: #d16528;\n$credit-IPCE:#6c36b3;\n$credit-MOC: #9a1267;\n$credit-MOCII: #9a1267;\n$credit-MOCIV: #d3248d;\n$credit-ACHE : #9733a5;\n\n$CreditColors: () !default;\n$CreditColors: map-merge(\n\t(\n\t\tAANP: $credit-AANP,\n\t\tAAPA: $credit-AAPA,\n\t\tABP: $credit-ABP,\n\t\tABPMOCII: $credit-ABPMOCII,\n\t\tABPMOCIV: $credit-ABPMOCIV,\n\t\tATCEU: $credit-ATCEU,\n\t\tCE: $credit-CE,\n\t\tCME: $credit-CME,\n\t\tCNE: $credit-CNE,\n\t\tCNErx: $credit-CNErx,\n\t\tCOP: $credit-COP,\n\t\tCPE: $credit-CPE,\n\t\tECME: $credit-ECME,\n\t\tIPCE:$credit-IPCE,\n\t\tMOC: $credit-MOCII,\n\t\tMOCII: $credit-MOCII,\n\t\tMOCIV: $credit-MOCIV,\n\t\tACHE: $credit-ACHE,\n\t),\n\t$CreditColors\n);\n$pathway-invasive-cardiology: #c8b02f;\n$pathway-congenital-heart-disease: #fdb918;\n$pathway-noninvasive-cardiology: #947b33;\n$pathway-ecg-stress-test: #d9691f;\n$pathway-vascular-medicine: #ae171c;\n$pathway-pulmonary-hypertension: #d60e7e;\n$pathway-prevention: #a01d51;\n$pathway-heart-failure: #410d49;\n$pathway-valvular-heart-disease: #4f4190;\n$pathway-arrhythmias-EP: #005b37;\n$pathway-pericardial: #0079ad;\n$pathway-acute-coronary-syndromes: #009974;\n$pathway-stable-ischemic-heart-disease: #0f3e65;\n$pathway-special: #00b6f1;\n$pathway-pandemic: #8e2582;\n$PathwayColors: () !default;\n$PathwayColors: map-merge(\n\t(\n\t\tinvasive: $pathway-invasive-cardiology,\n\t\tcongenital: $pathway-congenital-heart-disease,\n\t\tnoninvasive: $pathway-noninvasive-cardiology,\n\t\tecg: $pathway-ecg-stress-test,\n\t\tvascular: $pathway-vascular-medicine,\n\t\tpulmonary: $pathway-pulmonary-hypertension,\n\t\tprevention: $pathway-prevention,\n\t\thf: $pathway-heart-failure,\n\t\tvalvular: $pathway-valvular-heart-disease,\n\t\tarrhythmias: $pathway-arrhythmias-EP,\n\t\tpericardial: $pathway-pericardial,\n\t\tacute: $pathway-acute-coronary-syndromes,\n\t\tischemic: $pathway-stable-ischemic-heart-disease,\n\t\tspecial: $pathway-special,\n\t\tpandemic: $pathway-pandemic,\n\t),\n\t$PathwayColors\n);\n\n$pathwayV2-invt: #c8b02f;\n$pathwayV2-pchd: #fdb918;\n$pathwayV2-imag: #947b33;\n$pathwayV2-vasc: #ae171c;\n$pathwayV2-pulmvd: #d60e7e;\n$pathwayV2-valv: #4f4190;\n$pathwayV2-ep: #005b37;\n$pathwayV2-ischem: #0f3e65;\n$pathwayV2-special: #00b6f1;\n$pathwayV2-prev: #a01d51;\n$pathwayV2-hf: #410d49;\n\n$PathwayColorsV2: () !default;\n$PathwayColorsV2: map-merge(\n\t(\n\t\tinvt: $pathwayV2-invt,\n\t\tpchd: $pathwayV2-pchd,\n\t\timag: $pathwayV2-imag,\n\t\tvasc: $pathwayV2-vasc,\n\t\tpulmvd: $pathwayV2-pulmvd,\n\t\tprev: $pathwayV2-prev,\n\t\thf: $pathwayV2-hf,\n\t\tvalv: $pathwayV2-valv,\n\t\tep: $pathwayV2-ep,\n\t\tischem: $pathwayV2-ischem,\n\t\tspecial: $pathwayV2-special\n\t),\n\t$PathwayColorsV2\n);\n\n$pathwayV3-arr: #c73d53;\n$pathwayV3-prev: #9f1d51;\n$pathwayV3-chd: #006838;\n$pathwayV3-invt: #b2c83a;\n$pathwayV3-hf: #935ca6;\n$pathwayV3-ischem: #0c4166;\n$pathwayV3-imag: #fdb913;\n$pathwayV3-pulmvd: #d50e7e;\n$pathwayV3-special: #00b6f1;\n$pathwayV3-vasc: #f15a29;\n$pathwayV3-valv: #400d49;\n\n\n$PathwayColorsV3: () !default;\n$PathwayColorsV3: map-merge(\n\t(\n\t\tarr: $pathwayV3-arr,\n\t\tprev: $pathwayV3-prev,\n\t\tchd: $pathwayV3-chd,\n\t\tinvt: $pathwayV3-invt,\n\t\thf: $pathwayV3-hf,\n\t\tischem: $pathwayV3-ischem,\n\t\timag: $pathwayV3-imag,\n\t\tpulmvd: $pathwayV3-pulmvd,\n\t\tspecial: $pathwayV3-special,\n\t\tvasc: $pathwayV3-vasc,\n\t\tvalv: $pathwayV3-valv\n\n\t),\n\t$PathwayColorsV3\n);\n\n\n$twitter: #000;\n$facebook: #3b5998;\n$linkedin: #0077b5;\n$apple-store: #ea4cc0;\n$google-play: #ef6c00;\n$youtube: #bb0000;\n$instagram: #8134af;\n$SocialColors: () !default;\n$SocialColors: map-merge(\n\t(\n\t\ttwitter: $twitter,\n\t\tfacebook: $facebook,\n\t\tlinkedin: $linkedin,\n\t\tapple-store: $apple-store,\n\t\tgoogle-play: $google-play,\n\t\tyoutube: $youtube,\n\t\tinstagram: $instagram,\n\t),\n\t$SocialColors\n);\n\n\n$registry-cpmi: #f22418;\n$registry-afib:#ffb300;\n$registry-cathpci: #0086d5;\n$registry-icd: #80b800;\n$registry-impact:#4e1f73;\n$registry-pinnacle-primary:#0e4f1b;\n$registry-pinnacle-accent:#b3c4c4;\n$registry-focus:#d6560d;\n$registry-pcibleeding:#c0268e;\n$registry-laao:#00667a;\n$registry-pvi:#00947f;\n$registry-auxdata:#04adad;\n$registry-ststvt:#a20062;\n$registry-diabetes:#7893b8;\n\n$RegistryColors: () !default;\n$RegistryColors: map-merge(\n\t(\n\t\tcpmi: $registry-cpmi,\n\t\tafib: $registry-afib,\n\t\tcathpci:$registry-cathpci,\n\t\ticd:$registry-icd,\n\t\timpact:$registry-impact,\n\t\tpinnacle:$registry-pinnacle-primary,\n\t\tpinnacle-accent:$registry-pinnacle-accent,\n\t\tfocus:$registry-focus,\n\t\tpcibleeding:$registry-pcibleeding,\n\t\tlaao:$registry-laao,\n\t\tpvi:$registry-pvi,\n\t\tauxdata:$registry-auxdata,\n\t\tststvt:$registry-ststvt,\n\t\tdiabetes:$registry-diabetes\n\t),\n\t$RegistryColors\n);\n\n\n\n$journal-jc: #002e5a; \n$journal-adv:#0000FF;\t\n$journal-asia:#ec2939;\t\n$journal-tran:#1788c2;\t\n$journal-cvonc:#00ae81;\n$journal-case:#f37321;\n$journal-ep:#8a5e96;\t\n$journal-hf:#991326;\t\n$journal-invt:#038e92;\t\n$journal-imag:#c18a0e;\t\n\n$journal-label-jc: \"Journal of the American College of Cardiology\"; \n$journal-label-adv:\"JACC: Advances\";\t\n$journal-label-asia:\"JACC: Asia\";\t\n$journal-label-tran:\"JACC: Basic to Translational Science\";\t\n$journal-label-cvonc:\"JACC: CardioOncology\";\n$journal-label-case:\"JACC: Case Reports\";\n$journal-label-ep:\"JACC: Clinical Electrophysiology\";\t\n$journal-label-hf:\"JACC: Heart Failure\";\t\n$journal-label-invt:\"JACC: Cardiovascular Interventions\";\t\n$journal-label-imag:\"JACC: Cardiovascular Imaging\";\t\n\n$JournalsJACC: () !default;\n$JournalsJACC: map-merge(\n\t(\n\tjc:$journal-jc,\n\tjc-adv:$journal-adv,\n\tjc-asia:$journal-asia,\n\tjc-tran:$journal-tran,\n\tjc-cvonc:$journal-cvonc,\n\tjc-case:$journal-case,\n\tjc-ep:$journal-ep,\n\tjc-hf:$journal-hf,\n\tjc-invt:$journal-invt,\n\tjc-imag:$journal-imag,\n\n\t),\n\t$JournalsJACC\n);\n\n\n/*\n\nLink Colors: Light\n\nLink colors of a lighter shade in all of its states, default, hover, visited. Typically used to enhance visibility on dark backgrounds.\n\n$link-color-dark\t\t\t- #{$link-color-dark}; Link Color dark\t\t\t\n$link-color-dark--hover\t- #{$link-color-dark--hover}; Link Color dark--hover\t\n$link-color-dark--visited\t- #{$link-color-dark--visited}; Link Color dark--visited\t\n\nWeight:2\n\nStyleguide DesignBase.Colors.LinksLight\n */\n/*\n\nLink Colors\n\nLink colors in all of its states, default, hover, visited.\n\n\n$link-color-light\t\t\t- #{$link-color-light}; Link Color light\t\t\t\n$link-color-light--hover\t- #{$link-color-light--hover}; Link Color light--hover\t\n$link-color-light--visited\t- #{$link-color-light--visited}; Link Color light--visited\t\n$link-color-dark\t\t\t- #{$link-color-dark}; Link Color dark\t\t\t\n$link-color-dark--hover\t- #{$link-color-dark--hover}; Link Color dark--hover\t\n$link-color-dark--visited\t- #{$link-color-dark--visited}; Link Color dark--visited\t\n\nWeight:1\n\nStyleguide DesignBase.Colors.Links\n */","/* Define the \"system\" font family */\n@font-face {\n\tfont-family: system;\n\tfont-style: normal;\n\tfont-weight: 300;\n\tsrc: local('.SFNSText-Light'), local('.HelveticaNeueDeskInterface-Light'), local('.LucidaGrandeUI'),\n\t\tlocal('Ubuntu Light'), local('Segoe UI Light'), local('Roboto-Light'), local('DroidSans'), local('Tahoma');\n}\n\n$fonts: (\n\taccent: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,serif, \"slab\"',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tdisplay: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Maven Pro\",\"Muli\",\"Open Sans\",\"system\",sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tcopy: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Muli\",\"Open Sans\",\"system\",sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n\tui: (\n\t\tname: 'system',\n\t\tshort-name:\"Sys\",\n\t\tstack: '\"Open Sans\",-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif',\n\t\tweight:(\n\t\t\tlight:100,\n\t\t\tregular:300,\n\t\t\tmedium:500,\n\t\t\tbold:700,\n\t\t\txbold:900\n\t\t)\n\t),\n) !default;\n\n\n\nhtml {\n\t-webkit-font-smoothing: antialiased;\n\t-webkit-line-break: after-white-space;\n\t-webkit-locale: 'en';\n\t-webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\tline-break: white-space;\n}\n","/*\n\nRead More Arrow\n\nThis stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.\n\nMarkup:\n\n \n \n\n\n\nStyleGuide Sub.Component.Common.ReadMoreArrow \n\n*/","/*\n\n600w x 300h \n\nMarkup:\nhttps://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x300\n\n*/\n\n/*\n\n600w x 400h \n\nMarkup:\nhttps://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x400\n\n*/\n\n/*\n\n1200w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1200x300\n\n*/\n\n/*\n\n375w x 250h\n\nMarkup:\nhttps://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.375x250\n\n*/\n\n/*\n320w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.320x300\n\n*/\n\n/*\n\n1024w x 256h\n\nMarkup:\nhttps://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1024x256\n\n*/\n\n/*\nAspect 21x9\n\nMarkup:\nhttps://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.21x9\n*/\n\n/*\nAspect 16x9\n\nMarkup:\nhttps://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.16x9\n*/\n\n\n/*\n\n300w x 400h\n\nMarkup:\nhttps://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.300x400\n\n*/\n\n/*\n\nsquare\n\nMarkup:\nhttps://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.Square\n\n*/","/*\n\nMax 20 Character\n\nMarkup:\nDi dolores (20 Chars)\n\nStyleguide Sub.Placeholder.Text.20ch\n\n*/\n\n/*\n\nMax 30 Character\n\nMarkup:\nCommodi dolores (30 Characters)\n\nStyleguide Sub.Placeholder.Text.30ch\n\n*/\n\n/*\n\nMax 40 Character\n\nMarkup:\nRerum libg dero pariatur (40 Characters)\n\nStyleguide Sub.Placeholder.Text.40ch\n\n*/\n\n/*\n\nMax 60 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er (60 Characters)\n\nStyleguide Sub.Placeholder.Text.60ch\n\n*/\n\n/*\n\nMax 80 Character\n\nMarkup:\nEius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)\n\nStyleguide Sub.Placeholder.Text.80ch\n\n*/\n\n/*\n\nMax 100 Character\n\nMarkup:\nOfficia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)\n\nStyleguide Sub.Placeholder.Text.100ch\n\n*/\n\n/*\n\nMax 150 Character\n\nMarkup:\nSvel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)\n\nStyleguide Sub.Placeholder.Text.150ch\n\n*/\n\n\n/*\n\nMax 200 Character\n\nMarkup:\nDignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)\n\nStyleguide Sub.Placeholder.Text.200ch\n\n*/\n\n/*\n\nMax 250 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)\n\nStyleguide Sub.Placeholder.Text.250ch\n\n*/\n\n\n","/*\n\nGrid - Triple Card Holder\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography\n\nNOTE:\nTriple up cards with shaded background are used only in full screen pages\n\nStyleguide Sub.ClassList.Grid.Card.Split-Triple \n\n*/\n/*\n\nTriple Split with Sidebar\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left\n\nNOTE:\nTriple up splits\n\nStyleguide Sub.ClassList.Grid.TripleLG\n\n*/\n\n\n/*\n\nGrid - Card Holder - 50 split\n\nMarkup:\ncolumns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid\n\nNOTE:\nsplit layouts great for half page cards\n\nStyleguide Sub.ClassList.Grid.Split-50\n\n*/\n\n%GridList.Sub.ClassList{}\n/*\n\nGridList Triple on XL\n\nMarkup:\ncolumns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none\n\nStyleguide Sub.ClassList.Grid.TripleXL \n\n*/\n\n/*\n\nGridList Item Basic\n\nMarkup:\nflex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius\n\nNOTE:\nIcon and Header use differnt classes because they are a simpler component.\n\nStyleguide Sub.ClassList.Grid.Item \n\n*/","@forward \"_common\";\n@forward \"_content-list\";\n@forward \"_image-placeholder\";\n@forward \"_text-placholder\";\n@forward \"_class-list\";\n\n/*\n\nSubs\n\n

Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as\n sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data\n points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone\n but are composed into larger, reusable structures.

\n

These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,\n or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials\n ({{> 'Sub.X' }}) to render dynamic or variable content within patterns.

\n

Common use cases:
- {{> 'Sub.Sub.Data.Duration'}} — Displays session duration
-\n {{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier
-\n {{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button

\n

Naming Convention:
Sub.Type.Name — Organized by category (e.g., Data,\n Credit, ActionButtons, ClassList)

\n\n\n\nNOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.\n\nStyleguide Sub\n*/\n\n/*\nPlaceholders\n\nPlaceholders are just used across the styleguide. The can be either text or image stand ins for the UI.\n\nWeight: 9999\n\nStyleguide Sub.Placeholder\n*/\n\n/*\nRecipe\n\nPatterns that are used through out the refactors on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe\n*/\n\n/*\nArticles\n\nThere are multiple sub components that are used through out the most common page type on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe.Article\n*/\n\n/*\nData\n\nThere are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.\n\nWeight: 500\n\nStyleguide Sub.Data\n*/\n\n/*\nClass Lists\n\nArches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items\n\nWeight: 2000\n\nStyleguide Sub.ClassList\n*/\n\n/*\n\nRich Text \n\nMarkup:\n
\n

Lorem Ipsum

\n

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

\n

Header Level 2

\n
    \n
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. \n
  2. Aliquam tincidunt mauris eu risus.
    3. \n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

\n

Header Level 3

\n
    \n
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • \n
  • Aliquam tincidunt mauris eu risus.
    • \n
\n \n\t
\n Table of Contents\n
\n
    \n
  1. How to Prepare for the Boards
    2. \n
  2. General Principles of Cardiovascular Medicine\n
    3. \n
  3. Arrhythmias
    4. \n
  4. Coronary Artery Disease
    5. \n
  5. Heart Failure & Cardiomyopathy
    6. \n
  6. Valvular Disease
    7. \n
  7. Pericardial Disease
    8. \n
  8. Congenital Heart Disease
    9. \n
  9. Vascular Diseases
    10. \n
  10. Systemic Hypertension and Hypotension
    11. \n
  11. Pulmonary Circulation Disorders
    12. \n
  12. Systemic Disorders Affecting the Circulatory\n System
    13. \n
  13. \n Miscellaneous\n
      \n
    • Cardiovascular Genetics
      • \n
    • CPR, Post-Resuscitation Care
      • \n
    • Cardiac Critical Care
      • \n
    • Sleep Disordered Breathing
      • \n
    • Sports Cardiology
      • \n
    • Pregnancy and Cardiac Disease
      • \n
    • Cardiovascular Operative Management\n
      • \n
    • Pharmacology
      • \n
    • General Principles of Cardiovascular\n Medicine
      • \n
    \n
    14. \n
\n
\n
\n
\n\nHideCodeBlock: display_none \n\nStyleguide Sub.Placeholder.Typography\n\n*/\n"]}