@charset "UTF-8";
/** Bespoke Build **/
/**  Build Comment: including file /setup/__preheader.scss  **/
/** SCSS DOC: _preheader.scss **/
/** SCSS DOC: _helpers.scss **/
/** SCSS DOC: _utility-css.vars.scss **/
/** SCSS DOC: __var.output.scss **/
/** This needs to run later then brand **/
.wizard-nav_w-chevrons {
  --completed-color: var(--bs-grey-700,#b8b8b8);
  --active-color:var(--bs-accent,#16a385);
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
}
.wizard-nav_w-chevrons:not(.disabled)::before {
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding-inline-start: 2em;
  background-color: var(--completed-color);
  content: "";
}
.wizard-nav_w-chevrons > * {
  position: relative;
  margin-block-end: -1px;
  padding-inline-end: 1.5em;
  isolation: isolate;
  text-decoration: none;
  opacity: 0.8;
}
.wizard-nav_w-chevrons > *:not(:first-child) {
  padding-inline-start: 1.5em;
}
.wizard-nav_w-chevrons > *::before, .wizard-nav_w-chevrons > *::after {
  display: block;
  z-index: -1;
  position: absolute;
  right: 0;
  left: 0;
  width: auto;
  height: 50.5%;
  border-inline-end-color: inherit;
  border-inline-end-style: solid;
  border-inline-end-width: 1px;
  background-color: transparent;
  content: "";
}
.wizard-nav_w-chevrons > *::before:first-child, .wizard-nav_w-chevrons > *::after:first-child {
  left: -1em;
}
.wizard-nav_w-chevrons > *::before:last-child, .wizard-nav_w-chevrons > *::after:last-child {
  right: -1em;
}
.wizard-nav_w-chevrons > *:first-child::before, .wizard-nav_w-chevrons > *:first-child::after {
  border-inline-start-color: inherit;
  border-inline-start-style: solid;
  border-inline-start-width: 1px;
}
.wizard-nav_w-chevrons > *::before {
  top: 0;
  transform: matrix(1, 0, 0.5, 1, 0, 0);
  border-bottom: none;
}
.wizard-nav_w-chevrons > *::after {
  bottom: 0;
  transform: matrix(1, 0, -0.5, 1, 0, 0);
  border-top: none;
}
.wizard-nav_w-chevrons > *.active {
  color: white;
  opacity: 1;
}
.wizard-nav_w-chevrons > *.active::before, .wizard-nav_w-chevrons > *.active::after {
  background-color: var(--active-color);
}
.wizard-nav_w-chevrons > *.completed {
  opacity: 1;
}
.wizard-nav_w-chevrons > *.completed::before, .wizard-nav_w-chevrons > *.completed::after {
  background-color: var(--completed-color);
}

/*
Wizard Progress with Chevrons

This component represents a wizard Progress with chevrons. It is commonly used in multi-step processes or wizards to guide users through sequential steps. By utilizing this wizard Progress component, you can guide users through different steps or stages of a process while providing visual cues using icons and step labels.

Markup:
<ol class="bg_white br_1 br_black-4 br_solid c_black flex flex_row font-size_down-1 font_bold font_display items_center lh_0 p_0 shadow_overlap-light ul_none user-select_none w_auto wizard-nav_w-chevrons">
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle active">
        <i class="fas fa-sign-in-alt inline"></i>
        <span class="Login">Login</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Eligibility Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Progress Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login m-r_3">CMP Status</span>
    </li>
</ol>

MarkupWrapperClasses:
p_4 bg_white flex flex_column gap_4

Weight: 0

Styleguide: Component.WizardNav
*/
/*
Completed Steps

This component represents a variation of the wizard navigation with chevrons that includes an active step and completed steps. It is commonly used to indicate the progress and current status within a multi-step process or wizard.
Markup:
<ol class="bg_white br_1 br_black-4 br_solid c_black flex flex_row font-size_down-1 font_bold font_display items_center lh_0 p_0 shadow_overlap-light ul_none user-select_none w_auto wizard-nav_w-chevrons">
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle completed">
        <i class="fas fa-check inline"></i>
        <span class="Login">Login</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle active">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Eligibility Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Progress Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login m-r_3">CMP Status</span>
    </li>
</ol>


MarkupWrapperClasses:
p_4 bg_white flex flex_column gap_4

Weight: 0

Styleguide: Component.WizardNav.Completed
*/
/*
Disabled

This component represents a disabled state variation of the wizard navigation with chevrons. The disabled state is applied to the "Wizard Progress" bar, indicating that it is currently disabled and not accessible.

Markup:
<ol class="bg_black-2 br_1 br_black-3 br_solid c_black c_black-6 disabled flex flex_row font-size_down-1 font_bold font_display items_center lh_0 m-t_n3 m-x_n3 m_0 p_0 ul_none user-select_none w_auto wizard-nav_w-chevrons">
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas  fa-lock inline"></i>
        <span class="Login">Login</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas  fa-lock inline"></i>
        <span class="Login">Eligibility Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login">Progress Check</span>
    </li>
    <li class="flex flex_row gap_3 br_black-4 inline-block items_center justify_center p-y_4 self_stretch vertical-align-middle">
        <i class="fas fa-lock inline"></i>
        <span class="Login m-r_3">CMP Status</span>
    </li>
</ol>


MarkupWrapperClasses:
p_4 bg_white flex flex_column gap_4

Weight: 0

Styleguide: Component.Navigation.WizardNav.Disabled
*/
.responsive-table {
  container-type: inline-size;
}

[class^=data-label]::before {
  --data-label-font-family: var(--font-family_accent, sans-serif);
  --data-label-weight: (--font_bold, 900);
  --data-label-color: currentColor;
  margin-bottom: 0.25em;
  content: attr(data-label);
  color: color-mix(in hsl, var(--data-label-color), white 50%);
  font-weight: var(--data-label-weight);
  font-size: 0.75em;
  line-height: 1.125;
  font-family: var(--data-label-font-family);
}

.data-label-show::before {
  display: block;
}

.data-label-hide::before {
  opacity: 0.1;
}

@container (width > 768px) {
  .data-label-show\:md::before {
    display: block;
  }
  .data-label-hide\:md::before {
    display: none;
  }
}
@container (width > 1024px) {
  .data-label-show\:lg::before {
    display: block;
  }
  .data-label-hide\:lg::before {
    display: none;
  }
}
/*
Responsive Table with Mobile Card Layout

This component represents a responsive table that transforms each row into a card layout on mobile devices. It provides an optimized display for smaller screens, enhancing readability and usability.

Markup:
<div class="responsive-table">
    <table class="table table-striped">   
        <thead >
            <tr class="display_none table-row:md">
                <th class="">Fuit</th>
                <th class="">Vegitable</th>
                <th class="">Meat</th>
            </tr>
        </thead>
    <tbody class="table-body table-row-group:md flex flex_column">
        <tr class="table-row:md flex flex_column">
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Fruit">Data 1-1</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Vegitable">Data 1-2</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Meat">Data 1-3</td>
        </tr>
        <tr class="table-row:md flex flex_column">
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto"  data-label="Fruit">Data 2-1</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Vegitable">Data 2-2</td>
            <td class="data-label-show data-label-hide:md table-cell:md block flex_auto" data-label="Meat">Data 2-3</td>
        </tr>
    </tbody>
</table>
    <!-- More table rows -->
</div>

MarkupWrapperClasses:table


Weight: 0


Styleguide: Component.ResponsiveTable
*/
:root {
  --page-padding: 8px;
  --page-padding: 0.5rem;
  --outer-content-padding: 0;
  --inner-content-padding: 8px;
  --inner-content-padding: 0.5rem;
  --sidebar-width: 100%;
  --content-max-width: calc(100% - (var(--page-padding) * 2));
  --content-min-width: calc(100% - (var(--page-padding) * 2));
}
@media only screen and (width > 768px) {
  :root {
    --inner-content-padding: 1rem;
    --page-padding: 1rem;
    --outer-content-padding: 0;
    --sidebar-width: calc(300px + (var(--inner-content-padding) * 2));
  }
}
@media only screen and (width > 1024px) {
  :root {
    --outer-content-padding: 1rem;
    --sidebar-width: 300px;
  }
}

[grid-template=page-layout] {
  display: grid;
  grid-template-rows: [fullscreen-start all-start] var(--page-padding) [center-start content-start] auto [center-end content-end sidebar-secondary-start] auto [sidebar-secondary-end sidebar-primary-start] auto [sidebar-primary-end] var(--page-padding) [fullscreen-end all-end];
  grid-template-columns: [all-start fullscreen-start sidebar-secondary-start sidebar-primary-start] var(--page-padding) [content-start center-start] 1fr [content-end center-end] var(--page-padding) [fullscreen-end all-end sidebar-secondary-end sidebar-primary-end];
  row-gap: var(--page-padding);
  width: 100%;
  margin-bottom: var(--page-padding);
}
@media only screen and (width > 768px) {
  [grid-template=page-layout] {
    grid-template-rows: [all-start fullscreen-start content-start center-start sidebar-primary-start] auto [content-end sidebar-secondary-start center-end sidebar-primary-end] auto [sidebar-secondary-end fullscreen-end all-end];
    grid-template-columns: [fullscreen-start all-start sidebar-primary-start sidebar-secondary-start] var(--page-padding) [content-start] var(--sidebar-width) [sidebar-primary-end] var(--page-padding) [center-start] 1fr [center-end content-end] var(--page-padding) [fullscreen-end all-end sidebar-secondary-end];
  }
}
@media only screen and (width > 1024px) {
  [grid-template=page-layout] {
    grid-template-rows: [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];
    grid-template-columns: [fullscreen-start all-start sidebar-primary-start] var(--page-padding) [content-start] var(--sidebar-width) [sidebar-primary-end] var(--page-padding) [center-start] 1fr [center-end] var(--page-padding) [sidebar-secondary-start] var(--sidebar-width) [content-end] var(--page-padding) [fullscreen-end all-end sidebar-secondary-end];
  }
}
@media only screen and (width > 768px) {
  [grid-template=page-layout][template-option=reverse] {
    grid-template-columns: [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) [content-start center-start] 1fr [center-end] var(--page-padding) [sidebar-primary-start] var(--sidebar-width) [content-end] var(--page-padding) [fullscreen-end all-end sidebar-primary-end sidebar-secondary-end];
  }
}
@media only screen and (width > 1024px) {
  [grid-template=page-layout][template-option=reverse] {
    grid-template-rows: [all-start fullscreen-start content-start center-start sidebar-primary-start sidebar-secondary-start] auto [all-end fullscreen-end content-end center-end sidebar-primary-end sidebar-secondary-end];
    grid-template-columns: [fullscreen-start all-start sidebar-secondary-start] var(--page-padding) [content-start] var(--sidebar-width) [sidebar-secondary-end] var(--page-padding) [center-start] 1fr [center-end] var(--page-padding) [sidebar-primary-start] var(--sidebar-width) [content-end] var(--page-padding) [fullscreen-end all-end sidebar-primary-end];
  }
}

[grid-template=page-layout] > [grid-area=fullscreen], [grid-template=page-layout] > [grid-area=document] {
  grid-row: fullscreen;
  grid-column: fullscreen;
}
[grid-template=page-layout] > [grid-area=sidebar-primary] {
  grid-row: sidebar-primary;
  grid-column: sidebar-primary;
}
[grid-template=page-layout] > [grid-area=sidebar-secondary] {
  grid-row: sidebar-secondary;
  grid-column: sidebar-secondary;
}

[grid-area=content] {
  grid-row: content;
  grid-column: content;
}

[grid-template=page-layout]:has([grid-area=sidebar-primary]) > [grid-area=content],
[grid-template=page-layout][template-option=reverse]:has([grid-area=sidebar-secondary]) > [grid-area=content] {
  grid-row: content;
  grid-column: center-start/content-end;
}

[grid-template=page-layout]:has([grid-area=sidebar-secondary]) > [grid-area=content],
[grid-template=page-layout][template-option=reverse]:has([grid-area=sidebar-primary]) > [grid-area=content] {
  grid-row: content;
  grid-column: content-start/center-end;
}

[grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary]) [grid-area=content] {
  grid-row: center;
  grid-column: center;
}

@media only screen and (width > 768px) and (width < 1024px) {
  [grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary]) [grid-area=sidebar-secondary] {
    grid-column-start: center-start;
  }
  [grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary])[template-option=reverse] [grid-area=sidebar-secondary] {
    grid-column-end: center-end;
  }
  [grid-template=page-layout]:has([grid-area=sidebar-secondary]):has([grid-area=sidebar-primary]) [grid-area=sidebar-primary] {
    grid-row-end: sidebar-secondary-end;
  }
}

/*

Page Layout

Descripition:
  <ol>
    <li>
        <strong>Overall Structure:</strong>
        <ul>
        <li>Design the layout to incorporate columns for content and sidebars.</li>
        <li>
        [sidebar]
        [content]
        [sidebar]</li>
        <li>the parent uses `grid-template="page-layout"`</li>
        <li>the children uses `grid-area="content|sidebar-primary|sidebar-secondary"`</li>
        </ul>
    </li>
    <li>
      <strong>Column Configuration:</strong>
      <ul>
        <li>Utilize 'sidebar-primary', 'sidebar-secondary', and 'content' classes to designate columns within the layout.</li>
        <li>Define grid areas in the DOM structure for 'fullscreen', 'sidebar-primary','sidebar-secondary','container'.</li>
      </ul>
    </li>
    <li>
      <strong>Sidebar Specifications:</strong>
      <ul>
        <li>Sidebars are 300px wide with 1 rem padding on the left and right. (300px + 2rem)</li>
        <li>Sidebars do not respect the page margin but adhere to margins between themselves and content.</li>
        <li>Sidebars placed on the edge will extend to the edge of the container.</li>
        </ul>
        <ul>
        <strong>Responsive Design:</strong>
        <li>`Primary sidebar` remains fixed and aligned with the content area. It folds under the content on mobile viewports.</li>
        <li>`Secondary sidebar` remains fixed and shifts below the content on tablet and smaller viewports.</li>
        <li>The sidebar widths are constant when aligned with the content and changes its width to  the above content based on media breakpoints.</li>
      </ul>
    </li>
    <li>
      <strong>Content Area:</strong>
      <ul>
        <li>Allocate remaining space on the page for the content area, respecting a page margin.</li>
      </ul>
    </li>
  </ol>

Markup:
<h4>Document(fullscreen)</h4>
<section grid-template="page-layout" >
    <div grid-area="fullscreen">Document</div>
</section>
<h4>Content No Sidebars</h4>
<section grid-template="page-layout" >
    <div grid-area="content">Content</div>  
</section>
<h4>Content with Primary Sidebar</h4>
<section grid-template="page-layout" >
    <div grid-area="sidebar-primary">sidebar primary</div> 
    <div grid-area="content">content</div> 
</section>
<h4>Content with Primary Sidebar - Reverse <code>template-option="reverse"</code></h4>
<section grid-template="page-layout" template-option="reverse" >
    <div grid-area="sidebar-primary">sidebar primary (reverse)</div> 
    <div grid-area="content">content (reverse)</div> 
</section>
<h4>Content with Secondary Sidebar</h4>
<section grid-template="page-layout" >
    <div grid-area="sidebar-secondary">sidebar secondary</div> 
    <div grid-area="content">content</div> 
</section>
<h4>Content with Secondary Sidebar - Reverse <code>template-option="reverse"</code></h4>
<section grid-template="page-layout" template-option="reverse" >
    <div grid-area="sidebar-secondary">sidebar secondary</div> 
    <div grid-area="content">content</div> 
</section>
<h4>Both Sidebars</h4>
<section grid-template="page-layout" >
    <div grid-area="sidebar-secondary">sidebar secondary</div> 
    <div grid-area="content">content center</div> 
    <div grid-area="sidebar-primary">sidebar primary</div> 
</section>
<h4>Both Sidebars</h4>
<section grid-template="page-layout" template-option="reverse" >
    <div grid-area="sidebar-secondary">sidebar secondary</div> 
    <div grid-area="content">content center</div> 
    <div grid-area="sidebar-primary">sidebar primary</div> 
</section>
{{> "Component.Structures.PageLayout.demoStyles" }}

MarkupWrapperClasses: space-holder colored-zones

Weight: 0

Styleguide Component.Structures.PageLayout
*/
/*

Demo Styles

Descripition:
Styles needed for demo and to not be included in enteprise styles

Markup:
<!-- Needed for Style Guide Only --> 
<style>.space-holder section,.space-holder [item-label="section"]{padding:10px 0; background-color:rgba(128, 128, 128, 0.209); margin-bottom:10px;}
.space-holder div{min-height: 50px; color:rgb(0, 0, 0); padding:10px;}
.colored-zones [grid-area="sidebar-secondary"],.colored-zones [item-label="sidebar-secondary"] {background-color: #0080001b;}
.colored-zones [grid-area="sidebar-primary"],.colored-zones [item-label="sidebar-primary"] {background-color: #1668ff2d;}
.colored-zones [grid-area="fullscreen"],.colored-zones [item-label="fullscreen"] {background-color:#ff260040;}
.colored-zones [grid-area="content"],.colored-zones [item-label="content"] {background-color: #ffa6002b;}</style>
</style>
<!-- Needed for Style Guide Only --> 

MarkupWrapperClasses: space-holder colored-zones

Weight: 0

Styleguide Component.Structures.PageLayout.demoStyles
*/
/*
Page Layout: Article

here is a short demo of how the content will work with the page layouts.

MarkUp:
<div grid-template="page-layout">
    <article grid-area="content" id="archesArticle" class="reading-typography">
        <h1>ACCEL Lite: Top Takeaways from the ACC 2023 Guideline for Chronic CAD for the
            Practicing Clinician</h1>
        <div class="article-meta">
            <p class="date m-y_2 font_n1 font_medium">Feb 13, 2024 &nbsp;&nbsp;|&nbsp;&nbsp;<a
                    href="http://www.acc.org/Membership/Person?id=f57aa35c-1898-4282-9223-d3703d9ee35c">Alison
                    Bailey, MD, FACC</a>; <a
                    href="http://www.acc.org/Membership/Person?id=d49209b7-1a04-42c4-aed2-3a773acce82b">Salim S.
                    Virani, MD, FACC</a>; <a
                    href="http://www.acc.org/Membership/Person?id=0e80b517-78fe-4960-9a3e-6a54fcb201f6">Roger S.
                    Blumenthal, MD, FACC</a></p>
            <h5 class="m-y_0 font_bold" style="clear: left;">Podcast</h5>
           <div class="flex flex_auto flex_row items_center p-t_0:md p-x_4 bg_secondary-5">
                <section class="font_n2 self_center social">
                    <ul class="flex items_center m_0 social-bar ul_none">
                        <li class="flex_shrink m_0"><a class="bg_shade-4 font-size_down-1 block c_shade-n2 font-size_down h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0 twitter"><i class="fab fa-square-x-twitter" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="facebook c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-facebook-square" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="linkedin c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="youtube c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-youtube" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="google-play c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-google-play" aria-hidden="true"></i></a></li>
                        <li class="flex_shrink"><a class="apple-store c_shade-n2 bg_shade-4 font-size_down-1 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-apple" aria-hidden="true"></i></a></li>
                    </ul>
                </section>
                    <div class="flex flex_auto self_center m-l_4">
                        <div id="print-page" class="c_primary cursor_pointer flex" onclick="window.print()" ontouchstart="window.print()"><span class="fa fa-print flex items_center m-r_2" aria-hidden="true"></span><span class="flex font_n2 items_center">Print</span></div>
                    </div>
                    <dl id="font-resizer" class="display_none flex:md items_baseline items_center m-y_0 p-t_1">
                        <dt class="font_n2 m-r_2">Font Size</dt>
                        <dd class="font_unset"><span onclick="changeFontSize('font_unset')" class="flex font_n3 m-b_n2 m-t_3 p-x_1 lh_4 cursor_pointer">A</span></dd>
                        <dd class="font-size_down"><span onclick="changeFontSize('font-size_down')" class="flex font_n1 m-t_3 p-x_1 lh_1 cursor_pointer">A</span></dd>
                        <dd class="font-size_up"><span onclick="changeFontSize('font-size_up')" class="flex font_1 m-t_2 p-x_1 lh_1 cursor_pointer">A</span></dd>
                    </dl>
                </div>
        </div>
        <div class="the-text">
            <div>
                <p>To improve our understanding of the basic principles in the treatment and management of patients
                    with chronic heart disease, in this interview, <strong>Salim S. Virani, MD, PhD, FACC</strong>,
                    and <strong>Roger S. Blumenthal, MD, FACC</strong>, discuss top takeaways from the ACC 2023
                    Guideline for Chronic CAD. </p>
                <h3>Related References:</h3>
                <ol>
                    <li>Writing Committee Members, Virani, S. S., Newby, L. K., Arnold, S. V., Bittner, V., Brewer,
                        L. C., Demeter, S. H., Dixon, D. L., Fearon, W. F., Hess, B., Johnson, H. M., Kazi, D. S.,
                        Kolte, D., Kumbhani, D. J., LoFaso, J., Mahtta, D., Mark, D. B., Minissian, M., Navar, A.
                        M., Patel, A. R., … Williams, M. S. (2023). 2023 AHA/ACC/ACCP/ASPC/NLA/PCNA Guideline for
                        the Management of Patients With Chronic Coronary Disease: A Report of the American Heart
                        Association/American College of Cardiology Joint Committee on Clinical Practice Guidelines.
                        Journal of the American College of Cardiology, 82(9), 833–955. <a
                            href="https://doi.org/10.1016/j.jacc.2023.04.003"
                            target="_blank">https://doi.org/10.1016/j.jacc.2023.04.003</a></li>
                </ol>
                <div
                    class="bg_black-2 br-solid br_2 br_radius br_solid br_white-5 flex flex_column gap_4 m-b_5 m-t_4 m-y_5:lg p_4 shadow_overlap-light">
                    <audio class="w_100" controls="" id="html5_audio_jvtpc43x2e">
                        <source src="http://traffic.libsyn.com/accelaccorg/ACCEL_Lite_2.13.24_Final.mp3"
                            type="audio/mp3">
                        <p>Your browser doesn't support HTML5 audio. Here is a <a class="link" target="_blank"
                                href="http://traffic.libsyn.com/accelaccorg/ACCEL_Lite_2.13.24_Final.mp3">link to
                                the audio</a>instead.</p>
                    </audio>
                    <div class="grid items_center justify_center"><a href="/Latest-in-Cardiology/Features/Podcasts"
                            class="btn btn-primary font_medium m-b_n5 not-link shadow_overlap-light">Subscribe to
                            the ACCEL Lite Podcast</a></div>
                </div>
            </div>
            <p class="topics-list font_n1"><b>Clinical Topics:</b><a
                    href="/Clinical-Topics/Acute-Coronary-Syndromes">Acute Coronary Syndromes, </a><a
                    href="/Clinical-Topics/Dyslipidemia">Dyslipidemia, </a><a
                    href="/Clinical-Topics/Invasive-Cardiovascular-Angiography-and-Intervention">Invasive
                    Cardiovascular Angiography and Intervention</a></p>
            <p class="keywords-list font_n1"><b>Keywords:</b><i>ACCELLite, </i><i>Statins</i></p><br><a href="#"
                id="backToListings" class="parent back-to-listing display_none:print">&lt; Back to Listings</a><br>
        </div>
    </article>
    <div grid-area="sidebar-secondary" zone-label="sidebar" class="columns-max_20 grid flex:md flex_column gap_4">
        <aside class="suggested-materials br_1 br_solid m-b_4 p-x_3 relative reading-typography">
            <h2 class="c_primary font_1 font_bold relative t_n4 m-b_4 text_center"><span class="bg_white p-x_3">Related
                    Content</span></h2>
            <ul class="font-size_down-1 m-t_n4 ul_none">
                <li class="m-b_4"><a href="/Latest-in-Cardiology/Clinical-Trials/2023/08/23/19/37/lodestar">Rosuvastatin
                        vs. Atorvastatin Treatment in Patients With Coronary Artery Disease</a></li>
                <li class="m-b_4"><a
                        href="/Latest-in-Cardiology/Articles/2023/09/01/01/42/new-in-clinical-documents-management-of-chronic-coronary-disease-focus-of-acc-aha-multi-society-guideline">New
                        in Clinical Documents | Management of Chronic Coronary Disease Focus of ACC, AHA, Multi-Society
                        Guideline</a></li>
                <li class="m-b_4"><a
                        href="/Latest-in-Cardiology/ten-points-to-remember/2023/07/17/19/06/2023-guideline-for-chronic-coronary-disease-gl-ccd">2023
                        Multisociety Guideline for Managing Chronic Coronary Disease: Key Perspectives</a></li>
            </ul>
        </aside>
        <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
        <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
        <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"/></a>
        </div>
        <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
        </div>
        <aside id="recommended-for-you" class="tabgroup br_1 br_solid m-b_4 p-x_3 relative">
            <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span
                    class="bg_white p-x_2">Recommended Content for You</span></h2>
            <div class="tab-content authenticated-nothing-selected active">
                <article class="article-recommended-tease flex font_unset">
                    <div class="main-image"><img src="https://picsum.photos/53/53"/></div>
                    <div class="article-content p-l_3 font-size_down-2">
                        <p class="font-size_up-1">Looking for content tailored to your interests?</p>
                        <p><a href="/My-ACC/My-Profile#ClinicalTopics">Add some topics</a>to receive personalized
                            recommendations.</p>
                    </div>
                </article>
            </div>
        </aside>
        <aside class="suggested-materials br_1 br_solid m-b_4 p-x_3 relative">
            <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span class="bg_white p-x_2">Similar
                    Articles from ACC.org</span></h2>
            <ul class="CoveoResultList font-size_down-1 m-t_n4 ul_none" data-layout="list" data-wait-animation="fade"
                data-enable-infinite-scroll="false">
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Feb 06, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/02/06/14/13/accel-lite-06feb2024">ACCEL Lite:
                            Management of Worsening Heart Failure with Reduced Ejection Fraction</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Jan 23, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/01/23/15/05/accel-lite-23jan2024">ACCEL Lite: AHA
                            Late-Breaker: SELECT – Semaglutide and CV Outcomes in Patients with Overweight or Obesity
                            Who Do Not Have Diabetes</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Jan 16, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/01/16/16/11/accel-lite-16jan2024">ACCEL Lite: From
                            JACC: Managing Patients with Moderate Aortic Stenosis</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Jan 09, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/01/09/16/30/accel-lite-09jan2024">ACCEL Lite: Top
                            Takeaways from 2023: General Cardiology with Andrew Kates, MD, FACC</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span
                            class="similar-article-date">Jan 03, 2024</span><span>| </span><span
                            class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a
                            class="CoveoResultLink"
                            href="/latest-in-cardiology/articles/2024/01/03/16/20/accel-lite-03jan2024">ACCEL Lite:
                            Pitavastatin to Prevent Cardiovascular Disease in HIV Infection</a></span>
                    <div>&nbsp;</div>
                </li>
            </ul>
        </aside>
    </div>
</div>
{{> "Component.Structures.PageLayout.demoStyles" }}

MarkupWrapperClasses: colored-zones



Weight:1

Styleguide Component.Structures.PageLayout.Article
*/
/*
Advanced Double Sidebar

MarkUp:
<div grid-template="page-layout">
    <main grid-area="content" class="reading-typography">
        <h1 id="clinical-trials-research-pathway">Clinical Trials Research Pathway</h1>
        <p>The cardiology clinical trial research workforce is comprised of a wide spectrum of specialists and roles.
            ACC members, including cardiologists, nurses, physician assistants and PharmDs have opportunities to develop
            instrumental roles, including clinical research coordinator, investigator and principle investigators.</p>
        <p>The ACC is committed to promoting clinical research in cardiovascular care. They established the Clinical
            Trials Research Program to diversify leadership and workforce in cardiovascular clinical research. Over 150
            learners, including almost 100 women, have enrolled since July 2022. The ACC offers career resources and
            funding opportunities in clinical trials research.</p>
        <h3 id="education">Education</h3>
        <ul>
            <li><a href="#">Webinar: ACC Research, Clinical Trials and Publishing Series</a></li>
            <li><a href="#">Live Education: How to Become a CV Investigator</a></li>
            <li><a href="#">Live Education: Clinical Trials Research: Upping Your Game Program</a></li>
        </ul>
        <h3 id="acc-award-opportunities">ACC Award Opportunities</h3>
        <ul>
            <li><a href="#">Douglas P. Zipes Distinguished Young Scientist Award</a></li>
            <li><a href="#">Young Investigator Awards at ACC.23/WCC</a></li>
            <li><a href="#">ACC/ABC Merck Research Fellowship Awards</a></li>
            <li><a href="#">ACC/ABC Bristol Myers Squibb Research Fellowship Awards</a></li>
        </ul>
        <h3 id="publications--articles">Publications &amp; Articles</h3>
        <ul>
            <li><a href="#">Gender Diversity in Cardiovascular Trial Research Begins at the Top (JACC)</a></li>
            <li><a href="#">Clinical Research in a Big Data, High-Tech World (Cardiology)</a></li>
        </ul>
        <hr>
        <p><strong>Explore Cardiovascular Pathways:</strong><a href="../CardiologyCareers_Physician/">Physician</a><code
                class="language-plaintext highlighter-rouge">|</code><a href="../CardiologyCareers_CVTeam/">CV
                Team</a><code class="language-plaintext highlighter-rouge">|</code><a
                href="../CardiologyCareers_ClinicalTrial/">Clinical Trials Research</a></p>
    </main>
    <section grid-area="sidebar-primary">
        <nav class="nav-sub bg_primary c_white font_2 font_ui">
            <ul class="ul_none flex_column flex">
                <li class="nav-item font-size_up" data-nav="parent">
                    <div class="bg_black-4"><a href="../CardiologyCareers"
                            class="text-shadow_black-1 block w_100 c_white p-y_2 p-x_4 w_100 h:c_white inline-block h:underline self_center">A
                            Career in Cardiology</a></div>
                </li>
                <li class="nav-item" data-nav="child">
                    <div class="flex flex_row">
                        <div
                            class="br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse"
                                data-bs-target=".howToStart" aria-controls=".howToStart"><span class="fa-stack"><i
                                        class="fas fa-minus fa-stack-1x" aria-hidden="true"></i><i
                                        class="fas fa-minus rotate_90 a:rotation fa-stack-1x"
                                        aria-hidden="true"></i></span></div>
                        </div>
                        <div class="flex_auto self_center"><a href="../CardiologyCareers_Start/"
                                class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">How
                                to Start</a>
                            <nav class="nav-sub-child bg_white-2 font-size_down collapse howToStart show">
                                <ul class="ul_none flex_column flex">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a href="../CardiologyCareers_Physician/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Physician
                                                    Pathway</a></div>
                                        </div>
                                    </li>
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a href="../CardiologyCareers_CVTeam/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">CV
                                                    Team Pathway</a></div>
                                        </div>
                                    </li>
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a
                                                    href="../CardiologyCareers_ClinicalTrial/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Clinical
                                                    Trial Pathway</a></div>
                                        </div>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </li>
                <li class="nav-item" data-nav="child">
                    <div class="flex flex_row">
                        <div class="flex flex_column flex_none justify_start">
                            <div class="flex_none"><span class="fa-stack"><i class="fas fa-spacer fa-stack-1x"
                                        aria-hidden="true"></i></span></div>
                        </div>
                        <div class="flex_auto self_center"><a href="../CardiologyCareers_Development"
                                class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Development
                                &amp; Leadership Programs</a></div>
                    </div>
                </li>
                <li class="nav-item" data-nav="child">
                    <div class="flex flex_row">
                        <div
                            class="br-r_1 br_solid br_white-2 flex flex_column flex_none justify_start text-shadow_black-n1 c_white">
                            <div class="flex_none" aria-expanded="false" data-bs-toggle="collapse"
                                data-bs-target=".childNavCollapse" aria-controls=".childNavCollapse"><span
                                    class="fa-stack"><i class="fas fa-minus fa-stack-1x" aria-hidden="true"></i><i
                                        class="fas fa-minus rotate_90 a:rotation fa-stack-1x"
                                        aria-hidden="true"></i></span></div>
                        </div>
                        <div class="flex_auto self_center"><a
                                class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Resources</a>
                            <nav class="nav-sub-child bg_white-2 font-size_down collapse childNavCollapse show">
                                <ul class="ul_none flex_column flex">
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a href="../CardiologyCareers_Gallery/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Video
                                                    Gallery</a></div>
                                        </div>
                                    </li>
                                    <li class="nav-item" data-nav="child">
                                        <div class="flex flex_row">
                                            <div class="flex flex_column flex_none justify_start">
                                                <div class="flex_none"><span class="fa-stack"><i
                                                            class="fas fa-spacer fa-stack-1x"
                                                            aria-hidden="true"></i></span></div>
                                            </div>
                                            <div class="flex_auto self_center"><a
                                                    href="../CardiologyCareers_PersonalStory/"
                                                    class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Personal
                                                    Stories</a></div>
                                        </div>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </li>
                <li class="nav-item" data-nav="child">
                    <div class="flex flex_row">
                        <div class="flex flex_column flex_none justify_start">
                            <div class="flex_none"><span class="fa-stack"><i class="fas fa-spacer fa-stack-1x"
                                        aria-hidden="true"></i></span></div>
                        </div>
                        <div class="flex_auto self_center"><a href="../CardiologyCareers_ContactUs"
                                class="text-shadow_black-1 c_white-9 p-y_2 p-x_3 w_100 h:c_white inline-block h:underline self_center a:bg_black-3">Contact
                                Us</a></div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
            <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
            <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"></a>
            </div>
            <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
            </div>
    </section>
    <div grid-area="sidebar-secondary" zone-label="sidebar" class="columns-max_20 grid flex:md flex_column gap_4">
        <aside class="suggested-materials br_1 br_solid br_black-6 m-b_4 p-x_3 relative reading-typography">
            <h2 class="c_primary font_1 font_bold relative t_n4 m-b_4 text_center"><span class="bg_white p-x_3">Related
                    Content</span></h2>
            <ul class="font-size_down-1 m-t_n4 ul_none">
                <li class="m-b_4"><a href="/Latest-in-Cardiology/Clinical-Trials/2023/08/23/19/37/lodestar">Rosuvastatin
                        vs. Atorvastatin Treatment in Patients With Coronary Artery Disease</a></li>
                <li class="m-b_4"><a href="/Latest-in-Cardiology/Articles/2023/09/01/01/42/new-in-clinical-documents-management-of-chronic-coronary-disease-focus-of-acc-aha-multi-society-guideline">New
                        in Clinical Documents | Management of Chronic Coronary Disease Focus of ACC, AHA, Multi-Society
                        Guideline</a></li>
                <li class="m-b_4"><a href="/Latest-in-Cardiology/ten-points-to-remember/2023/07/17/19/06/2023-guideline-for-chronic-coronary-disease-gl-ccd">2023
                        Multisociety Guideline for Managing Chronic Coronary Disease: Key Perspectives</a></li>
            </ul>
        </aside>
        <div class="br_1 br_black-2 br_radius br_solid p-y_4 p_2 reading-typography ">
        <div id="Adslot-x" style="width:300px; height:250px;" class="bg_acc m_auto max-w_100">
        <a href="https://www.acc.org/" target="_blank"><img src="https://picsum.photos/300/250"></a>
        </div>
        <small class="block c_black-5 font_n2 m-b_n3 m-t_2 text_center uppercase">advertisment</small>
        </div>
        <aside id="recommended-for-you" class="tabgroup br_1 br_solid br_black-6 m-b_4 p-x_3 relative">
            <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span class="bg_white p-x_2">Recommended Content for You</span></h2>
            <div class="tab-content authenticated-nothing-selected active">
                <article class="article-recommended-tease flex font_unset">
                    <div class="main-image"><img src="https://picsum.photos/53/53"></div>
                    <div class="article-content p-l_3 font-size_down-2">
                        <p class="font-size_up-1">Looking for content tailored to your interests?</p>
                        <p><a href="/My-ACC/My-Profile#ClinicalTopics">Add some topics</a>to receive personalized
                            recommendations.</p>
                    </div>
                </article>
            </div>
        </aside>
        <aside class="suggested-materials br_1 br_solid br_black-6 m-b_4 p-x_3 relative">
            <h2 class="c_primary font_1 font_bold relative t_n4 text_center"><span class="bg_white p-x_2">Similar
                    Articles from ACC.org</span></h2>
            <ul class="CoveoResultList font-size_down-1 m-t_n4 ul_none" data-layout="list" data-wait-animation="fade" data-enable-infinite-scroll="false">
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Feb 06, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/02/06/14/13/accel-lite-06feb2024">ACCEL Lite:
                            Management of Worsening Heart Failure with Reduced Ejection Fraction</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 23, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/23/15/05/accel-lite-23jan2024">ACCEL Lite: AHA
                            Late-Breaker: SELECT – Semaglutide and CV Outcomes in Patients with Overweight or Obesity
                            Who Do Not Have Diabetes</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 16, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/16/16/11/accel-lite-16jan2024">ACCEL Lite: From
                            JACC: Managing Patients with Moderate Aortic Stenosis</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 09, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/09/16/30/accel-lite-09jan2024">ACCEL Lite: Top
                            Takeaways from 2023: General Cardiology with Andrew Kates, MD, FACC</a></span>
                    <div>&nbsp;</div>
                </li>
                <li class="flex flex_column"><span class="similar-article-header font_bold"><span class="similar-article-date">Jan 03, 2024</span><span>| </span><span class="similar-article-type">Podcast </span></span><span class="similar-article-link"><a class="CoveoResultLink" href="/latest-in-cardiology/articles/2024/01/03/16/20/accel-lite-03jan2024">ACCEL Lite:
                            Pitavastatin to Prevent Cardiovascular Disease in HIV Infection</a></span>
                    <div>&nbsp;</div>
                </li>
            </ul>
        </aside>
    </div>
</div>
{{> "Component.Structures.PageLayout.demoStyles" }}

MarkupWrapperClasses: colored-zones



Weight:100

Styleguide Component.Structures.PageLayout.AdvancePage
*/
[grid-template] {
  display: grid;
}

[grid-template=hero-image-cta] {
  --container-padding: 8px;
  --container-padding: 0.5rem;
  --hero-overlay-color: var(--acc);
  --hero-overlay-opacity:.85;
  --hero-title-overlay: hsla( var(--acc-h),var(--acc-s),var(--acc-l), var(--hero-overlay-opacity) );
  --breadcrumb-height: 40px;
  --breadcrumb-height: 2.5rem;
  grid-template-rows: [all-start breadcrumb-start] minmax(var(--breadcrumb-height, 2.5rem), min-content) [breadcrumb-end] var(--container-padding, 0) [title-start content-start] auto [title-end] calc(var(--container-padding, 0) * 0.5) [cta-start] auto [cta-end content-end] var(--container-padding, 0) [all-end];
  grid-template-columns: [all-start breadcrumb-start title-start] var(--container-padding, 0) [content-start cta-start] 1fr [cta-end title-end content-end] var(--container-padding, 0) [all-end breadcrumb-end];
}
@media (width > 768px) {
  [grid-template=hero-image-cta] {
    --container-padding: 1rem;
    grid-template-rows: [all-start breadcrumb-start] var(--breadcrumb-height, 2.5rem) [breadcrumb-end] calc(var(--container-padding, 0) * 0.5) [title-start cta-start content-start] auto [title-end cta-end content-end] var(--container-padding, 0) [all-end];
    grid-template-columns: [all-start breadcrumb-start title-start] var(--container-padding, 0) [content-start] 1fr [title-end] var(--container-padding, 0) [cta-start] 1fr [cta-end content-end] var(--container-padding, 0) [all-end breadcrumb-end];
  }
}
@media (width > 1024px) {
  [grid-template=hero-image-cta] {
    --container-padding: 2rem;
    grid-template-columns: [all-start breadcrumb-start title-start] var(--container-padding, 0) [content-start] 3fr [title-end] 1fr [cta-start] 3fr [cta-end content-end] var(--container-padding, 0) [all-end breadcrumb-end];
  }
}
[grid-template=hero-image-cta][template-option=micro] {
  grid-template-rows: [all-start] var(--container-padding, 0) [title-start content-start] auto [title-end] calc(var(--container-padding, 0) * 0.5) [cta-start] auto [cta-end content-end] var(--container-padding, 0) [all-end];
  grid-template-columns: [all-start title-start] var(--container-padding, 0) [content-start cta-start] 1fr [cta-end title-end content-end] var(--container-padding, 0) [all-end];
}
@media (width > 768px) {
  [grid-template=hero-image-cta][template-option=micro] {
    grid-template-rows: [all-start] calc(var(--container-padding, 0) * 0.5) [title-start cta-start content-start] auto [title-end cta-end content-end] calc(var(--container-padding, 0) * 0.5) [all-end];
    grid-template-columns: [all-start title-start] var(--container-padding, 0) [content-start] 1fr [title-end] var(--container-padding, 0) [cta-start] min-content [cta-end content-end] var(--container-padding, 0) [all-end];
  }
}
@media (width > 1024px) {
  [grid-template=hero-image-cta][template-option=micro] {
    grid-template-columns: [all-start title-start] var(--container-padding, 0) [content-start] 1fr [title-end] var(--container-padding, 0) [cta-start] min-content [cta-end content-end] var(--container-padding, 0) [all-end];
  }
}

[grid-template=hero-image-cta] {
  overflow: clip;
  isolation: isolate;
}
[grid-template=hero-image-cta] [grid-area] {
  z-index: 1;
}
[grid-template=hero-image-cta] [grid-area=background] {
  z-index: -1;
  grid-row: all;
  grid-column: all;
}
[grid-template=hero-image-cta] [grid-area=breadcrumb] {
  grid-row: breadcrumb;
  grid-column: breadcrumb;
}
[grid-template=hero-image-cta] [grid-area=title] {
  grid-row: title;
  grid-column: title;
}
[grid-template=hero-image-cta] [grid-area=cta] {
  grid-row: cta;
  grid-column: cta;
}

[data-item=hero-image-breadcrumb-nav], [data-item=cta-callout] {
  position: relative;
  isolation: isolate;
}
[data-item=hero-image-breadcrumb-nav]::after, [data-item=cta-callout]::after {
  z-index: -1;
  position: absolute;
  inset: 0px;
  background-color: var(--hero-overlay-color);
  background-blend-mode: multiply;
  content: "";
  mix-blend-mode: multiply;
  opacity: var(--hero-overlay-opacity);
}

[data-item=hero-title] {
  display: flex;
  display: inline;
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding-inline: 0 0.25em;
  padding-inline-start: 16px;
  padding-inline-start: 1rem;
  padding-block: 0.125em;
  overflow: clip;
  background-color: var(--hero-title-overlay);
  isolation: isolate;
  line-height: 1.425em;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
}

[data-item=hero-image-breadcrumb-nav]::after {
  border-end-end-radius: 8px;
  border-end-end-radius: 0.5rem;
}

[data-item=cta-callout]::after {
  border-radius: 0.5rem;
}

/*
MicroSite 

<div class="reading-typography"><p>A MicroSite <strong>(Conversion Focused Sub-Section)</strong>, exists within a the larger website, but offers a strategic approach for encompassing a semi-independent initiative of the organization, all while retaining a robust link to the main site. While it upholds most of the branding guidelines of the main site, a MicroSite has its unique design, acting as a concentrated unit for user context.
</p><p>The creation of a MicroSite enables businesses to effectively spotlight specific campaigns or products with a distinctive touch, cater to particular audience segments, and maintain a uniform user experience. Despite living relatively independently from the main site's structure and supplementary content, it still provides fluid navigation and integration with the primary website.
</p><p>This arrangement presents a flexible and specialized platform for delivering customized messaging, engaging users in a personalized way, and accomplishing specific objectives that may necessitate a unique online presence.
</p><h4>A Microsite Must</h4><ul><li>Have a user goal</li><li>Have a call to action for conversion.</li><li>Have a focused audience so the voice can be taylored to the action.</li><ul></div>

Styleguide Component.MicroSite

*/
/*
Hero Image with CTA


The "Hero Image with CTA" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.

Markup:
<div grid-template="hero-image-cta" id="hero" class="font_3:lg font_2:md font_1">
    <div grid-area="background" class="col_all overflow_hidden row_all">    
      {{> "Component.MicroSite.Sub.HeroImage.BackgroundImage" modifier_class="" }}
    </div>
    <div grid-area="breadcrumb" class="z_1 flex flex_row justify_start">
        {{> "Component.MicroSite.Sub.HeroImage.BreadcrumbNav" modifier_class="font-size_down-2" }}
    </div>
    <div grid-area="title" class="relative font-size_up-2 m-y_6:lg m-y_5:md">
        {{> "Component.MicroSite.Sub.PageTitleTreatment" modifier_class="font-size_up-2 m_0" }}
    </div>
    <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
        {{> "Component.MicroSite.Sub.HeroImage.CTAHighlight" modifier_class="z_1 font-size_0" }}
    </div>
</div>

MarkupWrapperClasses: wrapper-container

SubComponents:
Component.MicroSite.Sub.HeroImage.BackgroundImage - Hero Background Image
Component.MicroSite.Sub.HeroImage.BreadcrumbNav - Hero Breadcrumb Navigation
Component.MicroSite.Sub.PageTitleTreatment - Page Title Treatment
Component.MicroSite.Sub.HeroImage.CTAHighlight - CTA Highlight

Weight: 0

NOTE: The Hero Image with CTA component is used to create impactful hero sections with a compelling call-to-action overlay. It combines a visually appealing hero image with a title, description, and call-to-action button.



Styleguide Component.MicroSite.HeroImageWithCTA

*/
/*
Micro Branding with CTA Button


The "Hero Image with CTA" component signifies a hero section that includes a superimposed call-to-action. This element typically combines a return feature to the main site and should be exclusively used on microsites.

Markup:
<div grid-template="hero-image-cta" template-option="micro" class="isolation_isolate overflow_hidden relative"> 
  {{> "Component.MicroSite.Sub.HeroImage.BackgroundImage" }}
  <div grid-area="title">
    {{> "Component.MicroSite.Sub.PageTitleTreatmentMicro" modifier_class="m_0 m-y_3 m-y_0:lg" }}
    </div>
    <div grid-area="cta" class="relative font-size_down-1 grid justify_center items_center">
      {{> "Component.MicroSite.Sub.HeroImage.CTAButton" modifier_class=""}}
  </div>
</div>

MarkupWrapperClasses: wrapper-container

SubComponents:
Component.MicroSite.Sub.HeroImage.BackgroundImage - Background Image
Component.MicroSite.Sub.PageTitleTreatment - Page Title
Component.MicroSite.Sub.HeroImage.CTAButton - CTA Button

Weight: 0

NOTE: Micro Branding is used to create cohesive experiance by continuing the branding to children pages of a microiste. It combines a slice of hero image with just the single call-to-action button.



Styleguide Component.MicroSite.MicroBrandingWithButtton

*/
/*
CTA Highlight

The CTA Highlight component is used to create a highlighted call-to-action section.

Modifier: inverted - This modifier class is used to create an inverted version of the CTA Highlight component, which can be applied when a dark background is present.

Markup:
<div data-item="cta-callout" class="{{modifier_class}} c_white color_inherit font-size_0 isolation_isolate p_4 p_5:lg relative z_1">
      <h2 data-item="cta-title" class="font_medium m-t_0 m-b_3 font_display font-size_up-2">Call to Action Title (CTA). You Should be Engaged</h2>
      <p data-item="cta-description" class="font-size_up-0 lh_3">CTA reasoning background or message to convince a user to engage with the goal of the page and interact with the CTA Button. Officiis eum nemo id minus ut itaque et et beatae. Voluptas est incidunt.</p>
      {{> Component.MicroSite.Sub.HeroImage.CTAButton  modifier_class=""}}
</div>


MarkupWrapperClasses: 

Weight: 0

NOTE: The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background.


Styleguide  Component.MicroSite.Sub.HeroImage.CTAHighlight

*/
/*
CTA Button

The CTA Button is just a centered button for the highlighted call-to-action.


Markup:
<div class="grid justify_center items_center {{modifier_class}}">
  <button class="br_white-3 btn btn-primary c_white expanded-click-area shadow_overlap-bold">CTA ACTION LABEL</button>
</div>

MarkupWrapperClasses: 

Weight: 0

NOTE: The CTA Highlight component is effective for drawing attention to important calls-to-action on a website or application. When using the 'inverted' modifier class, it provides a visually striking effect when placed on a dark background.


Styleguide  Component.MicroSite.Sub.HeroImage.CTAButton 

*/
/*
Hero Image Breadcrumb Nav

The Hero Image Breadcrumb Nav is a sub-component used within the Hero Image with CTA component to display a breadcrumb navigation on top of the hero image.

Markup:
<nav data-item="hero-image-breadcrumb-nav" class="{{modifier_class}} relative isolation_isolate p-y_3 p-x_4 c_white-8">
	<a href="#" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-arrow-left"></i> Back</a> |
	The Parent of This Micro Section of the Site</a>
</nav>

MarkupWrapperClasses: 

Weight: 0

NOTE: The Hero Image Breadcrumb Nav sub-component is used to provide breadcrumb navigation on top of the hero image within the Hero Image with CTA component. It focuses on displaying the immediate parent only in the breadcrumb trail.


Styleguide  Component.MicroSite.Sub.HeroImage.BreadcrumbNav

*/
/*
Page Title Treatment

MicroSite Page Title Treatment component is used to style and emphasize page titles.

Modifier: font-color - This modifier class is used to customize the font color of the page title.

Markup:
<h1 data-item="hero-title"
  class="{{modifier_class}} c_white isolation_isolate relative">
  Hero Statement Mision of  the Page &trade;</h1>


MarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40

Weight: 0

NOTE: The Page Title Treatment component is ideal for styling and emphasizing page titles. The "font-color" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience.


Styleguide   Component.MicroSite.Sub.PageTitleTreatment

*/
/*
Page Title Treatment Micro

Micro MicroSite Page Title Treatment has a back button in mobile.

Markup:
<h1 data-item="hero-title"
  class="{{modifier_class}} c_white isolation_isolate relative">
  <span class="display_none:lg"><a href="#RootPage" class="h:c_white h:underline font_bold c_white-8 expanded-click-area h:c_white"><i class="fas fa-solid fa-arrow-left m-l_n3" aria-hidden="true"></i></a></span>
  <span class="text display_contents">Hero Statement Mision of  the Page&trade;<span>
</h1>


MarkupWrapperClasses: bg_hf-2 p_5 hero max-w_40

Weight: 0

NOTE: The Page Title Treatment component is ideal for styling and emphasizing page titles. The "font-color" modifier can be applied to customize the font color of the page title. This component is commonly used in MicroSites to provide a special impact and lightly brand them as a contained experience.


Styleguide   Component.MicroSite.Sub.PageTitleTreatmentMicro

*/
/*
Responsive Hero Image

The Responsive Hero Image component is used to display a responsive hero image that adapts to different screen sizes. the sizes are 1200/300, 1024/256,600/300, & 320/300


Markup:
  <picture data-item="responsive-hero-image" class="absolute bg_cover flex flex_column inset_0 {{modifier_class}}">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1200x300.png"
      media="(min-width: 1024px)" class="display_none">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/1024x256.png"
      media="(min-width: 768px)" class="display_none">
    <source srcset="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/600x300.png"
      media="(min-width: 400px)" class="display_none">
    <img src="https://acc-style.github.io/PrototypingACCorg/assets/images/ACC/Join/320x450.png" alt="Hero Image"
      class="flex_100">
  </picture>

MarkupWrapperClasses: columns_1 grid relative rows_1 w_100 overflow_hidden p_6

Weight: 0

NOTE: It utilizes the "Lorem Picsum" service for placeholder images. Replace all 4 images for best results.


Styleguide Component.MicroSite.Sub.HeroImage.BackgroundImage


*/
/*
Triple Pricing Bento

<div class="reading-typography"> In web or UI design, this approach visually arranges content into clearly defined blocks or modules—usually of equal or complementary sizes—within a grid. It helps present multiple options, categories, or pieces of information in a compact, organized, and visually balanced way, often enhancing scannability and user choice.</p><p><strong>Use this component to display structured pricing options for multiple membership types.</strong> It visually distinguishes tiers like Member, Nonmember, and Fellows in Training or Emeritus Members using clear headings, large pricing, and consistent formatting.<ul><li>Adapts layout responsively from side-by-side (desktop) to stacked (mobile).</li><li>Color-coded backgrounds improve segmentation.</li><li>Use when side-by-side price comparisons are needed.</li><li>Avoid when only one price is shown — use a simple card instead.</li></ul></p></div>

Markup:
<ul class="gap_4 gap_4:md gap_5:lg ul_none triple-bento font_n2 font_n1:md font_0:lg">
{{> Sub.Recipe.PriceTable.Bento.Card   modifier_class="primary"}}
{{> Sub.Recipe.PriceTable.Bento.Card   modifier_class="secondary"}}
{{> Sub.Recipe.PriceTable.Bento.Card  modifier_class="accent"}}
</ul>

SubComponents:
Sub.Recipe.PriceTable.Bento.Card  - Price Card

MarkupWrapperClasses: reading-typography m-b_4 wrapper-container

Weight: 0

Styleguide Recipes.PriceTable.Bento

*/
/*
Price Bento Price Card

<p>The Bento Pricing Card is a flexible pricing presentation component designed for purchase plan options. It supports multiple price tiers and optional notes, accommodating varied member types and durations. This component ensures consistent styling, responsive behavior, and semantic clarity across different purchase contexts.</p><p><strong>Use when:</strong> you need to visually present one or more pricing options with supporting content like membership type and terms.</p><p><strong>Do not use when:</strong> displaying simple, single-line prices or ungrouped price information not related to purchasing tiers.</p>

primary         - Used for Member
secondary         - Used for Non-Member
accent         - Used for Any Reduced Pricing


Markup: 
<li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_{{ modifier_class }}-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">{{ modifier_class }}</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>       
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li>

Note: This is a strict structured component so all cards must match eachother content models. Keep it Apples to Apples!

Weight: 0

StyleGuide Sub.Recipe.PriceTable.Bento.Card 

*/
.triple-bento {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 100%;
  grid-template-areas: "a" "b" "c";
}
.triple-bento li:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}
.triple-bento li:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: b;
}
.triple-bento li:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: c;
}

@container ((width > 460px) and (width < 1024px)  ) {
  .triple-bento {
    grid-template-rows: auto auto;
    grid-template-columns: 7fr 5fr;
    grid-template-areas: "a c" "b c";
  }
}
@container ( width > 1024px ) {
  .triple-bento {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "a b c";
  }
}
.product-grid {
  --matrix-height-count:4;
  display: grid;
  grid-template-rows: repeat(var(--matrix-height-count), max-content);
}

.topic-subgrid {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--matrix-height-count);
}

/*
Product Matrix

<p>The Product Matrix component displays SAP product tracks in a responsive grid layout, allowing users to quickly view program names, focus areas, event dates, and relevant topics. Each product is color-coded according to its associated clinical pathway for immediate recognition and clarity. Subgrids are employed within each product block to ensure content stacks accessibly and cleanly from desktop to mobile views, maintaining visual hierarchy and legibility.</p><p>This component is ideal for organizing multiple learning tracks or modules with aligned schedules and curriculum. Use when visual grouping and intuitive scanning of multiple product options are required.</p>

Markup:
<div class="copy-me wrapper-container">
    <h2>Remind Yourself of the 2025 CMP Dates &amp; Topics</h2>
    <ul class="product-grid ul_none m_0 gap_2 gap_3:md columns_4:lg columns_2:md columns_1 m-t_4:lg m-t_2 font_1:lg font_0">
        {{> Sub.CMP.ProductMatrix.Item modifier_class="special" }}
        {{> Sub.CMP.ProductMatrix.Item modifier_class="arr" }}
        {{> Sub.CMP.ProductMatrix.Item modifier_class="chd" }}
        {{> Sub.CMP.ProductMatrix.Item modifier_class="vasc" }}
    </ul>
</div>


MarkupWrapperClasses: p_4

SubComponents:
Sub.CMP.ProductMatrix.Item       - Product Matrix Item

Weight: 0

Styleguide: Recipes.CMP.ProductMatrix
*/
/*
Product Matrix Item

<p>This component represents a single SAP product within the Product Matrix. It includes a visually distinct header with branding, a title, and clinical focus. Event dates and curriculum topics are presented in vertically stacked sections, and a call-to-action link at the bottom directs users to the full SAP page. Background and text colors reflect clinical identity, aiding recognition and scanning. Grid and spacing utilities ensure responsive behavior across breakpoints.</p><p>Use this component inside a larger Product Matrix layout when promoting individual learning tracks. Ideal for overview pages or dashboards where clear segmentation by topic is required.</p>

.special            - this pathway color represents ACCSAP
.invt            - this pathway color represents CATHSAP
.arr            - this pathway color represents EPSAP
.hf            - this pathway color represents HFSAP

Markup:
<li class="topic-subgrid m_0 p_0 gap_1 gap_2:md relative">
    <div class="bg_acc-n2 grid items_center p_4 relative overflow_hidden isolation_isolate">
        <a href="~/link.aspx?_id=6ED43FF8C308457E9DA84DC0C4FEF02E&amp;_z=z" class="block c_acc-1 expanded-click-area h:c_acc-4 h:undecorated not-link">
            <h4 class="font_medium c_white lh_0 m_0 font-size_up-1 uppercase z_3"><span class="font_xbold c_{{modifier_class}}-2">ProductName</span>SAP</h4>
            <span class="wrap c_white lh_2 font-size_down-1 block">Product Tagline</span>
            <i class="fa-solid fa-arrow-circle-right fa-3x absolute c_inherit h:c_inherit b_n3 r_n2 z_0" aria-hidden="true"></i>
        </a>
    </div>
    <div class="bg_{{modifier_class}}-3 p-x_4 p-y_3 p-y_4:md">
        <ul class="ul_none m_0">
            <li class="relative"><strong>September 13 - 21, 2025</strong></li>
            <li class="relative"><strong>November 15 - 23, 2025</strong></li>
        </ul>
    </div>
    <div class="bg_{{modifier_class}}-3 p-x_4 p-y_3 p-y_4:md">
        <ul class="ul_square m_0 p-l_4">
            <li>Case Selection &amp; Management</li>
        </ul>
    </div>
    <div class="bg_{{modifier_class}}-3  font_n1 p-x_4 p-y_3 p-y_4:md relative">
        <a href="~/link.aspx?_id=6ED43FF8C308457E9DA84DC0C4FEF02E&amp;_z=z" class="grid items_center justify_center text_center c_acc-n1 h:c_acc-n3 expanded-click-area-after bg_white-1 h:bg_white-4 inset_0 absolute"><span> Go to SAP Page</span></a>
    </div>
</li>

Note:
<p>This component will render incorrectly if it is not within the parent grid that helps with its spacing and alignments.</p>

MarkupWrapperClasses: p_4

Weight: 0

Styleguide: Sub.CMP.ProductMatrix.Item
*/
/*# sourceMappingURL=maps/bespoke_all.css.map */